/* Laseras University.
 *
 * A reading surface, so the decisions that matter are measure, rhythm and
 * the pictures. The palette and the faces are the ones the rest of the site
 * and the application already use; nothing here invents a second identity.
 *
 * The 315 drawings are the reason this section exists. They are drawn once,
 * inside the app, and exported as SVG that names its colours through the
 * custom properties below, which is why one drawing sits correctly on the
 * light page and the dark one without being redrawn.
 */

:root{
  color-scheme:light;
  --r:3px; --r-lg:6px;

  --ground:#F5F5F3;
  --surface:#FFFFFF;
  --panel:#ECEEEB;
  --surface-2:#ECEEEB;
  --line:#D8DBD6;
  --line-2:#C3C8C0;

  --ink:#14161A;
  --ink-2:#454D57;
  --ink-3:#5F6771;

  /* Two oranges doing two jobs. The darker one is the only one that goes
     under text, because the brand orange on white measures 3.1:1 and body
     copy needs 4.5. */
  --accent:#C6420F;
  --accent-h:#A3350B;
  --mark:#FF5A1F;
  --accent-wash:rgba(198,66,15,.075);
  --accent-line:rgba(198,66,15,.30);

  --ok:#17794A;
  --warn:#8A5A06;
  --err:#B3261E;
  /* What goes ON the accent. White reads at 5.1:1 over the print-safe orange
     and at 2.6:1 over the dark theme's brighter one, so the two themes cannot
     share it. */
  --on-accent:#FFFFFF;

  --grid:rgba(20,22,26,.05);
  --shadow:0 22px 50px -34px rgba(20,22,26,.34);
  --shadow-sm:0 2px 5px -3px rgba(20,22,26,.28);

  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* One 4px spine. Every gap on the page is a multiple of it. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Six sizes, not fifteen. Half-pixel steps between components are not
     perceivable as rank; they are what a stylesheet looks like when every
     part was nudged on its own. Anything that needs a size takes one of
     these. */
  --t-xs:12px;   /* counts, tags, the small print */
  --t-sm:13px;   /* captions, breadcrumb, footer */
  --t-base:15px; /* card and UI text */
  --t-md:17px;   /* running prose and questions */
  --t-lg:20px;   /* sub-headings */
  --t-xl:22px;   /* the figures in the masthead */
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#111316;
  --surface:#181B1F;
  --panel:#1F2329;
  --surface-2:#1F2329;
  --line:#2A2F36;
  --line-2:#3A414A;

  --ink:#F1F2F4;
  --ink-2:#B4BAC2;
  --ink-3:#8E959E;

  /* Orange has to move the other way in the dark: the print-safe one goes
     muddy on a dark ground, so the brighter mark colour carries text here. */
  --accent:#FF7A45;
  --accent-h:#FFA077;
  --mark:#FF5A1F;
  --accent-wash:rgba(255,122,69,.10);
  --accent-line:rgba(255,122,69,.32);

  --ok:#3FBE80;
  --warn:#D9A441;
  --err:#FF8A80;
  --on-accent:#14161A;

  --grid:rgba(241,242,244,.045);
  --shadow:0 26px 60px -34px rgba(0,0,0,.8);
  --shadow-sm:0 2px 6px -3px rgba(0,0,0,.6);
}

/* The drawings speak the application's vocabulary.
 *
 * Every frame was authored inside Laseras and names its colours with the
 * app's own custom properties: --txt for solid ink, --txt-2 for the grey of
 * what you already have, --color-accent for what the step adds, --ok for
 * finished, --bg and --surface-2 for the material under it. Rather than
 * rewrite 315 drawings, the site answers to those names too. An undefined
 * one is not a wrong colour, it is an invisible stroke, so this block is
 * load-bearing rather than tidy.
 */
:root,:root[data-theme="dark"]{
  --bg:var(--surface);
  --txt:var(--ink);
  --txt-2:var(--ink-3);
  --color-accent:var(--mark);
  --font-sans:var(--sans);
  --font-mono:var(--mono);
  /* And the glossary drawings, which came from the previous application and
     name a third set again. --font in particular is load-bearing: their
     captions set it inside a `font:` shorthand, and an undefined custom
     property makes the whole shorthand invalid, which is why the captions
     were rendering at the browser default size and running out of the frame. */
  --font:var(--sans);
  --border2:var(--line-2);
  --accent-m:var(--accent-wash);
  --go:var(--ok);
  --txt2:var(--ink-2);
  --txt3:var(--ink-3);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-md);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* The surfaces the browser draws and most pages forget. */
::selection{background:var(--accent-wash);color:var(--ink)}
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}
:where(a,button,input,summary,[tabindex]):focus:not(:focus-visible){outline:none}
html{scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:3px solid var(--ground)}
::-webkit-scrollbar-track{background:transparent}

img,svg{max-width:100%}

a{color:var(--accent);text-decoration-color:var(--accent-line);text-underline-offset:2px}
a:hover{color:var(--accent-h);text-decoration-color:currentColor}

h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;text-wrap:balance;line-height:1.18}
h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.028em;line-height:1.08}
h2{font-size:clamp(21px,2.3vw,27px);letter-spacing:-.02em}
h3{font-size:var(--t-lg)}
h4{font-size:var(--t-base)}
p{margin:0}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* Read aloud, never seen, and never off the page.
 *
 * The usual position:absolute version resolves against the nearest positioned
 * ancestor, and there is none inside the comparison table, so each hidden
 * Yes/No label landed at its static position inside a horizontally scrolled
 * table and dragged the document 99px wider than the phone. Kept in flow at
 * one pixel instead: nothing to position, nothing to overflow. */
.sr{
  display:inline-block;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* ── Chrome ──────────────────────────────────────────────────────────── */

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--surface);color:var(--ink);padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--r);
}
.skip:focus{left:var(--s4);top:var(--s4)}

