/* Themes and Levers. One stylesheet for all three pages, so it caches once.
   Rules that must hold are documented in CLAUDE.md:
   - --faint is the lightest text allowed anywhere (4.5:1 both themes)
   - --line is decorative and never paints a character; --edge carries interactive borders
   - --accent fills, --accent-text writes                                              */

/* ---------- shared ---------- */
:root{
  /* every text value below meets 4.5:1 on --bg; --edge meets 3:1 for interactive borders */
  --bg:#FFFFFF; --panel:#FAFAFA; --ink:#030712;
  --muted:#4B5563; --faint:#6B7280;
  --line:#E8E8EA; --line-soft:#F1F1F3; --edge:#94949D;
  --accent:#FE6E0F; --accent-text:#BF4C01; --accent-ink:#030712; --accent-wash:#FFF3EA;

  /* Height of the sticky header, and of the collapsed section bar beneath it on
     mobile. Everything that pins below them derives its offset from these rather
     than repeating a number, because the header grows to two rows under 820px.
     site.js measures both and overwrites these, so they are only the fallback. */
  --headerh:60px; --snavh:0px;
  /* the page gutter, so full-bleed elements can cancel it exactly */
  --pad:40px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E0E0E; --panel:#161618; --ink:#FAFAFA;
  --muted:#D1D5DB; --faint:#9CA3AF;
  --line:#242427; --line-soft:#1B1B1E; --edge:#5E5E65;
  --accent:#FE6E0F; --accent-text:#FE6E0F; --accent-ink:#0E0E0E; --accent-wash:#22150D;
}}
:root[data-theme="dark"]{
  --bg:#0E0E0E; --panel:#161618; --ink:#FAFAFA;
  --muted:#D1D5DB; --faint:#9CA3AF;
  --line:#242427; --line-soft:#1B1B1E; --edge:#5E5E65;
  --accent:#FE6E0F; --accent-text:#FE6E0F; --accent-ink:#0E0E0E; --accent-wash:#22150D;
}
*{box-sizing:border-box}
/* no widows or orphans: headings balance across lines, prose avoids a short last line.
   Both are progressive; the JS pass below is the guaranteed floor. */
h1,h2,h3,h4,.tn,.pn,.angle-name,.lvname h2,.thead h2,.sec h2{text-wrap:balance}
p,figcaption,.sub,.lead,.tbody,.tsig,.angle-def,.whatis,.rabout,.sline,.pid,.note,.hold,.meth,.delta{text-wrap:pretty}
body{background:var(--bg);color:var(--ink);
  font-family:Geist,"Geist Fallback",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.mono,.lab,.step-no,.pill,.act,.sg,.rl,.rv,.n{font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,Menlo,monospace}
.lab{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:400}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
@media(max-width:640px){:root{--pad:22px}}

header{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:30}
header .wrap{display:flex;align-items:center;gap:24px;min-height:60px;flex-wrap:wrap}
/* the brand is the way back to the workshop. It keeps its own weight and colour:
   it already reads as the strongest thing in the header, so a hover recolour
   would only invent a treatment nothing else uses. */
.brand{display:flex;align-items:center;gap:10px;font-weight:500;font-size:15px;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none}
.brand:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:2px}
.mark{width:22px;height:22px;border-radius:999px;background:var(--accent);flex:none}
nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap;align-items:center}
nav a{font-size:13.5px;color:var(--muted);text-decoration:none;font-weight:400;letter-spacing:-.005em;
  transition:color .15s}
nav a:hover{color:var(--ink)}
nav a.here{color:var(--ink)}

/* theme toggle. Pill, per the radius rule. Only one icon shows at a time: the
   one for the theme you would move to, chosen in CSS so it is right on first
   paint even when no explicit choice has been stored. */
.tt{flex:none;width:32px;height:32px;border-radius:999px;border:1px solid var(--edge);
  background:none;color:var(--faint);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s}
