:root { --ink:#2d211a; --muted:#66584f; --paper:#fffaf2; --cream:#f4eadb; --rust:#8a3f22; --teal:#17685d; --line:#d8c8b7; --code:#201713; --code-text:#fff8e8; }
* { box-sizing:border-box; }
html { color-scheme:light; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; }
button, textarea { font:inherit; }
.skip-link { position:fixed; left:1rem; top:-4rem; z-index:20; background:#fff; color:var(--ink); padding:.75rem 1rem; }
.skip-link:focus { top:1rem; }
.topbar { min-height:76px; padding:.75rem clamp(1rem,3vw,2.5rem); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem; color:#fff; background:#3b2419; position:sticky; top:0; z-index:10; }
.topbar h1 { margin:.1rem 0 0; font-family:Georgia,serif; font-size:clamp(1.35rem,2.4vw,2rem); }
.eyebrow { margin:0; color:inherit; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:800; }
.brand,.back-link { color:#fff; text-decoration:none; display:flex; align-items:center; gap:.6rem; }
.brand span { display:grid; place-items:center; width:2.4rem; height:2.4rem; color:#3b2419; background:#f4b942; border-radius:50%; font-weight:900; }
.back-link { border:1px solid #ffffff80; padding:.65rem .9rem; border-radius:.35rem; }
.shell { display:grid; grid-template-columns:minmax(290px,24rem) 1fr; min-height:calc(100dvh - 76px); }
.rail { padding:2rem 1.4rem; background:var(--cream); border-right:1px solid var(--line); }
.rail h2 { margin:.4rem 0; font-family:Georgia,serif; font-size:1.8rem; }
.rail-copy { color:var(--muted); line-height:1.55; }
.progress-copy { display:flex; justify-content:space-between; gap:1rem; margin:1.5rem 0 .45rem; }
.progress { height:.65rem; background:#fff; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.progress span { display:block; width:0; height:100%; background:var(--teal); transition:width .2s ease; }
.lab-list { display:grid; gap:.45rem; margin:1.5rem 0; }
.lab-button { width:100%; border:1px solid transparent; background:transparent; text-align:left; padding:.75rem; border-radius:.4rem; color:var(--ink); cursor:pointer; }
.lab-button:hover { background:#ffffff80; }
.lab-button.is-active { background:#fff; border-color:var(--rust); }
.lab-button.is-complete::before { content:'✓ '; color:var(--teal); font-weight:900; }
.learning-file { display:inline-block; color:var(--rust); font-weight:800; }
.workspace { display:grid; grid-template-columns:minmax(320px,43%) minmax(0,57%); min-height:calc(100dvh - 76px); }
.brief { padding:clamp(1.5rem,4vw,3.5rem); overflow:auto; }
.brief h2 { margin:.45rem 0 1rem; font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.4rem); line-height:1.02; }
.brief h3 { margin-top:1.8rem; }
.lede,.brief li,.why p,details p { line-height:1.65; }
.why { margin:1.5rem 0; padding:1rem 1.15rem; background:#f7e6cb; border-left:5px solid #f4b942; }
.why p { margin:.4rem 0 0; }
.requirements { padding:0; list-style:none; display:grid; gap:.55rem; }
.requirements li { padding:.65rem .8rem; border:1px solid var(--line); border-radius:.35rem; }
.requirements li.pass { color:#0d574d; background:#e4f4ee; border-color:#78b7a7; }
.practice { min-width:0; padding:1.25rem; color:var(--code-text); background:var(--code); display:grid; grid-template-rows:auto minmax(360px,1fr) auto auto; gap:1rem; }
.editor-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.editor-head h2 { margin:.2rem 0 0; }
.badge { padding:.45rem .7rem; border:1px solid #fff4; border-radius:999px; color:#f4b942; }
textarea { width:100%; min-height:360px; resize:vertical; padding:1.2rem; color:var(--code-text); background:#130e0b; border:1px solid #ffffff2e; border-radius:.45rem; font-family:"Cascadia Code",Consolas,monospace; line-height:1.55; tab-size:2; }
.actions { display:flex; flex-wrap:wrap; gap:.65rem; }
button { border:1px solid #ffffff55; color:inherit; background:transparent; padding:.7rem 1rem; border-radius:.35rem; cursor:pointer; font-weight:800; }
button.primary { border-color:#9fd0a6; color:#2d211a; background:#9fd0a6; }
.result { padding:.8rem 1rem; color:#fff8e8; background:#ffffff10; border-left:4px solid #f4b942; }
.result.success { border-color:#9fd0a6; background:#17685d; }
dialog { width:min(760px,calc(100% - 2rem)); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:.5rem; }
dialog::backdrop { background:#1b110bcc; }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
dialog pre { max-height:55vh; overflow:auto; padding:1rem; color:var(--code-text); background:var(--code); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline:3px solid #fff; box-shadow:0 0 0 6px #3b2419; }
@media (max-width:1050px) { .workspace { grid-template-columns:1fr; } .practice { min-height:720px; } }
@media (max-width:760px) { .topbar { grid-template-columns:auto 1fr; } .back-link { grid-column:1/-1; justify-self:start; } .shell { grid-template-columns:1fr; } .rail { border-right:0; border-bottom:1px solid var(--line); } .lab-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .lab-list { grid-template-columns:1fr; } .brief,.practice { padding:1rem; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }