/* aiticker — a wire-service front page: Geist headlines, hairline rules, mono data. */
:root {
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --r: 3px;
  --wrap: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
:root, [data-theme='dark'] {
  color-scheme: dark;
  --bg: #121211;
  --bg-2: #191917;
  --card: #191917;
  --card-2: #1f1f1d;
  --line: rgba(236, 233, 224, .1);
  --line-2: rgba(236, 233, 224, .2);
  --rule: #ece9e0;
  --ink: #ece9e0;
  --ink-2: #aaa69b;
  --ink-3: #78756d;
  --accent: #ff6b35;
  --accent-ink: #ff7f4f;
  --on-accent: #121211;
  --k-release: #7fbf7f;
  --k-changelog: #7fa8d6;
  --k-blog: #b89bd1;
  --hn: #ff8a3d;
}
[data-theme='light'] {
  color-scheme: light;
  --bg: #f4f1e9;
  --bg-2: #ebe7dc;
  --card: #faf8f2;
  --card-2: #efebe1;
  --line: rgba(27, 26, 23, .12);
  --line-2: rgba(27, 26, 23, .24);
  --rule: #1b1a17;
  --ink: #1b1a17;
  --ink-2: #4c4a44;
  --ink-3: #75726a;
  --accent: #c8401a;
  --accent-ink: #b5380f;
  --on-accent: #faf8f2;
  --k-release: #2f6b2f;
  --k-changelog: #23548c;
  --k-blog: #6a3f8f;
  --hn: #b5470c;
}
[style*='--c'] { --cc: var(--c); }
[data-theme='light'] [style*='--c'] { --cc: color-mix(in oklab, var(--c), #000 38%); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
/* Scrollbars: hairline track, ink thumb, accent on hover — matches the rules. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--line); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--bg); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
::-webkit-scrollbar-thumb:active { background: var(--accent); }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: var(--bg); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--line-2) var(--bg); }
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
code, kbd { font-family: var(--mono); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* ── masthead ─────────────────────────── */
/* A floating panel: a pulsing signal mark, sections grouped into small menus, an ink slug that
   glides between groups and a hairline that fills as you read. It frosts once the page moves and,
   once you're reading, slims to hug its links (the search flies out to the orb). Always on screen. */
:root { --navh: 76px; }
.nav { position: sticky; top: 0; z-index: 50; padding: 10px 16px 0; pointer-events: none; }
.nav-in {
  position: relative; pointer-events: auto; display: flex; align-items: center; gap: 18px; height: 56px;
  /* A real length (not auto) so the slim state's fit-content can animate from it. */
  width: min(100%, calc(var(--wrap) + 24px)); max-width: calc(var(--wrap) + 24px); margin: 0 auto; padding: 0 8px 0 20px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent) inset, 0 14px 34px -24px rgb(0 0 0 / .55);
  interpolate-size: allow-keywords;
  transition: background .3s, border-color .3s, box-shadow .3s, height .3s var(--ease), width .5s var(--ease);
}
@media (min-width: 981px) {
  .nav.slim .nav-in { width: fit-content; }
  .nav.slim .nav-actions { margin-left: 0; }
}
.nav.stuck .nav-in {
  height: 52px; background: color-mix(in oklab, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 18px 40px -20px rgb(0 0 0 / .55);
}
.brand { display: inline-flex; align-items: baseline; font: 650 19px/1 var(--font); letter-spacing: -.03em; }
.brand span::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 3px; background: var(--accent); }
.nav-brand { position: relative; align-items: center; gap: 9px; flex: none; }
.nav-brand span::after { content: none; }
.brand-sig { width: 25px; height: 15px; flex: none; fill: var(--accent); overflow: visible; }
.sig-chev { transition: transform .35s var(--ease); }
.sig-tick { clip-path: inset(0); }
.sig-cur { animation: sig-blink 1.1s steps(1) infinite; }
@keyframes sig-blink { 50% { opacity: 0; } }
.nav-brand:hover .sig-chev { transform: translateX(1.5px); }
.nav-brand:hover .sig-tick { animation: sig-tick .6s var(--ease); }
@keyframes sig-tick { from { clip-path: inset(0 100% 0 0); } }
.brand-live { display: none; }
.nav-links { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); }
.nav-grp { position: relative; }
.nav-cat {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px;
  border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 500 14px/1.2 var(--font); white-space: nowrap; cursor: pointer;
  transition: color .2s;
}
.nav-cat svg { opacity: .55; transition: rotate .3s var(--ease), opacity .2s; }
.nav-cat:hover, .nav-cat.glide-on, .nav-grp.open .nav-cat { color: var(--ink); }
.nav-grp.open .nav-cat svg { rotate: 180deg; opacity: 1; }
/* The group you're in is set in reverse, like a slug on the wire. */
.nav-cat.cur, .nav-cat.cur:hover, .nav-cat.cur.glide-on, .nav-grp.open .nav-cat.cur { color: var(--bg); }
.nav-cat.cur svg { opacity: .8; }
.nav-cat.cur::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ink); animation: inkIn .55s cubic-bezier(.7,0,.2,1) both; }
@keyframes inkIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.nav-glide {
  position: absolute; z-index: 0; top: 50%; left: 0; height: 32px; width: var(--gw, 0); margin-top: -16px;
  border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-2); pointer-events: none;
  transform: translateX(var(--gx, 0)); opacity: 0;
  transition: transform .45s cubic-bezier(.3,1.4,.4,1), width .45s cubic-bezier(.3,1.4,.4,1), opacity .2s;
}
.nav-links.gliding .nav-glide { opacity: 1; }
.nav-glide::before {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--accent);
  transform: scaleX(.25); transition: transform .45s var(--ease);
}
.nav-links.gliding .nav-glide::before { transform: scaleX(1); }
.nav-menu {
  position: absolute; top: calc(100% + 14px); left: -6px; z-index: 5; display: grid; gap: 1px; width: max-content; min-width: 250px; padding: 8px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 24px 48px -18px rgb(0 0 0 / .5);
  opacity: 0; visibility: hidden; translate: 0 -6px; scale: .98; transform-origin: 20px 0;
  transition: opacity .14s, translate .3s var(--ease), scale .3s var(--ease), visibility 0s .14s;
}
.nav-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-grp.snap .nav-menu { transition: none; }
.nav-grp.open .nav-menu { opacity: 1; visibility: visible; translate: 0; scale: 1; transition-delay: 0s; }
.nav-hint { margin: 2px 12px 6px; font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.nav-menu a { position: relative; display: grid; gap: 3px; padding: 9px 12px 9px 14px; border-radius: 8px; transition: background .15s; }
.nav-menu a b { font: 600 14px/1.2 var(--font); color: var(--ink); }
.nav-menu a small { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--bg-2); outline: none; }
.nav-menu a:hover b { color: var(--accent-ink); }
.nav-menu a[aria-current]::before { content: ''; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--accent); }
.nav-wire {
  position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-ink));
  transform-origin: 0 50%; transform: scaleX(var(--read, 0)); opacity: 0; transition: opacity .3s;
}
.nav.stuck .nav-wire { opacity: 1; }
@media (max-width: 1100px) and (min-width: 981px) { .nav-in { gap: 12px; } .nav-cat { padding: 7px 8px; font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) {
  .sig-cur, .nav-brand:hover .sig-tick { animation: none; }
  .sig-chev { transition: none; }
  .nav-glide, .nav-glide::before, .nav-in, .nav-menu { transition: none; }
  .nav-cat::before { animation: none !important; }
}
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); }
.icon-btn:hover { color: var(--ink); }
#refresh.is-spinning svg { animation: spin .7s linear infinite; }
[data-theme='dark'] .sun, [data-theme='light'] .moon { display: none; }
.nav-toggle { display: none; }
.nav-toggle path { transition: transform .2s, opacity .2s; transform-origin: 12px 12px; }
.nav.open .nt-a { transform: translateY(5px) rotate(45deg); }
.nav.open .nt-b { opacity: 0; }
.nav.open .nt-c { transform: translateY(-5px) rotate(-45deg); }

/* ── hero ─────────────────────────────── */
.hero { padding: 0 0 36px; }
.hero-sm { padding: 44px 0 4px; }
.dateline { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 0; border-bottom: 1px solid var(--line); font: 12px var(--mono); color: var(--ink-3); }
.dateline > span { display: inline-flex; align-items: center; gap: 7px; }
.dateline > span:first-child { color: var(--ink-2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--k-release); flex: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding-top: 44px; align-items: end; }
h1 { font: 600 clamp(38px, 5.6vw, 72px)/.98 var(--font); letter-spacing: -.045em; margin: 0 0 18px; max-width: 17ch; text-wrap: balance; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.hero h1 em { color: var(--accent-ink); }
.lede { color: var(--ink-2); font-size: 17px; max-width: 58ch; margin: 0; text-wrap: pretty; }
.hero-search { position: relative; display: flex; align-items: center; max-width: 520px; margin-top: 28px; border-bottom: 1px solid var(--line-2); transition: border-color .15s; }
.hero-search:focus-within { border-color: var(--ink); }
.hero-search svg { position: absolute; left: 0; color: var(--ink-3); }
.hero-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: 16px; padding: 12px 12px 12px 26px; }
.hero-search input::placeholder { color: var(--ink-3); }
.hero-search kbd { font-size: 11.5px; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 6px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-block: 1px solid var(--line-2); }
.stats > div { padding: 14px 18px 14px 0; }
.stats > div + div { border-left: 1px solid var(--line); padding-left: 18px; }
.stats dt { font: 12px var(--mono); color: var(--ink-3); }
.stats dd { margin: 4px 0 0; font: 600 26px/1.15 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stats dd small { font: 12px var(--mono); color: var(--ink-3); }
.stats dd code { font-size: 20px; font-weight: 500; }
.stats.stats-5 { grid-template-columns: repeat(5, 1fr); }
.ownership { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; margin: 0; border-bottom: 1px solid var(--line-2); }
.ownership > div { padding: 14px 18px 16px 0; min-width: 0; }
.ownership > div + div { border-left: 1px solid var(--line); padding-left: 18px; }
.ownership dt { font: 12px var(--mono); color: var(--ink-3); }
.ownership dd { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.ownership ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ownership li { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px 3px 3px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; line-height: 1.2; }
.ownership li > .av + .av, .ownership li > .ticon + .av, .ownership li > .av + .ticon { margin-left: -14px; }
.ownership .ticon { border-radius: 50%; }
.av { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); }
.av-photo { object-fit: cover; object-position: 50% 15%; background: var(--card-2); }
.av-logo { object-fit: contain; padding: 4px; background: #fff; }
.av-none { display: grid; place-items: center; background: var(--card-2); color: var(--ink-2); font: 600 11px var(--font); letter-spacing: .02em; }
.credits { margin: 8px 0 0; font: 11px var(--mono); color: var(--ink-3); }
@media (max-width: 640px) {
  .ownership { grid-template-columns: 1fr; }
  .ownership > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}
.stats dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.est { font: 11px var(--mono); color: var(--ink-3); }
.hero-stats { grid-template-columns: 1fr; border-top: 2px solid var(--rule); }
.hero-stats > div, .hero-stats > div + div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-left: 0; }
.hero-stats > div + div { border-top: 1px solid var(--line); }
.hero-stats dd { margin: 0; font-size: 22px; }

/* ── go straight to ─────────────────── */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; max-width: 640px; }
.jump a { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.jump a:hover, .jump a:focus-visible { border-color: var(--ink); background: var(--bg-2); }
.jump b { font-weight: 600; font-size: 14px; }
.jump small { color: var(--ink-3); font-size: 12px; }
.vsearch { margin: 4px 0 18px; }
.tick time { color: var(--ink-3); font: 11.5px var(--mono); }

/* ── sections ─────────────────────────── */
.section { padding: 64px 0 8px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 8px; padding: 12px 0 14px; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--line); }
.eyebrow { font: 12px var(--mono); color: var(--ink-3); margin: 0 0 4px; }
.hero-sm .eyebrow { margin-bottom: 14px; }
h2 { font: 600 clamp(26px, 3vw, 34px)/1.1 var(--font); letter-spacing: -.035em; margin: 0; }
.tabs, .chips, .nchips { display: flex; gap: 2px 16px; flex-wrap: wrap; }
.tabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; flex-wrap: nowrap; }
.tabs button, .chip { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; font-size: 13.5px; color: var(--ink-3); white-space: nowrap; border-bottom: 2px solid transparent; }
.tabs button i { font: normal 11.5px var(--mono); color: var(--ink-3); }
.tabs button:hover, .chip:hover { color: var(--ink); }
.tabs button[aria-selected='true'], .chip.on { color: var(--ink); border-bottom-color: var(--accent); }
.k { width: 6px; height: 6px; }
.k.release { background: var(--k-release); } .k.changelog { background: var(--k-changelog); } .k.blog { background: var(--k-blog); }