.tt:hover{color:var(--ink);border-color:var(--ink)}
.tt:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.tt svg{width:15px;height:15px;display:block}
.tt .i-sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tt .i-sun{display:block}
  :root:not([data-theme="light"]) .tt .i-moon{display:none}}
:root[data-theme="dark"] .tt .i-sun{display:block}
:root[data-theme="dark"] .tt .i-moon{display:none}

/* The toggle is a light switch, so the light comes out of the switch. The incoming
   theme is revealed as a circle growing from the button when the light goes on, and
   the outgoing one drains back into the button when it goes off, which is the same
   move run backwards on the layer above.

   Slow on purpose. The sweep is the whole page changing state and it should be
   watchable, not a flash: see corpus design/motion.md, where every correction asks
   for slower and more visible. site.js writes --sx, --sy and --sr from the button's
   position, so the origin is wherever the switch actually is.

   Additive only. Without startViewTransition, or under reduced motion, site.js
   swaps the attribute and none of this runs. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.vt-on::view-transition-old(root){z-index:1}
:root.vt-on::view-transition-new(root){z-index:2;
  animation:lightOn 750ms cubic-bezier(.2,.6,.2,1) forwards}
:root.vt-off::view-transition-new(root){z-index:1}
:root.vt-off::view-transition-old(root){z-index:2;
  animation:lightOff 650ms cubic-bezier(.4,0,.3,1) forwards}
@keyframes lightOn{
  from{clip-path:circle(0 at var(--sx) var(--sy))}
  to{clip-path:circle(var(--sr) at var(--sx) var(--sy))}}
@keyframes lightOff{
  from{clip-path:circle(var(--sr) at var(--sx) var(--sy))}
  to{clip-path:circle(0 at var(--sx) var(--sy))}}

/* The icon is lifted out of both snapshots so the switch stays visible above the
   sweep, turning as the light travels rather than popping when it lands. */
.tt svg{view-transition-name:themeicon}
::view-transition-old(themeicon){animation:iconOut 450ms cubic-bezier(.4,0,.2,1) both}
::view-transition-new(themeicon){animation:iconIn 450ms cubic-bezier(.4,0,.2,1) both}
@keyframes iconOut{to{opacity:0;transform:rotate(-100deg) scale(.5)}}
@keyframes iconIn{from{opacity:0;transform:rotate(100deg) scale(.5)}}

/* Under 820px the header becomes two rows: brand and toggle, then the nav on its
   own row flush with the left text edge, so it lines up with everything else. */
@media(max-width:820px){
  header .wrap{gap:12px 16px;padding-top:10px;padding-bottom:10px;min-height:0}
  .brand{order:1}
  .tt{order:2;margin-left:auto}
  nav{order:3;width:100%;margin-left:0;justify-content:flex-start;gap:18px}
}
.goalbar{border-bottom:1px solid var(--line);background:var(--panel)}
.goalbar .wrap{display:flex;gap:12px;align-items:baseline;padding-top:9px;padding-bottom:9px;font-size:13px}
.goalbar b{font-weight:500;letter-spacing:-.01em}