.top{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.top-in{
  max-width:1160px;margin:0 auto;padding:0 var(--s5);
  height:58px;display:flex;align-items:center;gap:var(--s5);
}
/* The mark and the wordmark are sized in em off the brand's own font-size and
   painted with currentColor, so one pair of files serves the light page, the
   dark page and any size the nav is set to. Their own fills are the previous
   site's, and would be invisible here. */
.brand{
  display:flex;align-items:center;gap:var(--s2);flex:0 0 auto;
  /* Not type: the mark and the wordmark are sized in em off this. */
  color:var(--ink);text-decoration:none;font-size:19px;
}
.brand svg{display:block}
.brand .lk-mark{height:1em;width:auto;aspect-ratio:336/360}
.brand .lk-mark path{fill:currentColor}
.brand .lk-word{height:.56em;width:auto;aspect-ratio:340/56}
.brand .lk-word g{fill:currentColor}
.nav{display:flex;align-items:center;gap:var(--s5);margin-left:auto}
.nav a{
  color:var(--ink-2);text-decoration:none;font-size:var(--t-base);font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;transition:color .16s ease,border-color .16s ease;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--mark)}
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--accent);color:var(--on-accent);text-decoration:none;
  font-size:var(--t-base);font-weight:600;padding:8px 16px;border-radius:var(--r);
  border:0;cursor:pointer;transition:background .16s ease,transform .12s ease;
}
.btn:hover{background:var(--accent-h);color:var(--on-accent)}
.btn:active{transform:scale(.97)}
.btn-2{
  background:transparent;color:var(--ink);border:1px solid var(--line-2);
}
.btn-2:hover{background:var(--surface);color:var(--ink);border-color:var(--ink-3)}
.themer{
  background:transparent;border:1px solid var(--line);border-radius:var(--r);
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);
  transition:border-color .16s ease,color .16s ease;
}
.themer:hover{border-color:var(--ink-3);color:var(--ink)}
.menu-btn{display:none}

/* ── Page frame ──────────────────────────────────────────────────────── */

.wrap{max-width:1160px;margin:0 auto;padding:0 var(--s5)}
.prose{max-width:68ch}

main{padding-bottom:var(--s9)}

.crumb{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  font-size:var(--t-sm);color:var(--ink-3);padding:var(--s5) 0 0;
}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb span[aria-hidden]{opacity:.5}

/* ── Masthead ────────────────────────────────────────────────────────── */

.mast{
  position:relative;
  padding:var(--s7) 0 var(--s6);
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg,transparent 55%,var(--ground) 100%),
    repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 32px);
}
.mast .lede{
  font-size:clamp(16px,1.7vw,19px);color:var(--ink-2);
  margin-top:var(--s4);max-width:56ch;line-height:1.55;
}
.mast .finder{margin-top:var(--s5);max-width:520px}
/* A plain row of links. A table of contents for headings 600px below is a
   list, not six cards that repeat themselves as soon as you scroll. */
.ways{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s5);
}
.ways a{
  font-size:var(--t-base);color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--accent-line);padding-bottom:1px;
  transition:color .16s ease,border-color .16s ease;
}
.ways a:hover{color:var(--accent);border-bottom-color:currentColor}
.mast .figs{
  display:flex;flex-wrap:wrap;gap:var(--s6);margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--line);
}
.fig{display:flex;flex-direction:column;gap:var(--s1)}
.fig b{font-family:var(--mono);font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.fig span{font-size:var(--t-sm);color:var(--ink-3)}

/* ── A small grid of destinations ────────────────────────────────────── */
/*
 * Used at the foot of the hub, where a table of contents belongs once the
 * reader has seen what is here. It used to sit above the fold instead, which
 * put four layers of chrome between the reader and the drawings.
 */
.paths{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  grid-template-columns:repeat(3,1fr);
}
.path{
  background:var(--surface);padding:var(--s5);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:var(--s2);
  transition:background .16s ease;position:relative;
}
a.path:hover{background:var(--panel)}
/* The "how this works" cards are not links, so they must not answer to a
   pointer as though they were. */
.path[style*="cursor:default"]:hover{background:var(--surface)}
.path .ph{display:flex;align-items:center;gap:var(--s3)}
.path .ico{color:var(--mark);flex:0 0 auto;display:block}
.path b{font-size:var(--t-md);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.path p{font-size:var(--t-base);color:var(--ink-2);line-height:1.5}
.path .n{
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);
  margin-top:auto;padding-top:var(--s2);
}

/* ── Section headings ────────────────────────────────────────────────── */

.sec{padding-top:var(--s8)}
.sec-h{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.sec-h .count{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-3)}
.sec-note{font-size:var(--t-base);color:var(--ink-2);margin-top:var(--s3);max-width:62ch}

/* ── The visual index ────────────────────────────────────────────────── */
/*
 * A card carries the guide's own first drawing. Recognising a tool by its
 * picture is faster than reading sixty names, and it is the one thing this
 * section has that no other laser software site does.
 */

.grid{
  display:grid;gap:var(--s4);margin-top:var(--s5);
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
}
.card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .16s ease,box-shadow .2s ease,transform .16s ease;
}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.card .shot{
  background:var(--panel);border-bottom:1px solid var(--line);
  padding:var(--s3) var(--s4);display:block;
}
.card .shot svg{display:block;width:100%;height:auto}
.card .body{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s1);flex:1}
.card b{font-size:var(--t-base);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
/* The whole sentence is in the HTML, for a search engine and for anybody
   reading with styles off. It is clamped to three lines here, at a line
   boundary, instead of being cut mid-clause by the generator: twenty cards
   used to end one word before the point. */
.card p{
  font-size:var(--t-sm);color:var(--ink-2);line-height:1.5;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.card .tag{
  align-self:flex-start;margin-top:auto;padding-top:var(--s2);
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);
}

/* A compact row, for the tools with no illustration yet. */
.rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s5);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.row{background:var(--surface);padding:var(--s3) var(--s4);display:flex;gap:var(--s3);align-items:baseline}
.row b{font-size:var(--t-base);font-weight:600;flex:0 0 auto}
.row span{font-size:var(--t-sm);color:var(--ink-3)}