/* ── tool icon ────────────────────────── */
.ticon { position: relative; display: grid; place-items: center; flex: none; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--line); overflow: hidden; }
.ticon img { position: absolute; inset: 18%; width: 64%; height: 64%; object-fit: contain; z-index: 1; }
.ticon b { font: 650 1em var(--font); color: var(--cc); }
.ticon.has-logo b { visibility: hidden; }
[data-theme='dark'] .ticon.tone-dark { background: #e6e3da; border-color: transparent; }
[data-theme='light'] .ticon.tone-light { background: #1b1a17; border-color: transparent; }
.ticon img.fill { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ticon .mono { position: absolute; inset: 20%; z-index: 1; background: var(--ink); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ticon-sm { width: 28px; height: 28px; font-size: 14px; }
.ticon-md { width: 40px; height: 40px; font-size: 18px; }
.ticon-xl { width: 72px; height: 72px; font-size: 32px; }

/* ── Logo motion ── Each logo maps to a motion in scripts/logo-motion.mjs (data-anim, plus vars such as --turn).
   Hero (xl) tiles loop it; smaller tiles play it while their row/link is hovered. Every keyframe set ends on
   the logo's resting pose (or an identical one), so loops are seamless; most build a pause into the cycle. */
.ticon[data-anim] > :is(.mono, img) { --a-ease: cubic-bezier(.65, 0, .35, 1); }
.ticon-xl[data-anim] > :is(.mono, img) { animation: var(--a-name) var(--a-xl, 4s) var(--a-ease) .4s infinite; }
:is(a:hover, .ptool:hover) .ticon[data-anim] > :is(.mono, img), .ticon[data-anim]:hover > :is(.mono, img) { animation: var(--a-name) var(--a-sm, 1.6s) var(--a-ease) infinite; }

/* turn: ratchets by the mark's symmetry angle (--turn) with a small overshoot; the hero tile glows in brand colour. */
@keyframes logo-turn { 0% { rotate: 0deg; } 20% { rotate: calc(var(--turn) * 1.13); } 30%, 100% { rotate: var(--turn); } }
@keyframes logo-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 20% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); } }
.ticon[data-anim='turn'] > * { --a-name: logo-turn; }
.ticon-xl[data-anim='turn'] { animation: logo-glow 4s ease-out .4s infinite; }
/* spin: winds back, does one full turn and settles (Claude's thinking spark). */
@keyframes logo-spin { 0% { rotate: 0deg; scale: 1; } 12% { rotate: -14deg; scale: .9; } 55% { rotate: 372deg; scale: 1.08; } 68%, 100% { rotate: 360deg; scale: 1; } }
.ticon[data-anim='spin'] > * { --a-name: logo-spin; --a-ease: cubic-bezier(.55, 0, .3, 1); --a-xl: 4.5s; }
/* twinkle: a 4-point sparkle shrinks, turns a quarter (--turn) and flares (Gemini). */
@keyframes logo-twinkle { 0% { rotate: 0deg; scale: 1; } 15% { rotate: -10deg; scale: .72; } 35% { rotate: var(--turn, 90deg); scale: 1.14; } 48%, 100% { rotate: var(--turn, 90deg); scale: 1; } }
.ticon[data-anim='twinkle'] > * { --a-name: logo-twinkle; }
/* draw: erased and re-drawn left to right as one stroke. */
@keyframes logo-draw { 0%, 100% { clip-path: inset(0 0 0 0); } 10% { clip-path: inset(0 0 0 100%); } 11% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } }
.ticon[data-anim='draw'] > * { --a-name: logo-draw; }
/* quad: four squares come in one at a time, top-left first (Microsoft). Same 6-point polygon throughout. */
@keyframes logo-quad {
  0%, 38%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 100%, 0 100%); }
  6% { clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0); }
  14% { clip-path: polygon(0 0, 50% 0, 50% 50%, 50% 50%, 0 50%, 0 50%); }
  22% { clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 0 50%); }
  30% { clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%); }
}
.ticon[data-anim='quad'] > * { --a-name: logo-quad; --a-ease: steps(1, end); }
/* glitch: a burst of sliced, offset frames, then still. */
@keyframes logo-glitch {
  0%, 30%, 100% { translate: 0 0; clip-path: inset(0); opacity: 1; }
  4% { translate: -8% 0; clip-path: inset(10% 0 55% 0); }
  8% { translate: 6% 0; clip-path: inset(55% 0 10% 0); }
  12% { translate: -3% 0; clip-path: inset(0); opacity: .55; }
  16% { translate: 0 0; opacity: 1; }
  21% { translate: 5% 0; clip-path: inset(35% 0 35% 0); }
  25% { translate: 0 0; clip-path: inset(0); }
}
.ticon[data-anim='glitch'] > * { --a-name: logo-glitch; --a-ease: steps(1, end); }
/* build: pixel marks stack up row by row. */
@keyframes logo-build { 0%, 100% { clip-path: inset(0); } 6% { clip-path: inset(100% 0 0 0); animation-timing-function: steps(5, end); } 40% { clip-path: inset(0); } }
.ticon[data-anim='build'] > * { --a-name: logo-build; }
/* type: a prompt types itself in from the left. */
@keyframes logo-type { 0%, 100% { clip-path: inset(0); } 5% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(6, end); } 40% { clip-path: inset(0); } }
.ticon[data-anim='type'] > * { --a-name: logo-type; }
/* zip: flies out to the right and back in from the left. */
@keyframes logo-zip { 0% { translate: 0 0; animation-timing-function: cubic-bezier(.6, 0, 1, .4); } 18% { translate: 140% 0; } 18.01% { translate: -140% 0; animation-timing-function: cubic-bezier(0, .6, .3, 1); } 40%, 100% { translate: 0 0; } }
.ticon[data-anim='zip'] > * { --a-name: logo-zip; }
/* flip: turns over like a card. */
@keyframes logo-flip { 0% { rotate: y 0deg; } 35%, 100% { rotate: y 360deg; } }
.ticon[data-anim='flip'] { perspective: 240px; }
.ticon[data-anim='flip'] > * { --a-name: logo-flip; }
/* pulse / beat / breathe / eq: scale-based. */
@keyframes logo-pulse { 0%, 60%, 100% { scale: 1; opacity: 1; } 30% { scale: 1.14; opacity: .8; } }
@keyframes logo-beat { 0%, 45%, 100% { scale: 1; } 10% { scale: 1.18; } 20% { scale: .96; } 30% { scale: 1.12; } }
@keyframes logo-breathe { 0%, 100% { scale: 1 1; } 30% { scale: 1.08 .93; } 65% { scale: .95 1.06; } }
@keyframes logo-eq { 0%, 60%, 100% { scale: 1 1; } 12% { scale: 1 .6; } 26% { scale: 1 1.15; } 40% { scale: 1 .8; } 50% { scale: 1 1.05; } }
.ticon[data-anim='pulse'] > * { --a-name: logo-pulse; --a-ease: ease-in-out; }
.ticon[data-anim='beat'] > * { --a-name: logo-beat; --a-ease: ease-out; }
.ticon[data-anim='breathe'] > * { --a-name: logo-breathe; --a-ease: ease-in-out; }
.ticon[data-anim='eq'] > * { --a-name: logo-eq; --a-ease: ease-in-out; transform-origin: 50% 100%; }
/* float / lift / swim: drift-based. */
@keyframes logo-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -10%; rotate: -4deg; } }
@keyframes logo-lift { 0%, 85%, 100% { translate: 0 0; scale: 1; } 8% { translate: 0 4%; scale: 1.04 .96; } 35%, 55% { translate: 0 -18%; scale: 1; } }
@keyframes logo-swim { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: 5% -7%; rotate: -7deg; } 50% { translate: 0 0; rotate: 0deg; } 75% { translate: -5% 3%; rotate: 4deg; } }
.ticon[data-anim='float'] > * { --a-name: logo-float; --a-ease: ease-in-out; }
.ticon[data-anim='lift'] > * { --a-name: logo-lift; --a-ease: ease-in-out; }
.ticon[data-anim='swim'] > * { --a-name: logo-swim; --a-ease: ease-in-out; --a-sm: 2.2s; }
/* mascot acts: hop, climb, peek, wiggle, flap, wave, scuttle. */
@keyframes logo-hop { 0%, 45%, 100% { translate: 0 0; scale: 1 1; } 8% { translate: 0 0; scale: 1.08 .92; } 22% { translate: 0 -18%; scale: .95 1.05; } 34% { translate: 0 0; scale: 1.06 .94; } }
@keyframes logo-climb { 0%, 100% { translate: 0 0; } 12% { translate: 6% -10%; } 20% { translate: 8% -8%; } 32% { translate: 14% -18%; } 40% { translate: 16% -16%; } 70% { translate: 0 0; } }
@keyframes logo-peek { 0%, 60%, 100% { rotate: 0deg; translate: 0 0; } 14% { rotate: -12deg; translate: 0 0; } 28% { rotate: 10deg; translate: 0 0; } 40% { rotate: 0deg; translate: 0 0; } 48% { rotate: 0deg; translate: 0 6%; } }
@keyframes logo-wiggle { 0%, 55%, 100% { rotate: 0deg; scale: 1 1; } 10% { rotate: -9deg; scale: 1 1; } 20% { rotate: 8deg; scale: 1 1; } 30% { rotate: -6deg; scale: 1 1; } 40% { rotate: 3deg; scale: 1.05 .95; } }
@keyframes logo-flap { 0%, 45%, 100% { rotate: 0deg; translate: 0 0; } 10% { rotate: -10deg; translate: 0 -7%; } 20% { rotate: 6deg; translate: 0 0; } 30% { rotate: -10deg; translate: 0 -7%; } }
@keyframes logo-wave { 0%, 55%, 100% { rotate: 0deg; } 10% { rotate: 14deg; } 20% { rotate: -8deg; } 30% { rotate: 14deg; } 40% { rotate: -4deg; } }
@keyframes logo-scuttle {
  0%, 60%, 100% { translate: 0 0; scale: 1 1; }
  8% { translate: -9% -10%; scale: 1 1; } 16% { translate: -16% 0; scale: 1.06 .94; }
  24% { translate: -7% -10%; scale: 1 1; } 32% { translate: 0 0; scale: 1.06 .94; }
  40% { translate: 8% -10%; scale: 1 1; } 48% { translate: 14% 0; scale: 1.06 .94; }
  54% { translate: 6% -6%; scale: 1 1; }
}
.ticon[data-anim='hop'] > * { --a-name: logo-hop; --a-ease: ease-in-out; transform-origin: 50% 100%; }
.ticon[data-anim='climb'] > * { --a-name: logo-climb; --a-ease: ease-in-out; }
.ticon[data-anim='peek'] > * { --a-name: logo-peek; --a-ease: ease-in-out; transform-origin: 50% 90%; }
.ticon[data-anim='wiggle'] > * { --a-name: logo-wiggle; --a-ease: ease-in-out; transform-origin: 50% 30%; }
.ticon[data-anim='flap'] > * { --a-name: logo-flap; --a-ease: ease-in-out; }
.ticon[data-anim='wave'] > * { --a-name: logo-wave; --a-ease: ease-in-out; transform-origin: 50% 90%; }
.ticon[data-anim='scuttle'] > * { --a-name: logo-scuttle; --a-ease: ease-in-out; --a-sm: 1.8s; transform-origin: 50% 100%; }
/* shine: a light sweep crosses the tile (works for full-bleed avatars too). */
@keyframes logo-shine { 0% { background-position: 160% 0; } 35%, 100% { background-position: -60% 0; } }
.ticon[data-anim='shine']::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .55) 50%, transparent 62%) no-repeat -60% 0 / 250% 100%; }
.ticon-xl[data-anim='shine']::after { animation: logo-shine 4s ease-in-out .4s infinite; }
:is(a:hover, .ptool:hover) .ticon[data-anim='shine']::after, .ticon[data-anim='shine']:hover::after { animation: logo-shine 1.6s ease-in-out infinite; }
/* ink (Anthropic): the A\ is written on behind a clay pen edge, then a clay sweep passes through it.
   The band sits on an ink base; at background-size 200% its x = width × (1 − position), so 160% → -60% crosses fully. */
@keyframes logo-ink-write { 0% { clip-path: inset(0 100% 0 0); background-position: 100% 0; } 70% { clip-path: inset(0 0 0 0); background-position: 0% 0; } 100% { clip-path: inset(0 0 0 0); background-position: -60% 0; } }
@keyframes logo-ink { 0% { background-position: 160% 0; } 35%, 100% { background-position: -60% 0; } }
.ticon[data-anim='ink'] > .mono { --a-name: logo-ink; --a-ease: ease-in-out; --a-sm: 1.8s; background: var(--ink) linear-gradient(90deg, transparent 38%, var(--c) 50%, transparent 62%) no-repeat -60% 0 / 200% 100%; }
.ticon-xl[data-anim='ink'] > .mono { animation: logo-ink-write 1.4s cubic-bezier(.45, 0, .25, 1) .2s backwards, logo-ink 5s ease-in-out 3s infinite; }

@media (prefers-reduced-motion: reduce) { .ticon[data-anim], .ticon[data-anim] > *, .ticon[data-anim]::after { animation: none !important; } }

