:root{
  --ink:#1A1754; --ultra:#3B2BE0; --ultra-deep:#2A1EB0; --ultra-wash:#ECEBFD;
  --paper:#fff; --wash:#F4F4FA; --line:#DCDDEB; --line-strong:#B9BBD3;
  --text:#1B1C33; --muted:#5D5F7E; --danger:#C2183E;
  --ui:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --formula:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--text);font:13px/1.3 var(--ui);overscroll-behavior:none}
/* The app alone fills the window and never scrolls; a page with text (html.doc) scrolls as usual */
html.app,html.app body{height:100%;overflow:hidden}
#app{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;height:100dvh}
.brand{display:flex;align-items:center;gap:10px;padding:0 14px;height:36px;background:var(--ink);color:#fff}
.brand b{font-size:14px;letter-spacing:-.01em;font-weight:650}
.brand span{color:#C9C7F2;font-size:12px}
.brand .wbname{margin-left:auto}
.toolbar{display:flex;align-items:center;gap:2px;padding:4px 8px;background:var(--wash);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.toolbar::-webkit-scrollbar{display:none}
.tb{flex:none;height:30px;min-width:30px;padding:0 6px;border:0;border-radius:5px;background:transparent;color:var(--text);font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.tb:hover{background:#E4E4F3}
.tb[aria-pressed=true]{background:var(--ultra-wash);color:var(--ultra-deep);box-shadow:inset 0 0 0 1px #C8C4F7}
.tb:disabled{opacity:.35;cursor:default;background:transparent}
.tb:focus-visible,.tab:focus-visible,#namebox:focus-visible{outline:2px solid var(--ultra);outline-offset:1px}
.tb svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tb.wide{padding:0 8px;min-width:92px;justify-content:space-between;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.sep{flex:none;width:1px;height:20px;background:var(--line-strong);margin:0 5px}
.swatch{display:block;width:16px;height:4px;border-radius:1px;margin-top:1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.stack{display:flex;flex-direction:column;align-items:center}
.fbar{display:flex;align-items:stretch;min-height:30px;border-bottom:1px solid var(--line-strong);background:var(--paper)}
#namebox{flex:none;width:92px;border:0;border-right:1px solid var(--line);padding:0 8px;font:12px var(--ui);background:var(--paper);color:var(--text);text-align:center}
.fx{flex:none;width:32px;display:flex;align-items:center;justify-content:center;color:var(--muted);font:italic 600 13px Georgia,serif;border-right:1px solid var(--line)}
.fwrap{position:relative;flex:1;min-width:0;overflow:hidden}
.ed-mirror,.ed-input{position:absolute;inset:0;margin:0;border:0;padding:6px 8px;font:13px/18px var(--formula);white-space:pre;tab-size:2;letter-spacing:0}
.ed-mirror{pointer-events:none;overflow:hidden;color:var(--text)}
.ed-input{width:100%;height:100%;resize:none;outline:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--text);overflow:hidden}
.ed-input::selection{background:rgba(59,43,224,.22)}
.ghost{color:#9C9EB9}
#gridwrap{position:relative;min-height:0;overflow:hidden;background:var(--paper)}
#grid{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:0}
#celled{position:absolute;z-index:3;background:var(--paper);box-shadow:0 0 0 2px var(--ultra),0 4px 14px rgba(26,23,84,.22);overflow:hidden;display:block}
#celled.nav{opacity:0;box-shadow:none;width:1px!important;height:1px!important;pointer-events:none}
#celled .ed-mirror,#celled .ed-input{padding:0 4px;font-family:var(--ui)}
.pop{position:absolute;z-index:20;background:var(--paper);border:1px solid var(--line-strong);border-radius:6px;box-shadow:0 8px 28px rgba(26,23,84,.2);padding:4px;font-size:13px}
.pop[hidden]{display:none}
.menu button{display:flex;width:100%;gap:18px;justify-content:space-between;padding:6px 10px;background:none;border:0;border-radius:4px;font:inherit;color:inherit;text-align:left;cursor:pointer;white-space:nowrap}
.menu button:hover,.menu button:focus-visible{background:var(--ultra-wash);outline:0}
.menu kbd{font:inherit;color:var(--muted)}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.palette{display:grid;grid-template-columns:repeat(8,22px);gap:3px;padding:4px}
.palette button{width:22px;height:22px;border-radius:4px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.palette button:hover,.palette button:focus-visible{outline:2px solid var(--ultra);outline-offset:1px}
.palette .none{grid-column:1/-1;width:auto;height:26px;background:none;font:inherit}
#acomp{max-height:232px;overflow:auto;width:min(420px,92vw);padding:3px}
#acomp div{padding:4px 8px;border-radius:4px;cursor:pointer;display:flex;gap:12px;align-items:baseline;white-space:nowrap}
#acomp div b{font:600 12px var(--formula)}
#acomp div span{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis}
#acomp div.on{background:var(--ultra);color:#fff}
#acomp div.on span{color:#DAD8FF}
#sigtip{padding:6px 10px;max-width:min(560px,92vw);font-size:12px;pointer-events:none}
#sigtip code{font:12px var(--formula)}
#sigtip .cur{font-weight:700;color:var(--ultra-deep);text-decoration:underline}
#sigtip div{color:var(--muted);margin-top:2px}
#notice{position:absolute;z-index:25;left:50%;top:10px;transform:translateX(-50%);background:var(--danger);color:#fff;padding:7px 12px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.25);max-width:92vw}
#notice[hidden]{display:none}
.tabs{display:flex;align-items:stretch;height:28px;background:var(--wash);border-top:1px solid var(--line-strong);overflow-x:auto;scrollbar-width:none}
.tab{flex:none;border:0;border-right:1px solid var(--line);background:transparent;padding:0 14px;font:inherit;color:var(--muted);cursor:pointer}
.tab:hover{background:#E9E9F5}
.tab[aria-selected=true]{background:var(--paper);color:var(--ultra-deep);font-weight:650;box-shadow:inset 0 -2px 0 var(--ultra)}
.tab input{font:inherit;border:0;outline:1px solid var(--ultra);width:96px;padding:1px 3px}
.status{display:flex;align-items:center;gap:14px;height:26px;padding:0 10px;background:var(--wash);border-top:1px solid var(--line);color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden}
.status .mode{color:var(--text);min-width:40px}
.status .warn{color:var(--danger)}
.status .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.status input[type=range]{width:96px;accent-color:var(--ultra)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media (max-width:640px){.brand span:not(.wbname){display:none}#namebox{width:64px}.fx{display:none}.status input[type=range]{display:none}}
/* Dark theme over the prototype's own stylesheet */
:root{
  --ink:#0B0A12; --ultra:var(--hot); --ultra-deep:var(--hot); --ultra-wash:#2A2740;
  --paper:#0B0A12; --wash:#12111D; --line:#23213A; --line-strong:#34324F;
  --text:#ECEAF8; --muted:#A09EB9; --danger:#FF4D6D;
  --hot:rgb(255,214,40); --mid:rgb(255,122,26); --deep:rgb(255,31,107);
  --ui:"Instrument Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --formula:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wide:"Anybody",var(--ui);
}
html,body{background:#0B0A12}
#app{grid-template-rows:auto auto minmax(0,1fr) auto auto auto}
.toolbar{display:none}
.pipg{display:flex;gap:2px}
.pipg i{display:block;width:12px;height:12px;background:#1E1C30;border:1px solid var(--line-strong)}
.pipg i.d{background:var(--hot);border-color:var(--hot)}
.pipg i.c{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot) inset}
/* Cleared lessons show their best medal */
.pipg i.d.m1{background:#B4683A;border-color:#B4683A}
.pipg i.d.m2{background:#CFCDE0;border-color:#CFCDE0}
.pipg i.d.m3{background:#FFD628;border-color:#FFD628}
#chain{font:500 13px var(--ui);color:var(--hot);white-space:nowrap}
#score{font:700 19px var(--wide);font-stretch:130%;color:#fff;font-variant-numeric:tabular-nums;min-width:1.5em;text-align:right}
.tbtn:hover{border-color:var(--text)}
.tbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#sound.off svg .wave{display:none}
button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.fbar{background:#0F0E19;min-height:38px;border-bottom:1px solid var(--line-strong)}
#namebox{background:#0F0E19;color:var(--text);font:600 13px var(--formula);border-right:1px solid var(--line)}
.fx{color:var(--hot);font-family:var(--formula);font-style:normal;font-size:12px}
.ed-mirror,.ed-input{font-size:14px;padding:9px 10px;line-height:20px}
.ed-input{caret-color:var(--hot)}
.ed-input::selection{background:rgba(255,214,40,.28)}
.ghost{color:#6F6D8A}
#celled{box-shadow:0 0 0 2px var(--hot),0 0 26px rgba(255,160,40,.35)}
.tabs{background:#0F0E19;height:32px}
.tab{color:var(--muted);padding:0 16px}
.tab:hover{background:#191728}
.tab[aria-selected=true]{background:#0B0A12;color:#fff;box-shadow:inset 0 -2px 0 var(--hot)}
.tabs .tab[aria-label="Add sheet"]{display:none}
.status{background:#0F0E19;color:var(--muted);height:26px}
.status .legal{color:#8886A3}
.status #gridout{color:var(--text)}
@media (pointer:coarse){.status #gridout{display:none}}
.status input[type=range]{accent-color:var(--hot)}
.pop{background:#17162A;color:var(--text);border-color:var(--line-strong);box-shadow:0 12px 34px rgba(0,0,0,.6)}
#acomp div.on{background:var(--hot);color:#0B0A12}#acomp div.on span{color:#2A2740}
#sigtip .cur{color:var(--hot)}
#notice{background:#3A1020;border:1px solid var(--danger);color:#FFD9E0}

/* The note sits in the sheet, like a comment on a cell */
#note{position:absolute;z-index:4;width:372px;max-width:calc(100% - 32px);padding:17px 19px 16px;border-radius:14px;background:rgba(13,12,23,.93);border:1px solid var(--line-strong);backdrop-filter:blur(6px);color:var(--text)}
#nwin{margin:0 0 11px;padding-bottom:11px;border-bottom:1px solid var(--line-strong);font:500 15px/1.35 var(--ui);color:var(--hot)}
#ntitle{margin:0 0 5px;font:750 22px/1.12 var(--wide);font-stretch:128%;color:#fff;letter-spacing:-.005em}
#nbody{margin:0 0 11px;font:400 15px/1.4 var(--ui);color:#D3D1E6}
#ncode{display:inline-block;margin:0 0 7px;padding:6px 10px;border-radius:7px;background:#000;border:1px solid var(--line-strong);font:700 16px/1.25 var(--formula);color:var(--hot);max-width:100%;white-space:pre;overflow-x:auto;vertical-align:top}
#ncaps{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 9px}
#ncaps[hidden]{display:none}
#ncaps kbd{display:inline-flex;align-items:baseline;gap:4px;padding:6px 9px 5px;border-radius:7px;background:#1E1C30;border:1px solid var(--line-strong);border-bottom-width:3px;font:700 14px/1.2 var(--formula);color:#BDBBD3}
#ncaps kbd small{font:500 12px var(--ui);opacity:.8}
#ncaps kbd.c{color:#fff;border-color:var(--hot)}
#ncaps kbd.d{background:var(--hot);border-color:var(--hot);color:#0B0A12}
#nwin .par{display:block;margin-top:4px;font:400 13.5px/1.35 var(--ui);color:#D3D1E6}
#nhow{margin:0;font:400 13.5px/1.4 var(--ui);color:var(--muted)}
#nmsg{margin:9px 0 0;font:500 14px/1.38 var(--ui);color:#FFB4C3}
#nmsg:empty{display:none}
#nhint,#nnext{display:inline-block;margin:0 0 8px;font:600 14px var(--ui);height:36px;padding:0 15px;border-radius:18px;cursor:pointer}
#nhint{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
#nnext{background:var(--hot);color:#0B0A12;border:0;margin:2px 0 0}
#nhint[hidden],#nnext[hidden],#nremix[hidden],#nshare[hidden],#nmedals[hidden],#nsharetext[hidden],#ncode[hidden],#nhow[hidden],#nwin[hidden]{display:none}

/* Keys a phone keyboard hides */
#acc{display:none;gap:5px;padding:5px 8px;background:#12111D;border-top:1px solid var(--line-strong);overflow-x:auto;scrollbar-width:none}
#acc button{flex:none;min-width:40px;height:40px;padding:0 10px;border-radius:7px;border:1px solid var(--line-strong);background:#1E1C30;color:#fff;font:600 16px var(--formula)}
#acc button.txt{font:600 14px var(--ui)}
#acc button.go{background:var(--hot);color:#0B0A12;border:0;margin-left:auto}
#acc button[hidden]{display:none}
@media (pointer:coarse){#acc{display:flex}}

/* Compact layout: the note docks above the formula bar; on a short, wide screen (a phone on its side) beside the grid */
#app.docked{grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto}
#app.side{grid-template-columns:minmax(230px,38%) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto}
#app.side>*{grid-column:1/-1}
#app.side>.topbar{grid-row:1}
#app.side>#note{grid-column:1;grid-row:2/4;overflow-y:auto;border-bottom:0;border-right:1px solid var(--line-strong)}
#app.side>.fbar{grid-column:2;grid-row:2}
#app.side>#gridwrap{grid-column:2;grid-row:3}
#app.side>#acc{grid-row:4}#app.side>.tabs{grid-row:5}#app.side>.status{grid-row:6}
@media (max-height:499px){.topbar{height:42px}#app.side #ntitle{font-size:17px}#app.side #nbody{font-size:13.5px;margin-bottom:6px}#app.side #ncode{font-size:13.5px}}
#note.dock{position:static;width:auto;max-width:none;border-radius:0;border:0;border-bottom:1px solid var(--line-strong);padding:11px 14px 10px;background:#0F0E19;backdrop-filter:none}
@media (max-width:819px){
  .topbar{height:46px}
  #ntitle{font-size:18px}#nbody{font-size:14px;margin-bottom:7px}#nwin{font-size:14px;margin-bottom:8px;padding-bottom:8px}#ncode{font-size:14px;margin-bottom:5px}#nhow{font-size:13px}
  .status .legal{white-space:nowrap}
  #stats,#zoomlabel{display:none}
  html.kbd #nbody,html.kbd #nhow,html.kbd .tabs,html.kbd .status,html.kbd #ntitle{display:none}
  html.kbd #note.dock{padding:7px 12px}
  html.kbd #nwin{margin:0 0 5px;padding-bottom:5px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Medals, replay and sharing */
#nmedals{display:flex;gap:4px;margin:0 0 12px}
#nmedals i{display:block;width:22px;height:22px;border-radius:4px;border:1px solid var(--line-strong)}
#nmedals i.m1{background:#B4683A}
#nmedals i.m2{background:#CFCDE0}
#nmedals i.m3{background:#FFD628;box-shadow:0 0 14px rgba(255,214,40,.45)}
.nbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#nremix,#nshare{display:inline-flex;align-items:center;gap:7px;margin:2px 0 0;font:600 14px var(--ui);height:36px;padding:0 15px;border-radius:18px;cursor:pointer;background:transparent;color:var(--text);border:1px solid var(--line-strong)}
#nremix:hover,#nshare:hover{border-color:var(--text)}
#nremix kbd{font:700 11px var(--formula);padding:1px 5px;border-radius:4px;border:1px solid var(--line-strong);color:var(--muted)}
#nsharetext{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:#000;border:1px solid var(--line-strong);font:500 14px/1.45 var(--formula);color:var(--text);white-space:pre-wrap;user-select:all}
/* Daily and Rush stand apart from the lessons */
.tab[data-sheet="Daily"],.tab[data-sheet="Rush"]{color:var(--hot)}
.tab[data-sheet="Daily"]{margin-left:12px;border-left:1px solid var(--line-strong)}
@media (pointer:coarse){#nremix kbd{display:none}}
/* Formulas are shown exactly as typed: no ligatures turning >= into one symbol */
.ed-mirror,.ed-input,#ncode,#nsharetext,#ncaps kbd,#namebox,#acomp,#sigtip{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}

/* Pages that scroll (html.doc): with the app, it keeps the whole first screen and the text follows.
   Pop-ups are placed in window coordinates, so they stay fixed while the page scrolls. */
html.doc .pop{position:fixed}
/* The line shown when scripts are off (the text below the app is styled by pages.css) */
.noscript{margin:0;padding:12px 16px;color:var(--text);font:14px/1.4 var(--ui)}

/* ---------- Access: focus that shows everywhere, medals that don't rely on colour ---------- */
#note:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
#note.dock:focus-visible{outline-offset:-2px}
.tab:focus-visible,input:focus-visible,#acc button:focus-visible{outline:2px solid var(--hot);outline-offset:-2px}
#nmedals i{display:flex;align-items:center;justify-content:center;font:800 12px/1 var(--ui);color:#0B0A12}
/* Settings: sound level and calm mode */
.prefpanel{position:absolute;z-index:30;right:0;top:calc(100% + 8px);width:300px;max-width:calc(100vw - 24px);padding:14px 16px;border-radius:12px;background:#17162A;border:1px solid var(--line-strong);box-shadow:0 12px 34px rgba(0,0,0,.6);color:var(--text);font:400 14px/1.4 var(--ui)}
.prefpanel[hidden]{display:none}
.prefpanel fieldset{border:0;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.prefpanel legend{padding:0;margin:0 0 6px;font-weight:600;color:#fff}
.prefpanel label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.prefpanel input{accent-color:var(--hot);margin:0}
.prefpanel .calmrow{font-weight:600;color:#fff}
#calmhelp{margin:4px 0 0 22px;color:var(--muted);font-size:13px}
/* Fresh sheets in the panel only while the top bar has given it up (topbar.js fit1) */
.prefrestart{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line-strong)}
.prefrestart p{margin:4px 0 0;color:var(--muted);font-size:13px}
.topbar:not(.fit1) .prefrestart{display:none}
/* Notes in the card: the sound chooser, what the site is, a place to stop */
#nsound{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:9px 0 0;font:500 13.5px var(--ui);color:var(--muted)}
#nsound[hidden],#ntrust[hidden],#nstop[hidden]{display:none}
#nsound button{height:30px;padding:0 11px;border-radius:15px;border:1px solid var(--line-strong);background:transparent;color:var(--text);font:600 13px var(--ui);cursor:pointer}
#nsound button[aria-pressed=true]{background:var(--hot);border-color:var(--hot);color:#0B0A12}
#ntrust{margin:9px 0 0;font:400 13px/1.35 var(--ui);color:var(--muted)}
/* A class link's marker (flow.js) */
#nclass{margin:0 0 6px;font-size:12px;opacity:.75}
#nstop{margin:0 0 10px;font:600 14px/1.35 var(--ui);color:#fff}

/* ---------- Phone keys: Enter always in reach, Fill down first and plain on fill steps ---------- */
#acc button.go{position:sticky;right:0;box-shadow:-8px 0 8px #12111D}
#acc.fillstep button:not([data-fill]):not([data-enter]){display:none}
#acc.fillstep button.fill{flex:1;background:var(--hot);color:#0B0A12;border:0;font:700 15px var(--ui)}
#acc.fillstep button.go{background:#1E1C30;color:#fff;border:1px solid var(--line-strong);box-shadow:none}
/* Narrow screens: Daily and Rush stay at the right end of the tab bar, so they never scroll out of sight */
@media (max-width:819px){
  .tab[data-sheet="Daily"],.tab[data-sheet="Rush"]{position:sticky;z-index:1;background:#0F0E19;padding:0 12px}
  .tab[data-sheet="Rush"]{right:0;width:58px}
  .tab[data-sheet="Daily"]{right:58px;margin-left:0;box-shadow:-10px 0 10px #0F0E19}
  .tab[data-sheet="Daily"][aria-selected=true],.tab[data-sheet="Rush"][aria-selected=true]{background:#0B0A12}
}

/* ---------- Coming back (back.js): the line at the top of the card, and the streak in the header ---------- */
#nlead{margin:0 0 8px;font:500 13.5px/1.4 var(--ui);color:var(--muted)}
#nlead[hidden],.topbar #streak[hidden]{display:none}

/* ---------- The top bar: never wider than the window, whatever it holds ----------
   Nothing in it shrinks or is cut, except the lesson squares (#pips), which only take the room left over and drop whole
   lessons; if any lesson doesn't fit, none show. When the rest doesn't fit, topbar.js gives way one step at a time, in this order, until it does: Fresh
   sheets goes, then the chain, then Sound and Settings become icons (their names stay), the streak keeps its mark and
   number, "Score" is left to screen readers, and the name becomes "xlsx". It measures, so it holds for any content and
   any width, with no widths written here. The bar clips sideways as a last resort, never downwards, so the settings
   panel hangs below it. */
#app{grid-template-columns:minmax(0,1fr)}
.topbar{display:flex;align-items:center;gap:clamp(8px,1.5vw,20px);height:52px;padding:0 clamp(8px,1.4vw,16px) 0 clamp(10px,1.6vw,18px);min-width:0;overflow-x:clip;background:#0B0A12;border-bottom:1px solid var(--line)}
.topbar>*,.topright>*,.topbar .opt>*,.topbar .must>*{flex-shrink:0}
.topbar .word{font:800 clamp(14px,calc(.5vw + 11px),19px)/1 var(--wide);font-stretch:150%;letter-spacing:-.01em;color:#fff;white-space:nowrap}
#pips{flex:1 1 0;flex-shrink:1;min-width:0;height:14px;overflow:clip;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.topright{margin-left:auto;display:flex;align-items:center;gap:clamp(6px,1.2vw,14px)}
.topbar .opt,.topbar .must{display:flex;align-items:center;gap:clamp(6px,1.2vw,14px)}
.topbar .opt:not(:has(>:not([hidden]):not(:empty))){display:none}
.topbar .must{position:relative}
.scorebox{display:flex;align-items:baseline;gap:7px;color:var(--muted);font-size:13px}
.tbtn{font:500 13px var(--ui);height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line-strong);background:transparent;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
@media (pointer:coarse){.topbar .tbtn{height:36px}}
.topbar #streak{display:inline-flex;align-items:center;font:500 12.5px var(--ui);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;padding:3px 9px 3px 7px;border:1px solid var(--line-strong);border-radius:11px}
.topbar #streak::before{content:"";flex:none;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--hot)}
/* The steps topbar.js takes, in order */
.topbar.fit1 #restart,.topbar.fit2 #chain,.topbar.fit4 #streak .stw{display:none}
/* The lesson squares show whole or not at all */
.topbar.nopips #pips{visibility:hidden}
.topbar.fit3 .tbtn{padding:0 10px;gap:0}
.topbar.fit3 #soundLabel,.topbar.fit3 #prefsLabel,.topbar.fit5 .scorelabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.topbar.fit6 .wlong{display:none}
/* Alone and at its smallest, the wide heavy cut squeezes the l between x and s until it reads as "x!sx": the short
   name is set at normal width with a little air between the letters */
.topbar.fit6 .word{font-stretch:100%;font-weight:750;letter-spacing:.04em}
/* The reading pages: the text below the app, and the pages without it. Same world as the app: the dark sheet,
   Anybody for headings, Instrument Sans for text, JetBrains Mono for formulas, and yellow where an answer is. */
:root{--body:#D3D1E6;--cell:#12111D;--gutter:#0F0E19;--lit:rgba(255,214,40,.15);--miss:#FFB4C3}
html.doc{scroll-padding-top:16px}
.content,.read{max-width:760px;margin:0 auto;padding:44px 16px 24px;color:var(--body);font:17px/1.65 var(--ui)}
.read{padding-top:36px}
.content p,.read p,.content li,.read li{max-width:66ch}
.content a,.read a,.foot a,.dochead a{color:var(--hot);text-underline-offset:3px;text-decoration-thickness:1px}
.content a:hover,.read a:hover{text-decoration-thickness:2px}
a:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--hot);outline-offset:2px;border-radius:2px}
.content h1,.read h1{margin:6px 0 14px;font:800 34px/1.12 var(--wide);font-stretch:128%;letter-spacing:-.012em;color:#fff;text-wrap:balance}
.content h2,.read h2{display:flex;align-items:baseline;gap:12px;margin:44px 0 10px;font:750 23px/1.2 var(--wide);font-stretch:118%;color:#fff}
/* A pip, as in the lesson strip at the top of the app */
.content h2::before,.read h2::before{content:"";flex:none;width:11px;height:11px;background:#1E1C30;border:1px solid var(--line-strong);transform:translateY(-1px)}
.content h3,.read h3{margin:26px 0 6px;font:700 18px/1.3 var(--ui);color:#fff}
.content strong,.read strong{color:#fff;font-weight:700}
.lede{font-size:19px;line-height:1.55;color:var(--text)}
.trust{display:inline-block;margin:4px 0 8px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--cell);color:#fff;font:600 15px/1.4 var(--ui)}
.crumbs{margin:0 0 4px;font:500 14px/1.4 var(--ui);color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 6px;color:var(--line-strong)}
.note{padding:12px 14px;border-left:3px solid var(--hot);background:var(--cell);border-radius:0 8px 8px 0}

/* A formula, as in the lesson card's chip; a value, as a cell */
code.f{padding:1px 7px 2px;border-radius:6px;background:#000;border:1px solid var(--line-strong);font:700 .86em/1.5 var(--formula);color:var(--hot);overflow-wrap:anywhere;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
code.f.bad{color:var(--miss);border-color:#5A2A3A}
.val{display:inline-block;padding:0 8px;border:1px solid var(--line-strong);background:var(--cell);color:#fff;font:600 .9em/1.6 var(--ui);font-variant-numeric:tabular-nums;white-space:pre}
.nw{white-space:nowrap}.nw>code.f{white-space:normal}
.val.lit{background:var(--lit);border-color:var(--hot);box-shadow:0 0 14px rgba(255,160,40,.28)}
.val.e{color:var(--danger);border-color:#5A2A3A}
kbd{display:inline-flex;align-items:baseline;gap:4px;padding:3px 8px 2px;border-radius:6px;background:#1E1C30;border:1px solid var(--line-strong);border-bottom-width:3px;font:700 .82em/1.4 var(--formula);color:#E4E2F4}
kbd small{font:500 .85em var(--ui);color:var(--muted)}

/* The sheet: column letters, row numbers, thin grid lines, and the answer lit */
figure.sheet{width:fit-content;max-width:100%;margin:22px 0 26px}
.xbar{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-bottom:0;border-radius:8px 8px 0 0;background:var(--gutter);font:13px/32px var(--formula);overflow:hidden}
.xbar .nb{flex:none;width:58px;text-align:center;color:var(--text);font-weight:700;border-right:1px solid var(--line)}
.xbar .fx{flex:none;width:30px;text-align:center;color:var(--hot);border-right:1px solid var(--line)}
.xbar .fv{padding:0 10px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-ligatures:none}
.sheetwrap{overflow-x:auto;border:1px solid var(--line-strong);border-radius:0 0 8px 8px;background:var(--paper);scrollbar-color:var(--line-strong) transparent}
figure.sheet:not(:has(.xbar)) .sheetwrap{border-radius:8px}
.sheetwrap table{border-collapse:collapse;font:14px/1.3 var(--ui);color:var(--text)}
.sheetwrap th{background:var(--gutter);color:var(--muted);font:500 12px/1 var(--formula);padding:6px 8px;border:1px solid var(--line);text-align:center;min-width:30px}
.sheetwrap thead th{border-top:0}.sheetwrap tr>:first-child{border-left:0}.sheetwrap tr:last-child>*{border-bottom:0}
.sheetwrap .corner{background:var(--gutter);border:1px solid var(--line);border-top:0;border-left:0}
.sheetwrap td{padding:6px 10px;border:1px solid var(--line);white-space:pre;min-width:44px}
.sheetwrap td.n{text-align:right;font-variant-numeric:tabular-nums}
.sheetwrap td.b{font-weight:700;color:#fff}
.sheetwrap td.e{text-align:center;color:var(--danger)}
.sheetwrap td.done{background:rgba(255,214,40,.05);color:#fff}
.sheetwrap td.lit{background:var(--lit);color:#fff;box-shadow:inset 0 0 0 2px var(--hot)}
.sheetwrap td.lit.e{color:#FFD9E0}

/* The steps, numbered like medal squares */
ol.steps{list-style:none;margin:18px 0 0;padding:0;counter-reset:none}
ol.steps>li{max-width:none;padding:16px 0 14px;border-top:1px solid var(--line)}
ol.steps h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:700 17px/1.3 var(--ui)}
.sn{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:5px;border:1px solid var(--line-strong);background:#1E1C30;color:var(--hot);font:700 13px/1 var(--formula)}
ol.steps p{margin:6px 0;font-size:16px}
ol.steps .miss{padding-left:12px;border-left:2px solid #5A2A3A;color:var(--body)}
.keys .os{display:inline-block;min-width:66px;color:var(--muted);font-size:14px}

/* Lists of lessons, as rows of a sheet with their row numbers */
ol.rows{list-style:none;margin:16px 0;padding:0;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:var(--paper)}
ol.rows>li{display:grid;grid-template-columns:40px 1fr;max-width:none;border-top:1px solid var(--line)}
ol.rows>li:first-child{border-top:0}
ol.rows .rn{display:grid;place-items:center;background:var(--gutter);color:var(--muted);font:500 12px/1 var(--formula);border-right:1px solid var(--line)}
ol.rows .rc{padding:10px 14px 11px;min-width:0}
ol.rows>li{position:relative}
ol.rows>li:hover{background:var(--cell)}
ol.rows .rc a{font:700 17px/1.3 var(--ui);color:#fff;text-decoration:none}
ol.rows .rc a::after{content:"";position:absolute;inset:0}
ol.rows .rc a:hover,ol.rows .rc a:focus-visible{color:var(--hot)}
ol.rows .rc span{display:block;font-size:15px;line-height:1.45;color:var(--muted)}
ol.rows li.next .rn{background:var(--lit);color:var(--hot)}

/* The progress page */
.ptable{width:100%}
.ptable thead th:not(:first-of-type){font:600 13px/1.2 var(--ui);color:var(--text);text-align:left;padding:8px 10px}
.ptable td.st{white-space:normal}
.medals{display:inline-flex;gap:3px;vertical-align:middle}
.medals i{display:block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line-strong);background:#1E1C30}
.medals i.m1{background:#B4683A;border-color:#B4683A}
.medals i.m2{background:#CFCDE0;border-color:#CFCDE0}
.medals i.m3{background:#FFD628;border-color:#FFD628;box-shadow:0 0 8px rgba(255,214,40,.45)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:16px 0;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.stats div{padding:12px 14px;border-left:1px solid var(--line);background:var(--cell)}
.stats div:first-child{border-left:0}
.stats dt{font-size:14px;color:var(--muted)}
.stats dd{margin:2px 0 0;font:800 26px/1.2 var(--wide);font-stretch:120%;color:#fff;font-variant-numeric:tabular-nums}
.box{margin:16px 0;padding:16px;border:1px solid var(--line-strong);border-radius:10px;background:var(--cell)}
.box p:first-child{margin-top:0}
textarea.code{display:block;width:100%;min-height:96px;margin:8px 0 10px;padding:10px 12px;border-radius:8px;border:1px solid var(--line-strong);background:#000;color:var(--text);font:500 13px/1.5 var(--formula);word-break:break-all;resize:vertical}
.btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--line-strong);background:transparent;color:var(--text);font:600 15px var(--ui);cursor:pointer}
.btn:hover{border-color:var(--text)}
.btn.go{background:var(--hot);border-color:var(--hot);color:#0B0A12}
.btn.danger{border-color:var(--danger);color:#FFD9E0}
/* Dark text on the red: about 6:1, where white would be about 3:1 */
.btn.danger.go{background:var(--danger);color:#0B0A12}
.msg{margin:10px 0 0;font-size:15px;color:var(--text)}
.msg:empty{margin:0}
.box>:last-child{margin-bottom:0}
.msg.bad{color:var(--miss)}
.read label{display:block;font-weight:600;color:#fff}
.read [hidden],.content [hidden]{display:none!important}
.switch{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.state{font:600 15px var(--ui);color:#fff}

/* The pages without the app: a header like the app's top bar */
.dochead{display:flex;align-items:center;gap:14px;height:52px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--ink)}
.dochead .word{color:#fff;text-decoration:none}
.dochead nav{margin-left:auto;display:flex;gap:16px}
.dochead nav a{color:var(--muted);text-decoration:none;font:500 14px var(--ui)}
.dochead nav a:hover{color:var(--text)}
.foot{width:min(728px,calc(100% - 32px));margin:56px auto 0;padding:20px 0 36px;border-top:1px solid var(--line);color:var(--muted);font:14px/1.5 var(--ui)}
.noscript{background:var(--cell);border-bottom:1px solid var(--line-strong)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:8px}
.foot nav a{color:var(--text)}
.foot p{margin:0}
pre.licence{max-height:420px;overflow:auto;padding:14px;border:1px solid var(--line-strong);border-radius:8px;background:#000;color:var(--body);font:12.5px/1.5 var(--formula);white-space:pre-wrap}
dl.facts{margin:14px 0}
dl.facts dt{margin-top:14px;font-weight:700;color:#fff}
dl.facts dd{margin:2px 0 0;max-width:66ch}

/* Touch only: the keyboard lesson needs a keyboard, so its page says so above the sheet, and the app gives up the
   line's height so it still fits the first screen */
.only-touch{display:none}
.page-lead{height:64px;margin:0;padding:0 16px;align-items:center;background:var(--cell);border-bottom:1px solid var(--hot);color:var(--text);font:500 14px/1.3 var(--ui);overflow:hidden}
.page-lead a{color:var(--hot);text-underline-offset:3px}
/* The app sets its own height on touch screens (src/play/wiring.js, to the visible viewport), so this has to win
   over that inline style; while the on-screen keyboard is up (html.kbd) the line steps aside and the app's own
   height applies again */
@media (pointer:coarse){.only-touch{display:block}.page-lead.only-touch{display:flex}html:not(.kbd) body:has(>.page-lead) #app{height:calc(100dvh - 64px)!important}html.kbd .page-lead{display:none!important}}
@media (max-width:640px){
  .sheetwrap td{padding:5px 7px;font-size:13px}
  .sheetwrap th{padding:5px 6px}
  .content,.read{font-size:16px;padding-top:32px}
  .content h1,.read h1{font-size:27px}
  .content h2,.read h2{font-size:20px;margin-top:36px}
  .lede{font-size:17px}
  .dochead .word{font-size:15px}
  .dochead nav{gap:12px}
  .stats dd{font-size:22px}
  .stats div:nth-child(3){border-left:0}
  .stats div:nth-child(n+3){border-top:1px solid var(--line)}
  /* The progress table stacks: each lesson is one row number beside its name, medals, worlds and status */
  .ptable thead{display:none}
  .ptable tr{display:grid;grid-template-columns:34px 1fr;border-top:1px solid var(--line)}
  .ptable tbody tr:first-child{border-top:0}
  .ptable th{grid-row:span 4;border:0;border-right:1px solid var(--line)}
  .ptable td{border:0;padding:3px 10px;white-space:normal}
  .ptable td.b{padding-top:9px}.ptable td.st{padding-bottom:9px}
  .ptable td.w::before{content:"Worlds: ";color:var(--muted)}
  .ptable td.st::before{content:"Status: ";color:var(--muted)}
}

@font-face{font-family:"Anybody";font-weight:50 900;font-stretch:50% 150%;font-display:swap;src:url(/fonts/anybody-latin-standard-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-stretch:100%;font-display:swap;src:url(/fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-stretch:100%;font-display:swap;src:url(/fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:700;font-stretch:100%;font-display:swap;src:url(/fonts/instrument-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-stretch:100%;font-display:swap;src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-stretch:100%;font-display:swap;src:url(/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2")}