/* ── A guide page ────────────────────────────────────────────────────── */

.guide-h{padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--line)}
.guide-h h1{margin-top:var(--s2)}
.guide-h .why{
  font-size:clamp(17px,1.8vw,20px);line-height:1.5;color:var(--ink-2);
  margin-top:var(--s4);max-width:60ch;
}

/* The three frames are one sequence, so they sit side by side and are read
   left to right. Stacked, the reader compares a drawing against another one
   a screen away, which is the comparison the guide is entirely about. They
   are also shown near the width they were drawn at: blown up to half a
   desktop each, the labels inside them float away from what they label. */
.steps{
  margin-top:var(--s7);display:grid;gap:var(--s5) var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
/* Three across reads as a sequence. Four or five across does not fit, and
   wrapping them 3 + 2 scrambles the order of the hardest procedures in the
   product, which are the camera walkthroughs. Those run as full-width rows
   instead: drawing on one side, the step on the other. */
@media (min-width:901px){
  .steps[data-n="4"],.steps[data-n="5"],.steps[data-n="6"]{
    grid-template-columns:1fr;gap:var(--s5);
  }
  .steps[data-n="4"] .step,.steps[data-n="5"] .step,.steps[data-n="6"] .step{
    display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
    gap:var(--s5);align-items:center;
  }
  .steps[data-n="4"] .txt,.steps[data-n="5"] .txt,.steps[data-n="6"] .txt{align-items:center}
}
.step{display:flex;flex-direction:column;gap:var(--s3)}
/* --mark is the same orange in both themes and white on it measures 3.12:1,
   which is the exact ratio --accent was created to avoid. The badge carries
   the sequence on every illustrated guide, so it takes the accent pair. */
.step .n{
  width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--mono);font-size:var(--t-xs);font-weight:600;
  display:grid;place-items:center;flex:0 0 auto;
}
.step .txt{display:flex;gap:var(--s3);align-items:flex-start}
.step .txt p{font-size:var(--t-md);line-height:1.5;color:var(--ink-2)}
/* Both forms: a guide's frames are .plate inside .step, a lesson's single
   drawing is one element that is both. Written as a descendant selector
   alone, the lesson plate had no background, no border and no padding, and
   nothing said so. */
.step .plate,.step.plate{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);
}
.step .plate svg,.step.plate svg{display:block;width:100%;height:auto}
/* A lesson's drawing was authored at 260 by 120 and was being stretched to
   the full content width, which is 4.3 times the size its labels were
   positioned for. */
.lesson-art{max-width:520px}

.block{margin-top:var(--s7)}
.block h2{margin-bottom:var(--s4)}
.howlist{margin:0;padding:0;list-style:none;counter-reset:h;display:flex;flex-direction:column;gap:var(--s3)}
.howlist li{
  counter-increment:h;position:relative;padding-left:var(--s6);font-size:var(--t-md);color:var(--ink-2);
}
.howlist li::before{
  content:counter(h);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--accent);
  width:24px;height:24px;border:1px solid var(--accent-line);border-radius:50%;
  display:grid;place-items:center;
}
.example{
  background:var(--accent-wash);border:1px solid var(--accent-line);
  border-radius:var(--r-lg);padding:var(--s5);
}
.example h2{font-size:var(--t-md);margin-bottom:var(--s2)}
.example p{font-size:var(--t-md);color:var(--ink-2)}

.next{
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);
}

/* ── Questions ───────────────────────────────────────────────────────── */

.qwrap{display:grid;gap:var(--s7);grid-template-columns:200px minmax(0,1fr);align-items:start}
.qnav{position:sticky;top:78px}
.qnav h2{font-size:var(--t-sm);color:var(--ink-3);font-weight:600;letter-spacing:0;margin-bottom:var(--s3)}
.qnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.qnav a{
  display:block;padding:var(--s2) var(--s3);font-size:var(--t-base);color:var(--ink-2);
  text-decoration:none;border-radius:var(--r);border-left:2px solid transparent;
  transition:background .16s ease,color .16s ease;
}
.qnav a:hover{background:var(--panel);color:var(--ink)}
.qnav a.here{color:var(--accent);border-left-color:var(--mark);background:var(--accent-wash)}
.qgroup + .qgroup{margin-top:var(--s7)}
.qgroup h2{font-size:var(--t-lg)}
:target > summary{color:var(--accent)}

.qa{margin-top:var(--s5);border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex;gap:var(--s4);align-items:baseline;cursor:pointer;
  padding:var(--s4) 0;list-style:none;font-size:var(--t-md);font-weight:600;
  letter-spacing:-.01em;color:var(--ink);transition:color .16s ease;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa summary .chev{
  margin-left:auto;flex:0 0 auto;color:var(--ink-3);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.qa details[open] summary .chev{transform:rotate(180deg)}
.qa .ans{padding:0 0 var(--s5);max-width:70ch}
.qa .ans p{font-size:var(--t-md);color:var(--ink-2)}
.qa .ans .used{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.qa .ans .used a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-sm);font-weight:500;text-decoration:none;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);padding:5px 10px;
  transition:border-color .16s ease,background .16s ease;
}
.qa .ans .used a:hover{border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}
.qa .ans .used a svg{color:var(--mark)}

/* ── Comparison ──────────────────────────────────────────────────────── */

/* The scroll container was making the sticky header dead: overflow-x:auto
   computes overflow-y to auto as well, so the thead stuck to a box whose
   scrollHeight equalled its clientHeight and therefore never scrolled. Above
   the width where the table fits, there is no container and the header
   sticks to the viewport, under the 58px bar. */
.cmp-scroll{margin-top:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg)}
@media (max-width:760px){ .cmp-scroll{overflow-x:auto} }
table.cmp{border-collapse:collapse;width:100%;min-width:640px;background:var(--surface)}
table.cmp th,table.cmp td{
  text-align:left;padding:12px var(--s4);border-bottom:1px solid var(--line);
  font-size:var(--t-base);vertical-align:top;
}
table.cmp thead th{
  position:sticky;top:58px;background:var(--panel);z-index:1;
  font-size:var(--t-base);font-weight:700;border-bottom:1px solid var(--line-2);
}
table.cmp thead th span{display:block;font-weight:400;font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s1)}
/* Scrolled right on a phone, a row label at left:-267px is a row of ticks
   with nothing saying what the row is. */
