:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-soft: #f2f5f9;
  --surface-quiet: #edf1f6;
  --line-quiet: #e8edf4;
  --border: #dfe6ef;
  --border-strong: #cbd5e1;
  --text: #172033;
  --text-strong: #0f172a;
  --muted: #66758b;
  --muted-soft: #8390a3;
  --primary: #2457d6;
  --primary-hover: #1f49b9;
  --primary-soft: #edf3ff;
  --success: #147846;
  --success-soft: #eef8f2;
  --danger: #b4232f;
  --danger-soft: #fff2f2;
  --warning-soft: #fff7df;
  --shadow-editor: 0 18px 42px rgba(16, 20, 29, 0.14);
  --shadow-focus: 0 1px 2px rgba(15, 23, 42, 0.05);

  --type-micro: 0.72rem;
  --type-small: 0.82rem;
  --type-body: 0.95rem;
  --type-lead: 1.02rem;
  --type-section: 1rem;
  --type-panel-title: 1.18rem;
  --type-title: 1.38rem;
  --type-nav-title: 1.08rem;

  --code-bg: #10141d;
  --code-bg-soft: #151a25;
  --code-border: #252c3a;
  --code-text: #e7edf7;
  --kw: #b99cff;
  --string: #9dd77d;
  --number: #efb76c;
  --fn: #78c7ff;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
textarea,
input {
  font: inherit;
}

button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 13px;
  background: var(--surface-quiet);
  color: #2d3f5f;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

button:hover:not(:disabled) {
  background: #e4e9f1;
}

button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

button:focus-visible,
textarea:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(36, 87, 214, 0.24);
  outline-offset: 2px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  color: var(--text-strong);
  font-size: var(--type-nav-title);
  font-weight: 780;
  line-height: 1.18;
}

h2 {
  margin-bottom: 10px;
  color: var(--text-strong);
  font-size: var(--type-title);
  font-weight: 780;
  line-height: 1.18;
}

h3 {
  margin-bottom: 8px;
  color: var(--text-strong);
  font-size: var(--type-section);
  font-weight: 740;
  line-height: 1.28;
}

ul {
  padding-left: 18px;
}

.muted {
  color: var(--muted);
}

.is-hidden {
  display: none !important;
}

.control-strip {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 12px 16px;
  align-items: center;
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 12px 24px;
  background: rgba(247, 248, 250, 0.94);
  box-shadow: inset 0 -1px 0 rgba(203, 213, 225, 0.54);
  backdrop-filter: blur(12px);
}

.control-primary {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.brand-lockup {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.product-logo {
  display: block;
  width: clamp(108px, 10vw, 142px);
  height: auto;
  max-height: 42px;
  object-fit: contain;
}

.lesson-nav-context {
  min-width: 0;
}

.progress-label,
.workspace-kicker,
.runtime-label {
  margin-bottom: 6px;
  color: #7a8798;
  font-size: var(--type-micro);
  font-weight: 640;
  letter-spacing: 0;
  text-transform: none;
}

.lesson-progress-bar {
  width: min(280px, 100%);
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ebf2;
}

.lesson-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.25s ease;
}

.mode-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: #e8edf5;
}

.mode-tab {
  min-width: 62px;
  min-height: 32px;
  padding: 6px 10px;
  background: transparent;
  color: var(--muted);
}

.mode-tab.active,
.mode-tab.active:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(19, 43, 92, 0.18);
}

.control-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.nav-button {
  min-width: 76px;
  background: transparent;
  border-color: transparent;
  color: #41506a;
}

.nav-button:hover:not(:disabled) {
  background: #e9eef6;
}

.secondary-nav {
  grid-column: 1 / -1;
  color: var(--muted);
}

.task-switcher summary {
  width: fit-content;
  cursor: pointer;
  color: #536176;
  font-size: var(--type-small);
  font-weight: 650;
}

.secondary-nav summary {
  width: fit-content;
  cursor: pointer;
  color: #7b8797;
  font-size: var(--type-micro);
  font-weight: 620;
}

.lesson-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
}

.task-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.lesson-chip {
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 6px;
  border-color: transparent;
  background: transparent;
  color: #657286;
  font-size: var(--type-micro);
  font-weight: 620;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none;
}

.lesson-chip:hover:not(:disabled) {
  background: rgba(232, 237, 245, 0.62);
  color: #35445c;
}

.task-chip {
  min-height: 32px;
  padding: 6px 10px;
  border-color: transparent;
  background: transparent;
  color: #526176;
  font-size: var(--type-small);
  font-weight: 620;
  box-shadow: inset 0 0 0 1px rgba(223, 230, 239, 0.7);
}

.lesson-chip.active,
.lesson-chip.active:hover {
  background: rgba(237, 243, 255, 0.72);
  color: #1f49b9;
  box-shadow: inset 0 -2px 0 rgba(36, 87, 214, 0.48);
}

.task-chip.active {
  border-color: transparent;
  background: #f6f9ff;
  color: #173f9c;
  box-shadow: inset 0 0 0 1px rgba(36, 87, 214, 0.18), inset 3px 0 0 rgba(36, 87, 214, 0.52);
}

.task-chip.completed {
  border-color: rgba(20, 134, 75, 0.28);
  background: var(--success-soft);
  color: #17623c;
}

.task-chip.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(460px, 1.65fr) minmax(260px, 0.92fr);
  gap: 20px;
  width: min(100%, 1480px);
  min-height: calc(100vh - 82px);
  margin: 0 auto;
  padding: 20px 24px 28px;
  align-items: stretch;
}

.layout[data-learn-editor] {
  grid-template-columns: minmax(210px, 0.72fr) minmax(480px, 1.72fr) minmax(250px, 0.88fr);
  gap: 18px;
  padding-top: 14px;
  padding-bottom: 20px;
}

.workspace-rail {
  min-width: 0;
}

.context-rail,
.guidance-rail {
  align-self: stretch;
}

