/* ── Nocturne design tokens ─────────────────────────────────────────── */
:root {
  --color-bg: #1c1412;
  --color-surface: #2b201b;
  --color-text: #ede9e6;
  --color-accent: #dd7d55;
  --color-divider: color-mix(in srgb, #ede9e6 16%, transparent);

  --color-neutral-100: #fdf5f1; --color-neutral-200: #f5e9e3;
  --color-neutral-300: #e5d5cd; --color-neutral-400: #cab8b0;
  --color-neutral-500: #ab9a92; --color-neutral-600: #8c7c75;
  --color-neutral-700: #6c5e58; --color-neutral-800: #4d423d;
  --color-neutral-900: #312a27;

  --color-accent-100: #fff3ec; --color-accent-200: #fee2d3;
  --color-accent-300: #fcc7ac; --color-accent-400: #f5a17b;
  --color-accent-500: #e08258; --color-accent-600: #c06542;
  --color-accent-700: #954e33; --color-accent-800: #6a3a26;
  --color-accent-900: #422619;

  --color-section: #5a2013; --color-section-glow: #83371f;
  --color-bad: #e0566a; --color-ok: #7dcf9e; --color-warn: #e3b25c;

  --font-heading: "Geist", "Inter", system-ui, sans-serif;
  --font-body: "Geist", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-ctl: 8px; --radius-card: 12px; --radius-panel: 16px; --radius-pill: 999px;

  --shadow-sm: 0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent);
  --shadow-md: 0 0 0 1px color-mix(in srgb, var(--color-text) 12%, transparent),
               0 8px 24px -8px color-mix(in srgb, #000 70%, var(--color-bg));
  --shadow-lg: 0 0 0 1px color-mix(in srgb, var(--color-text) 14%, transparent),
               0 24px 64px -16px color-mix(in srgb, #000 85%, var(--color-bg));

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;

  --editor-bg: #1e1f23; --editor-gutter: #1a1b1e; --editor-line-no: #5a5b60;
  --nav-h: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
/* author display rules (e.g. .auth-card's flex) must not defeat [hidden] */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--color-text);
  font: 400 15px/1.55 var(--font-body);
  font-feature-settings: "tnum" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--color-accent-900) 75%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%),
    var(--color-bg);
  min-height: 100dvh;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500;
                 line-height: 1.12; letter-spacing: -0.015em; margin: 0; }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-400); }
code, pre { font-family: var(--font-mono); }
button { font: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-ctl); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link { position: absolute; left: var(--space-4); top: -48px; z-index: 50; padding: 8px 12px;
             border-radius: var(--radius-ctl); background: var(--color-surface); color: var(--color-accent);
             box-shadow: var(--shadow-md); text-decoration: none; font: 500 14px var(--font-heading);
             transition: top var(--dur-fast) var(--ease-out); }
.skip-link:focus-visible { top: 12px; outline: 2px solid var(--color-accent); }
.view:focus { outline: none; }
.shortcuts { width: min(92vw, 520px); }
.sc-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; align-items: center; font-size: 14px; }
.sc-list dt { margin: 0; justify-self: end; }
.sc-list dd { margin: 0; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.sc-list .sc-group { grid-column: 1 / -1; margin-top: 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
                     color: var(--color-accent); }
.sc-list .sc-group:first-child { margin-top: 0; }
.sc-list .kbd-hint { padding: 0; }
.press { transition: transform var(--dur-fast) var(--ease-out); }
.press:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: 0.01ms !important; }
  .fade-only { transition-duration: var(--dur) !important; }
}
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-800); border-radius: var(--radius-pill);
                            border: 2px solid var(--color-bg); }
::-webkit-scrollbar-track { background: transparent; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.kicker { display: block; font-size: 13px; letter-spacing: 0.06em;
          text-transform: uppercase; color: var(--color-accent); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* fading rule — Nocturne signature */
.fade-rule-top { background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent) no-repeat top / 100% 1px; }

/* ── components ─────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
       cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: 500;
       font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent;
       border: 1px solid transparent; padding: 7px 12px; border-radius: var(--radius-ctl);
       white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out),
       background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.btn svg { display: block; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn .ph { font-size: 16px; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
/* the assignment actions each carry their own colour: green runs, amber formats, accent submits */
.btn-run { color: var(--color-ok); border-color: var(--color-ok); }
.btn-format { color: var(--color-warn); border-color: var(--color-warn); }
.btn-run .kbd-hint kbd, .btn-format .kbd-hint kbd { color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-ghost { color: var(--color-accent); padding-inline: 4px; }
.btn-danger { color: var(--color-bad); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
  .btn-run:hover:not(:disabled) { background: color-mix(in srgb, var(--color-ok) 12%, transparent); }
  .btn-format:hover:not(:disabled) { background: color-mix(in srgb, var(--color-warn) 12%, transparent); }
  .btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
  .btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
  .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--color-bad) 12%, transparent); border-color: color-mix(in srgb, var(--color-bad) 40%, transparent); }
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .ph { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-block { width: 100%; margin-top: var(--space-2); }

.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
       letter-spacing: 0.02em; padding: 3px 10px; border-radius: var(--radius-ctl); }
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-bad { background: color-mix(in srgb, var(--color-bad) 18%, transparent); color: var(--color-bad); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.card { display: flex; flex-direction: column; gap: 5.6px; padding: 8.4px;
        border-radius: var(--radius-card); background: var(--color-surface); }
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
               color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: 500;
              font-size: 17px; line-height: 1.2; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px;
             color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }

.input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
         font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
         background: var(--color-surface);
         border: 1px solid var(--color-divider); border-radius: var(--radius-ctl);
         transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline: none;
                       box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* ── screens / routing ──────────────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: block; }
.view { display: none; }

/* ── auth screens: split, image left, form right ───────────────────── */
.auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.auth-visual { position: relative; overflow: hidden; display: grid; align-content: end; padding: 0 clamp(20px, 5vw, 72px) 56px; }
.auth-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 30%;
                   filter: saturate(0.85); z-index: -1; animation: fade 600ms ease both; }
.auth-visual::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--color-bg) 6%, color-mix(in srgb, var(--color-bg) 45%, transparent) 40%, transparent 70%),
              linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 70%, transparent), transparent 22%),
              linear-gradient(to left, var(--color-bg), transparent 18%); }
/* the brand: pincer mark in accent, wordmark in text colour */
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-weight: 500;
         font-size: 18px; letter-spacing: -0.01em; color: var(--color-text); text-decoration: none; }
.brand .mark { width: 22px; height: 22px; flex: none; color: var(--color-accent); }
.auth-visual .brand { position: absolute; top: 22px; left: clamp(20px, 5vw, 72px); }
.auth-tag { margin: 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -0.03em; max-width: 12ch; }
.auth-tag span { display: block; animation: rise 700ms var(--ease-out) both; }
.auth-tag .dim { color: var(--color-neutral-400); animation-delay: 120ms; }
.auth-side { display: grid; align-content: center; justify-items: start; padding: 64px clamp(20px, 5vw, 72px); }
.auth-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; animation: card-in 240ms var(--ease-out) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }
.auth-card h2 { font-size: 32px; letter-spacing: -0.02em; margin-bottom: 10px; }
.field label { display: block; font-size: 12px; margin-bottom: 5px;
               color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.auth-err { color: var(--color-bad); font-size: 13px; min-height: 1.2em; margin: 0;
            opacity: 0; transform: translateY(-4px);
            transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.auth-err.on { opacity: 1; transform: translateY(0); }
.auth-err.ok { color: var(--color-ok); }
.auth-alt { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.auth-alt a { color: var(--color-accent); text-decoration: none; }
.auth-ok { font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: 38dvh auto; }
  .auth-visual { padding-bottom: 24px; }
  .auth-visual::after { background: linear-gradient(to top, var(--color-bg) 4%, color-mix(in srgb, var(--color-bg) 50%, transparent) 45%, transparent 80%); }
  .auth-tag { font-size: 28px; }
  .auth-side { padding: 32px clamp(20px, 5vw, 72px) 48px; align-content: start; }
}

/* ── landing ────────────────────────────────────────────────────────── */
.land-wrap { max-width: 1264px; width: 100%; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
#home-view nav { position: absolute; inset-inline: 0; top: 0; z-index: 2; display: flex; align-items: center;
                 gap: var(--space-3); padding: 14px clamp(20px, 5vw, 72px); }
/* a soft scrim under the nav so the brand and links hold up over the bright parts of the photo */
#home-view nav::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 150px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 82%, transparent), color-mix(in srgb, var(--color-bg) 40%, transparent) 55%, transparent); }
#home-view nav .brand { margin-right: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
#home-view nav a { color: inherit; text-decoration: none; font-size: 14px; white-space: nowrap; transition: color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { #home-view nav a:not(.btn):hover { color: var(--color-accent); } }
@media (max-width: 640px) { #home-view nav a:not(.btn) { display: none; } }
.land-body { font-size: 15.5px; line-height: 1.8; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* hero: full-bleed image, display headline */
.hero { position: relative; min-height: 100dvh; display: grid; align-content: end; padding: 0 0 72px; overflow: hidden; }
.hero-inner { width: 100%; padding: 0 clamp(20px, 5vw, 72px); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; z-index: -1;
           filter: saturate(0.85); animation: hero-zoom linear both, fade 600ms ease both; animation-timeline: scroll(), auto; animation-range: 0 100vh, normal; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--color-bg) 8%, color-mix(in srgb, var(--color-bg) 55%, transparent) 45%, transparent 75%); }
.hero h1 { font-size: clamp(56px, 9.5vw, 148px); line-height: 0.96; letter-spacing: -0.035em; max-width: 12ch; margin-left: -0.04em; }
.hero h1 span { display: block; animation: rise 700ms var(--ease-out) both; }
.hero h1 span:nth-child(2) { animation-delay: 80ms; }
.hero h1 .dim { color: var(--color-neutral-400); animation-delay: 160ms; }
.hero-row { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.hero-row p { font-size: 18px; line-height: 1.55; max-width: 38ch; margin: 0; animation: rise 700ms var(--ease-out) 320ms both; }
.hero-cta { display: flex; gap: var(--space-2); flex-wrap: wrap; animation: rise 700ms var(--ease-out) 420ms both; }
@media (max-width: 720px) { .hero { padding-bottom: 40px; } .hero::after { background: linear-gradient(to top, var(--color-bg) 20%, color-mix(in srgb, var(--color-bg) 60%, transparent) 55%, transparent 85%); } }

/* three things: pinned stack of real panels */
.stack { max-width: 1264px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.stack .lead, .chapters h2, .pricing h2 { font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -0.02em; line-height: 1.04; max-width: 18ch; }
.stack { --stack-head: 156px; }
.stack .lead { position: sticky; top: 0; z-index: 2; margin: 112px 0 0; padding: 24px 0 16px;
               background: linear-gradient(to bottom, var(--color-bg) 80%, transparent); }
.step { position: sticky; top: var(--stack-head); min-height: calc(100dvh - var(--stack-head)); display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 16px 0 32px;
        background: var(--color-bg); }
.step .copy .n { font: 500 13px var(--font-mono); color: var(--color-accent); }
.step .copy h3 { font-size: 28px; letter-spacing: -0.012em; margin: 10px 0 12px; }
.step .copy p { font-size: 15.5px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 40ch; margin: 0; }
.step .panel { border-radius: var(--radius-panel); padding: 18px; }
.step:nth-of-type(1) .panel { background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent-900) 60%, var(--color-bg)), var(--color-bg)); }
.step:nth-of-type(2) .panel { background: linear-gradient(160deg, color-mix(in srgb, var(--color-section) 45%, var(--color-bg)), var(--color-bg)); }
.step:nth-of-type(3) .panel { background: linear-gradient(160deg, color-mix(in srgb, var(--color-neutral-900) 80%, var(--color-bg)), var(--color-bg)); }
.step:nth-of-type(4) .panel { background: linear-gradient(160deg, color-mix(in srgb, var(--color-ok) 12%, var(--color-bg)), var(--color-bg)); }
.ed-toggles { display: inline-flex; gap: 8px; }
.ed-toggles .hints-toggle { margin-left: 0; font-size: 11px; padding: 2px 8px 2px 6px; }
.ed-lines.gut { grid-template-columns: 24px 30px 1fr; }
.ed-lines .g { display: inline-flex; align-items: center; gap: 2px; color: var(--color-neutral-600); }
.ed-lines .g .ph-lightbulb { color: var(--color-accent); }
.ed-lines .hl { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-radius: 4px; margin-left: -6px; padding-left: 6px; }
.ed-lines .trace-vals { padding: 6px 0 10px; }
.demo { font-size: 14px; line-height: 1.6; }
.demo .md p { margin: 0 0 14px; }
.demo .code-wrap { margin: 0; }
.demo pre { margin: 0; padding: 14px 16px; font-size: 12.5px; line-height: 1.6; background: var(--color-neutral-900); }
.demo-results { list-style: none; margin: 14px 0 0; padding: 10px 14px; display: grid; gap: 2px; font-family: var(--font-mono); font-size: 12.5px;
                background: var(--color-neutral-900); border-radius: var(--radius-card); }
.demo-results .test-row .ph { color: var(--color-neutral-600); }
.demo-results .test-row.ok .ph { color: var(--color-ok); }
.demo-results .test-row.failed .ph { color: var(--color-bad); }
.demo-results .test-detail > pre { padding: 0; background: none; font-size: 12px; color: var(--color-neutral-400); }
.demo-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: 14px; flex-wrap: wrap; font-size: 12.5px; }
.demo-foot .pill { margin-left: auto; }
.demo-foot .btn { pointer-events: none; }
.demo-editor { display: grid; gap: 12px; padding: 20px; background: color-mix(in srgb, var(--color-surface) 92%, transparent);
               border-radius: var(--radius-panel); box-shadow: var(--shadow-lg); }