table.cmp th[scope="row"]{
  font-weight:500;color:var(--ink);
  position:sticky;left:0;background:var(--surface);z-index:2;
}
table.cmp .grp th{position:static}
table.cmp .grp span{position:sticky;left:var(--s4);display:inline-block}
table.cmp tbody tr:hover td,table.cmp tbody tr:hover th{background:var(--panel)}
table.cmp .grp th{
  background:var(--ground);font-family:var(--mono);font-size:var(--t-xs);
  color:var(--ink-3);font-weight:500;letter-spacing:.02em;padding-top:var(--s4);
}
table.cmp .own{background:var(--accent-wash)}
table.cmp tbody tr:hover td.own{background:color-mix(in srgb,var(--accent-wash) 70%,var(--panel))}
.yes{color:var(--ok);display:inline-flex;align-items:center;gap:5px;font-weight:500}
.no{color:var(--ink-3);display:inline-flex;align-items:center;gap:5px}
.cmp-note{font-size:var(--t-sm);color:var(--ink-3);margin-top:var(--s3)}

.stance{display:grid;gap:var(--s4);margin-top:var(--s6);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.stance div{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);
}
.stance h3{margin-bottom:var(--s2);font-size:var(--t-md)}
.stance p{font-size:var(--t-base);color:var(--ink-2)}

/* ── Glossary ────────────────────────────────────────────────────────── */

.terms{display:grid;gap:var(--s4);margin-top:var(--s5);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.term[hidden]{display:none}
.tref{margin-top:var(--s3)}
.tref a{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);
  text-decoration:none;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:4px 9px}
.tref a:hover{border-color:var(--accent);color:var(--accent)}
.tref a svg{color:var(--mark)}
.gnav li{display:flex;align-items:baseline;gap:var(--s2)}
.gnav li span{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}
.gnav a{flex:1}
#glist .sec[hidden]{display:none}
#glist .sec:first-child{padding-top:0}
.none{font-size:var(--t-md);color:var(--ink-3);padding:var(--s6) 0}
.term{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5)}
.term h3{font-size:var(--t-md)}
.term p{font-size:var(--t-base);color:var(--ink-2);margin-top:var(--s2)}


/* ── The glossary drawings ───────────────────────────────────────────── */
/*
 * Carried over from the previous application whole. They animate, and the
 * animation is the explanation: a living hinge bending says more than a
 * still of one. But eighteen infinite loops running at once, most of them
 * off screen, is motion for its own sake, so they are paused until their
 * card is actually in view and never run for a reader who asked for less.
 */
.term .pic{
  background:var(--panel);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  aspect-ratio:240/150;margin-bottom:var(--s3);
}
.term .pic svg{width:100%;height:100%;display:block}

.il-sheet { fill: var(--panel); stroke: var(--border2); }
.il-part  { fill: var(--accent-m); stroke: var(--accent); }
.il-line  { fill: none; stroke: var(--border2); }
.il-accent{ fill: none; stroke: var(--accent); }
.il-good  { fill: none; stroke: var(--go); }
.il-ink   { fill: var(--txt2); }
.il-mut   { fill: var(--txt3); }
.il-fillp { fill: var(--accent); }
.il-fillg { fill: var(--go); }

.term .pic [class*="il-"]{animation-play-state:paused}
.term.seen .pic [class*="il-"]{animation-play-state:running}
.il-beam   { animation: ilSweep 5.4s ease-in-out infinite; }
.il-pulse  { animation: ilPulse 2.6s ease-in-out infinite; }
.il-drawon { stroke-dasharray: var(--dash,300); animation: ilDraw 5.4s ease-in-out infinite; }
.il-grow   { animation: ilGrow 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.il-rot    { animation: ilRot 12s linear infinite; transform-box: fill-box; transform-origin: center; }
.il-reveal { animation: ilReveal 5.4s ease-in-out infinite; transform-box: fill-box; }
.il-fly    { animation: ilFly 5.4s cubic-bezier(.34,1.2,.5,1) infinite; transform-box: fill-box; }
.il-slide  { animation: ilSlide 5.4s cubic-bezier(.5,0,.2,1) infinite; transform-box: fill-box; }
.il-tick   { stroke-dasharray: var(--dash,26); animation: ilTick 5.4s ease-out infinite; }
.il-stamp  { animation: ilStamp 5.4s cubic-bezier(.34,1.3,.5,1) infinite; transform-box: fill-box; transform-origin: center; }
.il-before { animation: ilBefore 5.4s ease-in-out infinite; }
.il-after  { animation: ilAfter 5.4s ease-in-out infinite; }
.il-bend   { animation: ilBend 5.4s cubic-bezier(.45,.05,.3,1) infinite; transform-box: fill-box; transform-origin: left center; }
.il-thick  { animation: ilThick 5.4s ease-in-out infinite; }
.il-d1{animation-delay:.18s}.il-d2{animation-delay:.36s}.il-d3{animation-delay:.54s}
.il-d4{animation-delay:.72s}.il-d5{animation-delay:.9s}.il-d6{animation-delay:1.08s}
.il-d7{animation-delay:1.26s}.il-d8{animation-delay:1.44s}
@keyframes ilSweep { 0%{transform:translateX(-8px);opacity:0} 6%{opacity:.9} 42%{opacity:.9} 50%,100%{transform:translateX(210px);opacity:0} }
@keyframes ilPulse { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes ilDraw  { 0%,10%{stroke-dashoffset:var(--dash,300)} 44%,88%{stroke-dashoffset:0} 100%{stroke-dashoffset:var(--dash,300)} }
@keyframes ilGrow  { 0%,100%{transform:scale(.8)} 50%{transform:scale(1)} }
@keyframes ilRot   { to{transform:rotate(360deg)} }
@keyframes ilReveal{ 0%,12%{opacity:0;transform:translateY(-9px)} 40%,88%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-9px)} }
@keyframes ilFly   { 0%{transform:translate(var(--fx,0px),var(--fy,0px)) rotate(var(--fr,0deg));opacity:0} 14%{opacity:1} 42%,90%{transform:translate(0,0) rotate(0);opacity:1} 100%{transform:translate(0,0) rotate(0);opacity:0} }
@keyframes ilSlide { 0%,10%{transform:translate(var(--sx,0px),var(--sy,0px))} 42%,86%{transform:translate(0,0)} 98%,100%{transform:translate(var(--sx,0px),var(--sy,0px))} }
@keyframes ilTick  { 0%,52%{stroke-dashoffset:var(--dash,26);opacity:0} 58%{opacity:1} 70%,90%{stroke-dashoffset:0;opacity:1} 100%{opacity:0} }
@keyframes ilStamp { 0%,50%{transform:scale(.3);opacity:0} 60%{transform:scale(1.14);opacity:1} 68%,88%{transform:scale(1);opacity:1} 100%{transform:scale(.3);opacity:0} }
@keyframes ilBefore{ 0%,32%{opacity:1} 46%,100%{opacity:0} }
@keyframes ilAfter { 0%,38%{opacity:0} 52%,88%{opacity:1} 100%{opacity:0} }
@keyframes ilBend  { 0%,22%{transform:rotate(0)} 46%{transform:rotate(-13deg)} 64%{transform:rotate(4deg)} 82%,100%{transform:rotate(0)} }
@keyframes ilThick { 0%,20%{stroke-width:1} 48%,86%{stroke-width:5} 100%{stroke-width:1} }

