/* UX Handbook - TFMSTYLE
   No frameworks. Brand tokens mirror TFMSTYLE Brand/tokens.css. */

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/archivo-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/archivo-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/archivo-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/archivo-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/archivo-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/archivo-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Oswald;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/oswald-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Oswald;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/oswald-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Oswald;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/oswald-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Oswald;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/oswald-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Oswald;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/oswald-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Oswald;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/oswald-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/space-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/space-mono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --------------------------------------------------------------- tokens
   Palette follows tfmstyle.com and Relay (neutral near-black web surfaces),
   NOT the desktop suite's blue-tinted #0c0d11 set. Accent, focus ring, radius
   and motion scales come from TFMSTYLE Brand/tokens.css. */
:root{
  --bg:#0a0a0b; --surface:#111111; --surface2:#0d0d0e; --chip:#181717;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#e8eaf0; --muted:#8b8f9c; --dim:#767b87;
  --accent:#ff8a00; --accent-hover:#ff9a10; --accent-soft:rgba(255,138,0,.14);
  --accent-ink:#fff; --mark:rgba(255,138,0,.30);
  --focus-ring:0 0 0 3px rgba(255,138,0,.25);
  --shadow:0 16px 50px rgba(0,0,0,.5);
  --nav-bg:linear-gradient(180deg,rgba(18,18,21,.62),rgba(10,10,12,.55));
  --nav-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 30px rgba(0,0,0,.28);
  --menu:#1a1c24;
  --r:12px; --r-md:8px; --r-sm:6px; --r-pill:20px;
  --sans:Archivo,'Segoe UI',system-ui,-apple-system,sans-serif;
  --display:Oswald,'Archivo Narrow','Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  /* 83px, measured off tfmstyle.com's nav rather than derived from it: the
     tallest thing in that bar is the 58px links row, not the 44px logo, so
     58 + 12 + 12 + 1px border = 83. Matching the logo alone left this bar 15px
     short and it read as thinner. */
  --topbar:83px; --rail:248px; --measure:44rem; --page:1280px; --gutter:40px;
  --dur:.16s; --ease:cubic-bezier(.4,0,.2,1);
  color-scheme:dark;
}
/* Dark only, like tfmstyle.com. There is no light theme by design. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 15px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:anywhere;
}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:#0a0a0b}
mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 .1em}
/* the site's global press feedback, kept identical so the subdomain feels the same */
a,button,select,summary{transition:transform .22s cubic-bezier(.22,1,.36,1),
  color .18s ease,background-color .18s ease,border-color .18s ease,opacity .18s ease}
a:active,button:active{transform:scale(.975)}
html{scrollbar-gutter:stable}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#26262b;border-radius:8px}
::-webkit-scrollbar-track{background:var(--bg)}

/* rendered on <body> so no overflow:hidden ancestor can ever clip it */
.tip{position:fixed;z-index:80;pointer-events:none;opacity:0;
  transform:translateY(-3px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  background:var(--menu,#1a1c24);color:var(--text);border:1px solid var(--line2);
  border-radius:var(--r-sm);box-shadow:var(--shadow);padding:6px 9px;
  font:400 11px/1.35 var(--mono);letter-spacing:.06em;
  /* wrap rather than overflow when the viewport is narrower than the label */
  max-width:calc(100vw - 16px);white-space:normal;text-align:center}
.tip.on{opacity:1;transform:none}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--accent);
  color:var(--accent-ink);padding:10px 16px;font-weight:600}
.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* -------------------------------------------------------------- topbar */
.topbar{
  position:sticky;top:0;z-index:50;height:var(--topbar);
  background:var(--nav-bg);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:var(--nav-shadow);
}
.navinner{
  max-width:var(--page);margin:0 auto;height:100%;
  display:flex;align-items:center;gap:16px;padding:0 var(--gutter);
}
/* Matches tfmstyle.com's nav exactly: 44px mark, Oswald 700 at 23px with
   .07em, 13px gap, inside 12px vertical padding. That is what makes the bar
   68px tall on both, and what stops this one reading as lighter than the site. */
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
/* the mark carries its own rounded plate, so never round it again in CSS */
.brand img{height:44px;width:44px;display:block;border-radius:0}
.brand b{font:700 23px/1 var(--display);letter-spacing:.07em;color:var(--text);
  text-transform:uppercase;white-space:nowrap}

.searchwrap{position:relative;flex:1 1 auto;min-width:0;max-width:560px;margin:0 auto}
.searchwrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--dim);pointer-events:none}
#q{
  width:100%;height:36px;padding:0 76px 0 36px;font-size:14px;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-pill);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
#q::placeholder{color:var(--dim)}
#q:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;gap:4px}
.kbd kbd{font:400 10px/1 var(--mono);color:var(--dim);background:var(--chip);
  border:1px solid var(--line2);border-radius:4px;padding:4px 6px}