/* ── version board: a ruled two-column table ── */
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.vcard { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 130px) 64px 88px; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.vcard:hover strong { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.vcard-name { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; line-height: 1.3; }
.vcard-name strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vcard-name small { flex-basis: 100%; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fresh { font: 500 11px var(--mono); color: var(--accent-ink); }
.trend { font: 11px var(--mono); color: var(--ink-3); white-space: nowrap; }
.vcard-ver { min-width: 0; }
.vcard-ver code { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard-upd { font-size: 12.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.vcard-meta { display: flex; flex-direction: column; align-items: flex-end; font: 12px/1.35 var(--mono); color: var(--ink-2); white-space: nowrap; }
.vcard-meta small { font-size: 11.5px; color: var(--ink-3); }
.vcard .spark { width: 88px; height: 21px; }
.spark { display: block; overflow: visible; }
.spark .bar { fill: var(--ink-2); transition: fill .15s; }
.spark .bar.zero { fill: var(--line-2); }
.spark .bar.none { fill: var(--line); }
.spark g:hover .bar.none { fill: var(--line-2); }
.spark .hit { fill: transparent; }
.spark g:hover .bar { fill: var(--accent); }

/* ── feed ─────────────────────────────── */
.feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.day { display: flex; align-items: baseline; gap: 12px; margin: 28px 0 0; position: sticky; top: calc(var(--navh) - 12px); z-index: 2; padding: 10px 0 8px; background: var(--bg); border-bottom: 1px solid var(--line-2); font-weight: 400; }
.day:first-child { margin-top: 0; }
.day span { font: 600 15px var(--font); letter-spacing: -.01em; color: var(--ink); }
.day i { flex: 1; }
.day small { font: 12px var(--mono); color: var(--ink-3); }
.fcard { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.fcard.is-new { animation: fresh-in 4s ease-out; }
@keyframes fresh-in { from { background: color-mix(in srgb, var(--accent) 18%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .fcard.is-new { animation: none; } }
.fcard-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-3); }
.fcard-tool { font-weight: 600; color: var(--ink); }
.fcard-tool:hover { text-decoration: underline; text-underline-offset: 3px; }
.kind { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.kind-release { color: var(--k-release); }
.kind-changelog { color: var(--k-changelog); }
.kind-blog { color: var(--k-blog); }
.ver { font-size: 12.5px; color: var(--ink-2); }
.fcard-time { margin-left: auto; font: 12px var(--mono); }
.fcard-title { font-size: 16.5px; font-weight: 600; line-height: 1.35; margin: 4px 0 3px; text-wrap: pretty; }
.fcard-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.fcard-sum { margin: 0; color: var(--ink-2); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.feed-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0 0; }
.empty { color: var(--ink-3); text-align: center; padding: 30px 0; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r); background: var(--ink); color: var(--bg); border: 1px solid var(--ink); font-weight: 500; font-size: 14px; }
.btn:hover { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--ink); }

/* full notes */
.notes { margin-top: 10px; }
.notes summary { cursor: pointer; font: 12.5px var(--mono); color: var(--ink-2); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.notes summary:hover { color: var(--ink); }
.notes summary::before { content: '+'; color: var(--accent-ink); }
.notes[open] summary::before { content: '−'; }
.notes summary::-webkit-details-marker { display: none; }
.prose { margin-top: 12px; padding: 2px 0 2px 16px; border-left: 1px solid var(--line-2); color: var(--ink-2); font-size: 14.5px; overflow-wrap: anywhere; }
.prose h4, .prose h5 { color: var(--ink); margin: 18px 0 6px; font-size: 15px; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.prose code { font-size: 12.5px; background: var(--card-2); padding: 1px 4px; border-radius: var(--r); }
.prose pre { background: var(--card); border: 1px solid var(--line); padding: 12px; border-radius: var(--r); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin: 3px 0; }
.prose img { border: 1px solid var(--line); margin: 8px 0; }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--line); padding: 4px 8px; }

/* ── sidebar ──────────────────────────── */
.side { position: sticky; top: calc(var(--navh) + 8px); display: flex; flex-direction: column; gap: 36px; }
.side-card { border-top: 2px solid var(--rule); padding-top: 12px; }
.side-card h2 { font-size: 23px; margin-bottom: 4px; }
.hn { list-style: none; margin: 12px 0 0; padding: 0; }
.hn li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); }
.hn-rank { font: 500 12px/1.6 var(--mono); color: var(--ink-3); }
.hn-title { font-size: 14px; font-weight: 500; line-height: 1.4; display: block; }
.hn-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.hn-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font: 11.5px var(--mono); color: var(--ink-3); }
.hn-meta .pts { color: var(--hn); }
.hn-meta a:hover { color: var(--ink); }
.similar { list-style: none; margin: 12px 0 0; padding: 0; }
.similar a { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.similar a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.similar code { margin-left: auto; font-size: 12px; color: var(--ink-3); }

/* ── tool page ────────────────────────── */
.tool-hero { padding: 28px 0 0; }
.crumbs { display: flex; gap: 8px; font: 12px var(--mono); color: var(--ink-3); margin-bottom: 28px; }
.crumbs a:hover { color: var(--ink); }
.tool-head { display: flex; gap: 24px; align-items: flex-start; }
.tool-head h1 { margin: 4px 0 12px; font-size: clamp(36px, 5.4vw, 60px); max-width: none; }
.tool-head h1 em { color: var(--ink-2); }
/* Detail titles: letters are already laid out (just hidden), so only the caret travels. */
.typed .ch { visibility: hidden; }
.typed .ch.on { visibility: visible; }
.typed .caret { display: inline-block; width: 0; height: .82em; margin-right: -.14em; border-right: .14em solid var(--accent); vertical-align: -.06em; }
.typed .caret.idle { animation: sig-blink 1s steps(1) infinite; }
.typed .caret.gone { opacity: 0; transition: opacity .4s; animation: none; }
.tool-links { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.tool-stats { margin: 40px 0 0; }
.tool-spark { padding: 16px 0; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; }
.tool-spark .spark { width: 100%; height: 56px; }
.tool-feed .section-head { margin-bottom: 0; }

/* ── footer ───────────────────────────── */
.foot { margin-top: 96px; border-top: 2px solid var(--rule); padding: 32px 0 56px; }
.foot .brand { font-size: 20px; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; font-size: 14px; color: var(--ink-2); }
.foot-in p { margin: 10px 0 0; max-width: 60ch; }
.foot-meta { text-align: right; }
.foot-meta p { margin-left: auto; }
.foot-meta a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.foot-in p.credit { color: var(--ink); }
.foot-in p.credit a { font-weight: 500; }

/* ── responsive ───────────────────────── */
@media (max-width: 1040px) {
  .vgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .feed-layout { grid-template-columns: 1fr; }
  .side { position: static; }
  .nav-toggle { display: grid; width: 44px; height: 44px; }
  #theme { width: 44px; height: 44px; }
  .nav { padding: 8px 10px 0; }
  .nav-in { padding: 0 4px 0 16px; gap: 8px; }
  .nav-links { display: none; }
  .nav.open .nav-links {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 20px; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 22px;
    background: var(--bg); border: 1px solid var(--line-2); border-radius: 14px;
    box-shadow: 0 24px 40px -18px rgba(0,0,0,.45); animation: menuIn .35s var(--ease);
  }
  .nav.open .nav-glide { display: none; }
  .nav.open .nav-cat { pointer-events: none; padding: 0 0 8px; color: var(--ink-3); font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
  .nav.open .nav-cat::before, .nav.open .nav-cat svg { display: none; }
  .nav.open .nav-menu { position: static; opacity: 1; visibility: visible; translate: none; scale: none; width: auto; min-width: 0; padding: 0; border: 0; border-top: 2px solid var(--rule); border-radius: 0; box-shadow: none; background: none; }
  .nav.open .nav-menu::before, .nav.open .nav-hint { display: none; }
  .nav.open .nav-menu a {
    padding: 12px 2px; border-radius: 0; border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(8px); animation: itemIn .45s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 50ms + 60ms);
  }
  .nav.open .nav-menu a b { font-size: 20px; letter-spacing: -.02em; }
  .nav.open .nav-menu a[aria-current] b { color: var(--accent-ink); }
  .nav.open .nav-menu a[aria-current]::before { display: none; }
  @keyframes menuIn { from { clip-path: inset(0 0 100% 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }
  @keyframes itemIn { to { opacity: 1; transform: none; } }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
  .hero-stats > div:nth-child(2) { border-top: 0; }
}
@media (max-width: 640px) {
  .hero-grid { padding-top: 32px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats.stats-5 { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stats dd { font-size: 22px; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats > div:nth-child(2) { border-top: 1px solid var(--line); }
  .section { padding-top: 48px; }
  .vcard { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: 'i n m' 'i v m'; row-gap: 2px; }
  .vcard > .ticon { grid-area: i; align-self: start; margin-top: 2px; }
  .vcard-name { grid-area: n; }
  .vcard-ver { grid-area: v; }
  .vcard-meta { grid-area: m; align-self: start; }
  .vcard .spark { display: none; }
  .fcard-time { margin-left: 0; }
  .tool-head { flex-direction: column; gap: 18px; }
  .foot-in { grid-template-columns: 1fr; }
  .foot-meta { text-align: left; }
  .hero-search kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

.eyebrow .trend { color: inherit; }
.section-note { max-width: 46ch; margin: 0; }
.more-link { margin-top: 20px; text-align: center; }

/* "New updates shipped" toast */
.live-toast { position: fixed; z-index: 50; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(540px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 8px 24px rgb(0 0 0 / .25); animation: toast-in .25s ease-out; }
.live-toast p { margin: 0; flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-toast .btn { padding: 5px 12px; }
.live-toast .x { border: 0; background: none; color: var(--ink-3); font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ── important news: newspaper columns ── */
.ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.ncard { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; background: var(--bg); }
.ncard-lead { grid-column: span 2; padding: 24px 28px 26px 22px; }
.ncard-meta { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ink-3); }
.ntag { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--nt); }
.nmajor { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); }
.ncard-title { font: 600 17px/1.35 var(--font); letter-spacing: -.015em; margin: 0; text-wrap: pretty; overflow-wrap: anywhere; }
.ncard-lead .ncard-title { font: 400 clamp(26px, 3vw, 38px)/1.1 var(--serif); letter-spacing: -.01em; }
.ncard-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ncard-sum { margin: 0; color: var(--ink-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ncard-lead.tall { grid-row: span 2; }
.ncard-lead .ncard-sum { font-size: 16px; -webkit-line-clamp: 6; }
.ncard-img { display: block; margin-top: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--line); }
.ncard-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ncard-img:hover img { transform: scale(1.02); }
.ncard-lead .ncard-img { margin-top: 10px; flex: 1 1 0; min-height: 220px; aspect-ratio: auto; }
.ncard-lead .ncard-img img { object-fit: contain; }
.ncard-img + .ncard-foot { margin-top: 6px; }
.ngrid.filtered .ncard-lead .ncard-img { flex: none; min-height: 0; aspect-ratio: 16 / 9; margin-top: auto; }
.ncard-foot { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 12px var(--mono); color: var(--ink-3); }
.ntool { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.ntool:hover { color: var(--ink); }
.ntool .ticon-sm { width: 18px; height: 18px; font-size: 10px; }
.srcs { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-left: auto; }
.src { color: var(--ink-3); }
.src:hover { color: var(--ink); }
.src-hn { color: var(--hn); }
.src-x::before { content: '𝕏 '; color: var(--ink); }
.ncard { --nt: var(--ink-2); }
.ncard[data-tag='security'], .ncard[data-tag='outage'] { --nt: #e5736b; }
.ncard[data-tag='model'] { --nt: var(--k-blog); }
.ncard[data-tag='launch'] { --nt: var(--k-release); }
.ncard[data-tag='pricing'] { --nt: #d6b25e; }
.ncard[data-tag='business'] { --nt: var(--k-changelog); }
.ncard[data-tag='deprecation'] { --nt: #e08a52; }
.ncard[data-tag='policy'] { --nt: #6fb5a8; }
.ncard[data-tag='community'] { --nt: var(--hn); }
[data-theme='light'] .ncard[data-tag='security'], [data-theme='light'] .ncard[data-tag='outage'] { --nt: #a3221a; }
[data-theme='light'] .ncard[data-tag='pricing'] { --nt: #8a6410; }
[data-theme='light'] .ncard[data-tag='deprecation'] { --nt: #a84a10; }
[data-theme='light'] .ncard[data-tag='policy'] { --nt: #1f6b5e; }
/* Dropdowns (every <select>, see app.js): a quiet button that opens a menu drawn like the masthead's. */
.dd { position: relative; display: inline-block; min-width: 0; }
.dd-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-width: 0; padding: 7px 11px 7px 12px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); color: var(--ink); font: 500 13px/1.2 var(--mono); white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .2s;
}
.dd-btn span { overflow: hidden; text-overflow: ellipsis; }
.dd-btn svg { flex: none; opacity: .55; transition: rotate .3s var(--ease), opacity .2s; }
.dd-btn:hover, .dd.open .dd-btn { background: var(--bg-2); }
.dd-btn:hover svg { opacity: 1; }
.dd.open .dd-btn { box-shadow: inset 0 -2px 0 var(--accent); }
.dd.open .dd-btn svg { rotate: 180deg; opacity: 1; }
.dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; display: grid; gap: 1px; width: max-content; min-width: max(100%, 200px); max-width: min(340px, calc(100vw - 32px));
  max-height: min(360px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding: 8px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 24px 48px -18px rgb(0 0 0 / .5);
  opacity: 0; visibility: hidden; translate: 0 -6px; scale: .98; transform-origin: 20px 0;
  transition: opacity .14s, translate .3s var(--ease), scale .3s var(--ease), visibility 0s .14s;
}
.dd-end .dd-menu { left: auto; right: 0; transform-origin: calc(100% - 20px) 0; }
.dd-up .dd-menu { top: auto; bottom: calc(100% + 8px); translate: 0 6px; transform-origin: 20px 100%; }
.dd.open .dd-menu { opacity: 1; visibility: visible; translate: 0; scale: 1; transition-delay: 0s; }
.dd-menu .nav-hint { margin: 8px 12px 6px; }
.dd-menu .nav-hint:first-child { margin-top: 2px; }
.dd-menu [role='option'] {
  position: relative; display: block; width: 100%; padding: 9px 12px 9px 14px; border: 0; border-radius: 8px; background: none;
  color: var(--ink); font: 600 14px/1.2 var(--font); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background .15s, color .15s;
}
.dd-menu [role='option']:hover, .dd-menu [role='option']:focus-visible { background: var(--bg-2); color: var(--accent-ink); outline: none; }
.dd-menu [aria-selected='true'] { color: var(--accent-ink); }
.dd-menu [aria-selected='true']::before { content: ''; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .dd-btn svg, .dd-menu { transition: none; } }
.nfilters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.nchips small { font: 11px var(--mono); color: var(--ink-3); }
.ngrid.filtered .ncard-lead { grid-column: auto; grid-row: auto; padding: 20px 22px 22px; }
.ngrid.filtered .ncard-lead .ncard-title { font: 600 17px/1.35 var(--font); letter-spacing: -.015em; }
.ngrid.filtered .ncard-lead .ncard-sum { font-size: 14px; -webkit-line-clamp: 3; }
.ncard[hidden] { display: none; }
/* feed view: one column of social-style posts */
.ncard-by { display: none; }
.nrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
#nq { padding: 6px 10px; width: 180px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); color: var(--ink); font: 13px var(--font); }
.nmajor-pick { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--mono); color: var(--ink-2); cursor: pointer; }
.nview { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.nview button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; background: none; color: var(--ink-3); font: 500 13px var(--mono); cursor: pointer; }
.nview button + button { border-left: 1px solid var(--line-2); }
.nview button:hover { color: var(--ink); }
.nview button[aria-pressed='true'] { background: var(--card-2); color: var(--ink); }
.nfilters:has(+ .ngrid.feed) { max-width: 680px; margin-inline: auto; }
.nfilters:has(+ .ngrid.feed) .nrow { width: 100%; }
.nfilters:has(+ .ngrid.feed) #nq { flex: 1 1 160px; }
.ngrid.feed { display: flex; flex-direction: column; gap: 16px; max-width: 680px; margin-inline: auto; background: none; border: 0; }
.ngrid.feed .ncard, .ngrid.feed .ncard-lead { padding: 16px 18px 14px; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.ngrid.feed .ncard.major { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ngrid.feed .ncard-by { display: flex; align-items: center; gap: 10px; }
.ngrid.feed .ncard-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ngrid.feed .ncard-who b { font-size: 15px; color: var(--ink); }
.ngrid.feed .ncard-who a:hover b { text-decoration: underline; }
.ngrid.feed .ncard-who small { font-size: 12.5px; color: var(--ink-3); }
.ngrid.feed .ncard-meta .fcard-time { display: none; }
.ngrid.feed .ncard-title, .ngrid.feed .ncard-lead .ncard-title { font: 600 19px/1.35 var(--font); letter-spacing: -.015em; }
.ngrid.feed .ncard-sum, .ngrid.feed .ncard-lead .ncard-sum { font-size: 15px; -webkit-line-clamp: 5; }
.ngrid.feed .ncard-img, .ngrid.feed .ncard-lead .ncard-img { margin: 2px -18px 0; flex: none; min-height: 0; aspect-ratio: 16 / 9; border-radius: 0; }
.ngrid.feed .ncard-img img { object-fit: cover; }
.ngrid.feed .ncard-foot { padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 980px) { .ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ngrid { grid-template-columns: minmax(0, 1fr); }
  .ncard, .ncard-lead, .ncard-lead.tall { grid-column: auto; grid-row: auto; padding: 18px 0; }
  .ngrid.feed .ncard-img, .ngrid.feed .ncard-lead .ncard-img { margin-inline: -14px; }
  .ngrid.feed .ncard, .ngrid.feed .ncard-lead { padding: 14px 14px 12px; }
}

/* ── pricing compare ─────────────────────────────────────── */
.ptable-wrap { overflow-x: auto; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--line-2); }
.ptable { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 14px; }
.ptable thead th { position: sticky; top: 0; text-align: left; font: 500 12px var(--mono); color: var(--ink-3); padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line-2); background: var(--bg); }
.ptable thead small { font-weight: 400; }
.ptable tbody tr + tr > * { border-top: 1px solid var(--line); }
.ptable th[scope='row'], .ptable td { padding: 16px 16px 16px 0; vertical-align: top; text-align: left; }
.ptable tbody tr:hover { background: var(--bg-2); }
.ptool { display: flex; align-items: center; gap: 12px; min-width: 180px; }
.ptool strong { display: block; font-weight: 600; color: var(--ink); }
.ptool small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.ptool:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.pfree { display: flex; gap: 10px; align-items: flex-start; max-width: 260px; }
.pfree + .pfree { margin-top: 10px; }
.pfree strong { display: block; font-weight: 500; }
.pfree small, .pchip small { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.35; }
.pbadge { display: inline-block; flex: none; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: var(--r); border: 1px solid var(--line-2); color: var(--ink-3); white-space: nowrap; }
.pbadge.free { color: var(--k-release); border-color: color-mix(in srgb, var(--k-release) 45%, transparent); }
.pchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pchip { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); }
.pchip > span { font-size: 12.5px; color: var(--ink-2); }
.pchip b, .pfrom b { font: 500 15px var(--mono); color: var(--ink); }
.pchip b small, .pfrom small { font: 400 11.5px var(--mono); color: var(--ink-3); }
.pnote { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
.pfrom { white-space: nowrap; }
.pfrom a { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.ptable-wrap + .empty { margin-top: 16px; }
/* Compare controls */
.pctl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding: 14px 0; }
.pctl-budget, .pctl-seats { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-3); }
.pctl-budget > span { display: flex; flex-direction: column; min-width: 118px; }
.pctl output { font: 500 13px var(--mono); color: var(--ink); }
.pctl input[type='range'] { width: 200px; accent-color: var(--accent); }
.stepper { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); }
.stepper button { width: 30px; border: 0; background: none; color: var(--ink-2); font-size: 16px; }
.stepper button:hover { color: var(--ink); background: var(--bg-2); }
.stepper input { width: 52px; border: 0; border-inline: 1px solid var(--line-2); background: none; color: var(--ink); font: 500 13px var(--mono); text-align: center; padding: 6px 0; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pctl-hint { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; }
.pick-dot { width: 14px; height: 14px; border: 1.5px solid var(--ink-3); border-radius: 3px; }
.psort { border: 0; background: none; padding: 0; font: inherit; color: inherit; display: inline-flex; gap: 6px; }
.psort::after { content: '↕'; opacity: .45; }
.psort:hover { color: var(--ink); }
th[aria-sort='ascending'] .psort, th[aria-sort='descending'] .psort { color: var(--ink); }
th[aria-sort='ascending'] .psort::after { content: '↑'; opacity: 1; color: var(--accent); }
th[aria-sort='descending'] .psort::after { content: '↓'; opacity: 1; color: var(--accent); }
.ptool-cell { display: flex; align-items: center; gap: 12px; }
.pick { flex: none; width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--line-2); border-radius: 3px; background: none; display: grid; place-items: center; transition: border-color .15s, background .15s; }
.pick:hover:not(:disabled) { border-color: var(--ink); }
.pick[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); }
.pick[aria-pressed='true']::after { content: ''; width: 8px; height: 4px; border: solid var(--on-accent); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.pick:disabled { opacity: .35; cursor: not-allowed; }
.prow.picked { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pchip { transition: opacity .15s; }
.pchip.over { opacity: .35; }
.ptotal { font: 500 11.5px var(--mono); font-style: normal; color: var(--accent-ink); }
/* Comparison tray + dialog */
.ctray { position: fixed; inset: auto 0 0; z-index: 40; background: var(--bg); border-top: 2px solid var(--rule); box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); }
.ctray-in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 10px; }
.ctray-picks { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.ctray-pick { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line-2); border-radius: var(--r); background: none; color: var(--ink); font-size: 13px; }
.ctray-pick i { font-style: normal; color: var(--ink-3); }
.ctray-pick:hover { border-color: var(--ink); }
.ctray-pick:hover i { color: var(--accent); }
.ctray .btn:disabled { opacity: .4; cursor: not-allowed; }
body.has-tray .foot { padding-bottom: 90px; }
body.has-tray .live-toast { bottom: 84px; }
.cmp { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line-2); border-top: 2px solid var(--rule); border-radius: var(--r); background: var(--bg); color: var(--ink); }
.cmp::backdrop { background: rgba(0, 0, 0, .55); }
.cmp[open] { display: flex; flex-direction: column; animation: cmp-in .2s var(--ease); }
@keyframes cmp-in { from { opacity: 0; transform: translateY(8px); } }
.cmp-head { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cmp-head h2 { margin: 0; font-size: 20px; }
.cmp-sub { margin: 0; flex: 1; }
.cmp-x { font-size: 22px; align-self: center; }
.cmp-body { overflow: auto; }
.cmp-scroll { padding: 0 20px 20px; }
.cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: calc(120px + var(--n) * 200px); font-size: 14px; }
.cmp-table thead > tr > * { position: sticky; top: 0; background: var(--bg); padding: 16px 16px 12px 0; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; z-index: 1; }
.cmp-table thead td { width: 120px; }
.cmp-table tbody th { font: 500 12px var(--mono); color: var(--ink-3); text-align: left; vertical-align: top; padding: 14px 16px 14px 0; }
.cmp-table tbody td { vertical-align: top; padding: 14px 16px 14px 0; }
.cmp-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.cmp-table small { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.35; }
.cmp-table b small, .cmp-big small, .cmp-inline small, td > small:only-child { display: inline; }
.cmp-inline { color: var(--ink-2); font-family: var(--mono); font-size: 13px; }
.cmp-tool { display: flex; align-items: center; gap: 10px; }
.cmp-tool strong { display: block; }
.cmp-tool:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.cmp-rm { margin-top: 8px; border: 0; background: none; padding: 0; font-size: 12px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.cmp-rm:hover { color: var(--accent-ink); }
.cmp-big { display: block; font: 500 22px var(--mono); margin-bottom: 4px; }
.cmp-plans { list-style: none; margin: 0; padding: 0; }
.cmp-plans li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; }
.cmp-plans li + li { border-top: 1px dashed var(--line); }
.cmp-plans li.over { opacity: .4; }
.cmp-plans b { font: 500 13px var(--mono); white-space: nowrap; text-align: right; }
.cmp-plans b small { display: block; font: 400 11px var(--mono); }
.cmp-table td a:not(.cmp-tool) { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .pctl-hint { margin-left: 0; }
  .pctl input[type='range'] { width: 150px; }
  .ctray-in { flex-wrap: nowrap; gap: 8px; }
  .ctray-picks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ctray-pick { flex: none; white-space: nowrap; }
  .ctray-pick span, .ctray-n { display: none; }
  .ctray .btn { padding: 8px 12px; }
}
.ptable-wrap ~ .section-note { margin-top: 16px; max-width: 80ch; }
.oss-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 32px; }
.oss-list a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.oss-list a span:not(.pbadge) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oss-list a:hover span:not(.pbadge) { text-decoration: underline; text-underline-offset: 3px; }
.plans { list-style: none; padding: 0; margin: 12px 0; }
.plans li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.plans li strong { display: block; font-weight: 500; font-size: 14px; }
.plans li span { display: block; font-size: 12.5px; color: var(--ink-3); }
.plans li b { font: 500 14px var(--mono); white-space: nowrap; }
.plans li b small { font-weight: 400; color: var(--ink-3); }
.plans li b.free { color: var(--k-release); }
.plans li span.since, .pchip small.since, .pfree small.since { font: 11px var(--mono); color: var(--ink-3); }

/* ads */
.ad { border-top: 1px solid var(--line); padding-top: 8px; min-height: 120px; }
.ad-inline { margin: 28px 0; }
.ad-label { margin: 0 0 6px; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ad-ph { display: grid; place-items: center; height: 250px; border: 1px dashed var(--line-2); font: 12px var(--mono); color: var(--ink-3); }
.ad-inline .ad-ph { height: 90px; }

/* ad blocker wall */
.adwalled, .adwalled body { overflow: hidden; }
.adwalled body > :not(.adwall) { display: none !important; }
.adwall { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.adwall-box { max-width: 440px; border-top: 2px solid var(--rule); padding-top: 18px; }
.adwall .eyebrow { margin: 0 0 8px; font: 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.adwall h2 { margin: 0 0 10px; font: 400 34px/1.1 var(--serif); }
.adwall p { color: var(--ink-2); }
.adwall .btn { margin-top: 8px; }
.tick .ticon-sm { width: 18px; height: 18px; font-size: 10px; flex: none; }

/* Models */
.mcard { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 72px; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.mcard:hover strong { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.mcard-price { display: flex; flex-direction: column; align-items: flex-end; font: 13px/1.35 var(--mono); color: var(--ink); white-space: nowrap; }
.mcard-price small, .mtable .mnum > small { display: block; font: 11.5px var(--mono); color: var(--ink-3); }
.mtable { min-width: 760px; }
.mtable th[scope='row'] { width: 52%; }
.mnum { font: 13.5px/1.4 var(--mono); white-space: nowrap; }
.msum { margin: 8px 0 0 40px; font-weight: 400; font-size: 13px; line-height: 1.45; color: var(--ink-2); max-width: 70ch; }
.mtags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 40px; }
.mtags:empty { display: none; }
.ptool small code { font-size: 11.5px; }
.mtable .msum, .mtable .mtags { margin-left: 70px; }
.mbench { display: inline-flex; flex-direction: column; gap: 5px; min-width: 64px; }
.mbench i { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--w), var(--line) var(--w)); }
.pctl-bench, .pctl-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-3); }
.pctl-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.pctl-check i { font: normal 12px var(--mono); color: var(--ink-3); }
/* Benchmark showdown: benchmarks as rows, models as columns, one highlighted column */
.sd-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 4px 0 16px; }
.sd-add { flex: 1 1 280px; max-width: 420px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink-3); }
.sd-add:focus-within { border-color: var(--ink); color: var(--ink); }
.sd-add input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 14px var(--font); padding: 10px 0; outline: none; }
.sd-reset { margin-left: auto; }
.sd-sets { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; padding-bottom: 14px; }
.sd-sets .chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.sd-sets .chip { padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); }
.sd-sets .chip:hover { border-color: var(--ink); color: var(--ink); }
.sd-sets .chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sd-pick { position: relative; }
.sd-pick summary { list-style: none; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.sd-pick summary::-webkit-details-marker { display: none; }
.sd-pick summary::after { content: '▾'; font-size: 11px; }
.sd-pick[open] summary::after { content: '▴'; }
.sd-pick-n { font: normal 11.5px var(--mono); color: var(--ink-3); }
.sd-pick-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(720px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 20px; background: var(--bg); border: 1px solid var(--line-2); border-top: 2px solid var(--rule); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
.sd-pick fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.sd-pick legend { padding: 0 0 6px; font: 500 11.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.sd-pick label { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; cursor: pointer; }
.sd-pick label:hover span { text-decoration: underline; text-underline-offset: 3px; }
.sd-pick input { accent-color: var(--accent); margin: 0; flex: none; }
.sd-pick label span { flex: 1; min-width: 0; }
.sd-pick label i { font: normal 11.5px var(--mono); color: var(--ink-3); }
.sd-pick-body > p { grid-column: 1 / -1; margin: 0; }
.sd-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; }
.sd-idea { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px dashed var(--line-2); border-radius: var(--r); background: none; color: var(--ink); font-size: 13px; }
.sd-idea:hover:not(:disabled) { border-style: solid; border-color: var(--accent); }
.sd-idea:disabled { opacity: .45; cursor: not-allowed; }
.sd-idea i { font: normal 11.5px var(--mono); color: var(--ink-3); }
.sd-idea .ticon { width: 22px; height: 22px; }
.sd-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card, var(--bg)); }
.sd { width: 100%; border-collapse: separate; border-spacing: 0; min-width: calc(250px + var(--n, 1) * 140px); font-size: 14px; }
.sd th, .sd td { padding: 14px 16px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line); }
.sd tbody tr:last-child > * { border-bottom: 0; }
.sd th[scope='row'], .sd-corner { position: sticky; left: 0; z-index: 2; background: var(--card, var(--bg)); text-align: left; width: 250px; min-width: 190px; border-right: 1px solid var(--line); }
.sd-corner { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); vertical-align: bottom; }
.sd thead th { border-bottom: 1px solid var(--line-2); vertical-align: bottom; padding-top: 18px; padding-bottom: 16px; }
.sd-m { position: relative; min-width: 130px; }
.sd-m::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); opacity: .85; }
.sd-focus { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 0; background: none; color: var(--ink); font: inherit; line-height: 1.2; cursor: pointer; }
.sd-focus .ticon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; transition: transform .15s; }
.sd-focus:hover .ticon { transform: translateY(-2px); }
.sd-focus strong { font-size: 14.5px; font-weight: 600; }
.sd-focus small { font: 11px var(--mono); letter-spacing: .03em; color: var(--ink-3); }
.sd-focus:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.sd-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--ink-3); font-size: 15px; line-height: 1; opacity: 0; transition: opacity .15s; cursor: pointer; }
.sd-m:hover .sd-x, .sd-x:focus-visible { opacity: 1; }
.sd-x:hover { color: var(--accent-ink); background: var(--bg-2); border-color: var(--line-2); }
@media (hover: none) { .sd-x { opacity: .7; } }
.sd-rank { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.sd-label { font-weight: 600; font-size: 14px; }
.sd-rank small, .sd-spec small { font-size: 12px; font-weight: 400; color: var(--ink-3); line-height: 1.4; }
.sd-rank small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-rank::after { content: 'Rank ↓'; position: absolute; top: 1px; right: 0; padding-left: 6px; background: inherit; font: 10.5px var(--mono); color: var(--ink-3); opacity: 0; transition: opacity .15s; }
.sd-rank:hover::after { opacity: 1; }
.sd-rank[aria-pressed='true']::after { content: 'Ranked ↓'; opacity: 1; color: var(--accent-ink); }
.sd tr.ranked > * { background: var(--bg-2); }
.sd tbody tr:hover > * { background: var(--bg-2); }
.sd td { font: 15px/1.3 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sd td .sd-v { display: inline-block; padding: 2px 8px; border-radius: 6px; }
.sd td i { display: block; height: 5px; margin: 9px auto 0; max-width: 104px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.sd td i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: color-mix(in srgb, var(--ink-3) 70%, transparent); }
.sd td.best { color: var(--ink); font-weight: 700; }
.sd td.best .sd-v { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); }
.sd td.best .sd-v::before { content: '★ '; font-size: .8em; }
.sd td.best i::after { background: var(--accent); }
.sd-na { color: var(--ink-3) !important; opacity: .7; }
.sd-d { display: block; margin-top: 3px; font: 11.5px var(--mono); color: var(--ink-3); }
.sd-d.up { color: var(--k-release); }
.sd-d.down { color: var(--accent-ink); }
.sd-spec td { font-size: 13.5px; padding-top: 12px; padding-bottom: 12px; }
.sd-spec small { display: block; margin-top: 2px; }
.sd-spec .pbadge { margin: 6px auto 0; display: table; }
.sd-wins { font-size: 18px; color: var(--ink); }
.sd-spec > * { background: color-mix(in srgb, var(--bg-2) 45%, var(--card, var(--bg))); }
.sd-spec th[scope='row'] { background: color-mix(in srgb, var(--bg-2) 45%, var(--card, var(--bg))); }
.sd tbody tr.sd-spec:first-of-type > *, .sd tr:not(.sd-spec) + .sd-spec > * { border-top: 1px solid var(--line-2); }
.sd-unscored > * { padding-top: 10px !important; padding-bottom: 10px !important; }
.sd-unscored .sd-label { font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.sd-unscored small { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sd-nochip { padding: 2px 8px; border: 1px dashed var(--line-2); border-radius: 999px; font-size: 11.5px; color: var(--ink-3); cursor: help; }
/* Highlighted column: soft tint, outlined like a card */
.sd .hl { background: color-mix(in srgb, var(--accent) 6%, var(--card, var(--bg))) !important; box-shadow: inset 1.5px 0 var(--accent), inset -1.5px 0 var(--accent); }
.sd thead .hl { background: color-mix(in srgb, var(--accent) 10%, var(--card, var(--bg))) !important; }
.sd thead .hl::before { left: 0; right: 0; height: 4px; border-radius: 0; background: var(--accent); opacity: 1; }
.sd tbody tr:last-child .hl { box-shadow: inset 1.5px 0 var(--accent), inset -1.5px 0 var(--accent), inset 0 -1.5px var(--accent); }
.sd .hl.best, .sd .hl { color: var(--ink); }
/* Control row toggles read as pills, not bare checkboxes */
.sd-ctl .pctl-check { padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.sd-ctl .pctl-check:hover { border-color: var(--ink-3); }
.sd-ctl .pctl-check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
.sd-ctl .pctl-check input { width: 14px; height: 14px; }
.sd-empty { padding: 40px 16px !important; color: var(--ink-3); font: 14px var(--font) !important; }
.sd-foot { margin: 12px 0 0; }
@media (max-width: 640px) {
  .sd th[scope='row'], .sd-corner { width: 140px; min-width: 140px; }
  .sd-wrap { border-radius: 10px; }
  .sd-rank small { display: none; }
  .sd th, .sd td { padding: 10px 8px; }
  .sd { min-width: calc(140px + var(--n, 1) * 108px); }
  .sd-m { min-width: 100px; }
  .sd-reset { margin-left: 0; }
  .sd-sets .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex-basis: 100%; }
  .sd-pick-body { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-height: 75vh; }
}
@media (max-width: 640px) {
  .mcard { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: 'i n m' 'i p m'; row-gap: 2px; }
  .mcard > .ticon { grid-area: i; align-self: start; margin-top: 2px; }
  .mcard .vcard-name { grid-area: n; }
  .mcard-price { grid-area: p; align-items: flex-start; }
  .mcard .vcard-meta { grid-area: m; align-self: start; }
  .msum, .mtags, .mtable .msum, .mtable .mtags { margin-left: 0; }
}

/* ── model & lab detail pages ───────────────────────────── */
.ptool-name:hover strong, .lab-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ptool small .lab-link { color: inherit; }
.eyebrow .lab-link { color: inherit; }
.tool-head .lede + .mtags-hero { margin: 14px 0 16px; }
.dtable { min-width: 640px; }
.dtable th small, .dtable td small { display: block; margin-top: 3px; font: 11.5px var(--mono); color: var(--ink-3); font-weight: 400; }
.dtable th[scope='row'] small { max-width: 52ch; font-family: var(--font); font-size: 12.5px; line-height: 1.4; }
.dtable a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dtable .mtags { margin-left: 40px; }
.dsub { margin-top: 44px; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin: 0; border-top: 2px solid var(--rule); }
.specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.specs dt { color: var(--ink-3); font: 12.5px var(--mono); }
.specs dd { margin: 0; text-align: right; }
.specs dd a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.side-more { margin: 10px 0 0; font: 12.5px var(--mono); }
.side-more a:hover { color: var(--accent-ink); }
.strengths { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; }
.strengths li { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line-2)); border-radius: 999px; font-size: 13px; background: color-mix(in srgb, var(--c) 9%, transparent); }
.strengths b { font: 600 11.5px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--accent-ink); }
.vchart { margin: 0; }
.vchart figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.vchart figcaption a { text-decoration: underline; text-underline-offset: 3px; }
.vchart svg, .ltl { display: block; width: 100%; height: auto; overflow: visible; }
.vchart .grid line, .ltl .grid line { stroke: var(--line); }
.vchart text, .ltl text { font: 11px var(--mono); fill: var(--ink-3); }
.ltl .axis { stroke: var(--line-2); }
.vchart .frontier { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .7; }
.pt { fill: var(--ink-3); opacity: .45; stroke: var(--bg); stroke-width: 1.5; transition: opacity .15s, r .15s; }
.pt.kin { fill: var(--c); opacity: .85; }
.pt.retired { fill: var(--bg); stroke: var(--c); stroke-width: 1.5; opacity: .7; }
.pt.me { fill: var(--ink); opacity: 1; stroke: var(--accent); stroke-width: 3; }
a:hover > .pt { opacity: 1; r: 7; }
.vchart .me-label { font: 600 12px var(--font); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.vchart-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; }
.vchart-key .k { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); opacity: .5; margin-right: -6px; }
.vchart-key .k-me { background: var(--ink); box-shadow: 0 0 0 2px var(--accent); opacity: 1; }
.vchart-key .k-kin { background: var(--c); opacity: .85; }
.vchart-key .k-front { border-radius: 0; height: 0; border-top: 2px dashed var(--accent); width: 14px; background: none; opacity: .8; }
.side-card .ltl { margin-top: 10px; }
.lab-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 32px; margin: 0; padding: 0; }
.lab-grid a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.lab-grid a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.lab-grid small { margin-left: auto; font: 12px var(--mono); color: var(--ink-3); }
.co-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.co-grid span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-grid small { flex: none; white-space: nowrap; }
.side-card .co-grid { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .specs { grid-template-columns: 1fr; }
  .dtable .mtags { margin-left: 0; }
}
.feed-layout > * { min-width: 0; }
/* price vs. performance: lab logos + zoom */
.vzoom { position: relative; }
.vzoom svg { touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; }
.vzoom.zoomed svg { touch-action: none; cursor: grab; }
.vzoom.zoomed svg:active { cursor: grabbing; }
.vzoom-ctl { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; }
.vzoom-ctl .icon-btn { width: 30px; height: 30px; font: 600 16px/1 var(--font); background: var(--bg); border: 1px solid var(--line-2); }
.vzoom-ctl [data-zoom='reset'] { visibility: hidden; }
.vzoom.zoomed .vzoom-ctl [data-zoom='reset'] { visibility: visible; }
.vzoom-hint { display: none; }
.vchart:has(.vzoom-ctl:not([hidden])) .vzoom-hint { display: inline; }
.vchart .frontier { vector-effect: non-scaling-stroke; }
.vpt circle { fill: var(--bg); stroke: var(--line-2); stroke-width: 1; }
.vpt .logo, .vpt .mono-letter { opacity: .5; transition: opacity .15s; }
.vpt .mono-letter { font: 600 10px var(--font); fill: var(--ink-2); }
[data-theme='dark'] .vpt .logo-mono { filter: invert(.92); }
.vpt.kin circle { stroke: var(--c); stroke-width: 1.5; }
.vpt.kin use { opacity: 1; }
.vpt.me circle { stroke: var(--accent); stroke-width: 2; }
.vpt.me use { opacity: 1; }
.vpt:hover use, .vpt:focus-visible use, .vpt:hover .mono-letter { opacity: 1; }
.vpt:hover circle { stroke: var(--ink); }
.vchart-key .k-me { background: var(--bg); box-shadow: 0 0 0 2px var(--accent); }
.vchart-key .k-kin { background: var(--bg); box-shadow: 0 0 0 1.5px var(--c); opacity: 1; }
.vchart-key .k:not(.k-me):not(.k-kin):not(.k-front) { background: var(--bg); box-shadow: 0 0 0 1px var(--line-2); opacity: 1; }
[data-theme='dark'] .vpt.tone-dark circle { fill: #e6e3da; }
[data-theme='light'] .vpt.tone-light circle { fill: #1b1a17; }

/* ── leaderboard (Models page) ─────────── */
.lb-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; padding-top: 18px; }
.lb-nav { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.lb-nav button { display: flex; align-items: center; gap: 12px; padding: 7px 0; border: 0; background: none; color: var(--ink-3); font-size: 14.5px; text-align: left; }
.lb-nav button::before { content: ''; width: 9px; height: 9px; flex: none; background: currentColor; opacity: .7; }
.lb-nav button:hover { color: var(--ink-2); }
.lb-nav button[aria-selected='true'] { color: var(--ink); }
.lb-nav button[aria-selected='true']::before { background: var(--ink); opacity: 1; }
.lb-panel { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); padding: 22px 22px 8px; }
.lb-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 28px/1.1 var(--serif); letter-spacing: -.01em; }
.lb-sq { width: 16px; height: 16px; flex: none; background: var(--t, var(--accent)); }
.lb-head p { margin: 6px 0 0; }
.lb-head b { font-weight: 500; color: var(--ink-2); }
.lb-scroll { overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
.lb-chart {
  list-style: none; margin: 18px 0 0; padding: 0; min-width: calc(var(--n) * 40px);
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px;
  --plot: 220px;
  background: repeating-linear-gradient(to top, transparent 0 calc(var(--plot) / 4 - 1px), var(--line) calc(var(--plot) / 4 - 1px) calc(var(--plot) / 4)) top / 100% var(--plot) no-repeat;
}
.lb-chart a { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink); }
.lb-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; width: 100%; height: var(--plot); border-bottom: 1px solid var(--line-2); }
.lb-v { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font: 500 12px var(--mono); white-space: nowrap; color: var(--ink); }
.lb-bar { display: block; width: min(100%, 44px); height: calc(var(--h) * .86); background: var(--c); border-radius: 2px 2px 0 0; position: relative; animation: lb-grow .6s var(--ease) both; transition: filter .15s; }
.lb-chart a:hover .lb-bar, .lb-chart a:focus-visible .lb-bar { filter: brightness(1.15); }
.lb-chart a:hover .lb-name { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lb-chart .ticon-sm { width: 22px; height: 22px; font-size: 11px; }
.lb-name { display: block; height: 136px; max-width: 100%; font-size: 12px; line-height: 1.2; color: var(--ink-2); }
.lb-name { writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes lb-grow { from { height: 0; } }
@media (prefers-reduced-motion: reduce) { .lb-bar { animation: none; } }
@media (max-width: 820px) {
  .lb-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lb-nav { flex-direction: row; overflow-x: auto; gap: 18px; padding-bottom: 4px; scrollbar-width: none; }
  .lb-nav button { white-space: nowrap; }
  .lb-panel { padding: 16px 14px 6px; }
  .lb-head h3 { font-size: 24px; }
  .lb-chart { --plot: 180px; gap: 6px; }
}

/* Usage page (OpenCode Data) */
.oc-tabs .lb-panel { padding-bottom: 18px; }
.oc-rank { list-style: none; margin: 16px 0 0; padding: 0; }
.oc-rank li { display: grid; grid-template-columns: 26px minmax(150px, 1.1fr) minmax(80px, 2fr) 92px 52px; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.oc-n { font: 12px var(--mono); color: var(--ink-3); }
.oc-who { display: flex; flex-direction: column; min-width: 0; }
.oc-who a { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-who a:hover { text-decoration: underline; text-underline-offset: 3px; }
.oc-who small { font-size: 12px; color: var(--ink-3); }
.oc-bar { height: 10px; background: var(--line); border-radius: 2px; overflow: hidden; }
.oc-bar i { display: block; height: 100%; width: var(--w); background: var(--cc, var(--accent)); border-radius: 2px; animation: oc-grow .6s var(--ease) both; transform-origin: left; }
.oc-v { font: 500 14px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.oc-v small { color: var(--ink-3); font-size: 11px; }
.oc-chg { font: 12px var(--mono); text-align: right; }
.oc-up { color: var(--k-release); }
.oc-down { color: var(--accent-ink); }
.oc-new { color: var(--k-changelog); }
@keyframes oc-grow { from { transform: scaleX(0); } }
.oc-chart { margin: 16px 0 0; }
.oc-chart svg { display: block; width: 100%; height: auto; }
.oc-chart rect { transition: opacity .15s; }
.oc-chart svg:hover rect { opacity: .55; }
.oc-chart svg rect:hover { opacity: 1; }
.oc-gl { stroke: var(--line); stroke-width: 1; }
.oc-ax { fill: var(--ink-3); font: 11px var(--mono); }
.oc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.oc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.oc-legend i { width: 9px; height: 9px; flex: none; }
.oc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 18px; }
.oc-card h2 { margin-bottom: 4px; }
.oc-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.oc-table th { text-align: left; font: 11.5px var(--mono); color: var(--ink-3); font-weight: 400; padding: 0 8px 6px 0; border-bottom: 1px solid var(--line-2); }
.oc-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.oc-table td a:hover { text-decoration: underline; text-underline-offset: 3px; }
.oc-table b { font-weight: 600; }
.oc-hbars { list-style: none; margin: 12px 0 0; padding: 0; }
.oc-hbars li { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(60px, 1.2fr) 64px; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.oc-hl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-hl small { display: block; font-size: 11.5px; color: var(--ink-3); }
.oc-hb { height: 8px; background: var(--line); border-radius: 2px; overflow: hidden; }
.oc-hb i { display: block; height: 100%; width: var(--w); background: var(--accent); border-radius: 2px; animation: oc-grow .6s var(--ease) both; transform-origin: left; }
.oc-hv { font: 500 13px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.oc-geo { padding-top: 6px; columns: 2; column-gap: 32px; }
.oc-geo .oc-hbars li { break-inside: avoid; }
@media (prefers-reduced-motion: reduce) { .oc-bar i, .oc-hb i { animation: none; } }
@media (max-width: 760px) {
  .oc-grid { grid-template-columns: minmax(0, 1fr); }
  .oc-geo { columns: 1; }
  .oc-rank li { grid-template-columns: 22px minmax(0, 1fr) 70px 46px; gap: 8px; }
  .oc-rank .oc-bar { display: none; }
}
.oc-stats { margin-top: 18px; }

/* Model page: provider comparison */
.prov-lead { margin: 0 0 14px; color: var(--ink-2); }
.prov-table tbody tr.prov-best th strong { color: var(--k-release); }
.prov-table tbody tr.prov-best { background: color-mix(in srgb, var(--k-release) 6%, transparent); }

/* ── Learn page ───────────────────────────────────────── */
.lhero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 26px; }
.learn { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 56px; padding: 40px 0 120px; }
.ltoc { position: sticky; top: 84px; align-self: start; border-top: 2px solid var(--rule); padding-top: 12px; }
.ltoc ol { list-style: none; margin: 0; padding: 0; counter-reset: l; }
.ltoc li { counter-increment: l; border-bottom: 1px solid var(--line); }
.ltoc a { display: flex; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--ink-2); }
.ltoc a::before { content: counter(l, decimal-leading-zero); font: 12px var(--mono); color: var(--ink-3); padding-top: 2px; }
.ltoc a:hover { color: var(--ink); }
.lbody { max-width: 720px; min-width: 0; }
.lsec { padding: 0 0 48px; scroll-margin-top: 80px; }
.lhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 16px; padding: 12px 0 14px; margin-bottom: 18px; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--line); }
.lhead .eyebrow { grid-column: 1 / -1; margin: 0; }
.lhead h2 { margin: 0; font-size: clamp(24px, 3.4vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.lhead h2 em { font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--accent-ink); }
.lplay { padding: 6px 12px; font-size: 13px; cursor: pointer; }
.lhero-actions .lplay { padding: 9px 16px; font-size: 14px; }
.lplay[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lplay[aria-pressed='true'] span::after { content: ' — stop'; }
.lplay:disabled { opacity: .45; cursor: not-allowed; }
.lsec p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; text-wrap: pretty; }
.lsec p strong { color: var(--ink); font-weight: 600; }
.lsec a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.saying { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 2px; transition: background .2s; }
.lcallout { margin: 22px 0 6px; padding: 16px 18px 4px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); }
.lcallout .eyebrow { margin-bottom: 8px; }
.lcallout p { font-size: 15px; }
/* next-token figure */
.lfig { margin: 22px 0; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.lsec .lprompt { font: 17px var(--mono); color: var(--ink); margin-bottom: 14px; }
.lcaret { display: inline-block; width: 9px; height: 1.1em; margin-left: 6px; vertical-align: -3px; background: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lcaret, .lplayer .lp-now .eyebrow::before { animation: none; } }
.lprobs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.lprobs li { position: relative; display: flex; justify-content: space-between; padding: 6px 10px; font: 14px var(--mono); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lprobs li::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.lprobs li > * { position: relative; }
.lprobs li span { color: var(--ink-3); }
.lfig figcaption, .lmoe figcaption { margin: 0; }
/* tokenizer */
.ltok { margin: 22px 0; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.ltok label { display: block; margin-bottom: 8px; }
.ltok textarea { width: 100%; resize: vertical; background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; font: 14px/1.5 var(--mono); }
.ltok textarea:focus { outline: 0; border-color: var(--ink); }
.ltok-out { display: flex; flex-wrap: wrap; gap: 3px; margin: 12px 0 10px; font: 13.5px var(--mono); min-height: 26px; }
.tk { padding: 2px 4px; border-radius: 2px; white-space: pre; color: var(--ink); }
.tk0 { background: color-mix(in srgb, #ff6b35 26%, transparent); }
.tk1 { background: color-mix(in srgb, #7fa8d6 30%, transparent); }
.tk2 { background: color-mix(in srgb, #7fbf7f 30%, transparent); }
.tk3 { background: color-mix(in srgb, #b89bd1 32%, transparent); }
.tk4 { background: color-mix(in srgb, #d6c27f 32%, transparent); }
.lsec .ltok-stats { font-size: 14px; margin-bottom: 6px; }
/* cache bars */
.lbars { display: grid; gap: 8px; margin: 4px 0 14px; }
.lbars > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 72px; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-2); }
.lbars i { display: block; height: 14px; width: var(--w); background: var(--ink-3); border-radius: 2px; }
.lbars i.on { background: var(--accent); }
.lbars b { font: 500 14px var(--mono); color: var(--ink); text-align: right; }
/* mixture of experts */
.lmoe { margin: 22px 0; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.lmoe svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto 8px; font: 12px var(--mono); }
.lmoe text { fill: var(--ink); }
.lmoe .ms { font-size: 10px; fill: var(--ink-3); }
.lmoe .mt, .lmoe .mr { fill: var(--card-2); stroke: var(--line-2); }
.lmoe .mr { stroke: var(--accent); }
.lmoe .me { fill: var(--bg); stroke: var(--line-2); }
.lmoe .me.on { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent); }
.lmoe .me.on + text { fill: var(--ink); }
.lmoe .ml { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.lmoe .ml.on { stroke: var(--accent); stroke-width: 2; }
.lmoes { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 8px; }
.lmoes li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 120px; align-items: center; gap: 12px; font-size: 14px; }
.lmoes li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmoe-bar { height: 10px; background: var(--card-2); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.lmoe-bar i { display: block; height: 100%; width: var(--w); background: var(--accent); }
.lmoes b { font: 500 13px var(--mono); text-align: right; }
.lmoes b small { color: var(--ink-3); font-weight: 400; }
.lsec .lsrc { margin-top: 18px; font-size: 13px; }
/* read-aloud player */
.lplayer { position: fixed; inset: auto 0 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 2px solid var(--rule); }
.lplayer[hidden] { display: none; }
.lplayer-in { display: flex; align-items: center; gap: 10px 14px; padding: 10px 0; }
.lplayer .i-play { display: none; }
.lplayer[data-state='paused'] .i-play { display: block; }
.lplayer[data-state='paused'] .i-pause { display: none; }
.lp-now { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-now .eyebrow { margin: 0; }
.lp-now strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-opt { display: flex; flex-direction: column; }
.lp-opt .eyebrow { margin: 0 0 2px; }
.lplayer[data-state='playing'] .lp-now .eyebrow::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); animation: blink 1.2s steps(2) infinite; }
@media (max-width: 980px) {
  .learn { grid-template-columns: 1fr; gap: 8px; padding-top: 24px; }
  .ltoc { position: static; }
  .ltoc ol { display: flex; flex-wrap: wrap; gap: 0 16px; }
  .ltoc li { border: 0; }
}
@media (max-width: 640px) {
  .lhead { grid-template-columns: 1fr; }
  .lhead .lplay { justify-self: start; }
  .lbars > div { grid-template-columns: 96px minmax(0, 1fr) 60px; gap: 8px; }
  .lmoes li { grid-template-columns: minmax(0, 1fr) 96px; }
  .lmoe-bar { grid-column: 1 / -1; grid-row: 2; }
  .lp-voice { display: none; }
}

/* ── skills & MCP ────────────────────────────────────────── */
.eco-stats { margin-top: 28px; }
.echips { display: flex; gap: 2px 16px; flex-wrap: wrap; }
.echips .chip small { font: 11.5px var(--mono); color: var(--ink-3); }
.eco-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eco-search { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line-2); }
.eco-search:focus-within { border-color: var(--ink); }
.eco-search svg { position: absolute; left: 0; color: var(--ink-3); }
.eco-search input { width: 220px; max-width: 100%; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: 14px; padding: 6px 6px 6px 22px; }
.eco-search input::placeholder { color: var(--ink-3); }
.egrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); margin-top: 20px; }
.eco-layout .egrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eco-layout { margin-top: 0; }
.ecard { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 16px; background: var(--bg); min-width: 0; }
.ecard[hidden] { display: none; }
.ecard-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ecard-av { width: 32px; height: 32px; border-radius: var(--r); background: var(--card-2); }
.ecard-who { min-width: 0; line-height: 1.25; }
.ecard-who h3 { margin: 0; font: 600 15.5px/1.3 var(--font); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecard-who h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ecard-who small { display: block; font: 12px var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecard-kind { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ek, var(--ink-3)); white-space: nowrap; }
.ek-skill, .ek-server { --ek: var(--k-release); }
.ek-pack, .ek-infra { --ek: var(--k-changelog); }
.ek-directory { --ek: var(--k-blog); }
.ecard-sum { margin: 0; color: var(--ink-2); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ecard-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.ecard-fields button { padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--ink-3); font: 500 11px var(--mono); cursor: pointer; }
.ecard-fields button:hover { color: var(--ink); border-color: var(--ink-3); }
.ecard-fields button[aria-pressed='true'] { color: var(--ink); background: var(--card-2); border-color: var(--ink-3); }
.reg li[hidden] { display: none; }
.ecard-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 12px; font: 12px var(--mono); color: var(--ink-3); }
.ecard-foot span:first-child { color: var(--ink-2); }
.ecard-foot .trend { color: var(--accent-ink); }
.eco-note { margin-top: 18px; }
.reg { list-style: none; margin: 12px 0 0; padding: 0; }
.reg li { padding: 10px 0; border-top: 1px solid var(--line); }
.reg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.reg-top a, .reg-top strong { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-top a:hover { text-decoration: underline; text-underline-offset: 3px; }
.reg-top code { font-size: 11.5px; color: var(--ink-3); flex: none; }
.reg p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.reg-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font: 11.5px var(--mono); color: var(--ink-3); }
.reg-meta span:first-child { overflow-wrap: anywhere; }
@media (max-width: 1040px) { .egrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .eco-layout .egrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .egrid, .eco-layout .egrid { grid-template-columns: minmax(0, 1fr); }
  .ecard { padding: 16px 0; }
  .eco-tools, .eco-search, .eco-search input { width: 100%; }
}

/* loaders — only where the page actually waits on something */
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
.skel { background: linear-gradient(100deg, var(--card-2) 40%, color-mix(in srgb, var(--ink) 9%, var(--card-2)) 50%, var(--card-2) 60%) 0 0 / 200% 100%; animation: shimmer 1.3s linear infinite; }
img.skel { color: transparent; }
/* page-to-page progress bar */
.navbar-load { position: fixed; inset: 0 0 auto; z-index: 100; height: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); opacity: 0; }
.navbar-load.on { opacity: 1; transform: scaleX(.85); transition: transform 8s cubic-bezier(.1, .7, .2, 1), opacity .15s; }
/* read-aloud: speech engine warming up */
.lp-spin { display: none; width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.lplayer[data-state='loading'] .lp-spin { display: block; }
.lplayer[data-state='loading'] .i-pause, .lplayer[data-state='loading'] .i-play { display: none; }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
  .navbar-load.on { transition: opacity .15s; transform: scaleX(.6); }
  .lp-spin { animation-duration: 1.6s; }
}

/* ── Learn page: interactive demos ─────────────────────── */
.lw { margin: 26px 0 10px; background: var(--card); border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgb(0 0 0 / .45); }
.lw-top { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--card-2)), var(--card-2) 60%); }
.lw-tag { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 2px 7px; border-radius: 2px; }
.lw-label { font-size: 13.5px; font-weight: 500; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-body { padding: 18px; display: grid; gap: 14px; }
.lw-body > * { margin: 0; }
.lw-cap { padding: 10px 18px 12px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.lw-cap a { color: var(--ink-2); }
.lw .btn small { font: 11px var(--mono); color: var(--ink-3); margin-left: 4px; }
.lw-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.lw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; align-items: end; }
.lsec .lw-read, .lw-read { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.lw-read b, .lw-big b { color: var(--ink); font-weight: 600; font-family: var(--mono); }
.lsec .lw-big, .lw-big { font-size: 15px; color: var(--ink-2); margin: 0; }
.lw-big b { font-size: 24px; color: var(--accent-ink); margin-right: 2px; }
.lw-warn { color: var(--accent-ink); }
.lw-reset { margin-left: auto; }
/* sliders */
.lw-slider { display: grid; gap: 6px; flex: 1 1 200px; font-size: 13px; color: var(--ink-2); }
.lw-slider span { display: flex; justify-content: space-between; gap: 8px; }
.lw-slider b { font: 500 13px var(--mono); color: var(--ink); }
.lw input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
.lw input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line-2); }
.lw input[type='range']::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-2); }
.lw input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--accent); }
.lw input[type='range']::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--accent); }
.lw input[type='range']:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* segmented control */
.lw-seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; justify-self: start; }
.lw-seg button { border: 0; border-right: 1px solid var(--line-2); background: transparent; color: var(--ink-2); padding: 6px 12px; font: 13px var(--font); cursor: pointer; transition: background .15s, color .15s; }
.lw-seg button:last-child { border-right: 0; }
.lw-seg button:hover { color: var(--ink); background: var(--card-2); }
.lw-seg button[aria-checked='true'], .lw-seg button[aria-selected='true'] { background: var(--ink); color: var(--bg); }
.lw-seg-wrap { border: 0; gap: 6px; overflow: visible; }
.lw-seg-wrap button { border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 12px; }
.lw-seg-wrap button:last-child { border-right: 1px solid var(--line-2); }
.lw textarea { width: 100%; resize: vertical; background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; font: 14px/1.5 var(--mono); }
.lw textarea:focus { outline: 0; border-color: var(--ink); }
.lw .ltok-out { margin: 0; }
/* sampler */
.lw .lprompt { margin: 0; font-size: 16px; }
.lw-pick { color: var(--accent-ink); font-weight: 600; }
.lw-pick.pop { animation: lw-pop .45s var(--ease); }
@keyframes lw-pop { from { opacity: 0; transform: translateY(6px); } }
.lprobs li::before { transition: width .35s var(--ease); }
.lprobs li.now { border-color: var(--accent); }
.lprobs li.hit b { color: var(--accent-ink); }
.lw .lprobs { margin: 0; }
/* context window */
.lctx { display: flex; height: 34px; border: 1px solid var(--line-2); border-radius: 4px; background: repeating-linear-gradient(90deg, transparent 0 9.9%, var(--line) 9.9% 10%), var(--bg); overflow: hidden; }
.lctx i { width: var(--w); min-width: 2px; height: 100%; border-right: 1px solid var(--card); transition: width .35s var(--ease); }
.lctx i.new { animation: lw-in .4s var(--ease); }
@keyframes lw-in { from { filter: brightness(1.8); } }
.lctx.full { border-color: var(--accent); }
.c-sys, .k-sys::before { background: var(--ink-3); }
.c-file, .k-file::before { background: #7fa8d6; }
.c-chat, .k-chat::before { background: #7fbf7f; }
.c-log, .k-log::before { background: #d6b25e; }
.c-repo, .k-repo::before { background: var(--accent); }
.lw-key { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; font-size: 12.5px; color: var(--ink-3); }
.lw-key li::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
/* chat bubbles */
.lchat { display: grid; gap: 8px; }
.lchat-m { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.lchat-m .eyebrow { display: block; margin: 0 0 4px; }
.lsec .lchat-m p, .lchat-m pre { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.lchat-m pre { font: 13px/1.55 var(--mono); white-space: pre-wrap; min-height: 3.1em; }
.lchat-m.sys { border-style: dashed; }
.lsec .lchat-m.sys p { font: 13px var(--mono); color: var(--ink-2); }
.lchat-m.user { margin-left: 18%; background: var(--card-2); }
.lchat-m.bot { margin-right: 8%; border-left: 3px solid var(--accent); }
/* reasoning */
.lthink { display: grid; gap: 4px; min-height: 40px; }
.lsec .lthink p { margin: 0; font-size: 13.5px; line-height: 1.5; animation: lw-pop .3s var(--ease); }
.lsec .lthink .th { color: var(--ink-3); font-style: italic; padding-left: 14px; border-left: 2px solid var(--line-2); }
.lsec .lthink .ans { margin-top: 6px; color: var(--ink); font-weight: 500; padding: 8px 10px; background: var(--bg); border-radius: 4px; border-left: 3px solid var(--accent); }
.lstack { display: flex; height: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.lstack i { width: var(--w, 0); transition: width .45s var(--ease); }
.lstack .t { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 5px, color-mix(in srgb, var(--accent) 30%, transparent) 5px 10px); }
.lstack .a { background: var(--ink); }
/* agent loop */
.lloop { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0; }
.lloop li { position: relative; padding: 8px 10px; text-align: center; font-size: 12.5px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; transition: all .2s; }
.lloop li:not(:last-child)::after { content: '→'; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 11px; z-index: 1; }
.lloop li.on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.lterm { background: #0d0d0c; color: #e6e3da; border: 1px solid var(--line-2); border-radius: 5px; padding: 12px; font: 12.5px/1.55 var(--mono); height: 230px; overflow-y: auto; display: grid; align-content: start; gap: 8px; }
[data-theme='light'] .lterm { background: #1b1a17; }
.lt { animation: lw-pop .3s var(--ease); }
.lt-k { display: inline-block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; margin-bottom: 3px; background: rgb(255 255 255 / .08); color: #aaa69b; }
.lsec .lt p, .lt pre { margin: 0; white-space: pre-wrap; font: inherit; color: inherit; line-height: inherit; }
.lsec .lt-think p { color: #c9c5ba; font-style: italic; }
.lt-call .lt-k { background: #ff6b35; color: #121211; }
.lt-call pre { color: #ffb08f; }
.lt-result pre { color: #9fd49f; padding-left: 10px; border-left: 2px solid rgb(255 255 255 / .12); }
.lt-done .lt-k { background: #7fbf7f; color: #121211; }
.lsec .lt-done p { color: #fff; font-weight: 500; }
/* MCP */
.lmcp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 22px; align-items: center; position: relative; }
.lmcp-client { display: grid; gap: 2px; padding: 16px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); text-align: center; position: relative; transition: all .25s; }
.lmcp-client .eyebrow { margin: 0; }
.lmcp-client strong { font-size: 15px; }
.lmcp-client small { font: 12px var(--mono); color: var(--ink-3); }
.lmcp.live .lmcp-client { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.lmcp.live .lmcp-client small { color: var(--accent-ink); }
.lmcp-servers { display: grid; gap: 6px; }
.lmcp-s { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px dashed var(--line-2); border-radius: 4px; background: transparent; color: var(--ink-2); font: 13.5px var(--font); cursor: pointer; text-align: left; position: relative; transition: all .2s; }
.lmcp-s i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-3); flex: none; transition: all .2s; }
.lmcp-s::before { content: ''; position: absolute; right: 100%; top: 50%; width: 22px; border-top: 1px dashed var(--line-2); }
.lmcp-s[aria-pressed='true'] { border-style: solid; border-color: var(--ink); color: var(--ink); background: var(--bg); }
.lmcp-s[aria-pressed='true'] i { background: var(--k-release); border-color: var(--k-release); box-shadow: 0 0 8px var(--k-release); }
.lmcp-s[aria-pressed='true']::before { border-top: 2px solid var(--accent); }
.lmcp-tools { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.lmcp-tools code { font: 12px var(--mono); padding: 3px 7px; border-radius: 3px; background: var(--card-2); border: 1px solid var(--line); color: var(--ink); }
.lmcp-tools code.new { animation: lw-in .6s var(--ease); border-color: var(--accent); }
/* embeddings */
.lemb { width: 100%; height: auto; background: radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0) 0 0 / 20px 20px, var(--bg); border: 1px solid var(--line); border-radius: 5px; font: 11px var(--font); }
.lemb text { fill: var(--ink-3); transition: fill .2s; }
.lemb circle { transition: r .2s; }
.ed-a circle { fill: #7fa8d6; } .ed-p circle { fill: #d6b25e; } .ed-u circle { fill: #b89bd1; } .ed-d circle { fill: #7fbf7f; }
.lemb .ed { transition: opacity .25s; }
.lemb.q .ed:not(.hit) { opacity: .45; }
.lemb .ed.hit text { fill: var(--ink); font-weight: 600; }
.lemb .ed.hit circle { r: 7; }
.lemb .el line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.lemb .eq circle { fill: var(--accent); }
.lemb .eq .ring { fill: none; stroke: var(--accent); opacity: .5; animation: lw-ring 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.lemb .eq { transition: transform .45s var(--ease), opacity .2s; }
@keyframes lw-ring { from { transform: scale(.5); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.lemb-hits { list-style: none; counter-reset: h; padding: 0; display: grid; gap: 4px; }
.lemb-hits li { counter-increment: h; display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.lemb-hits li:not(.muted)::before { content: counter(h); font: 12px var(--mono); color: var(--on-accent); background: var(--accent); width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; flex: none; }
.lemb-hits b { margin-left: auto; font: 12.5px var(--mono); color: var(--ink-3); white-space: nowrap; }
.lemb-hits b::before { content: 'similarity '; }
/* quiz */
.lquiz { display: grid; gap: 16px; }
.lq { display: grid; gap: 8px; }
.lsec .lq-q { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.lq-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lq-o { padding: 10px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); color: var(--ink); cursor: pointer; text-align: left; transition: all .15s; }
.lq-o code { font: 12.5px var(--mono); word-break: break-word; }
.lq-o:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
.lq-o:disabled { cursor: default; }
.lq-o.real { opacity: .55; }
.lq-o.fake { border-color: #e5736b; background: color-mix(in srgb, #e5736b 14%, var(--bg)); opacity: 1; }
.lq-o.fake::after { content: 'Made up'; display: block; margin-top: 4px; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #e5736b; }
.lq-o.chosen.real { opacity: 1; border-color: var(--ink-3); }
.lq-o.chosen.real::after { content: 'Real — your pick'; display: block; margin-top: 4px; font: 10.5px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.lq-o.chosen.fake::after { content: 'Made up — you got it'; color: var(--k-release); }
.lsec .lq-why { margin: 0; font-size: 13.5px; color: var(--ink-2); padding-left: 10px; border-left: 2px solid var(--line-2); }
/* training stages */
.lstages { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0; }
.lstages button { width: 100%; height: 100%; display: grid; align-content: start; gap: 2px; padding: 10px 12px; text-align: left; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); color: var(--ink-2); cursor: pointer; transition: all .2s; }
.lstages b { font: 11px var(--mono); color: var(--ink-3); }
.lstages span { font-size: 14px; font-weight: 600; color: var(--ink); }
.lstages small { font-size: 12px; color: var(--ink-3); }
.lstages button[aria-selected='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); box-shadow: inset 0 -3px 0 var(--accent); }
.lstages button[aria-selected='true'] b { color: var(--accent-ink); }
/* mixture of experts */
.lsec .lmoe-seq { display: flex; flex-wrap: wrap; gap: 2px; font: 13.5px var(--mono); margin: 0; }
.lmoe-seq span { padding: 2px 4px; border-radius: 2px; white-space: pre; color: var(--ink-3); background: var(--bg); transition: all .2s; }
.lmoe-seq span.done { color: var(--ink-2); }
.lmoe-seq span.now { color: var(--on-accent); background: var(--accent); }
.lmoe-svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; font: 12px var(--mono); }
.lmoe-svg text { fill: var(--ink); }
.lmoe-svg .ms { font-size: 10px; fill: var(--ink-3); transition: fill .2s; }
.lmoe-svg .mt, .lmoe-svg .mr { fill: var(--card-2); stroke: var(--line-2); }
.lmoe-svg .mr { stroke: var(--accent); }
.lmoe-svg .me { fill: var(--bg); stroke: var(--line-2); transition: fill .25s, stroke .25s; }
.lmoe-svg .me.on { fill: color-mix(in srgb, var(--accent) 34%, transparent); stroke: var(--accent); }
.lmoe-svg .me.on + text { fill: var(--ink); font-weight: 600; }
.lmoe-svg .ml { fill: none; stroke: var(--line-2); stroke-width: 1.2; transition: stroke .25s; }
.lmoe-svg .ml.on { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; animation: lw-flow .6s linear infinite; }
@keyframes lw-flow { to { stroke-dashoffset: -10; } }
/* quantization */
.lwave { width: 100%; height: 120px; background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 20px, var(--bg); border: 1px solid var(--line); border-radius: 5px; }
.lwave path { fill: none; vector-effect: non-scaling-stroke; }
.lwave .ref { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.lwave .q { stroke: var(--accent); stroke-width: 2.2; }
/* open vs closed */
.lsplit { display: flex; height: 40px; border-radius: 5px; overflow: hidden; font-size: 13px; }
.lsplit i { display: flex; align-items: center; gap: 6px; padding: 0 12px; font-style: normal; white-space: nowrap; }
.lsplit b { font: 600 16px var(--mono); }
.lsplit .o { width: var(--w); background: var(--k-release); color: #121211; }
.lsplit .c { flex: 1; justify-content: flex-end; background: var(--ink); color: var(--bg); }
.lmlist { list-style: none; padding: 0; display: grid; }
.lmlist li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.lmlist a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmlist small { color: var(--ink-3); font-size: 12px; }
.lmlist b { font: 500 13px var(--mono); }
.lsq { width: 10px; height: 10px; border-radius: 2px; background: var(--cc, var(--c)); align-self: center; }
/* bar list (modalities, benchmarks) */
.lmodal { list-style: none; padding: 0; margin: 4px 0 14px; display: grid; gap: 8px; }
.lw .lmodal { margin: 0; }
.lmodal li { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 64px; align-items: center; gap: 12px; font-size: 14px; }
.lmodal li > a, .lmodal li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmodal i { display: block; height: 12px; width: var(--w); background: var(--cc, var(--accent)); border-radius: 2px; animation: lw-grow .7s var(--ease) both; transform-origin: left; }
@keyframes lw-grow { from { transform: scaleX(0); } }
.lmodal b { font: 500 13px var(--mono); text-align: right; }
/* image tokens */
.limg-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.limg { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, #2a4a6b 0%, #c8673d 55%, #f0c27a 100%); }
.limg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / .55) 1px, transparent 1px) 0 0 / calc(100% / var(--cols)) 100%, linear-gradient(rgb(255 255 255 / .55) 1px, transparent 1px) 0 0 / 100% calc(100% / var(--rows)); }
.limg::after { content: attr(data-n); position: absolute; left: 8px; bottom: 8px; font: 11px var(--mono); color: #fff; background: rgb(0 0 0 / .45); padding: 2px 6px; border-radius: 2px; }
.limg-side { display: grid; gap: 12px; }
/* speed */
.lstream { height: 200px; white-space: pre-wrap; display: block; color: #e6e3da; margin: 0; }
.lstream.wait::after { content: 'waiting for the first token…'; color: #78756d; font-style: italic; animation: blink 1s steps(2) infinite; }
.lw-clock { font: 600 20px var(--mono); color: var(--ink); min-width: 70px; }
/* chapters in the narration */
.lsec-on > .lhead { border-top-color: var(--accent); }
.lsec-on > .lhead .eyebrow { color: var(--accent-ink); }
.lhead .lplay small { font: 11px var(--mono); color: var(--ink-3); margin-left: 6px; }
.lplay[aria-pressed='true'] small { color: inherit; opacity: .8; }
/* player additions */
.lp-prog { height: 3px; background: var(--line); cursor: pointer; }
.lp-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
.lp-main { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.lp-main:hover { filter: brightness(1.1); }
.lp-time { font: 12px var(--mono); color: var(--ink-3); white-space: nowrap; }
.lp-voice[hidden] { display: none; }
@media (max-width: 640px) {
  .lw-body { padding: 14px; }
  .lw-grid2, .lmcp, .limg-wrap { grid-template-columns: 1fr; }
  .lmcp-s::before { display: none; }
  .lq-opts, .lstages { grid-template-columns: 1fr; }
  .lloop { grid-template-columns: repeat(2, 1fr); }
  .lloop li:nth-child(2)::after { display: none; }
  .lmodal li { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 56px; gap: 8px; }
  .lmlist li { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .lmlist small { grid-column: 2; grid-row: 2; }
  .lchat-m.user { margin-left: 8%; }
  .lplayer-in { flex-wrap: wrap; }
  .lp-time, #lp-prev { display: none; }
  .lemb { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .lmoe-svg .ml.on, .lemb .eq .ring, .lstream.wait::after { animation: none; }
  .lmodal i, .lw-pick.pop, .lt, .lsec .lthink p { animation: none; }
}

/* ── Learn page: demos synced to the narration ─────────── */
.lw { transition: border-color .3s, box-shadow .3s; }
.lw-live { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 18px 40px -24px rgb(0 0 0 / .5); }
.lw-live .lw-top::after, .lw-yours .lw-top::after { margin-left: auto; font: 500 11px var(--mono); white-space: nowrap; }
.lw-live .lw-top::after { content: '● in sync with the narrator'; color: var(--accent-ink); animation: blink 1.4s steps(2) infinite; }
.lw-yours .lw-top::after { content: 'your turn — narration keeps going'; color: var(--ink-3); }
.lw.cue { animation: lw-cue .7s var(--ease); }
@keyframes lw-cue { 30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent), 0 18px 40px -24px rgb(0 0 0 / .5); } }
#tokstats.cue, #cc-bars.cue, #cc-save.cue, #rz-bar.cue, .lq.cue { animation: lw-flash 1.1s var(--ease); border-radius: 4px; }
@keyframes lw-flash { 25% { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); } }
/* live captions */
.lp-cap { display: none; max-width: 760px; margin: 0 auto; padding: 10px 16px 2px; text-align: center; font: 500 clamp(15px, 2.2vw, 19px)/1.45 var(--font); letter-spacing: -.005em; min-height: 2.9em; }
.lplayer.has-cap:not(.cc-off) .lp-cap { display: block; }
.lp-cap span { color: var(--ink-3); transition: color .12s; }
.lp-cap span.past { color: var(--ink-2); }
.lp-cap span.on { color: var(--ink); text-decoration: underline 2px var(--accent); text-underline-offset: 5px; }
.lp-cc { font: 600 11px var(--mono); letter-spacing: .04em; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 3px; height: 24px; }
.lp-cc[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 640px) { .lw-live .lw-top::after { content: '● live'; } .lw-yours .lw-top::after { content: 'your turn'; } }
@media (prefers-reduced-motion: reduce) { .lw-live .lw-top::after, .lw.cue, #tokstats.cue, #cc-bars.cue, #cc-save.cue, #rz-bar.cue, .lq.cue { animation: none; } }

/* ── phones ───────────────────────────── */
@media (max-width: 640px) {
  .pctl-bench { width: 100%; min-width: 0; }
  .pctl-bench .dd { flex: 1; }
  .nav-seek > span, .nav-seek > kbd { display: none; }
  /* 16px stops iOS Safari zooming the page when a field gets focus. */
  input[type='search'], input[type='text'], input:not([type]), select, textarea { font-size: 16px; }
}

/* Pricing table → one card per tool on phones. */
@media (max-width: 640px) {
  .ptable-wrap { overflow-x: visible; }
  .ptable { min-width: 0; display: block; }
  .ptable tbody { display: block; }
  .ptable thead { display: block; }
  .ptable thead tr { display: flex; gap: 18px; }
  .ptable thead th { position: static; border-bottom: 0; padding: 10px 0; }
  .ptable thead th:not([aria-sort]) { display: none; }
  .ptable thead th:first-child::before { content: 'Sort: '; }
  .ptable tbody tr.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 16px 0; border-top: 1px solid var(--line); }
  .ptable tbody tr.prow[hidden] { display: none; }
  .ptable tbody tr + tr > * { border-top: 0; }
  .ptable tbody tr.prow > * { padding: 0; }
  .ptable tbody tr.prow > th { grid-column: 1; }
  .ptable tbody tr.prow > .pfrom { grid-column: 2; grid-row: 1; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .ptable tbody tr.prow > td:nth-child(2), .ptable tbody tr.prow > td:nth-child(3) { grid-column: 1 / -1; }
  .ptable tbody tr.prow > td:nth-child(2)::before, .ptable tbody tr.prow > td:nth-child(3)::before { display: block; margin-bottom: 6px; font: 500 11px var(--mono); color: var(--ink-3); }
  .ptable tbody tr.prow > td:nth-child(2)::before { content: 'Free plan'; }
  .ptable tbody tr.prow > td:nth-child(3)::before { content: 'Paid plans (USD / month)'; }
  .ptool { min-width: 0; }
  .pfree { max-width: none; }
  .ptable tbody tr:hover { background: none; }
}

/* ── Seek: site-wide search ───────────────
   Header trigger → a dock that rides the bottom of the page (orb while you scroll, pill when you
   pause) → a palette that grows out of whichever one you pressed. */
.nav-seek { display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; height: 36px; margin-right: 6px; padding: 0 6px 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--ink-3); font-size: 13px; transition: color .15s, border-color .15s, background .15s, transform .25s var(--ease); }
.nav-seek:hover { color: var(--ink); border-color: var(--ink-3); }
.nav-seek:active { transform: scale(.97); }
.nav-seek kbd { font-size: 11px; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--ink-3); }
.nav-seek.launching { opacity: 0; }
/* The header button and the dock are one control: while the dock is out, the button folds away. */
.nav-seek { width: 290px; max-width: 290px; overflow: hidden; transition: color .15s, border-color .15s, background .15s, transform .25s var(--ease), max-width .4s var(--ease), opacity .25s, padding .4s var(--ease), margin .4s var(--ease); }
.nav-seek.away { max-width: 0; padding: 0; margin: 0; border-width: 0; opacity: 0; transform: scale(.7); pointer-events: none; visibility: hidden; transition-property: max-width, opacity, padding, margin, transform, visibility; transition-delay: 0s, 0s, 0s, 0s, 0s, .4s; }
.nav-seek > span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) { .nav-seek { width: auto; } .nav-seek > span { display: none; } }
@media (max-width: 980px) { .nav-seek { width: 44px; height: 44px; padding: 0; justify-content: center; margin: 0; border: 0; background: none; } .nav-seek > kbd { display: none; } }

/* Placed by its orb centre (left/top, set from seek.js). West of centre it grows rightwards;
   east of centre (.east) the order flips so the orb stays put and the pill grows leftwards. */
.seek-dock {
  position: fixed; z-index: 45; left: calc(100% - 40px); top: calc(100% - 40px);
  display: flex; align-items: center; height: 52px; padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 94%, transparent); color: var(--bg);
  box-shadow: 0 14px 34px -12px rgb(0 0 0 / .55), 0 0 0 5px color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(12px); font: 500 14px/1 var(--mono); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  translate: -26px -50%; transform-origin: 26px 50%; scale: .4; opacity: 0; pointer-events: none;
  transition: left .6s cubic-bezier(.3, 1.2, .4, 1), top .6s cubic-bezier(.3, 1.2, .4, 1), translate .45s var(--ease), scale .45s cubic-bezier(.2, .9, .2, 1.2), opacity .3s, box-shadow .2s, padding .45s var(--ease);
}
.seek-dock.east { flex-direction: row-reverse; translate: calc(-100% + 26px) -50%; transform-origin: calc(100% - 26px) 50%; }
.seek-dock.on { scale: 1; opacity: 1; pointer-events: auto; }
.seek-dock.still { transition-property: translate, scale, opacity; }
.seek-dock:hover { box-shadow: 0 18px 40px -12px rgb(0 0 0 / .6), 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.seek-dock:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.seek-dock.launching { opacity: 0; transition: none; }
.seek-dock.dragging { cursor: grabbing; scale: 1.08; transition: translate .45s var(--ease), scale .2s, opacity .3s, box-shadow .2s; box-shadow: 0 26px 50px -14px rgb(0 0 0 / .7), 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); }
.sd-orb { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--accent); color: var(--on-accent); transition: transform .3s var(--ease), width .45s var(--ease), height .45s var(--ease); }
.seek-dock:hover .sd-orb { transform: rotate(-12deg) scale(1.06); }
.sd-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); rotate: -90deg; pointer-events: none; }
.sd-ring circle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .9; transition: stroke-dashoffset .12s linear; }
.sd-text { display: inline-flex; align-items: center; max-width: 300px; overflow: hidden; white-space: nowrap; padding-left: 12px; transition: max-width .45s var(--ease), padding .45s var(--ease), opacity .25s; }
.east .sd-text { padding: 0 4px 0 12px; }
.sd-pre { color: color-mix(in srgb, var(--bg) 55%, var(--ink)); margin-right: 8px; }
.sd-pre::after { content: '›'; margin-left: 8px; color: var(--accent); }
.sd-type { min-width: 11ch; text-align: right; } /* letters grow out of the caret, not the middle of the slot */
.sd-caret { width: 8px; height: 16px; margin-left: 1px; background: var(--accent); animation: sk-blink 1.05s steps(2) infinite; }
.sd-kbd { max-width: 80px; margin: 0 6px 0 12px; padding: 4px 8px; overflow: hidden; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--bg) 25%, transparent); border-radius: 999px; font-size: 11px; color: color-mix(in srgb, var(--bg) 60%, var(--ink)); transition: max-width .45s var(--ease), opacity .25s, margin .45s, padding .45s; }
.east .sd-kbd { margin: 0 4px 0 6px; }
.seek-dock.compact { padding: 0 6px; }
.seek-dock.compact .sd-text { max-width: 0; padding: 0; opacity: 0; }
.seek-dock.compact .sd-kbd { max-width: 0; margin: 0; padding: 4px 0; border-width: 0; opacity: 0; }
/* The pin: shows where you've parked it; press it to set the orb free. */
.sd-pin {
  position: absolute; top: -7px; left: 30px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); color: var(--accent-ink); border: 1px solid var(--line-2); box-shadow: 0 4px 10px -4px rgb(0 0 0 / .5);
  opacity: 0; scale: .5; pointer-events: none; transition: opacity .2s, scale .25s cubic-bezier(.2, .9, .2, 1.3), background .15s;
}
.east .sd-pin { left: auto; right: 30px; }
.seek-dock.pinned .sd-pin { opacity: 1; scale: 1; pointer-events: auto; }
.seek-dock.pinned.dragging .sd-pin { opacity: 0; }
.sd-pin:hover { background: var(--accent); color: var(--on-accent); }
html.seeking .seek-dock { opacity: 0; pointer-events: none; }
@media (max-width: 980px) {
  .seek-dock { height: 56px; }
  .seek-dock .sd-kbd { display: none; }
  .sd-text { max-width: 210px; padding-right: 8px; }
  .sd-type { min-width: 7ch; }
  .seek-dock.compact .sd-orb { width: 42px; height: 42px; }
  .sd-pin { width: 24px; height: 24px; top: -9px; }
}
@media (hover: hover) { .seek-dock.pinned:not(:hover) .sd-pin { opacity: 0; scale: .6; pointer-events: none; } .seek-dock.pinned:not(:hover) .sd-orb::after { content: ''; position: absolute; top: 1px; right: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); } }

.seek { position: fixed; inset: 0; z-index: 900; display: grid; justify-items: center; align-items: start; padding: min(12vh, 110px) 16px 16px; }
.seek[hidden] { display: none; }
.sk-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(6px) saturate(.8); animation: sk-fade .35s ease-out both; }
.seek.closing .sk-veil { animation: sk-fade .3s ease-in reverse both; }
html.seeking { overflow: hidden; }
.sk-panel {
  position: relative; display: flex; flex-direction: column; width: min(860px, 100%); max-height: min(640px, calc(100dvh - 2 * min(12vh, 110px)));
  background: var(--card); color: var(--ink); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .65), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
.sk-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line-2); color: var(--ink-3); }
.sk-head > svg { flex: none; color: var(--accent); }
.sk-q { flex: 1; min-width: 0; height: 62px; border: 0; outline: 0; background: none; color: var(--ink); font: 500 20px/1 var(--font) !important; letter-spacing: -.01em; }
.sk-q::placeholder { color: var(--ink-3); }
.sk-q::-webkit-search-cancel-button { display: none; }
.sk-count { font: 12px var(--mono); color: var(--ink-3); white-space: nowrap; }
.sk-x { border: 1px solid var(--line-2); background: none; border-radius: 999px; padding: 4px 9px; font: 11px var(--mono); color: var(--ink-3); }
.sk-x:hover { color: var(--ink); border-color: var(--ink-3); }
.sk-scan { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 40% 100%; opacity: 0; }
.seek.typing .sk-scan { opacity: 1; animation: sk-scan .7s linear infinite; }
.sk-scopes { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.sk-scopes::-webkit-scrollbar { display: none; }
.sk-scopes button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: none; font-size: 12.5px; color: var(--ink-2); transition: background .2s, color .2s, border-color .2s; }
.sk-scopes button:hover { color: var(--ink); border-color: var(--ink-3); }
.sk-scopes button[aria-selected='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sk-scopes b { font: 500 10.5px var(--mono); opacity: .65; }
.sk-scopes b:empty { display: none; }
.sk-body { display: grid; grid-template-columns: minmax(0, 1fr) 270px; min-height: 0; flex: 1; }
.sk-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 12px; min-height: 180px; scroll-padding: 34px 0 8px; }
.sk-gh { position: sticky; top: -6px; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 12px 10px 6px; background: var(--card); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sk-gh button { border: 0; background: none; padding: 0; font: inherit; letter-spacing: 0; text-transform: none; color: var(--accent-ink); }
.sk-gh button:hover { text-decoration: underline; }
.sk-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; animation: sk-in .38s var(--ease) both; animation-delay: var(--d); }
.sk-row[aria-selected='true'] { background: var(--card-2); }
.sk-row[aria-selected='true']::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--accent); animation: sk-bar .25s var(--ease); }
.sk-ic { position: relative; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: color-mix(in srgb, var(--cc, var(--ink-3)) 18%, var(--card-2)); color: var(--cc, var(--ink-2)); font: 600 13px var(--mono); overflow: hidden; }
.sk-ic img { width: 100%; height: 100%; object-fit: cover; }
.sk-ic i { width: 62%; height: 62%; background: var(--ink); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.sk-ic.has { background: var(--card-2); }
.sk-ic-here, .sk-ic-command, .sk-ic-page, .sk-ic-learn, .sk-ic-recent { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, var(--card-2)); }
.sk-tx { display: grid; min-width: 0; flex: 1; }
.sk-n, .sk-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-n { font-size: 14.5px; color: var(--ink); }
.sk-s { font-size: 12.5px; color: var(--ink-3); }
.sk-row mark { background: none; color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.sk-tag { display: flex; gap: 8px; flex: none; font: 11px var(--mono); color: var(--ink-3); }
.sk-tag time { color: var(--ink-2); }
.sk-none { padding: 40px 18px; text-align: center; color: var(--ink-3); }
.sk-none-big { font: 400 italic 26px/1.2 var(--serif); color: var(--ink-2); margin: 0 0 8px; }
.sk-none button { border: 0; background: none; padding: 0; color: var(--accent-ink); text-decoration: underline; }
.sk-peek { border-left: 1px solid var(--line); padding: 22px 20px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 40%); }
.sk-pk { animation: sk-peek .3s var(--ease) both; }
.sk-pk .sk-ic { width: 52px; height: 52px; border-radius: 13px; font-size: 22px; margin-bottom: 16px; }
.sk-pk .eyebrow { margin: 0 0 6px; }
.sk-pk h3 { margin: 0 0 8px; font: 600 19px/1.2 var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }
.sk-pk-s { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.sk-pk-k { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.sk-pk-go { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--ink-3); }
.sk-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line); font: 11.5px var(--mono); color: var(--ink-3); }
.sk-foot kbd, .sk-pk-go kbd { display: inline-block; min-width: 18px; margin-right: 3px; padding: 1px 5px; text-align: center; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; font-size: 10.5px; color: var(--ink-2); }
.sk-meta { margin-left: auto; }
.seek.closing .sk-panel > * { transition: opacity .15s; opacity: 0; }
.sk-panel > * { animation: sk-rise .45s var(--ease) both; }
.sk-panel > .sk-scopes { animation-delay: 60ms; }
.sk-panel > .sk-body { animation-delay: 110ms; }
.sk-panel > .sk-foot { animation-delay: 160ms; }
.sk-flash { position: fixed; z-index: 950; left: 50%; bottom: 90px; translate: -50% 0; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 13px var(--mono); animation: sk-flash 1.8s var(--ease) both; }
.sk-found { animation: sk-found 1.6s var(--ease); }
@keyframes sk-blink { 50% { opacity: 0; } }
@keyframes sk-fade { from { opacity: 0; } }
@keyframes sk-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes sk-in { from { opacity: 0; transform: translateX(-6px); } }
@keyframes sk-peek { from { opacity: 0; transform: translateY(6px); } }
@keyframes sk-bar { from { transform: scaleY(0); } }
@keyframes sk-scan { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes sk-flash { 0% { opacity: 0; translate: -50% 10px; } 12%, 80% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; } }
@keyframes sk-found { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (max-width: 760px) {
  .seek { padding: 0; align-items: end; }
  .sk-panel { width: 100%; max-height: 88dvh; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .sk-body { grid-template-columns: 1fr; }
  .sk-peek, .sk-foot, .sk-count { display: none; }
  .sk-q { height: 58px; font-size: 17px !important; }
  .sk-list { min-height: 40dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .seek-dock, .sd-text, .sd-kbd, .sd-orb, .sd-ring circle { transition: none; }
  .sd-caret, .sk-row, .sk-pk, .sk-panel > *, .sk-veil, .seek.typing .sk-scan, .sk-found, .sk-row[aria-selected='true']::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav.open .nav-links, .nav.open .nav-links a { animation: none; opacity: 1; transform: none; }
}

/* ── My feed ───────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mf { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px 48px; align-items: start; }
.mf-setup { display: grid; gap: 28px; position: sticky; top: calc(var(--navh) + 8px); max-height: calc(100vh - var(--navh) - 24px); overflow: auto; padding-right: 4px; }
.mf-mine { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 2px; }
.mf-mine li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mf-mine li.mf-none { display: block; border: 0; }
.mf-mine li span { display: grid; min-width: 0; }
.mf-mine b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-mine small { font: 11.5px var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-mine li.bad small { color: var(--accent-ink); }
.mf-x { border: 0; background: none; color: var(--ink-3); font-size: 20px; line-height: 1; padding: 2px 6px; cursor: pointer; }
.mf-x:hover { color: var(--accent-ink); }
.mf-tile { background: color-mix(in srgb, var(--c) 18%, var(--card-2)); }
.mf-tile b { color: var(--c); }
.mf-k { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bg); background: var(--ink-3); z-index: 2; }
.mf-k-youtube { background: #ff3b30; } .mf-k-reddit { background: #ff4500; } .mf-k-bluesky { background: #1185fe; }
.mf-k-mastodon { background: #6364ff; } .mf-k-instagram { background: #e1306c; } .mf-k-x { background: var(--ink); } .mf-k-web { background: #f5a623; }
.mf-add { display: flex; gap: 8px; }
#mf-in, #mf-tq { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); color: var(--ink); font: 13.5px var(--font); }
#mf-in:focus, #mf-tq:focus { border-color: var(--ink); outline: none; }
#mf-tq { width: 100%; margin: 10px 0; }
.mf-status:empty { display: none; }
.mf-status { margin: 8px 0 0; }
.mf-try { margin: 10px 0 0; line-height: 1.9; }
.mf-preset { border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--ink-2); font: 12px var(--font); padding: 2px 10px; margin: 0 4px 4px 0; cursor: pointer; }
.mf-preset:hover { border-color: var(--ink); color: var(--ink); }
.mf-built { display: grid; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.mf-built label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
.mf-built input { accent-color: var(--accent); }
.mf-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.mf-actions .btn { padding: 6px 12px; font-size: 13px; }
.mf-tools-box summary { display: flex; justify-content: space-between; align-items: end; gap: 12px; cursor: pointer; list-style: none; }
.mf-tools-box summary::-webkit-details-marker { display: none; }
.mf-tools-box summary h2::after { content: ' +'; color: var(--ink-3); font-weight: 400; }
.mf-tools-box[open] summary h2::after { content: ' −'; }
.mf-tools { display: grid; gap: 2px; max-height: 420px; overflow: auto; }
.mf-tools button { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 6px; border: 0; border-radius: var(--r); background: none; color: var(--ink-2); font: 500 14px var(--font); text-align: left; cursor: pointer; }
.mf-tools button:hover { background: var(--bg-2); color: var(--ink); }
.mf-tools button[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
.mf-tools button[aria-pressed='true'] small::before { content: '✓ '; color: var(--accent-ink); }
.mf-tools button[hidden] { display: none; }
.mf-tools small { font: 11px var(--mono); color: var(--ink-3); }
.mf-stream { min-width: 0; max-width: 760px; }
.mf-filter { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; }
.mf-filter:empty { display: none; }
.mf-list[aria-busy='true'] { min-height: 40vh; }
.mf-card .fcard-tool { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.mf-img { display: block; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; max-width: 520px; }
.mf-img img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
@media (max-width: 900px) {
  .mf { grid-template-columns: minmax(0, 1fr); }
  .mf-setup { position: static; max-height: none; overflow: visible; padding: 0; }
}
.pop-more { margin-top: 14px; }
.pop-more > .egrid { margin-top: 14px; }