.learning-context,
.task-context,
.mastery-context,
.walkthrough-panel,
.practice-result-panel,
.mastery-result-panel {
  height: 100%;
  min-height: 0;
  padding: 14px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.learning-context > .workspace-kicker,
.task-context > .workspace-kicker,
.mastery-context > .workspace-kicker {
  color: #315fae;
  font-weight: 720;
}

.learning-context > .workspace-kicker {
  margin-bottom: 4px;
}

.learning-context {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #34445e;
}

.walkthrough-panel {
  padding-top: 8px;
  padding-bottom: 8px;
}

.learning-context h2,
.task-context h2,
.mastery-context h2 {
  max-width: 18ch;
}

.learning-context h2 {
  margin-bottom: 6px;
  font-size: 1.06rem;
  line-height: 1.2;
}

.context-copy {
  max-width: 48ch;
  margin-bottom: 24px;
  color: #536176;
  font-size: var(--type-lead);
  line-height: 1.64;
}

.learning-context .context-copy {
  max-width: 36ch;
  margin-bottom: 12px;
  color: #627087;
  font-size: 0.88rem;
  line-height: 1.46;
}

.concept-line {
  margin-bottom: 0;
  color: var(--muted-soft);
  font-size: var(--type-small);
}

.concept-line strong {
  color: #43536d;
  font-weight: 680;
}

.focus-block,
.prestart-block,
.section-block,
.task-switcher {
  margin-top: 24px;
}

.learning-context .focus-block,
.learning-context .prestart-block,
.learning-context .section-block {
  margin-top: 12px;
}

.focus-block {
  padding-top: 18px;
  box-shadow: inset 0 1px 0 var(--line-quiet);
}

.learning-context .focus-block {
  padding-top: 8px;
  box-shadow: inset 0 1px 0 rgba(223, 230, 239, 0.56);
}

.focus-block h3,
.task-header h2 {
  margin-bottom: 8px;
  font-size: var(--type-panel-title);
  line-height: 1.22;
}

.learning-context .focus-block h3 {
  margin-bottom: 5px;
  font-size: 0.98rem;
  line-height: 1.2;
}

.example-meta {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.learning-context .example-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  margin-bottom: 6px;
}

.learning-context .example-meta p {
  margin-bottom: 0;
}

#exampleDescription,
#exampleExplanation,
#taskDescription,
#masteryDescription,
#masteryMilestoneDescription,
#masteryMilestoneGoal {
  color: #536176;
  line-height: 1.66;
}

.learning-context #exampleDescription,
.learning-context #exampleExplanation {
  font-size: 0.88rem;
  line-height: 1.48;
}

.learning-context #exampleDescription,
.learning-context #exampleExplanation {
  margin-bottom: 0;
}

.compact-actions {
  margin-top: 14px;
}

.learning-context .compact-actions {
  gap: 6px;
  margin-top: 8px;
}

.learning-context .compact-actions .secondary-action-btn {
  min-height: 32px;
  padding: 6px 10px;
}

.prestart-block {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 8px;
  align-items: baseline;
  padding: 10px 0 0;
  border-radius: 0;
  background: transparent;
  color: #26364f;
  box-shadow: inset 0 1px 0 rgba(223, 230, 239, 0.56);
}

.prestart-block h3 {
  margin-bottom: 0;
  color: #66758b;
  font-size: 0.78rem;
  line-height: 1.35;
}

.learning-context .prestart-block h3 {
  margin-bottom: 0;
  font-size: 0.76rem;
}

.prestart-block p {
  margin-bottom: 0;
  color: #34445e;
  font-size: var(--type-body);
  line-height: 1.68;
  white-space: pre-line;
}

.learning-context .prestart-block p {
  font-size: 0.86rem;
  line-height: 1.44;
}

.feedback-toggle {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: var(--type-small);
  font-weight: 650;
}

.feedback-toggle:hover:not(:disabled) {
  background: transparent;
  color: var(--primary-hover);
}

textarea,
input {
  width: 100%;
  border: 1px solid var(--line-quiet);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface);
}

#variablesInput {
  display: grid;
  gap: 10px;
}

#variablesInput label {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}

.task-header h2 {
  margin-bottom: 10px;
}

.task-switcher {
  padding-top: 4px;
  border-top: 0;
}

.mastery-goal-block {
  margin-top: 16px;
  padding-top: 14px;
  box-shadow: inset 0 1px 0 rgba(223, 230, 239, 0.58);
}

.mastery-goal {
  margin: 8px 0 0;
  padding-top: 8px;
  box-shadow: inset 0 1px 0 rgba(223, 230, 239, 0.5);
  font-size: 0.88rem;
  white-space: pre-line;
}

.mastery-milestone-list {
  display: grid;
  gap: 6px;
}

.mastery-milestone-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  min-height: 38px;
  padding: 7px 8px;
  text-align: left;
  background: transparent;
  color: #5f6c80;
  box-shadow: inset 0 0 0 1px rgba(223, 230, 239, 0.54);
}

.mastery-milestone-btn:hover:not(:disabled) {
  background: #fafbfe;
}

.mastery-milestone-btn.active {
  background: #fbfdff;
  color: #244fba;
  box-shadow: inset 0 0 0 1px rgba(36, 87, 214, 0.16), inset 2px 0 0 rgba(36, 87, 214, 0.42);
}

.mastery-milestone-btn.completed {
  background: #fbfefc;
  color: #246a49;
  box-shadow: inset 0 0 0 1px rgba(20, 134, 75, 0.18);
}

.mastery-milestone-btn.locked {
  opacity: 0.52;
  cursor: not-allowed;
}

.mastery-milestone-index {
  color: var(--muted-soft);
  font-size: var(--type-micro);
  font-weight: 720;
}

.mastery-milestone-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mastery-milestone-copy strong {
  overflow-wrap: anywhere;
  color: inherit;
  font-size: 0.88rem;
  line-height: 1.26;
}

.mastery-milestone-copy span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
}

.editor-stage {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 2px 4px 0;
}

.editor-stage-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  min-height: 52px;
  margin-bottom: 10px;
}

.editor-title {
  margin-bottom: 0;
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.16;
}

.editor-status {
  max-width: 42ch;
  margin-bottom: 0;
  text-align: right;
  color: var(--muted-soft);
  font-size: var(--type-small);
  line-height: 1.45;
}

.editor-status:empty {
  display: none;
}

.editor-shell {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  flex: 1;
  min-height: clamp(440px, 64vh, 780px);
  overflow: hidden;
  border: 1px solid #1f2a3b;
  border-radius: 8px;
  background: var(--code-bg);
  box-shadow: 0 22px 44px rgba(16, 20, 29, 0.19), 0 0 0 1px rgba(15, 23, 42, 0.07);
  font-family: "Fira Code", Consolas, "Courier New", monospace;
  font-size: 15.5px;
  line-height: 1.68;
}

.editor-stage.is-walkthrough-complete .editor-shell {
  border-color: #243247;
  box-shadow: 0 18px 40px rgba(16, 20, 29, 0.18), 0 0 0 1px rgba(20, 120, 70, 0.12);
}

.editor-shell:focus-within {
  border-color: #31415a;
}

.editor-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.layout[data-learn-editor="compact"] .editor-stage-header,
.layout[data-learn-editor="balanced"] .editor-stage-header {
  min-height: 48px;
  margin-bottom: 10px;
}