/* ── Search ──────────────────────────────────────────────────────────── */

.finder{margin-top:var(--s6);position:relative;max-width:440px}
.finder input{
  width:100%;height:44px;padding:0 var(--s4) 0 44px;font-size:var(--t-md);
  font-family:var(--sans);color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.finder input::placeholder{color:var(--ink-3)}
.finder input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);outline:none}
.finder .mag{position:absolute;left:13px;top:13px;color:var(--ink-3);pointer-events:none}
.hits{margin-top:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.hits a{display:block;padding:var(--s3) var(--s4);text-decoration:none;color:var(--ink);font-size:var(--t-base);
  border-bottom:1px solid var(--line)}
.hits a:last-child{border-bottom:0}
.hits a:hover,.hits a:focus{background:var(--accent-wash);color:var(--accent)}
.hits a span{color:var(--ink-3);font-size:var(--t-sm);margin-left:var(--s2)}
.hits .none{padding:var(--s3) var(--s4);font-size:var(--t-base);color:var(--ink-3)}

/* ── Courses ─────────────────────────────────────────────────────────── */
/*
 * The section was a library of 109 things with nothing saying which to read
 * first or whether you had read it. Five of these are sequences somebody
 * decided the order of; the rest stays a library, because forty drawing tools
 * are not a course and dressing them as one would be the shape of teaching
 * without the substance.
 */

.cont{margin-top:var(--s5)}
.cont a{
  display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;
  background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--r-lg);
  padding:var(--s3) var(--s4);max-width:100%;
  transition:border-color .16s ease,background .16s ease;
}
.cont a:hover{border-color:var(--accent);background:var(--accent-wash)}
.cont .clabel{font-size:var(--t-sm);color:var(--ink-3)}
.cont .ctitle{font-size:var(--t-md);font-weight:600;color:var(--accent)}

