/* web.toolforge.ai — Web Module Taxonomy
   Lab chrome: deliberately neutral so each demo can carry its own palette.
   Hairlines, mono metadata, one accent. Nothing here competes with the examples. */

:root{
  --desk:#0B0D10;
  --sheet:#101317;
  --sheet-2:#151920;
  /* The reading surface of an entry: its number, title, "what it is" and "how it's put
     together", down to the EXAMPLE bar. It has to be unmistakably lighter than the stage
     below it, because the whole page is one dark field and --sheet against --desk measures
     1.045:1 — a 4% step nobody can see. This sits at 1.40:1 above --desk. */
  --card:#262D37;
  --tx:#F4F3EF;
  --accent:#C8102E;
  --signal:#FFC400;
  --a06:rgba(244,243,239,0.06);
  --a10:rgba(244,243,239,0.10);
  --a14:rgba(244,243,239,0.14);
  --a20:rgba(244,243,239,0.20);
  --a30:rgba(244,243,239,0.30);
  --a45:rgba(244,243,239,0.45);
  --a60:rgba(244,243,239,0.60);
  --a75:rgba(244,243,239,0.75);
  /* Text ladder. The --aNN ladder above is for hairlines, borders and fills, where
     contrast minimums do not apply; it was also being used for type, which is how most
     of the page ended up under 4.5:1 — 0.30 and 0.45 alpha ink cannot reach AA on any
     of these surfaces. Every step below is verified against --sheet-2, the lightest
     surface any of it lands on, by contrast_check.cjs. */
  --ink-2:rgba(244,243,239,0.82);
  --ink-3:rgba(244,243,239,0.66);
  --ink-4:rgba(244,243,239,0.54);
  /* --accent is a fill and a rule colour: at #C8102E it tops out at 3.57:1 on pure
     black, so it can never carry small text. This is the same red opened up until it
     clears AA on the dark surfaces. */
  --accent-ink:#E4566B;
  --mast-h:54px;
  --secbar-h:34px;
  --rail-w:274px;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
}
:root[data-theme="light"]{
  --desk:#DEDBD2;
  --sheet:#F7F6F2;
  --sheet-2:#EFEDE6;
  /* Light theme runs the same separation the other way: the card is near-white paper and
     the stage below it is the darker desk it sits on. */
  --card:#FFFFFF;
  --tx:#14171B;
  --accent:#C8102E;
  --signal:#6B4E00;
  --a06:rgba(20,23,27,0.06);
  --a10:rgba(20,23,27,0.11);
  --a14:rgba(20,23,27,0.16);
  --a20:rgba(20,23,27,0.22);
  --a30:rgba(20,23,27,0.34);
  --a45:rgba(20,23,27,0.50);
  --a60:rgba(20,23,27,0.64);
  --a75:rgba(20,23,27,0.78);
  --ink-2:rgba(20,23,27,0.84);
  --ink-3:rgba(20,23,27,0.72);
  --ink-4:rgba(20,23,27,0.64);
  --accent-ink:#9C0F26;
}

/* The difficulty palette, the signal and the warn colour were all picked against the
   dark chrome, where they are correct. On cream they are pastels: #DCBE6E on --desk
   measures 1.30:1. Each one is restated here as the same hue taken down until it clears
   AA on --desk, the lightest surface any badge lands on. */