.layout[data-learn-editor="compact"] .editor-shell,
.layout[data-learn-editor="balanced"] .editor-shell {
  flex: 0 1 auto;
}

.layout[data-learn-editor="compact"] .editor-shell {
  min-height: clamp(300px, 38vh, 380px);
}

.layout[data-learn-editor="balanced"] .editor-shell {
  min-height: clamp(340px, 46vh, 500px);
}

.line-numbers {
  overflow: hidden;
  padding: 20px 11px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: #111722;
  color: #707b91;
  text-align: right;
  user-select: none;
  white-space: pre;
}

.highlight-layer,
#codeInput {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px 22px;
  border: 0;
  border-radius: 0;
  outline: 0;
  resize: none;
  overflow: auto;
  white-space: pre;
  tab-size: 2;
  font: inherit;
  line-height: inherit;
}

.highlight-layer {
  pointer-events: none;
  color: var(--code-text);
}

#codeInput {
  background: transparent;
  color: transparent;
  caret-color: #ffffff;
}

#codeInput::selection {
  background: rgba(120, 199, 255, 0.22);
}

.editor-save-note {
  align-self: flex-end;
  margin: 8px 2px 0;
  color: var(--muted-soft);
  font-size: var(--type-micro);
  line-height: 1.35;
  text-align: right;
}

.token-keyword {
  color: var(--kw);
}

.token-string {
  color: var(--string);
}

.token-number {
  color: var(--number);
}

.token-function {
  color: var(--fn);
}

.token-name {
  color: #a7d8ff;
  font-weight: 650;
}

.editor-actions {
  justify-content: center;
  margin-top: 14px;
}

.layout[data-learn-editor="compact"] .editor-actions,
.layout[data-learn-editor="balanced"] .editor-actions {
  margin-top: 10px;
}

.editor-stage.is-walkthrough-complete .editor-actions {
  margin-top: 16px;
}

.editor-stage.is-walkthrough-complete #resetBtn {
  background: transparent;
  color: #66758b;
}

.primary-action-btn,
#checkAnswerBtn,
#startBtn {
  min-height: 42px;
  min-width: 148px;
  background: var(--primary);
  color: #fff;
  font-weight: 720;
  box-shadow: 0 10px 22px rgba(36, 87, 214, 0.18);
}

#checkAnswerBtn {
  width: 190px;
}

.primary-action-btn:hover:not(:disabled),
#checkAnswerBtn:hover:not(:disabled),
#startBtn:hover:not(:disabled) {
  background: var(--primary-hover);
}

.secondary-action-btn {
  border-color: transparent;
  background: #f9fbfd;
  color: #43536d;
  font-weight: 640;
  box-shadow: inset 0 0 0 1px var(--line-quiet);
}

.secondary-action-btn:hover:not(:disabled) {
  background: #f1f4f8;
  box-shadow: inset 0 0 0 1px var(--border);
}

.walkthrough-header,
.result-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
}

.walkthrough-header {
  gap: 8px;
  margin-bottom: 8px;
}

.walkthrough-header h2,
.result-header h2 {
  margin-bottom: 0;
  font-size: var(--type-panel-title);
  line-height: 1.2;
}

.walkthrough-header h2 {
  font-size: 0.98rem;
}

.walkthrough-step-badge {
  flex: 0 0 auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #8a96a8;
  font-size: 0.68rem;
  font-weight: 620;
  line-height: 1.25;
  box-shadow: none;
}

.walkthrough-step-badge:empty {
  display: none;
}

.empty-state {
  padding: 14px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

.walkthrough-panel .empty-state {
  padding: 4px 0 2px;
  font-size: 0.86rem;
  line-height: 1.42;
}

.empty-state p {
  margin-bottom: 0;
}

.walkthrough-empty-state {
  display: grid;
  gap: 6px;
}

.walkthrough-empty-state .empty-state-kicker {
  color: #7a879a;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.walkthrough-empty-state .empty-state-title {
  max-width: 24ch;
  color: var(--text-strong);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.42;
}

.runtime-preview {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.runtime-preview-code {
  min-height: 0;
}

.runtime-preview-state {
  display: grid;
  grid-template-columns: minmax(72px, 0.42fr) minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 6px;
  background: #f7faff;
  box-shadow: inset 3px 0 0 rgba(36, 87, 214, 0.42), inset 0 0 0 1px rgba(36, 87, 214, 0.1);
}

.runtime-preview-state span {
  color: #7a8798;
  font-size: 0.64rem;
  font-weight: 620;
  line-height: 1.18;
}

.runtime-preview-state strong {
  overflow-wrap: anywhere;
  color: #1f3f82;
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.24;
}

.runtime-preview-console {
  min-height: auto;
  padding: 8px 10px;
}

.walkthrough-panel .runtime-preview-console {
  min-height: 0;
  padding: 5px 8px;
  line-height: 1.34;
}

.walkthrough-panel .runtime-preview-console .console-line {
  padding: 0;
}

.walkthrough-actions {
  margin-bottom: 16px;
}

.walkthrough-panel .walkthrough-actions {
  gap: 6px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.walkthrough-panel .walkthrough-actions .secondary-action-btn {
  min-height: 32px;
  padding: 6px 10px;
  font-size: var(--type-small);
}

.walkthrough-panel .walkthrough-actions .secondary-action-btn:last-child:not(:disabled) {
  background: #f7f9fc;
  color: #315fae;
  box-shadow: inset 0 0 0 1px rgba(36, 87, 214, 0.1);
}

.layout[data-learn-editor="compact"] .walkthrough-header,
.layout[data-learn-editor="balanced"] .walkthrough-header {
  margin-bottom: 8px;
}

.layout[data-learn-editor="compact"] .walkthrough-actions,
.layout[data-learn-editor="balanced"] .walkthrough-actions {
  margin-bottom: 8px;
}

.step-focus {
  padding: 16px;
  border-radius: 8px;
  background: #f3f7ff;
  box-shadow: inset 0 0 0 1px rgba(36, 87, 214, 0.12), inset 3px 0 0 rgba(36, 87, 214, 0.58);
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

.walkthrough-panel .step-focus {
  position: relative;
  margin-bottom: 6px;
  padding: 4px 4px 6px 13px;
  background: transparent;
  box-shadow: inset 2px 0 0 rgba(36, 87, 214, 0.24);
}

.walkthrough-panel .step-focus::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -7px;
  width: 1px;
  height: 7px;
  background: rgba(102, 117, 139, 0.1);
}

.walkthrough-panel.is-final-step .step-focus {
  background: transparent;
  box-shadow: inset 2px 0 0 rgba(20, 120, 70, 0.26);
}

.walkthrough-panel.is-final-step .step-focus::after {
  background: rgba(102, 117, 139, 0.1);
}

.layout[data-learn-editor="compact"] .step-focus {
  padding: 5px 4px 7px 12px;
}

.step-focus .runtime-label {
  margin-bottom: 8px;
  color: #315fae;
  font-weight: 760;
}

.walkthrough-panel .step-focus .runtime-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: #5e7190;
  font-weight: 640;
}

.walkthrough-panel .step-focus .runtime-label::before {
  content: "";
  width: 9px;
  height: 1px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.38;
}

.walkthrough-panel.is-final-step .step-focus .runtime-label {
  color: var(--success);
}

#debugAction {
  margin-bottom: 0;
  color: #172033;
  font-size: var(--type-lead);
  font-weight: 620;
  line-height: 1.68;
  white-space: pre-line;
}

.walkthrough-panel #debugAction {
  color: var(--text-strong);
  font-size: 0.91rem;
  font-weight: 590;
  line-height: 1.46;
}