.courses{
  display:grid;gap:var(--s4);margin-top:var(--s5);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.course{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .16s ease,box-shadow .2s ease,transform .16s ease;
}
.course:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.course .cshot{background:var(--panel);border-bottom:1px solid var(--line);padding:var(--s3) var(--s4)}
.course .cshot svg{display:block;width:100%;height:auto}
.course .cbody{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.course b{font-size:var(--t-md);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.course .cwhy{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5;flex:1}
.course .cmeta{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}
.course[data-complete="true"] .pbar span{background:var(--ok)}

/* One progress bar, used on the card, the course page and every lesson. */
.pwrap{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s2)}
.pbar{
  flex:1;height:6px;border-radius:3px;background:var(--surface-2);
  border:1px solid var(--line);overflow:hidden;display:block;
}
.pbar span{
  display:block;height:100%;width:0;background:var(--mark);
  transition:width .3s cubic-bezier(.16,1,.3,1);
}
.pnum{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap}

.course-kind{
  font-size:var(--t-sm);color:var(--ink-3);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
}
.course-kind a{color:var(--accent);text-decoration:none;font-weight:600}
.course-kind a:hover{text-decoration:underline}
.course-kind .sep{color:var(--ink-3);font-family:var(--mono);font-size:var(--t-xs)}
.course-facts{display:flex;flex-wrap:wrap;gap:var(--s6);margin-top:var(--s5)}
#courseprog{max-width:420px;margin-top:var(--s5)}

/* The lessons, in order. */
.lessons{
  display:flex;flex-direction:column;gap:1px;margin-top:var(--s5);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.lesson{
  display:flex;align-items:center;gap:var(--s4);padding:var(--s4);
  background:var(--surface);text-decoration:none;color:inherit;
  transition:background .16s ease;
}
.lesson:hover{background:var(--panel)}
.lesson .lnum{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:var(--t-xs);font-weight:600;
  background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);
}
.lesson .lbody{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.lesson b{font-size:var(--t-base);font-weight:600;color:var(--ink)}
.lesson .lwhy{font-size:var(--t-sm);color:var(--ink-2);line-height:1.45}
.lesson .lmeta{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.lesson .lmins{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}
.lesson .ltick{color:var(--line-2);display:flex}
.lesson[data-done="true"] .lnum{background:var(--ok);color:#fff;border-color:transparent}
.lesson[data-done="true"] .ltick{color:var(--ok)}
.lesson[data-done="true"] b{color:var(--ink-2)}

/* The foot of a lesson: say you are done, see how far along you are, go on. */
.donebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.donenote{font-size:var(--t-sm);color:var(--ink-3)}
#markdone[aria-pressed="true"]{
  background:var(--ok);color:#fff;border-color:transparent;
}
#markdone[aria-pressed="true"]:hover{background:var(--ok);opacity:.9}
.pnavs{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.pnav{
  display:flex;align-items:center;gap:var(--s3);flex:1 1 240px;
  padding:var(--s3) var(--s4);text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .16s ease,background .16s ease;
}
.pnav:hover{border-color:var(--accent);background:var(--accent-wash)}
.pnav span{display:flex;flex-direction:column;gap:1px;font-size:var(--t-base);
  font-weight:600;color:var(--ink);min-width:0}
.pnav small{font-size:var(--t-xs);font-weight:400;color:var(--ink-3);font-family:var(--mono)}
.pnav.next{justify-content:flex-end;text-align:right}
.pnav svg{color:var(--ink-3);flex:0 0 auto}
.pnav .rot{transform:rotate(-90deg)}
.pnav:hover svg{color:var(--accent)}

@media (max-width:640px){
  .lesson{gap:var(--s3);padding:var(--s3)}
  .lesson .lwhy{display:none}
  .course-facts{gap:var(--s5)}
}

/* ── The two rooms ───────────────────────────────────────────────────── */
/*
 * The forum and the design gallery. Their content arrives from the community
 * service after the page loads, so what is written here is the frame: the
 * controls, the rows, the states, and the shapes a post takes.
 *
 * They used to carry a second stylesheet of their own, which is how a site
 * ends up with two of everything and one action wearing two shapes. These are
 * the same tokens the rest of the section uses.
 */

.room{padding-top:var(--s5)}

/* When a thread or a design is open, it IS the page.
 *
 * Otherwise the masthead selling the software stays at 46px above it, the
 * written topic list sits under the reply box, and the thing somebody
 * followed a link to read is the third heading down. */
/* The masthead goes too, not just its lede: left in place its h1 was a second
   h1 on the page, and the thing somebody followed a link to read has to be
   the first one. The breadcrumb above still says where they are. */
body[data-view="detail"] .mast,
body[data-view="detail"] .sec{display:none}
body[data-view="detail"] .room{padding-top:var(--s4)}
.detail-h{
  font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;
  margin:var(--s4) 0 var(--s2);
}

/* One line of answer at 106 characters is not a line anybody finishes. */
.post,.state p{max-width:72ch}

.bar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s4)}
.bar .grow{flex:1 1 200px}
#who.bar{padding:var(--s3) 0;margin:0;border-bottom:1px solid var(--line)}

/* One control vocabulary, so the same action never wears two shapes. */
#app input,#app textarea,#app select,#who input{
  font:inherit;font-size:var(--t-base);color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  padding:9px var(--s3);min-height:38px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
#app textarea{min-height:120px;line-height:1.55;resize:vertical;width:100%}
#app input:focus,#app textarea:focus,#who input:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);outline:none;
}
#app input::placeholder,#app textarea::placeholder,#who input::placeholder{color:var(--ink-3)}

#app button,#who button{
  font:inherit;font-size:var(--t-base);font-weight:500;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);
  padding:8px var(--s3);min-height:38px;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .12s ease;
}
#app button:hover,#who button:hover{background:var(--panel);border-color:var(--ink-3)}
#app button:active,#who button:active{transform:scale(.97)}
#app button.p,#who button.p{
  background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:600;
}
#app button.p:hover,#who button.p:hover{background:var(--accent-h);border-color:transparent}
#app button[disabled]{opacity:.5;cursor:not-allowed}
#app button[disabled]:hover{background:var(--surface);border-color:var(--line-2)}

/* A filter that is on has to look pressed, not merely coloured: colour on its
   own is not a state anybody should have to rely on. */
/* Scoped to #app so it can beat the control normaliser above, which sets
   min-height on every button in here and was silently winning: the pills
   measured 42px against the 44 a thumb needs. */
#app .pill{
  border-radius:100px;padding:6px var(--s3);
  min-height:36px;font-size:var(--t-sm);
  color:var(--ink-2);flex:0 0 auto;
}
@media (max-width:640px){ #app .pill{min-height:44px} }
#app .pill[aria-pressed="true"]{
  background:var(--accent-wash);color:var(--accent);
  border-color:var(--accent);font-weight:600;
}

/* Filtering and sorting were twelve identical pills in one row, two of them
   lit at once, which reads as a broken radio group. Sorting is three choices,
   which is a select. */
.filters{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s4)}
.filters .topics{display:flex;flex-wrap:wrap;gap:var(--s2);flex:1 1 auto}
.filters .sorter{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.filters .sorter span{font-size:var(--t-sm);color:var(--ink-3)}

/* On a phone nine wrapped topics pushed the first question to y=728, which is
   below the fold on every handset. One scrolling line instead. */
@media (max-width:640px){
  .filters{gap:var(--s2)}
  .filters .topics{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:var(--s1);margin:0 calc(var(--s4) * -1);padding-left:var(--s4);
    padding-right:var(--s4);scrollbar-width:none;
  }
  .filters .topics::-webkit-scrollbar{display:none}
  .filters .topics > *{scroll-snap-align:start}
  .filters .sorter{margin-left:0}
}

/* Stacked full-width rows: threads, and the written topic list.
 *
 * These were called .rows and .row, which are University's own classes for
 * the "Also in the app" grid, and five !important declarations made sure the
 * rooms won. The result was that grid rendering as one flex column with its
 * gap gone, so every entry read "Camera print and cutLine the cut up with a
 * printed sheet". A refactor meant to join the rooms to the design system
 * broke the design system instead. Different thing, different name.
 *
 * Self-sufficient on purpose: the topic list sits outside #app, so it cannot
 * borrow the font from the control normaliser below and was rendering in the
 * browser's default Arial at 13.3px.
 */
.threads{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.thread{
  font-family:var(--sans);font-size:var(--t-base);color:var(--ink);
  background:var(--surface);border:0;border-radius:0;
  padding:var(--s4);text-align:left;display:block;width:100%;
  transition:background .16s ease;
}
button.thread{cursor:pointer}
button.thread:hover,button.thread:focus-visible{background:var(--panel)}
button.thread[aria-pressed="true"]{
  background:var(--accent-wash);box-shadow:inset 3px 0 0 var(--mark);
}
.rowtop{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.rowtitle{font-family:var(--sans);font-size:var(--t-md);font-weight:600;
  color:var(--ink);letter-spacing:-.01em}
.meta{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-3)}

.chip{
  display:inline-flex;align-items:center;
  font-size:var(--t-xs);font-weight:500;padding:2px var(--s2);border-radius:3px;
  background:var(--panel);color:var(--ink-2);border:1px solid var(--line);
}
.chip.ac{background:var(--accent-wash);color:var(--accent);border-color:var(--accent-line)}
.chip.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 35%,transparent)}