:root[data-theme="light"] .b.d1{border-color:rgba(23,84,47,0.44);color:#17542F}
:root[data-theme="light"] .b.d2{border-color:rgba(67,89,15,0.44);color:#43590F}
:root[data-theme="light"] .b.d3{border-color:rgba(107,78,0,0.46);color:#6B4E00}
:root[data-theme="light"] .b.d4{border-color:rgba(122,55,8,0.48);color:#7A3708}
:root[data-theme="light"] .b.d5{border-color:rgba(156,15,38,0.55);color:#9C0F26}
:root[data-theme="light"] .b.r-std{border-color:rgba(23,84,47,0.44);color:#17542F}
:root[data-theme="light"] .b.r-com{border-color:rgba(67,89,15,0.44);color:#43590F}
:root[data-theme="light"] .b.r-unc{border-color:rgba(122,55,8,0.48);color:#7A3708}
:root[data-theme="light"] .warn{
  color:#8A4210;border-left-color:#8A4210;background:rgba(138,66,16,0.06)
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--mast-h) + var(--secbar-h) + 18px)}
body{
  margin:0;background:var(--desk);color:var(--tx);
  font-family:Geist,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:15px;line-height:1.55;
}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}

.mono{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

/* ── masthead ───────────────────────────────────────────────── */
.mast{
  position:sticky;top:0;z-index:60;height:var(--mast-h);
  background:var(--desk);border-bottom:1px solid var(--a20);
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:stretch;
}
.mast a,.mast button{display:flex;align-items:center;padding:0 20px}
/* The brand mark opens the section list rather than leaving the site. On a phone the rail's
   contents list is 146 examples away from the reader, so this is the only way into a section
   without scrolling for it. */
.mast .brand{
  gap:11px;border:0;border-right:1px solid var(--a20);background:none;cursor:pointer;
  color:var(--tx);font-family:inherit;font-weight:800;letter-spacing:-0.01em;font-size:16px
}
/* 0.55 measured 3.63:1 on the light masthead (#14171B on #DEDBD2) — under AA for a 10px
   glyph. 0.7 puts it at 5.68:1 and only helps the dark theme, which was already passing. */
.mast .brand .caret{font-size:10px;opacity:0.7;margin-left:1px;transition:transform 140ms var(--ease)}
.mast .brand[aria-expanded="true"] .caret{transform:rotate(180deg)}
.mast .dot{width:10px;height:10px;background:var(--accent);display:inline-block}
/* absolutely positioned so it never becomes a fifth track in the masthead's grid */
.secmenu{
  position:absolute;top:100%;left:0;z-index:70;
  width:min(360px,calc(100vw - 16px));max-height:min(70vh,560px);overflow-y:auto;
  background:var(--card);border:1px solid var(--a20);border-top:0;padding:6px 0;
  box-shadow:0 18px 40px rgba(0,0,0,0.45)
}
.secmenu[hidden]{display:none}
.secmenu a{
  display:flex;align-items:center;gap:13px;padding:10px 18px;min-height:44px;
  color:var(--ink-2);text-decoration:none;font-size:14px;line-height:1.3
}
.secmenu a:hover,.secmenu a:focus-visible{background:var(--a10);color:var(--tx);outline:none}
.secmenu a[aria-current="true"]{color:var(--tx);box-shadow:inset 3px 0 0 var(--accent)}
.secmenu .tn{font-family:'Geist Mono',monospace;font-size:10px;color:var(--ink-4);min-width:18px}
.secmenu .tc{margin-left:auto;font-family:'Geist Mono',monospace;font-size:10px;color:var(--ink-4)}
.mast .strap{
  display:flex;align-items:center;padding:0 20px;overflow:hidden;white-space:nowrap;
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.2em;color:var(--ink-4);
}
.mast .tgl,.mast .contact{
  border-left:1px solid var(--a20);background:none;border-top:0;border-right:0;border-bottom:0;
  cursor:pointer;font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:0.18em;
}
.mast .tgl:hover,.mast .contact:hover{color:var(--signal)}
@media (max-width:900px){.mast .strap{display:none}}
@media (max-width:420px){.mast a,.mast button{padding:0 12px}}

/* ── shell ──────────────────────────────────────────────────── */
.shell{max-width:1680px;margin:0 auto;display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:0}
@media (max-width:1080px){.shell{grid-template-columns:minmax(0,1fr)}}

/* ── rail ───────────────────────────────────────────────────── */
.rail{border-right:1px solid var(--a14);background:var(--desk)}
.rail-in{
  position:sticky;top:calc(var(--mast-h) + var(--secbar-h));
  max-height:calc(100vh - var(--mast-h) - var(--secbar-h));overflow-y:auto;padding:22px 18px 40px
}
.rail-in::-webkit-scrollbar{width:8px}
.rail-in::-webkit-scrollbar-thumb{background:var(--a14)}
@media (max-width:1080px){
  .rail{border-right:0;border-bottom:1px solid var(--a14)}
  .rail-in{position:static;max-height:none;padding:18px 16px 22px}
  .toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 14px}
}

.eyebrow{font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.22em;color:var(--ink-4);text-transform:uppercase;margin:0 0 9px}
.rail .search{
  width:100%;background:var(--sheet);border:1px solid var(--a20);color:var(--tx);
  padding:9px 11px;font-size:13px;border-radius:0;outline:none;
}
.rail .search:focus{border-color:var(--accent)}
.rail .search::placeholder{color:var(--ink-4)}

.chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 4px}
.chip{
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.09em;
  padding:4px 8px;border:1px solid var(--a20);background:transparent;cursor:pointer;
  color:var(--ink-3);transition:all 140ms var(--ease);
}
.chip:hover{border-color:var(--a45);color:var(--tx)}
.chip[aria-pressed="true"]{background:var(--tx);color:var(--desk);border-color:var(--tx)}
.rail .grp{margin-bottom:20px}
.rail .reset{
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.12em;color:var(--ink-4);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.rail .reset:hover{color:var(--accent-ink)}

.toc{border-top:1px solid var(--a14)}
.toc a{
  display:flex;gap:10px;align-items:baseline;padding:7px 2px;border-bottom:1px solid var(--a06);
  font-size:13px;color:var(--ink-2);transition:color 140ms var(--ease)
}
.toc a:hover{color:var(--tx)}
.toc a.on{color:var(--accent-ink)}
.toc a .tn{font-family:'Geist Mono',monospace;font-size:10px;color:var(--ink-4);min-width:18px}
.toc a.on .tn{color:var(--accent-ink)}
.toc a .tc{margin-left:auto;font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--ink-4)}

/* ── document column ────────────────────────────────────────── */
.doc{min-width:0;padding:0 clamp(14px,2.6vw,44px) 120px}

.lede{padding:clamp(38px,7vw,86px) 0 40px;border-bottom:1px solid var(--a14)}
.lede h1{
  margin:0 0 18px;font-size:clamp(34px,5.6vw,62px);line-height:1.02;
  letter-spacing:-0.03em;font-weight:800;max-width:19ch;
}
.lede .sub{font-size:clamp(16px,1.7vw,20px);line-height:1.5;color:var(--ink-2);max-width:62ch;margin:0 0 10px}
.lede .purpose{font-size:15px;color:var(--ink-3);max-width:64ch;margin:0 0 30px}
/* A wrapping flex row sizes each line's cells to their own content, so once this wrapped to
   2x2 on a phone the divider in row 1 landed at a different x than the one in row 2 and the
   block read as broken. Grid gives both rows the same column tracks. */
.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--a14);background:var(--sheet)}
.statline div{padding:14px 20px;border-right:1px solid var(--a14);min-width:0}
.statline div:last-child{border-right:0}
@media (max-width:720px){
  .statline{grid-template-columns:repeat(2,1fr)}
  .statline div:nth-child(2n){border-right:0}
  .statline div:nth-child(-n+2){border-bottom:1px solid var(--a14)}
}
.statline b{display:block;font-size:24px;font-weight:700;letter-spacing:-0.02em;line-height:1.1}
.statline span{font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.16em;color:var(--ink-4);text-transform:uppercase}

/* how to read */
.legend{padding:42px 0;border-bottom:1px solid var(--a14)}
.legend h2{font-size:13px;font-family:'Geist Mono',monospace;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-4);margin:0 0 20px;font-weight:500}
.legend .lg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.dtable{width:100%;border-collapse:collapse;font-size:13.5px}
.dtable th{
  text-align:left;font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.16em;
  color:var(--ink-4);text-transform:uppercase;font-weight:500;padding:0 12px 8px 0;border-bottom:1px solid var(--a14)
}
.dtable td{padding:9px 12px 9px 0;border-bottom:1px solid var(--a06);vertical-align:top;color:var(--ink-2)}
.dtable td:first-child{width:44px}
.dtable code{font-family:'Geist Mono',monospace;font-size:12px;background:var(--a06);padding:1px 5px}

/* ── section ─────────────────────────────────────────────────────
   The old treatment gave a section the same 1px 14%-alpha hairline that separates two
   table rows, so fifteen sections read as one undifferentiated run of cards. A section
   break now costs a full screen-width rule, a numeral at display size and roughly five
   times the space that sits between two entries — the ratio is the point. */
.sec{padding:0 0 clamp(30px,4vw,54px)}
.sec + .sec{margin-top:clamp(64px,9vw,132px)}

.plate{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2.4vw,36px);align-items:start;
  border-top:2px solid var(--tx);
  padding:clamp(22px,2.8vw,34px) 0 0;
  margin:0 0 clamp(26px,3.4vw,44px);
}
.plate-id{min-width:clamp(46px,6.4vw,104px)}
.plate-n{
  display:block;font-size:clamp(44px,7vw,104px);line-height:0.74;font-weight:600;
  color:var(--accent);letter-spacing:-0.05em;font-variant-numeric:tabular-nums;
}
.plate-txt{padding-top:clamp(0px,0.6vw,8px)}
.plate h2{
  margin:0;font-size:clamp(28px,4.2vw,50px);line-height:1.02;
  letter-spacing:-0.032em;font-weight:800;max-width:20ch;
}
/* the thesis: the one line that tells a reader whether this is the section they want */
.plate-lead{
  margin:clamp(13px,1.5vw,19px) 0 0;max-width:52ch;
  font-size:clamp(17px,1.65vw,21px);line-height:1.4;letter-spacing:-0.012em;
  font-weight:500;color:var(--tx);
}
.plate-note{margin:13px 0 0;max-width:74ch;font-size:14.5px;line-height:1.62;color:var(--ink-3)}
.plate-note a{color:var(--tx);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--a45)}
.plate-note a:hover{text-decoration-color:var(--tx)}
.plate-facts{
  margin:clamp(17px,2vw,26px) 0 0;display:flex;flex-wrap:wrap;align-items:center;
  font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-4);
}
.plate-facts .sep{margin:0 9px;color:var(--ink-4)}
@media (max-width:640px){
  .plate{grid-template-columns:minmax(0,1fr);gap:6px}
  .plate-n{font-size:40px;line-height:1}
}