.ed-head { display: flex; gap: 12px; font: 12.5px var(--font-mono); color: var(--color-neutral-400); border-bottom: 1px solid var(--color-divider); padding-bottom: 8px; }
.ed-head .file { color: var(--color-text); } .ed-head .right { margin-left: auto; color: var(--color-neutral-500); }
.ed-lines { display: grid; grid-template-columns: 24px 1fr; gap: 0 12px; font: 12.5px/1.65 var(--font-mono); overflow-x: auto; }
.ed-lines > span { white-space: pre; }
.ed-lines .n { color: var(--editor-line-no); text-align: right; }
.demo-editor .demo-results, .demo-editor .demo-foot { margin-top: 0; }
.demo-syllabus { padding: 8px 20px; background: color-mix(in srgb, var(--color-surface) 92%, transparent);
                 border-radius: var(--radius-panel); box-shadow: var(--shadow-lg); }
.demo-syllabus .topic-row { margin: 0; grid-template-columns: 18px minmax(120px, 190px) minmax(0, 1fr); }
.demo-syllabus .topic-row .note { -webkit-line-clamp: 4; }
/* the demo plays once when it scrolls into view */
#home-demo .d1, #home-demo .d2, #home-demo .d3, #home-demo .d4, #home-demo .d5 { opacity: 0; transform: translateY(6px); }
#home-demo.play .d1, #home-demo.play .d2, #home-demo.play .d3, #home-demo.play .d4, #home-demo.play .d5 { animation: demo-in 300ms var(--ease-out) forwards; }
#home-demo .d1 { animation-delay: 200ms; } #home-demo .d2 { animation-delay: 800ms; } #home-demo .d3 { animation-delay: 1500ms; }
#home-demo .d4 { animation-delay: 2300ms; } #home-demo .d5 { animation-delay: 3500ms; }
@keyframes demo-in { to { opacity: 1; transform: none; } }
#home-demo .toolchip .done { display: none; }
#home-demo.play .toolchip .spin { animation: spin 1s linear 5, demo-gone 1ms 2500ms forwards; }
#home-demo.play .toolchip .done { animation: demo-show 1ms 2500ms forwards; }
@keyframes demo-gone { to { display: none; } } @keyframes demo-show { to { display: inline-block; } }
#home-demo.play .r1 .ph { animation: demo-ok 1ms 2800ms forwards; } #home-demo.play .r2 .ph { animation: demo-ok 1ms 3000ms forwards; }
#home-demo.play .r3 .ph { animation: demo-ok 1ms 3200ms forwards; }
@keyframes demo-ok { to { color: var(--color-ok); } }

/* more: the smaller tools, a bento of real components that each play once in view */
.more { max-width: 1264px; margin: 0 auto; padding: 128px clamp(20px, 5vw, 72px) 0; }
.more h2 { font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -0.02em; line-height: 1.04; max-width: 18ch; }
.more .land-body { margin: 18px 0 40px; max-width: 52ch; }
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.more-card { grid-column: span 1; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius-panel);
             background: color-mix(in srgb, var(--color-surface) 70%, transparent); border: 1px solid var(--color-divider);
             transition: border-color var(--dur) ease, transform var(--dur) var(--ease-out), box-shadow var(--dur) ease; }
.more-card.wide { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) { .more-card:hover { border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); transform: translateY(-3px); box-shadow: var(--shadow-lg); } }
@media (max-width: 1040px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .more-grid { grid-template-columns: 1fr; }
  .more-card.wide { grid-column: span 1; }
  .more-vis, .more-card.wide .more-vis { height: auto; max-height: 320px; padding-bottom: 18px; }
  .more-vis .pill { width: auto; margin-left: auto; }
}
.more-vis { position: relative; height: 250px; padding: 18px 18px 0; overflow: hidden; isolation: isolate;
            background: linear-gradient(180deg, color-mix(in srgb, var(--color-neutral-900) 70%, var(--color-bg)), transparent); }
.more-vis::after { content: ""; position: absolute; inset: auto 0 0; height: 48px; pointer-events: none;
                   background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-surface) 70%, var(--color-bg))); }
.more-vis > * { zoom: 0.86; }
.more-card.wide .more-vis { height: 300px; }
.more-card[data-demo="review"] .more-vis > * { zoom: 0.76; }
.more-vis .ed-lines { overflow: hidden; }
.more-vis .check-q .code-wrap pre { padding: 10px 14px; }
.more-copy { display: grid; grid-template-columns: 26px 1fr; gap: 4px 12px; align-content: start; padding: 18px 22px 22px; }
.more-copy > .ph { grid-row: span 2; font-size: 22px; color: var(--color-accent); margin-top: 2px; }
.more-copy h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.more-copy p { margin: 0; font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 74%, transparent); }
.more-vis .check { max-width: none; box-shadow: none; }
.more-vis .check-opt { cursor: default; }
.more-vis .btn, .more-vis .hints-toggle { pointer-events: none; }
/* every demo: elements that reveal in sequence share one keyframe; per-card delays below */
.more-card [class*=" o"], .more-vis .check-after, .more-vis .err-coach, .more-vis .demo-pop, .more-vis .review-next,
.more-vis .demo-explain, .more-vis .toast-demo, .more-vis .scratch-out span, .more-vis .ran, .more-vis .g .ph { opacity: 0; }
.more-card.play .check-opt.o1 { animation: demo-in 240ms var(--ease-out) 200ms forwards; }
.more-card.play .check-opt.o2 { animation: demo-in 240ms var(--ease-out) 320ms forwards; }
.more-card.play .check-opt.o3 { animation: demo-in 240ms var(--ease-out) 440ms forwards; }
.more-card.play .check-opt.o2.is-answer, .more-card.play .demo-review .check-opt.o2 { animation: demo-in 240ms var(--ease-out) 320ms forwards, demo-pick 1ms 1400ms forwards; }
.more-card.play .check-opt.o1:not(.o2), .more-card.play .check-opt.o3 { animation-name: demo-in, demo-dim; animation-duration: 240ms, 1ms; animation-delay: 200ms, 1400ms; animation-fill-mode: forwards; }
.more-card.play .check-opt.o3 { animation-delay: 440ms, 1400ms; }
.more-card.play .check-after { animation: demo-in 300ms var(--ease-out) 1600ms forwards; }
.more-card.play .review-next { animation: demo-in 300ms var(--ease-out) 2000ms forwards; }
@keyframes demo-pick { to { opacity: 1; border-color: var(--color-ok); background: color-mix(in srgb, var(--color-ok) 10%, transparent); } }
@keyframes demo-dim { to { opacity: 0.45; } }
.more-vis .check-opt.o2 .n { transition: background-color var(--dur) ease, color var(--dur) ease; }
.more-card.play .check-opt.o2 .n { animation: demo-pick-n 1ms 1400ms forwards; }
@keyframes demo-pick-n { to { background: var(--color-ok); color: var(--color-bg); } }
/* error coach */
.demo-results-pane { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.demo-results-pane .build-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-family: var(--font-body); }
.demo-results-pane .build-errors { list-style: none; margin: 0; padding: 0; }
.demo-results-pane .err-coach { display: grid; }
.more-card.play .explain { animation: demo-press 320ms var(--ease-out) 900ms; }
@keyframes demo-press { 50% { transform: scale(0.96); background: color-mix(in srgb, var(--color-text) 10%, transparent); } }
.more-card.play .err-coach { animation: demo-in 320ms var(--ease-out) 1500ms forwards; }
/* clippy */
.more-vis .ed-lines.lints .g .ph { color: var(--color-warn); }
.more-card.play .b1 { animation: demo-in 240ms var(--ease-out) 300ms forwards; }
.more-card.play .b2 { animation: demo-in 240ms var(--ease-out) 460ms forwards, demo-ring 600ms var(--ease-out) 1300ms; }
.more-card.play .b3 { animation: demo-in 240ms var(--ease-out) 620ms forwards; }
@keyframes demo-ring { 30% { transform: scale(1.35); } }
.more-vis .demo-pop { position: absolute; left: 96px; top: 96px; width: 300px; transform-origin: left top; transform: scale(0.96); z-index: 2; }
.more-card.play .demo-pop { animation: demo-in 220ms var(--ease-out) 1500ms forwards; }
.lint-note { display: inline-flex; align-items: center; gap: 6px; color: var(--color-warn); }
/* stretch */
.demo-stretch { font-size: 14px; }
.demo-stretch .stretch-foot { margin-top: 12px; }
/* scratch */
.more-vis .scratch-out { margin: 0; font: 12.5px/1.6 var(--font-mono); color: var(--color-neutral-200); }
.more-card.play .run { animation: demo-press 320ms var(--ease-out) 700ms; }
.more-card.play .ran { animation: demo-in 240ms var(--ease-out) 1500ms forwards; }
.more-card.play .scratch-out .l1 { animation: demo-in 200ms var(--ease-out) 1600ms forwards; }
.more-card.play .scratch-out .l2 { animation: demo-in 200ms var(--ease-out) 1800ms forwards; }
/* explain */
.more-vis .ed-lines .sel { background: color-mix(in srgb, var(--color-accent) 18%, transparent); border-radius: 3px; margin-left: -6px; padding-left: 6px;
                          background-size: 0% 100%; background-repeat: no-repeat; }
.more-card.play .ed-lines .sel { animation: demo-select 500ms var(--ease-out) 300ms forwards; }
@keyframes demo-select { to { background-size: 100% 100%; } }
.more-card.play .explain-btn { animation: demo-press 320ms var(--ease-out) 1100ms; }
.more-vis .demo-explain { margin-top: 12px; font-size: 13.5px; line-height: 1.55; }
.more-card.play .demo-explain { animation: demo-in 320ms var(--ease-out) 1600ms forwards; }
/* streak */
.demo-streak { display: grid; gap: 18px; }
.demo-streak .row { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.demo-streak .streak { font-size: 15px; padding: 5px 12px 5px 9px; }
.demo-streak .streak .ph { font-size: 18px; }
.demo-streak .syl-chap-head { margin: 0; }
.demo-streak .syl-chap-head h2 { font-size: 17px; max-width: none; white-space: nowrap; }
.demo-streak .syl-chap-head .k { white-space: nowrap; }
.demo-streak .mastery { margin: -8px 0 0; }
.more-card.play .demo-streak .mastery i { animation: demo-fill 1200ms var(--ease-out) 600ms forwards; }
@keyframes demo-fill { to { width: 85%; } }
.more-card.play .demo-streak .count { animation: demo-count 1400ms steps(7, end) 300ms; }
@keyframes demo-count { from { content: "1"; } }
.more-card.play .demo-streak .streak { animation: demo-ring 600ms var(--ease-out) 1700ms; }
.toast-demo { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 9px 14px; border-radius: var(--radius-card);
              background: var(--color-surface); box-shadow: var(--shadow-lg); font-size: 13.5px; }
.toast-demo .ph { color: var(--color-ok); font-size: 17px; }
.more-card.play .toast-demo { animation: demo-in 300ms var(--ease-out) 2000ms forwards; }
@media (prefers-reduced-motion: reduce) {
  .more-card [class*=" o"], .more-vis .check-after, .more-vis .err-coach, .more-vis .demo-pop, .more-vis .review-next,
  .more-vis .demo-explain, .more-vis .toast-demo, .more-vis .scratch-out span, .more-vis .ran, .more-vis .g .ph { opacity: 1; }
  .more-card.play * { animation: none !important; }
  .more-vis .ed-lines .sel { background-size: 100% 100%; }
  .demo-streak .mastery i { width: 85%; }
}

/* chapters: big-type list with expandable explanations */
.chapters { max-width: 1264px; margin: 0 auto; padding: 128px clamp(20px, 5vw, 72px) 0; }
.chapters .land-body { margin: 18px 0 40px; max-width: 52ch; }
.chplist { list-style: none; margin: 0; padding: 0; }
.chp { background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; }
.chp-btn { display: grid; grid-template-columns: 64px 1fr auto 28px; align-items: baseline; gap: 24px; width: 100%; padding: 16px 0;
           border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--color-neutral-500);
           transition: color var(--dur) ease; }
.chp-btn .t { font-size: clamp(24px, 3.2vw, 42px); letter-spacing: -0.02em; line-height: 1.1; }
.chp-btn .n { font: 400 14px var(--font-mono); color: var(--color-accent); }
.chp-btn .c { font: 400 13px var(--font-mono); color: var(--color-neutral-600); }
.chp-btn .ph { font-size: 20px; color: var(--color-neutral-600); align-self: center;
               transition: transform var(--dur-slow) var(--ease-out), color var(--dur) ease; }
.chp.open .chp-btn { color: var(--color-text); }
@media (hover: hover) and (pointer: fine) { .chp-btn:hover { color: var(--color-text); } .chp-btn:hover .ph { color: var(--color-accent); } }
.chp.open .chp-btn .ph { transform: rotate(180deg); color: var(--color-accent); }
.chp-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.chp.open .chp-body { grid-template-rows: 1fr; }
.chp-inner { overflow: hidden; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-left: 88px;
             opacity: 0; transform: translateY(-6px); transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.chp.open .chp-inner { opacity: 1; transform: none; padding-bottom: 28px; }
.chp-inner p { margin: 0 0 8px; font-size: 16px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 80%, transparent); max-width: 52ch; }
.chp-inner ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.chp-inner li { display: flex; gap: 14px; font-size: 15px; }
.chp-inner .tn { font: 400 12.5px var(--font-mono); color: var(--color-accent); padding-top: 2px; }