.post{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);margin-bottom:var(--s3);
}
.post.acc{border-color:color-mix(in srgb,var(--ok) 50%,transparent);
  background:color-mix(in srgb,var(--ok) 5%,var(--surface))}
.body-text{white-space:pre-wrap;font-size:var(--t-md);color:var(--ink-2);line-height:1.6}
#app img{border-radius:var(--r);border:1px solid var(--line);margin-top:var(--s3);max-width:100%}

/* The gallery grid reuses the section's card, so a design and a guide read as
   the same kind of object. */
button.card{
  font:inherit;text-align:left;width:100%;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);padding:0;min-height:0;
}
button.card:hover{background:var(--surface)}
button.card .shot{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:var(--t-sm);overflow:hidden;padding:0;
}
button.card .shot img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;margin:0}
button.card .body{gap:var(--s2)}
button.card .body .rowtop{margin-top:auto}
button.card .rowtitle{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* A labelled field. The label stays put once somebody starts typing, which
   the placeholder it replaces did not. */
.form{display:flex;flex-direction:column;gap:var(--s4)}
.field{display:flex;flex-direction:column;gap:var(--s1)}
.field > span{font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.field > small{font-size:var(--t-sm);color:var(--ink-3);line-height:1.45}
.field > input,.field > textarea,.field > select{width:100%}

/* The file control is the one place the browser's own widget shows through
   the design, so it is given the same shape as every other button here. */
#app input[type=file]{padding:var(--s2);cursor:pointer}
#app input[type=file]::file-selector-button{
  font:inherit;font-size:var(--t-sm);font-weight:600;
  color:var(--ink);background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);
  padding:6px var(--s3);margin-right:var(--s3);cursor:pointer;
}
#app input[type=file]::file-selector-button:hover{border-color:var(--ink-3)}
.cover-preview{border-radius:var(--r);border:1px solid var(--line);margin-top:var(--s2)}

/* Placeholders at the height of the thing they stand in for. A "Loading…"
   line collapsed the results from 384px to 21px and back, so the page jumped
   under the reader every time they pressed a filter. */
.skel{pointer-events:none}
.skel-line{
  display:block;height:12px;border-radius:3px;background:var(--panel);
  margin:var(--s1) 0;animation:skelPulse 1.4s ease-in-out infinite;
}
.skel-line.skel-thin{height:9px;opacity:.7}
.card.skel .shot{background:var(--panel);display:block}
.card.skel .body{padding:var(--s3) var(--s4) var(--s4);display:block}
@keyframes skelPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){ .skel-line{animation:none} }

/* An empty room and a search that found nothing are different questions, so
   the state says which one this is and offers the one action that fits. */
.state{
  text-align:center;padding:var(--s8) var(--s5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.state h2{font-size:var(--t-lg);margin-bottom:var(--s2)}
.state p{font-size:var(--t-md);color:var(--ink-2);max-width:46ch;margin:0 auto}
.err{color:var(--err);font-size:var(--t-sm);margin-top:var(--s2)}

@media (max-width:640px){
  .bar .grow{flex:1 1 100%}
  .state{padding:var(--s6) var(--s4)}
}


/* ── Step by step ────────────────────────────────────────────────────── */
/*
 * A tutorial reads top to bottom and is meant to be followed with one hand on
 * a mouse, so a step is a wide row: the words on the left at a readable
 * measure, the drawing beside them. Not a card. Cards are for browsing and
 * this is for doing.
 */
.tstep{padding-top:var(--s7);scroll-margin-top:70px}
.tstep-h{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.tstep-h .n{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--mono);font-size:var(--t-sm);font-weight:600;
  display:grid;place-items:center;
}
.tstep-h h2{font-size:var(--t-lg);letter-spacing:-.015em}
.tstep-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:var(--s6);align-items:start}
.tstep-b .prose{display:flex;flex-direction:column;gap:var(--s3);max-width:62ch}
.tstep-b .prose p{font-size:var(--t-md);color:var(--ink-2);line-height:1.6}
.tstep-b .plate{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3);
}
.tstep-b .plate svg{display:block;width:100%;height:auto}