#clearq{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:18px;line-height:1;padding:4px 7px;border-radius:50%}
#clearq:hover{background:var(--chip);color:var(--text)}

.navlink{flex:none;font:600 12.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:8px 2px;-webkit-user-select:none;user-select:none}
.navlink:hover{color:var(--accent)}
.navlink .ar{color:var(--accent);margin-left:6px}
.navlink.out{margin-left:6px;padding-left:14px;border-left:1px solid var(--line2)}

.tools{display:flex;align-items:center;gap:4px;flex:none}
.navsep{width:1px;height:20px;background:var(--line2);margin:0 6px;flex:none}
.tool.navicon{text-decoration:none}
.tool{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-md);
  color:var(--muted);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.tool:hover{background:var(--chip);color:var(--text)}
.tool[aria-pressed=true]{color:var(--accent);background:var(--accent-soft)}
.tool svg{width:17px;height:17px}

/* --------------------------------------------------------------- shell */
/* Same 1280 measure and 40px gutter the site uses on every page, so the
   handbook lines up with tfmstyle.com when you tab between them. */
.shell{max-width:var(--page);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0;align-items:start}
.rail{
  position:sticky;top:var(--topbar);height:calc(100dvh - var(--topbar));
  overflow-y:auto;overscroll-behavior:contain;
  border-right:1px solid var(--line);padding:22px 18px 40px 0;
}
.rail::-webkit-scrollbar{width:9px}
.rail::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px;border:3px solid var(--bg)}
.rail h2{font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin:0 0 10px 8px}
.rail section+section{margin-top:26px}
.railnav{display:none}          /* the top bar carries these on desktop */
.raillink{text-decoration:none}

