/* learn.css - Brainlag Learn (maths and science). Built on brainlag.css tokens; light and dark follow the OS
   (or the site's theme switch). Mobile first: the player is one question per screen with a sticky bottom bar.
   No gradients, no pills, no cards inside cards: hierarchy comes from type, spacing and rules. */
:root{
  --ln-right:#13804f; --ln-right-bg:#edfbf0; --ln-wrong:#c0362c; --ln-wrong-bg:#ffe6e2; --ln-self:#1f6fb5; --ln-self-bg:#eff8ff;
  --ln-lip:#006b73; --ln-ease:cubic-bezier(.22,1,.36,1); --ln-spring:cubic-bezier(.34,1.56,.64,1);
}
:root[data-theme="dark"]{
  --ln-right:#3fd59a; --ln-right-bg:#10301f; --ln-wrong:#ff8a80; --ln-wrong-bg:#3a1a19; --ln-self:#7cc0f5; --ln-self-bg:#13304f; --ln-lip:#075a62;
}
body.ln{background:var(--paper)}

/* ---------------------------------------------------------------- hub and unit pages */
main.wrap.ln-main{max-width:var(--wrap);padding-top:28px;padding-bottom:8px}
.ln-main h1{margin:6px 0 10px}
.ln-lead{font-size:18px;color:var(--ink-2);max-width:62ch;line-height:1.55;margin:0 0 20px}
.ln-sub{color:var(--ink-3);margin:-6px 0 12px;font-size:15px}
.ln-crumb{font-size:14.5px;color:var(--ink-3);margin:0}
.ln-crumb a{color:var(--study-ink);font-weight:700}
.ln-subj{margin:34px 0 0}
.ln-units,.ln-qlist{list-style:none;margin:0;padding:0;border-top:2px solid var(--rule)}
.ln-units > li,.ln-qlist > li{border-bottom:2px solid var(--rule)}
.ln-units a,.ln-qlist a{display:grid;gap:3px;padding:16px 4px;color:var(--ink)}
.ln-qlist > li > span{display:block;padding:12px 4px 0}.ln-qlist > li > span.m{padding:2px 4px 12px}
.ln-units a:hover .t,.ln-qlist a:hover .t{color:var(--study-ink)}
.ln-units .t,.ln-qlist .t{font:600 19px/1.25 var(--f-display)}
.ln-units .d{color:var(--ink-2);font-size:16px;max-width:70ch}
.ln-units .m,.ln-qlist .m{color:var(--ink-3);font-size:14.5px}
.ln-more{margin:22px 0 0}.ln-more a{color:var(--study-ink);font-weight:700}
.ln-legal{margin:44px 0 0;color:var(--ink-3);font-size:13.5px;max-width:80ch;line-height:1.5}
.ln-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 56px}
@media (min-width:980px){.ln-cols{grid-template-columns:minmax(0,1fr) 340px}}
.ln-cols h2{font-size:21px;margin:26px 0 10px}
.ln-lessons{list-style:none;margin:0;padding:0}
.ln-lessons li a{display:grid;grid-template-columns:44px minmax(0,1fr) 28px;gap:14px;align-items:start;padding:14px 4px;border-bottom:2px solid var(--rule);color:var(--ink)}
.ln-lessons li:first-child a{border-top:2px solid var(--rule)}
.ln-lessons .n{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font:700 18px var(--f-display);background:var(--study-tint);color:var(--study-ink);box-shadow:inset 0 -3px 0 rgba(var(--ink-rgb),.12)}
.ln-lessons .body{display:grid;gap:3px}
.ln-lessons .t{font:600 19px/1.25 var(--f-display)}
.ln-lessons .d{color:var(--ink-2);font-size:15.5px}
.ln-lessons .m{color:var(--ink-3);font-size:14px}
.ln-lessons a:hover .t{color:var(--study-ink)}
.ln-lessons li.done .n{background:var(--study);color:#fff}
:root[data-theme="dark"] .ln-lessons li.done .n{color:#04161c}
.ln-lessons li.done .st::after{content:'';display:block;width:12px;height:22px;margin:8px 0 0 8px;border:solid var(--study-ink);border-width:0 4px 4px 0;transform:rotate(45deg)}
.ln-aside{padding-top:2px}
.ln-can{margin:0;padding-inline-start:20px;color:var(--ink-2)}.ln-can li{margin:0 0 6px}
.ln-spec{list-style:none;margin:0;padding:0;color:var(--ink-2);font-size:15px}
.ln-spec li{padding:8px 0;border-bottom:1px solid var(--rule)}.ln-spec span{color:var(--ink-3)}
.ln-due{margin:26px 0 0}.ln-due a{color:var(--study-ink);font-weight:700}

/* ---------------------------------------------------------------- the player */
body.ln-play{min-height:100dvh}
.lp{min-height:100dvh;display:flex;flex-direction:column}
.lp-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:12px max(16px,env(safe-area-inset-left)) 10px;background:var(--paper)}
.lp-x,.lp-snd{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--ink-3);background:none;border:0;cursor:pointer}
.lp-x:hover,.lp-snd:hover{color:var(--ink);background:var(--sunk)}
.lp-snd .off{display:none}.lp-snd.off .off{display:inline}.lp-snd.off .on{display:none}
.lp-bar{flex:1;height:16px;border-radius:8px;background:var(--sunk);overflow:hidden;position:relative}
.lp-bar > span{position:absolute;inset:0;background:var(--study);transform:translateX(-100%);border-radius:8px;
  transition:transform .7s var(--ln-spring);box-shadow:inset 0 4px 0 rgba(255,255,255,.28)}
.lp-bar.sheen::after{content:'';position:absolute;top:0;bottom:0;width:40%;inset-inline-start:-40%;background:rgba(255,255,255,.35);transform:skewX(-20deg);animation:lnSheen .45s .55s var(--ln-ease) both}
@keyframes lnSheen{to{inset-inline-start:110%}}
.lp-meta{flex:none;display:flex;gap:12px;align-items:center;font-weight:700;color:var(--ink-2);font-size:15px}
.lp-meta:empty{display:none}
.lp-combo{color:var(--gold-ink)}.lp-combo.pop{animation:lnPop .26s var(--ln-spring)}
.lp-clock{font-variant-numeric:tabular-nums}.lp-clock.low{color:var(--ln-wrong)}

.lp-stage{flex:1;width:100%;max-width:900px;margin:0 auto;padding:10px 16px 200px}
.lp-screen > h1,.lp-screen > h2.lp-h,.lq-title{font-size:clamp(23px,4.6vw,30px);margin:10px 0 14px;outline:none}
.lq-title .of{color:var(--ink-3);font-weight:500}
.lp-screen.enter{animation:lnIn .32s var(--ln-ease) both}
@keyframes lnIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.lp-prose{font-size:17.5px;line-height:1.65;color:var(--ink)}
.lp-prose p,.lp-prose ul,.lp-prose ol{max-width:66ch}
.lp-prose h3{margin:22px 0 6px}
.lp-prose code{font-family:var(--f-mono);background:var(--sunk);padding:1px 6px;border-radius:6px}
.lp-prose .fml{font:600 21px/1.6 var(--f-display);text-align:center;margin:18px 0;padding:14px 8px;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);max-width:none}
.lp-prose .ln-note{padding:10px 14px;background:var(--gold-tint);border-radius:var(--r1);color:var(--ink-2)}   /* a soft panel, never a left bar (owner, 8 Oct) */
.wk{counter-reset:wk;list-style:none;padding:0;margin:14px 0 18px;max-width:62ch}
.wk li{counter-increment:wk;display:grid;grid-template-columns:30px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule)}
.wk li::before{content:counter(wk);font-weight:700;color:var(--study-ink)}
figure.lgraph{margin:14px 0 18px;max-width:600px}
.lgr{width:100%;height:auto;display:block;font:500 12.5px var(--f-body);touch-action:manipulation}
/* a phone draws the graph 400 wide and shows it a little narrower, so its numbers grow to stay at 12 px or more on
   screen (efficacy, 11 Oct: a science graph's ticks at 11.2 px) */
@media (max-width:519px){.lgr{font-size:13.8px}}
.lgr .mn{stroke:rgba(var(--ink-rgb),.08);stroke-width:1}.lgr .mj{stroke:rgba(var(--ink-rgb),.2);stroke-width:1}
.lgr .axes line{stroke:var(--ink);stroke-width:2}
.lgr text{fill:var(--ink-2)}.lgr .lab{fill:var(--ink);font-weight:700;font-size:13.5px}
.lgr .ln{fill:none;stroke:var(--study-ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.lgr .tan{stroke:var(--pink-ink);stroke-width:2.5;stroke-dasharray:7 5}
.lgr .pt{fill:var(--ink)}.lgr .pl{fill:var(--ink);font-weight:700;font-size:14px}
.lgr .hit{fill:transparent;cursor:crosshair}
.lgr .cross{stroke:var(--blue-ink);stroke-width:2.6;stroke-linecap:round;pointer-events:none}
/* drawn answers (learn-draw.js): the chosen point stands out; the right points after marking are study-ink rings; the
   keyboard rows are 44 px targets */
.lgr .cross.is-on{stroke-width:3.4}
.lgr .ld-ans .ring{fill:none;stroke:var(--study-ink);stroke-width:2.6;pointer-events:none}.lgr .pl.ans{fill:var(--study-ink)}
.ld-rows{display:grid;gap:8px;margin:10px 0 0}
.ld-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px 12px;max-width:460px}
.ld-name{min-width:44px;min-height:44px;padding:0 12px;display:inline-flex;align-items:center;font-weight:700;color:var(--ink)}
button.ld-name{border:2px solid var(--rule-2);border-radius:12px;background:var(--surface);cursor:pointer;font:inherit;font-weight:700}
button.ld-name[aria-pressed="true"]{border-color:var(--study);background:var(--study-tint)}
.ld-c{display:flex;align-items:center;gap:6px;min-width:0}.ld-c .lq-cell{width:100%;min-width:0;min-height:44px}.ld-c span{white-space:nowrap}
.lgr .ld-line{stroke:var(--blue-ink);stroke-width:2.6;stroke-linecap:round;pointer-events:none}
.lgr .ld-line.ans{stroke:var(--study-ink);stroke-dasharray:9 6}
.lgr .ld-handle{fill:var(--surface);stroke:var(--blue-ink);stroke-width:2.6;pointer-events:none}
.ldraw.is-drag .lgr{touch-action:none}   /* dragging a handle on the grid does not scroll the page */
.lgr .ld-bar{fill:color-mix(in srgb,var(--blue-ink) 22%,transparent);stroke:var(--blue-ink);stroke-width:2.6;pointer-events:none}
.lgr .ld-bar.is-given{fill:color-mix(in srgb,var(--ink-2) 16%,transparent);stroke:var(--ink-2)}
.lgr .ld-bar.ans{fill:none;stroke:var(--study-ink);stroke-dasharray:9 6}
.lgr .ld-cat{fill:var(--ink-2);font-size:13px}
.lgr .ld-cell{fill:color-mix(in srgb,var(--blue-ink) 30%,transparent);stroke:none;pointer-events:none}
.lgr .ld-cell.ans{fill:none;stroke:var(--study-ink);stroke-width:2.6;stroke-dasharray:7 5}
.lgr .ld-focus{fill:none;stroke:var(--ink);stroke-width:3;pointer-events:none}
.ldraw .lgr:focus{outline:none}.ldraw .lgr:focus-visible{outline:3px solid var(--study);outline-offset:3px;border-radius:6px}
/* the keyboard rows line up in one grid, the names in one column */
.ld-rows:not(.is-one){grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);max-width:520px;align-items:center;column-gap:12px}.ld-rows:not(.is-one) > .ld-row{display:contents}
.ld-shapes{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}.ld-shapes .msh{flex:1 0 100%;margin:0}
.ld-shape{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 14px 6px 8px;border:2px solid var(--rule-2);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.ld-shape svg{flex:none}.ld-shape path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.ld-shape[aria-checked="true"]{border-color:var(--study);background:var(--study-tint)}
.ld-shape.is-right{box-shadow:0 0 0 3px var(--study-ink)}
.lgr .ld-arc{fill:none;stroke:var(--ink-2);stroke-width:2;pointer-events:none}
.ld-tools{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.ld-tool{min-height:44px;padding:0 16px;border:2px solid var(--rule-2);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.ld-tool[aria-pressed="true"]{border-color:var(--study);background:var(--study-tint)}
.ld-kb{margin:10px 0 0}.ld-kbb{min-height:44px;padding:0;border:0;background:none;display:flex;align-items:center;cursor:pointer;color:var(--study-ink);font:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ld-kbp[hidden]{display:none}.ld-kbp .lq-hint{margin:4px 0 8px}
.ldraw .lgr .ticks text,.ldraw .lgr .pl{paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}   /* numbers and names readable where an arc or line crosses them */
.ld-kbrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;max-width:520px}.ld-kbrow .ld-tool{grid-column:1/-1;justify-self:start}
.ld-row.is-one{grid-template-columns:minmax(0,1fr)}.ld-row.is-one .ld-c{justify-content:space-between}.ld-row.is-one .ld-name{min-height:0;padding:0}.ld-row.is-one .lq-cell{max-width:8em}
.lq-stem .qt,.lp-prose table{border-collapse:collapse;margin:10px 0 14px;font-variant-numeric:tabular-nums}
.lq-stem .qt th,.lq-stem .qt td{border:2px solid var(--rule-2);padding:6px 10px;text-align:center}
.lq-stem .qt th{text-align:start;font-weight:600;color:var(--ink-2)}
.lq-stem{font-size:17.5px;line-height:1.6}

/* tools inside a lesson: the real tool page in a frame, its chrome hidden */
.lp-try .lp-tool,.lp-tool{margin:16px -4px 0;position:relative}
.lp-tool iframe{display:block;width:100%;border:0;background:transparent;opacity:0;transition:opacity .25s var(--ln-ease)}
.lp-tool.ready iframe{opacity:1}
.lp-toolnote{font-size:14px;margin:8px 4px 0}.lp-toolnote a{color:var(--study-ink);font-weight:700}
@media (min-width:1000px){.lp-stage:has(.lp-try.is-on){max-width:1100px}}

/* a question */
.lq-part{padding:16px 0 18px;border-top:2px solid var(--rule)}
.lq-part:first-of-type{border-top:0}
.lq-prompt{display:flex;gap:4px 10px;align-items:baseline;font-size:17.5px;line-height:1.55}.lq-prompt .pt{flex:1;min-width:0}
.lq-prompt .pl{font-weight:700;color:var(--ink-2)}
.lq-prompt .pt p{margin:0}
.lq-prompt .lq-mk{color:var(--ink-3);font-size:14px;white-space:nowrap}
.lq-in{margin:12px 0 0}
.lq-in.shake{animation:lnShake .32s var(--ln-ease)}
@keyframes lnShake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.lq-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lq-line .lab{font-weight:700;color:var(--ink-2);min-width:4ch}
.lq-line .u{font-weight:700;color:var(--ink-2);font-size:18px}
.lq-field,.lq-cell,.lq-write{font:500 20px var(--f-body);color:var(--ink);background:var(--surface);border:2px solid var(--rule-2);border-radius:14px;padding:10px 14px;min-height:52px;
  transition:border-color .15s var(--ln-ease),box-shadow .15s var(--ln-ease)}
.lq-field{width:min(240px,100%)}.lq-field.wide{width:min(440px,100%)}.lq-field.unit{width:120px}
.lq-cell{width:84px;min-height:46px;text-align:center;padding:8px 6px;font-size:18px}
.lq-write{width:100%;font-size:17px;line-height:1.5;min-height:140px;resize:vertical}
.lq-field:focus,.lq-cell:focus,.lq-write:focus{outline:none;border-color:var(--study);box-shadow:0 0 0 4px color-mix(in srgb,var(--study) 22%,transparent)}
.lq-field[readonly],.lq-cell[readonly]{background:var(--sunk)}
.lq-syms{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.lq-sym{min-width:48px;height:44px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:600 18px var(--f-body);cursor:pointer;box-shadow:inset 0 -3px 0 rgba(var(--ink-rgb),.1)}
.lq-sym:active{transform:translateY(2px);box-shadow:none}
.lq-read{margin:8px 0 0;font-size:14.5px;color:var(--ink-3);min-height:1.4em}.lq-read.bad{color:var(--ln-wrong)}
.lq-hint{color:var(--ink-3);font-size:14.5px;margin:8px 0}
.lq-hinted{margin:8px 0 0;padding:8px 12px;background:var(--study-tint);border-radius:var(--r1);color:var(--ink-2);font-size:15.5px}
.lq-scroll{overflow-x:auto;padding-bottom:4px}
.lq-table{border-collapse:collapse;font-variant-numeric:tabular-nums}
.lq-table th,.lq-table td{border:2px solid var(--rule-2);padding:6px;text-align:center;min-width:64px;font-size:16px}
.lq-table th{font-weight:600;color:var(--ink-2)}
.lq-plotin{display:flex;flex-wrap:wrap;gap:8px 14px}
.lq-plotin .pi{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--ink-2)}
.lq-plotin .lq-cell{width:70px}

/* answer tiles */
.t-mcq{display:grid;gap:12px}
@media (min-width:640px){.t-mcq:has(.mini){grid-template-columns:repeat(2,minmax(0,1fr))}}
.lq-tile{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:12px 16px;text-align:start;font:500 18px/1.35 var(--f-body);color:var(--ink);
  background:var(--surface);border:2px solid var(--rule-2);border-radius:16px;box-shadow:0 4px 0 var(--rule-2);cursor:pointer;
  transition:border-color .12s var(--ln-ease),background-color .12s var(--ln-ease),box-shadow .09s var(--ln-ease),transform .09s var(--ln-spring)}
.lq-tile .k{flex:none;width:30px;height:30px;border-radius:9px;border:2px solid var(--rule-2);display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--ink-3)}
.lq-tile:hover{border-color:color-mix(in srgb,var(--study) 55%,var(--rule-2))}
.lq-tile:active{transform:translateY(4px);box-shadow:0 0 0 var(--rule-2)}
.lq-tile[aria-pressed="true"]{border-color:var(--study);background:var(--study-tint);box-shadow:0 4px 0 var(--study)}
.lq-tile[aria-pressed="true"] .k{border-color:var(--study);color:var(--study-ink)}
.lq-tile.pop{animation:lnTile .22s var(--ln-spring)}
@keyframes lnTile{0%{transform:scale(.96)}40%{transform:scale(1.04)}100%{transform:none}}
.lq-tile.right{border-color:var(--ln-right);background:var(--ln-right-bg);box-shadow:0 4px 0 var(--ln-right)}
.lq-tile.wrong{border-color:var(--ln-wrong);background:var(--ln-wrong-bg);box-shadow:0 4px 0 var(--ln-wrong)}
.lq-tile:disabled{cursor:default}
.lq-tile .mini{display:block;width:132px;height:auto}
.mini .ax{stroke:var(--ink-3);stroke-width:1.5}.mini .cv{fill:none;stroke:var(--study-ink);stroke-width:3}.mini text{font:600 11px var(--f-body);fill:var(--ink-2)}

/* results inside a part */
.lq-res:empty{display:none}
.lq-res{margin:12px 0 0}
.lq-res .sc{margin:0;font-size:15.5px}
.lq-part.is-right .sc b{color:var(--ln-right)}.lq-part.is-wrong .sc b{color:var(--ln-wrong)}.lq-part.is-part .sc b{color:var(--gold-ink)}
.lq-res .say{margin:4px 0 0;color:var(--ink-2)}
.lq-res .ans{margin:8px 0 0;font-weight:700}
.ms{margin:12px 0 0;padding:12px 0 0;border-top:1px dashed var(--rule-2)}
.msh{margin:0 0 6px;font-weight:700;color:var(--ink-2);font-size:15px}
.ms ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ms li{font-size:15.5px;line-height:1.45}
.ms label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.ms input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--study);flex:none}
.ms .sch b{display:inline-block;min-width:2.4em;color:var(--study-ink)}
.lv{display:grid;gap:8px}
.lvl{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:2px solid var(--rule);border-radius:14px;cursor:pointer}
.lvl:has(input:checked){border-color:var(--study);background:var(--study-tint)}
.lv.is-auto .lvl{cursor:default}.lv.is-auto .lvl.is-on{border-color:var(--study);background:var(--study-tint)}   /* the level the ticked points reach */
.lq-ws{margin:22px 0 0;padding:16px 0 0;border-top:2px solid var(--rule)}
.lq-ws h2{font-size:19px;margin:0 0 8px}
.lq-ws ol{margin:0;padding-inline-start:22px;display:grid;gap:6px;font-size:16.5px}
.lq-ws ol{grid-template-columns:minmax(0,1fr)}.lq-ws ol > li{min-width:0}.lq-ws pre{max-width:100%;overflow-x:auto}   /* a worked solution's code scrolls in its own box on a phone (audit, 11 Oct: up to 198 px past the edge) */
.lq-ws .own{margin:10px 0 0;color:var(--ink-3);font-size:13.5px}
.lp-loading,.lp-err{color:var(--ink-3);padding:30px 0}

