@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo.woff2?v=3.15.1) format("woff2"),url(/assets/fonts/archivo.woff?v=3.15.1) format("woff");font-weight:400 900;font-stretch:62% 125%;font-style:normal;font-display:optional}
@font-face{font-family:"Public Sans";src:url(/assets/fonts/public-sans.woff2?v=3.15.1) format("woff2"),url(/assets/fonts/public-sans.woff?v=3.15.1) format("woff");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Spline Sans Mono";src:url(/assets/fonts/spline-sans-mono.woff2?v=3.15.1) format("woff2"),url(/assets/fonts/spline-sans-mono.woff?v=3.15.1) format("woff");font-weight:400 700;font-style:normal;font-display:swap}


/* Layout: a field-guide plate. Source sheet (code + margin notes) on the left, the specimen (live page, peelable to its skeleton) on the right.
   Ink blue draws structure. Vermilion pencil means one thing only: "this changed". */
:root{
  --paper:#f3f5f8;--sheet:#ffffff;--graphite:#16191d;--lead:#59616b;--rule:#c9d0d9;--faint:#e4e9f0;
  --ink:#1d3fbf;--ink-wash:#1d3fbf14;--ink-deep:#132a85;--ink-mid:#3557d6;--ink-soft:#8da0e8;--sky:#e6ecf8;--sky-2:#d2dcf4;--pencil:#e0451f;--pencil-wash:#e0451f17;--ok:#1f7a4a;
  --code-bg:#15181b;--code-fg:#e7e9e6;--code-dim:#6f767c;
  --display:"Archivo",Impact,"Arial Narrow",sans-serif;--body:"Public Sans",system-ui,sans-serif;--mono:"Spline Sans Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#101418;--sheet:#161b20;--graphite:#e6e9e7;--lead:#9aa2a8;--rule:#2d353c;--faint:#1e252b;--ink:#7d9bff;--ink-wash:#7d9bff1c;--ink-deep:#b4c4ff;--ink-mid:#93a9ff;--ink-soft:#5a72c4;--sky:#18213b;--sky-2:#223058;--pencil:#ff6a45;--pencil-wash:#ff6a4522;--ok:#5fcf8f;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#101418;--sheet:#161b20;--graphite:#e6e9e7;--lead:#9aa2a8;--rule:#2d353c;--faint:#1e252b;--ink:#7d9bff;--ink-wash:#7d9bff1c;--ink-deep:#b4c4ff;--ink-mid:#93a9ff;--ink-soft:#5a72c4;--sky:#18213b;--sky-2:#223058;--pencil:#ff6a45;--pencil-wash:#ff6a4522;--ok:#5fcf8f;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--graphite);font:15px/1.5 var(--body);
  background-image:linear-gradient(var(--faint) 1px,transparent 1px),linear-gradient(90deg,var(--faint) 1px,transparent 1px);background-size:24px 24px}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
button:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:1380px;margin:0 auto;padding-inline:clamp(16px,3vw,40px);padding-block:20px 48px}

/* masthead */
.mast{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--graphite);padding-bottom:10px}
.brand{font:900 1.35rem/1 var(--display);font-stretch:125%;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px}
.brand svg{width:26px;height:20px;align-self:center}
.brand small{font:500 .78rem var(--mono);color:var(--lead);font-stretch:100%}
.vol{font:500 .78rem var(--mono);color:var(--lead)}

/* plate ribbon */
.plates{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--rule);margin-bottom:28px}
.plate{flex:1 0 150px;text-align:left;padding:12px 14px 12px 0;border-right:1px solid var(--rule);margin-right:14px;position:relative}
.plate:last-child{border-right:0}
.plate b{display:block;font:500 .72rem var(--mono);color:var(--lead)}
.plate span{display:block;font:700 .95rem/1.2 var(--display);font-stretch:85%;margin-top:3px}
.plate.active span{color:var(--ink)}
.plate.active::after{content:"";position:absolute;left:0;right:14px;bottom:-1px;height:3px;background:var(--ink)}
.plate.done b::after{content:" ✓ done";color:var(--ok)}