/* ── sticky section marker ──────────────────────────────────────
   146 examples deep, the thing that goes missing is which section you are in. */
.secbar{
  position:sticky;top:var(--mast-h);z-index:55;height:var(--secbar-h);
  display:flex;align-items:center;gap:11px;
  padding:0 clamp(14px,2.6vw,44px);
  background:var(--desk);border-bottom:1px solid var(--a14);
}
.secbar .sb-lbl{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-4)}
.secbar .sb-n{
  font-size:10.5px;font-weight:600;letter-spacing:0.06em;padding:2px 7px;
  background:var(--accent);color:#FFF;font-variant-numeric:tabular-nums;
}
.secbar .sb-n:empty{display:none}
.secbar .sb-t{font-size:12.5px;font-weight:600;letter-spacing:-0.012em;color:var(--ink-2);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ── entry ──────────────────────────────────────────────────── */
.entry{border:1px solid var(--a14);background:var(--card);margin-bottom:20px;scroll-margin-top:calc(var(--mast-h) + var(--secbar-h) + 14px)}
.entry.hide{display:none}
.entry-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px 20px;border-bottom:1px solid var(--a14);background:var(--sheet-2)
}
.entry-head .en{
  font-family:'Geist Mono',monospace;font-size:12px;font-weight:500;color:var(--accent-ink);
  letter-spacing:0.04em;font-variant-numeric:tabular-nums;min-width:38px;
}
.entry-head h3{margin:0;font-size:19px;letter-spacing:-0.015em;font-weight:700;flex:1 1 auto;min-width:0}
.badges{display:flex;gap:6px;flex:none}
.b{font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.12em;padding:3px 7px;border:1px solid var(--a20);color:var(--ink-3)}
.b.d1{border-color:rgba(120,180,140,0.42);color:#78B48C}
.b.d2{border-color:rgba(150,190,120,0.42);color:#9ABE78}
.b.d3{border-color:rgba(220,190,110,0.45);color:#DCBE6E}
.b.d4{border-color:rgba(226,150,80,0.48);color:#E29650}
.b.d5{border-color:rgba(200,16,46,0.6);color:#E4566B}
/* Rarity is a ramp too, and only `rare` was ever given a colour — leaving STD, COM and UNC
   as bare grey next to a fully graded D1-D5 read as a half-finished legend. These reuse the
   D-ramp's measured values rather than inventing new ones, so the 0-failure AA result holds:
   quiet green for what is everywhere, through to the signal for what is not. */
.b.r-std{border-color:rgba(120,180,140,0.42);color:#78B48C}
.b.r-com{border-color:rgba(150,190,120,0.42);color:#9ABE78}
.b.r-unc{border-color:rgba(226,150,80,0.48);color:#E29650}
.b.r-rare{border-color:var(--signal);color:var(--signal)}

.entry-meta{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (max-width:860px){.entry-meta{grid-template-columns:1fr}}
.entry-meta > div{padding:18px 20px}
.entry-meta > div:first-child{border-right:1px solid var(--a14)}
@media (max-width:860px){.entry-meta > div:first-child{border-right:0;border-bottom:1px solid var(--a14)}}
.mlabel{font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:0.2em;color:var(--ink-4);text-transform:uppercase;margin:0 0 8px}
.entry p.what{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.entry p.build{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.aka{margin:0;font-family:'Geist Mono',monospace;font-size:11px;color:var(--ink-4);letter-spacing:0.04em}
.aka em{font-style:normal;color:var(--ink-3)}
.deps{margin:0;font-family:'Geist Mono',monospace;font-size:11px;color:var(--ink-4);letter-spacing:0.04em}
.warn{
  margin:0 0 14px;font-size:13px;line-height:1.55;color:#E29650;
  border-left:2px solid #E29650;padding-left:11px;background:rgba(226,150,80,0.05)
}

/* demo frame */
.demo{border-top:1px solid var(--a14);background:var(--desk)}
/* The EXAMPLE bar is the last thing that belongs to the reading surface, so it keeps the card
   colour and the seam falls in exactly one place: its bottom edge, which is the top edge of
   the live example. One 2px rule at a 1.40:1 tonal step, not a 1px hairline between two
   near-identical darks. */
.demo-bar{
  display:flex;align-items:center;gap:12px;padding:8px 14px;
  border-bottom:2px solid var(--a30);background:var(--card);
  font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.16em;color:var(--ink-4);text-transform:uppercase
}
.demo-bar .hint{color:var(--signal);letter-spacing:0.1em;text-transform:none;font-size:10px}
.demo-bar .sp{margin-left:auto;display:flex;gap:8px}
.demo-bar button{
  background:none;border:1px solid var(--a20);cursor:pointer;padding:3px 8px;
  font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.1em;color:var(--ink-3);
  transition:all 140ms var(--ease)
}
.demo-bar button:hover{border-color:var(--tx);color:var(--tx)}
/* Measured at 26x21 on all 146 entries — the two most-used controls on the page were the
   smallest touch targets on it. The box stays visually compact; the target does not. */
@media (pointer:coarse),(max-width:720px){
  .demo-bar button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .demo-bar{padding:4px 12px}
}
.stage{position:relative;width:100%;background:var(--sheet-2);overflow:hidden}
.stage iframe{display:block;width:100%;height:100%;border:0;background:transparent}
.stage:fullscreen{height:100vh !important}
.stage:fullscreen iframe{height:100vh}

.runbtn{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:
    repeating-linear-gradient(45deg,var(--a06) 0 1px,transparent 1px 9px),var(--sheet-2);
  border:0;cursor:pointer;width:100%;color:var(--ink-3);
}
.runbtn:hover{color:var(--tx)}
.runbtn .rb{
  border:1px solid var(--a30);padding:11px 22px;font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.18em;transition:all 160ms var(--ease)
}
.runbtn:hover .rb{border-color:var(--signal);color:var(--signal)}
.runbtn .rn{font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.14em;color:var(--ink-4)}

/* prose blocks used by sections 13 / 14 / 15 */
.prose{padding-left:52px;max-width:96ch}
@media (max-width:640px){.prose{padding-left:0}}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 26px;border:1px solid var(--a14);background:var(--sheet)}
/* a three-column comparison cannot fit a 320px phone; it scrolls inside its own
   block rather than taking the whole page sideways with it */
.prose .tscroll{overflow-x:auto;margin:0 0 26px;border:1px solid var(--a14);background:var(--sheet)}
.prose .tscroll table{margin:0;border:0;min-width:560px}
.prose th{
  text-align:left;font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-4);font-weight:500;padding:11px 16px;border-bottom:1px solid var(--a14);background:var(--sheet-2)
}
.prose td{padding:12px 16px;border-bottom:1px solid var(--a06);color:var(--ink-2);vertical-align:top}
.prose tr:last-child td{border-bottom:0}
.prose td strong{color:var(--tx);font-weight:600}
.prose pre{
  background:var(--sheet);border:1px solid var(--a14);padding:18px 20px;overflow-x:auto;
  font-family:'Geist Mono',monospace;font-size:12.5px;line-height:1.75;color:var(--ink-2);margin:0 0 22px
}
.prose h3{font-size:15px;margin:0 0 12px;letter-spacing:-0.01em}
.prose p{color:var(--ink-2);max-width:70ch;margin:0 0 18px}
.prose ol{color:var(--ink-2);max-width:70ch;padding-left:20px}
.prose ol li{margin-bottom:7px}
.prose .note{font-size:13px;color:var(--ink-4);border-left:2px solid var(--a20);padding-left:12px;max-width:66ch}

.libcard{border:1px solid var(--a14);background:var(--sheet);margin-bottom:26px}
.libcard .lc-h{padding:13px 18px;border-bottom:1px solid var(--a14);background:var(--sheet-2);font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.14em}
.libcard dl{margin:0;display:grid;grid-template-columns:220px 1fr}
@media (max-width:700px){.libcard dl{grid-template-columns:1fr}}
.libcard dt{
  padding:12px 18px;border-bottom:1px solid var(--a06);border-right:1px solid var(--a06);
  font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-4)
}
.libcard dd{padding:12px 18px;border-bottom:1px solid var(--a06);margin:0;color:var(--ink-2);font-size:14px}
@media (max-width:700px){.libcard dt{border-right:0;padding-bottom:2px;border-bottom:0}}

/* empty state for filters */
.noresults{padding:60px 0;text-align:center;color:var(--ink-4);font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:0.14em}

.foot{border-top:1px solid var(--a14);padding:34px clamp(14px,2.6vw,44px);max-width:1680px;margin:0 auto;
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.14em;color:var(--ink-4);
  display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}
.foot a:hover{color:var(--signal)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:0.01ms !important}
}