/* bottom bar and feedback sheet */
.lp-foot{position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:30;background:var(--paper);border-top:2px solid var(--rule)}
.lp-sheet{max-width:900px;margin:0 auto;padding:0 16px}
.lp-sheet:empty{display:none}
.lp-sheet.is-right,.lp-sheet.is-wrong,.lp-sheet.is-neutral{padding-top:16px}
.lp-foot:has(.lp-sheet.is-right){background:var(--ln-right-bg);border-top-color:transparent}
.lp-foot:has(.lp-sheet.is-wrong){background:var(--ln-wrong-bg);border-top-color:transparent}
.lp-foot:has(.lp-sheet.is-neutral){background:var(--ln-self-bg);border-top-color:transparent}
.lp-sheet.rise{animation:lnRise .3s var(--ln-ease)}
@keyframes lnRise{0%{transform:translateY(100%)}62%{transform:translateY(-6px)}100%{transform:none}}
.lp-sh .t{margin:0;font:700 22px var(--f-display)}
.is-right .lp-sh .t{color:var(--ln-right)}.is-wrong .lp-sh .t{color:var(--ln-wrong)}.is-neutral .lp-sh .t{color:var(--ln-self)}
.lp-sh .l{margin:4px 0 0;color:var(--ink);max-width:62ch}
/* a right answer: "Correct +2" and "2 of 2 marks. First try." on one line, the rest below (owner, 11 Oct: less text, no scrolling at 320) */
.is-right .lp-shx{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}.is-right .lp-shx>*{flex:1 0 100%;min-width:0}
.is-right .lp-shx>.t{flex:0 0 auto}.is-right .lp-shx>.t+.l{flex:1 1 0;min-width:6em;margin:0}
.lp-link{background:none;border:0;padding:6px 0;margin:4px 0 0;color:var(--study-ink);font:700 15.5px var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lp-actions{max-width:900px;margin:0 auto;display:flex;gap:12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
.lp-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 18px;border-radius:16px;border:0;cursor:pointer;
  font:700 17px var(--f-body);letter-spacing:.01em;text-align:center;background:var(--study-btn);color:var(--on-study-btn);box-shadow:0 4px 0 var(--study-btn-lip);
  transition:transform .09s var(--ln-spring),box-shadow .09s var(--ln-ease),background-color .15s var(--ln-ease)}
.lp-btn:not(:disabled):hover{background:var(--study-btn-hover)}
.lp-btn:active{transform:translateY(4px);background:var(--study-btn-press);box-shadow:0 0 0 var(--study-btn-lip);transition-duration:0s}
.lp-btn:disabled{background:var(--sunk);color:var(--ink-3);box-shadow:inset 0 0 0 2px var(--btn-off-edge),0 4px 0 var(--rule-2);cursor:default;transform:none}
.lp-btn.quiet,:root[data-theme="dark"] .lp-btn.quiet{background:var(--btn-2);color:var(--ink);border:2px solid var(--btn-2-edge);box-shadow:0 4px 0 var(--btn-2-lip)}
.lp-foot:has(.is-right) .lp-btn:not(.quiet){background:var(--ln-right);box-shadow:0 4px 0 color-mix(in srgb,var(--ln-right) 70%,#000)}
.lp-foot:has(.is-wrong) .lp-btn:not(.quiet){background:var(--ln-wrong);box-shadow:0 4px 0 color-mix(in srgb,var(--ln-wrong) 70%,#000)}
:root[data-theme="dark"] .lp-foot:has(.is-wrong) .lp-btn:not(.quiet),:root[data-theme="dark"] .lp-foot:has(.is-right) .lp-btn:not(.quiet){color:#0b1626}
@media (min-width:700px){.lp-actions{justify-content:flex-end}.lp-btn{flex:0 0 auto;min-width:180px}}

/* number keypad (touch screens) */
.lp-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:520px;margin:0 auto;padding:12px 16px 0}
.lp-key{min-height:50px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:600 21px var(--f-body);box-shadow:0 3px 0 var(--rule-2)}
.lp-key:active{transform:translateY(3px);box-shadow:none}
.lp-key.wide{background:var(--sunk)}
body.pad-on .lp-stage{padding-bottom:440px}

/* the end of a lesson or test */
.lp-done{text-align:center;position:relative;padding-top:10px}
.lp-done > h1{font-size:clamp(28px,6vw,38px);animation:lnRiseT .3s .3s var(--ln-spring) both}
@keyframes lnRiseT{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ln-noodle{display:block;width:88px;height:91px;margin:8px auto 0}
.ln-noodle.hop{animation:lnHop .6s var(--ln-ease)}
@keyframes lnHop{0%{transform:translateY(3px)}20%{transform:translateY(-16px)}50%{transform:translateY(0)}65%{transform:translateY(-4px)}100%{transform:none}}
.lp-sub{color:var(--ink-2);margin:4px auto 0;max-width:56ch}
.lp-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 40px;margin:24px 0 8px}
.lp-stats > div{display:grid;justify-items:center;gap:2px;animation:lnRiseT .3s var(--ln-ease) both}
.lp-stats > div:nth-child(1){animation-delay:.65s}.lp-stats > div:nth-child(2){animation-delay:.8s}.lp-stats > div:nth-child(3){animation-delay:.95s}
.lp-stats dt{color:var(--ink-3);font-size:14px;font-weight:600}
.lp-stats dd{margin:0;font:700 34px var(--f-display);color:var(--study-ink);font-variant-numeric:tabular-nums}
.lp-stats span{color:var(--ink-3);font-size:14px}
.lp-intro .lp-stats{justify-content:flex-start}.lp-intro{text-align:start}
.lp-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lp-result{text-align:start}.lp-result > h1,.lp-result > .ln-noodle{text-align:center}
.lp-result .lp-stats{justify-content:center}
.lp-result h2{font-size:20px;margin:28px 0 10px}
.lp-bars{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lp-bars li{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,1fr) 56px;gap:12px;align-items:center;font-size:15.5px}
.lp-bars .bar{display:block;align-self:center;height:12px;border-radius:6px;background:var(--sunk);overflow:hidden}
.lp-bars .bar i{display:block;width:100%;height:100%;background:var(--study);transform-origin:left}
.lp-bars .v{text-align:end;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.lp-rq{border-top:2px solid var(--rule)}
.lp-rq summary{display:flex;justify-content:space-between;gap:12px;padding:14px 2px;cursor:pointer;font-weight:600}
.lp-rq .lq{padding:0 0 16px}
.lp-jump{padding-inline-start:22px}
.lp-list h2{font-size:20px;margin:26px 0 8px}
.lp-lock{text-align:start}.lp-lock .ln-noodle{margin:6px 0 0}
.lp-facts{color:var(--ink-3)}
.lp-plusline{margin:22px 0 0;font-weight:600}.lp-plusline a{color:var(--study-ink)}
.lp-lock-in{display:flex;gap:16px;align-items:flex-start}.lp-lock-in .ln-noodle{margin:0;flex:none}.lp-lock-in a{color:var(--study-ink);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .lp-screen.enter,.lp-sheet.rise,.lq-tile.pop,.lq-in.shake,.ln-noodle.hop,.lp-done > h1,.lp-stats > div,.lp-combo.pop{animation:none}
  .lp-bar > span{transition:none}.lp-bar.sheen::after{display:none}
}
@keyframes lnPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.lq-intro{margin:6px 0 4px;padding:0 0 12px;border-bottom:2px solid var(--rule);color:var(--ink-2);font-size:16.5px}
.lq-intro p{margin:0 0 6px}.lq-introt{font-weight:700;color:var(--study-ink)}
.lp-stats dd span{font:inherit;color:inherit}

/* ================================================================ October 2026: motion and the streak (learn-fx.js)
   Timings and reasons: handoff-2026-10-06/LEARN_MOTION_SPEC.md. Transform and opacity only; Noodle never scales. */
/* a wide table in a lesson scrolls inside itself instead of widening the page on a phone */
.lp-prose table{display:block;max-width:100%;overflow-x:auto}
/* the player never scrolls sideways: a screen slides in from 18 px right, inside the stage */
.lp-stage{overflow-x:clip}

/* the feedback sheet: a mark that pops, the title lands a frame after the bar rises */
.lp-sh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.lp-shx{min-width:0}
.lp-mk{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;margin-top:-3px}
.lp-mk svg{width:22px;height:22px}
.is-right .lp-mk{background:var(--ln-right)}.is-wrong .lp-mk{background:var(--ln-wrong)}.is-neutral .lp-mk{background:var(--ln-self)}
:root[data-theme="dark"] .lp-mk{color:#0b1626}
.lp-sheet:not(.again) .lp-mk{animation:lnMark .36s .06s var(--ln-spring) both}
.lp-sheet:not(.again) .lp-sh .t{animation:lnLand .26s .04s var(--ln-ease) both}
@keyframes lnMark{from{transform:scale(.4) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
@keyframes lnLand{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* buttons: the face drops onto its lip at once, springs back in 90 ms */
.lp-btn:not(:disabled):active{filter:brightness(.96)}

/* Noodle stands on the action bar, right-hand end, feet on its top edge; one fixed box, so he never changes size */
.lp-coach{position:absolute;inset-inline-end:max(10px,calc(50% - 440px));bottom:calc(100% - 5px);width:90px;height:93px;pointer-events:none;z-index:1;transition:opacity .18s var(--ln-ease),visibility .18s var(--ln-ease)}
.ln-coach{display:block}
.ln-layer{position:absolute;inset:0}
.ln-layer svg{display:block;width:100%;height:100%;overflow:visible}
body.pad-on .lp-coach{opacity:0;visibility:hidden}
body.coach-off .lp-coach{display:none}
@media (max-height:600px){.lp-coach{display:none}}

/* top bar: room for the bar on a phone; the vibration switch (Android only) */
@media (max-width:440px){.lp-top{gap:6px;padding-inline-start:10px;padding-inline-end:10px}.lp-x,.lp-snd{width:40px;height:40px}.lp-combo .w{display:none}}
.lp-combo{display:inline-flex;align-items:center;gap:4px}
.lp-combo svg{flex:none}

/* combo: from three first tries in a row the bar warms to gold, glows, and a light runs along the fill */
.lp-bar{transition:box-shadow .3s var(--ln-ease)}
.lp-bar > span{overflow:hidden;transition:transform .7s var(--ln-spring),background-color .3s var(--ln-ease)}
.lp-bar.is-combo{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 32%,transparent),0 0 16px color-mix(in srgb,var(--gold) 50%,transparent)}
.lp-bar.is-combo > span{background:var(--gold)}
.lp-bar.is-combo > span::after{content:'';position:absolute;top:0;bottom:0;inset-inline-start:0;width:30%;background:rgba(255,255,255,.45);transform:translateX(-120%) skewX(-20deg);animation:lnComboRun 1.6s .2s var(--ease-io,cubic-bezier(.45,0,.55,1)) infinite}
@keyframes lnComboRun{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(380%) skewX(-20deg)}}

/* lesson complete: Noodle, then three figures that count up */
.lp-coach-big{position:relative;display:block;width:124px;height:128px;margin:0 auto}
.lp-done-fx > h1{animation:none}
.lp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;max-width:480px;margin:22px auto 10px}
.lp-tiles > div{display:grid;justify-items:center;gap:2px;padding:10px 4px 12px;border:2px solid var(--rule-2);border-radius:16px;box-shadow:0 4px 0 var(--rule-2);background:var(--surface)}
.lp-tiles dt{font-size:13.5px;font-weight:700;color:var(--ink-3)}
.lp-tiles dd{margin:0;font:700 30px/1.15 var(--f-display);font-variant-numeric:tabular-nums}
.lp-tiles .st-xp{border-color:color-mix(in srgb,var(--gold) 70%,var(--rule-2));box-shadow:0 4px 0 color-mix(in srgb,var(--gold) 70%,var(--rule-2))}
.lp-tiles .st-xp dd{color:var(--gold-ink)}
.lp-tiles .st-acc{border-color:color-mix(in srgb,var(--ln-right) 55%,var(--rule-2));box-shadow:0 4px 0 color-mix(in srgb,var(--ln-right) 55%,var(--rule-2))}
.lp-tiles .st-acc dd{color:var(--ln-right)}
.lp-tiles .st-time dd{color:var(--study-ink)}
.lp-facts2{font-size:15px;color:var(--ink-3)}

/* the streak screen */
.lp-streak{text-align:center;padding-top:4px}
.sk-stage{display:flex;justify-content:center;align-items:flex-end;height:178px;margin:6px auto 0}
.sk-coach{position:relative;display:block;width:104px;height:108px;margin:0 -6px 0 0}
.sk-flame{display:block;font-size:128px;line-height:0;margin-bottom:6px}
.sk-flame .blk-flame{vertical-align:bottom}
.sk-num{margin:6px 0 0;font:800 64px/1 var(--f-display);color:#e8641e;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .sk-num{color:#ff9a5c}
.sk-roll{display:inline-grid;overflow:hidden;padding:0 4px}
.sk-roll > span{grid-area:1/1;display:block}
.lp-streak > h1{font-size:22px;margin:4px 0 16px}
.sk-week{display:flex;justify-content:center;gap:6px;list-style:none;padding:0;margin:0 auto 14px;max-width:340px}
.sk-week li{flex:1;display:grid;justify-items:center;gap:6px;max-width:42px}
.sk-week .wd{font-size:13px;font-weight:700;color:var(--ink-3)}
.sk-week .is-now .wd{color:var(--ink)}
.sk-week .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--rule-2);background:var(--surface);color:#fff}
.sk-week .dot svg{width:18px;height:18px}
.sk-week .is-done .dot{background:#ff7a3d;border-color:#e55e00}
.sk-week .is-rest .dot{background:#dcf0ff;border-color:#8eaed4;color:#0561a1}
.sk-week .is-today .dot{border-style:dashed;border-color:#ff7a3d}
.sk-line{max-width:34ch}

/* the course path: keycap nodes joined by a line; done (gold, a tick), current (teal, a soft ring), open, Plus */
.ln-lessons.is-path li a{grid-template-columns:56px minmax(0,1fr);gap:16px;padding:12px 4px 20px;border:0;position:relative}
.ln-lessons.is-path li:first-child a{border-top:0}
.ln-lessons.is-path .st{display:none}
.ln-lessons.is-path .n{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;font-size:19px;background:var(--sunk);color:var(--ink-3);box-shadow:0 5px 0 var(--rule-2);transition:transform .09s var(--ln-spring),box-shadow .09s var(--ln-spring)}
.ln-lessons.is-path a:active .n{transform:translateY(4px);box-shadow:0 1px 0 var(--rule-2);transition-duration:0s}
.ln-lessons.is-path .n svg{width:26px;height:26px}
.ln-lessons.is-path li.is-done .n{background:var(--gold);color:#472d00;box-shadow:0 5px 0 #b38500}
.ln-lessons.is-path li.is-current .n{background:var(--study);color:#fff;box-shadow:0 5px 0 var(--ln-lip)}
:root[data-theme="dark"] .ln-lessons.is-path li.is-current .n{color:#04161c}
.ln-lessons.is-path li.is-current .n::before{content:'';position:absolute;inset:-9px -11.5px -14px;border-radius:50%;border:3px solid var(--study);opacity:.45;animation:lnRing 2s var(--ease-io,cubic-bezier(.45,0,.55,1)) infinite}
@keyframes lnRing{0%,100%{transform:scale(.94);opacity:.5}50%{transform:scale(1.04);opacity:.18}}
.ln-lessons.is-path li.is-current .t{color:var(--study-ink)}
.ln-lessons.is-path li.is-lock .n{color:var(--ink-3)}
.ln-seg{position:absolute;inset-inline-start:32px;top:76px;bottom:-12px;width:5px;margin-inline-start:-2.5px;border-radius:3px;background:var(--rule-2);overflow:hidden}
.ln-seg i{display:block;height:100%;background:var(--gold);transform-origin:50% 0;transform:scaleY(0)}
.ln-lessons.is-path li.is-done .ln-seg i{transform:none}
.ln-ring{position:absolute;inset:-6px;border-radius:50%;border:4px solid var(--study);pointer-events:none;opacity:0}

/* the streak on the hub and unit pages */
.ln-streak{float:inline-end;display:inline-flex;align-items:center;gap:6px;margin:2px 0 0 12px;font:800 20px/1 var(--f-display);color:#e8641e;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .ln-streak{color:#ff9a5c}
.ln-streak .blk-flame{width:22px;vertical-align:middle}
.ln-streak.is-out,.ln-streak.is-frozen{color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  .lp-sheet .lp-mk,.lp-sh .t,.lp-bar.is-combo > span::after,.ln-lessons.is-path li.is-current .n::before{animation:none!important}
  .lp-bar,.lp-bar > span,.lp-coach,.ln-lessons.is-path .n{transition:none}
}

/* ================================================================ October 2026: how a question reads
   Measured across every template (docs/status/QUESTION_VISUAL_AUDIT.md); learn.js polish() does the text side. */
/* superscripts and subscripts drawn in the body face (Onest has no ⁴ to ⁹, ⁻ or ₀ to ₉), without opening the line */
.lx-s{font-size:.72em;line-height:0;position:relative;vertical-align:baseline}
sup.lx-s{top:-.52em}
sub.lx-s{top:.26em}
.lx-nw{white-space:nowrap;word-spacing:-.07em}   /* a no-break space, narrowed to about a fifth of an em */
.lq-tile .c{text-wrap:balance}
.lq-stem p,.lq-prompt .pt,.lq-res .say,.lq-ws li,.lp-sh .l,.ms li{text-wrap:pretty}
/* tables: proportional figures. Onest's tabular figures centre a narrow 1 in a wide slot and leave a gap after the
   minus, which read as "1 3" and "- 6"; static numbers here do not change, so they do not need to line up digit by digit */
.lq-stem .qt,.lq-table,.lp-prose table,.lq-res table,.lq-ws table{font-variant-numeric:normal}
.lq-stem .qt th,.lp-prose th,.lq-table th{overflow-wrap:normal;hyphens:manual}
.lq td.n{white-space:nowrap}
/* a table scrolls inside its own box, with a soft shadow on the side that has more */
.lq-tscroll{max-width:100%;overflow-x:auto;margin:10px 0 14px;overscroll-behavior-x:contain;
  background:linear-gradient(90deg,var(--paper) 40%,rgba(var(--ink-rgb),0)) left center/28px 100% no-repeat local,
    linear-gradient(270deg,var(--paper) 40%,rgba(var(--ink-rgb),0)) right center/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(var(--ink-rgb),.2),rgba(var(--ink-rgb),0)) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(var(--ink-rgb),.2),rgba(var(--ink-rgb),0)) right center/12px 100% no-repeat scroll}
.lq-tscroll > table,.lp-prose .lq-tscroll > table{display:table;margin:0;max-width:none;overflow:visible}
.lq-stem .lq-tscroll > .qt,.lq-tscroll > .lq-table{margin:0}
/* turned to run down a phone: headings on top, labels on the left, numbers on the right */
table.is-tall{min-width:min(100%,240px)}
table.is-tall th,table.is-tall td,.lq-stem .qt.is-tall th,.lq-stem .qt.is-tall td{text-align:start}
table.is-tall .n,.lq-stem .qt.is-tall .n{text-align:end}
table.is-tall tr:first-child > *{vertical-align:bottom}
.lq-table.is-tall td{padding:4px 6px}
/* an answer box and its unit stay on one line; the box gives way first */
.lq-fu{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:min(100%,210px);max-width:100%}
.lq-fu .lq-field{flex:0 1 auto;min-width:120px}
.lq-fu .lq-field.unit{flex:0 1 120px;min-width:84px}
.lq-fu .u{flex:none;white-space:nowrap}
.lq-line .lab{flex:none;max-width:100%}
.lq-field,.lq-cell{max-width:100%}
/* touch targets: 44 px */
.lp-link{min-height:44px}
.ms label:has(input){min-height:44px;align-items:center}
.ms label:has(input) input{margin:0}
/* long typed answers (lists, sentences) fit a phone's line */
.lq-field.wide{font-size:18px}
@media (max-width:440px){.lq-field.wide{font-size:17px;padding-inline-start:12px;padding-inline-end:12px}}
/* computer science tables scroll in the shared wrapper (with its edge shadow); its tabs and grid cells keep 44 px */
.lq-tscroll > table.cs-t{display:table;max-width:none;overflow:visible;font-variant-numeric:normal}
.cs-langs .cs-lang{min-height:44px}
.cs-code .cs-pre{background:linear-gradient(90deg,var(--surface) 40%,rgba(var(--ink-rgb),0)) left center/28px 100% no-repeat local,
    linear-gradient(270deg,var(--surface) 40%,rgba(var(--ink-rgb),0)) right center/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(var(--ink-rgb),.2),rgba(var(--ink-rgb),0)) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(var(--ink-rgb),.2),rgba(var(--ink-rgb),0)) right center/12px 100% no-repeat scroll,var(--surface)}
@media (max-width:520px){.lq .lq-grid .lq-cell{min-height:44px}}
/* a nuclide's mass and atomic numbers, stacked and right-aligned before its symbol */
.lx-nuc{display:inline-flex;flex-direction:column;align-items:flex-end;vertical-align:.5em;font-size:.66em;line-height:1.02;margin-inline-end:.06em;top:0}
.lx-nuc > sup,.lx-nuc > sub{font-size:1em;vertical-align:baseline;line-height:inherit;top:0}
/* a fraction of two numbers, built up; the slash is kept in the text but not drawn */
.lx-fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:.46em;font-size:.84em;line-height:1.12;margin:0 .08em;font-variant-numeric:lining-nums}
.lx-fr > span:first-child{border-bottom:.09em solid currentColor;padding:0 .14em}
.lx-fr > span:last-child{padding:0 .14em}
.lx-sl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* a square root's bar over what it covers */
/* a root (learn.js roots, rootDraw): the sign and the bar are one SVG path drawn to the root's size in currentColor at
   Onest's stem weight, with a mitred corner where the rising stroke meets the bar; the bar spans the whole radicand */
.lx-sqrt{position:relative;display:inline-block;white-space:nowrap;padding-inline-start:.6em;margin:0 .06em 0 .04em;line-height:1.15;vertical-align:baseline}
.lx-sqrt.has-i{margin-inline-start:.36em}
.lx-rs,.lx-rs path{fill:none;stroke:currentColor;stroke-linejoin:miter;stroke-miterlimit:3;stroke-linecap:butt}   /* mitred at the bar; the sharp foot bevels instead of spiking */
.lx-rs{position:absolute;inset-inline-start:0;top:0;overflow:visible;pointer-events:none}
.lx-rad{display:inline-block;padding:.17em .1em 0 .02em}   /* the clearance under the bar; the right padding is the bar's overhang */
.lx-ri{position:absolute;inset-inline-start:-.42em;bottom:52%;font-size:.62em;line-height:1}
.lq-tile .lx-fr{font-size:.9em}

/* ================================================================ 7 Oct (owner): chosen, not yet, disabled, flashcards, breathers */
/* "not yet" is warm amber with a retry curl, never alarm red: a miss is part of learning (AA in both themes) */
:root{--ln-wrong:#8f5300;--ln-wrong-bg:#fff1d6}
:root[data-theme="dark"]{--ln-wrong:#ffc56b;--ln-wrong-bg:#33260d}
/* a chosen answer keeps its box: violet edge and a small lift, no tint that could read as marked right */
.lq-tile[aria-pressed="true"]{border-color:var(--play);background:var(--surface);box-shadow:0 6px 0 var(--play);transform:translateY(-2px)}
.lq-tile[aria-pressed="true"] .k{border-color:var(--play);background:var(--play);color:#fff}
:root[data-theme="dark"] .lq-tile[aria-pressed="true"] .k{color:#0b1626}
.lq-tile.right[aria-pressed="true"],.lq-tile.wrong[aria-pressed="true"]{transform:none}
.lq-tile.right[aria-pressed="true"]{box-shadow:0 4px 0 var(--ln-right);border-color:var(--ln-right);background:var(--ln-right-bg)}
.lq-tile.wrong[aria-pressed="true"]{box-shadow:0 4px 0 var(--ln-wrong);border-color:var(--ln-wrong);background:var(--ln-wrong-bg)}
.lq-tile.pop{animation:none}
/* a disabled button reads as waiting, with a label you can still read (no green on near-black) */
.lp-btn:disabled,:root[data-theme="dark"] .lp-btn:disabled{background:var(--sunk);color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--btn-off-edge),0 4px 0 var(--rule-2);opacity:1}
:root[data-theme="dark"] .lp-btn:disabled{background:#1b2f4b;color:#c8d7e8;box-shadow:inset 0 0 0 2px var(--btn-off-edge),0 4px 0 rgba(157,179,201,.25)}
/* numbers in a maths question carry a little more weight */
.lx-n,.lq-stem .lx-fr,.lq-prompt .lx-fr{font-weight:600}
/* Added to Flashcards: a card drops onto the stack and a tick draws in */
.lp-decked{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink-2);cursor:default}
.lp-deckic{flex:none;overflow:visible}
.lp-deckic rect{fill:var(--surface);stroke:currentColor;stroke-width:1.6}
.lp-deckic .s2{opacity:.45}.lp-deckic .s1{opacity:.7}
.lp-deckic .fly{fill:var(--study-tint);stroke:var(--study-ink)}
.lp-deckic .tk{fill:none;stroke:var(--study-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.lp-decked.go .fly{animation:lnCardIn .42s cubic-bezier(.22,1,.36,1) both}
.lp-decked.go .tk{animation:lnTick .3s .34s var(--ln-ease) both}
.lp-decked.go span{animation:lnLand .26s .3s var(--ln-ease) both}
@keyframes lnCardIn{from{transform:translate(-14px,-16px) rotate(-14deg);opacity:0}70%{transform:translate(1px,1px) rotate(2deg);opacity:1}to{transform:none}}
@keyframes lnTick{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* a breather between questions */
.lp-break{display:grid;justify-items:center;text-align:center;padding-top:6vh;cursor:pointer}
.lp-break-coach{position:relative;display:block;width:124px;height:128px}
.lp-break > h1{font-size:clamp(26px,5vw,34px);margin:14px 0 6px}
.lp-break .lp-sub{font-size:17px}
.lp-break:not(.reduce) > h1{animation:lnRiseT .3s .12s var(--ln-spring) both}
@media (prefers-reduced-motion:reduce){.lp-decked.go .fly,.lp-decked.go .tk,.lp-decked.go span,.lp-break > h1{animation:none}.lq-tile[aria-pressed="true"]{transform:none}}

/* ================================================================ 7 Oct, later (owner): quieter choice, results, gaps, Enter, space */
/* chosen: a quiet edge and the faintest tint, same box; the result colours take over after Check */
.lq-tile[aria-pressed="true"]{border-color:color-mix(in srgb,var(--ink) 50%,var(--rule-2));background:color-mix(in srgb,var(--ink) 4%,var(--surface));box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 50%,var(--rule-2));transform:none}
.lq-tile[aria-pressed="true"] .k,:root[data-theme="dark"] .lq-tile[aria-pressed="true"] .k{border-color:currentColor;background:none;color:var(--ink)}
.lq-tile.right .c,.lq-tile.right .k,.lq-tile.right[aria-pressed="true"] .k{color:var(--ln-right);border-color:var(--ln-right);font-weight:600}
.lq-tile.wrong .c,.lq-tile.wrong .k,.lq-tile.wrong[aria-pressed="true"] .k{color:var(--ln-wrong);border-color:var(--ln-wrong);font-weight:600}
.lq-tile.right[aria-pressed="true"]{border-color:var(--ln-right);background:var(--ln-right-bg);box-shadow:0 4px 0 var(--ln-right)}
.lq-tile.wrong[aria-pressed="true"]{border-color:var(--ln-wrong);background:var(--ln-wrong-bg);box-shadow:0 4px 0 var(--ln-wrong)}
/* the box to fill in a prompt ("−2 □ −7"): a digit's size or more, outlined; it shows the chosen symbol */
.lx-gap{display:inline-block;box-sizing:border-box;min-width:1.9em;height:1.6em;line-height:calc(1.6em - 4px);overflow:hidden;text-align:center;padding:0 .15em;margin:0 .12em;border:2px solid var(--ink-3);border-radius:.3em;font-weight:700;color:var(--ink);
  vertical-align:-.4425em}   /* overflow:hidden puts its baseline at the bottom edge, empty or filled: the box's middle then sits at the middle of the figures (Onest figures are .715em tall) */
.lx-gap.is-filled{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.lx-gap.right{border-color:var(--ln-right);color:var(--ln-right);background:var(--ln-right-bg)}
.lx-gap.wrong{border-color:var(--ln-wrong);color:var(--ln-wrong);background:var(--ln-wrong-bg)}
/* the hint, offered once after a long think */
.lq-offer{margin:14px 0 0;color:var(--ink-2);font-size:15.5px}
.lq-hintbtn.is-offer{font-size:16.5px}
/* space: the question sits a little above the middle of the room it has, in a column of about 820 px, and its type
   grows on big screens; the action bar lines up with that column */
.lp-stage{max-width:820px;display:flex;flex-direction:column;padding-bottom:180px}
.lp-stage::before,.lp-stage::after{content:'';flex:2 1 0;min-height:0}
.lp-stage::after{flex-grow:3}
.lp-stage > *{flex:none}
.lp-stage > [hidden]{display:none}
.lq-stem,.lq-prompt{font-size:clamp(17.5px,1.05vw + 6px,25px)}
.lq-field,.lq-cell{font-size:clamp(20px,.6vw + 12px,24px)}
.lq-field{min-height:clamp(52px,2vw + 30px,64px)}
.lq-tile{font-size:clamp(18px,.6vw + 10px,22px);min-height:clamp(60px,2vw + 36px,72px)}
.lp-sheet,.lp-actions{max-width:820px}
@media (min-width:1100px){
  .lp-foot{border-top-width:1px}
  /* Noodle stands beside the question, at its height, in a fixed box (larger on a wide screen, never scaled in motion) */
  .lp-coach{width:120px;height:124px;right:calc(50% - 410px - 150px);bottom:calc(50dvh - 40px)}
}
@media (min-width:1700px){.lp-stage{max-width:900px}.lp-sheet,.lp-actions{max-width:900px}.lp-coach{right:calc(50% - 450px - 160px)}}
/* working: a box above the answer for 2+ mark questions */
.lq-work{margin:14px 0 4px;border:2px solid var(--rule-2);border-radius:16px;background:var(--surface)}
.lq-workh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 2px 4px}
.lq-worktog,.lq-workmono{min-height:44px;background:none;border:0;cursor:pointer;color:var(--ink-2);font:700 15.5px var(--f-body);display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:12px}
.lq-workmono{font-weight:600;font-size:14px;color:var(--ink-3)}
.lq-workmono[aria-pressed="true"]{color:var(--study-ink)}
.lq-worktog svg{transition:transform .18s var(--ln-ease)}
.lq-work.is-shut .lq-worktog svg{transform:rotate(-90deg)}
.lq-work.is-shut .lq-workb,.lq-work.is-shut .lq-workmono{display:none}
.lq-workb{padding:0 12px 12px}
.lq-workta{display:block;width:100%;min-height:96px;resize:none;overflow:hidden;border:0;border-top:1px dashed var(--rule-2);background:transparent;color:var(--ink);font:500 18px/1.6 var(--f-body);padding:10px 4px 6px}
.lq-workta:focus{outline:none}
.lq-work:focus-within{border-color:var(--study);box-shadow:0 0 0 4px color-mix(in srgb,var(--study) 18%,transparent)}
.lq-work.is-mono .lq-workta{font-family:var(--f-mono);font-size:16.5px}
.lq-workta[readonly]{color:var(--ink-2)}
.lq-worksyms{margin-top:6px}
.lq-worksyms .lq-sym{min-width:44px;height:44px;font-size:17px}
/* after Check: your working beside the worked solution */
.lq-compare{display:grid;gap:4px 28px;margin:22px 0 0;padding:16px 0 0;border-top:2px solid var(--rule)}
.lq-compare .lq-ws{margin:0;padding:0;border:0}
.lq-yours h2{font-size:19px;margin:0 0 8px}
.lq-yours pre{margin:0 0 8px;white-space:pre-wrap;font:500 16.5px/1.55 var(--f-body);color:var(--ink-2)}
.lq-yours .pl{margin:0;font-weight:700;color:var(--ink-3)}
@media (min-width:860px){.lq-compare{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
/* lesson complete: Noodle and the result side by side on a wide screen, stacked on a phone; a plain row of figures */
.lp-done2{text-align:start;display:grid;gap:8px 48px;align-items:center;justify-items:center}
.lp-done-hero{position:relative;width:150px;height:155px}
.lp-done2 .lp-coach-big{width:150px;height:155px;margin:0}
.lp-done2 .lp-friend{position:absolute;inset-inline-start:118px;top:48px;width:96px;height:auto}
.lp-done-body{width:100%;max-width:560px}
.lp-done2 h1{font-size:clamp(34px,3.2vw + 14px,52px);margin:0;text-align:center;line-height:1.05}
.lp-done-name{margin:8px 0 0;text-align:center;font:600 clamp(19px,1vw + 12px,24px)/1.3 var(--f-display);color:var(--study-ink)}
.lp-row{display:flex;justify-content:center;gap:0;margin:26px 0 8px;padding:14px 0;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
.lp-row > div{flex:1;display:grid;justify-items:center;gap:2px;padding:0 10px}
.lp-row > div + div{border-inline-start:2px solid var(--rule)}
.lp-row dt{font-size:14px;font-weight:700;color:var(--ink-3)}
.lp-row dd{margin:0;font:700 clamp(32px,2vw + 18px,44px)/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.lp-row dd.sm{font-size:clamp(32px,2vw + 18px,44px);white-space:nowrap}
.lp-row .st-xp dd{color:var(--gold-ink)}.lp-row .st-acc dd{color:var(--ln-right)}.lp-row .st-time dd{color:var(--study-ink)}
.lp-dh{font-size:18px;margin:20px 0 6px}
.lp-dl{list-style:none;margin:0;padding:0}
.lp-dl li{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;border-bottom:1px solid var(--rule);font-size:16.5px}
.lp-dl li.ok svg{flex:none;color:var(--ln-right)}
.lp-dl li span{flex:1}
.lp-dlink{flex:none;min-height:44px;display:inline-flex;align-items:center;color:var(--study-ink);font-weight:700}
@media (min-width:900px){.lp-done2{grid-template-columns:auto minmax(0,560px);justify-content:center}.lp-done-hero,.lp-done2 .lp-coach-big{width:190px;height:196px}.lp-done2 .lp-friend{inset-inline-start:150px;top:70px}.lp-done2 h1,.lp-done-name{text-align:start}.lp-row{justify-content:flex-start}}
/* the spark of a right answer (learn.js zap) */
.lp-zap{position:fixed;z-index:40;pointer-events:none;overflow:visible}
.lp-zap .z{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lp-plus{position:fixed;z-index:41;pointer-events:none;font:800 30px/1 var(--f-display);color:var(--ln-right);text-shadow:0 2px 0 var(--paper)}
.lp-plus.is-part{color:var(--gold-ink);font-size:24px}
.lp-bar.is-zap > span{animation:lnZapBar .7s var(--ln-ease)}
@keyframes lnZapBar{0%{background:var(--study)}30%{background:var(--ln-right)}100%{background:var(--study)}}
.lq-glow{box-shadow:0 0 0 4px color-mix(in srgb,var(--ln-right) 35%,transparent);border-radius:16px}
@media (prefers-reduced-motion:reduce){.lp-bar.is-zap > span{animation:none}}
/* buttons never wrap their label: they size to it, and when a bar cannot hold them side by side they stack full width */
body.ln .lp-btn,body.ln-play .lp-btn,body.ln button,body.ln .btn,.lp-link,.lq-tile .k{white-space:nowrap}
.lp-actions{flex-wrap:wrap}
.lp-btn{flex:1 1 auto;min-width:min(100%,max-content)}
@media (min-width:700px){.lp-btn{flex:0 0 auto;min-width:180px}}
/* lesson screens: a reading measure, larger type, room between paragraphs, the key idea first */
.lp-learn .lp-prose,.lp-try .lp-prose{font-size:clamp(18px,.4vw + 15px,19.5px);line-height:1.6}
.lp-prose p,.lp-prose ul,.lp-prose ol{max-width:65ch}
.lp-prose p{margin:0 0 1em}
/* no word left alone on a last line (owner): paragraphs wrap 'pretty', short captions balance their lines */
.lp-prose p,.lp-prose li{text-wrap:pretty}
.lp-prose figcaption,.lp-video figcaption,.lq-viscap{text-wrap:balance}
.lp-prose .ln-key{font:600 clamp(20px,.8vw + 15px,24px)/1.4 var(--f-body);color:var(--ink);margin:2px 0 18px;padding:14px 18px;background:var(--study-tint);border-radius:var(--r2);max-width:52ch}
.lp-prose .lx-n{font-weight:600}
.lp-prose .qt{border-collapse:collapse}
.lp-prose .qt th,.lp-prose .qt td{border:2px solid var(--rule-2);padding:7px 12px;text-align:center}
.lp-prose .qt th{font-weight:600;color:var(--ink-2)}
.lp-prose .qt tr:nth-child(even) td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
/* the place-value chart */
table.lx-pv{border-collapse:separate;border-spacing:0;margin:6px 0 18px;font-variant-numeric:normal}
.lx-pv th{font:600 13.5px/1.2 var(--f-body);color:var(--ink-3);padding:6px 8px;border-bottom:2px solid var(--rule-2);text-align:center;vertical-align:bottom;white-space:normal;min-width:64px}
.lx-pv td{font:700 clamp(28px,2vw + 16px,38px)/1.3 var(--f-display);text-align:center;padding:8px 8px 6px;color:var(--ink)}
.lx-pv th + th,.lx-pv td + td{border-inline-start:2px solid var(--rule)}
.lx-pv .pt{min-width:0;width:18px;padding:0;border-inline-start:0!important;color:var(--ink-3)}
.lx-pv .pt + *{border-inline-start:0!important}
.lx-pv .hit{color:var(--play-ink)}
.lx-pv td.hit{background:var(--play-tint);border-radius:12px}
/* worked steps, one tap at a time; lined-up decimals with the added zeros lighter */
.wk-step li[hidden]{display:none}
.wk-next{margin:0 0 14px;padding:0 4px}
.wk-aligned .wk-n{display:inline-grid;grid-template-columns:var(--wk-i,3ch) auto auto;justify-self:start;white-space:nowrap;font:600 20px/1.4 var(--f-mono)}   /* a number never breaks: whole part, point, decimals on one line */
.wk-aligned .wk-n > *{white-space:nowrap}
.wk-aligned .wk-n .i{text-align:end}
.wk-aligned .wk-n .z{color:var(--ink-3);text-decoration:underline dotted;text-underline-offset:4px}
/* wide screens: the explanation on the left, its picture (chart, table, worked steps, formula) on the right */
@media (min-width:1100px){
  .lp-stage:has(> .lp-learn.is-on){max-width:1160px}
  .lp-learn .lp-prose{display:grid;grid-template-columns:minmax(0,62ch) minmax(280px,1fr);column-gap:56px;grid-auto-flow:row dense;align-items:start}
  .lp-learn .lp-prose > *{grid-column:1}
  .lp-learn .lp-prose > :is(.lq-tscroll,figure,.fml,ol.wk,.wk-next,.lp-tool,table,blockquote,.ln-note){grid-column:2;grid-row:span 3}
  .lp-learn .lp-prose > .wk-next{grid-row:auto}
  .lp-learn .lp-prose > .ln-key{grid-column:1 / -1;max-width:60ch}
}
/* a screen that opens on a question: think first, then Show me */
.ln-think{margin:4px 0 20px;padding:16px 18px;border:2px solid var(--rule-2);border-radius:18px;background:var(--surface);max-width:60ch}
.ln-think .t{margin:0;font:600 clamp(20px,.8vw + 15px,24px)/1.35 var(--f-body)}
.ln-think .h{margin:6px 0 12px;color:var(--ink-3);font-size:16px}
.lp-learn .lp-prose > .ln-think{grid-column:1 / -1}
.lp-prose [hidden]{display:none!important}
.lp-zap .zb{fill:#fff2cc;stroke:#15365a;stroke-width:1.3;stroke-linejoin:round}
.lp-zap .z{stroke-width:3}
@media (min-width:1100px){
  .lp-learn .lp-prose > .lq-tscroll:has(> .lx-pv){grid-column:1 / -1;grid-row:auto}
  body:has(.lp-learn.is-on) .lp-coach{inset-inline-end:max(10px,calc(50% - 580px));bottom:calc(100% - 5px)}
}
@media (max-width:440px){.lx-pv th{font-size:11.5px;padding:4px 3px;min-width:0}.lx-pv td{font-size:26px;padding:6px 4px 4px}.lx-pv .pt{width:10px}}
/* lesson complete, refined (owner): one character, stats on one line, the spark line under them, WWW and EBI folds */
.lp-done2 .lp-friend{display:none}
.lp-done2 .lp-earn{display:none}
.lp-done2 .lh-earned{margin:10px 0 0;display:flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:600}
.lp-row dd{white-space:nowrap}
.lp-row > div{align-content:start}
.lp-fold{border-bottom:2px solid var(--rule)}
.lp-fold summary{display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;list-style:none;font-weight:700}
.lp-fold summary::-webkit-details-marker{display:none}
.lp-fold summary .ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none}
.lp-fold.www summary .ic{color:var(--ln-right);background:var(--ln-right-bg)}
.lp-fold.ebi summary .ic{color:var(--play-ink);background:var(--play-tint)}
.lp-fold summary .lb{font:700 18px var(--f-display)}
.lp-fold summary .ct{margin-inline-start:auto;color:var(--ink-3);font-weight:600;font-size:15px}
.lp-fold summary .chev{flex:none;color:var(--ink-3);transition:transform .2s var(--ln-ease)}
.lp-fold[open] summary .chev{transform:rotate(180deg)}
.lp-fold .lead{margin:0 0 6px;color:var(--ink-2)}
.lp-fold .lp-dl{margin-bottom:10px}
.lp-fold .lp-dl li{align-items:flex-start;padding:8px 0}
.lp-fold .lp-dl li > span{display:grid;gap:2px}
.lp-fold .say{color:var(--ink-2);font-size:15.5px;font-weight:400}
.lp-fold-none{display:flex;align-items:center;gap:10px;min-height:52px;margin:0;border-bottom:2px solid var(--rule);color:var(--ln-right);font-weight:700}
.lp-done2{margin-top:auto;margin-bottom:auto}
@media (prefers-reduced-motion:reduce){.lp-fold summary .chev{transition:none}}
/* leave this lesson? (an in-page sheet) */
.lp-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:end center;background:rgba(var(--ink-rgb),.35)}
:root[data-theme="dark"] .lp-modal{background:rgba(0,0,0,.55)}
.lp-dlg{width:min(100%,520px);background:var(--paper);border-radius:22px 22px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom));display:grid;justify-items:center;text-align:center;gap:4px;animation:lnRise .3s var(--ln-ease)}
.lp-dlg h2{margin:6px 0 0;font-size:24px}
.lp-dlg p{margin:0 0 12px;color:var(--ink-2)}
.lp-dlgb{display:flex;gap:12px;width:100%}
.lp-dlgb .lp-btn{flex:1 1 0;min-width:0}
@media (min-width:700px){.lp-modal{place-items:center}.lp-dlg{border-radius:22px}}
@media (prefers-reduced-motion:reduce){.lp-dlg{animation:none}}
/* the coach steps aside when he would stand on content: the gutter by the action bar, else out of view */
body.coach-tuck .lp-coach{inset-inline-end:auto;inset-inline-start:max(12px,calc(50% - 410px));bottom:0;width:84px;height:87px}   /* in the action bar, left of its buttons (a fixed size for this place; he is never scaled in motion) */
body.coach-away .lp-coach{opacity:0;visibility:hidden}
body:has(.lp-modal) .lp-coach{visibility:hidden}   /* the sheet brings its own Noodle: still one character */
/* no hairlines that only repeat what spacing already says (owner, 7 Oct): stats grouped by space and type, one
   divider at most between the two folds, none under a fold's own header, none between worked steps or parts */
.lp-row{border:0;padding:0;gap:clamp(20px,4vw,48px);margin:22px 0 6px}
.lp-row > div{flex:0 1 auto;padding:0;justify-items:start}
.lp-row > div + div{border:0}
.lp-row dd{order:-1;line-height:1}
.lp-row dt{font-size:14px;margin-top:6px}
@media (max-width:899px){.lp-row{justify-content:center}.lp-row > div{justify-items:center}}
.lp-fold{border:0}
.lp-fold + .lp-fold,.lp-fold + .lp-fold-none,.lp-fold-none + .lp-fold{border-top:2px solid var(--rule)}
.lp-fold-none{border:0}
.lp-dl li,.lp-fold .lp-dl li{border:0}
.lp-dl li + li{border-top:1px solid var(--rule)}
.lp-done2 .lh-earned{margin-top:14px}
.lp-done2 .lp-fold:first-of-type,.lp-done2 .lp-fold-none:first-of-type{margin-top:18px}
.lq-part{border-top:0;padding-top:12px}
.lq-part + .lq-part{margin-top:12px}
.lq-ws,.lq-compare{border-top:0;margin-top:30px;padding-top:0}
.ms{border-top:0;padding-top:4px}
.wk li{border-bottom:0;padding:5px 0}
.lp-prose .fml{border:0;margin:24px 0;padding:6px 8px}
.lq-intro{border-bottom:0;padding-bottom:4px}
.lp-done2 .lh-earned{justify-content:flex-start;text-align:start;margin-inline-start:0;margin-inline-end:0}
/* diagrams drawn without a fill came out black, which vanished on the dark theme (13,320 findings in the audit):
   they take the text colour. In a layer, so any class or inline rule in a diagram still wins, and only shapes with no
   fill of their own (or from a group) are touched */
@layer lx-defaults{
  :where(.lq-stem,.lq-prompt,.lq-tile,.lq-ws,.lq-res,.lp-prose) svg :where(path,polygon,polyline,circle,rect,ellipse,text,tspan):not([fill]):not([fill] *):not([style*="fill"]){fill:currentColor}
}
/* a right answer's text on its pale green: a darker green for type (4.41:1 was just under AA) */
:root{--ln-right-ink:#0d6a40}
:root[data-theme="dark"]{--ln-right-ink:var(--ln-right)}
.lq-tile.right .c,.lq-tile.right .k,.lq-tile.right[aria-pressed="true"] .k,.lx-gap.right{color:var(--ln-right-ink)}
.lq-tile.right .k{border-color:var(--ln-right-ink)}
/* the leave sheet stands clearly off the lesson, like every site modal (header.php dialog.blm) */
.lp-modal{background:rgba(15,30,50,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:lnFade .18s var(--ln-ease)}
:root[data-theme="dark"] .lp-modal{background:rgba(5,12,24,.62)}
.lp-dlg{background:#fff;border:1px solid rgba(21,54,90,.10);box-shadow:0 2px 6px rgba(15,30,50,.10),0 28px 70px rgba(15,30,50,.32)}
:root[data-theme="dark"] .lp-dlg{background:#1b2f4b;border-color:rgba(200,215,232,.16);box-shadow:0 2px 8px rgba(0,0,0,.4),0 30px 80px rgba(0,0,0,.6)}
@keyframes lnFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lp-modal{animation:none}}
/* lesson complete: Save to flashcards, the cards shown as they will be studied */
.lp-save{margin:22px 0 0}
.lp-save .lead{margin:0 0 8px;color:var(--ink-2)}
.lp-cards{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:12px}
.lp-cards li{display:flex;align-items:center;gap:14px}
.lp-cards .fcp{flex:1;min-width:0;padding:12px 16px;border:2px solid var(--rule-2);border-radius:16px;background:var(--surface)}
.lp-cards .cf{margin:0;font-weight:700}
.lp-cards .cb{margin:6px 0 0;color:var(--ink-2);font-size:15.5px;font-weight:400}
@media (max-width:520px){.lp-cards li{flex-direction:column;align-items:stretch;gap:4px}}
/* lesson complete, celebrated (owner, 8 Oct): Noodle the hero (larger box, never scaled in motion), a burst behind
   him, the real time, What went well and Even better if as two tinted panels (the owner asked for boxes here) */
.lp-done-hero{position:relative}
.lp-burst{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;pointer-events:none;overflow:visible;z-index:0}
.lp-done-hero .lp-coach-big{position:relative;z-index:1}
@media (min-width:900px){.lp-done-hero,.lp-done2 .lp-coach-big{width:230px;height:238px}}
.lp-flyspark{position:fixed;z-index:70;pointer-events:none}
.lp-fold,.lp-fold + .lp-fold,.lp-fold + .lp-fold-none,.lp-fold-none + .lp-fold{border:0}
.lp-fold{margin:14px 0 0;padding:4px 16px 6px;border-radius:var(--r2,18px)}
.lp-fold.www{background:color-mix(in srgb,var(--ln-right) 9%,var(--paper));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ln-right) 22%,transparent)}
.lp-fold.ebi{background:color-mix(in srgb,#f0a52a 12%,var(--paper));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#f0a52a 30%,transparent)}
.lp-fold.ebi summary .ic{color:#8a5d00;background:color-mix(in srgb,#f0a52a 28%,var(--paper))}
:root[data-theme="dark"] .lp-fold.ebi summary .ic{color:#ffd48a}
.lp-fold summary .ct{color:var(--ink-2)}
.lp-fold .lp-dl li + li{border-top:0}
.lp-fold .lp-dl li{padding:10px 0}
.lp-fold .lp-dlink.lp-btn{flex:0 0 auto;min-width:0;min-height:44px;padding:0 16px;font-size:15px}
.lp-fold-none{margin:14px 0 0;padding:10px 16px;border-radius:var(--r2,18px);background:color-mix(in srgb,var(--ln-right) 9%,var(--paper))}
.lp-done2 .lp-fold:first-of-type,.lp-done2 .lp-fold-none:first-of-type{margin-top:16px}
/* palette on this screen: semantic tokens only (owner, 8 Oct): the figures in one accent, success green and warm gold
   from their tokens, the primary button in the primary token */
.lp-row .st-xp dd,.lp-row .st-acc dd,.lp-row .st-time dd,.lp-row .st-streak dd{color:var(--study-ink)}
.lp-row .st-streak dd{display:flex;align-items:flex-end;gap:4px}
.lp-row .st-streak .blk-flame{width:.8em;height:1em;display:inline-block}
.lp-fold.ebi{background:color-mix(in srgb,var(--gold) 14%,var(--paper));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gold) 38%,transparent)}
.lp-fold.ebi summary .ic,:root[data-theme="dark"] .lp-fold.ebi summary .ic{color:var(--gold-ink);background:color-mix(in srgb,var(--gold) 30%,var(--paper))}
:root[data-theme="dark"] .lp-fold.ebi summary .ic{color:var(--gold)}
.lp-done-name{color:var(--ink-2)}
/* a practice item: its button under the text on a phone, so the title never leaves a word stranded */
@media (max-width:560px){.lp-fold.ebi .lp-dl li{flex-direction:column;align-items:stretch;gap:8px}.lp-fold .lp-dlink.lp-btn{align-self:flex-start}.lp-row{gap:10px 18px;flex-wrap:wrap}}
/* leftovers from the audit: long units wrap under their box instead of running off a phone; code blocks show the
   edge shadow wherever they sit */
.lq-fu{flex-wrap:nowrap}   /* the unit stays beside its box; a long unit wraps inside its own column */
.lq-fu .u{flex:0 1 auto;white-space:normal;max-width:9em;min-width:min-content;line-height:1.2;overflow-wrap:normal}   /* never narrower than its longest unit word (mol/dm³ ran 10 px past the column at 390 px): the box gives way instead */
.lq-fu .lq-field{min-width:110px}
body.ln-play .lq-line > .lq-fu > .lq-field:not(.unit){width:134px}body.ln-play .lq-line > .lq-fu > .lq-field.unit{flex:1 1 142px;min-width:84px}   /* on a phone the answer box starts at 134 px (grows as typed) and the unit box at 142 px: room for a standard-form answer and for light-years */
pre.cs-pre,.lq pre{background:linear-gradient(90deg,var(--surface) 40%,rgba(var(--ink-rgb),0)) left center/28px 100% no-repeat local,
  linear-gradient(270deg,var(--surface) 40%,rgba(var(--ink-rgb),0)) right center/28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(var(--ink-rgb),.2),rgba(var(--ink-rgb),0)) left center/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(var(--ink-rgb),.2),rgba(var(--ink-rgb),0)) right center/12px 100% no-repeat scroll,var(--surface)}
/* a drawing in a question or a choice never runs past its box: it scales to fit (labels keep the 12 px floor) */
.lq-stem svg,.lq-prompt svg,.lq-tile .c svg,.lq-ws svg,.lq-res svg{max-width:100%;height:auto}
.lq-tile .c{min-width:0}

/* ---- the palette agent's patch, brand/identity/palette/patches/learn-lesson-complete.css (8 Oct) ---- */
/* Lesson complete in the palette 2.0 (brand/identity/COLOUR.md; owner, 8 Oct: "it feels a bit mismatched"): one action
   colour (teal: Finish!), one reward colour (gold: the XP figure, the Spark, the flame), green only on the tick that
   means right; the heading, the lesson name and the other figures in ink; both panels on the same quiet surface, told
   apart by their icon and heading, not by a second and third tint. Append to brainlag.space/public/assets/learn/learn.css. */
.lp-done2 h1{color:var(--ink)}
.lp-done-name{color:var(--ink-2)}
.lp-row .st-xp dd{color:var(--gold-ink)}
.lp-row .st-acc dd,.lp-row .st-time dd,.lp-row .st-streak dd{color:var(--ink)}
.lp-fold.www,.lp-fold.ebi,.lp-fold-none{background:var(--sunk);box-shadow:none}
:root[data-theme="dark"] .lp-fold.www,:root[data-theme="dark"] .lp-fold.ebi,:root[data-theme="dark"] .lp-fold-none{background:var(--surface)}
.lp-fold.www summary .ic,:root[data-theme="dark"] .lp-fold.www summary .ic{color:var(--ln-right-ink);background:var(--ln-right-bg)}
.lp-fold.ebi summary .ic,:root[data-theme="dark"] .lp-fold.ebi summary .ic{color:var(--study-ink);background:var(--study-tint)}
.lp-fold-none{color:var(--ink)}.lp-fold-none svg{color:var(--ln-right-ink)}
.lp-btn,:root[data-theme="dark"] .lp-btn{color:var(--on-study-btn)}   /* white on --study-btn, 4.76:1 (owner, 9 Oct) */
.lp-btn.quiet,:root[data-theme="dark"] .lp-btn.quiet{color:var(--ink)}
/* the feedback bar's own buttons keep white type on green and amber (the dark on-primary is for teal only) */
:root:not([data-theme="dark"]) .lp-foot:has(.is-right) .lp-btn:not(.quiet),:root:not([data-theme="dark"]) .lp-foot:has(.is-wrong) .lp-btn:not(.quiet){color:#fff}
/* stats in equal columns, every label on one line; the flame and its number never squeeze */
.lp-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:12px 20px;justify-items:stretch}
.lp-row > div{min-width:0;justify-items:start}
.lp-row dt{white-space:nowrap}
.lp-row .st-streak dd{white-space:nowrap}
.lp-row .st-streak .blk-flame{flex:none}
@media (max-width:899px){.lp-row > div{justify-items:center}}
/* the result always scrolls clear of the fixed action bar */
.lp-stage:has(> .lp-done2.is-on){padding-bottom:calc(150px + env(safe-area-inset-bottom))}

/* ---- question pages, the owner's notes of 8 Oct (bubble sort, two's complement) ----
   Marks in one place; the tip as a tinted block, never a rule; no line between blocks anywhere on a question page
   (the audit's hairline and double-rule checks, tests/learn/visual/audit-page.js, fail on one); grids square and structured, marked cell by cell. */
.lq-mkh{margin:-6px 0 14px;color:var(--ink-3);font-size:14.5px;font-weight:600}
.lq-tip{display:flex;gap:12px;align-items:flex-start;margin:2px 0 18px;padding:12px 16px;border:0;border-radius:14px;background:var(--study-tint);color:var(--ink);font-size:16.5px;line-height:1.5}
.lq-tipi{flex:none;margin-top:1px;fill:none;stroke:var(--study-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lq-tipb{min-width:0}.lq-tipb p{margin:0}.lq-tipb p + p{margin-top:6px}
.lq-intro,.lq-hinted,.lq-part,.lq-part + .lq-part,.lq-ws,.lq-compare,.ms{border-top:0;border-bottom:0}
.lq-hinted{border-inline-start:0;border-radius:12px;background:var(--study-tint)}
.lq .lq-grid{border-collapse:collapse;border:2px solid var(--rule-2);width:auto}
.lq .lq-grid th,.lq .lq-grid td{border:2px solid var(--rule-2);border-radius:0;padding:0;min-width:62px;height:50px;position:relative;vertical-align:middle}
.lq .lq-grid thead th{background:var(--sunk);color:var(--ink-2);font-weight:700;padding:8px 10px;height:auto}
.lq .lq-grid td:not(:has(.lq-cell)){padding:8px 12px}
.lq .lq-grid tbody td:first-child:not(:has(.lq-cell)){background:var(--sunk);font-weight:700;color:var(--ink-2);text-align:start}
.lq .lq-grid .lq-cell{display:block;width:76px;max-width:none;min-height:50px;margin:0;border:0;border-radius:0;background:var(--surface);padding:6px 10px;box-shadow:none}
.lq .lq-grid .lq-cell:focus{box-shadow:inset 0 0 0 3px var(--study)}
.lq .lq-grid .lq-cell[readonly]{background:transparent}
.lq .lq-grid td.c-ok{background:var(--ln-right-bg)}.lq .lq-grid td.c-no{background:var(--ln-wrong-bg)}
.lq .lq-grid .ci{position:absolute;top:4px;inset-inline-end:4px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:var(--paper);pointer-events:none}
.lq .lq-grid .c-ok .ci{background:var(--ln-right)}.lq .lq-grid .c-no .ci{background:var(--ln-wrong)}
.lq .lq-grid .ci svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.lq-part.is-right .lq-field{border-color:var(--ln-right);background:var(--ln-right-bg)}
.lq-part.is-wrong .lq-field{border-color:var(--ln-wrong)}
.lq-glow{box-shadow:none}
.lp-sh .t .lp-plus{position:static;display:inline-block;margin-inline-start:10px;font-size:22px;line-height:1;text-shadow:none}
.lq-part.is-part .lq-field{border-color:var(--gold-ink)}
.lq-part:is(.is-right,.is-wrong,.is-part) .lq-field:not(.unit){padding-inline-end:44px}
.lq-fi{flex:none;position:relative;z-index:1;width:24px;height:24px;margin:0 12px 0 -46px;border-radius:50%;display:grid;place-items:center;color:var(--paper);pointer-events:none}
.lq-fi.is-right{background:var(--ln-right)}.lq-fi.is-wrong{background:var(--ln-wrong)}.lq-fi.is-part{background:var(--gold-ink)}
.lq-fi svg{fill:none;stroke:currentColor;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.lq-workta{border-top:0;padding-top:12px}
.ms{border-top:0}

/* ---- lesson complete, the owner's notes of 8 Oct: the earlier palette read better (more of a celebration). The
   figures and panels take their colours back, in palette 2.0 tokens only (colour-lint 0): gold for XP, green for right
   first time, teal for time and the lesson name, a green panel for what went well and a gold one for even better if,
   no edges. The on-primary button text (#062529, AA) stays. No day-streak figure (it has its own screen). */
.lp-done-name{color:var(--study-ink)}
.lp-row .st-xp dd{color:var(--gold-ink)}
.lp-row .st-acc dd{color:var(--ln-right-ink)}
.lp-row .st-time dd{color:var(--study-ink)}
.lp-fold.www,.lp-fold-none,:root[data-theme="dark"] .lp-fold.www,:root[data-theme="dark"] .lp-fold-none{background:var(--ln-right-bg);box-shadow:none}
.lp-fold.ebi,:root[data-theme="dark"] .lp-fold.ebi{background:var(--gold-tint);box-shadow:none}
.lp-fold.ebi summary .ic,:root[data-theme="dark"] .lp-fold.ebi summary .ic{color:var(--gold-ink);background:var(--paper)}
.lp-fold.www summary .ic,:root[data-theme="dark"] .lp-fold.www summary .ic{background:var(--paper)}
/* the figures never clip: they keep their size where there is room and wrap to a second row where there is not */
.lp-row{display:flex;flex-wrap:wrap;gap:12px clamp(20px,4vw,40px)}
.lp-row > div{flex:0 0 auto;min-width:0}
.lp-row dd,.lp-row dd.sm{font-size:clamp(28px,1.6vw + 20px,44px)}
@media (max-width:899px){.lp-row{justify-content:center}}
/* the feedback panel and its buttons always fit the screen: on a short or landscape screen the panel's text scrolls
   inside it and the buttons stay in view; no rule above it, a soft shadow instead */
.lp-foot,.lp-foot:has(.lp-sheet.is-right){border-top:0;box-shadow:0 -10px 28px rgba(var(--ink-rgb),.07);max-height:100dvh;display:flex;flex-direction:column}
.lp-sheet{flex:0 1 auto;min-height:0;max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain}
.lp-actions{flex:none}
.lp-foot > .lp-sheet,.lp-foot > .lp-actions{width:100%;box-sizing:border-box}
/* the panels' headings keep to one line on a phone: the count drops under 360 px (the list says it anyway) */
.lp-fold summary .lb,.lp-fold summary .ct{white-space:nowrap}
.lp-fold summary .lb{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){.lp-fold summary .ct{font-size:14px}}
@media (max-width:359px){.lp-fold summary .ct{display:none}}
.lp-fold summary .chev{margin-inline-start:auto}.lp-fold summary .ct + .chev{margin-inline-start:0}
/* the top bar fits 320 px: under 360 the "in a row" count steps out (it was pushing the page 15 px wide) */
@media (max-width:359px){.lp-top .lp-combo{display:none}.lp-top{gap:4px}}

/* ---- concept visuals (learn-visual.js) and the friend in the feedback panel, 8 Oct ---- */
.lq-vis{margin:14px 0 6px;padding:14px 16px 12px;border-radius:16px;background:var(--sunk);max-width:420px}
.lq-vish{margin:0 0 6px;font:700 14.5px var(--f-body);color:var(--ink-2)}
.lq-visart{display:block;width:100%;height:auto;overflow:visible}
.lq-visart text{font:600 14px var(--f-body);fill:var(--ink)}
.lq-visart .bar rect{fill:var(--study);transition:y .3s var(--ln-ease),height .3s var(--ln-ease)}
.lq-visart .bar.is-empty rect{fill:var(--paper)}
.lq-visart .bar.is-cmp rect{fill:var(--gold)}
.lq-visart .bar.is-swap rect{fill:var(--ln-right)}
.lq-visart .fr .on{fill:var(--study)}.lq-visart .fr .off{fill:var(--paper)}
.lq-visart .fr.is-common .on{fill:var(--ln-right)}
.lq-visart .fr .lab{font-weight:700}
.lq-visart .track{fill:var(--rule-2)}
.lq-visart .trolley .body{fill:var(--study-tint);stroke:var(--study-ink);stroke-width:3}
.lq-visart .trolley .wheel{fill:var(--ink-2)}
.lq-visart .arrow path{fill:none;stroke:var(--gold-ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.lq-visart .v{fill:var(--gold-ink);font-weight:700}
.lq-viscap{margin:6px 0 0;font-size:14.5px;color:var(--ink-2);min-height:1.4em}
.lq-visplay{margin-top:6px}
@media (prefers-reduced-motion:reduce){.lq-visart .bar rect{transition:none}}
@media (min-width:1000px){
  .lp-stage:has(.lq.has-vis){max-width:1180px}
  .lq.has-vis{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);column-gap:44px;align-items:start}
  .lq.has-vis > *{grid-column:1}
  .lq.has-vis > .lq-viscol{grid-column:2;grid-row:1 / span 40;position:sticky;top:84px;margin-top:6px;display:grid}
  .lq-viscol .lq-vis{margin:0;max-width:none}
  .lq-vis-floor{display:flex;justify-content:flex-end;min-height:0}
  .lq-vis-floor .lp-coach{position:relative;inset-inline-end:auto;inset-inline-start:auto;bottom:auto;margin:-4px 14px 0 0;width:120px;height:124px}
  .lq.has-vis > .ls-read{grid-column:1;grid-row:1;justify-self:end;align-self:start;float:none;margin:6px 0 0}
  .lq.has-vis > .lq-title{grid-column:1;grid-row:1;padding-inline-end:52px}
}
.lp-sh.has-friend{grid-template-columns:auto minmax(0,1fr) auto}
.lp-shf{width:64px;height:66px;align-self:center}
body.sheet-friend .lp-coach{display:none}
html[data-chars="off"] .lp-shf{display:none}
html[data-chars="off"] .lp-done-hero{display:none}
@media (min-width:900px){html[data-chars="off"] .lp-done2{grid-template-columns:minmax(0,560px)}}

/* the progress bar never blinks (owner, 8 Oct): only its fill moves, by transform; no colour change, sheen or glow
   swaps on Next or on an answer. The combo's warmth is in the "in a row" chip, not the bar. */
.lp-bar,.lp-bar.is-combo{box-shadow:none;transition:none}
.lp-bar > span,.lp-bar.is-combo > span{background:var(--study);transition:transform .5s cubic-bezier(.22,1,.36,1);animation:none}
.lp-bar.sheen::after,.lp-bar.is-combo > span::after{content:none;display:none;animation:none}
.lp-bar.is-zap > span{animation:none}
@media (prefers-reduced-motion:reduce){.lp-bar > span{transition:none}}
html[data-motion="off"] .lp-bar > span{transition:none}
/* nothing in the bar changes its width while a lesson runs: the "in a row" chip floats under the bar instead of
   taking room beside it (it used to squeeze the bar each time it came and went), and the Sparks count keeps a fixed slot */
.lp-top{position:sticky}
.lp-meta{position:relative}
.lp-top .lp-combo{position:absolute;inset-inline-end:0;top:calc(100% + 6px);white-space:nowrap;font-size:14px;pointer-events:none}
.lp-top .lp-combo[hidden]{display:none}
.lh-topcount{min-width:56px;justify-content:center;font-variant-numeric:tabular-nums}

/* ---- teach first, then practise; the pace guide (owner, 8 Oct) ---- */
.lq-mkh.has-pace{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.lq-pace{display:inline-flex;align-items:center;gap:7px;margin:-6px 0 14px;color:var(--ink-3);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
.lq-mkh .lq-pace{margin:0}
.lq-paceg{flex:none;transform:rotate(-90deg)}
.lq-paceg circle{fill:none;stroke-width:3.2;stroke-linecap:round}
.lq-paceg .tr{stroke:var(--sunk)}
.lq-paceg .fl{stroke:var(--study);stroke-dasharray:100;stroke-dashoffset:100;animation:lnPace linear forwards /* motion-lint: ok the guide time empties at a constant speed, like a clock */}
@keyframes lnPace{to{stroke-dashoffset:0}}
.lq-pace.is-done .fl,.lq-pace.is-paused .fl{animation-play-state:paused}
.lq-pace[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.lq-paceg{display:none}}
html[data-motion="off"] .lq-paceg{display:none}
.lq-revisit{display:block;margin:14px 0 0}
.lq-learnfirst{margin:-4px 0 16px;color:var(--ink-2);font-size:15.5px}
.lq-learnfirst a{color:var(--study-ink);font-weight:700}
.lp-bridge .lp-sub{max-width:52ch}
.lp-taught{margin:18px 0 0;padding:0;list-style:none;counter-reset:tg;display:grid;gap:10px;max-width:520px}
.lp-taught li{counter-increment:tg;display:grid;grid-template-columns:32px 1fr;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--sunk);font-weight:600}
.lp-taught li::before{content:counter(tg);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--study-tint);color:var(--study-ink);font-weight:800}
dialog.lp-revisit{width:min(760px,calc(100vw - 24px));max-height:min(86dvh,900px);padding:0;border:0;border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column}
dialog.lp-revisit:not([open]){display:none}
dialog.lp-revisit::backdrop{background:rgba(8,17,32,.5)}
.lp-rvh{display:flex;align-items:center;gap:12px;padding:16px 16px 10px 22px;background:var(--paper)}
.lp-rvh h2{margin:0;flex:1;font-size:22px}
.lp-rvx{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:var(--sunk);color:var(--ink);cursor:pointer}
.lp-rvb{overflow-y:auto;padding:4px 22px 24px;overscroll-behavior:contain}
.lp-rvs + .lp-rvs{margin-top:26px}
.lp-rvs h3{margin:0 0 8px;font-size:18px;color:var(--study-ink)}
@media (max-width:560px){dialog.lp-revisit{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:22px 22px 0 0}}
/* a lesson's video (the text below it is the same lesson, so it works with no video at all) */
.lp-video{margin:4px 0 22px;max-width:720px}
.lp-video video{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;background:var(--sunk);object-fit:cover}
.lp-video figcaption{margin:8px 0 0;color:var(--ink-3);font-size:14.5px}
.lp-rvx:focus{outline:none}.lp-rvx:focus-visible{outline:3px solid var(--study);outline-offset:2px}

/* ---- Learn: the lesson as an article, then Practice (owner, 9 Oct) ---- */
.lp-stage:has(> .la.is-on){max-width:760px;padding-bottom:140px}
.la{display:block}
.la-head{margin:18px 0 22px}
.la-head h1{margin:0 0 8px;font-size:clamp(28px,4.4vw,40px);line-height:1.12}
.la-meta{margin:0;color:var(--ink-3);font-size:15.5px;font-weight:600}
.la-sec{margin:0 0 34px}
.la-sec > h2,.la-body h2{margin:0 0 10px;font-size:clamp(21px,2.6vw,26px);line-height:1.25}
.la .lp-prose p,.la .lp-prose li{font-size:18px;line-height:1.65}
.la .lp-tool{margin:16px 0 0}
.la-script{margin:24px 0;padding:14px 18px;border-radius:16px;background:var(--sunk);color:var(--ink-2)}
.la-script summary{cursor:pointer;font-weight:700}
.la-next{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;align-items:center;margin:44px 0 0;padding:26px 26px 28px;border-radius:24px;background:var(--study-tint);scroll-margin-bottom:120px}
.la-next-art{width:120px;height:124px;align-self:end}
.la-next-art img{display:block;width:120px;height:124px}
.la-next h2{margin:0 0 8px;font-size:clamp(22px,2.6vw,28px);line-height:1.2;color:var(--ink)}
.la-why{margin:0 0 14px;color:var(--ink-2);font-size:16.5px;line-height:1.5;max-width:46ch}
.la-gets{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px}
.la-gets li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;font-weight:600;color:var(--ink)}
.la-gets li::before{content:'';width:22px;height:22px;border-radius:50%;background:var(--study) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.la-go.lp-btn{display:inline-flex;min-width:220px;text-decoration:none}
@media (max-width:560px){.la-next{grid-template-columns:1fr;padding:22px 18px 24px}.la-next-art{width:96px;height:99px;justify-self:start}.la-next-art img{width:96px;height:99px}.la-go.lp-btn{width:100%}}
html[data-minimal="on"] .la-gets,html[data-minimal="on"] .la-next-art,html[data-chars="off"] .la-next-art{display:none}
html[data-minimal="on"] .la-next,html[data-chars="off"] .la-next{grid-template-columns:1fr}
/* on the article the action bar stays out of the way until near the end, then rises with the next step */
body.is-article .lp-foot{transform:translateY(110%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
body.is-article.la-bar-on .lp-foot{transform:none}
@media (prefers-reduced-motion:reduce){body.is-article .lp-foot{transition:none}}

/* the pace countdown: a ring that empties around mm:ss, beside the marks; overtime calm and warm (owner, 9 Oct) */
.lq-pace{gap:10px}
.lq-paceg{flex:none;width:40px;height:40px;transform:rotate(-90deg)}
.lq-paceg circle{fill:none;stroke-width:4.5;stroke-linecap:round}
.lq-paceg .tr{stroke:color-mix(in srgb,var(--ink) 14%,transparent)}
.lq-paceg .fl{stroke:var(--study);animation:none;transition:stroke .4s var(--ln-ease)}
.lq-pace .t{font:700 17px/1 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums;min-width:4.2ch}
.lq-pace.is-low .t{color:var(--study-ink)}
.lq-pace.is-over .fl{stroke:color-mix(in srgb,var(--gold) 55%,var(--sunk))}
.lq-pace.is-over .t{color:var(--ink-3);font-weight:600}
.lq-pace.is-done{opacity:.55}
.lq-pace.is-still .t{color:var(--ink-3);font-weight:600}
.lq-mkh.has-pace{align-items:center}

/* Noodle in the practice player (owner, 9 Oct): wide screens give him a fixed place beside the question column, from
   the start, standing on a soft floor, never at the window's edge and never scroll-triggered; narrower screens leave
   him out of the question (no room beside it), so he never covers an option */
@media (min-width:1100px){
  body.ln-play .lp-coach,body.ln-play.coach-tuck .lp-coach{position:fixed;inset-inline-start:min(calc(50% + 410px + 36px),calc(100% - 156px));inset-inline-end:auto;top:132px;bottom:auto;width:120px;height:124px;opacity:1;visibility:visible}
  body.ln-play .lp-coach::after{content:'';position:absolute;inset-inline-start:18px;inset-inline-end:18px;bottom:-4px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--ink) 12%,transparent);z-index:-1}
  body.ln-play.coach-floor .lp-coach{position:relative;inset-inline-start:auto;top:auto}
}
@media (max-width:1099px){body.ln-play:not(.coach-floor):not(.coach-say) .lp-coach{display:none}}
/* onward from lesson complete: the next lesson is the big button; Finish! the quiet one */
.lp-btn.textlink,:root[data-theme="dark"] .lp-btn.textlink{background:none;box-shadow:none;border:0;color:var(--study-ink);text-decoration:underline;text-underline-offset:4px;min-width:0;flex:0 0 auto;padding:0 12px}
.lp-onward{margin:18px 0 0;color:var(--ink-2);font-weight:600}

/* the why under the result: body size, full ink, the panel grows to fit (and the answer is scrolled above it) */
.lp-sh .why{margin:6px 0 4px;color:var(--ink);font-size:16.5px;line-height:1.5;max-width:62ch}

.lq-worksyms .lq-sym.is-more{display:none}.lq-worksyms.is-open .lq-sym.is-more{display:inline-flex;align-items:center;justify-content:center}
.lq-worksyms .lq-symmore{font-size:15px;padding:0 14px;color:var(--study-ink)}

/* one size and weight for every choice: "no figure" (a word) reads like the figures beside it (owner, 9 Oct) */
.lq-tile .fb.fb-none{font-size:1em;font-weight:600;color:inherit}
@media (min-width:1100px){body.ln-play.coach-away .lp-coach{visibility:hidden}}

/* the top bar (owner pick A): close, where you are in words, the progress bar, then settings, Sparks and sound */
.lp-loc{flex:none;color:var(--ink-3);font:600 15px/1.2 var(--f-body);white-space:nowrap;text-decoration:none;padding:6px 4px;border-radius:8px}
.lp-loc:hover{color:var(--ink-2)}
@media (max-width:560px){.lp-top{flex-wrap:wrap;row-gap:0}.lp-loc{order:9;flex-basis:100%;padding:0 0 4px 52px;font-size:14px}}

/* Noodle saying the question (owner pick D) */
.lq-say{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:end;margin:4px 0 6px}
.lq-sayc{position:relative;width:120px;height:124px}
body.ln-play.coach-say .lq-sayc .lp-coach{position:absolute;inset:0;inset-inline-start:0;top:0;inset-inline-end:auto;bottom:auto;width:120px;height:124px;display:block;visibility:visible;opacity:1}
body.ln-play.coach-say .lq-sayc .lp-coach::after{display:none}
/* Noodle's speech bubble (owner, 10 Oct: "Broken bubble anyway - bad connector placement"): the outline and the tail are
   one SVG path drawn by learn.js sayDraw, filled with the surface and stroked 2 px in --say-edge, behind the words; the
   tail's base sits on the side facing Noodle at his head, its tip 6 px short of him. No border, no pseudo-element tail. */
.lq-sayb{position:relative;isolation:isolate;align-self:center;margin-bottom:22px;padding:18px 22px;border:0;border-radius:20px;background:none}
.lq-saybg{position:absolute;inset-inline-start:0;top:0;z-index:-1;overflow:visible;pointer-events:none}
.lq-saybg path{fill:var(--surface);stroke:var(--say-edge);stroke-width:2;stroke-linejoin:round}
.lq-sayb .lq-prompt{margin:0}

/* the "in a row" chip: on a phone it sits at the right end of the location line, clear of the words; on the lesson end
   and streak screens it steps out (the run is over, and the screen has its own figures) */
@media (max-width:560px){.lp-meta{position:static}.lp-top .lp-combo{top:auto;inset-inline-end:max(16px,env(safe-area-inset-right));bottom:6px}}
body:has(.lp-done.is-on) .lp-top .lp-combo,body:has(.lp-streak.is-on) .lp-top .lp-combo{display:none}

.lp-video .lp-vcredit{display:block;margin-top:4px;font-size:13px;color:var(--ink-3)}   /* a licence credit under a lesson video */

/* leaving a lesson (owner, 9 Oct: "more sad and red"): a warm red edge on the sheet, Noodle droops once, and Leave is
   the red destructive button (white on red-600 in light, red-950 on red-300 in dark: AA both); Keep going stays teal */
:root{--ln-leave:#c0362c;--ln-leave-on:#fff;--ln-leave-tint:#ffe6e2}
:root[data-theme="dark"]{--ln-leave:#ff8a80;--ln-leave-on:#381310;--ln-leave-tint:#3a1a19}   /* red-950 on red-300 */
.lp-modal.is-leave .lp-dlg{background:var(--ln-leave-tint)}   /* the whole sheet a soft warm red, rounded like the rest (no one-sided edge, no gradient) */
.lp-modal.is-leave .ln-noodle{transform-origin:50% 90%;animation:lnDroop .6s var(--ln-ease) .12s both}
@keyframes lnDroop{0%{transform:none}55%{transform:translateY(9px) rotate(-5deg)}100%{transform:translateY(8px) rotate(-4deg)}}
.lp-btn.danger,:root[data-theme="dark"] .lp-btn.danger{background:var(--ln-leave);color:var(--ln-leave-on);box-shadow:0 4px 0 color-mix(in srgb,var(--ln-leave) 70%,#000)}
.lp-btn.danger:focus-visible{outline:3px solid var(--ln-leave);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lp-modal.is-leave .ln-noodle{animation:none;transform:translateY(8px) rotate(-4deg)}}
html[data-motion="off"] .lp-modal.is-leave .ln-noodle{animation:none;transform:translateY(8px) rotate(-4deg)}

/* Noodle presents the question (owner, 9 Oct): he stands left, pointing right at the music or graph and the bubble
   beside him; the group is centred in the column, so no half-empty row beside a narrow stave */
.lq-say{grid-template-columns:120px minmax(0,1fr);align-items:center}
.lq-sayr{display:grid;gap:12px;min-width:0}
.lq-say.has-fig{justify-content:center;grid-template-columns:120px minmax(0,auto)}
.lq-say.has-fig .lq-sayr > .mn-fig,.lq-say.has-fig .lq-sayr > figure.lgraph{margin:0}
.lq-sayr .lq-sayb{margin-bottom:0;align-self:start}

/* the guide time (owner, 9 Oct): no ring; an icon, "Guide time 0:43" on the marks' baseline, a slim rounded track under
   the row that empties left to right; past it, "+0:12 over the guide" calm and muted */
.lq-mkh.has-pace{position:relative;padding-bottom:12px;align-items:baseline}
.lq-pace{display:inline-flex;align-items:baseline;gap:6px;margin:0;font-size:14.5px;font-weight:600;color:var(--ink-3)}
.lq-pace .lq-paceg{display:none}
.lq-pacei{align-self:center;width:17px;height:17px;fill:none;stroke:var(--study-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lq-pace .t{font:700 15px/1 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums;min-width:0}
.lq-pace.is-low .t{color:var(--study-ink)}
.lq-pace.is-over .t{color:var(--ink-3);font-weight:600}
.lq-pace.is-over .lq-pacei{stroke:var(--ink-3)}
/* the last ten seconds, for those with sound off too (owner, 10 Oct): the time eases into the accent colour, a colour change
   only (nothing moves), then settle back to the calm muted tone past the guide */
.lq-pace .t{transition:color 1.2s var(--ln-ease)}
.lq-pacetr{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.lq-pacetr i{display:block;height:100%;border-radius:3px;background:var(--study);transform-origin:left center;will-change:transform}
.lq-pace.is-over .lq-pacetr i{background:transparent}
.lq-pace.is-done{opacity:.6}
.lq-pace.is-still .t{color:var(--ink-2)}

.lq-pacer{align-self:center;display:inline-grid;place-items:center;width:28px;height:28px;margin:-6px 0 -6px 2px;padding:0;border:0;border-radius:8px;background:none;color:var(--ink-3);cursor:pointer}
.lq-pacer svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lq-pacer:hover{color:var(--ink);background:var(--sunk)}
.lq-pacer:focus-visible{outline:3px solid var(--study);outline-offset:2px}
.lq-pace.is-done .lq-pacer{display:none}
@media (pointer:coarse){.lq-pacer{width:36px;height:36px;margin:-10px 0 -10px 0}}

/* on the way out (owner, 9 Oct): a busy button and a slim teal bar along the top */
.lp-btn.is-busy{cursor:progress;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.lp-btn.is-busy,.lp-btn.danger.is-busy{opacity:1}
.lp-spin{flex:none;width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-inline-end-color:transparent;animation:lpSpin .7s linear infinite}
@keyframes lpSpin{to{transform:rotate(360deg)}}
.lp-navbar{position:fixed;inset-inline-start:0;inset-inline-end:0;top:0;height:4px;z-index:80;pointer-events:none;overflow:hidden;border-radius:0 0 4px 4px}
.lp-navbar i{display:block;height:100%;width:100%;border-radius:0 4px 4px 0;background:var(--study);transform-origin:left center;animation:lpNav 2.4s cubic-bezier(.1,.6,.3,1) forwards}
@keyframes lpNav{from{transform:scaleX(.06)}to{transform:scaleX(.88)}}
.lp-navbar.is-still i{animation:none;transform:scaleX(.5)}
@media (prefers-reduced-motion:reduce){.lp-spin{animation:none;border-inline-end-color:currentColor;opacity:.6}.lp-navbar i{animation:none;transform:scaleX(.5)}}
html[data-motion="off"] .lp-spin{animation:none;border-inline-end-color:currentColor;opacity:.6}
.lp-modal.is-leaving .lp-dlg{cursor:progress}
.lp-x.is-busy{color:var(--study);cursor:progress}
.lp-modal.is-leaving .lp-btn:disabled:not(.is-busy){opacity:.5;cursor:default}

/* Questions fit the screen (owner, 9 Oct: "show the bottom when I correct an answer, so ideally all answers are
   visible"; "image on the left and answers on the right on desktop to optimise space"). The stem, the visual, the
   question and every option sit in one screen at 1440x900 and 390x844: tighter options and gaps; below 1100 px a
   stacked layout with the visual at most about 38% of the screen's height; from 1100 px two columns, the visual and
   Noodle on the left (about 45%) scaled to the column (a tall grand staff to about 70% of the screen's height), the
   question, the options and the feedback on the right. learn.js fitFigs() sizes the notation and trims it to its
   drawing; the content keeps only the room the action bar takes (--lp-foot-h), so no empty band opens under the
   options. tests/learn/visual/fold.py checks it. */
.lp-stage{padding-bottom:calc(var(--lp-foot-h,96px) + 20px)}
/* the action bar never keeps question content under it (owner, 9 Oct: a long two-system extract's bass staff under
   Check): the stage keeps the bar's measured height (its safe-area padding included) plus 20 px below the content, so
   at full scroll the end of the score and the options sit clear of it; anything scrolled to or focused (a field, a
   Tab stop, scrollIntoView) stops above the bar too. The bar reads as floating: a soft shadow above it, no line.
   tests/learn/visual/foot_clear.py checks it. */
html:has(body.ln-play){scroll-padding-bottom:calc(var(--lp-foot-h,96px) + 16px)}
.lp-foot,.lp-foot:has(.lp-sheet.is-right){box-shadow:0 -3px 10px rgba(21,54,90,.08)}   /* a soft edge, not a 24 px band that fades the text it passes over (owner, 11 Oct) */
:root[data-theme="dark"] .lp-foot,:root[data-theme="dark"] .lp-foot:has(.lp-sheet.is-right){box-shadow:0 -3px 12px rgba(0,0,0,.4)}
.lq-tile{min-height:56px;padding-top:9px;padding-bottom:9px}
.t-mcq{gap:10px}
.lq-in{margin-top:10px}
.lq-mkh{margin-bottom:10px}
.lq-say.has-fig{margin:0 0 4px}
.lq-sayr .mn-sheet{padding:10px 12px}
@media (min-width:1000px){.lq-tile{min-height:64px;padding-top:10px;padding-bottom:10px}}
/* Noodle is the question's speaker (owner, 9 Oct: "find another place for Noodle"): a small Noodle at the left of the
   question bubble, its tail pointing to him, the two one unit above the options; on every width */
.lq-say{display:block;margin:0 0 4px}
.lq-say > .mn-fig,.lq-say > figure.lgraph{margin:0 0 12px}
.lq-sayu{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:end}
.lq-sayc{width:76px;height:79px}
body.ln-play.coach-say .lq-sayc .lp-coach{width:76px;height:79px}
.lq-sayu .lq-sayb{margin:0;align-self:center}
@media (max-width:699px){.lq-sayu{grid-template-columns:56px minmax(0,1fr);gap:14px}.lq-sayc,body.ln-play.coach-say .lq-sayc .lp-coach{width:56px;height:58px}.lq-sayu .lq-sayb{padding:12px 16px}.lq-sayu .lq-prompt{font-size:16.5px;line-height:1.45}}
@media (min-width:1100px){
  .lp-stage:has(.lq-say.has-fig){max-width:1180px}
  /* the visual takes the whole left column; Noodle and the bubble, then the options and the feedback, on the right */
  .lq-part:has(> .lq-say.has-fig){display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;
    grid-template-areas:"fig unit" "fig opts" "fig res";column-gap:28px;align-items:start}
  .lq-part:has(> .lq-say.has-fig) > .lq-say{display:contents}
  .lq-part:has(> .lq-say.has-fig) > .lq-say > :not(.lq-sayu){grid-area:fig;margin:0;justify-items:center;justify-self:stretch;align-self:start;align-content:start}
  .lq-part:has(> .lq-say.has-fig) .mn-fig .mn-sheet{margin:0 auto}
  .lq-part:has(> .lq-say.has-fig) > .lq-say > .lq-sayu{grid-area:unit}
  .lq-part:has(> .lq-say.has-fig) > .lq-in{grid-area:opts;margin-top:12px}
  .lq-part:has(> .lq-say.has-fig) > .lq-res{grid-area:res}
}
@media (max-width:699px){
  .t-mcq.is-short{grid-template-columns:1fr 1fr}
  .lq-title{font-size:clamp(22px,6vw,26px);margin:6px 0 8px}
  .lq-learnfirst{margin:0 0 6px}
}
/* the marker's line shows once: in the panel (owner, 9 Oct), not again under the options of a one-part question */
.lp-screen.lp-q .lq:not(:has(.lq-part ~ .lq-part)) .lq-res .say{display:none}
/* Finish! (owner, 9 Oct): the quiet grey button reads as a button, not as disabled: ink label (AA), the usual lip,
   a hover and the lip-aware focus ring (brainlag.css) */
.lp-done2 .lp-btn.quiet:hover,.lp-actions .lp-btn.quiet:hover{background:var(--btn-2-hover)}

/* The lesson top bar is the same in every state (owner, 9 Oct: "keep top bar items in common positions"): the cross
   at the far left, the place line and the progress track (empty when there is no progress yet, a locked lesson too)
   in the middle, then settings, Sparks and sound on the right in that order, whatever order the scripts added them
   in. Sparks has a fixed width, and where a state has no Sparks its slot is kept, so nothing moves.
   tests/learn/visual/topbar.py checks the positions in every state. */
.lp-top > .lp-x{order:0}.lp-top > .lp-loc{order:1}.lp-top > .lp-bar{order:2}
.lp-top > .lp-meta{order:3;margin-inline-start:-14px}
.lp-top > .ls-ui{order:10}.lp-top > .lh-topcount{order:11;width:72px;min-width:72px;justify-content:center}.lp-top > .lp-snd{order:12}
.lp-top:not(:has(> .lh-topcount))::after{content:'';order:11;flex:none;width:72px;height:44px}   /* the Sparks slot, kept */
@media (max-width:560px){.lp-top > .lp-loc{order:20}}
@media (max-width:440px){.lp-top > .lp-meta{margin-inline-start:-6px}}
@media (max-width:359px){.lp-top > .lp-meta{margin-inline-start:-4px}}

/* the checkpoint between questions (owner, 9 Oct: "adaptive to spacing"): one group centred in the space between the
   top bar and the action bar, scaled to the screen: Noodle about a quarter of its height, the line up to 56 px, the
   progress as steps, and on a wide screen Continue right under them */
.lp-break{padding-top:0;min-height:calc(100dvh - 72px - var(--lp-foot-h,96px) - 40px);display:grid;place-items:center}
.lp-break-in{display:grid;justify-items:center;gap:clamp(10px,2vh,20px)}
.lp-break-coach{width:clamp(140px,25vh,250px);height:clamp(144px,25.8vh,258px)}
.lp-break > .lp-break-in > h1{font-size:clamp(32px,4.5vw,56px);margin:0;line-height:1.1}
.lp-break:not(.reduce) > .lp-break-in > h1{animation:lnRiseT .3s .12s var(--ln-spring) both}
.lp-break .lp-sub{font-size:clamp(17px,1.4vw,21px);margin:0;color:var(--ink-2)}
.lp-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:min(92vw,520px)}
.lp-steps i{width:clamp(18px,2vw,28px);height:10px;border-radius:5px;background:var(--sunk)}
.lp-steps i.on{background:var(--study)}
.lp-break-go{min-width:220px;margin-top:clamp(4px,1.5vh,14px)}
@media (min-width:700px){body:has(.lp-break.is-on) .lp-foot{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.lp-break > .lp-break-in > h1{animation:none}}

/* the question's shape while it loads: soft blocks, the two columns where there is music */
.lp-skel{display:grid;gap:12px;position:relative;width:100%}
.lp-screen:has(> .lp-skel){width:100%;align-self:stretch}
@media (min-width:1100px){.lp-stage:has(.lp-skel.has-fig){max-width:1180px}}
.lp-skel i{display:block;border-radius:14px;background:var(--sunk)}
.lp-skel .t{height:30px;width:min(70%,420px)}.lp-skel .m{height:16px;width:180px;margin-bottom:6px}
.lp-skel-b{display:grid;gap:14px;justify-items:stretch}.lp-skel-r{display:grid;gap:10px}
.lp-skel .fig{height:min(30vh,260px);border-radius:16px}
.lp-skel .bub{height:72px;border-radius:20px}.lp-skel .o{height:56px}
@media (min-width:1100px){.lp-skel.has-fig .lp-skel-b{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);column-gap:28px}.lp-skel.has-fig .fig{height:min(58vh,520px)}.lp-skel .o{height:64px}}
@media (max-width:699px){.lp-skel .fig{height:22vh}}
.lp-skel .ld{position:absolute;inset-inline-start:0;inset-inline-end:0;top:40%;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.lp-skel i{animation:lnSkel 1.4s var(--ease-io,cubic-bezier(.45,0,.55,1)) infinite alternate}}
@keyframes lnSkel{from{opacity:1}to{opacity:.55}}

/* question lists and unit lists without hairlines (owner's standing rule: no hairline dividers): each row a soft
   tinted card rounded on every side, the groups apart by spacing */
.ln-units,.ln-qlist{border-top:0;display:grid;gap:8px}
.ln-units > li,.ln-qlist > li{border-bottom:0;background:var(--sunk);border-radius:14px}
.ln-units a,.ln-qlist a{padding:14px 16px;border-radius:14px}
.ln-units a:hover,.ln-qlist a:hover{background:color-mix(in srgb,var(--study) 8%,var(--sunk))}
.ln-qlist > li > span{padding:12px 16px 0}.ln-qlist > li > span.m{padding:2px 16px 12px}
.ln-qlist + h2,.ln-qlist + h3{margin-top:26px}

/* the hint and the lesson (owner, 9 Oct: "better vis for those"): quiet secondary buttons side by side under the
   choices, the drawn bulb and book, a tinted fill and the house lip; below Check in weight; the hint opens as a
   tinted panel under them */
.lq-aids{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.lq-aids:empty{display:none}
.lq-aid{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 16px 0 13px;border:2px solid var(--btn-2-edge);border-radius:14px;background:var(--btn-2);
  color:var(--ink);font:650 16px/1 var(--f-body);cursor:pointer;box-shadow:0 3px 0 var(--btn-2-lip);transition:background-color .12s var(--ln-ease),transform .09s var(--ln-spring);--lip:3px;--ring-r:19px}
.lq-aid .i{flex:none;color:var(--study-ink)}
.lq-aid:hover{background:var(--btn-2-hover)}
.lq-aid:active{background:var(--btn-2-press)}
.lq-aid:active{transform:translateY(3px);box-shadow:none;--lip:0px}
.lq-aid.is-open{background:var(--study-tint)}
.lq-aid.is-offer{background:var(--study-tint);color:var(--study-ink)}
.lq-aid:focus-visible{outline:none;position:relative}
.lq-aid:focus-visible::after{content:"";position:absolute;inset:-5px -5px calc(-5px - var(--lip)) -5px;border:3px solid var(--study-ink);border-radius:var(--ring-r);pointer-events:none}
.lq-hintbtn.is-offer{font-size:16px}
.lq-hint{margin:12px 0 0}
.lq-hint[hidden]{display:none}
.lq-more{display:inline-flex;margin-top:8px;padding:6px 0;border:0;background:none;color:var(--study-ink);font:700 15.5px/1.3 var(--f-body);cursor:pointer}
.lq-more:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px;border-radius:6px}
@media (max-width:420px){.lq-aids{gap:8px}.lq-aid{flex:1 1 auto;justify-content:center;padding:0 12px}}
@media (min-width:1100px){
  .lq-part:has(> .lq-say.has-fig){grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"fig unit" "fig opts" "fig aids" "fig hint" "fig res"}
  .lq-part:has(> .lq-say.has-fig) > .lq-aids{grid-area:aids}
  .lq-part:has(> .lq-say.has-fig) > .lq-hint{grid-area:hint}
}
/* Review the lesson: a side sheet on wider screens (the question stays as it is behind it), a bottom sheet on phones */
@media (min-width:700px){
  dialog.lp-revisit{margin:0 0 0 auto;width:min(620px,92vw);max-width:none;height:100dvh;max-height:100dvh;border-radius:22px 0 0 22px}
}
@media (forced-colors:active){.lq-aid{border:2px solid ButtonText}.lq-aid:focus-visible::after{border-color:Highlight}}
@media (prefers-reduced-motion:reduce){.lq-aid{transition:none}}

/* adaptive difficulty (docs/plans/ADAPTIVE.md): the Stretch marker, the step-up line, the Questions setting and the
   skills meter (Learning, Secure, Stretch); calm, no pressure */
.lq-stretch{display:inline-flex;align-items:center;margin-inline-end:10px;padding:2px 9px;border-radius:8px;background:var(--study-tint);color:var(--study-ink);font:700 13.5px/1.6 var(--f-body)}
.lq-upnote{margin:-4px 0 10px;color:var(--study-ink);font-weight:650;font-size:16px}
.ls-adapt{display:grid;gap:6px;padding:8px 0 6px}
.ls-adapt-t{font-weight:600;font-size:16px;color:var(--ink)}
.ls-adapt-b{display:grid;grid-template-columns:1fr;justify-items:stretch;gap:6px}
.ls-adapt button{width:100%;max-width:none;margin:0;min-height:44px;padding:4px 12px;white-space:normal;text-align:start;border:1px solid var(--rule-2);border-radius:10px;background:none;color:var(--ink-2);font:600 15px var(--f-body,inherit);cursor:pointer}
.ls-adapt button[aria-checked="true"]{border-color:var(--study-ink);background:var(--study-tint);color:var(--study-ink)}
.ls-adapt button:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.ln-skills{margin:22px 0 0;text-align:start;width:100%;max-width:560px}
.lp-done-body .ln-skills{margin-top:18px}
main.my .ln-skills{margin:28px 0 32px}
.ln-skills h2{font-size:19px;margin:0 0 10px}
.ln-skills ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ln-skills li{display:grid;grid-template-columns:minmax(0,1fr) auto 74px;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:var(--sunk)}
.ln-skills .t{font-weight:600}
.ln-skills .lv{display:flex;gap:4px}
.ln-skills .lv i{width:22px;height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink-3) 30%,transparent)}
.ln-skills .lv i.on{background:var(--study)}
.ln-skills .w{font-size:14.5px;color:var(--ink-2);text-align:end}
@media (max-width:420px){.ln-skills li{grid-template-columns:minmax(0,1fr) auto}.ln-skills .w{grid-column:1/-1;text-align:start;margin-top:-6px}}

/* a music card with its Play in the corner fills the question's column at every width, the music centred in it */
.lq .mn-fig > .mn-sheet.has-play{width:100%;box-sizing:border-box;display:grid;justify-items:center}

/* the time summary on results screens: a line, a dot per question, one remark, the exam context and 1 to 3 tips */
.lp-time{width:100%;max-width:560px;margin:20px auto 0;text-align:start}
.lp-result .lp-time{margin-bottom:8px}
.lp-time .lp-dh{margin:0 0 6px}
.lp-time-sum{margin:0;color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.lp-time-sum b{color:var(--ink)}
.lp-time-dots{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.lp-time-dots li,.lp-time-key i{width:14px;height:14px;border-radius:50%;box-sizing:border-box;background:var(--study)}
.lp-time-dots li.over,.lp-time-key i.over{background:color-mix(in srgb,var(--gold) 60%,var(--sunk))}
.lp-time-dots li.miss,.lp-time-key i.miss{background:transparent;border:3px solid var(--study)}
.lp-time-dots li.over.miss{background:transparent;border-color:color-mix(in srgb,var(--gold) 70%,var(--ink-3))}
.lp-time-key i.miss{border-color:var(--ink-3)}
.lp-time-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;color:var(--ink-3);font-size:13.5px}
.lp-time-key span{display:inline-flex;align-items:center;gap:6px}
.lp-time-key i{display:inline-block;width:10px;height:10px}
.lp-time-key i.miss{border-width:2px}
.lp-time-rem{margin:12px 0 0;color:var(--ink);font-weight:650;font-size:17px}
.lp-time-exam{margin:6px 0 0;color:var(--ink-2)}
.lp-time-th{margin:16px 0 8px;font-size:16px}
.lp-tips{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.lp-tips li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--sunk)}
.lp-tips p{margin:0}
.lp-tips .lp-tipgo{white-space:nowrap}
@media (max-width:520px){.lp-tips li{grid-template-columns:1fr}.lp-tips .lp-tipgo{justify-self:start}}
.lq-pace .pz{display:none}
.lq-pace.is-paused:not(.is-done) .pz{display:inline}
.lq-pace.is-paused:not(.is-done) .w,.lq-pace.is-paused:not(.is-done) .t{display:none}
.lp-clock.is-paused,.lp-clock.over{color:var(--ink-3)}
/* the test clock never touches the progress bar: the bar's row keeps 10 px before it at every width; on a phone the
   word after the time drops (the clock's aria-label keeps it) */
.lp-top > .lp-meta:has(.lp-clock){margin-inline-start:-4px}
.lp-clock{white-space:nowrap}
@media (max-width:440px){.lp-clock .w{display:none}.lp-top > .lp-meta:has(.lp-clock){margin-inline-start:4px}}
@media (max-width:359px){.lp-top > .lp-meta:has(.lp-clock){margin-inline-start:6px;font-size:13.5px}}

/* the warm line on results screens (owner, 9 Oct: hype the learner up about something true) */
.lp-cheer{margin:10px 0 0;color:var(--ink);font:650 clamp(17px,.6vw + 13px,20px)/1.4 var(--f-body);text-wrap:pretty}
.lp-result .lp-cheer{max-width:560px;margin:8px auto 4px;text-align:center}
@media (min-width:900px){.lp-done2 .lp-cheer{text-align:start}}

/* the Stretch bonus under the XP (adaptive, docs/plans/ADAPTIVE.md) */
.lp-stretchxp{margin:6px 0 0;color:var(--study-ink);font-weight:650;font-size:15px}

/* Learn articles at every width (owner, 9 Oct; learn.js capScores and articleSplit):
   - a score keeps its natural size: a staff space never over 12 px (13 from 1920 px), centred in its card; on a phone
     the card's width sets it;
   - a part with one figure is a split (words left, figure right at its natural width) wherever the words keep 380 px
     beside it (.is-side, from about 760 px); otherwise the figure sits under its paragraph;
   - wider screens grow the column and the text; tests/learn/visual/la_layout.py checks for cut-off text, empty space
     and a staff space over the cap. */
.la,.la .lp-prose,.la .la-sec,.la .g6-art-part,.la .lp-prose > *{min-width:0;max-width:100%}
.la .la-split{display:flex;flex-direction:column}
.la .la-text,.la .la-fig{display:contents}
.la figure.g6-ex{justify-items:stretch}
.la figure.g6-ex .mn-sheet{width:100%;max-width:none;box-sizing:border-box}
.la figure.g6-ex .mn-host > svg:only-child{width:100% !important;height:auto;margin:0 auto;display:block}
.la figure.g6-ex .mn-host:has(> svg + svg){display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;align-items:flex-start}
.la figure.g6-ex .mn-host:has(> svg + svg) > svg{flex:1 1 240px;width:auto !important;height:auto}
.la .lp-prose p,.la .lp-prose ul,.la .lp-prose ol,.la .lp-prose li,.la-sec > h2,.la-body h2{max-width:62ch}
.la .la-split.is-side{display:grid;column-gap:40px;align-items:start;justify-content:start}
.la .la-split.is-side > .la-text{display:block}
.la .la-split.is-side > .la-text > *{order:0 !important}
.la .la-split.is-side > .la-fig{display:block;position:sticky;top:88px}
.la .la-split.is-side figure.g6-ex{margin:4px 0 0}
@media (min-width:1200px){.lp-stage:has(> .la.is-on){max-width:1180px}.la .lp-video{max-width:none}}
@media (min-width:2200px){.lp-stage,.lp-stage:has(.lq.has-vis),.lp-stage:has(.lq-say.has-fig),.lp-stage:has(.lp-skel.has-fig),.lp-stage:has(.lp-try.is-on){max-width:1560px}}
@media (min-width:1600px){.lp-stage:has(> .la.is-on){max-width:1320px}.la .lp-prose p,.la .lp-prose li{font-size:19px}}
@media (min-width:2200px){.lp-stage:has(> .la.is-on){max-width:1560px}.la .lp-prose p,.la .lp-prose li{font-size:20px}}
/* the Plus lock screen (the free first screen, then the stop) as wide as the lesson it stands in for: without this it
   stayed at 900 px from 1700 px while the unlocked lesson grows (music agent, 10 Oct) */
.lp-lock .pm-card .lq-tscroll{--paper:var(--surface)}   /* the scroll edge fades into the card, not the page colour */
@media (min-width:1200px){.lp-stage:has(> .lp-lock.is-on){max-width:1180px}.lp-lock .pm{max-width:none}}
@media (min-width:1600px){.lp-stage:has(> .lp-lock.is-on){max-width:1320px}.lp-lock .pm-prose p,.lp-lock .pm-prose li{font-size:19px}}
@media (min-width:2200px){.lp-stage:has(> .lp-lock.is-on){max-width:1560px}.lp-lock .pm-prose p,.lp-lock .pm-prose li{font-size:20px}}

/* the worked solution in the feedback panel (learn.js wsToSheet; owner, 9 Oct): large, every step a numbered line */
.lp-sheet .lq-ws.in-sheet{margin:14px 0 4px;padding:14px 16px 16px;border:0;border-radius:16px;background:var(--surface);color:var(--ink)}
.lp-sheet .lq-ws.in-sheet h2{font-size:19px;margin:0 0 10px}
.lp-sheet .lq-ws.in-sheet ol{gap:10px;padding-inline-start:28px;font-size:18px;line-height:1.5;font-variant-numeric:tabular-nums}
.lp-sheet .lq-ws.in-sheet li{padding-inline-start:4px}
.lp-sheet .lq-ws.in-sheet li::marker{color:var(--ink-3);font-weight:700}
@media (max-width:600px){.lp-sheet .lq-ws.in-sheet{padding:12px 12px 14px}.lp-sheet .lq-ws.in-sheet ol{font-size:18px}}

/* a question's music: Play in a column beside the score, not a row above it, so the options stay above the fold on a
   phone (the button is never over the notation either way) */
.lq .mn-fig .mn-sheet:has(> .mn-sheet-bar){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:start}
.lq .mn-fig .mn-sheet > .mn-sheet-bar{order:2;width:auto;margin:0}
.lq .mn-fig .mn-sheet > .mn-host{order:1;min-width:0}

/* the panel leads with the result (wsToSheet): the answer large, then the ticks for method marks */
.lp-sheet .lp-ans-big{margin:4px 0 8px;font:700 clamp(22px,2vw + 14px,28px)/1.25 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
.lp-sheet .ms.in-sheet{margin:8px 0 6px;padding:10px 14px 12px;border:0;border-radius:14px;background:var(--surface);color:var(--ink)}
.lp-sheet .ms.in-sheet .msh{margin:0 0 6px;font-weight:700}
.lp-sheet .ms.in-sheet ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.lp-sheet .ms.in-sheet label{display:flex;gap:10px;align-items:flex-start;min-height:44px;align-items:center;cursor:pointer}
.lp-sheet .ms.in-sheet input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:var(--study-btn)}
.lp-sheet .ms.in-sheet .lq-hint{display:none}
/* a label and its value on each row (learn.js kvTable): each label on the first line of its value, the values' lines
   wrapping under each other from one start; the labels kept on one line while that needs at most 45% of the room (.kv-one),
   or else the label column held to 45% (never under its longest word) so the values keep 55% */
.lq-tscroll > table.is-kv{display:table}
table.is-kv tr > th,table.is-kv tr > td,.lq-tscroll > table.is-kv tr > :is(th,td){vertical-align:baseline;text-align:start}
table.is-kv tr > :first-child{padding-inline-end:16px}
table.is-kv[style*="--kv-fs"] tr > :is(th,td){font-size:var(--kv-fs)}   /* learn.js kvFit: steps the type down (at most 18%) when a long word would push the table sideways; words never split */
table.is-kv.kv-wrap tr > :last-child{overflow-wrap:anywhere}   /* the last resort, for one word wider than the room */
table.is-kv.kv-one tr > :first-child{white-space:nowrap;width:var(--kv-l,auto)}
.lq-tscroll > table.is-kv:not(.kv-one){width:100%}
table.is-kv:not(.kv-one) tr > :first-child{width:45%}
/* the "in a row" streak (owner, 10 Oct: "spaced badly"; it hung under the bar's rounded end, touching it): on a wide
   screen it sits IN the header row, right of the bar and centred on it, in a slot kept the same width whether or not
   a streak shows (7.5em holds "✦ 100 in a row"), so the bar never moves when it comes or goes; at least 12 px clear
   of the bar's end. On a phone it sits at the right of the lesson line under the bar, centred on that line, which
   keeps room for it. The spark is cap height (0.9em box, its tips at the caps' top and the baseline), 0.35em from
   the figure. */
.lp-top .lp-combo{position:static;display:inline-flex;align-items:center;justify-content:flex-end;gap:.35em;min-width:7.5em;margin-inline-start:12px;font-size:14px;line-height:1;white-space:nowrap;pointer-events:none;transform-origin:100% 50%}
.lp-top .lp-combo[hidden]{display:inline-flex;visibility:hidden}
.lp-top .lp-combo svg{width:.9em;height:.9em}
@media (max-width:560px){
  .lp-top .lp-combo{position:absolute;inset-inline-end:max(10px,env(safe-area-inset-right));bottom:calc(10px + 4px + 10.5px - .5em);min-width:0;margin:0;height:1em}
  .lp-top .lp-combo[hidden]{display:none}
  .lp-top:has(.lp-combo) > .lp-loc{padding-inline-end:64px}
}
/* the answer-feedback footer (owner, 10 Oct: "Spacing of buttons?"): on a wide screen the message (mark, title, line)
   and the buttons share one row inside the content column, the buttons centred on the message, with 24 px above and
   below; Correct, Not yet and the shown answer all use it, so the footer keeps its shape between states. A phone keeps
   message over buttons (side by side, 12 px apart, the main one last, safe-area padding below). */
@media (min-width:700px){
  .lp-foot:has(> .lp-sheet:not(:empty)){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:center;min-height:132px;box-sizing:border-box;
    padding:24px max(16px,calc((100% - 820px) / 2)) calc(24px + env(safe-area-inset-bottom))}
  .lp-foot:has(> .lp-sheet:not(:empty)) > .lp-sheet{max-width:none;width:auto;margin:0;padding:0;max-height:calc(100dvh - 160px)}
  .lp-foot:has(> .lp-sheet:not(:empty)) > .lp-actions{max-width:none;width:auto;margin:0;padding:0;flex-wrap:nowrap}
}
@media (min-width:1700px){.lp-foot:has(> .lp-sheet:not(:empty)){padding-inline-start:max(16px,calc((100% - 900px) / 2));padding-inline-end:max(16px,calc((100% - 900px) / 2))}}
/* the second button on a coloured band: an edge that holds at 3:1 against the band (the band's own ink, softened) */
.lp-foot:has(.lp-sheet.is-right) .lp-btn.quiet{border-color:color-mix(in srgb,var(--ink) 62%,var(--ln-right-bg))}
.lp-foot:has(.lp-sheet.is-wrong) .lp-btn.quiet{border-color:color-mix(in srgb,var(--ink) 62%,var(--ln-wrong-bg))}
.lp-foot:has(.lp-sheet.is-neutral) .lp-btn.quiet{border-color:color-mix(in srgb,var(--ink) 62%,var(--ln-self-bg))}
/* the course row (courses-nav's unit-intro.php 'back': "< course", previous and next lesson): one slim line under the
   header, as wide as the content under it, clear of the bar and the streak */
.lp-unavrow{box-sizing:border-box;width:100%;max-width:820px;margin:0 auto;padding:0 16px}
.lp-unavrow .ln-unav{margin:0;font-size:14px;gap:2px 18px;flex-wrap:nowrap}
.lp-unavrow .ln-unav-pn{width:auto;flex-wrap:nowrap;justify-content:flex-end;min-width:0}
.lp-unavrow .ln-unav-tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lp-unavrow .ln-unav a{min-height:36px}
@media (min-width:1100px){body:has(.lp-stage .lq-say.has-fig) .lp-unavrow,body:has(.lp-stage .lq.has-vis) .lp-unavrow{max-width:1180px}}
@media (min-width:1200px){body:has(.lp-stage > .la.is-on) .lp-unavrow,body:has(.lp-stage > .lp-lock.is-on) .lp-unavrow{max-width:1180px}}
@media (min-width:1600px){body:has(.lp-stage > .la.is-on) .lp-unavrow,body:has(.lp-stage > .lp-lock.is-on) .lp-unavrow{max-width:1320px}}
@media (min-width:1700px){.lp-unavrow{max-width:900px}}
@media (min-width:2200px){body:has(.lp-stage > .la.is-on) .lp-unavrow,body:has(.lp-stage > .lp-lock.is-on) .lp-unavrow,body:has(.lp-stage .lq.has-vis) .lp-unavrow,body:has(.lp-stage .lq-say.has-fig) .lp-unavrow{max-width:1560px}}
@media (max-width:440px){.lp-unavrow{padding:0 10px}}
/* the mastery view (learn-mastery-ui.js; docs/efficacy/MASTERY_VIEW_SPEC.md): a status word per lesson on the unit page,
   in a column kept for it before it fills (My learning's cards are in course.css, .lm). Subject tints only;
   Fading is a calm amber outline, never red; every state is written as words. No pills: small rounded tags. */
.lm-scope{--ci:var(--blue-ink);--ct:var(--blue-tint)}
.lm-scope[data-s="science"]{--ci:var(--study-ink);--ct:var(--study-tint)}
.lm-scope[data-s="cs"]{--ci:var(--play-ink);--ct:var(--play-tint)}
.lm-scope[data-s="music"]{--ci:var(--music-ink);--ct:var(--music-tint)}
.lm-scope:not([data-music]) .lsr{display:grid;grid-template-columns:minmax(0,1fr) 7.4em;align-items:center;column-gap:6px}
.lm-st{justify-self:end;padding:5px 8px;border-radius:7px;font:700 13px/1 var(--f-body);white-space:nowrap;color:var(--ink-3)}
.lm-st.is-learning{color:var(--ci);box-shadow:inset 0 0 0 2px var(--ct)}
.lm-st.is-secure{color:var(--ci);background:var(--ct)}
.lm-st.is-fading{color:var(--gold-ink);box-shadow:inset 0 0 0 2px var(--gold)}
.lm-note{margin:8px 0 0;color:var(--ink-3);font-size:13.5px;max-width:60ch}
/* a code part (learn-code.js; .lqc, since learn-calc.css owns .lc): an editor in the body's mono face, Run and "Run the tests", what it printed, and the
   public tests, each passing or not in words as well as by its mark. No red: a failing test is the amber "not yet". */
.lqc{display:grid;gap:10px;margin:6px 0 0}
.lqc-code{display:block;width:100%;box-sizing:border-box;min-height:9em;resize:vertical;padding:12px 14px;border:2px solid var(--rule-2);border-radius:14px;background:var(--surface);color:var(--ink);
  font:500 15.5px/1.55 var(--f-mono,ui-monospace,Menlo,monospace);tab-size:4;white-space:pre;overflow:auto}
.lqc-code:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.lqc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lqc-btn{min-height:44px;padding:0 16px;border-radius:12px;border:2px solid var(--btn-2-edge);background:var(--btn-2);color:var(--ink);font:700 15.5px var(--f-body);cursor:pointer;box-shadow:0 3px 0 var(--btn-2-lip)}
.lqc-btn.is-main{background:var(--study-btn);color:var(--on-study-btn);border-color:transparent;box-shadow:0 3px 0 var(--study-btn-lip)}
.lqc-btn:disabled{opacity:.55;cursor:default}
.lqc-st{color:var(--ink-2);font-size:15px}
.lqc-out{margin:0;padding:10px 14px;border-radius:12px;background:var(--sunk);color:var(--ink);font:500 14.5px/1.5 var(--f-mono,ui-monospace,Menlo,monospace);white-space:pre-wrap;overflow-wrap:anywhere;max-height:16em;overflow:auto}
/* SQL code parts: the tables' setup script, folded; Run's result as a table that scrolls sideways in its own box */
.lqc-setup{margin:0 0 10px}.lqc-setup summary{cursor:pointer;font-weight:700;color:var(--study-ink);padding:6px 0}
.lqc-setup pre{margin:6px 0 0;padding:10px 14px;border-radius:12px;background:var(--sunk);font:500 14px/1.5 var(--f-mono,ui-monospace,Menlo,monospace);white-space:pre;overflow-x:auto}
.lqc-out.is-sql{white-space:normal;overflow-x:auto}.lqc-out.is-sql p,.lqc-out.is-sql pre{margin:0}
.lqc-tbl{border-collapse:collapse;font:500 14px/1.4 var(--f-mono,ui-monospace,Menlo,monospace)}
.lqc-tbl th,.lqc-tbl td{padding:4px 12px;border-bottom:2px solid var(--rule);text-align:start;white-space:nowrap}.lqc-tbl th{font-weight:700}
.lqc-tests{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lqc-t{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px;row-gap:6px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--sunk);font-size:15px}
.lqc-t > :not(.lqc-ic){grid-column:2}
.lqc-t .lqc-tn{font-weight:700;color:var(--ink)}
.lqc-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
@media (max-width:520px){.lqc-spec{grid-template-columns:minmax(0,1fr)}}
.lqc-col,.lqc-got{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.lqc-h{font-size:13px;font-weight:600;color:var(--ink-3)}
.lqc-v{display:block;max-width:100%;font:500 14.5px/1.45 var(--f-mono,ui-monospace,Menlo,monospace);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}   /* a value breaks only if it alone is wider than the column */
.lqc-ic{grid-row:1;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink-3);margin-top:3px}
.lqc-t.is-pass{background:var(--ln-right-bg)}.lqc-t.is-pass .lqc-ic{background:var(--ln-right);box-shadow:none}
.lqc-t.is-fail{background:var(--ln-wrong-bg)}.lqc-t.is-fail .lqc-ic{box-shadow:inset 0 0 0 3px var(--ln-wrong)}
.lqc-got{color:var(--ink-2)}.lqc-got:empty{display:none}
/* a required output in a prompt (<strong><code>Access granted</code></strong>) stands out: bold monospace */
.lq :is(strong,b) > code,.lq code > :is(strong,b){font-weight:700;font-family:var(--f-mono,ui-monospace,Menlo,monospace)}
/* a list or exact-text answer (learn.js, text part modes seq and exact) is a one-line textarea that grows onto more lines as it fills */
textarea.lq-field.t-grow{display:block;box-sizing:border-box;resize:none;overflow:hidden;line-height:1.4;white-space:pre-wrap;overflow-wrap:break-word}
.lq-line:has(> textarea.t-grow){align-items:flex-start}
/* speech bubbles hug their words (owner, 11 Oct: "That long of a bubble needed for small text?"): Noodle's question
   bubble and the unit tip are as wide as their lines need, at most 38 characters or the room there is, beside him;
   a question bubble that holds a table, code, a figure or an answer box keeps the row's width. Lines are balanced so
   the last is never one short word. The tail is drawn to fit (sayDraw). */
.lq-sayu .lq-sayb{justify-self:start;width:fit-content;max-width:min(38ch,100%);min-width:7em}
.lq-sayu .lq-sayb:has(table,pre,figure,svg:not(.lq-saybg),input,textarea,.lq-tscroll){justify-self:stretch;width:auto;max-width:none}
.lq-sayb .lq-prompt .pt,.ln-tip-b{text-wrap:pretty;text-wrap:balance}
.ln-tip-b{width:fit-content;max-width:min(38ch,100%)}