main{padding:62px 0 40px}
@media(max-width:820px){main{padding:34px 0 30px}}
.grid{display:grid;grid-template-columns:164px minmax(0,1fr);gap:44px;align-items:start}
@media(max-width:820px){.grid{grid-template-columns:1fr;gap:18px}}
.step-no{font-size:11px;letter-spacing:.1em;color:var(--faint);padding-top:10px}
.rail{position:sticky;top:calc(var(--headerh) + 18px)}
@media(max-width:820px){.rail{position:static}}
.railnav{display:flex;flex-direction:column;gap:2px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.railnav button{font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,Menlo,monospace;font-size:12px;
  display:flex;align-items:center;gap:8px;
  text-align:left;background:none;border:0;padding:4px 0;color:var(--faint);cursor:default;
  letter-spacing:-.005em;transition:color .15s}
/* The marker is a dot, and the current step's is both larger and the accent. Both
   sizes sit in the same 8px slot so every label starts on one lane. */
.railnav button::before{content:"";flex:none;width:4px;height:4px;margin:0 2px;
  border-radius:999px;background:var(--faint)}
.railnav button.done{color:var(--muted);cursor:pointer}
.railnav button.done:hover{color:var(--ink)}
.railnav button.on{color:var(--ink)}
.railnav button.on::before{width:8px;height:8px;margin:0;background:var(--accent)}
/* Under 820px the step count and the step list share one row, and the list scrolls
   sideways rather than wrapping. It runs to the screen edge, cancelling the page
   gutter exactly, and fades out over the last 40px so the cut edge reads as more to
   come rather than as a clipping bug. The negative margin must cancel --pad and no
   more: overshoot paints past the viewport and scrolls the whole page sideways. */
@media(max-width:820px){
  .rail{display:flex;align-items:center;gap:16px;min-width:0}
  .step-no{flex:none;padding-top:0}
  .railnav{flex-direction:row;flex-wrap:nowrap;gap:16px;min-width:0;
    margin-top:0;padding-top:0;border-top:0;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-right:calc(-1 * var(--pad));padding-right:var(--pad);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .railnav::-webkit-scrollbar{display:none}
  .railnav button{flex:none;white-space:nowrap;padding:2px 0}
}
h1{font-size:clamp(34px,5vw,62px);font-weight:500;letter-spacing:-.04em;line-height:1;margin:0;
  max-width:17ch;text-wrap:balance}
h1.big{font-size:clamp(42px,7.2vw,94px);letter-spacing:-.045em;line-height:.95;max-width:14ch}
.sub{margin:22px 0 0;font-size:16.5px;color:var(--muted);max-width:56ch;line-height:1.5;letter-spacing:-.01em}

/* step 1 */
/* The question the field answers. It labels the input, so the separation sits
   above it and it binds to the field below. */
.goalq{margin:48px 0 0;font-size:19px;font-weight:500;color:var(--muted);letter-spacing:-.01em;line-height:1.5}
/* The step's only action sits beside the field rather than in the footer, so the
   answer and the way out of the step are one row. */
.fieldrow{display:flex;align-items:center;gap:16px;margin:12px 0 0}
.field{flex:1;min-width:0;position:relative}
.field input{width:100%;font-family:inherit;font-size:clamp(22px,2.2vw,24px);font-weight:500;
  letter-spacing:-.03em;color:var(--ink);background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:0 0 8px;outline:none;transition:border-color .18s;line-height:1.2}
.field input:focus{border-bottom-color:var(--accent-text)}
.ghost{position:absolute;left:0;top:0;pointer-events:none;user-select:none;font-family:inherit;
  font-size:clamp(22px,2.2vw,24px);font-weight:500;letter-spacing:-.03em;line-height:1.2;
  color:var(--faint);white-space:pre;max-width:100%;overflow:hidden}
.ghost.off{display:none}
.tw-cursor{display:inline-block;width:2px;height:1em;background:var(--accent-text);
  vertical-align:-.13em;margin-left:2px;animation:blink 1.05s steps(1,end) infinite}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
/* Too narrow to sit side by side: the button drops under the field, full width. */
@media(max-width:820px){
  .fieldrow{flex-direction:column;align-items:stretch;gap:20px}
  .fieldrow .act{width:100%}
}
.or{margin:32px 0 12px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:12.5px;padding:9px 15px;border-radius:999px;border:1px solid var(--edge);
  background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;font-weight:400}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pill:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

/* step 1 preview strip */
.next{border-top:1px solid var(--line);padding:40px 0 0;margin-top:66px}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.s{border-top:1px solid var(--line-soft);padding-top:12px}
.s .n{font-size:10.5px;color:var(--faint);letter-spacing:.1em}
.s h3{margin:6px 0 4px;font-size:14.5px;font-weight:500;letter-spacing:-.015em}
.s p{margin:0;font-size:13px;color:var(--muted);line-height:1.45}

/* step 2 */
.rows{margin-top:34px}
.trow{border-top:1px solid var(--line);padding:18px 0;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:start}
.trow.done{padding:12px 0;align-items:center}
.tn{font-size:19px;font-weight:500;letter-spacing:-.02em;margin:0}
.trow.done .tn{font-size:16px;color:var(--muted)}
.tbody{margin:6px 0 0;font-size:14.5px;color:var(--muted);line-height:1.45;max-width:66ch}
.tsig{margin:7px 0 0;font-size:13px;color:var(--faint);line-height:1.45;max-width:66ch}
.tsig b{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:400;display:block;margin-bottom:2px}
.seg{display:inline-flex;border:1px solid var(--edge);border-radius:999px;overflow:hidden;flex:none}
.sg{font-size:11.5px;padding:8px 15px;background:transparent;border:0;border-left:1px solid var(--edge);
  color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .15s}
.sg:first-child{border-left:0}
.sg:hover{color:var(--ink);background:var(--panel)}
.sg.on{background:var(--accent);color:var(--accent-ink)}
.sg:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
.ans{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);font-family:"Geist Mono",monospace}
.edit{background:none;border:0;color:var(--accent-text);font-family:"Geist Mono",monospace;font-size:11.5px;
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.trow{grid-template-columns:1fr;gap:14px}}

/* step 3 */
.grp{margin-top:30px}
.grp h3{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px;font-weight:400}
.tag{display:inline-block;font-size:14px;font-weight:500;letter-spacing:-.015em;padding:7px 14px;
  border-radius:999px;border:1px solid var(--edge);margin:0 5px 5px 0;color:var(--ink)}
.tag.lead{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.tag.out{border-style:dashed;color:var(--faint)}
.note{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:16px;
  color:var(--muted);max-width:70ch;line-height:1.55}
.note b{color:var(--ink);font-weight:500}

/* step 4 */
.pick{border-top:1px solid var(--line);padding:18px 0;cursor:pointer;display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;gap:18px;align-items:start}
.pick:hover .pn{color:var(--accent-text)}
.box{width:18px;height:18px;border:1px solid var(--edge);border-radius:2px;margin-top:4px;
  display:flex;align-items:center;justify-content:center;transition:all .15s;flex:none}
.pick.on .box{background:var(--accent);border-color:var(--accent)}
.pick.on .box::after{content:"";width:9px;height:5px;margin-top:-3px;
  border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);
  transform:rotate(-45deg)}
.pick:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.pick.full{opacity:.42;cursor:default}
.pick.full:hover .pn{color:var(--ink)}
.cap{font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin:26px 0 4px;display:flex;gap:9px;align-items:center}
.cap .dots{display:flex;gap:5px}
.cap i{width:9px;height:9px;border-radius:2px;border:1px solid var(--edge);display:block}
.cap i.on{background:var(--accent);border-color:var(--accent)}
.cap.max{color:var(--accent-text)}
.pn{font-size:19px;font-weight:500;letter-spacing:-.02em;margin:0;transition:color .15s}
.pick p{margin:5px 0 0;font-size:14px;color:var(--muted);line-height:1.45;max-width:64ch}
.why{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;padding-top:5px}
.pick.on .why{color:var(--accent-text)}
@media(max-width:700px){.pick{grid-template-columns:22px minmax(0,1fr)}.why{display:none}}

/* step 5 */
.angle{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin-bottom:34px}
.angle-top{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.angle-name{font-size:23px;font-weight:500;letter-spacing:-.025em;margin:0 0 5px;color:var(--accent-text)}
.angle-def{margin:0;font-size:14px;color:var(--muted);line-height:1.45;max-width:72ch}

.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,352px);gap:52px;align-items:start}
/* Stacked single-column below 1000px. The side column carries the reasoning for
   the dial ("why anyone moves this") and is reordered ahead of the decision itself,
   so a mobile reader sees the psychology before placing a marker, not after. */