/* pricing: one comparison table */
.pricing { max-width: 1264px; margin: 0 auto; padding: 128px clamp(20px, 5vw, 72px) 0; }
.pricing h2 { margin-bottom: 32px; }
.pricing .land-body { margin-bottom: 20px; }
.ptable { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; border-radius: var(--radius-card); overflow: hidden;
          box-shadow: var(--shadow-sm); font-size: 14px; }
.ptable > div { padding: 14px 18px; border-top: 1px solid var(--color-divider); }
.ptable > div:nth-child(-n+4) { border-top: 0; }
.ptable .h { font-family: var(--font-heading); font-weight: 500; }
.ptable .amt { font-size: 28px; letter-spacing: -0.02em; }
.ptable .amt small { font-size: 12px; color: var(--color-neutral-500); letter-spacing: 0; margin-left: 4px; }
.ptable .pro { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.ptable .lbl { color: var(--color-neutral-400); }
.ptable .ph { color: var(--color-ok); }
.ptable .no { color: var(--color-neutral-700); }
.price-foot { font-size: 13px; margin: 28px 0 0; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.land-footer { padding: 42px 0 56px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
               display: flex; gap: 24px; flex-wrap: wrap; }
.land-footer a { color: inherit; text-decoration: none; }

@media (max-width: 860px) {
  .step { grid-template-columns: 1fr; position: static; min-height: 0; gap: 20px; padding: 24px 0; }
  .stack .lead { position: static; margin-top: 72px; padding: 0 0 8px; background: none; }
  .chp-btn { grid-template-columns: 40px 1fr 28px; } .chp-btn .c { display: none; }
  .chp-inner { grid-template-columns: 1fr; padding-left: 0; }
  .chapters, .pricing { padding-top: 88px; }
  .ptable { grid-template-columns: 1fr 1fr; } .ptable .free-col { display: none; }
  .ptable > div:nth-child(-n+4) { border-top: 1px solid var(--color-divider); } .ptable > div:nth-child(-n+2) { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 span, .hero-row p, .hero-cta, .hero-bg, .auth-visual img, .auth-tag span, .auth-card { animation: none; }
  #home-demo .d1, #home-demo .d2, #home-demo .d3, #home-demo .d4, #home-demo .d5 { opacity: 1; transform: none; }
}
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 24px clamp(20px, 5vw, 72px) 84px; }
.legal-wrap h1 { font-size: 34px; letter-spacing: -0.012em; margin: 28px 0 6px; }
.legal-wrap .updated { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.legal-wrap h2 { font-size: 19px; letter-spacing: -0.008em; margin: 38px 0 0; }
.legal-wrap p, .legal-wrap li { font-size: 15px; line-height: 1.75;
  color: color-mix(in srgb, var(--color-text) 84%, transparent); margin: 12px 0 0; }
.legal-wrap ul { margin: 12px 0 0; padding-left: 22px; }
.legal-wrap a { color: var(--color-accent); }
.legal-num p { margin-top: 10px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: 14px; line-height: 1.5; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-top: 1px solid var(--color-divider); }
.legal-table th { font-weight: 500; color: color-mix(in srgb, var(--color-text) 65%, transparent); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; border-top: 0; }
.legal-form { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; padding: 16px; border: 1px solid var(--color-divider); border-radius: var(--radius-card); }
.legal-co { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: 28px; }
.price-fn { margin-top: 6px; font-size: 12.5px; }
.legal-links { margin-left: auto; display: flex; gap: 18px; font-size: 13px; }
.legal-links a { color: color-mix(in srgb, var(--color-text) 65%, transparent); text-decoration: none; }
.legal-links a:hover { color: var(--color-text); }
.auth-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 75%, transparent); cursor: pointer; }
.auth-consent input { margin-top: 3px; accent-color: var(--color-accent); width: 15px; height: 15px; }
.auth-consent a { color: var(--color-accent); text-decoration: none; }
.contact-form { display: grid; gap: 14px; max-width: 560px; margin-top: 28px; }
.contact-form textarea.input { min-height: 160px; resize: vertical; line-height: 1.5; padding: 10px; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.contact-done { margin-top: 28px; display: grid; gap: 10px; justify-items: start; }
.consent-wrap .auth-consent { margin: 28px 0 10px; font-size: 14px; }
.legal-nav { display: flex; align-items: center; padding: 14px clamp(20px, 5vw, 72px);
             max-width: 760px; margin: 0 auto; }
.land-footer { padding: 42px 0 56px; font-size: 13px;
               color: color-mix(in srgb, var(--color-text) 55%, transparent);
               display: flex; gap: 24px; flex-wrap: wrap; }
.land-footer a { color: inherit; text-decoration: none; }

/* ── app shell ──────────────────────────────────────────────────────── */
#app-nav { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-5);
           position: sticky; top: 0; z-index: 5; height: var(--nav-h);
           background: color-mix(in srgb, var(--color-bg) 82%, transparent);
           backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
           box-shadow: 0 1px 0 var(--color-divider); }
#app-nav .brand { background: none; border: 0; padding: 4px 8px 4px 0; cursor: pointer;
                  font-size: 17px; margin-right: var(--space-3); }
#app-nav .brand .mark { width: 20px; height: 20px; }
#app-tabs { position: relative; display: flex; gap: 2px; margin-right: auto; }
#tab-indicator { position: absolute; top: 0; left: 0; height: 100%; width: 0;
                 border-radius: var(--radius-ctl);
                 background: color-mix(in srgb, var(--color-text) 8%, transparent);
                 transition: transform var(--dur) var(--ease-out), width var(--dur) var(--ease-out),
                             opacity var(--dur-fast) ease;
                 opacity: 0; }
#tab-indicator.on { opacity: 1; }
.tab { position: relative; z-index: 1; background: transparent; border: 0; cursor: pointer; padding: 6px 12px;
       border-radius: var(--radius-ctl); font-size: 14px; font-family: var(--font-heading); font-weight: 500;
       color: var(--color-neutral-500);
       transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.tab:active { transform: scale(0.97); }
.tab.active { color: var(--color-text); }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--color-text); } }
/* the status capsule: progress, streak and lesson in one quiet pill; the avatar stands apart */
.nav-status { display: inline-flex; align-items: stretch; height: 34px; padding: 0 3px; border-radius: var(--radius-pill);
              background: color-mix(in srgb, var(--color-surface) 85%, transparent); border: 1px solid var(--color-divider); }
.nav-status:not(:has(.seg:not([hidden]))) { display: none; }
.nav-status .seg { display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 0; background: none; cursor: default;
                   font: 500 12.5px var(--font-heading); color: var(--color-text); font-feature-settings: "tnum" 1; white-space: nowrap; }
.nav-status .seg[hidden] { display: none; }
.nav-status .seg + .seg:not([hidden]) { box-shadow: inset 1px 0 0 var(--color-divider); }
.nav-status .seg .ph { font-size: 15px; color: var(--color-neutral-500); }
.nav-status .seg .k, #nav-progress-label .k { color: var(--color-neutral-500); font-weight: 400; margin-left: 1px; }
.nav-status .streak { border-radius: 0; padding: 0 11px; background: none; color: var(--color-text); }
.nav-status .streak .ph { color: var(--color-warn); }
.nav-status .streak.off { color: var(--color-neutral-500); }
.nav-status .streak.off .ph { color: var(--color-neutral-600); }
.nav-status .streak.hot .ph { color: var(--color-accent); }
#nav-progress { cursor: pointer; transition: background-color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { #nav-progress:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); border-radius: var(--radius-pill) 0 0 var(--radius-pill); } }
#nav-progress svg { display: block; }
/* the idle dot on the Lesson tab, and the waiting-assignment dot on the Assignment tab */
#app-nav .tab.idle::after, #tabbar button.idle .ph::after,
#app-nav .tab.has-dot::after, #tabbar button.has-dot .ph::after {
  content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 10px var(--color-accent); animation: idle-dot 2.4s ease-in-out infinite; }
#app-nav .tab { position: relative; }
#app-nav .tab.idle::after, #app-nav .tab.has-dot::after { top: 6px; right: 2px; }
#tabbar button .ph { position: relative; }
#tabbar button.idle .ph::after, #tabbar button.has-dot .ph::after { top: -2px; right: -6px; }
@keyframes idle-dot { 50% { box-shadow: 0 0 0 2px var(--color-bg), 0 0 2px var(--color-accent); opacity: 0.7; } }
.streak { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 6px; border-radius: var(--radius-pill);
          font: 500 12px var(--font-heading); color: var(--color-warn); background: color-mix(in srgb, var(--color-warn) 14%, transparent);
          opacity: 1; transform: scale(1); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.streak[hidden] { display: none; }
@starting-style { .streak { opacity: 0; transform: scale(0.9); } }
.streak .ph { font-size: 15px; }
.streak.hot { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.syl-streak { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; color: var(--color-neutral-300); }
.syl-streak[hidden] { display: none; }
.syl-streak .ph { font-size: 16px; color: var(--color-warn); }
.syl-review { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--color-divider); }
.syl-review[hidden] { display: none; }
.syl-review-line { margin: 0; font-size: 13px; color: var(--color-neutral-300); line-height: 1.5; }
.syl-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.syl-review-actions .btn { font-size: 13px; padding: 6px 11px; }
.syl-review-actions .btn[hidden] { display: none; }
.review-panel { margin-bottom: 32px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.review-panel[hidden] { display: none; }
.review-panel .check { max-width: none; width: 100%; }
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; color: var(--color-neutral-400); }
.review-head .k { font: 500 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.review-head .btn { margin-left: auto; }
.review-next { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.review-next .btn { margin-left: auto; }
.review-done { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-md); }
.review-done h3 { margin: 0; font-size: 18px; }
.review-done p { margin: 0; color: var(--color-neutral-300); font-size: 14px; }
.mastery { display: flex; align-items: center; gap: 10px; margin: -6px 0 14px; font-size: 12px; color: var(--color-neutral-500); }
.mastery .bar { flex: 0 0 160px; height: 3px; border-radius: var(--radius-pill); background: var(--color-neutral-800); overflow: hidden; }
.mastery .bar > i { display: block; height: 100%; width: 0; background: var(--color-accent); border-radius: inherit;
                    transition: width 700ms var(--ease-out); }
.mastery.high .bar > i { background: var(--color-ok); }
.mastery.low .bar > i { background: var(--color-warn); }
#nav-progress-ring { filter: drop-shadow(0 0 4px var(--color-ok));
                     transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
#nav-progress.pulse svg { animation: pulse 480ms var(--ease-out); }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
#nav-progress-label { font-size: 12.5px;
                      font-family: var(--font-heading); font-weight: 500; color: var(--color-neutral-300); }
/* the same avatar as the profile hero, at top-bar size */
.avatar { width: 32px; height: 32px; padding: 0; border-radius: 50%; flex: none; border: 0;
          background: linear-gradient(145deg, var(--color-accent-300), var(--color-accent-600)); color: var(--color-bg);
          font: 500 14px var(--font-heading); cursor: pointer;
          box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 22%, transparent);
          transition: box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.avatar.active { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent), 0 0 16px color-mix(in srgb, var(--color-accent) 40%, transparent); }
@media (hover: hover) and (pointer: fine) { .avatar:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 45%, transparent), 0 0 14px color-mix(in srgb, var(--color-accent) 30%, transparent); } }
#nav-lesson-tag { font-feature-settings: "tnum" 1; }

/* view enter (fallback when View Transitions are unavailable) */
.view.entering { animation: view-in var(--dur-slow) var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } }
::view-transition-old(root) { animation: 120ms ease both vt-out; }
::view-transition-new(root) { animation: 160ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(4px); } }

/* phone tab bar */
#tabbar { display: none; }
@media (max-width: 720px) {
  #app-tabs, #nav-lesson-tag, #nav-account { display: none; }
  #app-nav { padding: 0 var(--space-4); }
  #app-nav .brand { margin-right: auto; }
  #tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 6; display: grid;
            grid-template-columns: repeat(5, 1fr); height: calc(56px + env(safe-area-inset-bottom));
            padding-bottom: env(safe-area-inset-bottom);
            background: color-mix(in srgb, var(--color-bg) 88%, transparent);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 -1px 0 var(--color-divider); }
  #tabbar button { display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; border: 0;
                   background: none; color: var(--color-neutral-500); font: 500 10.5px var(--font-heading);
                   cursor: pointer; transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
  #tabbar button .ph { font-size: 22px; }
  #tabbar button.active { color: var(--color-accent); }
  #app-view { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ── lesson ─────────────────────────────────────────────────────────── */
#lesson-view.active { display: block; }
/* full width like the assignment: a sidebar with the lesson's identity and stages, the transcript beside it */
.lesson-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0; }
/* the reading column sits centred; from 1280px a context rail takes the right */
.ctx-rail { display: none; position: sticky; top: var(--nav-h); align-self: start; height: calc(100dvh - var(--nav-h)); overflow-y: auto;
            flex-direction: column; gap: 12px; padding: 24px 22px 24px 18px; border-left: 1px solid var(--color-divider); }
