/* Vinci Academy · the lesson page.
   One calm column: where you are, one idea, the task, the stage you act on,
   what happened, then the check. The stage is the widest thing on the page
   and sits in the same place on every step. Everything inside #vinci-host is
   drawn by the Foundation and is never restyled here; the host is only placed.
   Same hand as the landing: warm paper, one gold invitation, mono captions,
   dashed "not yet" lines, soft shadows, and plenty of air. */

:root{
 --fs-paper:#fffcf6; --fs-cream:#faf7ef; --fs-card:#fffdf9; --fs-warm:#fffaf0;
 --fs-ink:#303234; --fs-ink-2:#4a4740; --fs-quiet:#746a5a; --fs-label:#7a6440; --fs-brown:#7a5c2a;
 --fs-gold:#edac40; --fs-gold-edge:#e7a337; --fs-gold-ink:#422d10; --fs-gold-soft:#f7ecd4;
 --fs-line:#e8dcc2; --fs-dash:#d9c6a2; --fs-valid:#985f0b; --fs-valid-soft:#f4f2ee; --fs-wrong:#9a5047;
 --fs-r-sm:10px; --fs-r:16px; --fs-pill:999px;
 --fs-shadow:0 1px 0 #fff inset,0 10px 30px #b580250f;
 --fs-mono:var(--vinci-font-mono,ui-monospace,monospace); --fs-ui:var(--vinci-font-ui,-apple-system,BlinkMacSystemFont,sans-serif);
 --fs-ease:var(--vinci-ease,cubic-bezier(.2,.8,.2,1));
}
body:has(.first-steps)>.header,body:has(.first-steps)>.footer{display:none}
body:has(.first-steps){background:radial-gradient(ellipse at 50% 0%,#fffefa 0%,#fffaf2 55%,#faf2e5 100%) fixed;overflow:auto!important}
main:has(.first-steps){max-width:none;padding:0;margin:0}
.first-steps{min-height:100dvh;color:var(--fs-ink);font:16px/1.6 var(--fs-ui)}
.first-steps a{color:inherit;text-decoration:none}
.first-steps code{font-family:var(--fs-mono);font-size:.92em;color:var(--fs-brown);background:#faf3e3;padding:1px 6px;border-radius:6px;white-space:nowrap}
/* A lesson that says "three equals signs" must show three. */
.first-steps code,.first-steps .ed-editor,.first-steps .ed-code-view{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
.first-steps [hidden]{display:none!important}
.first-steps :focus-visible{outline:2px solid var(--fs-label);outline-offset:4px}
.sr-only,.steps-progress a:not([aria-current])>span,.steps-progress span[aria-disabled]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Top bar: brand, where you are, this topic's parts, the course ── */
.steps-nav{position:sticky;top:0;z-index:10;height:60px;padding:0 32px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:0 20px;background:#fffcf6e8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #e8dcc280}
.steps-brand{display:inline-block;line-height:44px;min-height:44px;font-size:15px;font-weight:500;letter-spacing:-.3px;color:var(--fs-ink);white-space:nowrap}
.steps-brand span{color:var(--fs-brown)}
.steps-lesson-name{min-width:0;max-width:100%;font-size:13px;color:var(--fs-label);padding-left:18px;border-left:1px solid var(--fs-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps-progress{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.steps-progress li{display:flex}
.steps-progress a,.steps-progress span[aria-disabled]{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;min-width:44px;padding:0 3px;color:var(--fs-label);font-size:13px;font-weight:500}
.steps-progress i{width:26px;height:26px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--fs-line);background:var(--fs-card);color:var(--fs-label);font:500 10.5px/1 var(--fs-mono);font-style:normal;transition:background .2s,border-color .2s}
.steps-progress a:hover i{border-color:#c9ab70}
.steps-progress a[aria-current]{padding-right:10px;color:var(--fs-gold-ink)}
.steps-progress a[aria-current] i{background:var(--fs-gold);border-color:var(--fs-gold-edge);color:var(--fs-gold-ink);box-shadow:0 3px 10px #b5802530,inset 0 1px 0 #ffe4aa}
.steps-progress a[data-done]:not([aria-current]) i{background:var(--fs-gold-soft);border-color:var(--fs-gold-edge)}
.steps-progress span[aria-disabled]{cursor:not-allowed}
.steps-progress span[aria-disabled] i{border-style:dashed;border-color:var(--fs-dash);background:transparent;color:var(--fs-quiet)}
.steps-course{font-size:13px;color:var(--fs-quiet);height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#d6cbb7}
.steps-course:hover{color:var(--fs-ink)}

/* ── The page: the outline beside one lesson column ── */
.steps-body{display:grid;grid-template-columns:232px minmax(0,1fr);column-gap:56px;align-items:start;max-width:1360px;margin:0 auto;padding:40px 40px 110px}
.steps-lesson{display:flex;flex-direction:column;min-width:0;max-width:1000px}

/* The outline: lessons on one thread. Only the lesson in hand opens its topics. */
.steps-outline{position:sticky;top:84px;align-self:start;max-height:calc(100dvh - 108px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:4px 8px 8px 0}
.steps-outline ol{list-style:none;margin:0;padding:0}
.steps-outline-lesson{position:relative;margin:0 0 6px}
.steps-outline-lesson:has(ol)::before{content:'';position:absolute;left:13.5px;top:34px;bottom:10px;width:1px;background:var(--fs-line)}
.steps-outline-title{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;font-size:14px;font-weight:500;letter-spacing:-.2px;color:var(--fs-ink);border-radius:var(--fs-r-sm)}
.steps-outline-title b{flex:none;width:28px;height:28px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--fs-line);background:var(--fs-card);color:var(--fs-label);font:500 11px/1 var(--fs-mono);transition:background .2s,border-color .2s}
a.steps-outline-title:hover{color:var(--fs-brown)}
a.steps-outline-title:hover b{border-color:#c9ab70}
.steps-outline-lesson[data-state="current"] .steps-outline-title b{background:var(--fs-gold);border-color:var(--fs-gold-edge);color:var(--fs-gold-ink);box-shadow:0 3px 10px #b5802530,inset 0 1px 0 #ffe4aa}
.steps-outline-lesson[data-done] .steps-outline-title b{background:var(--fs-gold-soft);border-color:var(--fs-gold-edge)}
.steps-outline-lesson[data-state="locked"] .steps-outline-title{color:var(--fs-quiet)}
.steps-outline-lesson[data-state="locked"] .steps-outline-title b{border-style:dashed;border-color:var(--fs-dash);background:transparent}
.steps-outline-lesson>ol{margin:2px 0 10px}
.steps-outline-topic{position:relative;display:flex;align-items:center;min-height:36px;padding:0 8px 0 40px;border-radius:var(--fs-r-sm);font-size:13.5px;line-height:1.3;color:var(--fs-label);transition:color .2s,background .2s}
.steps-outline-topic i{position:absolute;left:6px;top:50%;width:16px;height:16px;margin-top:-8px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--fs-line);background:var(--fs-card);color:var(--fs-label);font:500 8.5px/1 var(--fs-mono);font-style:normal}
a.steps-outline-topic:hover{color:var(--fs-ink);background:var(--fs-warm)}
a.steps-outline-topic[aria-current]{color:var(--fs-ink);font-weight:500;background:var(--fs-warm)}
a.steps-outline-topic[aria-current] i{background:var(--fs-gold);border-color:var(--fs-gold-edge);color:var(--fs-gold-ink)}
a.steps-outline-topic[data-done]:not([aria-current]) i{background:var(--fs-gold-soft);border-color:var(--fs-gold-edge)}
span.steps-outline-topic[aria-disabled]{color:var(--fs-quiet);cursor:default}
span.steps-outline-topic[aria-disabled] i{border-style:dashed;border-color:var(--fs-dash);background:transparent;color:var(--fs-quiet)}
.steps-outline-after{margin:14px 0 0 40px;font-size:12.5px;line-height:1.5;color:var(--fs-quiet)}
.steps-outline-after a{color:var(--fs-brown);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#d6cbb7}
.steps-outline a:focus-visible{outline-offset:0}

/* ── The head: where you are, what it is called, one idea ── */
.steps-head{margin:0 0 26px}
.steps-eyebrow{margin:0 0 12px;font:500 11px/1.4 var(--fs-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fs-label)}
.steps-eyebrow span{color:var(--fs-dash);margin:0 4px}
.first-steps h1{font-size:clamp(30px,3.1vw,42px);font-weight:500;letter-spacing:-.035em;line-height:1.08;color:var(--fs-ink);margin:0;max-width:22ch;text-wrap:balance}
.steps-stage{margin:0}
.steps-learn{margin:14px 0 0;font-size:18px;line-height:1.6;color:var(--fs-ink-2);max-width:60ch}

/* The task: the one thing to do, marked like a margin note in gold. When it
   is done the mark turns green and gains a tick. */
.steps-stage[data-stage="try"]{position:relative;padding:2px 0 2px 18px;border-left:3px solid var(--fs-gold);transition:border-color .3s var(--fs-ease)}
.steps-task{margin:0;font-size:19px;line-height:1.45;font-weight:500;color:var(--fs-ink);max-width:58ch}
.first-steps:is([data-progress="check"],[data-progress="done"]) .steps-stage[data-stage="try"]{border-left-color:var(--fs-valid)}
.first-steps:is([data-progress="check"],[data-progress="done"]) .steps-task::after{content:'  ✓';color:var(--fs-valid);font-weight:600}
.steps-hint{margin:6px 0 0;font-size:14px;color:var(--fs-ink-2)}
.steps-hint summary{position:relative;cursor:pointer;display:inline-flex;align-items:center;min-height:32px;color:var(--fs-brown);font-weight:500;list-style:none}
.steps-hint summary::-webkit-details-marker{display:none}
.steps-hint summary::after{content:'▾'/'';font-size:10px;margin-left:5px}
.steps-hint[open] summary::after{content:'▴'/''}
.steps-hint p{margin:2px 0 0;line-height:1.55;max-width:60ch}

/* ── The stage: JavaScript on the left, Vinci on the right, always here ── */
.steps-workspace{margin:22px 0 0}
.steps-world{display:grid;grid-template-columns:minmax(260px,5fr) minmax(0,7fr);gap:22px;align-items:start}
.first-steps[data-js="none"] .steps-world{grid-template-columns:minmax(0,1fr)}
.steps-side{position:relative;min-width:0;margin:0}
.steps-caption{margin:0 0 8px 4px;font:500 10.5px/1 var(--fs-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fs-label)}
.first-steps #vinci-host{display:block;min-width:0}
.steps-vinci{max-width:100%;scroll-margin-top:76px;isolation:isolate}
.steps-vinci[data-live="true"] #vinci-host{animation:stepsIn .3s var(--fs-ease) both}
.steps-vinci[data-live="false"] #vinci-host{display:grid;place-items:center;min-height:180px;border:1.5px dashed var(--fs-dash);border-radius:var(--fs-r);background:transparent}
.steps-placeholder{margin:0;padding:0 16px;text-align:center;font:500 10.5px/1.6 var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fs-quiet)}
/* The code panel: the same shared panel as the L2 study, tinted into the page. */
/* The Foundation stage keeps 16px of its own above the scope box; the code
   box takes the same, so both boxes begin on one line under their captions. */
.steps-written #written-host{margin-top:16px}
.first-steps .ed-code-panel .ed-source-panel{padding:8px 6px 8px}
.first-steps .ed-code-panel{background:var(--fs-card);border:1px solid var(--fs-line);border-radius:var(--fs-r);box-shadow:var(--fs-shadow)}
.first-steps .ed-code-panel:focus-within{border-color:var(--fs-gold-edge);box-shadow:0 0 0 3px #edac4030}
.first-steps .ed-code-panel[data-compact] .ed-code-title{padding:14px 16px 0;border-bottom:0;background:transparent;font:500 10.5px/1 var(--fs-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fs-label)}
.first-steps .ed-code-panel .ed-source-panel{padding:2px 6px 8px}
.first-steps .ed-code-panel[data-mode="live"] .ed-editor{background:transparent;border-radius:0;padding:8px 10px 6px;font:15px/1.7 var(--fs-mono);color:#6b5127;caret-color:var(--fs-gold-edge)}
.first-steps .ed-code-panel[data-mode="live"] .ed-editor:focus-visible{outline:2px solid var(--fs-label);outline-offset:-2px}
.first-steps .ed-editor::placeholder{color:var(--fs-quiet)}
.first-steps .ed-code-panel .ed-source-hint{margin:0 10px 4px;min-height:16px;font:12.5px/1.5 var(--fs-ui);color:var(--fs-label)}
.first-steps .ed-code-view{font:15px/1.7 var(--fs-mono);color:#6b5127;background:transparent}

/* ── What happened: guess and run, the result, the reaction ── */
.steps-bench-foot{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:18px}
.steps-run{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px;color:var(--fs-ink-2)}
.steps-run label{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
#steps-prediction{width:96px;height:44px;padding:0 10px;box-sizing:border-box;border:1px solid #9c8456;border-radius:var(--fs-r-sm);background:var(--fs-card);font:16px var(--fs-mono);color:var(--fs-ink);text-align:center;transition:border-color .15s,box-shadow .15s}
#steps-prediction:focus{border-color:var(--fs-gold-edge);box-shadow:0 0 0 3px #edac4030;outline:0}
#steps-prediction:focus-visible{outline:2px solid var(--fs-label);outline-offset:2px}
#steps-prediction:disabled{background:var(--fs-cream);color:var(--fs-brown)}
#steps-run-button{height:44px;padding:0 20px;border:1px solid var(--fs-gold-edge);border-radius:var(--fs-pill);background:var(--fs-gold);color:var(--fs-gold-ink);font:500 15px/1 var(--fs-ui);cursor:pointer;box-shadow:0 5px 18px #b5802515,inset 0 1px 0 #ffe4aa;transition:transform .2s,box-shadow .2s,background .2s}
#steps-run-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #b5802530}
.steps-run:has(#steps-prediction:disabled) #steps-run-button{background:var(--fs-card);border-color:var(--fs-line);color:#59492d;box-shadow:none}
.steps-result .steps-caption{margin-left:4px}
/* Under the JavaScript: the guess, the run, then the result, in that order. */
.steps-written .steps-run{margin-top:16px}
.steps-written .steps-result{margin-top:16px}
.steps-written #result-host{width:100%;min-width:0}
.first-steps #result-host{display:flex;flex-direction:column;align-items:center;gap:8px;width:fit-content;min-width:260px;max-width:100%;box-sizing:border-box;padding:18px 28px 14px;border:1px solid var(--fs-line);border-radius:var(--fs-r);background:var(--fs-card);box-shadow:var(--fs-shadow);animation:stepsIn .3s var(--fs-ease) both}
/* The app the last lesson builds: its output on a small screen. */
.steps-app-screen{margin:0 0 6px;width:260px;padding:10px 12px 14px;box-sizing:border-box;border-radius:26px;background:#2d2a26;box-shadow:0 18px 40px #3a2a1030,inset 0 0 0 1px #4a453d}
.steps-app-bar{display:block;width:54px;height:5px;margin:2px auto 14px;border-radius:3px;background:#5a544b}
.steps-app-card{margin:0;padding:22px 16px;border-radius:16px;background:linear-gradient(160deg,#fff8e8,#f7e3b8);color:var(--fs-gold-ink);font:600 20px/1.3 var(--fs-ui);letter-spacing:-.01em;text-align:center;overflow-wrap:anywhere}
.steps-app-screen figcaption{margin:10px 0 0;text-align:center;font:500 10px/1 var(--fs-mono);letter-spacing:.13em;text-transform:uppercase;color:#b9ad97}
.steps-restart{border:0;background:transparent;padding:0;min-height:32px;font:13px var(--fs-ui);color:var(--fs-quiet);cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#d6cbb7}
.steps-restart:hover{color:var(--fs-ink)}
.first-steps[data-progress="learn"] .steps-restart{display:none}

/* Callouts: success warm with a gold tick, nudge cream with an arrow. */
.steps-feedback,.steps-answer{position:relative;width:fit-content;max-width:100%;box-sizing:border-box;margin:0;padding:12px 18px 12px 46px;border-radius:var(--fs-r-sm);font-size:15px;line-height:1.5}
.steps-feedback::before,.steps-answer::before{position:absolute;left:14px;top:12px;width:22px;height:22px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--fs-mono)}
.steps-feedback[data-tone="success"],.steps-answer:not(:has(.steps-again)){background:var(--fs-warm);border:1px solid var(--fs-gold-edge);color:var(--fs-gold-ink)}
.steps-feedback[data-tone="success"]::before,.steps-answer:not(:has(.steps-again))::before{content:'✓';background:var(--fs-gold);color:var(--fs-gold-ink);box-shadow:inset 0 1px 0 #ffe4aa}
.steps-feedback[data-tone="nudge"],.steps-answer:has(.steps-again){background:var(--fs-cream);border:1px solid var(--fs-line);color:#59492d}
.steps-feedback[data-tone="nudge"]::before,.steps-answer:has(.steps-again)::before{content:'→';background:var(--fs-card);border:1px solid var(--fs-line);color:var(--fs-label)}
.steps-feedback code,.steps-answer code{background:#fff}
.steps-answer{margin-top:12px}
.steps-answer:empty{display:none}
.steps-again{position:relative;display:flex;width:fit-content;align-items:center;height:40px;margin:10px 0 0;padding:0 16px;border:1px solid var(--fs-line);border-radius:var(--fs-pill);background:var(--fs-card);color:#59492d;font:14px/1 var(--fs-ui);cursor:pointer}
.steps-again:hover{border-color:#c9ab70}

/* ── The check: three rows, a drawn ring, right and wrong in colour ── */
#steps-check{margin:40px 0 0;padding:26px 0 0;border-top:1px solid var(--fs-line);animation:stepsIn .3s var(--fs-ease) both}
#steps-check fieldset{border:0;padding:0;margin:0 0 0 -14px}
#steps-check legend{margin:0 0 8px;padding:0 0 0 14px;font-size:18px;line-height:1.45;font-weight:500;color:var(--fs-ink)}
#steps-check label{display:flex;align-items:center;gap:14px;min-height:48px;box-sizing:border-box;margin:2px 0 0;padding:10px 14px;border:1px solid transparent;border-radius:var(--fs-r-sm);font-size:16px;line-height:1.4;cursor:pointer;transition:border-color .15s,background .15s;max-width:62ch}
#steps-check input{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid #9c8456;background:var(--fs-card);box-sizing:border-box;transition:border .15s var(--fs-ease)}
#steps-check input:checked{border:7px solid #a9771f}
#steps-check input:focus-visible{outline:2px solid var(--fs-label);outline-offset:3px}
#steps-check label:hover:not(:has(input:disabled)){background:var(--fs-warm)}
#steps-check label:has(input:checked){border-color:var(--fs-gold-edge);background:#fff7e3}
#steps-check label:has(input:disabled){cursor:default}
#steps-check label:has(input:disabled:not(:checked)){opacity:.7}
#steps-check:has(input:disabled):not(:has(.steps-again)) label:has(input:checked){border-color:var(--fs-valid);background:var(--fs-valid-soft)}
#steps-check:has(input:disabled):not(:has(.steps-again)) label:has(input:checked) input{border-color:var(--fs-valid)}
#steps-check:has(.steps-again) label:has(input:checked){border-color:var(--fs-line);background:var(--fs-cream)}
#steps-check:has(.steps-again) label:has(input:checked) input{border-color:var(--fs-wrong)}

/* ── Forward: dashed until earned, then the landing's gold invitation ── */
.steps-forward{margin:30px 0 0}
.steps-next,.steps-continue{display:inline-flex;align-items:center;gap:14px;height:50px;padding:0 26px;border-radius:var(--fs-pill);font:500 15px/1 var(--fs-ui);cursor:pointer;background:var(--fs-gold);border:1px solid var(--fs-gold-edge);color:var(--fs-gold-ink);box-shadow:0 8px 30px #b5802520,inset 0 1px 0 #ffe4aa;transition:transform .2s,box-shadow .2s}
.steps-next:hover:not(:disabled),.steps-continue:hover{transform:translateY(-3px);box-shadow:0 14px 35px #b5802530}
.steps-next:disabled{background:transparent;border:1.5px solid var(--fs-dash);color:var(--fs-quiet);box-shadow:none;cursor:default}
#steps-storage{margin:8px 0 0;font-size:12.5px;color:var(--fs-wrong)}
#steps-storage:empty{display:none}

/* A little magic when the task is achieved */
.steps-puff{position:absolute;left:50%;top:50%;pointer-events:none;z-index:5}
.steps-puff i{position:absolute;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#ffe9b0,#eec97988 50%,transparent 75%);animation:stepsPuff .85s ease-out var(--delay) both}
@keyframes stepsPuff{0%{transform:translate(0,0) scale(.3);opacity:0}20%{opacity:1}100%{transform:translate(var(--px),var(--py)) scale(2.5);opacity:0}}
@keyframes stepsIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.steps-next:not([hidden]){animation:stepsIn .26s var(--fs-ease) .08s both}
#steps-feedback:not([hidden]),.steps-answer:not(:empty){animation:stepsIn .22s var(--fs-ease) both}

/* ── Recap ── */
.steps-recap{max-width:600px;margin:10vh auto 0;padding:0 24px 64px;text-align:center}
.first-steps[data-step="done"] .steps-body{padding-bottom:0}
.steps-recap .steps-eyebrow{margin-bottom:18px}
.steps-recap h1{font-size:clamp(44px,5.2vw,68px);letter-spacing:-.05em;line-height:1;max-width:none;margin:0 0 20px}
.steps-recap .steps-learn{font-size:17px;line-height:1.65;color:var(--fs-quiet);max-width:46ch;margin:0 auto}
.steps-links{display:flex;justify-content:center;gap:24px;font-size:13px;color:var(--fs-quiet);margin-top:20px}
.steps-links a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#d6cbb7}
.steps-continue{margin-top:28px}

/* ── Widths ── */
@media(max-width:1279px) and (min-width:1024px){
 .steps-body{grid-template-columns:200px minmax(0,1fr);column-gap:40px;padding:32px 28px 90px}
}
@media(max-width:1023px){
 .steps-outline{display:none}
 .steps-body{display:block;padding:28px 24px 80px}
 .steps-lesson{max-width:none}
}
@media(max-width:767px){
 .steps-nav{position:static;height:auto;padding:10px 16px 4px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand name course" "progress progress progress";gap:0 12px}
 .steps-brand{grid-area:brand}
 .steps-lesson-name{grid-area:name;justify-self:end;padding:0;border:0;font-size:12px}
 .steps-course{grid-area:course;font-size:12px}
 .steps-progress{grid-area:progress;overflow-x:auto;scrollbar-width:none}
 .steps-body{padding:20px 16px 64px}
 .first-steps h1{font-size:28px}
 .steps-learn{font-size:17px}
 .steps-task{font-size:18px}
 .steps-world{grid-template-columns:minmax(0,1fr);gap:18px}
 /* On a phone the column stacks, so the code, then Vinci, then the run: the
    two views of the program stay next to each other. */
 .steps-written{display:contents}
 .steps-written>.steps-caption{order:1;margin-bottom:0}
 .steps-written>#written-host{order:2;margin-top:0}
 .steps-vinci{order:3;scroll-margin-top:12px}
 .steps-written>.steps-run{order:4;margin-top:0}
 .steps-written>.steps-result{order:5;margin-top:0}
 /* The open ball asks for more room than the column; give it the gutters.
    Every other surface fits the column as it is. */
 .first-steps[data-concept="object"] .steps-vinci{width:calc(100% + 32px);margin:0 -16px;overflow-x:auto}
 .first-steps[data-concept="object"] .steps-vinci .steps-caption{margin-left:20px}
 .first-steps #result-host{width:100%;min-width:0}
 .steps-feedback,.steps-answer{width:auto}
 .steps-run label{flex:1 1 100%}
 #steps-run-button,.steps-next{width:100%;justify-content:center}
}
@media(hover:none){.steps-next:hover,.steps-continue:hover,#steps-run-button:hover{transform:none}}
@media(prefers-reduced-motion:reduce){
 .steps-puff{display:none}
 #steps-check,.steps-next,#steps-feedback,.steps-answer,#result-host,.steps-vinci #vinci-host{animation:none!important}
 .first-steps *{transition:none!important}
 .steps-next:hover,.steps-continue:hover,#steps-run-button:hover{transform:none}
}

/* ── The course map: ten lessons as one path ── */
.course-map{max-width:880px;margin:0 auto;padding:56px 32px 110px}
.course-map h1{font-size:clamp(38px,4.6vw,60px)!important;letter-spacing:-.05em!important;line-height:1.02!important;max-width:16ch!important;margin:0 0 18px!important}
.course-lead{margin:0 0 30px;font-size:18px;line-height:1.6;color:var(--fs-ink-2);max-width:56ch}
.course-lessons{list-style:none;margin:52px 0 0;padding:0;position:relative}
.course-lessons::before{content:'';position:absolute;left:21px;top:26px;bottom:44px;width:2px;background:repeating-linear-gradient(var(--fs-line) 0 6px,transparent 6px 11px)}
.course-lessons li{position:relative;margin:0}
.course-lesson{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:0 20px;align-items:start;padding:16px 16px 18px 0;border-radius:var(--fs-r);transition:background .2s}
a.course-lesson:hover{background:var(--fs-warm)}
.course-ring{position:relative;z-index:1;width:44px;height:44px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:2px solid var(--fs-line);background:var(--fs-card);color:var(--fs-label);font:600 14px/1 var(--fs-mono)}
.course-text{display:flex;flex-direction:column;gap:4px;padding-top:2px;min-width:0}
.course-title{font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--fs-ink)}
.course-blurb{font-size:15px;line-height:1.5;color:var(--fs-ink-2)}
.course-topics{font-size:13px;line-height:1.5;color:var(--fs-quiet)}
.steps-open-app-line{margin:14px 0 0}
.steps-open-app{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#59492d;font:500 15px/1.3 var(--fs-ui);text-decoration:underline;text-underline-offset:4px}
.course-time{font-size:13px;line-height:1.5;color:var(--fs-quiet)}
/* A locked lesson's preview: its first idea and where it leads. */
.course-preview{margin:-8px 0 10px 64px;font-size:14px;color:var(--fs-ink-2)}
.course-preview summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:#59492d;font:500 13px/1 var(--fs-ui);text-decoration:underline;text-underline-offset:3px}
.course-preview>div{max-width:60ch;padding:2px 0 8px;line-height:1.55}
.course-preview p{margin:0 0 8px}
.course-status{padding-top:12px;font:500 11px/1.3 var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fs-label);white-space:nowrap}
.course-lessons li[data-state="done"] .course-ring{background:var(--fs-gold-soft);border-color:var(--fs-gold-edge);color:var(--fs-brown)}
.course-lessons li[data-state="current"] .course-ring,.course-lessons li[data-state="open"] .course-ring{background:var(--fs-gold);border-color:var(--fs-gold-edge);color:var(--fs-gold-ink);box-shadow:0 4px 14px #b5802535,inset 0 1px 0 #ffe4aa}
.course-lessons li[data-state="locked"] .course-ring{border-style:dashed;border-color:var(--fs-dash);background:var(--fs-paper);color:var(--fs-quiet)}
.course-lessons li[data-state="locked"] .course-title{color:var(--fs-quiet)}
.course-lessons li[data-state="locked"] .course-status{color:var(--fs-quiet);text-transform:none;letter-spacing:0;font:13px var(--fs-ui)}
/* The destination: the app is where the path goes. */
.course-lessons li[data-last] .course-lesson{margin-top:10px;padding:20px 20px 22px 0;background:linear-gradient(135deg,#fff8e8,#fbecc9);border:1px solid #f0d9a8}
.course-lessons li[data-last] .course-ring{width:44px;height:44px}
@media(max-width:767px){
 .course-map{padding:32px 16px 72px}
 .course-lesson{grid-template-columns:44px minmax(0,1fr);gap:0 14px}
 .course-status{grid-column:2;padding-top:6px}
 .course-preview{margin-left:58px}
 .course-lessons li[data-last] .course-lesson{padding-left:6px}
}
/* On the app lesson the phone is the frame; the result card does not wrap it. */
.first-steps[data-app] #result-host{border:0;background:transparent;box-shadow:none;padding:4px 0 0;align-items:flex-start}
.first-steps[data-app] .steps-app-screen{margin-left:0}

/* A topic just finished: its ring in the outline pops once. */
@keyframes stepsPop{0%{transform:scale(1)}35%{transform:scale(1.45);box-shadow:0 0 0 8px #edac4040}100%{transform:scale(1);box-shadow:0 0 0 0 #edac4000}}
.steps-outline-topic-row[data-just-finished] .steps-outline-topic i{animation:stepsPop .7s var(--fs-ease) .35s both;background:var(--fs-gold);border-color:var(--fs-gold-edge);color:var(--fs-gold-ink)}
@media(prefers-reduced-motion:reduce){.steps-outline-topic-row[data-just-finished] .steps-outline-topic i{animation:none}}
.steps-recap-app{margin:6px auto 26px;animation:stepsIn .5s var(--fs-ease) .15s both}
@media(prefers-reduced-motion:reduce){.steps-recap-app{animation:none}}

/* The narrowest phones: the open ball asks for 387px, the screen has 375.
   Zoom the Vinci wrapper, not the host (the host refuses a transform), the way
   the landing scales its floating Vinci; zoom also keeps pointer targets true. */
@media(max-width:385px){.first-steps[data-concept="object"] .steps-vinci{zoom:.94}}
@media(max-width:368px){.first-steps[data-concept="object"] .steps-vinci{zoom:.88}}
@media(max-width:340px){.first-steps[data-concept="object"] .steps-vinci{zoom:.8}}
/* A Change opens its editor inside the ball: the current value, the sign, the
   new value, then Cancel and Done, about 360px wide. Below that the steps zoom,
   so Done is on screen without scrolling the drawing sideways. */
@media(max-width:400px){.first-steps[data-concept="mutation"] .steps-vinci{zoom:.92}}
@media(max-width:380px){.first-steps[data-concept="mutation"] .steps-vinci{zoom:.86}}
@media(max-width:350px){.first-steps[data-concept="mutation"] .steps-vinci{zoom:.78}}
/* A field read draws the whole ball inside the reading's pill: about 471px
   with its frame. Each band zooms by its narrowest width, so it always fits. */
@media(max-width:503px){.first-steps[data-concept="property"] .steps-vinci{zoom:.9}}
@media(max-width:459px){.first-steps[data-concept="property"] .steps-vinci{zoom:.82}}
@media(max-width:419px){.first-steps[data-concept="property"] .steps-vinci{zoom:.76}}
@media(max-width:389px){.first-steps[data-concept="property"] .steps-vinci{zoom:.69}}
@media(max-width:359px){.first-steps[data-concept="property"] .steps-vinci{zoom:.62}}
/* The `font` shorthand (here and in the shared code panel) resets ligatures,
   so this must win over it: `===` must read as three signs everywhere. */
.first-steps .ed-code-panel,.first-steps .ed-code-panel *,.first-steps code{font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"calt" 0!important}

/* Keyboard and touch. A heading that receives focus on arrival needs no ring;
   the sticky bar must never cover the control that has focus; on touch
   screens the Academy's own small controls are at least 44px tall. */
.first-steps h1[tabindex="-1"]:focus,.course-map h1[tabindex="-1"]:focus{outline:none}
@media(min-width:768px){html:has(.first-steps){scroll-padding-top:76px}}
@media(pointer:coarse){.steps-hint summary,.steps-restart{min-height:44px}.steps-again{height:44px}}

/* The last lesson: Lancy's own chat, framed. It gets the width of the column
   and most of the screen's height, so her conversation and the app beside it
   have room; nothing inside it is styled from here. */
.steps-lancy{margin-top:8px}
.steps-lancy-frame{display:block;width:100%;height:min(80vh,780px);min-height:520px;border:1px solid var(--fs-line);border-radius:16px;background:#faf6ec;box-sizing:border-box}
.steps-lancy-foot{margin:10px 0 0;font-size:13px}
.steps-lancy-offline{margin:0;padding:22px 24px;border:1px dashed var(--fs-dash);border-radius:16px;background:var(--fs-card);color:var(--fs-ink);font-size:16px;line-height:1.5}
.steps-lancy-foot a{color:var(--fs-brown);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#d6cbb7}
.steps-ideas-title{margin:12px 0 4px}
.steps-ideas{margin:0;padding-left:20px;color:var(--fs-ink)}
.steps-ideas li{margin:4px 0}
.steps-built{margin-top:16px;height:44px;padding:0 20px;border:1px solid var(--fs-gold-edge);border-radius:var(--fs-pill);background:var(--fs-gold);color:var(--fs-gold-ink);font:500 15px/1 var(--fs-ui);cursor:pointer;box-shadow:0 5px 18px #b5802515,inset 0 1px 0 #ffe4aa}
.steps-built:hover{box-shadow:0 8px 20px #b5802530}
@media(max-width:767px){.steps-lancy-frame{height:78vh;min-height:480px;border-radius:12px}}

/* Extras: optional topics a lesson offers once it is done. */
.steps-extra{margin-left:8px;padding:1px 7px;border:1px solid var(--fs-line);border-radius:var(--fs-pill);font:500 10px/1.5 var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fs-label)}
.steps-extras{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin:22px 0 0;font-size:14px;color:var(--fs-quiet)}
.steps-extras a{display:inline-flex;align-items:center;min-height:44px;color:var(--fs-brown);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#d6cbb7}

/* A clean start for the next learner on a shared computer. */
.course-fresh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:40px 0 0;font-size:13px;color:var(--fs-quiet)}
.course-start-fresh{min-height:44px;padding:0 16px;border:1px solid var(--fs-line);border-radius:var(--fs-pill);background:var(--fs-card);color:#59492d;font:500 14px/1 var(--fs-ui);cursor:pointer}
.course-start-fresh:hover{border-color:var(--fs-gold-edge)}

.steps-built-note{margin:16px 0 0;font-size:14px;color:var(--fs-quiet)}
.steps-built-note+.steps-built{margin-top:10px}

/* Keyboard shortcuts around the drawing: hidden until focused, like the page's skip link. */
.steps-skip{position:fixed;left:15px;top:-90px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--fs-pill);background:#fff;color:var(--fs-ink);font:500 14px/1 var(--fs-ui);box-shadow:0 4px 18px #0000001f}
.steps-skip:focus{top:10px}
/* The course overview and the build task, one short line per idea. */
ul.course-lead{list-style:none;padding:0}
ul.course-lead li{margin:0 0 6px}
.steps-task-list{margin:0;padding-left:1.4em}
.steps-task-list li{margin:0 0 6px}

/* While a value editor is open, no fixed or fitted zoom: full-size touch targets (see fitVinci). */
.first-steps .steps-vinci[data-editing="true"]{zoom:1!important}