@media(max-width:1000px){.cols{grid-template-columns:1fr;gap:34px}.cols .side{order:-1}}
/* The lever's position in the theme now labels the lever itself rather than sitting
   across in the angle block, so the count and the name read as one heading. */
.lvhead .lab{display:block;font-weight:500;margin-bottom:4px}
.lvname{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.lvname h2{margin:0;font-size:31px;font-weight:500;letter-spacing:-.03em;line-height:1.05}
.new{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);border:1px solid var(--accent-text);border-radius:999px;padding:3px 8px}
.whatis{margin-top:16px;font-size:14px;line-height:1.45;color:var(--muted);max-width:60ch}
.whatis b{display:block;font-weight:500}
.whatis p{margin:0}

.axis{margin-top:34px}
/* The poles label the two ends of the track directly. The rule that used to run
   between them sat next to the track's own line and read as part of neither. */
.ends{display:flex;justify-content:space-between;gap:26px;font-size:13px;line-height:1.4;
  color:var(--muted);margin-bottom:18px}
.ends span{max-width:46%}
.ends .r{text-align:right}
.arow{display:grid;grid-template-columns:96px minmax(0,1fr) 150px;gap:16px;align-items:center;margin-bottom:9px}
.rl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.rl.tgt{color:var(--accent-text)}
/* The scale is the line. A hairline runs between the first and last position and the
   dots are readings on it; five separate boxes read as five things, not as one
   dimension. The hit area is 44px square, larger than the dot it carries. */