@media (min-width: 1280px) {
  .lesson-grid { grid-template-columns: 250px minmax(0, 1fr) 300px; }
  .ctx-rail { display: flex; }
}
.ctx-card { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius-card); font-size: 13px; line-height: 1.5;
            background: color-mix(in srgb, var(--color-surface) 75%, transparent); border: 1px solid var(--color-divider); color: var(--color-neutral-300);
            opacity: 1; transform: translateY(0); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
@starting-style { .ctx-card { opacity: 0; transform: translateY(4px); } }
.ctx-card[hidden] { display: none; }
.ctx-card .k { font: 500 10.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.ctx-card b { font: 500 14px var(--font-heading); color: var(--color-text); line-height: 1.3; }
.ctx-card .meta { font-size: 12.5px; color: var(--color-neutral-400); }
.ctx-card .note { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ctx-card a { display: inline-flex; align-items: center; gap: 5px; color: var(--color-accent); font: 500 13px var(--font-heading); text-decoration: none; margin-top: 2px; }
.ctx-card a .ph { transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ctx-card a:hover .ph { transform: translateX(3px); } }
.ctx-card .mastery { margin: 2px 0 0; } .ctx-card .mastery .bar { flex: 1; }
.ctx-card .tally { display: flex; gap: 6px; align-items: center; }
.ctx-card .tally i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-neutral-800); }
.ctx-card .tally i.ok { background: var(--color-ok); } .ctx-card .tally i.bad { background: var(--color-bad); }
.ctx-card .stretch-badge { justify-self: start; }
#lesson-side { position: sticky; top: var(--nav-h); align-self: start; height: calc(100dvh - var(--nav-h)); overflow-y: auto;
               display: flex; flex-direction: column; gap: 22px; padding: 24px 18px 24px 22px;
               border-right: 1px solid var(--color-divider); }
.lesson-col { display: flex; flex-direction: column; min-height: calc(100dvh - var(--nav-h)); padding: 0 40px; }
#chat, #composer-wrap { max-width: 900px; width: 100%; margin-inline: auto; }
#chat { flex: 1; display: flex; flex-direction: column; gap: 28px; padding: 24px 0 24px; }
/* lesson head: which lesson, which chapter, which topic */
#lesson-head { display: grid; gap: 4px; }
#lesson-head[hidden] { display: none; }
#lesson-head .kicker { font-size: 11px; }
.lh-title { font: 500 18px var(--font-heading); letter-spacing: -0.01em; line-height: 1.25; }
/* the five stages of a lesson, top to bottom, lit as they are reached */
.lh-steps { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.lh-steps li { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-ctl);
               font: 500 13px var(--font-heading); color: var(--color-neutral-600);
               transition: color var(--dur) ease, background-color var(--dur) ease, transform var(--dur) var(--ease-out); }
.lh-steps li .ph { font-size: 17px; }
.lh-steps li + li::before { content: ""; position: absolute; left: 18px; top: -8px; width: 1px; height: 12px; background: var(--color-neutral-800); }
.lh-steps li.done { color: var(--color-ok); }
.lh-steps li.done + li::before { background: color-mix(in srgb, var(--color-ok) 50%, transparent); }
.lh-steps li.now { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.lh-steps li.just { animation: step-pop 480ms var(--ease-out); }
@keyframes step-pop { 30% { transform: scale(1.04); } }
.chip-row { display: flex; justify-content: center; }
.chip-row .chip-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; margin-left: 2px; font-weight: 500; }
.chip-row .chip-link:hover { text-decoration-thickness: 2px; }
.msg-user { align-self: flex-end; max-width: 78%;
            background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-800) 70%, var(--color-accent-900)), var(--color-accent-900));
            border: 1px solid var(--color-accent-800); border-radius: var(--radius-card) var(--radius-card) var(--space-1) var(--radius-card);
            padding: 10px 14px; font-size: 15px; line-height: 1.55; overflow-x: auto; box-shadow: var(--shadow-sm); }
.msg-user > :first-child { margin-top: 0; } .msg-user > :last-child { margin-bottom: 0; }
/* min-width: 0 breaks the min-content chain — without it one long code
   line widens the message past the column and under the outline rail. */
.msg-coach { position: relative; display: grid; gap: 14px; font-size: 15px; line-height: 1.7; min-width: 0;
             padding: 18px 22px 20px; border-radius: var(--radius-panel);
             background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 88%, transparent), color-mix(in srgb, var(--color-surface) 70%, transparent));
             box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent); }
/* a hairline of accent down the left edge, brighter while the coach is writing */
.msg-coach::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
                     background: linear-gradient(to bottom, transparent, var(--color-accent) 22%, var(--color-accent) 78%, transparent);
                     opacity: 0.45; transition: opacity var(--dur) ease; }
.msg-coach.streaming::before { opacity: 1; animation: hair 1.4s ease-in-out infinite; }
@keyframes hair { 50% { opacity: 0.35; } }
.msg-coach.streaming { box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent), 0 0 32px color-mix(in srgb, var(--color-accent) 10%, transparent); }
.msg-coach > .md { min-width: 0; }
#chat > * { min-width: 0; max-width: 100%; }
.msg-coach .who { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.08em;
                  text-transform: uppercase; color: var(--color-accent); }
.portrait { width: 36px; height: 36px; border-radius: var(--radius-pill); object-fit: cover;
            box-shadow: 0 0 0 1px var(--color-divider); flex: none; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol { margin: 0 0 14px; }
.md ul, .md ol { padding-left: 22px; display: grid; gap: 6px; }
.md h1, .md h2, .md h3 { font-size: 22px; margin: 14px 0; }
.md h4 { font-size: 17px; margin: 10px 0; }
.md pre { margin: 0 0 14px; padding: 16px 18px; border-radius: var(--radius-card);
          background: var(--color-neutral-900); box-shadow: var(--shadow-sm);
          font-size: 13.5px; line-height: 1.6; overflow-x: auto; max-width: 100%; }
.md :not(pre) > code { font-size: 0.88em; color: var(--color-accent-300); }
.md blockquote { margin: 0 0 14px; padding-left: 14px;
                 border-left: 2px solid var(--color-accent-700);
                 color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.md hr { height: 1px; border: 0; margin: 14px 0;
         background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent); }
.md table { border-collapse: collapse; font-size: 14px; }
.md th, .md td { padding: 6px 12px; border-bottom: 1px solid var(--color-divider); text-align: left; }
.toolchip { align-self: flex-start; justify-self: start; gap: 8px; padding: 5px 12px 5px 8px;
            font: 500 12.5px var(--font-heading); letter-spacing: 0;
            border-color: color-mix(in srgb, var(--color-ok) 40%, transparent); color: var(--color-ok);
            background: color-mix(in srgb, var(--color-ok) 6%, transparent); }
.toolchip.running { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); color: var(--color-accent);
                    background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.toolchip .ph { font-size: 15px; }
.toolchip.running .ph.spin { animation: spin 1s linear infinite; }
#typing { display: none; align-items: center; gap: 12px; align-self: flex-start; padding: 10px 14px 10px 10px;
          border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-surface) 80%, transparent); box-shadow: var(--shadow-sm);
          color: var(--color-neutral-400); font-size: 13px; }
#typing .portrait { width: 26px; height: 26px; }
#typing .dots { display: inline-flex; gap: 4px; }
#typing .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); animation: bob 1.2s var(--ease-in-out) infinite; }
#typing .dot:nth-child(2) { animation-delay: 150ms; } #typing .dot:nth-child(3) { animation-delay: 300ms; }
@keyframes bob { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
#typing.on { display: inline-flex; }
#composer-wrap { position: sticky; bottom: 0; padding: 12px 0 20px;
                 background: linear-gradient(to bottom, transparent, var(--color-bg) 30%); }
#composer { display: flex; gap: 8px; align-items: flex-end;
            background: var(--color-surface); border: 1px solid var(--color-divider);
            border-radius: var(--radius-panel); padding: 8px 8px 8px 14px; box-shadow: var(--shadow-md);
            transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) var(--ease-out); }
#composer:focus-within { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
                         box-shadow: var(--shadow-md), 0 0 0 4px color-mix(in srgb, var(--color-accent) 12%, transparent), 0 0 40px color-mix(in srgb, var(--color-accent) 10%, transparent);
                         transform: translateY(-1px); }
#send { transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease, transform var(--dur-fast) var(--ease-out); }
#composer.has-text #send { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
#composer.locked { opacity: 0.5; }
#composer.locked textarea, #composer.locked #send { cursor: not-allowed; }
/* jump to the newest message when scrolled up during a reply */
.jump { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 14px 7px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-divider); cursor: pointer;
        background: var(--color-surface); color: var(--color-text); font: 500 13px var(--font-heading); box-shadow: var(--shadow-lg);
        opacity: 1; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.jump[hidden] { display: none; }
@starting-style { .jump { opacity: 0; transform: translate(-50%, 8px); } }
.jump .ph { font-size: 15px; color: var(--color-accent); }
.jump:active { transform: translate(-50%, 0) scale(0.97); }
#composer textarea { flex: 1; background: transparent; border: 0; min-height: 24px;
                     max-height: 200px; padding: 6px 0; resize: none; font: inherit;
                     font-size: 15px; color: var(--color-text);
                     caret-color: var(--color-accent); }
#composer textarea:focus { outline: none; }
#lesson-rail { display: none; grid-template-columns: 1fr; gap: 10px; font-size: 13px; padding-top: 18px; border-top: 1px solid var(--color-divider); }
.side-foot { margin-top: auto; display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
.side-foot[hidden] { display: none; }
.side-foot .acct-link { font-size: 13px; padding: 8px 10px; margin: 0 -10px; width: calc(100% + 20px); }
.side-foot .acct-link[hidden] { display: none; }
.paused-note { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; }
.paused-note[hidden] { display: none; }
@media (max-width: 720px) { .side-foot { flex: 1 1 100%; margin: 0; padding-top: 8px; border-top: 0; } }
#lesson-rail.filled { display: grid; }
#lesson-rail .rail-h { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
                       color: color-mix(in srgb, var(--color-text) 55%, transparent); }
#lesson-rail a { position: relative; color: var(--color-neutral-500); text-decoration: none; padding-left: 14px;
                 border-left: 2px solid var(--color-neutral-800); line-height: 1.4; }
#lesson-rail a::before { content: ""; position: absolute; left: -5px; top: 0.45em; width: 8px; height: 8px; border-radius: 50%;
                         background: var(--color-neutral-800); transition: background-color var(--dur) ease, transform var(--dur) var(--ease-out); }
#lesson-rail a.current { color: var(--color-text); border-left-color: var(--color-accent); }
#lesson-rail a.current::before { background: var(--color-accent); transform: scale(1.25); box-shadow: 0 0 8px var(--color-accent); }

/* lesson: entry motion, streaming caret, code chrome, empty state */
.msg-user, .msg-coach, .chip-row, .toolchip, #typing {
  opacity: 1; transform: translateY(0);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
@starting-style { .msg-user, .msg-coach, .chip-row, .toolchip, #typing { opacity: 0; transform: translateY(6px); } }
.msg-coach.streaming .md > :last-child:not(.code-wrap)::after {
  content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  vertical-align: -0.15em; background: var(--color-accent); animation: blink 1s steps(2) infinite; }
.chip-row .tag { gap: 6px; }
.chip-row .tag .ph { font-size: 13px; }
.chip-row .tag.bad { color: var(--color-bad); background: color-mix(in srgb, var(--color-bad) 12%, transparent); }

.code-wrap { margin: 0 0 14px; border-radius: var(--radius-card); background: var(--color-neutral-900);
             box-shadow: var(--shadow-sm); overflow: hidden; }
.code-wrap pre { margin: 0; box-shadow: none; border-radius: 0; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 16px;
             font: 500 11px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
             color: var(--color-neutral-500); border-bottom: 1px solid var(--color-divider); }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
            color: var(--color-neutral-400); font: inherit; letter-spacing: inherit; cursor: pointer;
            padding: 3px 8px; border-radius: var(--radius-ctl); opacity: 0;
            transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), color var(--dur-fast) ease; }
.copy-btn .ph { font-size: 14px; }
.code-wrap:hover .copy-btn, .copy-btn:focus-visible, .copy-btn.copied { opacity: 1; }
@media (hover: none) { .copy-btn { opacity: 1; } }
.copy-btn:active { transform: scale(0.95); }
.copy-btn .label { transition: filter var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.copy-btn.swapping .label { filter: blur(2px); opacity: 0.4; }
.copy-btn.copied { color: var(--color-ok); }
.kbd-hint { display: inline-flex; gap: 3px; align-self: center; white-space: nowrap; padding: 0 6px; }
.kbd-hint kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
                font: 500 11px system-ui, -apple-system, sans-serif; line-height: 1; color: var(--color-neutral-400);
                border: 1px solid var(--color-divider); border-bottom-width: 2px; border-radius: 4px;
                background: color-mix(in srgb, var(--color-text) 4%, transparent); }