.facet{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:6px 8px;border-radius:var(--r-md);color:var(--muted);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.facet:hover{background:var(--chip);color:var(--text)}
.facet[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.facet .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.facet .nm{flex:1;font-size:13.5px}
.facet .ct{font:400 11px/1 var(--mono);color:var(--dim)}
.facet[aria-pressed=true] .ct{color:var(--accent)}

.tagcloud{display:flex;flex-wrap:wrap;gap:5px;padding:0 4px}
.tag{font:400 11px/1 var(--mono);padding:5px 9px;border-radius:var(--r-pill);
  background:var(--chip);color:var(--muted);border:1px solid transparent;
  transition:all var(--dur) var(--ease)}
.tag:hover{color:var(--text);border-color:var(--line2)}
.tag[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);font-weight:700}
#moretags{font:400 11px/1 var(--mono);color:var(--accent);padding:6px 4px}

/* --------------------------------------------------------------- main */
main{min-width:0;padding:26px 0 90px 34px}
.wrap{max-width:var(--measure)}

.statusbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  min-height:24px;margin-bottom:16px}
.statusbar .n{font:400 11px/1 var(--mono);color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.statusbar .n b{color:var(--text);font-weight:400}
.pill{display:inline-flex;align-items:center;gap:6px;font:400 11px/1 var(--mono);
  background:var(--accent-soft);color:var(--accent);padding:5px 8px;border-radius:var(--r-pill)}
.pill button{color:inherit;font-size:13px;line-height:1;opacity:.7}
.pill button:hover{opacity:1}
#sort{margin-left:auto;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-md);height:28px;padding:0 8px;font-size:12.5px;color:var(--muted)}

.hits{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.hit{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:15px 17px;cursor:pointer;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.hit:hover,.hit.sel{border-color:var(--line2);background:var(--surface2)}
.hit.sel{border-color:var(--accent)}
.hit h3{margin:0 0 6px;font:600 16px/1.3 var(--sans);letter-spacing:-.01em}
.hit .snip{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.cat{font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:5px 8px;border-radius:var(--r-sm)}
.meta .t{font:400 10.5px/1 var(--mono);color:var(--dim);letter-spacing:.04em}
.star{position:absolute;top:12px;right:12px;color:var(--dim);opacity:0;
  width:26px;height:26px;display:grid;place-items:center;border-radius:var(--r-sm)}
.hit:hover .star,.star[aria-pressed=true]{opacity:1}
.star[aria-pressed=true]{color:var(--accent)}
.star svg{width:15px;height:15px}

/* --------------------------------------------------------------- promos
   First-party cards: products, apps and articles. Same box as a guide card so
   the rhythm of the list never breaks; it reads as different through the cover
   and the kind label, not through loudness. */
.hit.promo{padding:0;background:var(--surface2);border-style:dashed;cursor:default}
.hit.promo:hover{border-color:var(--accent);background:var(--surface2)}
.sp-link{display:flex;gap:15px;align-items:center;padding:15px 17px;
  text-decoration:none;color:inherit}
/* The covers are 1:1, 16:9 and 2:1 and the build keeps each one's own ratio.
   Bounding the box rather than fixing the height is what stops a 16:9 cover
   being stretched back into an 88px square with bands down the sides. The
   width/height attributes come from the build, so the row reserves the exact
   space before the image lands. */
.sp-cover{max-height:88px;max-width:150px;height:auto;width:auto;flex:none;
  display:block;border-radius:var(--r-sm);background:var(--chip)}
.sp-body{min-width:0;flex:1}
.sp-kind{display:inline-block;font:400 9.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.promo-app .sp-kind{color:var(--accent)}
.hit.promo h3{margin:0 0 5px;font:600 15px/1.3 var(--sans)}
.hit.promo .snip{-webkit-line-clamp:2}
.sp-price{font:400 11px/1 var(--mono);color:var(--text);background:var(--chip);
  padding:5px 8px;border-radius:var(--r-sm)}
.sp-price.free{color:var(--accent);background:var(--accent-soft)}
.sp-cta{font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sp-link:hover .sp-cta{text-decoration:underline;text-underline-offset:3px}
div.hit.promo{margin-top:22px}

.empty{padding:60px 0;text-align:center;color:var(--muted)}
.empty b{display:block;font:700 22px/1.3 var(--display);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text);margin-bottom:8px}
.empty .did{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
#more{display:block;margin:20px auto 0;padding:10px 20px;border:1px solid var(--line2);
  border-radius:var(--r-pill);color:var(--muted);font:400 11px/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase}
#more:hover{border-color:var(--accent);color:var(--accent)}

/* -------------------------------------------------------------- reader */
.reader{max-width:var(--measure)}
.back{display:inline-flex;align-items:center;gap:7px;font:400 11px/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px 0;margin-bottom:10px}
.back:hover{color:var(--accent)}
.reader h1{margin:0 0 12px;font:700 clamp(28px,4vw,42px)/1.06 var(--display);
  letter-spacing:.03em;text-transform:uppercase}
.reader .meta{margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.reader h4{margin:34px 0 12px;font:400 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.reader ul{margin:0 0 4px;padding-left:0;list-style:none}
.reader li{position:relative;padding:7px 0 7px 20px;font-size:15.5px;line-height:1.68}
.reader li::before{content:'';position:absolute;left:2px;top:1.06em;
  width:6px;height:1.5px;background:var(--accent);opacity:.85}
.reader ul ul{margin-left:20px}
.reader ul ul li{font-size:14.5px;color:var(--muted);padding:4px 0 4px 18px}
.reader ul ul li::before{width:4px;background:var(--dim)}
.reader p{margin:6px 0 14px;font-size:15.5px;line-height:1.7}
.reader li p.note{margin:6px 0 10px;color:var(--muted);font-size:14px;line-height:1.6;
  border-left:1px solid var(--line2);padding-left:13px}
.reader .meta .cat,.reader .meta .t{cursor:pointer;transition:color var(--dur) var(--ease)}
.reader .meta .t:hover{color:var(--accent)}
.reader .meta .cat:hover{background:var(--accent);color:var(--accent-ink)}
.reader .meta .star{position:static;opacity:1;margin-left:auto}
.reader strong{font-weight:600;color:var(--text)}
.reader code{font:400 .9em/1 var(--mono);background:var(--chip);padding:2px 5px;border-radius:4px}

.readnav{display:flex;gap:10px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.readnav a{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;text-decoration:none;
  transition:border-color var(--dur) var(--ease)}
.readnav a:hover{border-color:var(--accent)}
.readnav small{display:block;font:400 10px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.readnav span{font-weight:500;font-size:14px}
.readnav a.nx{text-align:right}
.readacts{display:flex;gap:8px;margin-top:22px}
.ghost{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line2);border-radius:var(--r-pill);padding:9px 15px}
.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* -------------------------------------------------------------- confirm */
.confirm-back{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(5,5,6,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:20px}
.confirm{width:min(400px,100%);background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r);box-shadow:var(--shadow);padding:22px}
.confirm h3{margin:0 0 8px;font:700 19px/1.2 var(--display);letter-spacing:.03em;text-transform:uppercase}
.confirm p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.55}
.confirm-row{display:flex;gap:8px;justify-content:flex-end}
.ghost.primary{border-color:var(--accent);color:var(--accent-ink);background:var(--accent)}
.ghost.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.ghost:disabled{opacity:.5;cursor:default}
.tool:disabled{opacity:.4;cursor:default}

/* -------------------------------------------------------------- related */
.reader h4.relh{margin-top:40px}
.related{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.related li{padding:0}
.related a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 14px;text-decoration:none;transition:border-color var(--dur) var(--ease)}
.related a:hover{border-color:var(--accent)}
.related .rt{font-weight:500;font-size:14px}
.related .rc{font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);flex:none}
.inpath{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:34px}
.inpath .lbl{font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pathchip{font:400 11px/1 var(--mono);padding:6px 10px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent);text-decoration:none}
.pathchip:hover{background:var(--accent);color:var(--accent-ink)}

/* --------------------------------------------------------- introduction */
/* one line above the list, not a landing page inside a landing page */
.introhero{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.introhero p{margin:0;flex:1;color:var(--muted);font-size:14px;line-height:1.6}
.introhero a{color:var(--accent);text-decoration:none;white-space:nowrap}
.introhero a:hover{text-decoration:underline;text-underline-offset:3px}
.introtoggle{font-size:16px;line-height:1;color:var(--dim);flex:none;padding:2px 6px;
  border-radius:var(--r-sm)}
.introtoggle:hover{background:var(--chip);color:var(--text)}
.introlead{font-size:16px;line-height:1.7;color:var(--muted);max-width:40rem;margin:0 0 24px}
.introapi{margin:0;color:var(--muted);font-size:14px;line-height:1.6;max-width:40rem}
.introapi a{color:var(--accent);text-decoration:none;font-family:var(--mono);font-size:13px}
.introapi a:hover{text-decoration:underline;text-underline-offset:3px}
.introstats{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px}
.introstats div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 16px;min-width:104px}
.introstats b{display:block;font:700 24px/1 var(--display);letter-spacing:.02em;color:var(--accent)}
.introstats span{display:block;margin-top:5px;font:400 10px/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.introsteps{list-style:none;margin:0 0 8px;padding:0;counter-reset:i;display:grid;gap:10px}
.introsteps li{counter-increment:i;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:15px 17px 15px 50px;position:relative}
.introsteps li::before{content:counter(i);position:absolute;left:17px;top:16px;
  font:400 11px/1 var(--mono);color:var(--accent)}
.introsteps h3{margin:0 0 5px;font:600 15.5px/1.3 var(--sans)}
.introsteps p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.introkeys{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.introkeys li{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.introkeys kbd{font:400 10.5px/1 var(--mono);color:var(--text);background:var(--chip);
  border:1px solid var(--line2);border-radius:4px;padding:5px 7px;min-width:88px;text-align:center}
.reader .readacts a,#colview .readacts a{text-decoration:none}

/* ---------------------------------------------------------- collections */
.colhead{margin-bottom:26px}
.colhead h1{margin:0 0 10px;font:700 clamp(26px,4vw,40px)/1.06 var(--display);
  letter-spacing:.03em;text-transform:uppercase}
.colhead p{margin:0 0 12px;color:var(--muted);font-size:15px;max-width:36rem}
.colgrid{display:grid;gap:10px}
.colcard{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;text-decoration:none;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.colcard:hover{border-color:var(--accent);background:var(--surface2)}
.colcard h3{margin:9px 0 6px;font:600 17px/1.3 var(--sans)}
.colcard p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.colsteps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:s}
.colstep{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;
  text-decoration:none;transition:border-color var(--dur) var(--ease)}
.colstep:hover{border-color:var(--accent)}
.colstep .n{font:400 11px/1 var(--mono);color:var(--dim);min-width:20px;padding-top:3px}
.colstep h3{margin:0 0 4px;font:600 15px/1.35 var(--sans)}
.colstep p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);margin-top:40px}
.footinner{max-width:var(--page);margin:0 auto;padding:22px var(--gutter) 40px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font:400 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.footinner a{color:var(--muted);text-decoration:none}
.footinner a:hover{color:var(--accent)}
.footinner .sep{opacity:.4}

/* ------------------------------------------------------------ mobile */
#railtoggle{display:none}
@media (max-width:1100px){
  :root{--gutter:24px}
  /* the drawer carries these instead, or the search box has no room left */
  .navlink,.tool.navicon,.navsep{display:none}
  .railnav{display:block}
}
@media (max-width:900px){
  :root{--rail:0px;--gutter:16px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;inset:var(--topbar) auto 0 0;width:280px;z-index:45;
    background:var(--surface);box-shadow:var(--shadow);padding:22px 16px 40px;
    border-right:1px solid var(--line);
    transform:translateX(-102%);transition:transform .22s var(--ease);height:auto;bottom:0}
  .rail.open{transform:none}
  #railtoggle{display:grid}
  main{padding:20px 0 80px}
  .brand span{display:none}
  .kbd{display:none}
}
@media (max-width:560px){
  :root{--gutter:12px}
  .navinner{gap:8px}
  .brand b{display:none}
  .brand img{height:36px;width:36px}
  .tools{gap:0}
  .tool{width:31px;height:31px}
  #q{padding-right:34px}
  .hit{padding:13px 14px}
  .footinner{padding-bottom:32px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media print{
  .topbar,.rail,.readnav,.readacts,.back{display:none}
  body{background:#fff;color:#000}
  main{padding:0}
}