.stops{position:relative;display:flex;justify-content:space-between;align-items:center;height:44px}
.stops::before{content:"";position:absolute;left:22px;right:22px;height:1px;background:var(--line)}
/* position:relative is load-bearing. The line is absolutely positioned, so without it
   the line paints over the dots and runs straight through them. */
.stop{position:relative;flex:none;width:44px;height:44px;padding:0;background:none;border:0;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.stop::after{content:"";width:9px;height:9px;border-radius:999px;border:1px solid var(--edge);
  background:var(--bg);transition:width .14s,height .14s,background .14s,border-color .14s}
.stop:hover::after{border-color:var(--ink)}
.now .stop.on::after{width:15px;height:15px;background:var(--ink);border-color:var(--ink)}
.tgt .stop.on::after{width:15px;height:15px;background:var(--accent);border-color:var(--accent)}
.stop:focus-visible{outline:2px solid var(--accent-text);outline-offset:-4px;border-radius:2px}
.rv{font-size:11px;color:var(--faint);line-height:1.3}
.rv.tgt{color:var(--accent-text)}
.delta{font-size:14px;color:var(--muted);margin-top:14px;padding-left:112px}
@media(max-width:700px){
  .arow{grid-template-columns:88px minmax(0,1fr);gap:12px}
  .rv{grid-column:2;margin-top:-3px}
  .delta{padding-left:0}
}

.side{border-top:1px solid var(--line);padding-top:20px}
@media(min-width:1001px){.side{border-top:0;border-left:1px solid var(--line);padding:0 0 0 34px}}
.side h3{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px;font-weight:400}
.pr{padding:0 0 13px;font-size:14px;line-height:1.45;color:var(--muted)}
.pr b{display:block;font-weight:500}

/* The principles as a sheet, under 820px only. Above that they are a column beside
   the lever, and the trigger and the sheet chrome do not exist. */
.side-open,.sheet-close,.scrim{display:none}
@media(max-width:820px){
  .side-open{display:inline-block;background:none;border:0;padding:0;margin-top:18px;
    cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-align:left}
  .side-open:hover{color:var(--ink)}
  .side-open:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
  .scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(3,7,18,.45);
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  .scrim.open{opacity:1;pointer-events:auto}
  /* 16px is the one radius in the system that is neither 0 nor a pill. It is the
     sheet's alone: see the note in CLAUDE.md. */
  .side{position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--bg);border:0;border-radius:16px 16px 0 0;
    padding:24px;margin:0;max-height:78vh;overflow-y:auto;
    transform:translateY(101%);visibility:hidden;
    transition:transform .26s ease,visibility 0s linear .26s;
    box-shadow:0 -8px 24px rgba(3,7,18,.12)}
  .side.open{transform:none;visibility:visible;transition-delay:0s}
  .side h3{display:none}
  .sheet-close{display:flex;margin:0 0 16px auto;align-items:center;justify-content:center;
    flex:none;width:32px;height:32px;border-radius:999px;border:1px solid var(--edge);
    background:none;color:var(--faint);cursor:pointer;padding:0;transition:color .15s,border-color .15s}
  .sheet-close:hover{color:var(--ink);border-color:var(--ink)}
  .sheet-close:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
  .sheet-close svg{width:14px;height:14px;display:block}
}
@media (prefers-reduced-motion:reduce){.side,.scrim{transition:none}}
.warn{background:var(--accent-wash);border-radius:2px;padding:15px 17px;margin-top:8px}
.warn .lab{color:var(--accent-text);display:block;margin-bottom:7px}
.warn b{font-weight:500;font-size:14px}
.warn p{margin:3px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}