@media (max-width: 720px) { .kbd-hint { display: none; } }
#send.is-loading { color: var(--color-neutral-500); border-color: var(--color-divider); }
#lesson-rail a { transition: color var(--dur) ease, border-color var(--dur) ease; }
#lesson-empty { padding: var(--space-8) 0 var(--space-6); display: grid; gap: var(--space-3); justify-items: start; }
#lesson-empty > * { animation: rise 600ms var(--ease-out) both; }
#lesson-empty > :nth-child(2) { animation-delay: 80ms; } #lesson-empty > :nth-child(3) { animation-delay: 160ms; }
#lesson-empty > :nth-child(4) { animation-delay: 240ms; } #lesson-empty > :nth-child(5) { animation-delay: 320ms; } #lesson-empty > :nth-child(6) { animation-delay: 400ms; }
#lesson-empty .welcome { display: grid; gap: 10px; max-width: 64ch; padding: 20px 22px; margin-bottom: var(--space-4);
  border-radius: var(--radius-card); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%); }
#lesson-empty .welcome h2 { font-size: 22px; letter-spacing: -0.01em; margin: 0; }
#lesson-empty .welcome p { margin: 0; line-height: 1.65; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
#lesson-empty .portrait { width: 64px; height: 64px; box-shadow: 0 0 0 1px var(--color-divider), 0 0 40px color-mix(in srgb, var(--color-accent) 25%, transparent); }
#lesson-empty h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; max-width: 20ch; line-height: 1.08; }
#lesson-empty p { margin: 0; max-width: 52ch; line-height: 1.6; }
#lesson-empty .actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); align-items: center; flex-wrap: wrap; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }
.starters button { padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-divider); background: transparent;
                   color: var(--color-neutral-300); font: 13.5px var(--font-body); cursor: pointer;
                   transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.starters button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .starters button:hover { border-color: var(--color-accent); color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 8%, transparent); } }
/* replayed transcript: a short stagger so the page settles in rather than snaps */
#chat.replay > * { animation: rise 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }

/* ── assignment ─────────────────────────────────────────────────────── */
#assignment-view.active { display: flex; height: calc(100dvh - var(--nav-h)); overflow: hidden; }
#assignment-switch { display: none; }
#assignment-left:focus-visible, #results:focus-visible { outline-offset: -2px; }
#assignment-left { width: 42%; min-width: 260px; flex: none; overflow-y: auto;
                   padding: var(--space-6) clamp(20px, 3vw, 48px) var(--space-7);
                   border-right: 1px solid var(--color-divider); font-size: 14.5px; line-height: 1.7;
                   transition: width 320ms var(--ease-out), padding 320ms var(--ease-out), opacity 180ms ease; }
/* the instructions slide away to the left; the editor takes the width */
#assignment-view.collapsed #assignment-left { width: 0 !important; min-width: 0; padding-inline: 0; opacity: 0; overflow: hidden; border-right: 0; }
#assignment-view.collapsed #pane-divider { display: none; }
.pane-toggle { display: grid; place-items: center; width: 26px; height: 26px; margin-right: 2px; border: 1px solid transparent; border-radius: var(--radius-ctl);
               background: transparent; color: var(--color-neutral-500); cursor: pointer;
               transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.pane-toggle .ph { font-size: 17px; transition: transform 320ms var(--ease-out); }
.pane-toggle:active { transform: scale(0.94); }
.pane-toggle[aria-pressed="true"] { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.pane-toggle[aria-pressed="true"] .ph { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { .pane-toggle:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 7%, transparent); } }
@media (max-width: 720px) { .pane-toggle { display: none; } }
#assignment-card { font-size: 14.5px; }
#assignment-card.is-empty { padding: 0 0 0 22px; background: none; box-shadow: none; }
#assignment-card.is-empty .who { display: none; }
#assignment-instructions h1:first-child, #assignment-instructions h2:first-child { font-size: 24px; margin: 0 0 14px; }
details.tests { margin-top: var(--space-4); font-size: 13.5px; }
details.tests summary { cursor: pointer; color: var(--color-accent); }
details.tests pre { margin: 10px 0 0; padding: 14px; border-radius: var(--radius-card);
                    background: var(--color-neutral-900); font-size: 12.5px; line-height: 1.6; overflow-x: auto; }
#pane-divider { width: 5px; cursor: col-resize; flex: none; touch-action: none;
                box-shadow: inset 1px 0 0 var(--color-divider); transition: background-color var(--dur-fast) ease; }
#output-divider { height: 5px; cursor: row-resize; flex: none; touch-action: none;
                  box-shadow: inset 0 1px 0 var(--color-divider); transition: background-color var(--dur-fast) ease; }
#pane-divider:hover, #output-divider:hover, .dragging { background: color-mix(in srgb, var(--color-accent) 40%, transparent); }
#assignment-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#editor-head { display: flex; align-items: center; gap: var(--space-3); padding: 8px 16px; font-size: 12.5px;
               font-family: var(--font-mono); color: var(--color-neutral-400);
               border-bottom: 1px solid var(--color-divider); flex: none; }
#editor-head .file { color: var(--color-text); }
.file-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-ctl); background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.file-switch .file { border: 0; background: transparent; cursor: pointer; padding: 3px 9px; border-radius: calc(var(--radius-ctl) - 2px);
                     font: 500 12px var(--font-mono); color: var(--color-neutral-500);
                     transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.file-switch .file.active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.file-switch .file:active { transform: scale(0.97); }
#scratch-out { margin: 0; white-space: pre-wrap; color: var(--color-neutral-200); }
#scratch-out[hidden] { display: none; }
#results.scratch #results-list, #results.scratch #lint-summary, #results.scratch #build-head { display: none; }
.hints-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-3); padding: 4px 10px 4px 8px;
                border-radius: var(--radius-pill); border: 1px solid var(--color-divider); background: transparent;
                color: var(--color-neutral-300); font: 500 12px var(--font-heading); cursor: pointer;
                transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) ease,
                            background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.hints-toggle > .ph { font-size: 16px; color: var(--color-accent); }
.hints-toggle.scratch-hidden { display: none; }
.hints-toggle:disabled { cursor: not-allowed; color: var(--color-neutral-600); }
.hints-toggle:disabled > .ph { color: var(--color-neutral-600); }
.hints-toggle .where { font: 500 11px var(--font-mono); padding: 1px 6px; border-radius: var(--radius-pill);
                       background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); }
.hints-toggle .where[hidden] { display: none; }
/* the link to a freshly written assignment */
.asg-link { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; align-self: flex-start; max-width: 560px; width: 100%;
            padding: 12px 16px 12px 12px; border-radius: var(--radius-card); text-decoration: none; color: var(--color-text);
            background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-900) 70%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 85%, transparent));
            border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); box-shadow: var(--shadow-md);
            opacity: 1; transform: translateY(0); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), border-color var(--dur) ease; }
@starting-style { .asg-link { opacity: 0; transform: translateY(6px); } }
.asg-link .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-accent);
                 background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.asg-link .ico .ph { font-size: 20px; }
.asg-link .t { display: grid; gap: 2px; min-width: 0; }
.asg-link .t b { font: 500 15px var(--font-heading); }
.asg-link .t span { font-size: 13px; color: var(--color-neutral-400); }
.asg-link .go { display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--font-heading); color: var(--color-accent); white-space: nowrap; }
.asg-link .go .ph { transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .asg-link:hover { border-color: var(--color-accent); } .asg-link:hover .go .ph { transform: translateX(3px); } }
.asg-link:active { transform: scale(0.99); }
.done-card { grid-template-columns: 40px 1fr; max-width: 640px; cursor: default; }
.done-card .ico { color: var(--color-ok); background: color-mix(in srgb, var(--color-ok) 16%, transparent); }
.done-card .acts { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.done-card .acts .btn { font-size: 13.5px; padding: 6px 12px; }
/* quick checks in the lesson */
.check { display: grid; gap: 12px; max-width: 640px; padding: 16px 18px 14px; border-radius: var(--radius-card);
         background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
         box-shadow: var(--shadow-md); font-size: 15px; line-height: 1.6; align-self: flex-start;
         opacity: 1; transform: translateY(0); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
@starting-style { .check { opacity: 0; transform: translateY(6px); } }
.check .who { display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--font-mono); letter-spacing: 0.08em;
              text-transform: uppercase; color: var(--color-accent); }
.check .who .portrait { width: 22px; height: 22px; }
.check-q p { margin: 0; }
.check-q .code-wrap { margin: 12px 0 0; }
.check-q .code-wrap + p, .check-q .code-wrap + * { margin-top: 12px; }
.check-q p + p { margin-top: 8px; }
.check-opts { display: grid; gap: 6px; }
.check-opt { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; text-align: left; width: 100%;
             padding: 8px 12px; border-radius: var(--radius-ctl); border: 1px solid var(--color-divider); background: transparent;
             color: var(--color-text); font: inherit; font-size: 14px; cursor: pointer;
             transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.check-opt .n { font: 500 11px var(--font-mono); color: var(--color-neutral-500); width: 22px; height: 22px; display: grid; place-items: center;
                border-radius: 50%; background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.check-opt .md p { margin: 0; } .check-opt .md pre { margin: 0; padding: 4px 8px; font-size: 13px; }
.check-opt:active:not(:disabled) { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .check-opt:hover:not(:disabled) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); } }
.check-opt:disabled { cursor: default; opacity: 0.55; }
.check-opt.is-answer { opacity: 1; border-color: var(--color-ok); background: color-mix(in srgb, var(--color-ok) 10%, transparent); }
.check-opt.is-answer .n { background: var(--color-ok); color: var(--color-bg); }
.check-opt.picked:not(.is-answer) { opacity: 1; border-color: var(--color-bad); background: color-mix(in srgb, var(--color-bad) 10%, transparent); }
.check-opt.picked:not(.is-answer) .n { background: var(--color-bad); color: var(--color-bg); }
.check-after { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--color-divider); font-size: 14px; }
.check-after[hidden] { display: none; }
.check-after .verdict { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.check.right .verdict { color: var(--color-ok); } .check.wrong .verdict { color: var(--color-bad); }
.check-after .verdict .ph { font-size: 17px; }
.check-after .md p { margin: 0; color: var(--color-neutral-300); }
.first-note { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-ctl); display: grid; gap: 6px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.first-note-k { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.first-note p { margin: 0; font-size: 14px; line-height: 1.6; }
.first-note a { color: var(--color-accent); }
.stretch-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px;
                border-top: 1px solid var(--color-divider); font-size: 13px; }
.stretch-foot[hidden] { display: none; }
.stretch-foot .btn { margin-left: auto; }
.stretch-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: var(--radius-pill);
                 font: 500 12px var(--font-heading); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.stretch-badge .ph { font-size: 14px; }
.hist-assignment .stretch-badge { margin-left: 8px; vertical-align: middle; }
.hints-toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .hints-toggle:hover { border-color: var(--color-accent); color: var(--color-text); } }
.hints-toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--color-accent) 14%, transparent);
                                     border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); color: var(--color-text); }
.hints-toggle.is-loading { pointer-events: none; color: var(--color-neutral-500); }
.hints-toggle.is-loading .ph { animation: spin 0.8s linear infinite; font-size: 14px; }
/* trace: play markers in the gutter, stepper bar, highlighted line, value chips */
.CodeMirror-gutter.rc-trace { width: 22px; }
.trace-mark { display: grid; place-items: center; width: 20px; height: 22px; border: 0; padding: 0; background: none;
              color: var(--color-neutral-600); cursor: pointer; border-radius: var(--radius-pill);
              transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.trace-mark .ph { font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .trace-mark:hover { color: var(--color-accent); } }
.trace-mark:active { transform: scale(0.9); }
.trace-mark.busy { color: var(--color-accent); pointer-events: none; }
.trace-mark.busy .ph { animation: spin 0.8s linear infinite; }
.trace-mark.on { color: var(--color-accent); }
.tracer { display: flex; align-items: center; gap: var(--space-3); padding: 8px 16px; flex: none;
          border-bottom: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg));
          font-size: 13px; }
.tracer[hidden] { display: none; }
.tracer-fn { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font-mono); color: var(--color-accent); }
.tracer-fn .ph { font-size: 16px; }
.tracer-run { max-width: 220px; min-height: 30px; padding: 2px 8px; font: 12.5px var(--font-mono); color: var(--color-text);
              background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-ctl); }
.tracer-ctl { display: flex; gap: 4px; margin-left: auto; }
.tracer-ctl .btn { padding: 4px 8px; }
.tracer-ctl .btn .ph { font-size: 15px; }
.tracer-pos { font: 12px var(--font-mono); color: var(--color-neutral-400); min-width: 7ch; text-align: right; }
.trace-line { background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important; }
.trace-vals { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 6px 14px; font: 12px var(--font-mono); }
.trace-vals .v { display: inline-flex; gap: 5px; padding: 1px 8px; border-radius: var(--radius-pill);
                 background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-neutral-300);
                 opacity: 1; transform: translateY(0); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
@starting-style { .trace-vals .v { opacity: 0; transform: translateY(3px); } }
.trace-vals .v .n { color: var(--color-neutral-500); }
.trace-vals .v .val { white-space: pre; }
.trace-vals .v.chg { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-text); }
.trace-vals .v.chg .n { color: var(--color-accent); }
.trace-vals .v.ret { background: color-mix(in srgb, var(--color-ok) 16%, transparent); color: var(--color-ok); }
.trace-vals .v.ret .n { color: var(--color-ok); }
.trace-vals .note { color: var(--color-neutral-500); font-family: var(--font-body); }
@media (max-width: 720px) { .tracer { flex-wrap: wrap; } .tracer-ctl { margin-left: 0; } }
/* hint markers in the editor gutter */
.CodeMirror-gutter.rc-hints { width: 24px; }
.CodeMirror-gutter.rc-lints { width: 20px; }
.hint-mark.lint { color: var(--color-warn); width: 20px; }
.hint-mark.lint .ph { font-size: 14px; }
.hint-pop.lint .hint-pop-head .k { color: var(--color-warn); }
.hint-pop .lint-ico { display: none; width: 22px; height: 22px; border-radius: 50%; place-items: center; font-size: 13px;
  color: var(--color-warn); background: color-mix(in srgb, var(--color-warn) 18%, transparent); }