.walkthrough-panel #debugAction .runtime-action-line {
  display: block;
}

.walkthrough-panel #debugAction .runtime-action-before {
  color: #66758b;
  font-family: "Fira Code", Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  font-weight: 560;
}

.walkthrough-panel #debugAction .runtime-action-change {
  color: #25344c;
  font-weight: 680;
}

.walkthrough-panel #debugAction .runtime-action-after {
  color: #0f6538;
  font-family: "Fira Code", Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  font-weight: 760;
}

.walkthrough-panel .runtime-name {
  color: var(--primary);
  font-family: "Fira Code", Consolas, "Courier New", monospace;
  font-weight: 760;
}

.walkthrough-panel #debugAction .runtime-name {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(36, 87, 214, 0.07);
}

.walkthrough-panel .runtime-item .runtime-name,
.walkthrough-panel .key-value-item .runtime-name {
  color: var(--primary);
  font-family: "Fira Code", Consolas, "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 760;
}

.walkthrough-panel .code-line.active .token-name {
  color: #ffffff;
  font-weight: 820;
}

.step-focus.is-updating #debugAction {
  animation: explanation-settle 0.2s ease both;
}

#walkthroughContent.is-updating .step-focus {
  animation: execution-presence 0.24s ease both;
}

.walkthrough-panel.is-final-step #walkthroughContent.is-updating .step-focus {
  animation-name: execution-presence-complete;
}

.runtime-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.walkthrough-panel .runtime-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0 0 0 5px;
  padding: 0 0 4px 11px;
  border-left: 1px solid rgba(36, 87, 214, 0.16);
}

.runtime-progress-item {
  display: none;
}

.runtime-item,
.key-value-item,
.array-box {
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(223, 230, 239, 0.56);
  transition: background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.walkthrough-panel .runtime-item,
.walkthrough-panel .key-value-item,
.walkthrough-panel .array-box {
  padding: 5px 7px;
  background: transparent;
  box-shadow: none;
}

.walkthrough-panel .runtime-item {
  display: grid;
  grid-template-columns: minmax(58px, 0.32fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  min-height: 26px;
  padding: 2px 0 2px 7px;
  border-radius: 6px;
}

.walkthrough-panel #debugVariableItem {
  background: rgba(237, 243, 255, 0.7);
  box-shadow: inset 3px 0 0 rgba(36, 87, 214, 0.44), inset 0 0 0 1px rgba(36, 87, 214, 0.06);
}

.walkthrough-panel .runtime-progress-item {
  display: none;
}

.runtime-item.is-changing,
.key-value-item.is-changing,
.array-box.is-changing {
  background: #f1fbf6;
  box-shadow: inset 0 0 0 1px rgba(20, 120, 70, 0.18), inset 3px 0 0 rgba(20, 120, 70, 0.5);
  animation: runtime-change 0.42s ease both;
}

.walkthrough-panel .runtime-item.is-changing {
  background: #f7fbf8;
  box-shadow: inset 3px 0 0 rgba(20, 120, 70, 0.48), inset 0 0 0 1px rgba(20, 120, 70, 0.08);
}

.runtime-item span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted-soft);
  font-size: var(--type-micro);
  font-weight: 660;
}

.walkthrough-panel .runtime-item span,
.walkthrough-panel .key-value-item span {
  margin-bottom: 0;
  color: #8a96a8;
  font-size: 0.62rem;
  font-weight: 560;
  line-height: 1.12;
}

.runtime-item strong {
  display: block;
  overflow-wrap: anywhere;
  color: #2f405c;
  font-size: 0.9rem;
  line-height: 1.35;
}

.walkthrough-panel .runtime-item strong,
.walkthrough-panel .key-value-item strong {
  color: #34445e;
  font-size: 0.8rem;
  font-weight: 610;
  line-height: 1.28;
}

.walkthrough-panel #debugVariableItem strong {
  color: #1f3f82;
  font-weight: 720;
}

.walkthrough-panel .runtime-round,
.walkthrough-panel .runtime-current {
  display: block;
}

.walkthrough-panel .runtime-round {
  color: #25344c;
  font-weight: 700;
}

.walkthrough-panel .runtime-current {
  margin-top: 2px;
  color: #66758b;
  font-size: 0.72rem;
  font-weight: 560;
}

.walkthrough-panel .runtime-before-after {
  display: grid;
  gap: 2px;
  margin-top: 3px;
}

.walkthrough-panel .runtime-before-after span {
  margin: 0;
  color: inherit;
  font-size: 0.76rem;
  font-weight: 620;
  line-height: 1.22;
}

.walkthrough-panel .runtime-before-after span:first-child {
  color: #66758b;
}

.walkthrough-panel .runtime-before-after span:last-child {
  color: #0f6538;
  font-weight: 760;
}

.walkthrough-panel #debugResult {
  white-space: pre-line;
}

.runtime-item.is-changing strong,
.key-value-item.is-changing strong,
.array-box.is-changing strong {
  color: #0f6538;
}

.walkthrough-panel .runtime-item.is-changing strong,
.walkthrough-panel .key-value-item.is-changing strong {
  border-radius: 4px;
  background: rgba(20, 120, 70, 0.08);
  box-shadow: 0 0 0 3px rgba(20, 120, 70, 0.035);
  animation: runtime-value-change 0.42s ease both;
}

.key-value-item {
  display: grid;
  gap: 4px;
}

.key-value-item span {
  color: var(--muted-soft);
  font-size: var(--type-micro);
  font-weight: 660;
}

.key-value-item strong {
  color: #2f405c;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.result-true {
  color: var(--success);
}