.q{margin-top:32px}
.q .lab{display:block;margin-bottom:11px}
.ms{display:flex;flex-wrap:wrap;gap:7px}
.ms label{display:inline-flex;gap:9px;align-items:center;padding:9px 14px;cursor:pointer;font-size:13.5px;
  border:1px solid var(--edge);border-radius:999px;color:var(--muted);transition:all .15s}
.ms label:hover{border-color:var(--ink);color:var(--ink)}
.ms label.on{border-color:var(--accent);background:var(--accent-wash);color:var(--ink)}
.ms input{accent-color:var(--accent);width:14px;height:14px;margin:0}
.hold{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted);max-width:64ch}
.hold b{color:var(--ink);font-weight:500}

/* step 6 */
.sum{border-top:1px solid var(--line);padding-top:22px;margin-top:32px}
.sum h3{font-size:23px;font-weight:500;letter-spacing:-.025em;margin:0 0 6px;color:var(--accent-text)}
.sline{font-size:15.5px;line-height:1.55;margin:0 0 14px;color:var(--muted);max-width:74ch}
.sline b{color:var(--ink);font-weight:500}
.slv{border-top:1px solid var(--line-soft);padding-top:13px;margin:14px 0}
.slv h4{margin:0 0 4px;font-size:16.5px;font-weight:500;letter-spacing:-.015em}
.slv p{margin:0 0 4px;font-size:14px;color:var(--muted);line-height:1.45}
.slv p b{color:var(--ink);font-weight:500}
.slv .lab{display:block;margin-bottom:3px}
.slv .mono{font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--accent-text)}

footer{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);margin-top:56px;z-index:25}
footer .wrap{padding-top:14px;padding-bottom:14px}
/* same grid as the page body, so the bar's edges line up with the copy, not the rail */
footer .grid{align-items:center}
.footrow{display:flex;align-items:center;gap:14px;justify-content:flex-end;flex-wrap:wrap}
.acts{display:flex;gap:8px;align-items:center}
@media(max-width:820px){footer .railpad{display:none}}
.act{font-family:"Geist Mono",monospace;font-size:12.5px;letter-spacing:.02em;padding:12px 22px;
  border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);
  cursor:pointer;font-weight:500;transition:opacity .15s}