.hint-pop.lint .hint-pop-head .portrait { display: none; }
.hint-pop.lint .lint-ico { display: grid; }
.hint-pop.lint .md ul { margin: 0; padding-left: 18px; }
.hint-pop.lint .md a { color: var(--color-accent); }
.lint-summary { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--font-body); font-size: 13px; color: var(--color-neutral-300); }
.lint-summary[hidden] { display: none; }
.lint-summary .ph { font-size: 16px; color: var(--color-warn); }
.hint-mark { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0; border: 0; padding: 0;
             background: none; color: var(--color-accent); cursor: pointer; border-radius: var(--radius-pill);
             opacity: 1; transform: scale(1);
             transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), background-color var(--dur-fast) ease; }
@starting-style { .hint-mark { opacity: 0; transform: scale(0.8); } }
.hint-mark .ph { font-size: 15px; }
.hint-mark.file { color: var(--color-ok); }
@media (hover: hover) and (pointer: fine) { .hint-mark:hover { background: color-mix(in srgb, currentColor 14%, transparent); } }
.hint-mark.on { background: color-mix(in srgb, currentColor 18%, transparent); }
.hint-mark:active { transform: scale(0.9); }
/* the popover, anchored to the marker's line */
.hint-pop { position: fixed; z-index: 30; width: min(380px, calc(100vw - 32px)); padding: 12px 14px 14px;
            background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
            font-size: 13.5px; line-height: 1.6; transform-origin: left top;
            opacity: 1; transform: scale(1);
            transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
.hint-pop[hidden] { display: none; }
@starting-style { .hint-pop { opacity: 0; transform: scale(0.96); } }
.hint-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hint-pop-head .portrait { width: 22px; height: 22px; }
.hint-pop-head .k { font: 500 12px var(--font-mono); color: var(--color-accent); }
.hint-pop.file .hint-pop-head .k { color: var(--color-ok); }
.hint-pop .md p { margin: 0 0 8px; } .hint-pop .md p:last-child { margin: 0; }
.hint-pop .md code { font-size: 0.9em; }
#save-state { margin-left: auto; color: var(--color-neutral-500); opacity: 1;
              transition: opacity var(--dur) ease, color var(--dur) ease; }
#save-state.fade { opacity: 0; }
#save-state.error { color: var(--color-bad); opacity: 1; }
#editor-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 120px; position: relative; }
.hint-file { position: absolute; top: 10px; right: 24px; z-index: 3; display: grid; place-items: center;
             width: 30px; height: 30px; padding: 0; border-radius: var(--radius-pill); cursor: pointer;
             color: var(--color-ok);
             background: color-mix(in srgb, var(--color-ok) 12%, var(--editor-bg));
             border: 1px solid color-mix(in srgb, var(--color-ok) 35%, transparent);
             opacity: 1; transform: scale(1);
             transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), background-color var(--dur-fast) ease; }
@starting-style { .hint-file { opacity: 0; transform: scale(0.8); } }
.hint-file .ph { font-size: 17px; }
.hint-file:active { transform: scale(0.92); }
.hint-file.on, .hint-file:hover { background: color-mix(in srgb, var(--color-ok) 24%, var(--editor-bg)); }
#assignment-actions { display: flex; align-items: center; gap: var(--space-2); padding: 10px 16px; flex: none;
                      border-top: 1px solid var(--color-divider);
                      background: color-mix(in srgb, var(--color-surface) 60%, transparent); }
#assignment-actions .kbd-hint { padding: 0; margin-left: 4px; }
.pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
        border-radius: var(--radius-pill); font: 500 12.5px var(--font-heading);
        background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-neutral-300);
        opacity: 1; transform: translateY(0);
        transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out),
                    color var(--dur) ease, background-color var(--dur) ease; }
.pill[hidden] { display: none; }
@starting-style { .pill { opacity: 0; transform: translateY(2px); } }
.pill .ph { font-size: 14px; }
.pill.busy .ph { animation: spin 0.8s linear infinite; }
.pill.pass { color: var(--color-ok); background: color-mix(in srgb, var(--color-ok) 14%, transparent); }
.pill.fail { color: var(--color-bad); background: color-mix(in srgb, var(--color-bad) 14%, transparent); }
#results { flex: none; overflow-y: auto; min-height: 48px; max-height: 40%; padding: 10px 16px 14px;
           background: var(--color-neutral-900); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.results-empty { margin: 4px 0; font-family: var(--font-body); font-size: 13px; }
#results.has-results .results-empty { display: none; }
#results-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.test-row { display: grid; grid-template-columns: 20px 1fr; gap: 2px 8px; padding: 4px 0; align-items: center;
            opacity: 1; transform: translateY(0);
            transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .test-row { opacity: 0; transform: translateY(4px); } }
.test-row .ph { font-size: 15px; }
.test-row.ok .ph { color: var(--color-ok); } .test-row.failed .ph { color: var(--color-bad); }
.test-row.ignored { color: var(--color-neutral-600); }
.test-row .name { color: var(--color-neutral-200); }
.test-row.failed .name { cursor: pointer; }
.test-detail { grid-column: 2; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
.test-detail > pre { overflow: hidden; margin: 0; white-space: pre-wrap; color: var(--color-neutral-400); min-height: 0; }
.test-row.open .test-detail { grid-template-rows: 1fr; }
.test-row.open .test-detail > pre { padding: 6px 0 4px; }
#results-raw { margin-top: 8px; color: var(--color-neutral-500); }
#results-raw summary { cursor: pointer; font-family: var(--font-body); font-size: 12.5px; }
#test-output { margin: 8px 0 0; white-space: pre-wrap; color: var(--color-neutral-300); }
#results.compile-error #results-list { display: none; }
#results.compile-error #test-output { color: var(--color-neutral-400); }
/* build errors: one row per rustc diagnostic, click to jump to the line */
#build-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 8px; font-family: var(--font-body); }
#build-head[hidden] { display: none; }
.build-title { display: inline-flex; align-items: center; gap: 6px; color: var(--color-bad); font: 500 13px var(--font-heading); }
.build-title .ph { font-size: 16px; }
.btn-sm { padding: 4px 10px; font-size: 12.5px; margin-left: auto; }
.btn-sm .ph { font-size: 14px; }
#build-errors { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.err-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 2px 8px; padding: 4px 0; align-items: center;
           opacity: 1; transform: translateY(0); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .err-row { opacity: 0; transform: translateY(4px); } }
.err-row > .ph { font-size: 15px; color: var(--color-bad); }
.err-row .msg { color: var(--color-neutral-200); cursor: pointer; }
.err-row .msg .code { color: var(--color-bad); margin-right: 8px; }
.err-row .loc { color: var(--color-neutral-500); font-size: 11.5px; cursor: pointer; white-space: nowrap; }
.err-row .loc:hover { color: var(--color-accent); }
.err-detail { grid-column: 2 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
.err-detail > pre { overflow: hidden; margin: 0; white-space: pre-wrap; color: var(--color-neutral-400); min-height: 0; }
.err-row.open .err-detail { grid-template-rows: 1fr; }
.err-row.open .err-detail > pre { padding: 6px 0 4px; }
.err-coach { grid-column: 2 / -1; display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; margin: 6px 0 4px;
             padding: 8px 10px; border-radius: var(--radius-card); font-family: var(--font-body); font-size: 13px; line-height: 1.5;
             background: color-mix(in srgb, var(--color-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
             opacity: 1; transform: translateY(0); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
@starting-style { .err-coach { opacity: 0; transform: translateY(3px); } }
.err-coach[hidden] { display: none; }
.err-coach .portrait { width: 22px; height: 22px; }
.err-coach p { margin: 0; color: var(--color-text); }
.err-coach p + p { margin-top: 4px; color: var(--color-neutral-300); }
.err-coach .k { font: 500 11px var(--font-mono); letter-spacing: 0.06em; color: var(--color-accent); margin-right: 6px; }
.cm-err-line { background: color-mix(in srgb, var(--color-bad) 10%, transparent); box-shadow: inset 3px 0 0 var(--color-bad); }

@media (max-width: 720px) {
  #assignment-view.active { flex-direction: column; height: calc(100dvh - var(--nav-h) - 56px - env(safe-area-inset-bottom)); }
  #assignment-switch { display: flex; gap: 4px; padding: 8px 12px 0; flex: none; }
  .seg { flex: 1; border: 1px solid var(--color-divider); background: transparent; color: var(--color-neutral-500);
         padding: 7px; border-radius: var(--radius-ctl); font: 500 13px var(--font-heading); cursor: pointer;
         transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
  .seg.active { background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text); }
  #assignment-left { width: auto; min-width: 0; border-right: 0; padding: var(--space-4); flex: 1; }
  #pane-divider, #output-divider { display: none; }
  #assignment-view:not(.show-right) #assignment-right { display: none; }
  #assignment-view.show-right #assignment-left { display: none; }
  #editor-wrap { min-height: 50dvh; }
  #assignment-actions { flex-wrap: wrap; }
  #assignment-actions .kbd-hint { display: none; }
  .pill { margin-left: 0; width: 100%; justify-content: center; }
  #results { max-height: none; }
}

/* CodeMirror — original material-darker syntax colors, design-system chrome */
.CodeMirror { flex: 1; height: auto; font-family: var(--font-mono); font-size: 13.5px;
              line-height: 1.65; }
.cm-s-material-darker.CodeMirror { background: var(--editor-bg); }
.cm-s-material-darker .CodeMirror-gutters { background: var(--editor-gutter);
  border-right: 1px solid var(--color-divider); }
.CodeMirror-linenumber { color: var(--editor-line-no); }
.CodeMirror-activeline-background { background: rgba(255,255,255,0.045) !important; }
.CodeMirror-selected { background: color-mix(in srgb, var(--color-accent) 25%, transparent) !important; }
.CodeMirror-cursor { border-left: 2px solid var(--color-accent) !important; }

/* highlight.js — original atom-one-dark colors on the design's pre background */
pre code.hljs { background: transparent; padding: 0; }

/* ── syllabus ───────────────────────────────────────────────────────── */
#syllabus-view.active { display: block; }
.syl-grid { max-width: 1264px; width: 100%; margin: 0 auto;
            padding: 32px clamp(20px, 4vw, 56px) 64px; display: grid;
            grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
            gap: 42px; align-items: start; }
@media (max-width: 860px) { .syl-grid { grid-template-columns: 1fr; }
                            .syl-aside { position: static !important; } }
.syl-aside { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 24px; }
.syl-aside .rail-h { display: block; font-size: 11px; letter-spacing: 0.08em;
                     text-transform: uppercase; margin-bottom: 10px;
                     color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.syl-count { display: flex; align-items: baseline; gap: 8px; }
.syl-count .big { font-size: 44px; line-height: 1; font-family: var(--font-heading);
                  font-weight: 500; letter-spacing: -0.02em; font-feature-settings: 'tnum' 1; }
.syl-bar { height: 3px; border-radius: var(--radius-pill); background: var(--color-neutral-800);
           margin-top: 14px; overflow: hidden; }
.syl-bar > div { height: 100%; background: var(--color-accent);
                 box-shadow: 0 0 10px var(--color-accent); transition: width 600ms var(--ease-out); }
.syl-next { margin: 10px 0 0; font-size: 13px; color: var(--color-neutral-400); }
.syl-chapnav { display: grid; gap: 2px; }
.syl-chapnav button { display: flex; align-items: center; gap: 10px; padding: 6px 8px; width: 100%;
                 border: 0; background: none; text-align: left; cursor: pointer; font: inherit;
                 border-radius: var(--radius-ctl); font-size: 13px; color: var(--color-text);
                 transition: background-color var(--dur) ease, color var(--dur) ease, transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .syl-chapnav button:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); } }
.syl-chapnav button.current { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.syl-chapnav button.current .nn { color: var(--color-accent); }
.syl-chapnav .nn { width: 22px; color: var(--color-neutral-500);
                   font-feature-settings: 'tnum' 1; font-size: 12px; }
.syl-chapnav .t { flex: 1; }
.syl-chapnav .t.inactive { color: var(--color-neutral-500); }
.syl-chapnav .c { font-size: 11px; color: var(--color-neutral-500);
                  font-feature-settings: 'tnum' 1; }
.syl-main { display: grid; gap: 42px; }
#syllabus { display: grid; gap: 42px; }
.syl-chap-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.syl-chap-head .k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
                    color: var(--color-accent); }
.syl-chap-head h2 { font-size: 20px; }
.topic-row { display: grid; grid-template-columns: 18px minmax(160px, 220px) minmax(0, 1fr);
             gap: 4px 16px; padding: 12px 8px; margin: 0 -8px; align-items: start; border-radius: var(--radius-ctl);
             background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
             transition: background-color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { .topic-row:hover { background-color: color-mix(in srgb, var(--color-text) 4%, transparent); } }
@media (max-width: 640px) { .topic-row { grid-template-columns: 18px minmax(0, 1fr); }
                            .topic-row .note, .topic-row .more { grid-column: 2; } }
.topic-row .st { font-size: 16px; line-height: 1.45; margin-top: 2px; color: var(--color-neutral-700); }
.topic-row.covered .st { color: var(--color-accent); }
.topic-row.in_progress .st { color: var(--color-accent-300); }
.topic-row .name { font-size: 14.5px; line-height: 1.45; }
.topic-row .note { margin: 0; font-size: 13.5px; line-height: 1.65;
                   color: color-mix(in srgb, var(--color-text) 62%, transparent);
                   display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.topic-row.open .note { display: block; }
.topic-row .note.now { color: var(--color-accent-300); }
.topic-row .more { grid-column: 3; justify-self: start; border: 0; background: none; color: var(--color-accent);
                   font: 500 12.5px var(--font-heading); cursor: pointer; padding: 2px 0; }
.syl-empty { margin-bottom: var(--space-2); }

/* ── account & admin ────────────────────────────────────────────────── */
/* account: a profile hero with the numbers that matter, then the cards */
.acct-hero { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; align-items: center; margin-bottom: 28px;
             padding: 26px 28px; border-radius: var(--radius-panel);
             background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-900) 70%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 80%, transparent));
             box-shadow: var(--shadow-md), inset 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent);
             animation: rise 600ms var(--ease-out) both; }
.acct-avatar { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font: 500 30px var(--font-heading);
               color: var(--color-bg); background: linear-gradient(145deg, var(--color-accent-300), var(--color-accent-600));
               box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 0 44px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.acct-id { min-width: 0; display: grid; gap: 4px; }
.acct-id h2 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.acct-id p { margin: 0; font-size: 13.5px; }
.acct-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.acct-tags .tag { gap: 5px; }
.acct-stats { grid-column: 1 / -1; list-style: none; margin: 14px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
              border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.acct-stats li { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: baseline; }
.acct-stats .ph { grid-row: span 2; align-self: start; margin-top: 4px; font-size: 20px; color: var(--color-accent); }
.acct-stats b { font: 500 26px var(--font-heading); letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }
.acct-stats li > span { font-size: 12.5px; color: var(--color-neutral-400); }
.acct-stats b span { font: inherit; color: inherit; }
.acct-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.acct-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; position: relative;
             border-radius: var(--radius-card); background: color-mix(in srgb, var(--color-surface) 85%, transparent);
             box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--color-text) 5%, transparent);
             animation: rise 520ms var(--ease-out) both; }
