/* The LEGO notebooks' shared system: tokens, page type, booklet figures, chrome.
   Used by /notebook/lego/ and every notebook under it. */
/* Layout: one reading column; full-bleed bands mark the turns of the argument; a staircase rail tracks the climb.
   Figures are pages from a building-instruction booklet: a tinted panel, a big step numeral per rung (1a, 1b),
   a parts callout listing the pieces you'll handle, and bricks drawn as plastic (flat fills, a side band, stud highlights).
   Colour roles: red (--b-red) = the piece you move; yellow (--b-yel) = LEGO's actual answer, and the "click" when
   something locks; dark and grey bricks = context. Studs appear only where they mean something (a figure's baseplate).
   Two layers: the plastic carries the weight, the chrome recedes. Chrome is hairline (1px, --rule / --grid), labels are
   regular weight unless they name the answer, readouts are regular with only the key number bold. Diagonal hatch
   (hatch()) is the one mark for "this fails" or "too recent to know"; things not built yet are ghost bricks, not dashed boxes. */
:root{
  --paper:#F7F7F4; --ink:#17191D; --muted:#5D626A; --rule:#D7DBE0; --stud:#E3E6EA; --unit:#D3DDEA;
  --red:#C91A09; --blue:#1F5FAD; --amber:#B7791F; --green:#2F7D4F; --card:#FFFFFF;
  --note:#FFF5CF; --note-ink:#5B4A0E; --night:#0E1114; --night-ink:#E9E7E2; --night-muted:#8E959E;
  --booklet:#E8EEF6; --callout:#F6F8FC; --callout-line:#C3D0E2; --plate-stud:#D6DFEB; --grid:#D3DCE8; --yellow-ink:#7A5E00;
  --b-red:#C91A09; --b-red-hi:#E2432D; --b-red-lo:#8C1406;
  --b-dark:#3A3D42; --b-dark-hi:#51555C; --b-dark-lo:#222428;
  --b-grey:#A0A5A9; --b-grey-hi:#BCC0C3; --b-grey-lo:#72777B;
  --b-yel:#F2CD37; --b-yel-hi:#F9DF77; --b-yel-lo:#B8961C;
  --b-q:#DADFE5; --b-q-hi:#EDF0F3; --b-q-lo:#B3BAC3;
  --b-edge:rgba(23,25,29,.42);
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --pitch:30px; --col:40rem; --wide:64rem;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#121417; --ink:#E8E6E1; --muted:#9AA0A8; --rule:#2B3037; --stud:#1D2126; --unit:#1F2A36;
  --red:#F04A35; --blue:#79AEFF; --amber:#E2A64B; --green:#5CC489; --card:#181B1F;
  --note:#2B2612; --note-ink:#E9D58C; --night:#08090B; --night-ink:#E9E7E2; --night-muted:#8E959E;
  --booklet:#1A1F28; --callout:#232A36; --callout-line:#34405A; --plate-stud:#212835; --grid:#283040; --yellow-ink:#F5CD2F;
  --b-dark:#363940; --b-dark-hi:#4C5058; --b-dark-lo:#1C1E22; --b-q:#2C3139; --b-q-hi:#3B414A; --b-q-lo:#1B1F24; --b-edge:rgba(0,0,0,.55); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#121417; --ink:#E8E6E1; --muted:#9AA0A8; --rule:#2B3037; --stud:#1D2126; --unit:#1F2A36;
  --red:#F04A35; --blue:#79AEFF; --amber:#E2A64B; --green:#5CC489; --card:#181B1F;
  --note:#2B2612; --note-ink:#E9D58C; --night:#08090B; --night-ink:#E9E7E2; --night-muted:#8E959E;
  --booklet:#1A1F28; --callout:#232A36; --callout-line:#34405A; --plate-stud:#212835; --grid:#283040; --yellow-ink:#F5CD2F;
  --b-dark:#363940; --b-dark-hi:#4C5058; --b-dark-lo:#1C1E22; --b-q:#2C3139; --b-q-hi:#3B414A; --b-q-lo:#1B1F24; --b-edge:rgba(0,0,0,.55); color-scheme:dark}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{background-color:var(--paper);color:var(--ink);font:400 1.08rem/1.65 var(--f-body);margin:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 4rem}
main{max-width:var(--wide);margin:0 auto}
/* big screens: figures and bands get more room; the reading column stays 40rem. lego.js caps each drawing at 1.4× its design width so type never balloons */
@media (min-width:1280px){:root{--wide:76rem}}
header.site{padding-top:1.25rem}
.home-mark{display:inline-block;width:38px;height:38px;line-height:0}
.home-mark svg{display:block}
section#q{padding-top:2rem}
.col{max-width:var(--col);margin:0 auto}
section{padding-block:4.5rem 1rem;scroll-margin-top:1rem}
h1,h2,h3{font-family:var(--f-display);font-weight:700;text-wrap:balance;line-height:1.06;margin:0 0 .55em}
h1{font-size:clamp(2.5rem,7.5vw,5.2rem);font-stretch:115%;letter-spacing:-.015em}
h2{font-size:clamp(1.7rem,4.2vw,2.6rem);font-stretch:110%}
h3{font-size:1.15rem;font-stretch:100%;margin-top:2rem}
p{margin:0 0 1em}
.eyebrow{font:600 .72rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.eyebrow b{color:var(--red);font-weight:600}
.lede{font-size:1.3rem;line-height:1.45}
.bridge{font:italic 400 1.2rem/1.5 var(--f-body);color:var(--muted);border-left:1.5px solid color-mix(in srgb,var(--red) 60%,transparent);padding-left:1rem;margin:2.2rem 0}
.bridge b{font-style:normal;color:var(--ink);font-weight:600}
a{color:var(--blue)}
.paper{background:var(--card);border:1px solid var(--rule)}
.fig{margin:2rem auto;max-width:var(--wide);background:var(--booklet);border:0;border-radius:12px;padding:1.25rem 1.35rem 1.1rem}
.fig svg{display:block;width:100%;height:auto}
/* drawings are things you drag, not text you select: no selection flicker or tap flash while scrubbing */
.fig svg,.fig canvas,.fig .sliderrow,.fig .rung,.fig .parts,.fig .words,.fig .cell,.fig .tile{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.rung{display:flex;flex-wrap:wrap;gap:.4rem .85rem;align-items:center;margin:2rem 0 .8rem;font:400 .82rem/1.35 var(--f-mono);color:var(--muted)}
.rung:first-child,.fig>input[type=hidden]:first-child+.rung{margin-top:0}
.rung .sn{font:800 2.2rem/1 var(--f-display);font-stretch:100%;color:var(--ink);font-variant-numeric:tabular-nums;min-width:2.9rem}
.rung .sn small{font-size:.5em;font-weight:700;color:var(--muted);margin-left:.04em}
.rung span{max-width:34rem}
.parts{margin-left:auto;display:inline-flex;flex-wrap:wrap;gap:.35rem .8rem;align-items:center;background:var(--callout);border:1px solid var(--callout-line);border-radius:8px;padding:.4rem .7rem;font:400 .74rem/1.2 var(--f-mono);color:var(--muted)}
.parts>span{display:inline-flex;gap:.4rem;align-items:center;white-space:nowrap}
.parts b{color:var(--ink);font-weight:600}
.parts svg{display:block;width:auto!important;flex:none}
.fig button:not(.tile):not(.cell){background:var(--callout);border:1px solid var(--callout-line);border-radius:7px;color:var(--ink)}
.fig button:not(.tile):not(.cell):hover{border-color:var(--muted);background:var(--callout)}
.fig button:not(.tile):not(.cell)[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.yl{color:var(--yellow-ink)}
.sliderrow{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin-top:.6rem}
.slabel{font:400 .82rem/1.2 var(--f-mono);color:var(--muted);white-space:nowrap}
.slabel b{font:600 1.05rem var(--f-mono);color:var(--red);margin-left:.3rem;font-variant-numeric:tabular-nums}
.fig svg#rulerSvg{max-width:560px;margin:0 auto}
.fig svg#studSlider{flex:1 1 220px;max-width:420px;min-width:200px;width:auto;touch-action:none;cursor:grab;overflow:visible}
#studSlider:focus-visible{outline:none} #studSlider:focus-visible .knob{stroke:var(--ink);stroke-width:2}
.checklist{display:grid;gap:.9rem}
.checklist .grp{display:grid;gap:4px;justify-content:start}
.checklist .lbl{font:400 .74rem/1 var(--f-mono);color:var(--muted);display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.cell{all:unset;box-sizing:border-box;width:46px;height:34px;border-radius:5px;background:var(--callout);display:grid;place-items:center;cursor:pointer}
.cell:hover{box-shadow:0 0 0 1.5px var(--callout-line)}
.cell[aria-current="true"]{box-shadow:0 0 0 2px var(--ink)}
.cell:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.cell svg{display:block;width:auto!important}
.cell.mir{opacity:.22}
.found{font:600 1.05rem/1 var(--f-mono);color:var(--ink)} .found small{font-weight:400;font-size:.75rem;color:var(--muted)}
@media (max-width:520px){.cell{width:38px;height:30px}.rung .sn{font-size:1.8rem;min-width:2.4rem}}
.nudge{animation:nudge 1.4s cubic-bezier(.3,.7,.3,1) .4s 2}
@keyframes nudge{0%,100%{transform:translate(0,0)}35%,60%{transform:translate(36px,0)}}
.hint{animation:hintin .5s ease-out both}
@keyframes hintin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.drop{animation:drop .42s cubic-bezier(.3,1.4,.5,1) both}
@keyframes drop{from{transform:translateY(-26px);opacity:0}to{transform:none;opacity:1}}
.figcap{font:400 .8rem/1.5 var(--f-mono);color:var(--muted);margin-top:.7rem}
.figcap b{color:var(--ink);font-weight:600}
.controls{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-top:.7rem;font:400 .85rem/1.3 var(--f-mono);color:var(--muted)}
.controls label{display:flex;gap:.5rem;align-items:center}
.controls input[type=range]{flex:1;min-width:10rem;accent-color:var(--red)}
button{font:400 .8rem/1 var(--f-mono);color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:.55rem .75rem;cursor:pointer;border-radius:6px}
button:hover{background:var(--stud)}
button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.readout{font:400 .95rem/1.5 var(--f-mono);color:var(--ink);margin-top:.7rem;font-variant-numeric:tabular-nums}
.readout b,.readout .hl,.readout .yl,.readout .ok,.readout .bad{font-weight:600}
.ok{color:var(--green)} .bad{color:var(--red)} .hl{color:var(--red)}
.note{margin:1.4rem 0;padding:.75rem .95rem;background:var(--note);color:var(--note-ink);border:0;border-radius:6px;font:400 .8rem/1.5 var(--f-mono)}
.note b{font-weight:600}
blockquote.patent{margin:1.8rem 0;padding:.15rem 0 .15rem 1.2rem;border:0;border-left:1px solid var(--muted);background:none}
blockquote.patent p{font-size:1.18rem;margin:0}
blockquote.patent cite{display:block;margin-top:.6rem;font:400 .78rem/1.4 var(--f-mono);color:var(--muted);font-style:normal}
.pimg{display:block;max-width:100%;height:auto}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pimg{filter:invert(1)}}
:root[data-theme="dark"] .pimg{filter:invert(1)}
.bleed{width:100vw;margin-left:calc(50% - 50vw);position:relative}
.bleed-in{max-width:var(--wide);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sheet{background:var(--card);border-block:1px solid var(--rule);padding-block:3rem}
.sheet-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.5rem;align-items:center}
.sheet-grid>*{min-width:0}
@media (max-width:760px){.sheet-grid{grid-template-columns:1fr}}
.night{background:var(--night);color:var(--night-ink);padding-block:4rem}
.night .eyebrow,.night .figcap{color:var(--night-muted)}
.night .fig{background:#1A1F28}
.night button,.night .fig button:not(.tile):not(.cell){background:#232A36;color:var(--night-ink);border-color:#34405A}
.night button[aria-pressed="true"],.night .fig button:not(.tile):not(.cell)[aria-pressed="true"]{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.night .fig button:not(.tile):not(.cell):hover{border-color:var(--night-ink);background:#232A36}
.night .rung{color:var(--night-muted)} .night .rung .sn{color:var(--night-ink)} .night .rung .sn small{color:var(--night-muted)}
.night .parts{background:#232A36;border-color:#34405A;color:var(--night-muted)} .night .parts b{color:var(--night-ink)}
.night .note{background:#1E1B0E;color:#E9D58C;border-color:#E9D58C}
.unitgrid{background-color:var(--card);border-block:1px solid var(--rule);background-image:radial-gradient(circle at 50% 50%,transparent 0 8.5px,var(--stud) 9px 10.5px,transparent 11px);background-size:var(--pitch) var(--pitch)}
.unitgrid.unit{background-image:linear-gradient(var(--unit) 1px,transparent 1px),linear-gradient(90deg,var(--unit) 1px,transparent 1px),linear-gradient(var(--muted) 1px,transparent 1px),linear-gradient(90deg,var(--muted) 1px,transparent 1px);background-size:6px 6px,6px 6px,30px 30px,30px 30px;background-blend-mode:normal}
.stairs a{cursor:pointer}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem}
.grid2>*{min-width:0}
.stat{border-top:1px solid var(--rule);padding-top:.6rem}
.stat .v{font:700 2.1rem/1 var(--f-display);font-stretch:112%;font-variant-numeric:tabular-nums}
.stat .l{font:400 .78rem/1.4 var(--f-mono);color:var(--muted);margin-top:.35rem}
.slot{aspect-ratio:16/9;max-width:100%;display:grid;place-items:center;text-align:center;border:1.5px dashed var(--muted);color:var(--muted);font:400 .85rem/1.5 var(--f-mono);padding:1rem}
.picker{display:flex;flex-wrap:wrap;gap:.4rem}
.picker button{font-weight:400}
.card{border:1px solid var(--rule);background:var(--card);padding:1rem;margin-top:.9rem}
.sw{display:inline-block;width:.9rem;height:.9rem;border:1px solid var(--muted);vertical-align:-.12rem;margin-right:.35rem}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font:400 .78rem var(--f-mono);color:var(--muted);margin-top:.5rem}
.legend i{display:inline-block;width:.8rem;height:.8rem;margin-right:.35rem;vertical-align:-.1rem}
.steps{display:grid;gap:1rem}
.step{border-left:2px solid #2A3038;padding:.2rem 0 .2rem 1rem;color:var(--night-muted);cursor:pointer}
.step.on{border-color:var(--red);color:var(--night-ink)}
.step b{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;color:var(--red)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2rem;align-items:start}
@media (min-width:821px){.split .sticky{order:2!important}.split .steps{order:1!important}.split{grid-auto-flow:dense}}
.night input[type=range]{accent-color:#F04A35}
.split>*{min-width:0}
.sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 1rem)}
@media (max-width:820px){.split{grid-template-columns:1fr}.sticky{position:static}}
.src{font:400 .8rem/1.7 var(--f-mono);color:var(--muted)}
svg text{font-family:var(--f-mono)}
.ax{stroke:var(--grid)}
/* rail */
#rail{position:fixed;left:max(10px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%);z-index:5;display:none}
#rail a{display:block;width:96px;height:22px;margin:3px 0;text-decoration:none;font:600 .62rem/22px var(--f-mono);letter-spacing:.06em;color:var(--muted);border:1px solid var(--rule);border-radius:2px;background:var(--paper);padding-left:8px;position:relative;text-transform:uppercase}
#rail a::before,#rail a::after{content:"";position:absolute;top:-5px;width:12px;height:4px;border:1px solid var(--rule);border-bottom:0;background:var(--paper)}
#rail a::before{left:14px}#rail a::after{left:62px}
#rail a.on{color:#fff;background:var(--red);border-color:var(--red)}
#rail a.on::before,#rail a.on::after{background:var(--red);border-color:var(--red)}
#rail a.done{color:var(--ink);border-color:var(--muted)}
#rail a.done::before,#rail a.done::after{border-color:var(--muted)}
@media (min-width:1360px){#rail{display:block}}
.stairs-list{display:none;list-style:none;padding:0;margin:1rem 0;counter-reset:s}
.stairs-list li{margin:0 0 .4rem}
.stairs-list a{display:flex;gap:.7rem;align-items:baseline;text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:6px;background:var(--card);padding:.6rem .75rem}
.stairs-list b{font:700 1rem/1.2 var(--f-display);min-width:5.5rem}
.stairs-list span{font:400 .8rem/1.3 var(--f-mono);color:var(--muted)}
.stairs-list i{font:600 .7rem var(--f-mono);color:#fff;background:var(--red);padding:.15rem .4rem;font-style:normal}
@media (max-width:700px){#stairsFig{display:none}.stairs-list{display:block}}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:600px){.scrollx>svg{min-width:560px}.scrollx>svg.w2{min-width:760px}.scrollx::after{content:"scroll sideways →";display:block;font:400 .7rem var(--f-mono);color:var(--muted);text-align:right;padding-top:.2rem;position:sticky;left:0}}
.render{display:block;max-width:100%;height:auto}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .render{filter:invert(1)}}
:root[data-theme="dark"] .render{filter:invert(1)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;align-items:end}
.pair>*{min-width:0;margin:0}
@media (max-width:560px){.pair{grid-template-columns:1fr}}
.seg{display:inline-flex;flex-wrap:wrap;gap:.35rem}
.credit{font:400 .72rem/1.4 var(--f-mono);color:var(--muted)}
.photoband{overflow:hidden}
.photoband img{display:block;width:100%;height:clamp(260px,58vh,640px);object-fit:cover;transform:scale(1.06);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.photoband.in img{transform:none}
.photoband figcaption{margin-top:.7rem}
.photo{display:block;width:100%;height:auto}
.photo-cap{font:400 .8rem/1.5 var(--f-mono);color:var(--muted);margin-top:.6rem}
.photo-cap b{color:var(--ink);font-weight:600}
.night .photo-cap{color:var(--night-muted)} .night .photo-cap b{color:var(--night-ink)} .night .credit a{color:var(--night-muted)} .night .figcap b{color:var(--night-ink)}
.credit a{color:inherit}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr));gap:.5rem;margin-bottom:1.2rem}
@media (max-width:600px){.tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.4rem}.tile{scroll-snap-align:start}}
.tile{all:unset;box-sizing:border-box;display:block;cursor:pointer;background:var(--callout);border:1px solid transparent;border-left:3px solid var(--k,var(--callout-line));border-radius:8px;padding:.55rem .65rem;font:400 .75rem/1.4 var(--f-mono);color:var(--muted);min-width:0}
.tile:hover{border-color:var(--callout-line);border-left-color:var(--k,var(--callout-line))}
.tile[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--ink);background:var(--callout);color:var(--muted)}
.tile:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.tile .tn{font:700 .95rem/1.2 var(--f-display);color:var(--ink);display:block}
.tile .ex{display:flex;gap:.4rem;align-items:center;margin-top:.3rem;min-width:0}
.tile .ex i{flex:none;width:1.35rem;height:.95rem;border:1px solid var(--muted);border-radius:1px;position:relative}
.tile .ex i::before,.tile .ex i::after{content:"";position:absolute;top:-.3rem;width:.4rem;height:.25rem;background:inherit;border:1px solid var(--muted);border-bottom:0}
.tile .ex i::before{left:.12rem} .tile .ex i::after{right:.12rem}
.tile .ex span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tile .ex b{font-weight:600}
.tiles-hint{display:none;margin:-.2rem 0 .4rem}@media (max-width:600px){.tiles-hint{display:block}}

.zoomseg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;margin-bottom:.8rem}
.zoomseg button{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.6rem .3rem;min-height:52px}
.zoomseg button b{font-size:1rem}
.zoomseg button span{font-weight:400;font-size:.72rem;opacity:.85}
#gripSvg{display:block;width:100%;touch-action:pan-y;cursor:ew-resize;border-radius:6px}
.gripText{font:400 1rem/1.55 var(--f-body);margin:.9rem 0 0;min-height:4.8em}

@media (prefers-reduced-motion:reduce){.photoband img{transform:none;transition:none}}

#popSvg,#heapsSvg,#rulerSvg{touch-action:pan-y}
#rulerSvg .grab{cursor:ew-resize}
#rulerSvg line,#rulerSvg text,#rulerSvg rect{pointer-events:none}
#rulerSvg .handle{cursor:ew-resize}
#plateSvg .phandle{touch-action:none}
#levelSvg .tap,#stackSvg .tap{cursor:pointer}
#levelSvg text{font-size:12.5px}
#binSvg text{font-size:12.5px} #binSvg .vhandle{cursor:ew-resize;outline:none} #binSvg .vhandle:focus-visible .knob{stroke:var(--ink);stroke-width:2.5}
#levelSvg .tap:hover rect{stroke-width:2.2}
#plateSvg .phandle{cursor:ns-resize;outline:none}
#plateSvg .phandle:focus-visible .knob{stroke:var(--ink);stroke-width:2.5}
.figA-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1.6rem;align-items:start}
.figA-grid>*{min-width:0}
@media (max-width:860px){.figA-grid{grid-template-columns:1fr}}
.chiprow{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .5rem}
.chipbtn{font-weight:400;font-size:.75rem;padding:.4rem .6rem}
#placeSvg .rotate{cursor:pointer}
#placeSvg .drag{touch-action:none;cursor:grab}
#placeSvg .drag:active{cursor:grabbing}
@media (pointer:coarse){
  button{min-height:44px;padding-inline:.9rem}
  .controls input[type=range]{height:36px}
  .picker button{min-height:40px}
  .step{padding-block:.6rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- the LEGO notebooks (sub-pages) ---------- */
.crumb{font:400 .8rem/1.4 var(--f-mono);color:var(--muted);text-decoration:none;display:inline-flex;gap:.4rem;align-items:center;margin:1.6rem 0 0}
.crumb:hover{color:var(--ink)}
.calc{font:400 .95rem/1.4 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink);margin:.9rem 0 0;display:grid;gap:.75rem}
.calc>div{display:grid;gap:.15rem}
.calc .k{font-size:.74rem;color:var(--muted)} .calc .sum{border-top:1px solid var(--rule);padding-top:.7rem}
.calc b{font-weight:600}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.series{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.6rem;margin:1.2rem 0 0}
.series a{display:block;text-decoration:none;color:var(--muted);background:var(--booklet);border-radius:10px;padding:.9rem 1rem;font:400 .8rem/1.45 var(--f-mono)}
.series a b{display:block;font:700 1.05rem/1.2 var(--f-display);color:var(--ink);margin-bottom:.3rem}
.series a:hover{box-shadow:0 0 0 1px var(--callout-line)}
.series a[aria-current="page"]{opacity:.55;pointer-events:none}