.act.ghostbtn{background:transparent;border-color:var(--edge);color:var(--ink)}
.act.ghostbtn:hover{border-color:var(--ink)}
.act:disabled{background:transparent;border-color:var(--edge);color:var(--faint);cursor:default}
.act:not(:disabled):hover{opacity:.85}
.act:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- reference page ---------- */
.rhero{padding:60px 0 30px}
@media(max-width:820px){.rhero{padding:34px 0 22px}}
.rhero h1{max-width:19ch}
.counts{display:flex;gap:0;margin-top:30px;border-top:1px solid var(--line);flex-wrap:wrap}
.ct{padding:16px 30px 16px 0;margin-right:30px;border-right:1px solid var(--line)}
.ct:last-child{border-right:0;margin-right:0}
.ct b{display:block;font-size:31px;font-weight:500;letter-spacing:-.03em;line-height:1}
.ct span{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* two columns: sticky nav, then content */
.refbody{display:grid;grid-template-columns:206px minmax(0,1fr);gap:56px;align-items:start;
  border-top:1px solid var(--line);padding-top:34px}
@media(max-width:900px){.refbody{display:block}}
.snav{position:sticky;top:calc(var(--headerh) + 22px)}
.snav nav{display:flex;flex-direction:column;align-items:flex-start}

/* The collapsed control exists only on mobile; the desktop rail shows the list. */
.snav-toggle{display:none}
.sn{display:flex;justify-content:flex-start;gap:8px;align-items:baseline;font-size:15px;
  font-weight:500;line-height:1.35;letter-spacing:-.015em;color:var(--faint);text-decoration:none;
  padding:4px 0;transition:color .2s}
.sn em{font-style:normal;font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--faint);
  transition:color .2s}