.result-false {
  color: var(--danger);
}

.key-value-list {
  display: grid;
  gap: 8px;
}

.walkthrough-panel .key-value-list {
  gap: 3px;
}

.walkthrough-panel .key-value-item {
  border-radius: 6px;
  background: rgba(247, 250, 255, 0.72);
  box-shadow: inset 2px 0 0 rgba(36, 87, 214, 0.16), inset 0 0 0 1px rgba(36, 87, 214, 0.04);
}

.walkthrough-panel .array-pointer {
  margin-bottom: 4px;
  color: #536176;
  font-size: 0.76rem;
}

.walkthrough-panel .array-view {
  gap: 6px;
}

.walkthrough-panel .array-box {
  min-width: 68px;
  padding: 7px 8px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(223, 230, 239, 0.78);
}

.walkthrough-panel .array-box.active {
  background: #f4f8ff;
  box-shadow: inset 0 0 0 1px rgba(36, 87, 214, 0.18), inset 3px 0 0 rgba(36, 87, 214, 0.44);
}

.array-pointer {
  margin-bottom: 8px;
  color: var(--primary);
  font-family: "Fira Code", Consolas, "Courier New", monospace;
  font-weight: 750;
}

.array-view {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.array-empty-state {
  width: 100%;
  padding: 8px 9px;
  border-radius: 6px;
  background: #ffffff;
  color: #66758b;
  font-family: "Fira Code", Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  font-weight: 650;
  box-shadow: inset 0 0 0 1px rgba(223, 230, 239, 0.78);
}

.array-box {
  min-width: 76px;
  display: grid;
  gap: 3px;
  align-content: start;
}

.array-box.active {
  background: #f4f8ff;
  box-shadow: inset 0 0 0 1px rgba(36, 87, 214, 0.18), inset 3px 0 0 rgba(36, 87, 214, 0.44);
}

.array-index {
  color: #66758b;
  font-family: "Fira Code", Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
}

.array-value {
  color: #25344c;
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.walkthrough-panel .array-index {
  font-size: 0.66rem;
}

.walkthrough-panel .array-value {
  font-size: 0.8rem;
}

.walkthrough-panel .key-value-item.is-changing,
.walkthrough-panel .array-box.is-changing {
  background: #f7fbf8;
  box-shadow: inset 3px 0 0 rgba(20, 120, 70, 0.48), inset 0 0 0 1px rgba(20, 120, 70, 0.08);
}

.code-preview,
.console-output {
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--code-text);
  font-family: "Fira Code", Consolas, "Courier New", monospace;
  font-size: 0.84rem;
  box-shadow: inset 0 0 0 1px var(--code-border);
}

.guidance-rail .section-block {
  margin-top: 7px;
  padding-top: 6px;
  box-shadow: none;
}

.guidance-rail .section-block h3 {
  margin-bottom: 5px;
  color: #66758b;
  font-size: 0.72rem;
  font-weight: 680;
}

.walkthrough-panel .section-block {
  position: relative;
  margin-left: 5px;
  padding-left: 11px;
  border-left: 1px solid rgba(102, 117, 139, 0.11);
}

.walkthrough-panel .section-block::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -2px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: #d3dbe7;
}

.walkthrough-panel #variablesViewSection {
  border-left-color: rgba(102, 117, 139, 0.08);
}

.walkthrough-panel #variablesViewSection::before {
  background: rgba(102, 117, 139, 0.22);
}

.walkthrough-panel #arrayViewSection {
  border-left-color: rgba(20, 120, 70, 0.18);
}

.walkthrough-panel #arrayViewSection::before {
  background: rgba(20, 120, 70, 0.48);
}

.walkthrough-panel #consoleSection {
  border-left-color: rgba(20, 120, 70, 0.08);
}

.walkthrough-panel #consoleSection::before {
  background: rgba(20, 120, 70, 0.26);
}

.walkthrough-panel .section-block h3 {
  color: #536176;
  font-weight: 720;
}

.walkthrough-panel.is-pointer-runtime .step-focus {
  margin-bottom: 5px;
  padding: 5px 3px 6px 10px;
  box-shadow: inset 2px 0 0 rgba(36, 87, 214, 0.2);
}

.walkthrough-panel.is-pointer-runtime .step-focus::after,
.walkthrough-panel.is-pointer-runtime .section-block::before {
  display: none;
}

.walkthrough-panel.is-pointer-runtime .step-focus .runtime-label {
  display: none;
}

.walkthrough-panel.is-pointer-runtime .runtime-grid {
  gap: 2px;
  margin: 0 0 5px;
  padding: 0;
  border-left: 0;
}

.walkthrough-panel.is-pointer-runtime .runtime-item {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: 0 0 0 8px;
}

.walkthrough-panel.is-pointer-runtime .runtime-item > span {
  display: none;
}

.walkthrough-panel.is-pointer-runtime #debugVariableItem {
  padding: 4px 7px 4px 8px;
  border-radius: 5px;
  background: rgba(247, 250, 255, 0.78);
  box-shadow: inset 3px 0 0 rgba(36, 87, 214, 0.44), inset 0 0 0 1px rgba(36, 87, 214, 0.08);
}

.walkthrough-panel.is-pointer-runtime #conditionItem,
.walkthrough-panel.is-pointer-runtime #resultItem {
  padding-left: 9px;
}

.walkthrough-panel.is-pointer-runtime #conditionItem strong,
.walkthrough-panel.is-pointer-runtime #resultItem strong {
  color: #66758b;
  font-size: 0.72rem;
  font-weight: 560;
  line-height: 1.18;
}

.walkthrough-panel.is-pointer-runtime #debugVariableItem strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 9px;
  color: #1f3f82;
  line-height: 1.14;
}

.walkthrough-panel.is-pointer-runtime .runtime-round,
.walkthrough-panel.is-pointer-runtime .runtime-current {
  display: inline;
  margin-top: 0;
}

.walkthrough-panel.is-pointer-runtime .runtime-round {
  font-size: 0.75rem;
}

.walkthrough-panel.is-pointer-runtime .runtime-current {
  font-size: 0.72rem;
}

.walkthrough-panel.is-pointer-runtime .runtime-before-after {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 9px;
  margin-top: 0;
}

.walkthrough-panel.is-pointer-runtime .runtime-before-after span {
  font-size: 0.72rem;
  line-height: 1.16;
}

.walkthrough-panel.is-accumulator-runtime #debugVariableItem strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.walkthrough-panel.is-accumulator-runtime #debugVariableItem .runtime-round,
.walkthrough-panel.is-accumulator-runtime #debugVariableItem .runtime-current {
  display: inline;
}