.plainlist{margin:0;padding-left:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.plainlist li{font-size:var(--t-md);color:var(--ink-2)}

/* Every setting, with the drawing that shows it. */
.params{display:flex;flex-direction:column;gap:1px;margin-top:var(--s5);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.param{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s5);
  background:var(--surface);padding:var(--s4);align-items:center}
.param .pshot{background:var(--panel);border-radius:var(--r);padding:var(--s2)}
.param .pshot svg{display:block;width:100%;height:auto}
.param .param-b{display:flex;flex-direction:column;gap:var(--s1);grid-column:2}
.param b{font-size:var(--t-md);font-weight:600;color:var(--ink)}
.param p{font-size:var(--t-base);color:var(--ink-2);line-height:1.55}
/* The half that is actually useful: what happens when it is wrong.
   Marked by its own voice rather than a coloured stripe down the side, which
   the house rules ban and which every alert box on the internet already
   wears. */
.param .careful{color:var(--accent);display:flex;gap:var(--s2);align-items:baseline}
.param .careful::before{
  content:"If it is wrong";
  font-family:var(--mono);font-size:var(--t-xs);font-weight:600;
  color:var(--accent);opacity:.8;white-space:nowrap;flex:0 0 auto;
}
.param:not(:has(.pshot)) .param-b{grid-column:1 / -1}

.checklist{margin:var(--s5) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.checklist li{
  position:relative;padding-left:var(--s6);font-size:var(--t-md);color:var(--ink-2);
}
.checklist li::before{
  content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:3px;
  border:1.5px solid var(--ok);
}
.checklist li::after{
  content:"";position:absolute;left:4px;top:10px;width:8px;height:4px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);
}

@media (max-width:900px){
  .tstep-b{grid-template-columns:1fr;gap:var(--s4)}
  .param{grid-template-columns:1fr;gap:var(--s3)}
  .param .param-b{grid-column:1}
  .param .pshot{max-width:300px}
}

/* Every setting a tool has, derived from its own schema. */
.settings{
  display:grid;gap:1px;margin-top:var(--s5);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.setting{background:var(--surface);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.setting b{font-size:var(--t-base);font-weight:600;color:var(--ink)}
.setting p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.setting .smeta{
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);margin-top:auto;padding-top:var(--s2);
}

/* The hardware table. Facts, so the number is the thing that stands out. */
.parts{display:grid;gap:var(--s4);margin-top:var(--s5);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.part{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2)}
.part[hidden]{display:none}
.part h3{font-size:var(--t-md)}
.part > p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.pfacts{display:flex;flex-direction:column;gap:2px;margin-top:var(--s1)}
.pfact{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;
  padding:5px 0;border-bottom:1px solid var(--line)}
.pfact:last-child{border-bottom:0}
.pfact span{font-size:var(--t-sm);color:var(--ink-3)}
.pfact b{font-family:var(--mono);font-size:var(--t-md);font-weight:600;color:var(--accent)}
.pnote{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.psource{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);margin-top:auto;padding-top:var(--s2)}
#plist .sec[hidden]{display:none}
#plist .sec:first-of-type{padding-top:0}

/* ── Foot ────────────────────────────────────────────────────────────── */

.foot{border-top:1px solid var(--line);margin-top:var(--s9);padding:var(--s6) 0 var(--s7);background:var(--surface)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--s6);justify-content:space-between;align-items:flex-start}
.foot h4{font-size:var(--t-sm);color:var(--ink-3);font-weight:600;margin-bottom:var(--s3)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.foot a{color:var(--ink-2);text-decoration:none;font-size:var(--t-base)}
.foot a:hover{color:var(--accent)}
.foot .fine{font-size:var(--t-sm);color:var(--ink-3);max-width:34ch}

/* ── One authored moment ─────────────────────────────────────────────── */
/*
 * The masthead settles once on load. Nothing else on the page animates in,
 * because a reader who came for an answer should not have to wait for six
 * sections to arrive.
 */
@keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mast h1,.mast .lede,.mast .finder,.ways,.mast .figs{
  animation:settle .5s cubic-bezier(.16,1,.3,1) backwards;
}
.mast .lede{animation-delay:.05s}
.mast .finder{animation-delay:.1s}
.ways{animation-delay:.14s}
.mast .figs{animation-delay:.18s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── Narrow ──────────────────────────────────────────────────────────── */

@media (max-width:900px){
  .paths{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .qwrap{grid-template-columns:1fr;gap:var(--s5)}
  .qnav{position:static}
  .qnav ul{flex-direction:row;flex-wrap:wrap;gap:var(--s2)}
  .qnav a{border:1px solid var(--line);border-left-width:1px}
}
@media (max-width:640px){
  .wrap,.top-in{padding-left:var(--s4);padding-right:var(--s4)}
  .mast{padding:var(--s6) 0 var(--s5)}
  .paths{grid-template-columns:1fr}
  .nav{display:none}
  .nav.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:58px;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:var(--s2) var(--s4) var(--s4);box-shadow:var(--shadow);
  }
  .nav.open a{padding:11px 0;border-bottom:1px solid var(--line);border-left:0}
  .nav.open a[aria-current="page"]{border-bottom-color:var(--line);color:var(--accent)}
  .menu-btn{
    display:grid;place-items:center;margin-left:auto;
    width:32px;height:32px;background:transparent;color:var(--ink-2);
    border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  }
  .top-in{gap:var(--s3)}
  .mast .figs{gap:var(--s5)}
  .fig b{font-size:var(--t-lg)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s3)}
  .foot-in{gap:var(--s5)}
}

/* ── A thumb, on a shop floor, sometimes through a glove ──────────────── */
/*
 * Last in the file on purpose. These are minimums, and a minimum written
 * before the rule it is meant to raise gets quietly undone: the menu button
 * was set to 40 here and back to 32 sixty lines later.
 *
 * Measured at 390px the section had a row of 26px links under the masthead,
 * 32px icon buttons, a 35px "Mark as done", 33px tool chips inside an answer
 * and 20px footer links. Each is fine with a mouse and none is fine with a
 * thumb, which is what a phone at a machine is used with.
 */
@media (max-width:640px){
  .ways a{padding:9px 0}
  .themer,.menu-btn{width:40px;height:40px}
  .brand{padding:9px 0}
  #markdone,.btn{min-height:44px}
  .qa .ans .used a,.tref a{min-height:40px;padding-left:var(--s3);padding-right:var(--s3)}
  .qnav a{min-height:40px;display:flex;align-items:center}
  .crumb{gap:var(--s3)}
  .crumb a{padding:10px 0}
  .course-kind a{padding:10px 0;display:inline-block}
  .lesson{min-height:56px}
  .foot ul{gap:0}
  .foot a{display:block;padding:10px 0}
  .nav.open a{padding:13px 0}
}