.sn:hover{color:var(--ink)}
.sn.on{color:var(--ink)}
.sn.on em{color:var(--accent-text)}
.sn.idx{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* Under 900px the section list collapses to a single row naming the section you
   are in, which the scroll spy already knows. A horizontal scroller was worse at
   both jobs: it hid most of the list and never said where you were. */
@media(max-width:900px){
  .snav{top:var(--headerh);background:var(--bg);z-index:20;
    border-bottom:1px solid var(--line);margin:0 calc(-1 * var(--pad)) 20px}
  .snav-toggle{display:flex;width:100%;align-items:baseline;gap:12px;
    background:none;border:0;padding:13px var(--pad);cursor:pointer;text-align:left;
    font-family:inherit;color:var(--ink)}
  .snav-toggle:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
  .snav-cur{font-size:14.5px;font-weight:500;letter-spacing:-.015em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .snav-cur::before{content:"+ ";color:var(--accent-text)}
  .snav-lab{margin-left:auto;flex:none;font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,Menlo,monospace;
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .snav-chev{flex:none;align-self:center;color:var(--faint);transition:transform .18s}
  .snav-chev svg{width:11px;height:11px;display:block}
  .snav.open .snav-chev{transform:rotate(180deg)}

  .snav nav{display:none;padding:2px var(--pad) 14px;
    max-height:calc(100vh - var(--headerh) - var(--snavh) - 20px);overflow-y:auto}
  .snav.open nav{display:flex}
  .sn{font-size:14.5px;padding:7px 0}
  .sn.idx{margin-top:8px;padding-top:12px}
}

.theme{padding:6px 0 46px;scroll-margin-top:calc(var(--headerh) + var(--snavh) + 24px)}
.thead{border-top:1px solid var(--line);padding-top:20px}
.theme:first-child .thead{border-top:0;padding-top:0}
.thead .n{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.12em;color:var(--faint)}
.thead h2{font-size:29px;font-weight:500;letter-spacing:-.03em;margin:6px 0 6px}
.thead p{margin:0;font-size:15px;color:var(--muted);line-height:1.5;max-width:64ch}
.thead .sig{margin-top:8px;font-size:13.5px;color:var(--faint);max-width:64ch}
.rlv{border-top:1px solid var(--line-soft);padding:22px 0 4px}
.rlv h3{font-size:18px;font-weight:500;letter-spacing:-.02em;margin:0 0 12px;
  display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
/* the same sentence the workshop shows under the lever name, from the same field */
.rabout{margin:0 0 12px;font-size:14px;color:var(--muted);line-height:1.45;max-width:66ch}
.rends{display:flex;justify-content:space-between;gap:26px;font-size:13.5px;color:var(--muted);line-height:1.4}
.rends span{max-width:47%} .rends .r{text-align:right;color:var(--accent-text)}
/* the same track as the workshop, with nothing placed on it: the reference states the
   five positions, it does not record a reading */
.rstops{position:relative;display:flex;justify-content:space-between;align-items:center;
  height:20px;margin:4px 0 13px}
.rstops::before{content:"";position:absolute;left:4px;right:4px;height:1px;background:var(--line)}
.rstops i{position:relative;display:block;width:9px;height:9px;border-radius:999px;
  border:1px solid var(--edge);background:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:0}
.chip{font-family:"Geist Mono",monospace;font-size:11px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:none;cursor:pointer}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip.ctr{border-color:var(--accent-text);color:var(--accent-text)}
.chip.ctr::before{content:"counter \00B7 ";opacity:.75}
.chip.ctr.on{background:var(--accent-text);color:var(--bg)}
.chipdesc{margin:8px 0 11px;padding:9px 12px;font-size:13px;line-height:1.45;color:var(--ink);
  background:var(--panel);border-left:2px solid var(--accent-text)}
.meth{font-size:13.5px;color:var(--faint);line-height:1.5}
.meth b{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:400;margin-right:8px}
.pidx{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 36px}
.pi{border-top:1px solid var(--line-soft);padding:14px 0}
.pitop{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pin{font-size:15px;font-weight:500;letter-spacing:-.015em}
.pic{font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--faint);white-space:nowrap}
.pib{height:2px;background:var(--line);margin:8px 0}
.pif{height:2px;background:var(--accent)}
.pid{margin:0 0 6px;font-size:13.5px;color:var(--muted);line-height:1.45}
.piw{font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--faint);line-height:1.7}
.foot{padding:34px 0 90px;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:70ch;
  border-top:1px solid var(--line);margin-top:10px}
.foot b{color:var(--ink);font-weight:500}

/* ---------- theory page ---------- */
.thbody{display:grid;grid-template-columns:206px minmax(0,1fr);gap:56px;align-items:start;
  border-top:1px solid var(--line);padding-top:34px}
@media(max-width:900px){.thbody{display:block}}
.sec{padding:6px 0 46px;scroll-margin-top:calc(var(--headerh) + var(--snavh) + 24px);max-width:72ch}
.sec .n{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.12em;color:var(--faint)}
.sec h2{font-size:29px;font-weight:500;letter-spacing:-.03em;margin:6px 0 14px;max-width:20ch}
.sec p{font-size:16px;color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:64ch}
.sec p b{color:var(--ink);font-weight:500}
.sec p.lead{font-size:18px;color:var(--ink);line-height:1.5;letter-spacing:-.012em}
figure{margin:32px 0 8px}
figure svg{width:100%;height:auto;display:block;overflow:visible}
figcaption{margin-top:14px;font-size:13.5px;color:var(--faint);line-height:1.5;max-width:62ch}
.svgtxt{font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,Menlo,monospace;font-size:12px;
  fill:currentColor}
.svgtxt.sm{font-size:10.5px;opacity:.72}
.svgtxt.hd{font-family:Geist,"Geist Fallback",-apple-system,sans-serif;font-size:14px;font-weight:500}
.pull{border-left:2px solid var(--accent);padding:2px 0 2px 18px;margin:26px 0;font-size:17px;
  color:var(--ink);line-height:1.5;letter-spacing:-.012em;max-width:58ch}