.acct-grid > :nth-child(1) { animation-delay: 80ms; } .acct-grid > :nth-child(2) { animation-delay: 140ms; }
.acct-grid > :nth-child(3) { animation-delay: 200ms; } .acct-grid > :nth-child(4) { animation-delay: 260ms; }
.acct-grid > .acct-card:last-child { grid-column: 1 / -1; }
.acct-k { font: 500 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.acct-big { display: flex; align-items: baseline; gap: 10px; }
.acct-big b { font: 500 34px var(--font-heading); letter-spacing: -0.02em; line-height: 1; font-feature-settings: "tnum" 1; }
.acct-big span { font-size: 13.5px; }
.acct-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.acct-mini div { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-ctl); background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.acct-mini b { font: 500 15px var(--font-heading); font-feature-settings: "tnum" 1; }
.acct-mini span { font-size: 11.5px; color: var(--color-neutral-500); }
button.plan-row { width: 100%; text-align: left; font: inherit; color: inherit; background: none; cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-fast) ease; }
button.plan-row:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
button.plan-row:active { transform: scale(0.99); }
button.plan-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
button.plan-row .btn { pointer-events: none; }
button.plan-row:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }
button.plan-row:disabled:hover { border-color: var(--color-divider); background: none; }
.plan-row.current { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.plan-row .plan-name { display: grid; gap: 2px; }
.plan-row .tag { gap: 4px; }
.acct-namerow { display: flex; gap: 8px; }
/* a switch row: label text left, a pill toggle right */
.acct-switch { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 0 4px; cursor: pointer; }
.acct-switch-text { display: grid; gap: 2px; }
.acct-switch-text b { font: 500 14px var(--font-heading); color: var(--color-text); }
.acct-switch-text span { font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-400); }
.acct-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.acct-switch .track { position: relative; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--color-neutral-800);
                      transition: background-color var(--dur) ease; flex: none; }
.acct-switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-text);
                             transition: transform var(--dur) var(--ease-out); }
.acct-switch input:checked + .track { background: var(--color-accent); }
.acct-switch input:checked + .track::after { transform: translateX(18px); }
.acct-switch input:focus-visible + .track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.acct-links { display: grid; gap: 2px; margin-top: 4px; }
.acct-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; margin: 0 -12px; width: calc(100% + 24px);
             border: 0; border-radius: var(--radius-ctl); background: transparent; color: var(--color-text); font: 500 14px var(--font-heading);
             text-align: left; text-decoration: none; cursor: pointer;
             transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.acct-link > .ph:first-child { font-size: 18px; color: var(--color-accent); }
.acct-link span { flex: 1; }
.acct-link .go { font-size: 15px; color: var(--color-neutral-600); transition: transform var(--dur) var(--ease-out), color var(--dur) ease; }
.acct-link kbd { font: 500 11px system-ui, sans-serif; padding: 1px 6px; border: 1px solid var(--color-divider); border-bottom-width: 2px; border-radius: 4px; color: var(--color-neutral-400); }
.acct-link:active { transform: scale(0.99); }
.acct-link.danger { color: var(--color-bad); } .acct-link.danger > .ph:first-child { color: var(--color-bad); }
@media (hover: hover) and (pointer: fine) {
  .acct-link:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
  .acct-link:hover .go { transform: translateX(3px); color: var(--color-accent); }
  .acct-link.danger:hover { background: color-mix(in srgb, var(--color-bad) 10%, transparent); }
}
@media (max-width: 720px) {
  .acct-hero { padding: 20px; gap: 6px 14px; }
  .acct-avatar { width: 56px; height: 56px; font-size: 24px; }
  .acct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.meter { height: 6px; border-radius: var(--radius-pill); background: var(--color-neutral-800); overflow: hidden; }
.meter > div { height: 100%; background: linear-gradient(90deg, var(--color-accent-600), var(--color-accent-300)); box-shadow: 0 0 10px var(--color-accent);
               transition: width var(--dur-slow) var(--ease-out); }
.inline-msg { font-size: 13px; margin: 0; min-height: 1.4em; transition: opacity var(--dur) ease; }
.inline-msg.ok { color: var(--color-ok); } .inline-msg.bad { color: var(--color-bad); }
.acct-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.acct-card .btn-danger { align-self: flex-start; }
.acct-note { font-size: 13px; margin: 0; }
.acct-foot { font-size: 12px; margin: 0; }
.credit-log { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.credit-log li { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.credit-log li span:first-child { color: var(--color-neutral-500); font-feature-settings: "tnum" 1; }
.credit-log li b { font-weight: 500; font-feature-settings: "tnum" 1; }
.credit-log a { color: var(--color-accent); text-decoration: none; }
.credit-log li.text-muted { display: block; }
.plan-row b { font-weight: 500; }
.plan-row .sub { font-size: 12.5px; }
.meter.hot > div { background: var(--color-bad); box-shadow: 0 0 10px var(--color-bad); }
.kv { display: flex; justify-content: space-between; font-size: 13.5px;
      color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.kv b { color: var(--color-text); font-weight: 500; font-feature-settings: 'tnum' 1; }
.plan-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            padding: 12px 14px; border-radius: var(--radius-ctl); border: 1px solid var(--color-divider); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; font-size: 11px; letter-spacing: 0.08em;
                  text-transform: uppercase; padding: 8px 10px;
                  color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.admin-table td { padding: 8px 10px; border-top: 1px solid var(--color-divider);
                  font-feature-settings: 'tnum' 1; vertical-align: middle; }
.admin-table tbody tr { transition: background-color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { .admin-table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } }
.admin-table .btn { font-size: 12px; padding: 3px 8px; }
.admin-table input.input { min-height: 28px; padding: 2px 8px; width: 76px; font-size: 12.5px; }
.admin-table .num { text-align: right; }
.admin-table .saved { color: var(--color-ok); font-size: 12px; margin-left: 6px; }
.admin-table .tag { font-size: 10px; }
.admin-wrap { overflow-x: auto; }
.admin-table a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent); }
.admin-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 18px 0; }
#admin-notify { display: grid; gap: 6px; }
.notify-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); column-gap: 32px; margin-top: 6px; }
.notify-list .acct-switch { border-top: 1px solid var(--color-divider); }
.notify-recent-k { margin-top: 18px; }
.growth-card { grid-column: span 3; min-width: 0; }
@media (max-width: 1100px) { .growth-card { grid-column: 1 / -1; } }
.growth { width: 100%; height: auto; display: block; margin-top: 6px; }
.growth .grid { stroke: var(--color-divider); stroke-width: 1; }
.growth .lab { fill: var(--color-neutral-500); font: 11px var(--font-mono); }
.growth .l-all { fill: none; stroke: var(--color-accent-300); stroke-width: 2; }
.growth .l-paid { fill: none; stroke: var(--color-ok); stroke-width: 2; }
.growth-legend { display: flex; gap: 18px; font-size: 12px; color: var(--color-neutral-400); margin-top: 4px; }
.growth-legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 6px; }
.growth-legend .l-all { background: var(--color-accent-300); } .growth-legend .l-paid { background: var(--color-ok); }
.admin-two { display: grid; gap: 16px; grid-template-columns: 260px 1fr; margin: 18px 0; align-items: start; }
.admin-two > .acct-card { min-width: 0; }
.admin-two > .acct-card:nth-child(n+3) { grid-column: 1 / -1; }
@media (max-width: 900px) { .admin-two { grid-template-columns: 1fr; } }
.admin-table.tight td, .admin-table.tight th { white-space: nowrap; }
.admin-table td.clip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.admin-h3 { font-size: 17px; margin: 28px 0 10px; display: flex; gap: 10px; align-items: baseline; }
.admin-h3 .text-muted { font-size: 12.5px; font-weight: 400; }
.chapter-bars { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.chapter-bars li { display: grid; grid-template-columns: 44px 1fr 28px; gap: 10px; align-items: center; }
.chapter-bars i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--color-accent-600), var(--color-accent-300)); min-width: 3px; }
.chapter-bars b { text-align: right; font-weight: 500; font-feature-settings: "tnum" 1; }
.tl-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tl-filter .btn { font-size: 12px; padding: 3px 10px; } .tl-filter .btn.active { border-color: var(--color-accent); color: var(--color-accent); }
.tl { list-style: none; margin: 0; padding: 0; font-size: 12.5px; max-height: 560px; overflow: auto; border: 1px solid var(--color-divider); border-radius: var(--radius-card); }
.tl li { display: grid; grid-template-columns: 118px 128px 1fr; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--color-divider); align-items: start; }
.tl li:first-child { border-top: 0; }
.tl-when { color: var(--color-neutral-500); font-feature-settings: "tnum" 1; white-space: nowrap; }
.tl-kind { font-size: 10px; justify-self: start; } .tl-kind.cost { color: var(--color-accent-100); } .tl-kind.tests { color: var(--color-ok); }
.tl-detail { min-width: 0; overflow-wrap: anywhere; } .tl-detail a { color: var(--color-accent); text-decoration: none; margin-right: 4px; }
.admin-summary { white-space: pre-wrap; font-size: 14px; line-height: 1.6; margin: 0; }
.tr { display: grid; gap: 10px; }
.tr-msg { border: 1px solid var(--color-divider); border-radius: var(--radius-card); padding: 10px 14px; font-size: 13px; }
.tr-msg.user { border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }
.tr-msg.tool, .tr-msg.result { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.tr-role { display: block; font: 500 10.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-500); margin-bottom: 6px; }
.tr-msg pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.55; }
.tr-msg.tool pre, .tr-msg.result pre { font-family: var(--font-mono); font-size: 12px; }

.admin-foot { font-size: 12px; margin-top: 14px; }
@media (max-width: 720px) { .acct-grid { grid-template-columns: 1fr; } }

/* ── history ────────────────────────────────────────────────────────── */
#history-view.active, #account-view.active, #admin-view.active { display: block; }
.hist-wrap { max-width: 1000px; width: 100%; margin: 0 auto;
             padding: 32px clamp(20px, 4vw, 56px) 64px; }
.hist-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 32px; }
.hist-head h2 { font-size: 20px; }
.hist-sample-note { grid-column: 1 / -1; margin: 0 0 14px; padding: 10px 14px; font-size: 13px; border-radius: var(--radius-ctl);
  border: 1px dashed color-mix(in srgb, var(--color-accent) 50%, transparent); color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.hist-grid { display: grid; grid-template-columns: 120px 24px minmax(0, 1fr);
             column-gap: 18px; }
@media (max-width: 640px) { .hist-grid { grid-template-columns: 70px 24px minmax(0, 1fr); } }
.hist-date { padding: 2px 0 42px; text-align: right; font-size: 12.5px;
             color: var(--color-neutral-500); font-feature-settings: 'tnum' 1;
             line-height: 1.5; }
.hist-spine { display: flex; flex-direction: column; align-items: center; }
.hist-spine .dot { width: 12px; height: 12px; border-radius: 50%; flex: none;
                   margin-top: 4px; background: var(--color-accent); }
.hist-spine .dot.live { background: var(--color-accent-300);
                        box-shadow: 0 0 12px var(--color-accent); }
.hist-spine .line { flex: 1; width: 1px; background: var(--color-neutral-800);
                    margin-top: 6px; }
.hist-row { display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit;
            font: inherit; cursor: pointer; padding: 10px 12px; margin: -10px -12px 0;
            border-radius: var(--radius-card);
            transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.hist-body { padding: 0 0 32px; }
.hist-body:last-child { padding-bottom: 0; }
#history-detail .msg-user { width: fit-content; max-width: 78%; margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .hist-row:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); } }
.hist-row:active { transform: scale(0.99); }
.hist-spine .dot.live { animation: live 1.6s ease-in-out infinite; }
@keyframes live { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent); }
                  50% { box-shadow: 0 0 0 6px transparent; } }