.walkthrough-panel.is-accumulator-runtime .runtime-progress-item,
.walkthrough-panel.is-accumulator-runtime .array-pointer {
  display: none;
}

.walkthrough-panel.is-accumulator-runtime #debugVariableItem .runtime-round {
  color: #1f3f82;
  font-size: 0.78rem;
  font-weight: 760;
}

.walkthrough-panel.is-accumulator-runtime #debugVariableItem .runtime-current {
  color: #526176;
  font-size: 0.74rem;
  line-height: 1.18;
}

.walkthrough-panel.is-accumulator-runtime #conditionItem strong,
.walkthrough-panel.is-accumulator-runtime #resultItem strong {
  font-size: 0.78rem;
  line-height: 1.24;
}

.walkthrough-panel.is-accumulator-runtime #conditionItem {
  color: #66758b;
}

.walkthrough-panel.is-accumulator-runtime #resultItem {
  margin-top: 2px;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(238, 247, 241, 0.92);
  box-shadow: inset 3px 0 0 rgba(35, 132, 82, 0.55), inset 0 0 0 1px rgba(35, 132, 82, 0.12);
}

.walkthrough-panel.is-accumulator-runtime #resultItem strong {
  color: #195f3a;
  font-size: 0.9rem;
  font-weight: 740;
  white-space: pre-line;
}

.walkthrough-panel.is-pointer-runtime .section-block {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.walkthrough-panel.is-pointer-runtime #arrayViewSection {
  margin-top: 6px;
  padding-top: 2px;
}

.walkthrough-panel.is-pointer-runtime #arrayViewSection h3 {
  display: none;
}

.walkthrough-panel.is-pointer-runtime .array-pointer {
  margin-bottom: 3px;
  color: #1f3f82;
  font-size: 0.78rem;
}

.walkthrough-panel.is-pointer-runtime .array-view {
  gap: 5px;
}

.walkthrough-panel.is-pointer-runtime .array-box {
  min-width: 62px;
  padding: 5px 7px;
}

.walkthrough-panel .code-preview,
.walkthrough-panel .console-output {
  border-radius: 6px;
  font-size: 0.78rem;
  box-shadow: inset 0 0 0 1px rgba(37, 44, 58, 0.74);
}

.code-line {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 10px;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.walkthrough-panel .code-line {
  position: relative;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 5px;
  padding: 3px 7px 3px 10px;
  border-radius: 4px;
  opacity: 0.54;
  line-height: 1.3;
}

.walkthrough-panel .code-line.is-focused-snippet {
  padding-top: 5px;
  padding-bottom: 5px;
}

.code-line .ln {
  color: #7c879d;
  text-align: right;
}

.code-line.active {
  background: rgba(120, 199, 255, 0.12);
  box-shadow: inset 3px 0 0 var(--fn);
  animation: active-line-settle 0.22s ease both;
}

.walkthrough-panel .code-line.active {
  opacity: 1;
  background: linear-gradient(90deg, rgba(36, 87, 214, 0.5), rgba(36, 87, 214, 0.3) 48%, rgba(21, 26, 37, 0.18));
  box-shadow: inset 0 0 0 1px rgba(120, 199, 255, 0.36);
}

.walkthrough-panel .code-line.active::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 5px;
  border-radius: 0 3px 3px 0;
  background: var(--fn);
}

.walkthrough-panel .code-line.active .ln {
  color: #ffffff;
  font-weight: 820;
}

.console-output {
  min-height: 70px;
  padding: 10px 12px;
  background: #f7f9fc;
  color: #2b3a52;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: var(--type-small);
  box-shadow: inset 0 0 0 1px rgba(223, 230, 239, 0.86);
  white-space: pre-wrap;
}

.walkthrough-panel .console-output {
  min-height: 82px;
  padding: 12px 13px;
  background: var(--code-bg);
  color: var(--code-text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  line-height: 1.56;
  box-shadow: inset 0 0 0 1px rgba(37, 44, 58, 0.9);
}

.console-placeholder {
  color: var(--muted);
}

.walkthrough-panel .console-placeholder {
  color: rgba(226, 232, 240, 0.62);
}

.console-line {
  display: block;
  padding: 1px 0;
  color: inherit;
  overflow-wrap: anywhere;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.walkthrough-panel .console-line {
  padding: 2px 0;
}

.console-line + .console-line {
  box-shadow: none;
}

.console-line.is-latest {
  color: #ffffff;
  font-weight: 650;
}

.walkthrough-panel .console-line.is-latest {
  margin-left: -4px;
  padding-left: 4px;
  border-radius: 4px;
  background: rgba(20, 120, 70, 0.2);
  box-shadow: inset 2px 0 0 rgba(20, 120, 70, 0.48);
}

.console-line.is-changing {
  animation: console-appear 0.4s ease both;
}

.walkthrough-panel .console-line.is-changing .console-value {
  animation: console-value-write 0.4s ease both;
}

#walkthroughContent.is-pacing-code .code-line.active {
  animation-duration: 0.2s;
}

#walkthroughContent.is-pacing-runtime .runtime-item.is-changing,
#walkthroughContent.is-pacing-runtime .key-value-item.is-changing,
#walkthroughContent.is-pacing-runtime .array-box.is-changing {
  animation-duration: 0.38s;
}

#walkthroughContent.is-pacing-console .console-line.is-changing {
  animation-duration: 0.36s;
}

.console-cause {
  color: var(--muted);
  font-size: var(--type-micro);
  font-weight: 680;
}

.walkthrough-panel .console-cause {
  font-size: 0.68rem;
}

.console-value {
  color: inherit;
}

.walkthrough-panel .console-value {
  display: block;
  font-size: 0.84rem;
  font-weight: inherit;
}

#startBtn.is-complete {
  background: var(--success);
  min-width: 166px;
  box-shadow: 0 10px 20px rgba(20, 120, 70, 0.16);
}

#startBtn.is-complete:hover:not(:disabled) {
  background: #0f6d3b;
}

@keyframes explanation-settle {
  from {
    opacity: 0.82;
  }
  to {
    opacity: 1;
  }
}

@keyframes runtime-change {
  0% {
    opacity: 0.78;
    background: #e8f8ef;
    box-shadow: inset 0 0 0 1px rgba(20, 120, 70, 0.26), inset 3px 0 0 rgba(20, 120, 70, 0.64);
  }
  68% {
    opacity: 1;
    background: #f1fbf6;
  }
  100% {
    opacity: 1;
  }
}

@keyframes runtime-value-change {
  0% {
    background: rgba(20, 120, 70, 0.18);
    box-shadow: 0 0 0 4px rgba(20, 120, 70, 0.055);
  }
  100% {
    background: rgba(20, 120, 70, 0.08);
    box-shadow: 0 0 0 3px rgba(20, 120, 70, 0.035);
  }
}