/* title block */
.titleblock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:22px}
.titleblock h1{margin:0;font:900 clamp(2.4rem,6vw,4.6rem)/.88 var(--display);font-stretch:70%;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.titleblock p{margin:12px 0 0;max-width:60ch;color:var(--lead)}
.spec{border:1px solid var(--graphite);font:500 .74rem/1.4 var(--mono);display:grid;grid-template-columns:auto auto;min-width:240px;background:var(--sheet)}
.spec div{padding:6px 10px;border-bottom:1px solid var(--rule)}
.spec div:nth-child(odd){color:var(--lead);border-right:1px solid var(--rule)}
.spec div:nth-last-child(-n+2){border-bottom:0}

/* task line */
.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--graphite);border-bottom:1px solid var(--rule);margin-bottom:22px}
.task .no::before{content:'Step';display:block;font:500 .66rem var(--mono);color:var(--lead);margin-bottom:2px;font-stretch:100%}.task .no{font:900 2rem/1 var(--display);font-stretch:62%;color:var(--ink);min-width:2ch}
.task p{margin:0;font-size:1.05rem;font-weight:500}
.task .why{display:block;color:var(--lead);font-size:.86rem;font-weight:400;margin-top:3px}
.linkbtn{font:500 .8rem var(--mono);color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hints{grid-column:2/-1;margin:4px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.hints li{font-size:.9rem;padding-left:16px;position:relative}
.hints li::before{content:"→";position:absolute;left:0;color:var(--ink)}

/* the plate */
.board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:start}
.label{font:500 .74rem var(--mono);color:var(--lead);display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
.label b{color:var(--graphite);font-weight:700}

.source{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:0;border:1px solid var(--graphite);background:var(--code-bg)}
.ed{position:relative;min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr)}
.gutter{padding:16px 0;font:12.5px/1.75 var(--mono);color:var(--code-dim);text-align:right;user-select:none;overflow:hidden}
.gutter div{padding-right:10px;height:1.75em}
.gutter .hot{color:var(--pencil);font-weight:700;box-shadow:inset -2px 0 var(--pencil)}
textarea{width:100%;min-height:400px;resize:vertical;border:0;outline:0;padding:16px 14px 16px 10px;background:transparent;color:var(--code-fg);font:12.5px/1.75 var(--mono);tab-size:2;white-space:pre;overflow:auto}
.margin{background:var(--sheet);border-left:1px solid var(--graphite);padding:12px 10px;font-size:.78rem;line-height:1.4;display:flex;flex-direction:column;gap:10px}
.margin h3{margin:0;font:700 .72rem var(--mono);color:var(--pencil)}
.margin .empty{color:var(--lead);font-style:italic}
.margin .nt{border-left:2px solid var(--pencil);padding-left:8px;color:var(--graphite)}
.margin .nt i{display:block;font:500 .68rem var(--mono);font-style:normal;color:var(--pencil);margin-bottom:2px}
.bar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #2b3035;padding:8px 10px}
.bar button{font:500 .78rem var(--mono);color:var(--code-dim);padding:6px 4px}
.bar .run{min-height:40px;background:var(--code-fg);color:var(--code-bg);font:700 .82rem var(--mono);padding:9px 16px}
.bar .run:hover{background:#fff}
.bar kbd{font:inherit;opacity:.6;margin-left:6px}

.specimen{position:relative}
.frame{position:relative;border:1px solid var(--graphite);background:var(--sheet);padding:28px}
.frame::before,.frame::after{content:"";position:absolute;width:14px;height:14px;border:solid var(--ink);}
.frame::before{top:-8px;left:-8px;border-width:2px 0 0 2px}
.frame::after{bottom:-8px;right:-8px;border-width:0 2px 2px 0}
iframe{display:block;width:100%;height:400px;border:0;background:#ffffff}
.peel{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.toggle{display:inline-flex;border:1px solid var(--graphite)}
.toggle button{font:500 .74rem var(--mono);padding:6px 10px}
.toggle button[aria-pressed="true"]{background:var(--graphite);color:var(--sheet)}
.status{margin-top:12px;font:500 .8rem var(--mono);display:flex;gap:8px;align-items:baseline}
.status::before{content:"○";color:var(--lead)}
.status.ok::before{content:"●";color:var(--ok)}
.status.bad{color:var(--pencil)}.status.bad::before{content:"✕";color:var(--pencil)}

/* field notes */
.notes{margin-top:34px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;border-top:2px solid var(--graphite);padding-top:16px}
.notes h2{margin:0;font:900 1.6rem/.95 var(--display);font-stretch:70%;text-transform:uppercase}
.notes .sub{font:500 .74rem var(--mono);color:var(--lead);margin-top:6px}
.notes ol{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:14px;max-width:72ch}
.notes li{counter-increment:n;display:block;position:relative;padding-left:calc(2.4em + 6px)}
.notes>*,.notes ol{min-width:0}.notes li{overflow-wrap:anywhere}
.notes li::before{content:counter(n,decimal-leading-zero);font:700 .8rem/1.9 var(--mono);color:var(--ink);position:absolute;left:0;top:0}
.notes li.gen{color:var(--lead);font-size:.9rem}
.notes li.gen::before{color:var(--lead)}
.notes .placeholder{color:var(--lead)}

/* coach */
.coach{margin-top:34px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;border-top:1px solid var(--rule);padding-top:16px}
.coach h2{margin:0;font:900 1.6rem/.95 var(--display);font-stretch:70%;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.coach h2 svg{width:30px;height:24px}
.asks{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--graphite);width:fit-content;max-width:100%}
.asks button{padding:9px 14px;font-weight:500;font-size:.9rem;border-right:1px solid var(--graphite)}
.asks button:last-child{border-right:0}
.asks button[aria-pressed="true"]{background:var(--ink);color:#fff}
.coach p{margin:10px 0;color:var(--lead);max-width:62ch;font-size:.92rem}
.coachrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.copy{background:var(--graphite);color:var(--sheet);font:700 .82rem var(--mono);padding:10px 16px}
details summary{font:500 .8rem var(--mono);color:var(--ink);cursor:pointer}
details pre{margin:10px 0 0;padding:14px;background:var(--sheet);border:1px solid var(--rule);font:12px/1.6 var(--mono);white-space:pre-wrap;max-height:220px;overflow:auto;color:var(--lead)}
.foot{margin-top:40px;font:500 .74rem var(--mono);color:var(--lead);border-top:1px solid var(--rule);padding-top:10px}

@media (max-width:980px){.board{grid-template-columns:1fr}.notes,.coach{grid-template-columns:1fr;gap:12px}.titleblock{grid-template-columns:1fr}.spec{min-width:0}}
@media (max-width:620px){.source{grid-template-columns:1fr}.margin{border-left:0;border-top:1px solid var(--graphite)}.task{grid-template-columns:auto minmax(0,1fr)}.task .linkbtn{grid-column:2}.frame{padding:14px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* site layer: contents rail + page */
.site{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;margin-top:22px}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);align-self:start;max-height:calc(100vh - 24px);overflow:auto;padding-right:6px}
.toc .search{width:100%;border:1px solid var(--graphite);background:var(--sheet);padding:8px 10px;font:500 .82rem var(--mono);color:var(--graphite);margin-bottom:14px}
.toc h4{margin:16px 0 4px;font:700 .72rem var(--mono);color:var(--lead);text-transform:uppercase;letter-spacing:.06em}
.toc a{display:grid;grid-template-columns:2.2em 1fr;padding:5px 0;color:var(--graphite);text-decoration:none;font-size:.88rem;line-height:1.3;border-left:2px solid transparent}
.toc a span:first-child{font:500 .72rem/1.6 var(--mono);color:var(--lead)}
.toc a:hover span:last-child{text-decoration:underline}
.toc a.on{color:var(--ink);font-weight:700}.toc a.on span:first-child{color:var(--ink)}
.toc a.done span:first-child::after{content:"✓";color:var(--ok);margin-left:2px}
.menuBtn{display:none;border:1px solid var(--graphite);padding:8px 12px;font:600 .82rem var(--mono);background:var(--sheet)}
.page{min-width:0}
.crumb{font:500 .76rem var(--mono);color:var(--lead);margin-bottom:8px}
.covers{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.covers code{font:500 .74rem var(--mono);border:1px solid var(--rule);background:var(--sheet);padding:3px 7px;color:var(--ink)}
.solved{font:500 .8rem var(--mono);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
article{margin-top:40px;border-top:2px solid var(--graphite);padding-top:8px;display:grid;gap:30px;max-width:780px}
article section h2 .inl{font-size:.8em;font-weight:600}article section h2{margin:18px 0 10px;font:800 1.45rem/1.15 var(--display);font-stretch:85%;text-wrap:balance}
article p{margin:0 0 12px;line-height:1.7;max-width:68ch}
article ul.pts{margin:0 0 12px;padding-left:20px;display:grid;gap:6px;line-height:1.6}
article pre,.mist pre{margin:6px 0 14px;padding:14px 16px;background:var(--code-bg);color:var(--code-fg);font:12.5px/1.65 var(--mono);overflow-x:auto;white-space:pre}
.inl{font:.88em var(--mono);font-weight:500;background:var(--ink-wash);padding:1px 4px;color:var(--ink)}
.blockh{font:900 1.6rem/.95 var(--display);font-stretch:70%;text-transform:uppercase;margin:0 0 12px}
.mist{display:grid;gap:18px}
.mist .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mist .pair div>b{font:700 .72rem var(--mono)}
.mist .pair .w b{color:var(--pencil)}.mist .pair .r b{color:var(--ok)}
.mist .w pre{box-shadow:inset 3px 0 var(--pencil)}.mist .r pre{box-shadow:inset 3px 0 var(--ok)}
.mist p{margin:0;color:var(--lead)}
.faq details{border-top:1px solid var(--rule);padding:12px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font:700 1.1rem var(--mono);color:var(--ink)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:8px 0 0}
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border:1px solid var(--graphite);margin-top:8px}
.next a{padding:14px 16px;text-decoration:none;color:var(--graphite);border-right:1px solid var(--rule)}
.next a:last-child{border-right:0}
.next a small{display:block;font:500 .72rem var(--mono);color:var(--lead)}
.next a b{display:block;margin-top:3px;font:800 1.05rem var(--display);font-stretch:85%}
.next a:hover b{color:var(--ink)}
.idx{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0;border-top:1px solid var(--graphite)}
.idx a{display:flex;justify-content:space-between;gap:10px;padding:9px 4px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--graphite)}
.idx a code{font:600 .86rem var(--mono);color:var(--ink)}.idx a span{color:var(--lead);font-size:.8rem;text-align:right}
.idx a:hover{background:var(--ink-wash)}
.modebar{display:flex;gap:0;border:1px solid var(--graphite);width:fit-content;max-width:100%;margin-bottom:14px}
.modebar button{padding:10px 16px;font-weight:700;font-size:.9rem;display:flex;gap:8px;align-items:center}
.modebar button small{font:500 .72rem var(--mono);opacity:.75}
.modebar button+button{border-left:1px solid var(--graphite)}
.modebar button[aria-pressed="true"]{background:var(--graphite);color:var(--sheet)}
.modebar #mBreak[aria-pressed="true"]{background:var(--pencil);color:#fff}
.hints li.bug{padding-left:22px}
.hints li.bug::before{content:"✕";color:var(--pencil);font-weight:700}
.hints li.bug.fixed::before{content:"✓";color:var(--ok)}
.hints li.bug.fixed{color:var(--lead)}
.hints li.bug em{font-style:normal;color:var(--lead)}
.source{grid-template-columns:1fr!important}
.ed{grid-template-columns:44px minmax(0,1fr)}
.gutter div{position:relative;padding-right:12px}
.gutter .dirty{color:var(--code-fg);box-shadow:inset -3px 0 #f2b94b}
.gutter .hot{color:var(--pencil);box-shadow:inset -3px 0 var(--pencil);cursor:help}
.gutter .err{color:#fff;background:var(--pencil);box-shadow:none}
.gutter .cur{color:var(--code-fg)}
.stack{position:relative;min-width:0;height:420px;resize:vertical;overflow:hidden}
.stack pre,.stack textarea{position:absolute;inset:0;margin:0;padding:16px 14px 16px 10px;font:13px/1.75 var(--mono)!important;tab-size:2;white-space:pre;overflow:auto;border:0;letter-spacing:0;word-spacing:0}
.stack pre{color:var(--code-fg);pointer-events:none;overflow:hidden}
.stack textarea{background:transparent!important;color:transparent!important;caret-color:#fff;min-height:0!important;resize:none!important;z-index:1}
.stack textarea::selection{background:#3b5bd977;color:transparent}
.hl-tag{color:#8fb0ff}.hl-attr{color:#f2b94b}.hl-val{color:#9fd69a}.hl-com{color:#6f767c;font-style:italic}.hl-ent{color:#ff9c7a}
.hl-line{display:block;margin:0 -14px 0 -10px;padding:0 14px 0 10px}
.hl-line.sel{background:#ffffff12;box-shadow:inset 3px 0 #8fb0ff}
.hl-line.flash{background:#1d3fbf55;transition:background .9s}
.hl-err{text-decoration:wavy underline var(--pencil);text-decoration-thickness:1.5px;text-underline-offset:3px}
.suggest{position:absolute;z-index:3;min-width:180px;max-height:190px;overflow:auto;margin:0;padding:4px 0;list-style:none;background:#23282d;border:1px solid #3a4148;box-shadow:0 8px 20px #0006;font:12.5px/1.4 var(--mono)}
.suggest li{padding:5px 10px;color:var(--code-fg);cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.suggest li small{color:var(--code-dim)}
.suggest li.on{background:#1d3fbf;color:#fff}.suggest li.on small{color:#cdd8ff}
.tip{position:fixed;z-index:20;max-width:300px;background:var(--graphite);color:var(--sheet);padding:8px 10px;font-size:.8rem;line-height:1.4;pointer-events:none;box-shadow:0 6px 16px #0004}
.tip b{display:block;font:700 .68rem var(--mono);color:#ff9c7a;margin-bottom:2px}
.errbar{display:none;align-items:center;gap:8px;padding:8px 12px;background:#3a1810;color:#ffc8b8;font:500 .78rem var(--mono);border-top:1px solid #5a2a1c}
.errbar.on{display:flex}
.errbar button{color:#fff;text-decoration:underline;font:inherit}
.bar .left{display:flex;gap:4px;align-items:center}
.bar .confirm{color:#ffc8b8}
.helper{font:500 .8rem var(--mono);color:var(--lead);margin:0 0 8px;display:flex;gap:8px;align-items:baseline;min-height:1.4em}
.helper::before{content:"→";color:var(--ink)}
.helper.ok{color:var(--ok)}.helper.ok::before{content:"✓";color:var(--ok)}
.helper.bad{color:var(--pencil)}.helper.bad::before{content:"!";color:var(--pencil);font-weight:700}
.livebadge{font:500 .7rem var(--mono);color:var(--ok);display:inline-flex;gap:5px;align-items:center}
.livebadge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.livebadge.paused{color:var(--pencil)}.livebadge.paused::before{background:var(--pencil)}
.widths{display:inline-flex;border:1px solid var(--graphite);margin-left:6px}
.widths button{font:500 .72rem var(--mono);padding:5px 8px}
.widths button[aria-pressed="true"]{background:var(--graphite);color:var(--sheet)}
.frame.phone iframe{width:390px;max-width:100%;margin:0 auto;box-shadow:0 0 0 1px var(--graphite)}
.mtabs{display:none;border:1px solid var(--graphite);width:fit-content;margin-bottom:10px}
.mtabs button{padding:8px 16px;font-weight:700}
.mtabs button[aria-pressed="true"]{background:var(--graphite);color:var(--sheet)}
@media (max-width:760px){.mtabs{display:inline-flex}.board[data-show="code"] .specimen,.board[data-show="page"] .codecol{display:none}}
.notes li.placeholder::before{content:none}
.site-foot{display:grid;gap:10px}
.site-foot p{margin:0}
.more-sites{border:1px solid var(--graphite);background:var(--sheet);width:fit-content;max-width:100%}
.more-sites summary{cursor:pointer;list-style:none;padding:8px 12px;font:700 .78rem var(--mono);color:var(--graphite);display:flex;gap:8px;align-items:center}
.more-sites summary::-webkit-details-marker{display:none}
.more-sites summary::after{content:"+";color:var(--ink);font-weight:700}
.more-sites[open] summary::after{content:"–"}.more-sites[open]{width:100%}
.more-sites summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.more-sites ul{list-style:none;margin:0;padding:4px 12px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px 18px;border-top:1px solid var(--rule)}
.more-sites .ext{width:11px;height:11px;margin-left:6px;vertical-align:-1px;transition:transform .15s}.more-sites a:hover .ext{transform:translate(1px,-1px)}@media (prefers-reduced-motion:reduce){.more-sites .ext{transition:none}}
.more-sites a{display:block;padding:6px 0;font:500 .82rem var(--mono);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.more-sites a:hover{text-decoration:underline;text-underline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---- JS course ---- */
.jsframe iframe{background:#fff}
.page .specimen .console{margin-top:10px}
.console{border:1px solid var(--graphite);background:var(--code-bg);color:var(--code-fg);font:12.5px/1.55 var(--mono)}
.con-h{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid #2b3035}
.con-h b{font:700 .72rem var(--mono);color:#9aa2a8;letter-spacing:.06em;text-transform:uppercase}
.con-h .linkbtn{color:#8fb0ff;font-size:.74rem}
.con-body{max-height:180px;min-height:64px;overflow:auto;padding:6px 0}
.con-l{display:flex;gap:10px;padding:3px 10px;border-bottom:1px solid #22272c;white-space:pre-wrap;overflow-wrap:anywhere}
.con-l .lnk{color:#6f767c;font:inherit;min-width:2ch;text-align:right;flex:none;cursor:pointer;background:none;border:0;padding:0}
.con-l.lv-warn{color:#f2b94b;background:#f2b94b12}
.con-l.lv-error{color:#ffb4a2;background:#e0451f1f;display:block}
.con-l.lv-error b{color:#fff;display:block;margin-bottom:2px}.con-l.lv-error .lnk{color:#ffcfbf;text-decoration:underline}
.con-l.lv-error small{display:block;color:#a8786c;margin-top:2px}
.con-l.lv-empty{color:#6f767c;font-style:italic}
.gutter .stepline{color:#fff;background:var(--ink);box-shadow:none}
.stepbar{display:flex;gap:8px;align-items:center;margin:4px 0 12px}
.stepbar button{border:1px solid var(--graphite);padding:5px 10px;font:600 .8rem var(--mono);background:var(--sheet)}
.stepbar input{flex:1;min-width:80px;accent-color:var(--ink)}
.vars{border-collapse:collapse;font:500 .84rem var(--mono);min-width:min(100%,360px)}
.vars th{text-align:left;padding:5px 14px 5px 0;color:var(--ink);font-weight:700;vertical-align:top}
.vars td{padding:5px 0;overflow-wrap:anywhere}
.vars tr{border-bottom:1px solid var(--rule)}
.vars tr.chg{background:#f2b94b2e}
.ins-sub{margin:10px 0 4px;font:700 .72rem var(--mono);color:var(--lead);text-transform:uppercase;letter-spacing:.05em}
.evlist{list-style:none;margin:0;padding:0;display:grid;gap:4px;font:500 .82rem var(--mono)}
.evlist li{padding:5px 0;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.evlist li.none{color:var(--lead)}
.evlist code{color:var(--ink)}
.run.busy{opacity:.6}
@media (max-width:760px){.page .board .label{flex-wrap:wrap!important;white-space:normal!important;min-height:0!important;gap:6px}.ftabs{flex-wrap:wrap;max-width:100%}.ftabs button{padding:5px 7px;font-size:.7rem}.page .board .label .peel{flex-wrap:wrap}}
.propbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:6px 0 18px}
.propbar .search{flex:1 1 260px;margin:0}
.pcount{font:500 .76rem var(--mono);color:var(--lead)}
.props{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));border-top:1px solid var(--graphite)}
.prop{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);min-width:0}
.prop code{font:700 .9rem var(--mono);color:var(--ink);overflow-wrap:anywhere}
.prop p{margin:4px 0;font-size:.88rem;color:var(--graphite)}
.prop a{font:500 .76rem var(--mono);color:var(--ink)}
.psoon{font:500 .74rem var(--mono);color:var(--lead)}
.prop.s-rare code{color:var(--lead)}
article{grid-template-columns:minmax(0,1fr)}.taskmain{min-width:0}.task p,.hints li,.helper{overflow-wrap:anywhere}.mist .pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mist .pair>div,.mist>div{min-width:0}article pre,.mist pre{max-width:100%;overflow-x:auto}@media (max-width:620px){.mist .pair{grid-template-columns:minmax(0,1fr)}}article>*{min-width:0}.inl{overflow-wrap:anywhere}.page,.page>*{min-width:0}
/* ---- CSS course ---- */
.courses{display:flex;border:1px solid var(--graphite);margin-bottom:12px}
.courses a{flex:1;text-align:center;padding:8px 0;font:700 .82rem var(--mono);color:var(--graphite);text-decoration:none;border-left:1px solid var(--graphite)}
.courses a:first-child{border-left:0}
.courses a.on{background:var(--graphite);color:var(--sheet)}
.toc a.soon{color:var(--lead);cursor:default;opacity:.7}
.toc a.soon small{font:500 .64rem var(--mono);border:1px solid var(--rule);padding:0 4px;margin-left:4px}
.toc a.soon:hover span:last-child{text-decoration:none}
.ftabs{display:inline-flex;border:1px solid var(--graphite)}
.ftabs button{font:600 .74rem var(--mono);padding:5px 10px;color:var(--graphite)}
.ftabs button[aria-selected="true"]{background:var(--graphite);color:var(--sheet)}
.hl-prop{color:#f2b94b}.hl-val{color:#9fd69a}
.page .frame{position:relative}
.overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ov{position:absolute;box-sizing:border-box}
.ov span{position:absolute;top:-17px;left:-1px;font:700 10px/1 var(--mono);padding:2px 4px;white-space:nowrap}
.ov-margin{background:#f2b94b40;outline:1px dashed #b7791f}.ov-margin span{background:#b7791f;color:#fff}
.ov-border{background:#16191d26}
.ov-padding{background:#9fd69a66}.ov-padding span{background:#2f8f4e;color:#fff;top:2px;left:2px}
.ov-content{background:#1d3fbf2e;outline:1px solid #1d3fbf}
.ov-flex{outline:2px dashed #1d3fbf;outline-offset:-1px}.ov-flex span{background:#1d3fbf;color:#fff;top:auto;bottom:0;left:auto;right:0}.ov-margin span{top:0;left:0}
.ov-item{outline:1px solid #1d3fbf88;outline-offset:-1px}
.ov-track{background:#1d3fbf14;border-left:1px dashed #1d3fbf;border-right:1px dashed #1d3fbf}.ov-track span{top:2px;left:2px;background:none;color:#1d3fbf}
.ov-row{border-top:1px dashed #1d3fbf88}
.ov-pick{outline:2px solid #1d3fbf;outline-offset:2px}
.ov-changed{outline:2px solid #e0451f;outline-offset:2px;background:#e0451f14}
.ov-flash{position:absolute;inset:0;animation:pfFade 1.8s ease forwards}
@keyframes pfFade{0%,60%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ov-flash{animation:none}}
.inspector{margin:-10px 0 24px;border:1px solid var(--graphite);background:var(--sheet);padding:14px 16px}
.ins-h{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:10px}
.ins-h b{font:700 .9rem var(--mono);color:var(--ink)}.ins-h span{font:500 .76rem var(--mono);color:var(--lead)}
.ins-note{margin:8px 0 0;font-size:.82rem;color:var(--lead)}
.ins-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ins-list li{display:grid;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.ins-prop{font:600 .84rem var(--mono);color:var(--graphite)}
.ins-win{font:500 .8rem var(--mono);color:var(--ok)}.ins-lose{font:500 .8rem var(--mono);color:var(--lead)}.ins-lose s{color:var(--pencil)}
.ins-inh{font:500 .8rem var(--mono);color:var(--ink)}
.ins-win small,.ins-lose small{color:var(--lead);margin-left:6px}
.ins-box{font:500 .76rem var(--mono);text-align:center;max-width:460px}
.ins-box i{font-style:normal;font-weight:700;margin-left:6px}
.ib-m{background:#f2b94b40;border:1px dashed #b7791f;padding:6px 14px 14px}
.ib-b{background:#16191d1f;border:2px solid var(--graphite);padding:6px 14px 14px;margin-top:6px}
.ib-p{background:#9fd69a66;padding:6px 14px 14px;margin-top:6px}
.ib-c{background:#1d3fbf2e;border:1px solid #1d3fbf;padding:12px;margin-top:6px;font-weight:700}
.lenses button{font-size:.7rem}
@media (max-width:760px){.lenses button{padding:4px 6px}}
/* diagrams */
.dgfig{margin:0 0 10px;border:1px solid var(--graphite);background:var(--sheet);padding:16px;overflow-x:auto}
.dgfig figcaption{margin-top:10px;font-size:.88rem;color:var(--lead);max-width:70ch}
.dg{display:block;width:100%;min-width:520px;height:auto;color:var(--graphite);font-family:var(--mono)}
.dg-t{font:500 12px var(--mono);fill:currentColor}.dg-tb{font:700 12px var(--mono);fill:currentColor}.dg-s{font:500 10.5px var(--mono);fill:var(--lead)}.dg-inv{font:700 12px var(--mono);fill:var(--sheet)}
.dg-line{stroke:currentColor;stroke-width:1.5;fill:none}.dg-dash{stroke:currentColor;stroke-width:1.25;stroke-dasharray:4 3;fill:none}
.dg-ink-s{stroke:var(--ink);stroke-width:2;fill:none}.dg-red-s{stroke:var(--pencil);stroke-width:2;fill:none}
.dg-box{fill:var(--sheet);stroke:currentColor;stroke-width:1.5}.dg-ink{fill:var(--ink)}.dg-wash{fill:var(--ink-wash)}.dg-red{fill:var(--pencil)}
.dg-margin{fill:#f2b94b40;stroke:#b7791f;stroke-dasharray:4 3}.dg-border{fill:var(--graphite)}:root{--dg-pad:#d4ecce;--dg-mar:#f2b94b40}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--dg-pad:#22402b;--dg-mar:#f2b94b2e}}
:root[data-theme="dark"]{--dg-pad:#22402b;--dg-mar:#f2b94b2e}
.dg-padding{fill:var(--dg-pad);stroke:#2f8f4e}.dg-content{fill:var(--ink-wash);stroke:var(--ink)}
.dg-code{fill:#15181b}.dg-codet{font:500 12px var(--mono);fill:#e7e9e6}.dg-sel{fill:#8fb0ff}.dg-prop{fill:#f2b94b}.dg-val{fill:#9fd69a}
.dg-arrowhead{fill:currentColor}
.dg text{white-space:pre}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}.foot-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink-soft)}.foot-links a:hover{border-bottom-color:var(--ink)}
.page .sitepage{max-width:880px;display:block}
.page .sitepage section{margin:36px 0;padding:0;min-height:0}
.sitepage h2{font:800 1.45rem/1.2 var(--display);letter-spacing:.01em;color:var(--ink-deep);margin:0 0 12px;padding-top:14px;border-top:2px solid var(--ink-deep)}
.sitepage p,.sitepage li{font-size:1.02rem;line-height:1.68;max-width:72ch}
.sitepage a{color:var(--ink)}
.sp-hero{display:flex;gap:28px;align-items:center;padding:8px 0 26px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.sp-hero .lh1{margin:4px 0 10px}.sp-hero .lsum{font-size:1.15rem;line-height:1.6;max-width:62ch;margin:0}
.sp-finch{flex:none;width:120px}.sp-finch .finch{width:100%;height:auto;--finch-body:var(--sheet);--finch-wing:var(--ink)}
.sp-eyebrow{display:inline-block;font:700 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mid);border-bottom:2px solid var(--ink-soft);padding-bottom:2px}
.sp-updated{font:500 .78rem var(--mono);color:var(--lead);margin:10px 0 0}
.sp-map{border:1px solid var(--rule);background:var(--sheet);padding:12px 16px;margin:22px 0 0}
.sp-map b{font:700 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid)}
.sp-map ol{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 0;padding:0;list-style:none;counter-reset:m}
.sp-map li{counter-increment:m;font-size:.92rem}.sp-map li::before{content:counter(m,decimal-leading-zero) " ";font:600 .72rem var(--mono);color:var(--ink-soft)}
.sp-map a{text-decoration:none;border-bottom:1px solid var(--ink-soft)}
.sp-intro{margin-top:22px!important}
.sp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1.5px solid var(--graphite);background:var(--sheet)}
.sp-stats div{padding:16px 18px;border-left:1px solid var(--rule)}.sp-stats div:first-child{border-left:0}
.sp-stats dd{margin:0;font:900 2.4rem/1 var(--display);color:var(--ink)}.sp-stats dt{font:600 .74rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lead);margin-top:8px;order:2}
.sp-stats div{display:flex;flex-direction:column-reverse;justify-content:flex-end}
.sp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:6px 0 16px}
.sp-card{position:relative;display:block;background:var(--sheet);border:1.5px solid var(--graphite);border-top:4px solid var(--ink);padding:16px 18px;color:var(--graphite);text-decoration:none}
.sp-card h3{font:800 1.08rem/1.25 var(--display);margin:0 0 6px;color:var(--ink-deep)}.sp-card p{font-size:.95rem;line-height:1.55;margin:0}
.sp-card.is-link{transition:transform .15s ease,box-shadow .15s ease;padding-right:36px}.sp-card.is-link:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.sp-card.is-link:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.sp-card.is-link p{color:var(--graphite)}
.sp-go{position:absolute;right:14px;top:14px;font:700 1.1rem var(--mono);color:var(--ink)}
.sp-tag{display:inline-block;font:700 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:6px}
.sp-steps{list-style:none;margin:6px 0;padding:0;counter-reset:st;display:grid;gap:0;border-left:2px solid var(--ink-soft)}
.sp-steps li{counter-increment:st;position:relative;padding:10px 0 14px 46px;max-width:none}
.sp-steps li::before{content:counter(st);position:absolute;left:-15px;top:8px;width:28px;height:28px;background:var(--ink);color:var(--sheet);font:800 .9rem/28px var(--mono);text-align:center}
.sp-steps b{display:block;font:800 1.02rem var(--display);color:var(--ink-deep)}.sp-steps span{display:block;color:var(--graphite)}
.sp-tablewrap{overflow-x:auto;border:1.5px solid var(--graphite);background:var(--sheet)}
.sp-table{border-collapse:collapse;width:100%;font-size:.95rem}
.sp-table th,.sp-table td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--rule)}
.sp-table thead th{font:700 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);background:var(--sky)}
.sp-table tbody th{font-weight:700;color:var(--ink-deep)}.sp-table tr:last-child>*{border-bottom:0}
.sp-callout{border-left:4px solid var(--ink);background:var(--sky);padding:12px 16px;margin:14px 0}
.sp-faq{border-top:1px solid var(--rule)}
.sp-faq details{border-bottom:1px solid var(--rule)}
.sp-faq summary{cursor:pointer;list-style:none;padding:14px 32px 14px 0;font:700 1.02rem var(--body);color:var(--ink-deep);position:relative}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";position:absolute;right:4px;top:10px;font:700 1.3rem var(--mono);color:var(--ink)}
.sp-faq details[open] summary::after{content:"−"}
.sp-faq details p{margin:0 0 14px}
.sp-mail{border:1.5px solid var(--graphite);border-top:4px solid var(--ink);background:var(--sheet);padding:18px 22px;margin:4px 0 14px}
.sp-mailaddr{margin:6px 0 0;font:800 clamp(1.4rem,4vw,2.2rem)/1.2 var(--display)}.sp-mailaddr a{text-decoration:none;border-bottom:3px solid var(--ink-soft)}
.sitemap{max-width:none}
.page .sitemap{max-width:none}
.sm-jump{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:22px 0 8px}
.sm-jump a{display:block;border:1.5px solid var(--graphite);border-top:4px solid var(--ink);background:var(--sheet);padding:10px 12px;text-decoration:none;color:var(--graphite)}
.sm-jump a:hover{box-shadow:3px 3px 0 var(--ink)}.sm-jump b{display:block;font:800 1rem var(--display);color:var(--ink-deep)}.sm-jump span{font:500 .74rem var(--mono);color:var(--lead)}
.sm-head p{margin:0 0 8px;color:var(--lead);font-size:.95rem}
.sm-head h2 a{text-decoration:none;color:inherit}
.sm-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 28px}
.sm-group h3{font:700 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);margin:14px 0 6px}
.sm-group ol,.sm-group ul{margin:0;padding-left:1.4em}.sm-group li{font-size:.95rem;margin:3px 0;line-height:1.45}
@media (max-width:760px){.sp-hero{flex-direction:column;align-items:flex-start;gap:12px}.sp-finch{width:80px}.sp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-stats div:nth-child(3){border-left:0}.sp-stats div:nth-child(n+3){border-top:1px solid var(--rule)}.sp-stats dd{font-size:2rem}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dg-code{stroke:#3a434c;stroke-width:1}}
:root[data-theme="dark"] .dg-code{stroke:#3a434c;stroke-width:1}
.dgfig .dgi{display:block;width:100%;min-width:600px;max-width:960px;height:auto;margin:0}
.dgfig .dgi-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dgfig .dgi-l{display:none}:root:not([data-theme="light"]) .dgfig .dgi-d{display:block}}
:root[data-theme="dark"] .dgfig .dgi-l{display:none}:root[data-theme="dark"] .dgfig .dgi-d{display:block}

/* Finch */
.brand{text-decoration:none;color:var(--graphite)}
.brand .finch{width:40px;height:auto;align-self:center;--finch-body:var(--sheet);--finch-wing:var(--ink)}
.brand:hover{color:var(--ink)}
.finch{--finch-body:var(--sheet);--finch-wing:var(--ink);color:var(--graphite);display:block}
.finchsays{display:flex;gap:12px;align-items:center;margin:0 0 12px}
.favatar{width:46px;flex:none}
.finchsays .helper{margin:0;position:relative;background:var(--sheet);border:1.5px solid var(--graphite);padding:8px 12px;font-size:.84rem}
.finchsays .helper::before{content:"";position:absolute;left:-8px;top:50%;width:12px;height:12px;background:var(--sheet);border-left:1.5px solid var(--graphite);border-bottom:1.5px solid var(--graphite);transform:translateY(-50%) rotate(45deg);color:transparent}
.finchsays .helper.ok{border-color:var(--ok)}.finchsays .helper.ok::before{border-color:var(--ok)}
.finchsays .helper.bad{border-color:var(--pencil)}.finchsays .helper.bad::before{border-color:var(--pencil)}
.coachfinch{display:block;width:84px;margin-bottom:8px}
.coach .sub{font:500 .74rem var(--mono);color:var(--lead);margin-top:6px}
.gfinch{display:block;width:44px;margin:-4px 0 6px}
@media (max-width:760px){.brand .finch{width:32px}.favatar{width:38px}.coachfinch{width:64px}}
/* ---- clarity pass ---- */
.lessonhead{margin-bottom:14px}
.lh1{margin:2px 0 4px;font:900 clamp(1.9rem,3.6vw,2.9rem)/.95 var(--display);font-stretch:72%;text-transform:uppercase;text-wrap:balance}
.lsum{margin:0;color:var(--lead);max-width:70ch;font-size:.95rem}
.coversline{margin:0;font-size:.9rem;color:var(--lead)}
.coversline b{font:700 .74rem var(--mono);color:var(--graphite);text-transform:uppercase;letter-spacing:.04em;margin-right:6px}
.task{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:12px 0;margin-bottom:10px}
.task .tasklabel{display:block;font:700 .7rem var(--mono);color:var(--ink);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.task .no::before{content:none}
.task .why{font:500 .78rem var(--mono);color:var(--lead)}
.task .why:empty{display:none}
.taskside{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.task .hints{grid-column:auto;margin-top:8px}
.modebar{margin:0}
.modebar button{padding:6px 12px;font-size:.8rem}
.helper{margin:0 0 10px;font-size:.84rem}
.page .stack{min-height:360px}
.toggle button,.widths button{font-size:.7rem;padding:4px 8px}
.widths{opacity:.75}
.nextcta{margin:-8px 0 26px;padding:14px 16px;border:2px solid var(--ok);background:var(--sheet);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.cta-msg{font:700 .86rem var(--mono);color:var(--ok)}
.cta-main{background:var(--ink);color:#fff;text-decoration:none;font-weight:700;padding:10px 16px}
.cta-main:hover{background:var(--graphite)}
.cta-alt{font:600 .84rem var(--body);color:var(--ink);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer}
.guide-on{position:relative;z-index:31;box-shadow:0 0 0 4px var(--ink),0 0 0 9999px #0b0f1a8c!important}
.guide{position:fixed;z-index:40;background:var(--sheet);color:var(--graphite);border:2px solid var(--ink);padding:14px 16px;box-shadow:0 12px 28px #0006}
.guide b{display:block;font:700 .76rem var(--mono);color:var(--ink);text-transform:uppercase;letter-spacing:.05em}
.guide p{margin:6px 0 12px;font-size:.95rem;line-height:1.45}
.guide div{display:flex;justify-content:space-between;gap:10px}
.guide button{font:600 .82rem var(--body);padding:8px 12px;cursor:pointer;border:0}
.guide .g-next{background:var(--ink);color:#fff}
.guide .g-skip{background:none;color:var(--lead);text-decoration:underline}
.pastebtn .short{display:none}
@media (max-width:760px),(pointer:coarse){#kbd{display:none}}
.vol{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
#progress{white-space:nowrap}
@media (max-width:760px){
  .mast{align-items:center}
  .brand{font-size:1.1rem}.tagline{display:none}
  .pastebtn{padding:7px 10px;margin:0}.pastebtn .long{display:none}.pastebtn .short{display:inline}
  .menuBtn{padding:6px 10px}
  #progress{display:none}
  .lh1{font-size:1.9rem}
  .lsum{font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .task{grid-template-columns:auto minmax(0,1fr)}
  .taskside{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .widths{display:none}
  .page .codecol .bar{position:sticky;bottom:0;z-index:3;background:var(--code-bg)}
  .page .stack{min-height:300px}
  .nextcta{flex-direction:column;align-items:stretch}.cta-main{text-align:center}
}
.pastebtn{font:700 .8rem var(--mono);color:#fff;background:var(--ink);padding:8px 12px;text-decoration:none;margin-right:10px}
.pastebtn:hover{background:var(--graphite)}
.ownbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.ownnote{font:500 .76rem var(--mono);color:var(--lead)}
.health,.explain{margin-top:34px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;border-top:2px solid var(--graphite);padding-top:16px}
.health h2,.explain h2{margin:0;font:900 1.6rem/.95 var(--display);font-stretch:70%;text-transform:uppercase}
.health .sub,.explain .sub{font:500 .74rem var(--mono);color:var(--lead);margin-top:6px}
.issues{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.issues li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.issues .sev{font:700 .7rem var(--mono);text-transform:uppercase;padding-top:3px}
.issues li.s-bad .sev{color:var(--pencil)}.issues li.s-warn .sev{color:#b7791f}.issues li.s-tip .sev{color:var(--ink)}[hidden]{display:none!important}
.issues p{margin:4px 0;color:var(--lead);max-width:68ch;font-size:.92rem}
.issues a,.part a{font:500 .76rem var(--mono);color:var(--ink)}
.lineBtn{font:600 .72rem var(--mono);color:var(--ink);border:1px solid var(--ink);padding:1px 6px;margin-left:6px}
.clean{margin:0;color:var(--ok);font-weight:700}
.parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0;border-top:1px solid var(--rule)}
.part{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule)}
.part p{margin:4px 0;font-size:.88rem;color:var(--lead)}
.tagBtn{display:inline-flex;gap:6px;align-items:baseline}.tagBtn code{font:700 .9rem var(--mono);color:var(--ink)}.tagBtn small{font:500 .72rem var(--mono);color:var(--lead)}
.tagBtn:hover code{text-decoration:underline}
@media (max-width:980px){.health,.explain{grid-template-columns:1fr;gap:12px}}
/* even columns */
.page .board{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.page .board>div{display:flex;flex-direction:column;min-width:0}
.page .board .label{min-height:34px;align-items:center;margin-bottom:8px;flex-wrap:nowrap;white-space:nowrap}
.page .board .label .peel{flex-wrap:nowrap;gap:8px}
.page .source{flex:1;display:flex!important;flex-direction:column}
.page .source .ed{flex:1;display:grid}
.page .stack{height:auto;min-height:440px;resize:none}
.page .frame{flex:1;display:flex;padding:0;background:#fff}
.page .frame iframe{flex:1;height:auto;min-height:0}
.page .frame.phone{justify-content:center;background:var(--faint)}
.page .frame.phone iframe{flex:0 0 390px}
.caption{margin:8px 0 0;font:500 .74rem var(--mono);color:var(--lead)}
.page .board .specimen{position:relative}.page .board .caption{position:absolute;left:0;top:100%}.page .board{margin-bottom:22px}
@media (max-width:1280px){.page .board{grid-template-columns:1fr}}
@media (max-width:980px){.site{grid-template-columns:1fr;gap:16px}.toc{position:static;max-height:none;display:none;border:1px solid var(--graphite);background:var(--sheet);padding:12px}.toc.open{display:block}.menuBtn{display:inline-block}}
@media (max-width:620px){.mist .pair{grid-template-columns:1fr}}

/* ---- v2.2 ---- */
.promise{margin:10px 0 0;padding:8px 12px;border-left:3px solid var(--ink);background:var(--ink-wash);font:600 .92rem/1.45 var(--body);color:var(--graphite);max-width:62ch}
.ldots{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:12px;font:500 .74rem var(--mono);color:var(--lead)}
.ldots .ld-g{margin-right:4px}
.ld{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--lead);background:transparent;display:inline-block}
.ld.done{background:var(--ok);border-color:var(--ok)}
.ld.cur{border:2px solid var(--ink);box-shadow:0 0 0 2px var(--ink-wash);background:var(--sheet);width:13px;height:13px}
.ld.cur.done{background:var(--ok)}
.ld:hover{border-color:var(--ink)}
.ldots .ld-n{margin-left:4px}
.goalbtn{display:block;margin-top:6px}@media (max-width:760px){.taskside{flex-wrap:wrap}.goalbtn{display:inline-block;margin-top:0}}
.goalbtn[aria-pressed="true"]{color:var(--pencil)}
.frame.goalview{outline:3px dashed var(--ok);outline-offset:-3px}
.scriptnote{margin:8px 0 0;padding:8px 12px;border:1.5px solid var(--graphite);background:var(--sheet);font-size:.84rem}
.scriptnote code{font-family:var(--mono);font-size:.8rem}
.helper .undo{font:700 .78rem var(--mono);color:var(--ink);border:1.5px solid var(--ink);padding:1px 8px;background:var(--sheet)}
.nextcta:has(.donecard){display:block;padding:0;border:0;background:none;margin:22px 0 30px}
.donecard{border:2px solid var(--ok);background:var(--sheet);padding:16px 18px;box-shadow:6px 6px 0 var(--ok)}
.dc-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1.5px solid var(--graphite);padding-bottom:8px;margin-bottom:10px}
.dc-h b{font:900 1.15rem/1 var(--display);font-stretch:125%;text-transform:uppercase;letter-spacing:.02em;color:var(--ok)}
.dc-h span{font:700 .86rem var(--mono);color:var(--lead)}
.dc-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px;font:600 .9rem var(--mono);color:var(--lead)}
.dc-list .ok{color:var(--ok)}
.dc-learn{margin:0 0 10px;font-size:.9rem;color:var(--lead)}.dc-learn b{color:var(--graphite);margin-right:6px}
.dc-warn{margin:0 0 12px;padding:8px 12px;border-left:3px solid var(--pencil);background:var(--pencil-wash);font-size:.88rem}
.dc-act{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
@media (max-width:760px){.dc-act{flex-direction:column;align-items:stretch}.dc-act .cta-main{text-align:center}.donecard{box-shadow:4px 4px 0 var(--ok)}}
/* home */
body.is-home .site{grid-template-columns:minmax(0,1fr)}
body.is-home .toc,body.is-home .menuBtn{display:none!important}
.hero{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;align-items:center;padding:28px 0 30px;border-bottom:2px solid var(--graphite)}
.hero-finch svg{width:100%;height:auto;color:var(--ink)}
.hero-h{font:900 clamp(2.1rem,5.4vw,3.8rem)/1.02 var(--display);font-stretch:125%;letter-spacing:-.015em;margin:0 0 14px}
.hero-p{font-size:1.08rem;max-width:58ch;margin:0 0 12px;color:var(--graphite)}
.hero-act{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:18px}
.hero-act .cta-main{font-size:1rem;padding:12px 20px}
.welcome{margin:22px 0 0;padding:12px 16px;background:var(--sheet);border:1.5px solid var(--graphite);font-size:.95rem}
.welcome .muted{display:block;margin-top:4px;color:var(--lead);font-size:.88rem}
.welcome a{color:var(--ink)}.welcome i{font:500 .74rem var(--mono);color:var(--pencil);font-style:normal}
.courses-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0}
.course-card{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--sheet);border:1.5px solid var(--graphite);color:var(--graphite);text-decoration:none;transition:transform .12s,box-shadow .12s}
.course-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.course-card h2{font:900 1.6rem/1 var(--display);font-stretch:125%;margin:2px 0 4px}
.course-card p{margin:0;font-size:.92rem}
.course-card .cc-lens{color:var(--lead);font-size:.85rem}
.cc-n{font:700 .74rem var(--mono);color:var(--ink)}
.cc-bar{height:6px;background:var(--faint);margin-top:auto;border:1px solid var(--rule)}
.cc-bar i{display:block;height:100%;background:var(--ok)}
.cc-meta{font:600 .8rem var(--mono);color:var(--ink)}
.how{margin:8px 0 28px}
.how-list{list-style:none;counter-reset:hw;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1.5px solid var(--graphite)}
.how-list li{counter-increment:hw;padding:14px 16px 4px 0;border-right:1px solid var(--rule);margin-right:16px}
.how-list li:last-child{border-right:0}
.how-list li::before{content:"0" counter(hw);display:block;font:700 .74rem var(--mono);color:var(--pencil);margin-bottom:4px}
.how-list b{display:block;margin-bottom:4px}.how-list span{font-size:.88rem;color:var(--lead)}
.extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:18px}
.extras a{padding:12px 14px;border:1px solid var(--rule);background:var(--sheet);text-decoration:none;color:var(--graphite)}
.extras a:hover{border-color:var(--ink)}
.extras b{display:block;color:var(--ink);margin-bottom:2px}.extras span{font-size:.84rem;color:var(--lead)}
.home-note{font-size:.88rem;color:var(--lead)}
@media (max-width:900px){.courses-grid,.extras{grid-template-columns:minmax(0,1fr)}.how-list{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:110px minmax(0,1fr);gap:18px}}
@media (max-width:560px){.hero{grid-template-columns:minmax(0,1fr)}.hero-finch{width:96px}.how-list{grid-template-columns:minmax(0,1fr)}.how-list li{border-right:0;margin-right:0;border-bottom:1px solid var(--rule)}.hero-act{flex-direction:column;align-items:stretch}.hero-act .cta-main{text-align:center}}

/* ---- v2.3 ---- */
.fixcard{position:fixed;inset:0;z-index:60;background:#0b0f1aa6;display:grid;place-items:center;padding:16px}
.fc-in{background:var(--sheet);border:2px solid var(--graphite);padding:16px;max-width:720px;width:100%;box-shadow:8px 8px 0 var(--ok)}
.fc-in img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.fc-act{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:14px}
.fc-note{margin:10px 0 0;font-size:.82rem;color:var(--lead)}
body.is-play .site{grid-template-columns:minmax(0,1fr)}
body.is-play .toc,body.is-play .menuBtn{display:none!important}
.playbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 0 12px;margin-bottom:12px;border-bottom:1px solid var(--rule);font:500 .84rem var(--mono)}
.playbar select{font:inherit;padding:4px 6px;border:1.5px solid var(--graphite);background:var(--sheet);color:var(--graphite);margin-left:6px}
.playbar .sp{flex:1}
.page .board.playboard{margin-bottom:22px}@media (min-width:981px){.page .board.playboard{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.playboard .frame iframe{height:400px}
.playtips{margin-top:26px;max-width:760px}.playtips .muted{color:var(--lead);font-size:.86rem}.playtips code{font-family:var(--mono);font-size:.82rem}
@media (max-width:760px){.playbar .sp{display:none}}

/* ---- v2.5 workspace design ---- */
.lh1{font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:.92;margin-bottom:8px}
.lsum{font-size:1.02rem;line-height:1.55}
.label{opacity:.85}
article{max-width:720px;border-top:1px solid var(--rule);padding-top:20px;gap:38px}
article p{font-size:1.02rem;line-height:1.78}
article section h2{font-size:1.6rem}
/* the learner page sits in a small browser */
.frame.inbrowser::before,.frame.inbrowser::after{display:none}
.browserbar{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;background:var(--faint);border:1px solid var(--graphite);border-bottom:0;font:500 .72rem var(--mono);color:var(--lead);min-width:0}
.bdots{display:flex;gap:5px;flex:none}.bdots i{width:9px;height:9px;border-radius:50%;background:var(--pencil)}.bdots i:nth-child(2){background:#f2b94b}.bdots i:nth-child(3){background:var(--ok)}
.baddr{flex:1;min-width:0;max-width:280px;background:var(--sheet);border:1px solid var(--rule);border-radius:0;padding:1px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--graphite)}
.bnote{margin-left:auto;white-space:nowrap}
@media (max-width:420px){.bnote{display:none}}
/* Break It mode */
.breakbanner{display:none}
body.is-break .task{border-top:3px solid var(--pencil);background:var(--pencil-wash);padding-inline:14px}
body.is-break .breakbanner{display:block;grid-column:1/-1;margin:0;font:500 .9rem/1.4 var(--body);color:var(--graphite)}
body.is-break .breakbanner b{display:inline-block;margin-right:8px;padding:1px 8px;background:var(--pencil);color:#fff;font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;vertical-align:1px}
body.is-break #stepNo{color:var(--pencil);font-size:2.1rem}
body.is-break .source{box-shadow:0 0 0 3px var(--pencil)}
body.is-break .tasklabel{color:var(--pencil)}
/* workbench */
.wbbtn{display:block;margin-top:6px}
body.workbench .mast,body.workbench .toc,body.workbench .lessonhead,body.workbench .playhead,body.workbench article,body.workbench .notes,body.workbench .coach,body.workbench .site-foot,body.workbench .playtips,body.workbench .inspector:empty{display:none!important}
body.workbench .wrap{max-width:none;padding-block:10px 16px}
body.workbench .site{grid-template-columns:minmax(0,1fr)!important;margin-top:0}
body.workbench .task{margin-bottom:8px;padding:8px 0}
body.workbench .page .board{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;margin-bottom:10px}
body.workbench .stack{height:calc(100vh - 330px);min-height:300px}
body.workbench .playboard .frame iframe{height:calc(100vh - 380px)}
body.workbench .wbbtn{color:var(--pencil)}
@media (max-width:980px){.wbbtn{display:none!important}}
/* slim lesson rail */
.toc-rail,.tocmin{display:none}
@media (min-width:981px){
  .tocmin{display:block;font:500 .74rem var(--mono);color:var(--lead);margin:0 0 12px;padding:0}.tocmin:hover{color:var(--ink)}
  body.rail .site{grid-template-columns:64px minmax(0,1fr);gap:28px}
  body.rail .toc>:not(.toc-rail){display:none}
  body.rail .toc{overflow:visible;padding-right:0}
  body.rail .toc-rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;border:1.5px solid var(--graphite);background:var(--sheet);font:500 .72rem var(--mono);color:var(--lead);text-align:center}
  .toc-rail b{font:800 .78rem var(--display);color:var(--graphite);text-transform:uppercase}
  .rail-open{font-size:1.1rem;padding:2px 10px}.rail-open:hover{color:var(--ink)}
  .rail-n{font:900 1.5rem/1 var(--display);color:var(--ink)}.rail-of{margin-top:-4px}
  .rail-bar{width:6px;height:70px;background:var(--faint);border:1px solid var(--rule);display:flex;align-items:flex-end;margin:4px 0}.rail-bar i{display:block;width:100%;background:var(--ok)}
  .rail-d{font-size:.66rem;line-height:1.2;padding:0 4px}
}
/* phones: Learn / Code / Result and an action bar that never scrolls away */
.mtabs button.dot::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pencil);margin-left:6px;vertical-align:2px}
.mobibar{display:none}
@media (max-width:760px){
  .mobibar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--sheet);border-top:2px solid var(--graphite)}
  .mobibar button{flex:1;padding:11px 6px;font:600 .86rem var(--body);border:1.5px solid var(--graphite);background:var(--sheet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobibar .mb-run{flex:1.6;background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
  body.is-break .mobibar .mb-run{background:var(--pencil);border-color:var(--pencil)}
  body.has-mobibar{padding-bottom:72px}
  .mtabs{position:sticky;top:0;z-index:30;background:var(--paper);width:100%;display:flex}.mtabs button{flex:1}
}

/* ---- v2.6 blue family (flat, printed-blueprint, no gradients) ---- */
.lh1,.hero-h{color:var(--ink-deep)}
.crumb{color:var(--ink-mid)}
.cta-main:hover{background:var(--ink-deep)}
.promise{background:var(--sky);border-left-color:var(--ink)}
.browserbar{background:var(--sky);border-color:var(--graphite)}.baddr{border-color:var(--sky-2)}
.welcome{border-left:5px solid var(--ink)}
.course-card{border-top:6px solid var(--ink-deep)}
.course-card:nth-child(2){border-top-color:var(--ink)}
.course-card:nth-child(3){border-top-color:var(--ink-mid)}
.course-card:hover{box-shadow:5px 5px 0 var(--sky-2),5px 5px 0 1.5px var(--ink)}
.how-list li::before{content:"";width:12px;height:12px;background:var(--ink-mid);margin-bottom:8px}
.how-list li:nth-child(2)::before{background:var(--ink)}
.how-list li:nth-child(3)::before{background:var(--ink-deep)}
.how-list li:nth-child(4)::before{background:var(--pencil)}
.extras a:hover{background:var(--sky);border-color:var(--ink)}
.toc a:hover{background:var(--sky)}
.toc h4{color:var(--ink-mid)}
.mtabs button[aria-pressed="true"]{background:var(--ink-deep);color:#fff}
.ld{border-color:var(--ink-soft)}
.task .no:empty{min-width:0}
.rail-n{color:var(--ink-deep)}
.toc-rail{background:var(--sky)}
.hero{border-bottom-color:var(--ink-deep)}

.toc .courses a{display:flex!important;justify-content:center;align-items:center;text-align:center;padding:9px 0!important;margin:0!important;grid-template-columns:none}
.toc .courses a.on{background:var(--ink-deep);color:#fff}
.toc .courses a:not(.on):hover{background:var(--sky)}

/* ---- v2.7 home layout ---- */
.home-sec{margin:44px 0 0}
.home-sec>.blockh{color:var(--ink-deep);border-bottom:2px solid var(--ink-deep);padding-bottom:8px;margin-bottom:18px}
.hero-back{margin:16px 0 0;font-size:.92rem;color:var(--lead)}.hero-back a{color:var(--ink)}.hero-back i{font:500 .74rem var(--mono);color:var(--pencil);font-style:normal}
.hero .promise{margin-top:18px}
.courses-grid{margin:0}
.course-card h3{font:900 1.6rem/1 var(--display);font-stretch:125%;margin:2px 0 6px;color:var(--ink-deep)}
.tryit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch;border-top:0}
.tryit .blockh{grid-column:1/-1}
.try-txt{grid-column:auto}
.try-txt p{margin:0 0 10px;font-size:.98rem}
.try-txt code{font:500 .86rem var(--mono);background:var(--sky);padding:0 4px}
.try-msg{font-weight:600}.try-msg.ok{color:var(--ok)}.try-msg.ok a{color:var(--ink)}.try-msg.bad{color:var(--pencil)}
.try-ed textarea{width:100%;height:100%;min-height:190px;resize:vertical;background:var(--code-bg);color:var(--code-fg);caret-color:#fff;border:1.5px solid var(--graphite);padding:14px;font:13.5px/1.7 var(--mono);tab-size:2}
.try-ed textarea:focus-visible{outline:3px solid var(--ink-mid);outline-offset:2px}
.try-pv{display:flex;flex-direction:column;min-height:190px}
.try-pv iframe{flex:1;width:100%;border:1px solid var(--graphite);background:#fff}
.how-list li::before{display:none!important;content:none}
.how-list svg{display:block;width:48px;height:36px;color:var(--ink);margin-bottom:10px}
.how-list li:nth-child(2) svg{color:var(--ink-mid)}.how-list li:nth-child(3) svg{color:var(--ink-deep)}.how-list li.brk svg{color:var(--pencil)}
.build-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:18px}
.play-card{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--ink-deep);color:#fff;text-decoration:none;border:1.5px solid var(--ink-deep)}
.play-card h3{font:900 1.6rem/1 var(--display);font-stretch:125%;margin:0}.play-card p{margin:0;color:#dbe3fb}.play-card .cc-meta{color:#fff;margin-top:auto}
.play-card:hover{background:var(--ink)}
.proj{border:1.5px solid var(--graphite);background:var(--sheet);padding:16px 18px}
.proj-h{margin:0 0 10px;font-weight:700}
.proj ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.proj li a{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--rule);color:var(--graphite);text-decoration:none}
.proj li a:hover{color:var(--ink)}
.proj small{font:600 .7rem var(--mono);color:var(--ink-mid);min-width:78px;text-transform:uppercase}
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:44px 0 10px;border-top:1px solid var(--rule)}
.tools a{padding:12px 14px 12px 0;color:var(--lead);text-decoration:none;font-size:.86rem;border-right:1px solid var(--rule);margin-right:14px}
.tools a:last-child{border-right:0}.tools b{display:block;color:var(--ink);font-weight:700}
.tools a:hover b{text-decoration:underline}
@media (max-width:900px){.tryit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.try-txt{grid-column:1/-1}.build-grid{grid-template-columns:minmax(0,1fr)}.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tryit{grid-template-columns:minmax(0,1fr)}.proj ul{grid-template-columns:minmax(0,1fr)}.tools{grid-template-columns:minmax(0,1fr)}.tools a{border-right:0;margin-right:0;border-bottom:1px solid var(--rule)}}
.how .how-list{border-top:0}

/* ---- v2.7 lesson menu ---- */
.toc-top{display:flex;gap:8px;align-items:stretch;margin-bottom:12px}
.toc-top .courses{flex:1;margin:0}
.toc .tocmin{flex:none;width:38px;margin:0!important;border:1px solid var(--graphite);background:var(--sheet);font:700 1rem var(--mono);color:var(--ink-deep);padding:0!important}
.toc .tocmin:hover{background:var(--sky)}
.toc-prog{display:grid;gap:6px;margin:0 0 12px;font:500 .74rem var(--mono);color:var(--lead)}
.toc-prog b{color:var(--ink-deep)}
.tp-bar{display:block;height:5px;background:var(--sky-2)}.tp-bar i{display:block;height:100%;background:var(--ok)}
.toc details.tg{border-top:1px solid var(--rule)}
.toc details.tg summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:10px 2px 8px;cursor:pointer;font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mid)}
.toc details.tg summary::-webkit-details-marker{display:none}
.toc details.tg summary::after{content:"+";font:500 .9rem var(--mono);color:var(--lead);margin-left:8px}
.toc details.tg[open] summary::after{content:"−"}
.toc details.tg summary small{margin-left:auto;font:500 .7rem var(--mono);color:var(--lead);letter-spacing:0}
.toc details.tg.cur summary{color:var(--ink-deep)}
.toc details.tg summary:hover{color:var(--ink)}
.toc details.tg[open]{padding-bottom:8px}
.toc details a{display:grid;grid-template-columns:20px 1fr;align-items:center;padding:6px 6px 6px 4px;border-left:3px solid transparent;font-size:.88rem;line-height:1.3;color:var(--graphite);text-decoration:none}
.toc details a .st{width:9px;height:9px;border:1.5px solid var(--ink-soft);display:block;margin:0;font-size:0}
.toc details a.done .st{background:var(--ok);border-color:var(--ok)}
.toc details a.done .st::after{content:none!important}
.toc details a.on{background:var(--sky);border-left-color:var(--ink-deep);color:var(--ink-deep);font-weight:700}
.toc details a.on .st{background:var(--ink-deep);border-color:var(--ink-deep)}
.toc details a:hover{background:var(--sky)}
.toc-tools{border-top:1px solid var(--rule);margin-top:4px;padding-top:4px}
.toc-tools h4{margin:10px 0 4px}
.toc-tools a{display:block!important;padding:5px 4px!important;font-size:.84rem!important;color:var(--ink)!important}
.toc-tools a.on{font-weight:700}
@media (max-width:980px){.toc .tocmin{display:none}}
.toc-tools a span{font:600 .86rem/1.4 var(--body)!important;color:var(--ink)!important}

/* ---- v2.8 in-text links ---- */
article a.tl{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--ink-soft)}
article a.tl:hover{text-decoration-color:var(--ink);background:var(--sky)}
article a.tl code{color:inherit}
.next a.nx-proj{border-color:var(--ink-deep);background:var(--sky)}
.next a.nx-x small{color:var(--ink-mid)}
.toc>ul{list-style:none;padding:0;margin:0 0 8px}.toc>ul a{display:block;padding:4px 0}
.crumb a{color:inherit}
.ref-static{columns:2;font-size:.86rem}

/* ---- breadcrumbs ---- */
.crumbs{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0 0 10px;font:500 .76rem/1.5 var(--mono)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;min-width:0}
.crumbs li{display:flex;align-items:baseline;min-width:0}
.crumbs li+li::before{content:"";width:6px;height:6px;border-top:1.5px solid var(--ink-soft);border-right:1.5px solid var(--ink-soft);transform:rotate(45deg);margin:0 10px 1px 7px;flex:none;align-self:center}
.crumbs a{color:var(--ink-mid);text-decoration:none;padding:2px 0;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--ink-deep);border-bottom-color:var(--ink-soft)}
.crumbs [aria-current]{color:var(--graphite);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.crumb-note{color:var(--lead);padding:1px 8px;border-left:3px solid var(--ink-soft);background:var(--sky)}
@media (max-width:560px){.crumbs [aria-current]{max-width:22ch}.crumb-note{display:none}}

/* ---- v2.9 calmer lesson screen ---- */
.lessonhead .crumbs{margin-bottom:12px}
.crumbs .ldots{margin:0}
.lsum{max-width:62ch;color:var(--graphite);font-size:1.06rem}
.modebar{display:none}
body.can-break .modebar{display:flex}
.taskside{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.wbbtn{margin-left:auto;font:600 .72rem var(--mono);color:var(--ink-mid);border:1px solid var(--sky-2);background:var(--sheet);padding:3px 8px}
.wbbtn:hover{border-color:var(--ink);color:var(--ink-deep)}
.codecol .label{align-items:center}
.codecol .label .livebadge{margin-left:8px}
.goal-in{font:600 .72rem var(--mono)!important;color:var(--ink)!important;border:1px solid var(--sky-2);background:var(--sheet);padding:3px 8px!important;margin:0 0 0 8px!important;text-decoration:none!important}
.goal-in[aria-pressed="true"]{background:var(--ink-deep);color:#fff!important;border-color:var(--ink-deep)}
.page .board .caption{display:none}
.notes:has(#notes li.placeholder){display:none}
.askfinch{display:block;width:100%;text-align:left;margin:4px 0 26px;padding:12px 16px;border:1.5px dashed var(--ink-soft);background:var(--sheet);color:var(--ink-deep);font:500 .92rem var(--body)}
.askfinch b{font-weight:700;margin-right:4px}.askfinch:hover{border-style:solid;border-color:var(--ink);background:var(--sky)}
.askfinch[aria-expanded="true"] span{display:inline-block;transform:rotate(90deg)}
.coach{display:none!important}.coach.open{display:grid!important}
.inlesson{border:1.5px solid var(--graphite);background:var(--sheet);padding:16px 18px;margin-top:6px}
.il-h{display:block;font:700 .74rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mid);margin-bottom:8px}
.inlesson ol{margin:0 0 10px;padding-left:22px;display:grid;gap:4px}
.inlesson ol a{color:var(--ink);text-decoration:none}.inlesson ol a:hover{text-decoration:underline}
.inlesson li.il-deep{list-style:none;margin-left:-22px;margin-top:4px}.inlesson li.il-deep a{color:var(--lead);font:500 .8rem var(--mono)}
.inlesson .coversline{margin:0;padding-top:10px;border-top:1px solid var(--rule);font-size:.84rem}
.takeaways{border-left:5px solid var(--ink);background:var(--sky);padding:16px 20px}
.takeaways .blockh{color:var(--ink-deep);margin-bottom:8px}
.takeaways ul{margin:0;padding-left:20px;display:grid;gap:6px;line-height:1.6}
.mist-plain{margin:6px 0 14px;padding:12px 14px;background:var(--faint);border:1px solid var(--rule);font-size:.92rem;line-height:1.5}
details.deeper{border-top:2px solid var(--graphite);padding-top:4px}
details.deeper>summary{list-style:none;cursor:pointer;display:grid;gap:4px;padding:14px 0}
details.deeper>summary::-webkit-details-marker{display:none}
.dp-h{font:900 1.6rem/.95 var(--display);font-stretch:70%;text-transform:uppercase;color:var(--ink-deep)}
.dp-h::after{content:" +";color:var(--ink-mid)}details.deeper[open] .dp-h::after{content:" −"}
.dp-s{font-size:.88rem;color:var(--lead)}
details.deeper[open]>summary{margin-bottom:18px}
details.deeper>section{margin-bottom:30px}
.dc-quiz{margin:0 0 12px;border:1px solid var(--sky-2);background:var(--sky);padding:10px 14px}
.dc-quiz summary{cursor:pointer;font-size:.94rem}.dc-quiz summary b{font:700 .72rem var(--mono);text-transform:uppercase;color:var(--ink-mid);margin-right:8px}
.dc-quiz p{margin:8px 0 0;font-size:.92rem}
.next a.nx-next{order:-1;grid-column:1/-1;background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
.next a.nx-next small{color:#cdd7f7}.next a.nx-next b{color:#fff;font-size:1.1rem}
.next{display:grid}
.dc-quiz summary{font:500 .95rem/1.5 var(--body)!important;color:var(--graphite)!important}
.dp-s{font:400 .9rem/1.5 var(--body)!important}
.mist pre{white-space:pre-wrap!important;overflow-wrap:anywhere}
.ldots{gap:7px;font:600 .76rem var(--mono);color:var(--ink-deep)}
.ldots .ld-g{color:var(--ink-mid);margin-right:6px}
.ld{width:13px;height:13px;border:2px solid var(--ink-mid);background:var(--sheet)}
.ld.done{background:var(--ok);border-color:var(--ok)}
.ld.cur{width:15px;height:15px;border:3px solid var(--ink-deep);background:var(--sky);box-shadow:none}
.ld.cur.done{background:var(--ok);border-color:var(--ink-deep)}
.ld:hover{border-color:var(--ink-deep);background:var(--sky)}
.ldots .ld-n{margin-left:6px;color:var(--ink-deep)}
.crumbs{align-items:center}.crumbs .ldots{display:flex;align-items:center;padding:3px 0}.ld{display:block;flex:none}
.crumbs a.ld{border:2px solid var(--ink-mid);padding:0}.crumbs a.ld.done{border-color:var(--ok)}.crumbs a.ld.cur{border:3px solid var(--ink-deep)}.crumbs a.ld:hover{border-color:var(--ink-deep)}
/* ---- on this page (v2.9.2) ---- */
.inlesson{border:0!important;border-top:3px solid var(--ink-deep)!important;background:none!important;padding:16px 0 0!important;margin-top:4px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px}
.il-h{color:var(--ink-deep)!important;margin-bottom:10px!important}
.inlesson ol{list-style:none;padding:0!important;margin:0!important;gap:0!important;counter-reset:il}
.inlesson ol li{counter-increment:il;border-bottom:1px solid var(--rule)}
.inlesson ol li a{display:grid;grid-template-columns:28px 1fr;gap:4px;padding:8px 0;color:var(--graphite)!important;font-size:.95rem;line-height:1.35}
.inlesson ol li a::before{content:counter(il,decimal-leading-zero);font:600 .72rem/1.9 var(--mono);color:var(--ink-mid)}
.inlesson ol li a:hover{color:var(--ink-deep)!important;text-decoration:none!important;background:var(--sky)}
.inlesson li.il-deep{margin:0!important;border-bottom:0}
.inlesson li.il-deep a{color:var(--lead)!important;font:500 .82rem var(--mono)!important}
.inlesson li.il-deep a::before{content:"+";color:var(--ink-mid)}
.il-side{border-left:1px solid var(--rule);padding-left:22px}
.il-covers{margin:0;display:flex;flex-wrap:wrap;gap:0;font:500 .78rem/1.5 var(--mono);color:var(--lead)}
.il-covers span{padding:5px 0;border-bottom:1px dotted var(--rule);width:100%}
.dgfig{margin:4px 0 0;padding:18px 18px 14px;border:1.5px solid var(--graphite);background:var(--sheet);position:relative}
.dg-label{position:absolute;top:-10px;left:14px;background:var(--ink-deep);color:#fff;font:700 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 8px}
.dgfig figcaption{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);font-size:.9rem;color:var(--lead);line-height:1.55}
@media (max-width:760px){.inlesson{grid-template-columns:minmax(0,1fr);gap:18px}.il-side{border-left:0;padding-left:0}}
.dg-label{position:static!important;display:inline-block;margin:0 0 12px}
article{border-top:0!important;padding-top:0!important;margin-top:28px!important}
/* ---- full-width reading area (v2.9.3) ---- */
.page article{max-width:none!important}
.page article p,.page article ul.pts{max-width:72ch}
.page article .mist,.page article .faq,.page article .takeaways,.page article details.deeper,.page article .next{max-width:none}
@media (min-width:1200px){
  .page article{display:grid;grid-template-columns:minmax(0,1fr) 290px;column-gap:56px;align-items:start}
  .page article>*{grid-column:1}
  .page article>.inlesson{grid-column:2;grid-row:1/span 40;position:sticky;top:16px;grid-template-columns:minmax(0,1fr);gap:20px;max-height:calc(100vh - 32px);overflow:auto}
  .page article>.inlesson .il-side{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:14px}
  body.workbench .page article{display:none}
}
/* ---- SQL course ---- */
.courses-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important}
.sqlframe{padding:0!important;background:var(--sheet)!important;display:flex;flex-direction:column}
.sqlout{flex:1;min-height:340px;max-height:560px;overflow:auto;padding:12px 14px;outline:none}
.sqlout:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
.sqlhead{font:500 .78rem var(--mono);color:var(--lead);margin:0 0 8px}.sqlhead b{color:var(--ink-deep)}
.sqlmsg{padding:14px;border:1px dashed var(--rule);color:var(--lead);font-size:.92rem}.sqlmsg.bad{border-color:var(--pencil);color:var(--graphite);background:var(--pencil-wash)}
.sqlt{border-collapse:collapse;width:100%;font:500 .8rem/1.4 var(--mono);color:var(--graphite)}
.sqlt th{position:sticky;top:-12px;background:var(--sky);color:var(--ink-deep);text-align:left;font-weight:700;padding:6px 10px;border-bottom:2px solid var(--ink-deep);white-space:nowrap}
.sqlt td{padding:5px 10px;border-bottom:1px solid var(--rule);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.sqlt tbody tr:hover td{background:var(--faint)}
.sqlt .num{display:block;text-align:right}.sqlt .null{color:var(--lead);font-style:italic;opacity:.75}
.sqlt th.rj,.sqlt td.rj{background:color-mix(in srgb,var(--sky) 55%,transparent)}
.sqlt tr.kept td{background:var(--sky)}
.sqlt tr.dropped td{color:var(--lead);opacity:.55;text-decoration:line-through;text-decoration-color:var(--pencil)}
.sqlt tr.dropped td.whycol{text-decoration:none;opacity:1;color:var(--pencil);font-family:var(--body);font-size:.76rem;white-space:normal}
.sqlt td.whycol,.sqlt th.whycol{min-width:120px}
.sqlt tr.nomatch td.rj{outline:1px dashed var(--ink-soft);outline-offset:-3px;background:none}
.sqlt tr.gstart td{border-top:2px solid var(--ink-deep)}
.sqlt tr.godd td{background:var(--sky)}.sqlt td.gcol,.sqlt th.gcol{font-weight:700;color:var(--ink-deep);background:var(--sky-2)!important}
.sqlmore{font:500 .74rem var(--mono);color:var(--lead);margin:8px 0 0}
.tblcard{margin:0 0 18px}.tblname{font:700 .82rem var(--mono);color:var(--ink-deep);margin:0 0 6px}.tblname small{font-weight:500;color:var(--lead);margin-left:6px}
.sqlt tr.ch-added td{background:color-mix(in srgb,var(--ok) 16%,transparent)}
.sqlt tr.ch-removed td{background:var(--pencil-wash);text-decoration:line-through;color:var(--lead)}
.sqlt td.cell-ch{background:#f2b94b40!important}.sqlt td.cell-ch s{color:var(--lead);margin-right:4px}
.sqlt td.stcol,.sqlt th.stcol{width:22px;text-align:center;font-weight:700;color:var(--ink-deep)}
.sqlt th.newcol{background:color-mix(in srgb,var(--ok) 20%,var(--sky))}
.rowsbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 12px}
.rowsbar button{font:700 .72rem var(--mono);padding:5px 9px;border:1.5px solid var(--ink-soft);background:var(--sheet);color:var(--ink-mid)}
.rowsbar button.past{border-color:var(--ink-mid);color:var(--ink-deep)}
.rowsbar button[aria-selected="true"]{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
.rowsbar .rarr{color:var(--ink-soft);font-size:.8rem}
.stagehead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;border-top:2px solid var(--ink-deep);padding-top:8px}
.stlabel{font:900 1.15rem var(--display);font-stretch:85%;color:var(--ink-deep);text-transform:uppercase}
.stagehead code{font:500 .8rem var(--mono);background:var(--faint);padding:1px 6px}
.stcount{font:500 .82rem var(--mono);color:var(--lead)}.stcount b{color:var(--ink-deep);font-size:1rem}
.stnote{margin:6px 0 10px;font-size:.88rem;color:var(--lead)}
.stnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font:500 .76rem var(--mono);color:var(--lead)}
.stnav button{font:700 .76rem var(--mono);padding:6px 10px;border:1.5px solid var(--ink-deep);color:var(--ink-deep);background:var(--sheet)}.stnav button:disabled{opacity:.35;cursor:default}
.sqlt td.cell-ch .num{display:inline}.sqlt td.cell-ch{text-align:right}
.tools{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}
/* ---- Git course ---- */
.gited .stack{height:230px}
.term{background:#0e1114;border-top:1px solid #2a3036;color:var(--code-fg);font:13px/1.55 var(--mono);cursor:text}
.term-out{height:190px;overflow:auto;padding:10px 12px 4px;white-space:pre-wrap;overflow-wrap:anywhere}
.term .tl{margin:0 0 2px}.term .tl.cmd{color:#fff;margin-top:6px}.term .tp{color:#7d9bff;margin-right:6px}
.term .tl.ok{color:#c9cfd6}.term .tl.err{color:#ffb4a0}.term .tl.plain{color:#ffd88a;font-family:var(--body);font-size:.84rem;border-left:2px solid #f2b94b;padding-left:8px;margin:4px 0}
.term .tl.note{color:#9fe0b8;font-family:var(--body);font-size:.84rem;border-left:2px solid #5fcf8f;padding-left:8px;margin:4px 0}
.term .tl.muted{color:#7b848c;font-family:var(--body);font-size:.84rem}
.term-in{display:flex;align-items:center;gap:8px;padding:6px 12px 10px;border-top:1px dashed #2a3036}
.term-in span{color:#7d9bff;font-weight:700}
.term-in input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:13px var(--mono);caret-color:#fff}
.term-in input::placeholder{color:#59616b}
.term:focus-within{box-shadow:inset 0 0 0 2px #3557d6}
#ftabs .ft-none{font:500 .74rem var(--mono);color:var(--lead);padding:6px}
.gitout{min-height:380px}
.gscroll{overflow-x:auto;overflow-y:hidden;padding-bottom:6px}
.ggraph{display:block}
p code,li code,td code,.sqlmsg code,.helper code{overflow-wrap:anywhere}
.gitout .tblname{flex-wrap:wrap;white-space:normal;min-width:0}.gitout .tblcard{max-width:100%;overflow-x:auto}.gitout small{overflow-wrap:anywhere;min-width:0}.gitout table{width:100%;max-width:100%;table-layout:fixed}.gitout td,.gitout th{overflow-wrap:anywhere}
@media (max-width:760px){.page .board .label .peel{flex-wrap:wrap;max-width:100%;min-width:0}}
.ggwrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:900px){.courses-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* ===== AI course ===== */
.aiprompt{display:flex;flex-direction:column;background:var(--sheet);border-top:1px solid var(--rule)}
.chat{height:340px;overflow:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(var(--sheet),var(--sheet)) padding-box}
.chat .msg{max-width:92%;font-size:.92rem;line-height:1.5;padding:10px 12px;border:1px solid var(--rule);background:var(--sheet)}
.chat .msg p{margin:0 0 .5em}.chat .msg p:last-child{margin:0}.chat .msg ul,.chat .msg ol{margin:.2em 0 .5em 1.1em;padding:0}
.chat .msg.sys{max-width:100%;border-style:dashed;color:var(--lead);font-size:.85rem;background:transparent}
.chat .msg.me{align-self:flex-end;background:var(--sky);border-color:var(--sky-2);border-right:3px solid var(--ink)}
.chat .msg.ai{align-self:flex-start;border-left:3px solid var(--ink-deep)}
.chat .msg.ai::before{content:"Assistant · pretend";display:block;font:600 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:6px}
.chat .msg.me::before{content:"You";display:block;font:600 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.chat .msg.warn{border-left-color:var(--pencil);background:var(--pencil-wash)}
.chat .msg.typing{animation:aiIn .42s ease-out}
@keyframes aiIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.chat .msg.typing{animation:none}}
.mcode{margin:8px 0 6px;max-height:220px;overflow:auto;background:var(--code-bg);color:var(--code-fg);font:12px/1.5 var(--mono);padding:10px 12px;white-space:pre}
.usebtn,.askrow .send{font:600 .82rem var(--mono);border:1px solid var(--ink);background:var(--ink);color:#fff;padding:6px 12px;cursor:pointer}
.usebtn{background:var(--sheet);color:var(--ink)}.usebtn:hover{background:var(--ink-wash)}
.askrow{display:flex;gap:8px;align-items:stretch;padding:10px 12px;border-top:1px solid var(--rule);background:var(--paper)}
.askrow textarea{flex:1;min-width:0;resize:vertical;min-height:72px;font:14px/1.45 var(--body);padding:8px 10px;border:1px solid var(--rule);background:var(--sheet);color:var(--graphite)}
.askrow textarea:focus{outline:2px solid var(--ink);outline-offset:-1px}
.askrow .send{align-self:flex-end;padding:9px 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.page .aied{height:440px!important;overflow:hidden;align-items:stretch}.page .aied .stack{height:440px;min-height:0}.page .aied .gutter{overflow:hidden;height:440px}.sqlframe #frame{display:block;width:100%;min-height:420px;border:0;background:#fff;flex:1}
.aiout .ai-reply{font-size:.95rem;line-height:1.55}.aiout .ai-reply p{margin:0 0 .7em}
.aiout .ai-reply .mcode{max-height:none}
.aicheck .ac-lead{font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);margin:0 0 10px}
.aicheck ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ac-row{display:grid;grid-template-columns:18px 112px minmax(0,1fr);gap:10px;align-items:baseline;padding:11px 2px;border-bottom:1px solid var(--faint)}
.ac-row b{font:700 .9rem var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-deep)}
.ac-row span:last-child{font-size:.9rem;color:var(--lead)}
.ac-box{width:12px;height:12px;border:2px solid var(--ink-soft);display:inline-block;transform:translateY(1px)}
.ac-row.yes .ac-box{background:var(--ink);border-color:var(--ink)}
.ac-row.yes span:last-child{color:var(--graphite)}
.ac-row.no b{color:var(--lead)}
.ac-row.danger .ac-box{background:var(--pencil);border-color:var(--pencil)}.ac-row.danger b,.ac-row.danger span:last-child{color:var(--pencil)}
.aicheck.empty .ac-row b{color:var(--lead)}
.ac-meter{height:6px;background:var(--sky);margin:16px 0 6px;border:1px solid var(--sky-2)}.ac-meter i{display:block;height:100%;background:var(--ink)}
.ac-count{margin:0;font:.8rem var(--mono);color:var(--lead)}.ac-count b{color:var(--ink)}
.ai-revh{margin:0 0 8px;font-size:.88rem;color:var(--lead)}
.ai-diff{margin:0;background:var(--code-bg);color:var(--code-fg);font:12px/1.55 var(--mono);padding:8px 0;overflow:auto;white-space:pre}
.ai-diff .dl{display:block;padding:0 12px}.ai-diff .dl i{display:inline-block;width:16px;font-style:normal;color:var(--code-dim)}
.ai-diff .da{background:#1f7a4a33}.ai-diff .da i{color:#5fcf8f}.ai-diff .dr{background:#e0451f26;text-decoration:line-through;text-decoration-color:#ff6a4580}.ai-diff .dr i{color:#ff6a45}
#frameBox #frame[hidden]{display:none}
@media (max-width:760px){.chat{height:300px}.ac-row{grid-template-columns:16px minmax(0,1fr)}.ac-row span:last-child{grid-column:2}.page .aied,.page .aied .stack,.page .aied .gutter{height:340px!important}.sqlframe #frame{min-height:360px}}

.toc .courses{display:grid!important;grid-template-columns:repeat(5,auto);gap:1px;background:var(--graphite)}.toc .courses a{font-size:.76rem!important;padding:9px 4px!important}
.toc .courses a{border:0!important;background:var(--sheet)}
.toc .courses a.on{background:var(--ink-deep)}
@media (min-width:900px){.courses-grid.c7>:first-child,.courses-grid.c7>:last-child{grid-column:span 2}}

/* ===== Testing course ===== */
.tstframe #frame{display:block;width:100%;min-height:420px;border:0;background:#fff}
.tsum{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;padding:0 0 10px;margin:0 0 10px;border-bottom:1px solid var(--rule);font:.84rem var(--mono);color:var(--lead)}
.tsum b{font-size:1.15rem;margin-right:3px}.tsum .ts-p b{color:var(--ok)}.tsum .ts-f.on b,.tsum .ts-f.on{color:var(--pencil)}.tsum .ts-o{color:var(--pencil);font-size:.76rem}
.tgroup{margin:12px 0 4px;font:700 .74rem var(--mono);color:var(--ink-deep);letter-spacing:.02em}
.tlist{list-style:none;margin:0;padding:0}
.tr{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 8px;align-items:baseline;padding:6px 2px;border-bottom:1px solid var(--faint);font-size:.9rem}
.tmark{font:700 .9rem var(--mono);text-align:center}.t-pass .tmark{color:var(--ok)}.t-fail .tmark{color:var(--pencil)}.t-skip,.t-todo{color:var(--lead)}
.tname{overflow-wrap:anywhere;min-width:0}.t-fail .tname{color:var(--graphite);font-weight:600}
.terr{grid-column:2;margin:4px 0 2px;border-left:3px solid var(--pencil);padding:6px 10px;background:var(--pencil-wash)}
.terr p{margin:0 0 6px;font:500 .8rem/1.45 var(--mono);color:var(--graphite);overflow-wrap:anywhere}
.terr small{font:.72rem var(--mono);color:var(--lead)}
.tdiff{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:0 0 6px}
.tdiff b{display:block;font:700 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}.tdiff .te b{color:var(--ok)}.tdiff .tv b{color:var(--pencil)}
.tdiff pre{margin:0;background:var(--code-bg);color:var(--code-fg);font:12px/1.45 var(--mono);padding:6px 8px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto}
.tdiff .te pre{box-shadow:inset 3px 0 #5fcf8f}.tdiff .tv pre{box-shadow:inset 3px 0 #ff6a45}
.tfatal{border:1px solid var(--pencil);background:var(--pencil-wash);padding:12px 14px}.tfatal b{color:var(--pencil);display:block;margin-bottom:4px}.tfatal p{margin:0 0 6px;font:.84rem var(--mono);overflow-wrap:anywhere}.tfatal span{font-size:.88rem;color:var(--lead)}
.tcov{margin:10px 0 0;background:var(--code-bg);color:var(--code-fg);font:12px/1.6 var(--mono);padding:6px 0;overflow:auto;white-space:pre}
.tcov .cl{display:block;padding:0 10px 0 0}.tcov .cl i{display:inline-block;width:34px;padding-right:10px;text-align:right;font-style:normal;color:var(--code-dim)}
.tcov .ch{background:#1f7a4a2e}.tcov .ch i{color:#5fcf8f}.tcov .cm{background:#e0451f2e}.tcov .cm i{color:#ff6a45}
.foot-links a{display:inline-block;padding:5px 0}.cta-alt{display:inline-block;padding:6px 0}
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.perfout{padding-top:6px}
.visitbar{display:flex;gap:0;margin:0 0 8px;border:1px solid var(--rule);width:max-content;max-width:100%}
.visitbar[hidden]{display:none}
.visitbar button{font:.78rem var(--mono);padding:4px 10px;background:var(--paper);color:var(--lead);border:0;border-right:1px solid var(--rule);cursor:pointer}
.visitbar button:last-child{border-right:0}
.visitbar button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.wfhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font:.76rem var(--mono);color:var(--lead);margin:0 0 6px}
.wfkey i{display:inline-block;width:12px;height:8px;margin:0 3px 0 8px;vertical-align:middle}
.wf{font-size:.82rem}
.wfax,.wr{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:8px;align-items:center}
.wfax{position:relative;height:30px;border-bottom:1px solid var(--rule)}
.wfax .wt{position:relative;height:100%}
.wfax b{position:absolute;bottom:2px;transform:translateX(-50%);font:500 .68rem var(--mono);color:var(--graphite)}
.wfax b:first-child{transform:none}
.wfax u{position:absolute;top:0;text-decoration:none;font:600 .64rem var(--mono);white-space:nowrap;padding-left:3px;border-left:2px solid}
.wm-fcp{color:var(--ok);border-color:var(--ok)}
.wm-lcp{color:var(--pencil);border-color:var(--pencil);top:12px!important}
.wfax u.wm-r{transform:translateX(-100%);border-left:0;border-right:2px solid;padding:0 3px 0 0}
.wfax b{white-space:nowrap}
.wfl{list-style:none;margin:0;padding:0}
.wr{padding:5px 0;border-bottom:1px solid var(--faint)}
.wn{min-width:0}
.wn b{display:block;font:600 .78rem var(--mono);color:var(--ink-deep);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wn small{display:block;font:.68rem var(--mono);color:var(--graphite)}
.wn em{font-style:normal;margin-left:5px;padding:0 4px;border:1px solid var(--rule);color:var(--lead)}
.wn em.wb-blk{border-color:var(--pencil);color:var(--pencil)}
.wn em.wb-c{border-color:var(--ok);color:var(--ok)}
.wt{position:relative;height:14px;background:linear-gradient(90deg,var(--faint) 1px,transparent 1px) 0 0/10% 100%}
.wt i{position:absolute;top:2px;height:10px}
.wb-q{background:repeating-linear-gradient(90deg,var(--rule) 0 2px,transparent 2px 5px);top:6px!important;height:2px!important}
.wb-conn,.wfkey .wb-conn{background:var(--sky-2)}
.wb-wait,.wfkey .wb-wait{background:var(--ink-soft)}
.wb-down,.wfkey .wb-down{background:var(--ink)}
.wb-cache,.wfkey .wb-cache{background:var(--ok)}
.t-css .wb-down{background:var(--ink-deep)}
.pnote{font-size:.86rem;color:var(--lead);margin:4px 0 10px}
.pfilm{display:flex;flex-wrap:wrap;gap:10px}
.pfr{margin:0;width:98px}
.pph{position:relative;width:96px;border:1px solid var(--graphite);background:var(--paper);overflow:hidden}
.pfr.shifted .pph{border-color:var(--pencil);outline:2px solid var(--pencil)}
.pfr figcaption{font:.7rem var(--mono);color:var(--lead);text-align:center;margin-top:3px}
.pfr figcaption b{color:var(--pencil)}
.pb{position:absolute;left:6px;display:block;box-sizing:border-box}
.pb-text{border:1px dashed var(--rule)}
.pb-text.on,.pb-overlay.on{border:0;background:repeating-linear-gradient(180deg,var(--graphite) 0 2px,transparent 2px 4px)}
.pb-text.on.fb{opacity:.45}
.pb-img,.pb-bg,.pb-embed{border:1px dashed var(--graphite)}
.pb-img.on,.pb-bg.on,.pb-embed.on{border:0;background:var(--sky-2)}
.pb-space{border:1px dashed var(--rule)}
.pb-overlay{left:0;right:0;width:auto!important;background:var(--ink-wash);border:1px solid var(--ink)}
.pshifts,.pissues,.ptasks{margin:6px 0 12px;padding-left:18px;font-size:.88rem}
.pshifts li,.pissues li,.ptasks li{margin:3px 0}
.ptasks li.long b{color:var(--pencil)}
.ptasks small{color:var(--graphite);font-family:var(--mono)}
.pvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}
.pv{border:1px solid var(--rule);border-left:4px solid var(--graphite);padding:8px 10px;background:var(--paper)}
.pv small{display:block;font:.72rem var(--mono);color:var(--lead)}
.pv b{display:block;font:600 1.3rem var(--mono);color:var(--ink-deep)}
.pv span{font:600 .72rem var(--mono);text-transform:uppercase;letter-spacing:.04em}
.pv p{margin:4px 0 0;font-size:.8rem;color:var(--lead)}
.pv.pg-good{border-left-color:var(--ok)}.pv.pg-good span{color:var(--ok)}
.pv.pg-mid{border-left-color:var(--ink-mid)}.pv.pg-mid span{color:var(--ink-mid)}
.pv.pg-bad{border-left-color:var(--pencil)}.pv.pg-bad span{color:var(--pencil)}
.ptab{border-collapse:collapse;font:.8rem var(--mono);margin:0 0 6px;width:100%}
.ptab th,.ptab td{border-bottom:1px solid var(--faint);padding:4px 6px;text-align:left}
.ptab thead th{color:var(--lead);font-weight:500}
@media (max-width:520px){.pvgrid{grid-template-columns:minmax(0,1fr)}.wfax,.wr{grid-template-columns:minmax(0,42%) minmax(0,1fr)}}.tcov .cm em{font-style:normal;color:#ffb4a2;margin-left:12px;font-family:var(--body);font-size:11px}
@media (max-width:760px){.tdiff{grid-template-columns:minmax(0,1fr)}}

/* ===== Accessibility course ===== */
.a11yframe{position:relative}.a11yframe #frame{display:block;width:100%;min-height:440px;border:0;background:#fff}
.a11yframe .a11yout{position:absolute;inset:0;background:var(--sheet);max-height:none;overflow:auto}
.srlist{list-style:none;margin:0 0 6px;padding:0;counter-reset:sr;font:.84rem/1.45 var(--mono)}
.srlist li{counter-increment:sr;display:grid;grid-template-columns:2.4em auto minmax(0,1fr);gap:8px;align-items:baseline;padding:5px 2px;border-bottom:1px solid var(--faint)}
.srlist li::before{content:counter(sr);color:var(--lead);font-size:.72rem;text-align:right}
.srlist li b{color:var(--ink-deep);font-weight:700;white-space:nowrap}.srlist li span{color:var(--graphite);overflow-wrap:anywhere;min-width:0}
.srlist .srt{grid-column:2/4;font-family:var(--body);color:var(--graphite)}
.srlist .sr-lm b{color:var(--lead);font-weight:600}.srlist .sr-lm{background:var(--faint)}
.srlist .sr-hd b{color:var(--ink)}.srlist .sr-hd span{font-weight:700}
.srlist .sr-bad b,.srlist .sr-bad span{color:var(--pencil)}.srlist .sr-bad{background:var(--pencil-wash)}
.srlist .sr-an b{color:var(--ok)}
.kbbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.kbbar button{font:600 .76rem var(--mono);padding:5px 10px;border:1px solid var(--ink-soft);background:var(--sheet);color:var(--ink-deep);cursor:pointer}
.kbbar button:hover,.kbbar button[aria-pressed="true"]{background:var(--ink-wash);border-color:var(--ink)}
.kblist{list-style:none;margin:0;padding:0;font:.84rem/1.4 var(--mono)}
.kblist li{display:grid;grid-template-columns:28px 92px minmax(0,1fr);gap:4px 10px;align-items:center;padding:6px 4px;border-bottom:1px solid var(--faint)}
.kblist li i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700}
.kblist li b{color:var(--lead);font-weight:600;font-size:.76rem}.kblist li span{overflow-wrap:anywhere;color:var(--graphite)}
.kblist li em{grid-column:3;font-style:normal;font-size:.72rem;color:var(--pencil)}
.kblist li.on{background:var(--sky);outline:2px solid var(--ink);outline-offset:-2px}.kblist li.warn i{background:var(--pencil)}
.isslist{list-style:none;margin:0;padding:0}
.isslist li{border:1px solid var(--rule);border-left:3px solid var(--ink-soft);padding:8px 12px;margin:0 0 8px;font-size:.88rem}
.isslist li.im-serious{border-left-color:var(--pencil)}.isslist li.im-moderate{border-left-color:var(--ink)}
.isslist .imp{font:700 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lead)}
.isslist li.im-serious .imp{color:var(--pencil)}
.isslist p{margin:3px 0}.isslist code{font:.74rem var(--mono);color:var(--lead);background:none;padding:0;overflow-wrap:anywhere}.isslist a{font-size:.8rem;margin-left:6px}
.a11yok{padding:16px;border:1px solid var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent);display:flex;flex-direction:column;gap:4px}.a11yok b{color:var(--ok)}.a11yok span{color:var(--lead);font-size:.9rem}
@media (min-width:900px){.courses-grid.c8>:first-child{grid-column:span 2}}
@media (max-width:760px){.a11yframe #frame{min-height:380px}.kblist li{grid-template-columns:26px minmax(0,1fr)}.kblist li span,.kblist li em{grid-column:2}}

/* ===== Servers course ===== */
.page .srved{height:470px!important;overflow:hidden;align-items:stretch}.page .srved .stack{height:470px;min-height:0}.page .srved .gutter{overflow:hidden;height:470px}
.srved+.errbar.on{flex-direction:column;align-items:flex-start;gap:2px}.srved+.errbar b{color:#fff;font-weight:600}.srved+.errbar span{font-family:var(--body);font-size:.84rem;color:#ffd9cc}
.reqbar{display:flex;flex-wrap:wrap;gap:0;align-items:stretch;padding:10px 12px 8px;background:var(--paper);border-bottom:1px solid var(--rule)}
.reqbar select,.reqbar input,.reqbar textarea{font:600 .82rem var(--mono);color:var(--graphite);background:var(--sheet);border:1px solid var(--ink-soft);padding:7px 8px;min-width:0}
.reqbar select{border-right:0;color:var(--ink-deep);cursor:pointer}
.reqbar .rqhost{display:flex;align-items:center;padding:0 2px 0 8px;font:500 .8rem var(--mono);color:var(--lead);background:var(--sheet);border:1px solid var(--ink-soft);border-right:0;border-left-style:dotted}
.reqbar input{flex:1 1 140px;border-left:0;padding-left:0}
.reqbar input:focus,.reqbar select:focus,.reqbar textarea:focus{outline:2px solid var(--ink);outline-offset:-1px}
.reqbar .send{font:600 .82rem var(--mono);border:1px solid var(--ink);background:var(--ink);color:#fff;padding:7px 16px;cursor:pointer}
.reqbar .send:hover{background:var(--ink-deep)}
.rqbody{flex-basis:100%;display:flex;gap:0;margin-top:6px}.rqbody select{border-right:0;align-self:flex-start}.rqbody textarea{flex:1;resize:vertical;font-weight:500;min-height:54px;line-height:1.45}
.tries{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--rule);background:var(--sheet)}
.tries span{font:600 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lead);margin-right:2px}
.tries button{font:600 .76rem var(--mono);padding:4px 9px;border:1px solid var(--ink-soft);background:var(--sheet);color:var(--ink-deep);cursor:pointer}
.tries button:hover{background:var(--ink-wash);border-color:var(--ink)}
.srvframe{display:flex;flex-direction:column}.srvframe .addr{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--faint);border-bottom:1px solid var(--rule);font:500 .78rem var(--mono);color:var(--graphite);min-width:0}
.srvframe .addr .baddr{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--sheet);border:1px solid var(--rule);padding:3px 10px}
.srvframe .addr .bdots{display:inline-flex;gap:4px}.srvframe .addr .bdots i{width:8px;height:8px;border-radius:50%;background:var(--rule);display:block}
.bst{font:700 .74rem var(--mono);padding:2px 6px;border:1px solid currentColor}
.srvout{max-height:600px}
.lanes{display:flex;justify-content:space-between;font:700 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lead);padding:0 2px 6px;border-bottom:1px dashed var(--rule);margin-bottom:10px}
.xlist{display:flex;flex-direction:column;gap:12px}
.xch{border:1px solid var(--rule);border-left:3px solid var(--ink);background:var(--sheet);--st:var(--ink)}
.xch.s3{--st:var(--ink-soft)}.xch.s4,.xch.s5,.xch.sx{--st:var(--pencil)}
.xch.s4,.xch.s5,.xch.sx{border-left-color:var(--pencil)}
.xch.dim{opacity:.7}
.xrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px;font:.8rem var(--mono);min-width:0}
.xrow .xarr{position:relative;width:46px;height:10px;flex:none}
.xrow .xarr::before{content:"";position:absolute;left:0;right:5px;top:4px;border-top:2px solid var(--ink)}
.xreq .xarr::after{content:"";position:absolute;right:0;top:0;border:5px solid transparent;border-left:7px solid var(--ink);border-right:0}
.xres{flex-direction:row-reverse;justify-content:flex-start;background:var(--faint)}
.xres .xarr::before{left:5px;right:0;border-top-color:var(--st)}
.xres .xarr::after{content:"";position:absolute;left:0;top:0;border:5px solid transparent;border-right:7px solid var(--st);border-left:0}
.xm{color:var(--ink-deep);font-weight:700}.xp{font:600 .82rem var(--mono);color:var(--graphite);background:none;padding:0;overflow-wrap:anywhere;min-width:0}
.xs{color:var(--st);font-weight:700}
.xrow small{color:var(--lead);font-size:.72rem;overflow-wrap:anywhere;min-width:0}.xrow small.xvia{border:1px dashed var(--rule);padding:0 5px}.xrow small.xck{color:var(--ink-mid)}
.xmid{display:flex;justify-content:space-between;gap:10px;padding:5px 12px 5px 66px;font:.78rem var(--body);color:var(--lead);border-top:1px dashed var(--rule);border-bottom:1px dashed var(--rule)}
.xmid code{font:600 .76rem var(--mono);color:var(--ink-deep);background:none;padding:0;overflow-wrap:anywhere}
.xbody{padding:6px 12px 7px 66px;font:500 .8rem/1.45 var(--mono);color:var(--graphite);border-top:1px dashed var(--rule);overflow-wrap:anywhere}.xbody i{color:var(--lead)}
.xch details{border-top:1px solid var(--rule)}.xch summary{cursor:pointer;padding:6px 12px;font:600 .74rem var(--mono);color:var(--ink-mid)}
.xdet{padding:4px 12px 12px}.xdet h4{margin:10px 0 4px;font:700 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lead)}
.hdrs{border-collapse:collapse;width:100%;font:.76rem/1.4 var(--mono);table-layout:fixed}
.hdrs th{text-align:left;color:var(--ink-deep);font-weight:600;padding:3px 8px 3px 0;width:34%;vertical-align:top;overflow-wrap:anywhere}
.hdrs td{color:var(--graphite);padding:3px 0;overflow-wrap:anywhere;border-bottom:1px solid var(--faint)}.hdrs td small{color:var(--lead);border:1px solid var(--rule);padding:0 4px;margin-left:4px}
.rawbody,.jsonv{margin:6px 0 0;background:var(--code-bg);color:var(--code-fg);font:12px/1.55 var(--mono);padding:10px 12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto}
.jsonv .jk{color:#9fb6ff}.jsonv .js{color:#b9e4a2}.jsonv .jv{color:#f2c46b}.jsonv .jn{color:#8c949a;font-style:italic}
.xnone{margin:4px 0;font-size:.82rem;color:var(--lead);font-style:italic}
.bpage{padding:28px 18px;text-align:left;color:var(--graphite)}.bpage h3{margin:0 0 8px;font:700 1.15rem var(--display)}.bpage p{margin:0;color:var(--lead);max-width:52ch}
.dh{margin:4px 0 8px;font:700 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lead)}.dh:not(:first-child){margin-top:18px}
.fileb{border:1px solid var(--rule);margin:0 0 6px}.fileb summary{padding:6px 10px;cursor:pointer}.fileb summary code{font:600 .8rem var(--mono);color:var(--ink-deep);background:none}.fileb .rawbody{margin:0}
.srvlog{background:var(--code-bg);color:var(--code-fg);font:12px/1.5 var(--mono);padding:6px 0;min-height:100%}
.srvlog .con-l{border-bottom:1px solid #22272c}.srvlog .lv-sys{color:#8da0e8;font-style:italic}
.srvlog .ltag{color:#6f767c;flex:none;min-width:0;margin-right:4px}.srvlog .lv-error .ltag{color:#a8786c;display:block}
@media (max-width:760px){.page .srved,.page .srved .stack,.page .srved .gutter{height:360px!important}.reqbar .rqhost{display:none}.reqbar input{border-left:1px solid var(--ink-soft);padding-left:8px;flex-basis:100px}.xmid,.xbody{padding-left:12px}.xmid{flex-wrap:wrap}.xrow .xarr{width:26px}.hdrs th{width:40%}}

.ggraph .glane{font:700 10px var(--mono);fill:var(--lead);text-transform:uppercase;letter-spacing:.05em}
.ggraph .ge{fill:none;stroke:var(--ink-mid);stroke-width:2.5}.ggraph .ge2{stroke:var(--ink-soft);stroke-dasharray:5 4}
.ggraph .ge.ghost{stroke:var(--rule);stroke-dasharray:3 4}
.ggraph .gc circle{fill:var(--sheet);stroke:var(--ink-deep);stroke-width:3}
.ggraph .gc circle.ghead{fill:var(--ink-deep)}
.ggraph .gc.gm circle{stroke:var(--ok)}
.ggraph .gc.ghost circle{stroke:var(--rule);stroke-dasharray:3 3}
.ggraph .gc.ghost text{opacity:.45}
.ggraph .gid{font:500 10px var(--mono);fill:var(--lead);text-anchor:middle}
.ggraph .gmsg{font:600 11px var(--body);fill:var(--graphite);text-anchor:middle}
.ggraph .gt rect{fill:var(--ink-deep)}.ggraph .gt text{font:700 10px var(--mono);fill:#fff}
.ggraph .gt.b:not(.cur) rect{fill:var(--sky);stroke:var(--ink-mid)}.ggraph .gt.b:not(.cur) text{fill:var(--ink-deep)}
.ggraph .gt.r rect{fill:var(--sheet);stroke:var(--ink-soft);stroke-dasharray:3 2}.ggraph .gt.r text{fill:var(--ink-mid)}
.ggraph .gt.h rect{fill:var(--pencil)}
.glegend{margin:8px 0 0;font:500 .72rem var(--mono);color:var(--lead);display:flex;flex-wrap:wrap;gap:4px 14px}
.glegend .lg-b{color:var(--ink-deep)}.glegend .lg-g{opacity:.7}
.gareas{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:start}
.garea{border:1.5px solid var(--ink-soft);background:var(--sheet);min-height:150px}
.ga-h{background:var(--sky);padding:6px 8px;border-bottom:1.5px solid var(--ink-soft)}.ga-h b{display:block;font:700 .78rem var(--mono);color:var(--ink-deep)}.ga-h small{font-size:.72rem;color:var(--lead)}
.garea ul{list-style:none;margin:0;padding:6px 8px;display:grid;gap:4px;font:500 .76rem var(--mono)}
.garea li{display:flex;justify-content:space-between;gap:6px;padding:3px 6px;border-left:3px solid var(--rule);overflow-wrap:anywhere}
.garea li em{font-style:normal;font-size:.66rem;color:var(--lead);white-space:nowrap}
.garea li.ga-new{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.garea li.ga-mod{border-color:#f2b94b;background:#f2b94b22}
.garea li.ga-del{border-color:var(--pencil);text-decoration:line-through}
.garea li.ga-conf{border-color:var(--pencil);background:var(--pencil-wash)}
.garea li.ga-empty{border:0;color:var(--lead);font-style:italic}
.ga-arrow{align-self:center;font:700 .66rem var(--mono);color:var(--ink-mid);writing-mode:vertical-rl;transform:rotate(180deg)}
@media (max-width:1280px){.gareas{grid-template-columns:minmax(0,1fr)}.ga-arrow{writing-mode:horizontal-tb;transform:none;text-align:center}}
.gfiles{list-style:none;margin:0;padding:0;font:500 .82rem var(--mono)}.gfiles li{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid var(--rule)}.gfiles small{margin-left:auto;color:var(--lead);font-size:.7rem}
.gf-m{display:inline-grid;place-items:center;width:20px;height:20px;font-weight:700;font-size:.7rem;border:1.5px solid var(--rule);color:var(--lead)}
.gf-U{border-color:var(--ok);color:var(--ok)}.gf-M{border-color:#d29a1e;color:#a7760f}.gf-S{border-color:var(--ink);color:var(--ink)}.gf-C{border-color:var(--pencil);color:var(--pencil)}.gf-ok{border-color:var(--ink-soft);color:var(--ink-mid)}
.gr-only,.gr-different{color:var(--pencil);font-weight:700}.gr-in{color:var(--ok);font-weight:700}
.ga-arrow{writing-mode:horizontal-tb!important;transform:none!important;font:700 1.2rem var(--mono);color:var(--ink-mid);display:flex;flex-direction:column;align-items:center;line-height:1}.ga-arrow small{font:600 .6rem var(--mono);color:var(--lead)}
.ggraph .glaneline{stroke:var(--faint);stroke-width:1}