.hist-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hist-title-row .n { font-size: 16px; font-family: var(--font-heading); font-weight: 500; }
.hist-title-row .topic { font-size: 13px; color: var(--color-neutral-500); }
.hist-sum p { margin: 0 0 8px; } .hist-sum p:last-child { margin-bottom: 0; }
.hist-sum :not(pre) > code { font-size: 0.9em; }
.hist-sum { margin: 10px 0 0; font-size: 13.5px; line-height: 1.7;
            color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 72ch; }
.hist-actions { display: flex; gap: 8px; margin-top: 10px; }
.hist-count { font-size: 13px; }
#hist-back { margin-right: var(--space-2); }
#history-list { view-transition-name: hist-list; }
#history-detail { view-transition-name: hist-detail; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 40px; align-items: start; }
#history-detail[hidden] { display: none; }
.hist-wrap.detail { max-width: 1400px; }
.hist-side { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 22px; padding-right: 22px; border-right: 1px solid var(--color-divider); min-width: 0; }
.hist-side .lh-head { display: grid; gap: 4px; }
.hist-side .kicker { font-size: 11px; }
.hist-outcome { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--color-divider); font-size: 13.5px; line-height: 1.55; color: var(--color-neutral-300); }
.hist-outcome p { margin: 0; }
.hist-outcome .tag { justify-self: start; gap: 6px; }
.hist-outcome p { font-size: 12.5px; }
.tag-ok { background: color-mix(in srgb, var(--color-ok) 16%, transparent); color: var(--color-ok); }
.summary-card { margin: 0 0 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-900) 55%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 80%, transparent)); }
.summary-card .md { font-size: 15px; line-height: 1.75; }
.summary-card .md p { margin: 0 0 10px; } .summary-card .md p:last-child { margin: 0; }
.hist-outcome .rail-h { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.hist-outcome .redo-btn { justify-self: start; margin-top: 6px; font-size: 13px; }
.topic-row .redo { grid-column: 3; justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
                   padding: 3px 9px 3px 7px; border-radius: var(--radius-pill); border: 1px solid var(--color-divider); background: transparent;
                   color: var(--color-neutral-400); font: 500 12px var(--font-heading); cursor: pointer;
                   transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.topic-row .redo .ph { font-size: 13px; }
.topic-row .redo:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .topic-row .redo:hover { color: var(--color-accent); border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); } }
#redo select.input { width: 100%; }
.hist-main { min-width: 0; }
.hist-main .check { margin: 18px 0; max-width: none; }
@media (max-width: 720px) {
  #history-detail { grid-template-columns: 1fr; }
  .hist-side { position: static; border-right: 0; padding-right: 0; border-bottom: 1px solid var(--color-divider); padding-bottom: 18px; }
  .hist-side .lh-steps { display: flex; flex-wrap: wrap; gap: 4px; }
  .hist-side .lh-steps li + li::before { display: none; }
}
::view-transition-new(hist-detail), ::view-transition-new(hist-list) { animation: 200ms var(--ease-out) both vt-in; }
::view-transition-old(hist-detail), ::view-transition-old(hist-list) { animation: 120ms ease both vt-out; }
#history-detail h2 { font-size: 20px; margin: 32px 0 14px; }
#history-detail h2:first-child { margin-top: 0; }
#history-detail .msg-user { margin: 10px 0; }
#history-detail .msg-coach { margin: 18px 0; }
#history-detail .msg-coach .md, .msg-coach .md { min-width: 0; }
#history-detail .toolchip { margin: 6px 0; }
#history-detail .assignment-card { padding: 16px 18px; margin-bottom: 14px; }
.attempt { display: grid; gap: 8px; border: 1px solid var(--color-divider); border-radius: var(--radius-card);
           padding: 12px 14px; margin: 10px 0; font-size: 13.5px; }
.attempt .head { display: flex; align-items: center; gap: 10px; }
.attempt pre { background: var(--color-neutral-900); padding: 12px; border-radius: var(--radius-ctl);
               overflow-x: auto; font-size: 12.5px; line-height: 1.6; margin: 10px 0 0; }
.attempt details summary { cursor: pointer; color: var(--color-accent); font-size: 13px; }
.badge { font-size: 11px; border-radius: var(--radius-pill); padding: 3px 10px; display: inline-flex; font-weight: 500; }
.badge.pass { background: color-mix(in srgb, var(--color-ok) 16%, transparent); color: var(--color-ok); }
.badge.fail { background: color-mix(in srgb, var(--color-bad) 16%, transparent); color: var(--color-bad); }
.attempt .when { font-size: 12px; color: var(--color-neutral-500); font-feature-settings: "tnum" 1; }

/* ── onboarding tour: anchored bubble + highlight ring ──────────────── */
.tour { position: fixed; z-index: 46; width: min(360px, calc(100vw - 32px)); padding: 14px 16px 14px;
        background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-panel);
        border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
        box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent),
                    0 0 28px color-mix(in srgb, var(--color-accent) 34%, transparent),
                    0 0 72px color-mix(in srgb, var(--color-accent) 16%, transparent);
        display: grid; gap: 8px; font-size: 14px; line-height: 1.55;
        animation: tour-glow 2.6s ease-in-out infinite;
        transform-origin: var(--tour-origin, top left); opacity: 1; transform: scale(1);
        transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
                    top var(--dur-slow) var(--ease-in-out), left var(--dur-slow) var(--ease-in-out); }
.tour[hidden] { display: none; }
@starting-style { .tour { opacity: 0; transform: scale(0.96); } }
.tour-head { display: flex; align-items: center; gap: 10px; }
.tour-head .portrait { width: 28px; height: 28px; }
.tour-count { font: 500 11px var(--font-mono); letter-spacing: 0.06em; color: var(--color-neutral-500); }
.tour-skip { margin-left: auto; font-size: 12.5px; color: var(--color-neutral-400); padding: 2px 6px; }
.tour h3 { font-size: 17px; letter-spacing: -0.01em; }
.tour p { margin: 0; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.tour p .kbd-hint { padding: 0 2px; vertical-align: middle; }
.tour-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: 6px; }
.tour-dots { display: flex; gap: 5px; margin-right: auto; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-neutral-800); transition: background-color var(--dur) ease, transform var(--dur) var(--ease-out); }
.tour-dots i.on { background: var(--color-accent); transform: scale(1.25); }
.tour-dots i.done { background: var(--color-accent-800); }
.tour-target { position: relative; z-index: 45; border-radius: var(--radius-ctl);
               box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 75%, transparent),
                           0 0 0 9px color-mix(in srgb, var(--color-accent) 16%, transparent),
                           0 0 24px color-mix(in srgb, var(--color-accent) 40%, transparent) !important;
               animation: tour-target-glow 2.6s ease-in-out infinite;
               transition: box-shadow var(--dur) var(--ease-out); }
/* a slow breath on the bubble and its target: the first-time eye lands on it, then it settles into the page */
@keyframes tour-glow {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent),
                         0 0 28px color-mix(in srgb, var(--color-accent) 34%, transparent),
                         0 0 72px color-mix(in srgb, var(--color-accent) 16%, transparent); }
  50%       { box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent),
                         0 0 40px color-mix(in srgb, var(--color-accent) 50%, transparent),
                         0 0 96px color-mix(in srgb, var(--color-accent) 24%, transparent); }
}
@keyframes tour-target-glow {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 75%, transparent),
                         0 0 0 9px color-mix(in srgb, var(--color-accent) 16%, transparent),
                         0 0 24px color-mix(in srgb, var(--color-accent) 40%, transparent); }
  50%       { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 90%, transparent),
                         0 0 0 11px color-mix(in srgb, var(--color-accent) 26%, transparent),
                         0 0 40px color-mix(in srgb, var(--color-accent) 60%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .tour, .tour-target { animation: none; } }
@media (prefers-reduced-motion: reduce) { .tour { transition: opacity var(--dur) ease; } }
/* ── primitives ─────────────────────────────────────────────────────── */
.tip { position: fixed; z-index: 60; pointer-events: none; display: inline-flex; align-items: center; gap: 8px;
       max-width: 260px; padding: 5px 9px; border-radius: var(--radius-ctl); font-size: 12.5px; line-height: 1.4;
       background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md);
       opacity: 0; transform: translateY(2px) scale(0.97); transform-origin: var(--tip-origin, top center);
       transition: opacity 125ms var(--ease-out), transform 125ms var(--ease-out); }
.tip.on { opacity: 1; transform: none; }
.tip.instant { transition-duration: 0ms; }
.tip .kbd-hint { padding: 0; }
#toasts { position: fixed; right: var(--space-5); bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
          display: grid; justify-items: end; gap: var(--space-2); z-index: 40; pointer-events: none; }
@media (max-width: 720px) {
  #toasts { inset-inline: 0; justify-items: center; bottom: calc(72px + env(safe-area-inset-bottom)); }
}
.toast { pointer-events: auto; display: inline-flex; align-items: center; gap: var(--space-3);
         max-width: min(92vw, 480px); padding: 10px 14px; font-size: 14px;
         background: var(--color-surface); color: var(--color-text);
         border-radius: var(--radius-panel); box-shadow: var(--shadow-lg);
         opacity: 1; transform: translateY(0);
         transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.toast .ph { font-size: 18px; }
.toast.ok .ph { color: var(--color-ok); } .toast.bad .ph { color: var(--color-bad); }
.toast.info .ph { color: var(--color-accent); }
.toast .btn { padding: 3px 8px; font-size: 13px; }
@starting-style { .toast { opacity: 0; transform: translateY(12px); } }
.toast.leaving { opacity: 0; transform: translateY(6px); transition-duration: var(--dur-fast); }

.dialog { border: 0; padding: 0; background: var(--color-surface); color: var(--color-text);
          border-radius: var(--radius-panel); box-shadow: var(--shadow-lg); width: min(92vw, 420px);
          opacity: 0; transform: scale(0.96); transform-origin: center;
          transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
                      overlay var(--dur-slow) allow-discrete, display var(--dur-slow) allow-discrete; }
.dialog[open] { opacity: 1; transform: scale(1); }
@starting-style { .dialog[open] { opacity: 0; transform: scale(0.96); } }
.dialog::backdrop { background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(6px);
                    -webkit-backdrop-filter: blur(6px); opacity: 0;
                    transition: opacity var(--dur-slow) ease, overlay var(--dur-slow) allow-discrete,
                                display var(--dur-slow) allow-discrete; }
.dialog[open]::backdrop { opacity: 1; }
@starting-style { .dialog[open]::backdrop { opacity: 0; } }
.dialog form { display: grid; gap: var(--space-3); padding: var(--space-5); margin: 0; }
.dialog h3 { font-size: 17px; }
.dialog p { margin: 0; font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.dialog.destructive #confirm-ok { color: var(--color-bad); border-color: var(--color-bad); }

.skel { display: grid; gap: 14px; }
.skel-bar { height: 12px; border-radius: var(--radius-pill);
            background: color-mix(in srgb, var(--color-text) 9%, transparent);
            animation: skel 1.6s ease-in-out infinite; }
.skel-bar.w-25 { width: 25%; } .skel-bar.w-40 { width: 40%; } .skel-bar.w-60 { width: 60%; } .skel-bar.w-80 { width: 80%; }
.skel-card { height: 120px; border-radius: var(--radius-card);
             background: color-mix(in srgb, var(--color-text) 6%, transparent); animation: skel 1.6s ease-in-out infinite; }
@keyframes skel { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
.err-block { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
             border-radius: var(--radius-card); box-shadow: var(--shadow-sm); font-size: 14px; }
.err-block .ph { color: var(--color-bad); font-size: 20px; }
.err-block span { flex: 1; }
.empty { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6) 0; max-width: 48ch; }
.empty h3 { font-size: 20px; }
.empty p { margin: 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); line-height: 1.6; }

/* ── phone overrides (last so they win over the per-view blocks above) ── */
@media (max-width: 720px) {
  .lesson-grid { grid-template-columns: minmax(0, 1fr); }
  #lesson-side { position: static; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px;
                 padding: 12px var(--space-4) 0; border-right: 0; }
  #lesson-head { flex: 1 1 100%; }
  .lh-title { font-size: 16px; }
  .lh-steps { display: flex; gap: 2px; overflow-x: auto; max-width: 100%; }
  .lh-steps li { padding: 5px 8px; font-size: 12px; white-space: nowrap; }
  .lh-steps li + li::before { display: none; }
  .lh-steps li:not(.now) span { display: none; }
  #lesson-rail { display: none !important; }
  .lesson-col { padding: 0 var(--space-4); min-height: calc(100dvh - var(--nav-h) - 56px - env(safe-area-inset-bottom)); }
  #composer-wrap { bottom: calc(56px + env(safe-area-inset-bottom)); padding-bottom: var(--space-3); }
  #lesson-empty { padding-top: var(--space-6); }
}