@keyframes active-line-settle {
  from {
    background: linear-gradient(90deg, rgba(36, 87, 214, 0.3), rgba(36, 87, 214, 0.2), rgba(21, 26, 37, 0.12));
    box-shadow: inset 0 0 0 1px rgba(120, 199, 255, 0.18);
  }
  to {
    background: linear-gradient(90deg, rgba(36, 87, 214, 0.5), rgba(36, 87, 214, 0.3) 48%, rgba(21, 26, 37, 0.18));
    box-shadow: inset 0 0 0 1px rgba(120, 199, 255, 0.36);
  }
}

@keyframes console-appear {
  0% {
    opacity: 0;
    background: rgba(20, 120, 70, 0.32);
    box-shadow: inset 3px 0 0 rgba(20, 120, 70, 0.62);
  }
  70% {
    opacity: 1;
    background: rgba(20, 120, 70, 0.24);
  }
  100% {
    opacity: 1;
  }
}

@keyframes console-value-write {
  0% {
    color: #dcfce7;
  }
  100% {
    color: inherit;
  }
}

@keyframes execution-presence {
  from {
    box-shadow: inset 2px 0 0 rgba(36, 87, 214, 0.16);
  }
  to {
    box-shadow: inset 2px 0 0 rgba(36, 87, 214, 0.24);
  }
}

@keyframes execution-presence-complete {
  from {
    box-shadow: inset 2px 0 0 rgba(20, 120, 70, 0.18);
  }
  to {
    box-shadow: inset 2px 0 0 rgba(20, 120, 70, 0.26);
  }
}

@media (prefers-reduced-motion: reduce) {
  .step-focus.is-updating #debugAction,
  #walkthroughContent.is-updating .step-focus,
  .runtime-item.is-changing,
  .key-value-item.is-changing,
  .array-box.is-changing,
  .code-line.active,
  .console-line.is-changing,
  .walkthrough-panel .runtime-item.is-changing strong,
  .walkthrough-panel .key-value-item.is-changing strong,
  .walkthrough-panel .console-line.is-changing .console-value {
    animation: none;
  }

  .runtime-item,
  .key-value-item,
  .array-box,
  .code-line,
  .step-focus {
    transition: none;
  }
}

.practice-result-panel,
.mastery-result-panel {
  display: flex;
  flex-direction: column;
}

.practice-feedback-section {
  flex: 1;
  min-height: 240px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.practice-feedback,
.feedback-empty-state {
  padding: 16px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(223, 230, 239, 0.74);
}

.practice-feedback {
  color: var(--text);
  line-height: 1.58;
}

.feedback-empty-state {
  min-height: 156px;
  display: flex;
  align-items: flex-start;
  background: #f7f9fc;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.feedback-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.feedback-title {
  color: var(--text-strong);
  font-size: 1.06rem;
  line-height: 1.3;
}

.feedback-guidance {
  margin-bottom: 0;
  color: #526176;
  font-size: 0.9rem;
}

.practice-feedback p {
  margin-bottom: 10px;
}

.practice-feedback p:last-child {
  margin-bottom: 0;
}

.practice-feedback-message {
  margin-bottom: 0;
  padding-top: 12px;
  box-shadow: inset 0 1px 0 rgba(223, 230, 239, 0.72);
  color: var(--text-strong);
  font-weight: 680;
  line-height: 1.62;
  white-space: pre-line;
}

.practice-feedback-message:first-child {
  padding-top: 0;
  box-shadow: none;
}

.feedback-detail-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.feedback-detail {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  box-shadow: inset 0 1px 0 rgba(223, 230, 239, 0.72);
}

.feedback-detail-label {
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 720;
}

.feedback-detail-value {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f7f9fc;
  color: #26364f;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.feedback-detail.is-secondary .feedback-detail-label {
  color: #81736c;
  font-weight: 650;
}

.feedback-detail.is-secondary .feedback-detail-value {
  color: #70635d;
  font-size: 0.84rem;
}

.practice-feedback.success {
  background: #f7fcf9;
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(20, 120, 70, 0.16), inset 3px 0 0 rgba(20, 120, 70, 0.68);
}

.practice-feedback.success .feedback-title {
  color: #0f6538;
}

.practice-feedback.success .feedback-heading {
  margin-bottom: 8px;
}

.practice-feedback.success .practice-feedback-message {
  padding-top: 0;
  box-shadow: none;
  color: #0f6538;
  font-weight: 620;
}

.practice-feedback.error {
  background: #fffdfb;
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(214, 126, 96, 0.24), inset 3px 0 0 rgba(214, 126, 96, 0.72);
}

.practice-feedback.error .feedback-title {
  color: #7a3027;
}

.practice-feedback.error .practice-feedback-message {
  color: #68342d;
}

.practice-feedback.error .feedback-detail-value {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(235, 218, 207, 0.9);
}

.practice-feedback.info {
  color: #314768;
  background: #f7f9fc;
}

.practice-mode .practice-feedback {
  line-height: 1.5;
}

.practice-mode .feedback-heading {
  gap: 6px;
  margin-bottom: 10px;
}

.practice-mode .feedback-title {
  font-size: 1rem;
}

.practice-mode .practice-feedback-message {
  padding-top: 10px;
  line-height: 1.5;
}

.practice-mode .feedback-detail-list {
  gap: 6px;
  margin-top: 10px;
}

.practice-mode .feedback-detail {
  grid-template-columns: minmax(88px, 0.36fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-top: 7px;
  box-shadow: inset 0 1px 0 rgba(223, 230, 239, 0.58);
}

.practice-mode .feedback-detail-label {
  font-size: 0.73rem;
  line-height: 1.35;
}

.practice-mode .feedback-detail-value {
  padding: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1.42;
}

.practice-mode .practice-feedback.error .feedback-detail-value {
  color: #56362f;
  box-shadow: none;
}

.practice-mode .practice-feedback.error .feedback-detail.is-secondary .feedback-detail-value {
  color: #786a64;
}

.practice-feedback.is-collapsed {
  max-height: none;
  overflow: visible;
}

.live-preview {
  max-height: none;
  overflow: visible;
  padding: 12px 14px;
  border-radius: 6px;
  background: #f7f9fc;
  color: #5f6e83;
  font-size: 0.84rem;
  line-height: 1.5;
  box-shadow: inset 0 0 0 1px rgba(223, 230, 239, 0.86);
  white-space: pre-line;
}

#livePreview::before {
  content: "Akkurat nå";
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 720;
}

.practice-feedback:not(.is-hidden) ~ .live-preview {
  color: #6f7d90;
  box-shadow: inset 0 0 0 1px rgba(223, 230, 239, 0.58);
}

.live-preview.is-compact {
  max-height: none;
  overflow: visible;
}

.live-preview.error {
  background: #fffafa;
  color: #70413e;
  box-shadow: inset 0 0 0 1px rgba(214, 126, 96, 0.24);
}

.next-task-button {
  width: 100%;
  margin-top: 12px;
  background: var(--success);
  color: #fff;
  box-shadow: 0 8px 18px rgba(20, 120, 70, 0.16);
}

.next-task-button:hover:not(:disabled) {
  background: #0f6d3b;
}

@media (min-width: 941px) {
  .layout.practice-mode {
    grid-template-columns: minmax(180px, 0.7fr) minmax(440px, 1.8fr) minmax(210px, 0.78fr);
    gap: 14px;
    min-height: calc(100vh - 70px);
    padding: 12px 20px 18px;
    align-items: start;
  }

  .practice-mode .task-context,
  .practice-mode .practice-result-panel {
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .practice-mode .task-context > .workspace-kicker {
    margin-bottom: 4px;
  }

  .practice-mode .task-header h2 {
    margin-bottom: 6px;
    font-size: 1.08rem;
    line-height: 1.2;
  }

  .practice-mode #taskDescription {
    margin-bottom: 8px;
    font-size: 0.93rem;
    line-height: 1.5;
  }

  .practice-mode .task-switcher {
    margin-top: 14px;
  }

  .practice-mode .task-list {
    gap: 6px;
    margin-top: 8px;
  }

  .practice-mode .task-chip {
    min-height: 30px;
    padding: 5px 9px;
  }

  .practice-mode .editor-stage {
    padding-top: 0;
  }

  .practice-mode .editor-stage-header {
    min-height: 42px;
    margin-bottom: 8px;
  }

  .practice-mode .editor-title {
    font-size: 1.22rem;
  }

  .practice-mode .editor-status {
    max-width: 34ch;
    line-height: 1.32;
  }

  .practice-mode .editor-shell {
    min-height: clamp(380px, calc(100vh - 330px), 660px);
  }

  .practice-mode .line-numbers,
  .practice-mode .highlight-layer,
  .practice-mode #codeInput {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .practice-mode .editor-save-note {
    margin-top: 5px;
    line-height: 1.25;
  }

  .practice-mode #practiceActions {
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
  }

  .practice-mode .result-header {
    margin-bottom: 10px;
  }

  .practice-mode .result-header h2 {
    font-size: 1.04rem;
  }

  .practice-mode .practice-feedback-section {
    min-height: 0;
    gap: 8px;
  }

  .practice-mode .feedback-empty-state {
    min-height: 112px;
    padding: 12px 13px;
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .practice-mode .practice-feedback {
    padding: 12px 13px;
    line-height: 1.5;
  }

  .practice-mode .feedback-heading {
    gap: 6px;
    margin-bottom: 8px;
  }

  .practice-mode .feedback-detail-list {
    gap: 6px;
    margin-top: 8px;
  }

  .practice-mode .feedback-detail {
    column-gap: 8px;
    row-gap: 3px;
    padding-top: 6px;
  }

  .practice-mode .live-preview {
    padding: 10px 12px;
  }

  .practice-mode #taskHintText {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
  }
}

.mastery-mode .guidance-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mastery-mode .mastery-result-panel,
.mastery-mode .walkthrough-panel {
  height: auto;
  min-height: 0;
}

.mastery-mode .walkthrough-panel {
  padding-top: 0;
}

@media (max-width: 1180px) {
  .layout {
    grid-template-columns: minmax(210px, 0.75fr) minmax(420px, 1.45fr) minmax(240px, 0.85fr);
    gap: 12px;
  }

  .layout[data-learn-editor] {
    grid-template-columns: minmax(200px, 0.72fr) minmax(420px, 1.56fr) minmax(230px, 0.86fr);
    gap: 12px;
  }

  .learning-context,
  .task-context,
  .mastery-context,
  .walkthrough-panel,
  .practice-result-panel,
  .mastery-result-panel {
    padding: 10px 2px;
  }

  .layout[data-learn-editor] .learning-context,
  .layout[data-learn-editor] .walkthrough-panel {
    padding: 8px 0;
  }
}

@media (max-width: 940px) {
  .control-strip {
    position: static;
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .mode-toggle,
  .control-actions {
    width: 100%;
  }

  .mode-tab,
  .control-actions .nav-button {
    flex: 1;
  }

  .layout {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 12px;
  }

  .layout[data-learn-editor] {
    grid-template-columns: 1fr;
  }

  .learning-context,
  .task-context,
  .mastery-context,
  .walkthrough-panel,
  .practice-result-panel,
  .mastery-result-panel {
    height: auto;
    padding: 8px 0;
  }

  .editor-stage {
    order: 2;
  }

  .context-rail {
    order: 1;
  }

  .guidance-rail {
    order: 3;
  }

  .editor-stage-header {
    align-items: start;
    flex-direction: column;
    min-height: 0;
  }

  .editor-status {
    max-width: none;
    text-align: left;
  }

  .editor-save-note {
    align-self: flex-start;
    text-align: left;
  }

  .editor-shell {
    min-height: 360px;
  }

  .layout[data-learn-editor="compact"] .editor-shell {
    min-height: clamp(260px, 34vh, 320px);
  }

  .layout[data-learn-editor="balanced"] .editor-shell {
    min-height: clamp(300px, 42vh, 380px);
  }
}

@media (max-width: 560px) {
  .control-actions,
  .button-row,
  .task-list {
    gap: 6px;
  }

  .lesson-list {
    gap: 4px;
  }

  .layout {
    padding: 8px;
  }

  .prestart-block {
    grid-template-columns: 1fr;
  }

  .learning-context,
  .task-context,
  .mastery-context,
  .walkthrough-panel,
  .practice-result-panel,
  .mastery-result-panel {
    padding: 8px 0;
  }

  .editor-shell {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 330px;
    font-size: 13px;
  }

  .layout[data-learn-editor="compact"] .editor-shell {
    min-height: 250px;
  }

  .layout[data-learn-editor="balanced"] .editor-shell {
    min-height: 290px;
  }

  .line-numbers,
  .highlight-layer,
  #codeInput {
    padding: 12px 8px;
  }

  .runtime-grid {
    grid-template-columns: 1fr;
  }

  .primary-action-btn,
  #checkAnswerBtn,
  #startBtn {
    flex: 1 1 100%;
  }
}