/* System AI-X — shared design system (dark + light) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0a0a0c;--bg-elev:#111114;--bg-soft:#16161a;
--hairline:rgba(255,255,255,.08);--hairline-strong:rgba(255,255,255,.16);
--fg:#f5f5f7;--fg-dim:rgba(245,245,247,.66);--fg-faint:rgba(245,245,247,.40);--fg-quiet:rgba(245,245,247,.22);
--accent:#7c5cff;--accent-2:#38bdf8;
--accent-soft:rgba(124,92,255,.18);--accent-glow:rgba(124,92,255,.55);--accent-glow-2:rgba(56,189,248,.45);
--code-bg:rgba(255,255,255,.05);--quote-rule:rgba(124,92,255,.45);
--surface-1:rgba(255,255,255,.04);--surface-2:rgba(255,255,255,.025);
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",system-ui,sans-serif;
--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
--max:1180px;--essay:720px;--gutter:clamp(20px,4vw,48px);--section-y:clamp(96px,14vh,180px);
--radius:18px;--radius-sm:12px;
--ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,.05,.36,1);
}
html[data-theme="light"]{
--bg:#fbfbfd;--bg-elev:#ffffff;--bg-soft:#f4f4f7;
--hairline:rgba(0,0,0,.08);--hairline-strong:rgba(0,0,0,.18);
--fg:#1d1d1f;--fg-dim:rgba(29,29,31,.70);--fg-faint:rgba(29,29,31,.45);--fg-quiet:rgba(29,29,31,.22);
--accent:#5b3df5;--accent-2:#0091d8;
--accent-soft:rgba(91,61,245,.10);--accent-glow:rgba(91,61,245,.35);--accent-glow-2:rgba(0,145,216,.30);
--code-bg:rgba(0,0,0,.04);--quote-rule:rgba(91,61,245,.40);
--surface-1:#ffffff;--surface-2:#f7f7fa;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-feature-settings:"ss01","ss02","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5;min-height:100vh;overflow-x:hidden;transition:background .35s var(--ease-out),color .35s var(--ease-out)}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* Scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));z-index:100;transition:width .08s linear;box-shadow:0 0 8px var(--accent-glow)}

/* Ambient backgrounds */
.bg-veil{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(900px 600px at 18% 8%,rgba(124,92,255,.10),transparent 60%),radial-gradient(700px 500px at 82% 6%,rgba(56,189,248,.07),transparent 60%),radial-gradient(700px 500px at 50% 95%,rgba(124,92,255,.05),transparent 60%)}
html[data-theme="light"] .bg-veil{background:radial-gradient(900px 600px at 18% 8%,rgba(91,61,245,.06),transparent 60%),radial-gradient(700px 500px at 82% 6%,rgba(0,145,216,.05),transparent 60%)}
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 80%);opacity:.55}

main,header,footer,nav{position:relative;z-index:2}

/* Nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter);background:color-mix(in oklab,var(--bg) 70%,transparent);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--hairline)}
.nav-brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--fg)}
.nav-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow),0 0 28px var(--accent-glow);animation:pulse 2.6s var(--ease-in-out) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.55}}
.nav-links{display:flex;align-items:center;gap:28px;font-size:13.5px;color:var(--fg-dim)}
.nav-links a{transition:color .25s var(--ease-out)}
.nav-links a:hover{color:var(--fg)}
.nav-right{display:flex;align-items:center;gap:12px}
.theme-toggle{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hairline-strong);border-radius:999px;background:var(--surface-2);color:var(--fg);cursor:pointer;transition:border-color .2s var(--ease-out),background .2s var(--ease-out),transform .2s var(--ease-out)}
.theme-toggle:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .ico-sun{display:none}
.theme-toggle .ico-moon{display:block}
html[data-theme="light"] .theme-toggle .ico-sun{display:block}
html[data-theme="light"] .theme-toggle .ico-moon{display:none}
.nav-cta{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--hairline-strong);border-radius:999px;font-size:13px;color:var(--fg);transition:border-color .25s var(--ease-out),background .25s var(--ease-out)}
.nav-cta:hover{border-color:var(--accent);background:var(--accent-soft)}
.nav-hamburger{display:none;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid var(--hairline-strong);border-radius:999px;background:var(--surface-2);color:var(--fg);cursor:pointer;transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.nav-hamburger:hover{border-color:var(--accent);background:var(--accent-soft)}
.nav-hamburger svg{width:18px;height:18px}
@media (max-width:720px){.nav-links{display:none}.nav-hamburger{display:inline-flex}.nav-cta{display:none}}

/* Codex 2026-05-16: unified Apple-style top chrome across hosted sites. */
.nav{
  min-height:72px;
  height:72px;
  padding:0 max(24px, calc((100vw - 1260px)/2 + 24px));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  column-gap:28px;
}
.nav-brand{
  justify-self:start;
  font-family:var(--font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif);
  font-size:15px;
  font-weight:650;
  letter-spacing:-.02em;
}
.nav-dot{
  width:24px;
  height:24px;
  border-radius:7px;
  background:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 12px 28px -18px var(--accent);
  animation:none;
  position:relative;
}
.nav-dot::after{
  content:"";
  position:absolute;
  inset:6px;
  border:1.6px solid rgba(255,255,255,.9);
  border-radius:2.5px;
}
.nav-links{
  justify-self:center;
  gap:34px;
  font-size:14px;
}
.nav-links a{
  color:var(--fg-dim);
  letter-spacing:-.01em;
  font-weight:450;
}
.nav-right{
  justify-self:end;
  gap:14px;
}
.theme-toggle,.nav-hamburger{
  width:44px;
  height:44px;
  background:color-mix(in oklab,var(--surface-2) 82%,transparent);
  border-color:var(--hairline);
  box-shadow:0 12px 28px -22px rgba(0,0,0,.45);
}
.nav-cta{
  min-height:44px;
  padding:0 22px;
  border:0;
  background:var(--accent);
  color:#fff;
  font-weight:650;
  letter-spacing:-.01em;
  box-shadow:0 16px 36px -20px var(--accent-glow);
}
.nav-cta:hover{
  background:color-mix(in oklab,var(--accent) 84%,#000 16%);
  color:#fff;
  transform:translateY(-1px);
}
html[data-theme="light"] .nav{
  background:rgba(255,255,255,.82);
  box-shadow:0 1px 0 rgba(15,22,38,.04),0 14px 36px -34px rgba(15,22,38,.55);
}
@media (max-width:900px){
  .nav{min-height:64px;height:64px;padding:0 18px;grid-template-columns:minmax(0,1fr) auto;}
  .nav-links{display:none}
  .nav-hamburger{display:inline-flex}
  .nav-cta{display:none}
}
/* Mobile drawer */
.nav-drawer{position:fixed;inset:0;z-index:60;display:none;background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);opacity:0;transition:opacity .35s var(--ease-out)}
.nav-drawer.open{display:flex;opacity:1}
.nav-drawer-inner{margin:auto;display:flex;flex-direction:column;gap:4px;padding:80px var(--gutter) 40px;width:100%;max-width:480px}
.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;position:absolute;top:14px;left:var(--gutter);right:var(--gutter)}
.nav-drawer-close{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--hairline-strong);border-radius:999px;background:var(--surface-2);color:var(--fg);cursor:pointer}
.nav-drawer-close svg{width:16px;height:16px}
.nav-drawer-section{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);padding:18px 4px 8px}
.nav-drawer-inner a{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;font-size:18px;letter-spacing:-.01em;color:var(--fg);border-bottom:1px solid var(--hairline);transition:color .2s var(--ease-out),padding .2s var(--ease-out)}
.nav-drawer-inner a:hover{color:var(--accent);padding-left:8px}
.nav-drawer-inner a .arrow{color:var(--fg-faint);transition:transform .25s var(--ease-out),color .25s var(--ease-out)}
.nav-drawer-inner a:hover .arrow{transform:translateX(3px);color:var(--accent)}
body.drawer-open{overflow:hidden}

/* Hero */
.hero{padding:clamp(80px,12vh,140px) var(--gutter) clamp(48px,8vh,96px)}
.hero-wrap{max-width:var(--essay);margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);padding:6px 12px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface-2)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 10px var(--accent-glow-2)}
h1.title{margin-top:28px;font-size:clamp(40px,6.6vw,76px);font-weight:700;letter-spacing:-.035em;line-height:1.04}
h1.title .accent{background:linear-gradient(120deg,var(--accent) 0%,var(--accent-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.deck{margin-top:26px;font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--fg-dim);max-width:620px;letter-spacing:-.005em}
.meta-row{margin-top:36px;display:flex;align-items:center;flex-wrap:wrap;gap:18px;font-family:var(--mono);font-size:11.5px;color:var(--fg-faint);letter-spacing:.12em;text-transform:uppercase}
.meta-dot{width:4px;height:4px;border-radius:50%;background:var(--fg-faint)}
.meta-badge{padding:4px 10px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface-2);color:var(--fg-dim)}
.hero-art{margin:56px auto 0;max-width:var(--essay);aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--hairline);background:radial-gradient(60% 80% at 50% 50%,rgba(124,92,255,.12),transparent 70%),linear-gradient(180deg,var(--bg-soft),var(--bg));overflow:hidden;position:relative;box-shadow:0 30px 80px -40px var(--accent-glow)}
.hero-art svg{width:100%;height:100%;display:block}

.hero-generated{margin:56px auto 0;max-width:var(--essay);position:relative;overflow:hidden;border:1px solid var(--hairline);border-radius:clamp(20px,4vw,34px);background:var(--surface-2);box-shadow:0 30px 90px -55px var(--accent-glow);isolation:isolate}
.hero-generated::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.52));pointer-events:none}
.hero-generated img{width:100%;aspect-ratio:16/10;display:block;object-fit:cover}
.hero-generated figcaption{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;padding:16px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(6,10,18,.48);color:#fff;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.hero-generated figcaption span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:4px}
.hero-generated figcaption strong{font-size:clamp(16px,2vw,22px);line-height:1.15;letter-spacing:-.02em}

/* Codex 2026-05-17: generated topic imagery for long-form pages. */
.topic-hero-art,
.topic-feature{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.12);
  border-radius:clamp(20px,4vw,32px);
  background:var(--surface-2);
  box-shadow:0 34px 96px -58px var(--accent-glow),0 1px 0 rgba(255,255,255,.06) inset;
}
html[data-theme="light"] .topic-hero-art,
html[data-theme="light"] .topic-feature{
  border-color:rgba(0,0,0,.08);
  box-shadow:0 34px 86px -64px rgba(15,22,38,.58),0 1px 0 rgba(255,255,255,.75) inset;
}
.topic-hero-art::after,
.topic-feature::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.72));
  pointer-events:none;
  z-index:1;
}
html[data-theme="light"] .topic-hero-art::after,
html[data-theme="light"] .topic-feature::after{
  background:linear-gradient(180deg,rgba(255,255,255,0) 36%,rgba(7,10,18,.62));
}
.topic-hero-img{
  width:100%;
  height:100%;
  min-height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.01);
}
.topic-hero-caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
  padding:15px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  color:#fff;
  background:rgba(6,8,14,.48);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
.topic-hero-caption span,
.visual-card small{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.topic-hero-caption strong{
  display:block;
  margin-top:4px;
  font-size:clamp(16px,2vw,21px);
  line-height:1.15;
  letter-spacing:-.02em;
}
.topic-feature{
  max-width:var(--essay);
  margin:44px auto 0;
  aspect-ratio:16/9;
}
.essay-visual{
  margin:0 0 56px;
  width:100%;
  aspect-ratio:16/9;
}
.essay-visual + h2{
  margin-top:56px;
}
.visual-crosslinks{
  width:min(980px,calc(100vw - (var(--gutter) * 2)));
  margin:72px 50% 24px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.visual-card{
  min-width:0;
  display:block;
  overflow:hidden;
  position:relative;
  min-height:210px;
  border:1px solid var(--hairline);
  border-radius:18px;
  background:var(--surface-2);
  color:#fff;
  transition:transform .25s var(--ease-out),border-color .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.visual-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 22px 54px -34px var(--accent-glow);
}
html[data-theme="light"] .visual-card:hover{
  border-color:rgba(0,0,0,.14);
}
.visual-card img{
  width:100%;
  height:100%;
  min-height:210px;
  display:block;
  object-fit:cover;
}
.visual-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.78));
}
.visual-card span{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:1;
}
.visual-card strong{
  display:block;
  margin-top:4px;
  font-size:17px;
  line-height:1.1;
  letter-spacing:-.02em;
}
@media (max-width:760px){
  .visual-crosslinks{grid-template-columns:1fr;width:100%;margin:56px 0 20px;transform:none}
  .visual-card{min-height:180px}
  .visual-card img{min-height:180px}
}
@media (max-width:560px){
  .topic-hero-caption{left:12px;right:12px;bottom:12px;padding:12px 13px;border-radius:14px}
  body.tbn-active .topic-hero-caption{bottom:96px}
  .topic-hero-caption strong{font-size:15px}
}

/* Essay */
article.essay{max-width:var(--essay);margin:0 auto;padding:clamp(56px,8vh,96px) var(--gutter) clamp(80px,12vh,140px);font-size:19px;line-height:1.65;color:var(--fg)}
@media (max-width:600px){article.essay{font-size:17.5px;line-height:1.62}}
article.essay h2{margin:64px 0 18px;font-size:clamp(26px,3.2vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.15;position:relative;scroll-margin-top:80px}
article.essay h2 .anchor{position:absolute;left:-28px;top:50%;transform:translateY(-50%);opacity:0;width:24px;height:24px;display:grid;place-items:center;color:var(--fg-faint);cursor:pointer;transition:opacity .2s var(--ease-out),color .2s var(--ease-out);border-radius:4px}
article.essay h2:hover .anchor{opacity:1}
article.essay h2 .anchor:hover{color:var(--accent)}
article.essay h2 .anchor svg{width:14px;height:14px}
@media (max-width:820px){article.essay h2 .anchor{left:-22px}}
@media (max-width:600px){article.essay h2 .anchor{display:none}}
article.essay h3{margin:40px 0 12px;font-size:clamp(20px,2.2vw,23px);font-weight:600;letter-spacing:-.01em;color:var(--fg)}
article.essay p{margin:0 0 22px;color:var(--fg)}
article.essay p .dim{color:var(--fg-dim)}
article.essay a.inline{color:var(--accent-2);border-bottom:1px solid color-mix(in oklab,var(--accent-2) 35%,transparent);transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}
article.essay a.inline:hover{color:var(--accent);border-bottom-color:var(--accent)}
article.essay strong{font-weight:600;color:var(--fg)}
article.essay em{font-style:italic}
article.essay code{font-family:var(--mono);font-size:.88em;padding:2px 7px;background:var(--code-bg);border:1px solid var(--hairline);border-radius:6px;color:var(--fg)}
article.essay pre{margin:28px 0;padding:20px 22px;background:var(--code-bg);border:1px solid var(--hairline);border-radius:var(--radius-sm);overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--fg)}
article.essay pre code{padding:0;background:none;border:0;border-radius:0;font-size:inherit}
article.essay ul,article.essay ol{margin:0 0 22px;padding-left:22px}
article.essay li{margin-bottom:8px}
article.essay ul li::marker{color:var(--accent-2)}

.pull{margin:48px 0;padding:28px 0;border-top:1px solid var(--quote-rule);border-bottom:1px solid var(--quote-rule);font-size:clamp(22px,2.6vw,28px);font-style:italic;font-weight:500;line-height:1.35;letter-spacing:-.015em;color:var(--fg)}
.pull-attr{display:block;margin-top:14px;font-family:var(--mono);font-size:11.5px;font-style:normal;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}

.callout{margin:28px 0;padding:20px 22px;border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--surface-2);font-size:16px;line-height:1.55;color:var(--fg-dim)}
.callout .callout-h{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.callout .callout-h svg{width:14px;height:14px}

.stats{margin:40px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:28px;border:1px solid var(--hairline);border-radius:var(--radius);background:linear-gradient(180deg,var(--accent-soft),transparent)}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-variant-numeric:tabular-nums;font-size:clamp(28px,3.4vw,36px);font-weight:600;letter-spacing:-.025em;background:linear-gradient(180deg,var(--fg),var(--fg-dim));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}

.glyph-divider{margin:56px auto;width:60px;height:1px;background:var(--hairline-strong);position:relative}
.glyph-divider::before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 0 12px var(--accent-glow)}

/* SF-Symbols-style sprite glyphs (/glyphs.svg) */
.glyph{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.glyph--lg{width:22px;height:22px}
.glyph--xl{width:32px;height:32px}
.glyph--accent{color:var(--accent)}
.glyph--accent-2{color:var(--accent-2)}
h2 .glyph,h3 .glyph{margin-right:.5em;color:var(--accent-2);vertical-align:-0.12em}
.eyebrow .glyph,.kicker .glyph{color:var(--accent-2);width:14px;height:14px;vertical-align:-0.12em}
.meta-row .glyph{width:12px;height:12px;margin-right:6px;vertical-align:-0.1em;color:var(--fg-faint)}
.callout .callout-h .glyph{color:var(--accent)}
ul.glyph-list{list-style:none;padding-left:0}
ul.glyph-list li{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
ul.glyph-list li > .glyph{margin-top:.35em;color:var(--accent-2);flex-shrink:0;width:16px;height:16px}

.toc{margin:32px 0 56px;padding:22px 24px;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--surface-2)}
.toc .toc-h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:12px}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:t}
.toc li{counter-increment:t;margin-bottom:6px;font-size:15px;color:var(--fg-dim);display:flex;gap:12px;align-items:baseline}
.toc li::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--fg-faint);letter-spacing:.08em}
.toc span{display:inline-block;color:inherit}

.essay-footer{margin-top:64px;padding-top:28px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12px;color:var(--fg-faint);letter-spacing:.04em}
.essay-footer a{color:var(--fg-dim)}
.essay-footer a:hover{color:var(--accent-2)}

.next-strip{max-width:var(--essay);margin:0 auto;padding:0 var(--gutter) clamp(56px,9vh,100px)}
.next-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 28px;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface-2);transition:border-color .25s var(--ease-out),background .25s var(--ease-out),transform .25s var(--ease-out)}
.next-card:hover{border-color:var(--hairline-strong);background:var(--surface-1);transform:translateY(-2px)}
.next-card .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)}
.next-card .ttl{margin-top:4px;font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--fg)}
.next-card .arr{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--hairline-strong);color:var(--fg);transition:transform .25s var(--ease-out),background .25s var(--ease-out)}
.next-card:hover .arr{background:var(--accent);color:#fff;border-color:var(--accent);transform:translate(3px,-3px)}

footer.site{padding:56px var(--gutter) 64px;border-top:1px solid var(--hairline)}
.foot-bar{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:11.5px;color:var(--fg-faint);letter-spacing:.04em}
.foot-bar a{color:var(--fg-dim)}
.foot-bar a:hover{color:var(--accent-2)}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);padding:10px 18px;background:var(--bg-elev);border:1px solid var(--hairline-strong);border-radius:999px;font-family:var(--mono);font-size:12px;color:var(--fg);opacity:0;pointer-events:none;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out);box-shadow:0 12px 30px -10px rgba(0,0,0,.4);z-index:200;display:inline-flex;align-items:center;gap:8px}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast svg{width:14px;height:14px;color:#34d399}

/* Reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* Section reusables */
section{padding:var(--section-y) var(--gutter)}
.wrap{max-width:var(--max);margin:0 auto}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.h2{margin-top:14px;font-size:clamp(34px,5.6vw,64px);font-weight:600;letter-spacing:-.025em;line-height:1.05;max-width:18ch}
.h2 .muted{color:var(--fg-faint)}
.section-lede{margin-top:22px;max-width:640px;font-size:clamp(16px,1.6vw,19px);color:var(--fg-dim)}

/* Interfaces gallery (used on /interfaces/) */
.gallery{margin-top:64px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:780px){.gallery{grid-template-columns:1fr}}
.card-app{display:block;padding:28px 26px;border:1px solid var(--hairline);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface-1),var(--surface-2));position:relative;overflow:hidden;transition:border-color .35s var(--ease-out),transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.card-app::before{content:"";position:absolute;inset:-1px;border-radius:var(--radius);padding:1px;background:linear-gradient(140deg,transparent 30%,var(--accent-glow),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s var(--ease-out);pointer-events:none}
.card-app:hover{transform:translateY(-3px);border-color:var(--hairline-strong);box-shadow:0 20px 50px -25px var(--accent-glow)}
.card-app:hover::before{opacity:1}
.card-app .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.card-app .card-glyph{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:#fff}
html[data-theme="light"] .card-app .card-glyph{color:var(--accent)}
.card-app .card-glyph svg{width:20px;height:20px}
.card-app .card-arrow{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--hairline);color:var(--fg-faint);transition:transform .25s var(--ease-out),color .25s var(--ease-out),background .25s var(--ease-out)}
.card-app:hover .card-arrow{transform:translate(3px,-3px);color:#fff;background:var(--accent);border-color:var(--accent)}
.card-app .card-arrow svg{width:14px;height:14px}
.card-app .card-arrow{font-family:var(--mono);font-size:9px;letter-spacing:.12em}
.card-app .card-name{font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--fg)}
.card-app .card-host{margin-top:4px;font-family:var(--mono);font-size:12px;color:var(--fg-faint);letter-spacing:.02em}
.card-app .card-body{margin-top:14px;font-size:15px;line-height:1.55;color:var(--fg-dim)}
.card-app .card-foot{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-app.featured-tool{grid-column:1/-1;order:-1;background:linear-gradient(135deg,var(--surface-1),color-mix(in oklab,var(--accent) 13%,var(--surface-2)));box-shadow:0 28px 90px -55px var(--accent-glow)}
.card-app.featured-tool .card-name{font-size:clamp(24px,3vw,34px);letter-spacing:-.025em}
.card-app.featured-tool .card-body{max-width:760px;font-size:clamp(15px,1.6vw,17px)}
@media (max-width:780px){.card-app.featured-tool{grid-column:auto}}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.pill::before{content:"";width:6px;height:6px;border-radius:50%}
.pill.live{background:rgba(52,211,153,.08);color:#34d399;border:1px solid rgba(52,211,153,.25)}
.pill.live::before{background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.7)}
.pill.auth{background:rgba(56,189,248,.08);color:var(--accent-2);border:1px solid rgba(56,189,248,.25)}
.pill.auth::before{background:var(--accent-2);box-shadow:0 0 8px var(--accent-glow-2)}
.pill.warn{background:rgba(250,204,21,.06);color:#fbbf24;border:1px solid rgba(250,204,21,.2)}
.pill.warn::before{background:#fbbf24}
.pill.local{background:var(--surface-1);color:var(--fg-dim);border:1px solid var(--hairline)}
.pill.local::before{background:var(--fg-faint)}

/* Changelog timeline */
.log-list{margin-top:48px;display:flex;flex-direction:column;gap:14px}
.log-item{padding:24px 26px;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--surface-2);display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
@media (max-width:720px){.log-item{grid-template-columns:1fr;gap:8px}}
.log-date{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}
.log-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:10px;letter-spacing:.1em}
.log-body h4{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--fg);margin:0 0 6px}
.log-body p{font-size:15px;color:var(--fg-dim);line-height:1.55}
.log-body code{font-family:var(--mono);font-size:.88em;padding:1px 6px;background:var(--code-bg);border:1px solid var(--hairline);border-radius:5px;color:var(--fg)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .nav-dot{animation:none}
  #field{display:none}
}

/* Codex Apple pass: consistent viewport law and mobile touch polish */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

main,
section,
.wrap,
.hero-wrap,
.gallery,
.card-app,
.stats,
.log-item,
.nav-drawer,
.nav-drawer-inner {
  min-width: 0;
}

.nav a,
.nav button,
.btn,
.nav-drawer-inner a,
button {
  min-height: 44px;
}

.nav button,
.btn {
  min-width: 44px;
}

@media (max-width: 600px) {
  .nav {
    padding: max(12px, env(safe-area-inset-top, 0px)) 18px 12px;
  }
  .nav-brand {
    min-width: 0;
    max-width: 54vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
  }
  .hero {
    padding: 72px 18px 54px;
  }
  h1.title {
    font-size: clamp(52px, 14vw, 70px);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }
  .deck {
    font-size: 20px;
    line-height: 1.38;
    max-width: 32ch;
  }
  .cta-row {
    gap: 12px;
  }
  .btn {
    min-height: 52px;
    padding-inline: 24px;
    font-size: 17px;
  }
  .meter {
    margin-top: 48px;
  }
}

/* Codex 2026-05-17: legible Apple-style navigation material. */
.nav{
  --nav-material:rgba(10,11,17,.82);
  --nav-link:rgba(245,245,247,.82);
  --nav-link-hover:#fff;
  height:auto;
  min-height:calc(72px + env(safe-area-inset-top, 0px));
  padding:env(safe-area-inset-top, 0px) max(24px, calc((100vw - 1260px)/2 + 24px)) 0;
  background:var(--nav-material);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 54px -44px rgba(0,0,0,.86);
}
html[data-theme="light"] .nav{
  --nav-material:rgba(255,255,255,.93);
  --nav-link:rgba(29,29,31,.78);
  --nav-link-hover:#1d1d1f;
  border-bottom-color:rgba(0,0,0,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.78) inset,0 18px 48px -40px rgba(15,22,38,.48);
}
.nav-brand{color:var(--nav-link-hover);text-shadow:0 1px 10px rgba(0,0,0,.16)}
.nav-links{gap:4px;padding:5px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme="light"] .nav-links{border-color:rgba(0,0,0,.07);background:rgba(0,0,0,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.72)}
.nav-links a{min-height:34px;display:inline-flex;align-items:center;padding:0 13px;border-radius:999px;color:var(--nav-link);font-weight:590;letter-spacing:-.012em;transition:color .2s var(--ease-out),background .2s var(--ease-out),transform .2s var(--ease-out)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--nav-link-hover);background:rgba(255,255,255,.075)}
html[data-theme="light"] .nav-links a:hover,html[data-theme="light"] .nav-links a:focus-visible{background:rgba(0,0,0,.045)}
.theme-toggle,.nav-hamburger{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.16);color:var(--nav-link-hover);box-shadow:0 10px 28px -22px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="light"] .theme-toggle,html[data-theme="light"] .nav-hamburger{background:rgba(255,255,255,.94);border-color:rgba(0,0,0,.12);color:#1d1d1f;box-shadow:0 12px 30px -24px rgba(15,22,38,.55),inset 0 1px 0 rgba(255,255,255,.82)}
.theme-toggle:hover,.nav-hamburger:hover{border-color:color-mix(in oklab,var(--accent) 56%,var(--hairline-strong));background:color-mix(in oklab,var(--accent-soft) 56%,rgba(255,255,255,.08))}

/* TinyBlue MLB theme toggle */
.nav-right .theme-toggle.r-theme-toggle{
  width:44px !important;
  height:44px !important;
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:1px solid var(--hairline-strong) !important;
  border-radius:999px !important;
  background:color-mix(in oklab,var(--surface-2) 84%,transparent) !important;
  color:var(--fg-dim) !important;
  box-shadow:0 12px 28px -22px rgba(0,0,0,.45) !important;
}
.nav-right .theme-toggle.r-theme-toggle .r-theme-icon,
.nav-right .theme-toggle.r-theme-toggle svg{
  display:none !important;
}
.nav-right .theme-toggle.r-theme-toggle::before{
  content:"";
  width:17px;
  height:17px;
  display:block;
  border:1.8px solid currentColor;
  border-radius:999px;
  box-shadow:inset -5px 0 0 currentColor;
  opacity:.9;
}
html[data-theme="light"] .nav-right .theme-toggle.r-theme-toggle::before,
html.tb-light .nav-right .theme-toggle.r-theme-toggle::before{
  box-shadow:
    0 -7px 0 -6px currentColor,
    0 7px 0 -6px currentColor,
    7px 0 0 -6px currentColor,
    -7px 0 0 -6px currentColor,
    5px 5px 0 -6px currentColor,
    -5px -5px 0 -6px currentColor,
    5px -5px 0 -6px currentColor,
    -5px 5px 0 -6px currentColor;
}
.nav-right .theme-toggle.r-theme-toggle:hover{
  border-color:color-mix(in oklab,var(--accent) 48%,var(--hairline-strong)) !important;
  background:color-mix(in oklab,var(--accent-soft) 64%,var(--surface-2)) !important;
  color:var(--fg) !important;
  transform:translateY(-1px);
}
.nav-cta{background:linear-gradient(135deg,#7c5cff 0%,#5f43f5 58%,#5269ff 100%);box-shadow:0 16px 38px -22px var(--accent-glow)}
.nav-cta:hover{background:linear-gradient(135deg,#8b73ff 0%,#6548ff 58%,#5c76ff 100%)}

.nav-drawer{display:none;overflow-y:auto;align-items:stretch;background:rgba(7,8,13,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
html[data-theme="light"] .nav-drawer{background:rgba(246,247,251,.92)}
.nav-drawer.open{display:block}
.nav-drawer-head{position:sticky;top:0;left:auto;right:auto;z-index:2;width:100%;max-width:520px;margin:0 auto;padding:max(16px, calc(env(safe-area-inset-top, 0px) + 14px)) 18px 14px;background:linear-gradient(180deg,rgba(7,8,13,.94),rgba(7,8,13,.76));border-bottom:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
html[data-theme="light"] .nav-drawer-head{background:linear-gradient(180deg,rgba(246,247,251,.96),rgba(246,247,251,.80));border-bottom-color:rgba(0,0,0,.07)}
.nav-drawer-head .nav-brand{display:inline-flex;min-height:44px;max-width:none;padding:0;border:0;background:transparent;font-size:17px;font-weight:720}
.nav-drawer-head .nav-brand:hover{color:var(--nav-link-hover);padding-left:0}
.nav-drawer-head .nav-brand::before{content:none}
.nav-drawer-close{width:44px;height:44px;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--fg)}
html[data-theme="light"] .nav-drawer-close{border-color:rgba(0,0,0,.12);background:rgba(255,255,255,.92);color:#1d1d1f}
.nav-drawer-inner{margin:0 auto;max-width:520px;padding:20px 18px max(36px, calc(env(safe-area-inset-bottom, 0px) + 36px));gap:0}
.nav-drawer-section{padding:22px 8px 8px;font-family:var(--sans);font-size:12px;font-weight:680;letter-spacing:.12em;color:rgba(245,245,247,.46)}
html[data-theme="light"] .nav-drawer-section{color:rgba(29,29,31,.48)}
.nav-drawer-inner a{min-height:56px;display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:12px;margin-top:1px;padding:10px 12px;border:0;border-radius:4px;background:rgba(255,255,255,.065);color:var(--fg);font-size:17px;font-weight:560;letter-spacing:-.018em;transition:background .2s var(--ease-out),transform .2s var(--ease-out)}
html[data-theme="light"] .nav-drawer-inner a{background:rgba(255,255,255,.88);color:#1d1d1f}
.nav-drawer-section + a{border-top-left-radius:18px;border-top-right-radius:18px}
.nav-drawer-inner a:has(+ .nav-drawer-section),.nav-drawer-inner a:last-child{border-bottom-left-radius:18px;border-bottom-right-radius:18px}
.nav-drawer-inner a:hover,.nav-drawer-inner a:focus-visible{padding-left:12px;background:rgba(255,255,255,.11);transform:translateY(-1px)}
html[data-theme="light"] .nav-drawer-inner a:hover,html[data-theme="light"] .nav-drawer-inner a:focus-visible{background:#fff}
.nav-drawer-inner a::before{content:"";width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#5269ff);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 10px 20px -16px var(--accent-glow)}
.nav-drawer-inner a[href*="storage"]::before{background:linear-gradient(135deg,#6d5cff,#4f8bff)}
.nav-drawer-inner a[href*="mail"]::before{background:linear-gradient(135deg,#0a84ff,#64d2ff)}
.nav-drawer-inner a[href*="social"]::before{background:linear-gradient(135deg,#ff2d55,#bf5af2)}
.nav-drawer-inner a[href*="weather"]::before{background:linear-gradient(135deg,#30d158,#64d2ff)}
.nav-drawer-inner a[href*="finance"]::before{background:linear-gradient(135deg,#34c759,#ffd60a)}
.nav-drawer-inner a[href*="brain"]::before{background:linear-gradient(135deg,#af52de,#5e5ce6)}
.nav-drawer-inner a[href*="observability"]::before{background:linear-gradient(135deg,#ff9f0a,#ff453a)}
.nav-drawer-inner a[href*="manifesto"]::before{background:linear-gradient(135deg,#8e8e93,#5e5ce6)}
.nav-drawer-inner a[href*="changelog"]::before{background:linear-gradient(135deg,#64d2ff,#0a84ff)}
.nav-drawer-inner a[href*="interfaces"]::before{background:linear-gradient(135deg,#7c5cff,#38bdf8)}
.nav-drawer-inner a .arrow{width:8px;height:8px;justify-self:center;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;color:rgba(245,245,247,.38);font-size:0;transform:rotate(45deg)}
html[data-theme="light"] .nav-drawer-inner a .arrow{color:rgba(29,29,31,.32)}
.nav-drawer-inner a:hover .arrow{color:currentColor;transform:rotate(45deg) translate(1px,-1px)}
html.drawer-open [id^="tbn-"],
body.drawer-open ~ [id^="tbn-"]{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
@media (max-width:900px){
  .nav{min-height:calc(64px + env(safe-area-inset-top, 0px));padding:env(safe-area-inset-top, 0px) 18px 0;grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
  .nav-links,.nav-cta{display:none}
  .nav-hamburger{display:inline-flex}
  .nav-brand{min-width:0;max-width:58vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-right{gap:10px}
}

/* Codex 2026-05-18: reference-style segmented header selector. */
.nav{
  min-height:calc(88px + env(safe-area-inset-top, 0px));
  padding:calc(env(safe-area-inset-top, 0px) + 14px) max(24px, calc((100vw - 1260px)/2 + 24px)) 14px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 84%,transparent),color-mix(in oklab,var(--bg) 42%,transparent));
  border-bottom:0;
  box-shadow:none;
}
.nav-links{
  gap:0;
  min-height:60px;
  padding:6px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(238,240,246,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px -34px rgba(0,0,0,.88);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
}
html[data-theme="light"] .nav-links{
  border-color:rgba(0,0,0,.04);
  background:#f0f0f3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 18px 36px -32px rgba(15,22,38,.45);
}
.nav-links a{
  min-width:clamp(116px,9vw,150px);
  min-height:48px;
  justify-content:center;
  gap:11px;
  padding:0 22px;
  border-radius:999px;
  color:rgba(245,245,247,.62);
  font-size:16px;
  font-weight:650;
  letter-spacing:-.018em;
  line-height:1;
  white-space:nowrap;
}
html[data-theme="light"] .nav-links a{
  color:rgba(29,29,31,.58);
}
.nav-links a:hover,
.nav-links a:focus-visible{
  color:var(--nav-link-hover);
  background:rgba(255,255,255,.08);
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a:focus-visible{
  color:#1d1d1f;
  background:rgba(255,255,255,.48);
}
.nav-links a.is-active,
.nav-links:not(.is-enhanced) a:first-child{
  color:#1d1d1f;
  background:rgba(255,255,255,.94);
  box-shadow:0 12px 28px -22px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.92) inset;
}
html[data-theme="light"] .nav-links a.is-active,
html[data-theme="light"] .nav-links:not(.is-enhanced) a:first-child{
  background:#fff;
  box-shadow:0 12px 28px -24px rgba(15,22,38,.48),0 1px 0 rgba(255,255,255,.95) inset;
}
.nav-link-icon{
  width:19px;
  height:19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 19px;
  color:currentColor;
}
.nav-link-icon svg{
  width:100%;
  height:100%;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-link-label{
  display:inline-block;
}
.nav-brand,
.theme-toggle,
.nav-hamburger,
.nav-cta{
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
.theme-toggle,
.nav-hamburger{
  background:rgba(238,240,246,.12);
  border-color:rgba(255,255,255,.12);
}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .nav-hamburger{
  background:rgba(255,255,255,.82);
  border-color:rgba(0,0,0,.08);
}
@media (max-width:1120px){
  .nav-links a{min-width:auto;padding:0 18px;font-size:15px}
  .nav-links a[href*="tinyblue"]{display:none}
}
@media (max-width:900px){
  .nav{
    min-height:calc(68px + env(safe-area-inset-top, 0px));
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 18px 10px;
  }
  .nav-links,.nav-cta{display:none}
}
@media (min-width:761px) and (max-width:900px){
  .nav{
    min-height:calc(76px + env(safe-area-inset-top, 0px));
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 18px 10px;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    column-gap:14px;
  }
  .nav-brand{max-width:24vw}
  .nav-links{display:flex}
  .nav-links a{padding:0 14px;font-size:14.5px}
  .nav-cta{display:none}
  .nav-hamburger{display:none}
}
@media (max-width:760px){
  .nav-links,.nav-cta{display:none}
  .nav-hamburger{display:inline-flex}
}
@media (max-height:480px) and (orientation:landscape) {
  .nav {
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 18px 0;
  }
  .nav-brand,
  .nav-right {
    min-height: 58px;
  }
  .theme-toggle,
  .nav-hamburger {
    width: 44px;
    height: 44px;
  }
  body.tbn-active {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  #tbn-root #tbn-bar {
    left: 50% !important;
    right: auto !important;
    bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    width: min(calc(100vw - 24px), 680px) !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
  }
  #tbn-root #tbn-logo {
    width: 26px !important;
    height: 34px !important;
  }
  #tbn-root #tbn-links {
    height: 34px !important;
    min-height: 34px !important;
  }
}

/* Codex 2026-05-18: CardsCloud-aligned top chrome geometry. */
.nav{
  --nav-glass:color-mix(in oklab,var(--bg-elev) 84%,transparent);
  --nav-line:color-mix(in oklab,var(--hairline-strong) 74%,transparent);
  min-height:calc(72px + env(safe-area-inset-top, 0px));
  height:auto;
  padding:env(safe-area-inset-top, 0px) max(24px, calc((100vw - 1260px)/2 + 24px)) 0;
  background:var(--nav-glass);
  border-bottom:1px solid var(--nav-line);
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 16px 36px -34px rgba(0,0,0,.45);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
html[data-theme="light"] .nav{
  --nav-glass:rgba(251,251,253,.86);
  --nav-line:rgba(0,0,0,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.72),0 16px 36px -34px rgba(15,22,38,.42);
}
.nav-brand,
.nav-right{
  min-height:72px;
}
.nav-brand{
  font-size:15px;
  font-weight:650;
  letter-spacing:-.02em;
  color:var(--fg);
}
.nav-links{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(108px,1fr);
  align-items:center;
  justify-self:center;
  height:54px;
  min-height:54px;
  gap:2px;
  padding:5px;
  border:1px solid color-mix(in oklab,var(--hairline-strong) 72%,transparent);
  border-radius:999px;
  background:color-mix(in oklab,var(--surface-2) 86%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab,#fff 22%,transparent),0 12px 30px -28px rgba(0,0,0,.44);
}
html[data-theme="light"] .nav-links{
  border-color:rgba(0,0,0,.08);
  background:#f4f4f6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 12px 30px -28px rgba(15,22,38,.34);
}
.nav-links a{
  min-width:0;
  min-height:44px;
  height:44px;
  padding:0 18px;
  gap:8px;
  color:var(--fg-dim);
  font-size:14px;
  font-weight:590;
  letter-spacing:-.012em;
  transition:color .18s var(--ease-out),background .18s var(--ease-out),box-shadow .18s var(--ease-out),transform .18s var(--ease-out);
}
.nav-link-icon{
  width:15px;
  height:15px;
  flex-basis:15px;
  opacity:.72;
}
.nav-link-icon svg{
  stroke-width:1.8;
}
.nav-links a:hover,
.nav-links a:focus-visible{
  color:var(--fg);
  background:color-mix(in oklab,var(--fg) 4%,transparent);
}
.nav-links a.is-active,
.nav-links:not(.is-enhanced) a:first-child{
  color:var(--fg);
  background:color-mix(in oklab,var(--bg-elev) 98%,transparent);
  box-shadow:0 8px 22px -18px rgba(0,0,0,.44),0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px color-mix(in oklab,var(--hairline-strong) 52%,transparent);
}
html[data-theme="light"] .nav-links a.is-active,
html[data-theme="light"] .nav-links:not(.is-enhanced) a:first-child{
  color:#1d1d1f;
  background:#fff;
  box-shadow:0 8px 22px -18px rgba(15,22,38,.34),0 1px 2px rgba(15,22,38,.05),inset 0 0 0 1px rgba(0,0,0,.06);
}
.nav-links a.is-active .nav-link-icon,
.nav-links:not(.is-enhanced) a:first-child .nav-link-icon{
  opacity:.9;
}
.nav-right{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
}
.nav-cta{
  order:1;
  min-height:44px;
  padding:0 22px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 16px 36px -20px color-mix(in oklab,var(--accent) 70%,transparent);
}
.nav-cta:hover{
  background:color-mix(in oklab,var(--accent) 84%,#000 16%);
}
.theme-toggle{
  order:2;
}
.nav-hamburger{
  order:3;
  display:inline-flex;
}
.theme-toggle,
.nav-hamburger{
  background:color-mix(in oklab,var(--bg-elev) 84%,transparent);
  border-color:var(--hairline-strong);
  color:var(--fg-dim);
  box-shadow:0 12px 28px -22px rgba(0,0,0,.45);
}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .nav-hamburger{
  background:rgba(255,255,255,.84);
  border-color:rgba(0,0,0,.10);
  color:rgba(29,29,31,.72);
}
.theme-toggle:hover,
.nav-hamburger:hover{
  color:var(--fg);
  border-color:color-mix(in oklab,var(--accent) 48%,var(--hairline-strong));
  background:color-mix(in oklab,var(--accent) 12%,var(--bg-elev));
}
.nav-drawer{
  inset:auto 12px auto 12px;
  top:calc(72px + env(safe-area-inset-top, 0px));
  z-index:60;
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 92px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height:calc(100svh - 92px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y:auto;
  padding:10px 10px 14px;
  border:1px solid var(--hairline-strong);
  border-radius:18px;
  background:color-mix(in oklab,var(--bg-elev) 90%,transparent);
  box-shadow:0 30px 80px rgba(0,0,0,.22);
  visibility:hidden;
  opacity:0;
  transform:translateY(-8px) scale(.985);
  pointer-events:none;
  transition:opacity .2s var(--ease-out),transform .26s var(--ease-out),visibility 0s linear .26s;
}
html[data-theme="light"] .nav-drawer{
  background:rgba(255,255,255,.92);
  border-color:rgba(0,0,0,.10);
}
.nav-drawer.open{
  display:flex;
  visibility:visible;
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  transition-delay:0s;
}
.nav-drawer-head{
  display:none;
}
.nav-drawer-inner{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  gap:0;
}
.nav-drawer-section{
  padding:10px 14px 6px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--fg-faint);
}
.nav-drawer-inner a{
  min-height:52px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 16px;
  gap:12px;
  margin:0;
  padding:12px 14px;
  border:0;
  border-bottom:1px solid color-mix(in oklab,var(--hairline) 70%,transparent);
  border-radius:0;
  background:color-mix(in oklab,var(--fg) 5%,transparent);
  color:var(--fg);
  font-size:16px;
  font-weight:550;
  letter-spacing:-.014em;
}
.nav-drawer-section + a{
  border-top-left-radius:14px;
  border-top-right-radius:14px;
}
.nav-drawer-inner a:has(+ .nav-drawer-section),
.nav-drawer-inner a:last-child{
  border-bottom:0;
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
}
.nav-drawer-inner a:hover,
.nav-drawer-inner a:focus-visible{
  padding-left:14px;
  color:var(--fg);
  background:color-mix(in oklab,var(--fg) 8%,transparent);
  transform:none;
}
.nav-drawer-inner a::before{
  width:28px;
  height:28px;
  border-radius:8px;
}
@media (min-width:901px){
  .nav-drawer{
    left:auto;
    right:max(20px, calc((100vw - 1260px)/2 + 24px));
    top:calc(76px + env(safe-area-inset-top, 0px));
    width:min(420px, calc(100vw - 40px));
    max-height:calc(100vh - 104px - env(safe-area-inset-top, 0px));
    max-height:calc(100svh - 104px - env(safe-area-inset-top, 0px));
    padding:8px;
    border-radius:22px;
    background:color-mix(in oklab,var(--bg-elev) 82%,transparent);
    box-shadow:
      0 34px 90px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    backdrop-filter:blur(28px) saturate(180%);
    transform-origin:top right;
  }
  html[data-theme="light"] .nav-drawer{
    background:rgba(255,255,255,.86);
    box-shadow:
      0 34px 90px rgba(15,22,38,.18),
      inset 0 1px 0 rgba(255,255,255,.92);
  }
  .nav-drawer-inner a{
    min-height:46px;
    grid-template-columns:24px minmax(0,1fr) 14px;
    gap:10px;
    padding:10px 12px;
    font-size:14px;
  }
  .nav-drawer-inner a::before{
    width:24px;
    height:24px;
    border-radius:7px;
  }
  .nav-drawer-section{
    padding:9px 12px 6px;
    font-size:9.5px;
  }
  body.drawer-open{
    overflow:auto;
  }
}
@media (max-width:1120px){
  .nav-links a[href*="tinyblue"]{display:none}
}
@media (min-width:761px) and (max-width:900px){
  .nav{
    min-height:calc(72px + env(safe-area-inset-top, 0px));
    padding:env(safe-area-inset-top, 0px) 18px 0;
  }
  .nav-brand,
  .nav-right{min-height:72px}
  .nav-links{display:grid;height:54px;min-height:54px}
  .nav-links a{height:44px;min-height:44px;padding:0 16px;font-size:14px}
  .nav-hamburger{display:inline-flex}
}
@media (max-width:760px){
  .nav{
    min-height:calc(64px + env(safe-area-inset-top, 0px));
    padding:env(safe-area-inset-top, 0px) 18px 0;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:14px;
  }
  .nav-brand,
  .nav-right{min-height:64px}
  .nav-brand{max-width:56vw}
  .nav-links,
  .nav-cta{display:none}
  .nav-hamburger{display:inline-flex}
  .nav-drawer{
    top:calc(64px + env(safe-area-inset-top, 0px));
    max-height:calc(100vh - 84px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height:calc(100svh - 84px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   Codex 2026-05-18: Apple-tier interactions (shared)
     B — Cursor-tracked specular highlight on inner-page hero glass
     D — Cross-document View Transitions
     Shared count-up utility (tabular-num display)
     Telemetry-pulse base classes (used on landing & elsewhere)
   ============================================================ */

/* B — specular highlight on glass surfaces (inner-page heroes + crosslinks) */
.topic-hero-art,
.topic-feature,
.visual-card{
  --mx:50%;
  --my:50%;
}
.topic-hero-art::before,
.topic-feature::before,
.visual-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(320px circle at var(--mx) var(--my),rgba(255,255,255,.18),transparent 55%);
  opacity:0;
  transition:opacity .4s var(--ease-out);
  mix-blend-mode:screen;
  border-radius:inherit;
}
.visual-card::before{
  background:radial-gradient(220px circle at var(--mx) var(--my),rgba(255,255,255,.20),transparent 55%);
}
html[data-theme="light"] .topic-hero-art::before,
html[data-theme="light"] .topic-feature::before,
html[data-theme="light"] .visual-card::before{
  background:radial-gradient(320px circle at var(--mx) var(--my),rgba(91,61,245,.16),transparent 55%);
  mix-blend-mode:multiply;
}
.topic-hero-art:hover::before,
.topic-feature:hover::before,
.visual-card:hover::before{opacity:1}
.topic-hero-caption{position:relative;z-index:2}
.visual-card span{z-index:2}
@media (prefers-reduced-motion:reduce),(hover:none){
  .topic-hero-art::before,
  .topic-feature::before,
  .visual-card::before{display:none!important}
}

/* D — Cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+; older browsers fall through to default navigation) */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.42s;
  animation-timing-function:cubic-bezier(.16,1,.3,1);
}
::view-transition-group(topic-hero){
  animation-duration:.5s;
  animation-timing-function:cubic-bezier(.16,1,.3,1);
}
::view-transition-old(topic-hero),
::view-transition-new(topic-hero){
  height:100%;
  width:100%;
  object-fit:cover;
}
.nav-brand{view-transition-name:nav-brand}
.topic-hero-img{view-transition-name:topic-hero}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(topic-hero),
  ::view-transition-new(topic-hero){animation-duration:1ms!important}
}

/* Shared count-up utility (tabular-num to prevent layout shift) */
.count-up{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* I — Variable-weight hover on nav links. Composes with the segmented pill
   chrome above. Uses !important to win against the existing chrome rules
   (which set font-weight at the same selector specificity). */
.nav-links.is-enhanced a{
  transition:
    color .25s var(--ease-out),
    font-weight .25s var(--ease-out),
    font-variation-settings .25s var(--ease-out),
    background-color .25s var(--ease-out) !important;
}
.nav-links.is-enhanced a:hover,
.nav-links.is-enhanced a:focus-visible{
  color:var(--fg) !important;
  font-weight:700 !important;
  font-variation-settings:"wght" 680 !important;
}
.nav-links.is-enhanced a.is-active{
  color:var(--fg) !important;
  font-weight:700 !important;
  font-variation-settings:"wght" 680 !important;
}
@media (prefers-reduced-motion:reduce){
  .nav-links.is-enhanced a{transition:color .25s var(--ease-out) !important}
}

/* Shared live-dot used by landing pulse and any inner-page live indicators */
.live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.55),0 0 10px rgba(52,211,153,.65);
  animation:livePulse 2.4s var(--ease-in-out) infinite;
  display:inline-block;
}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.55),0 0 10px rgba(52,211,153,.65)}
  50%{box-shadow:0 0 0 8px rgba(52,211,153,0),0 0 14px rgba(52,211,153,.55)}
}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* Inner-page Apple-tier shared bits (2026-05-19) */
.dyn-island{position:fixed;top:84px;left:50%;transform:translate(-50%,-8px) scale(.94);z-index:49;opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
.dyn-island[data-state="visible"]{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.dyn-island-trigger{display:inline-flex;align-items:center;gap:12px;height:38px;padding:0 14px;border:1px solid var(--hairline-strong);border-radius:999px;background:rgba(10,10,12,.94);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);color:var(--fg);font-family:var(--mono);font-size:12px;letter-spacing:.04em;cursor:pointer;box-shadow:0 22px 56px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04) inset;transition:background .3s var(--ease-out),border-color .3s var(--ease-out),transform .25s var(--ease-out);text-decoration:none}
html[data-theme="light"] .dyn-island-trigger{background:rgba(255,255,255,.94);border-color:rgba(0,0,0,.12);box-shadow:0 22px 56px -28px rgba(15,22,38,.55),0 0 0 1px rgba(255,255,255,.6) inset}
.dyn-island-trigger:hover{border-color:var(--hairline-strong);transform:translateY(-1px)}
.dyn-dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 10px rgba(52,211,153,.6);animation:livePulse 2.4s var(--ease-in-out) infinite}
.dyn-island[data-bridge="bad"] .dyn-dot{background:#f87171;box-shadow:0 0 10px rgba(248,113,113,.65)}
.dyn-text{color:var(--fg);letter-spacing:.01em}
.dyn-divider{width:1px;height:18px;background:var(--hairline);flex-shrink:0}
.dyn-stat{display:inline-flex;align-items:baseline;gap:4px;color:var(--fg-dim)}
.dyn-stat-n{color:var(--fg);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.dyn-stat-lbl{font-size:10.5px;color:var(--fg-faint)}
.dyn-arrow{width:13px;height:13px;color:var(--fg-faint);transition:color .25s var(--ease-out),transform .25s var(--ease-out)}
.dyn-island-trigger:hover .dyn-arrow{color:var(--accent-2);transform:translateY(-2px)}
@media (max-width:640px){.dyn-island{top:72px}.dyn-island-trigger{font-size:11.5px;height:34px;padding:0 12px;gap:10px}.dyn-island .dyn-stat:last-of-type{display:none}}
@media (prefers-reduced-motion:reduce){.dyn-island{transition:opacity .25s linear}.dyn-island[data-state="visible"]{transform:translate(-50%,0)}.dyn-dot{animation:none}}
.ticker{position:relative;margin-top:clamp(40px,6vh,80px);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0));overflow:hidden}
html[data-theme="light"] .ticker{background:linear-gradient(180deg,#fbfbfd,#f7f7fa)}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg) 5%,transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg) 5%,transparent)}
.ticker-rail{display:flex;align-items:center;gap:18px;height:56px;padding:0 var(--gutter);max-width:var(--max);margin:0 auto}
.ticker-tag{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);z-index:3}
.ticker-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.7);animation:livePulse 2.4s var(--ease-in-out) infinite}
.ticker-track{flex:1;min-width:0;display:flex;gap:28px;white-space:nowrap;animation:tickerScroll 80s linear infinite;will-change:transform}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-item{font-family:var(--mono);font-size:12.5px;color:var(--fg-dim);letter-spacing:.01em;flex-shrink:0}
.ticker-item strong{color:var(--fg);margin-right:8px;font-weight:600}
.ticker-item.is-missing strong{color:var(--fg-faint)}
.ticker-item.is-missing{opacity:.65}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap;gap:14px}.ticker{overflow-x:auto}}
.brand-popover{position:fixed;top:calc(env(safe-area-inset-top,0px) + 80px);left:clamp(16px,4vw,32px);z-index:60;width:min(300px,calc(100vw - 32px));opacity:0;pointer-events:none;transform:translateY(-6px) scale(.96);transition:opacity .28s var(--ease-out),transform .35s var(--ease-out)}
.brand-popover.is-visible{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.brand-pop-card{border:1px solid var(--hairline-strong);border-radius:18px;background:rgba(10,10,12,.85);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);box-shadow:0 30px 80px -50px rgba(0,0,0,.7);overflow:hidden}
html[data-theme="light"] .brand-pop-card{background:rgba(255,255,255,.94);border-color:rgba(0,0,0,.10)}
.brand-pop-card header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--hairline)}
.brand-pop-card .kicker{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.brand-pop-card dl{display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:9px;padding:14px 16px;font-family:var(--mono);font-size:11.5px;margin:0}
.brand-pop-card dt{color:var(--fg-faint);letter-spacing:.04em}
.brand-pop-card dd{color:var(--fg);margin:0;word-break:break-word}
.brand-pop-close{width:26px;height:26px;display:grid;place-items:center;border:0;background:transparent;color:var(--fg-faint);cursor:pointer;font-size:13px;border-radius:999px;transition:background .2s var(--ease-out),color .2s var(--ease-out)}
.brand-pop-close:hover{background:var(--surface-2);color:var(--fg)}
body.tbn-active .dyn-island,
body.tbn-active .brand-popover{
  display:none !important;
}

/* Drawer route glyphs: replace the old colored square markers with SF-style line symbols. */
.nav-drawer-inner a{
  --drawer-glyph:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
}
.nav-drawer-inner a::before{
  content:"";
  width:24px;
  height:24px;
  justify-self:center;
  border-radius:0;
  background:currentColor !important;
  color:color-mix(in oklab,var(--accent-2) 78%,var(--fg) 22%);
  box-shadow:none !important;
  opacity:.92;
  -webkit-mask:var(--drawer-glyph) center/20px 20px no-repeat;
  mask:var(--drawer-glyph) center/20px 20px no-repeat;
}
html[data-theme="light"] .nav-drawer-inner a::before{
  color:color-mix(in oklab,var(--accent) 72%,#1d1d1f 28%);
}
.nav-drawer-inner a:hover::before,
.nav-drawer-inner a:focus-visible::before{opacity:1}
.nav-drawer-inner a[href*="storage"]{--drawer-glyph:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5.5' rx='7' ry='3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M5 5.5v13c0 1.7 3.1 3 7 3s7-1.3 7-3v-13M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.nav-drawer-inner a[href*="mail"]{--drawer-glyph:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='m5 8 7 5 7-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.nav-drawer-inner a[href*="social"]{--drawer-glyph:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M3.8 19c.8-3 2.6-4.5 5.2-4.5S13.4 16 14.2 19' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M15.5 6.2a3 3 0 0 1 0 5.6M16.8 14.8c1.8.6 3 2 3.4 4.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.nav-drawer-inner a[href*="weather"]{--drawer-glyph:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 18h9.2a3.8 3.8 0 0 0 .2-7.6A6 6 0 0 0 6 11.8 3.2 3.2 0 0 0 8 18Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 21h10' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.nav-drawer-inner a[href*="finance"]{--drawer-glyph:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 16 5-5 4 4 7-8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 7h5v5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.nav-drawer-inner a[href*="brain"]{--drawer-glyph:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='8' r='2.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='17' cy='7' r='2.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='17' r='2.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M9.2 8h5.2M8.3 10l2.5 5M15.8 9.2 13.2 15' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.nav-drawer-inner a[href*="observability"]{--drawer-glyph:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 12h4l2-6 4 12 2-6h6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.nav-drawer-inner a[href*="manifesto"]{--drawer-glyph:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 21c4 0 6.5-2.8 6.5-6.6 0-3.3-2-5.5-4.1-7.8-.8 2.2-2 3.5-3.7 4.4.2-2.8-.7-5-2.8-7C7.6 7.9 5 10.3 5 14.4 5 18.2 8.4 21 12.5 21Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E")}
.nav-drawer-inner a[href*="changelog"]{--drawer-glyph:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M12 7v5l3.5 2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.nav-drawer-inner a[href*="interfaces"]{--drawer-glyph:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E")}

/* Liquid Glass navigation eye, ported from tinyblue.dev's top bar. */
.nav-links{
  --nav-eye-x:5px;
  --nav-eye-y:5px;
  --nav-eye-w:108px;
  --nav-eye-h:44px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transform:translateZ(0);
}
.nav-glass-eye{
  position:absolute;
  left:0;
  top:0;
  z-index:0;
  width:var(--nav-eye-w);
  height:var(--nav-eye-h);
  border-radius:999px;
  pointer-events:none;
  opacity:0;
  transform:translate3d(var(--nav-eye-x),var(--nav-eye-y),0);
  background:
    linear-gradient(135deg,
      color-mix(in oklab,var(--bg-elev) 92%,transparent),
      color-mix(in oklab,var(--bg) 66%,transparent) 48%,
      color-mix(in oklab,var(--fg) 5%,transparent)),
    color-mix(in oklab,var(--bg-elev) 82%,transparent);
  border:1px solid color-mix(in oklab,var(--hairline-strong) 48%,#fff 36%);
  box-shadow:
    inset 0 1px 1px color-mix(in oklab,#fff 92%,transparent),
    inset 0 -1px 1px color-mix(in oklab,var(--fg) 8%,transparent),
    0 1px 2px color-mix(in oklab,var(--fg) 8%,transparent),
    0 16px 34px -24px color-mix(in oklab,var(--fg) 40%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(190%) contrast(1.04);
  backdrop-filter:blur(18px) saturate(190%) contrast(1.04);
  transition:
    transform 560ms cubic-bezier(.16,1,.3,1),
    width 560ms cubic-bezier(.16,1,.3,1),
    height 560ms cubic-bezier(.16,1,.3,1),
    opacity 180ms var(--ease-out),
    box-shadow 260ms var(--ease-out);
}
.nav-glass-eye::before,
.nav-glass-eye::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
}
.nav-glass-eye::before{
  background:
    radial-gradient(120% 90% at 18% 0%,color-mix(in oklab,#fff 78%,transparent),transparent 48%),
    radial-gradient(90% 80% at 86% 100%,color-mix(in oklab,var(--accent-2) 14%,transparent),transparent 62%);
  opacity:.72;
  mix-blend-mode:screen;
}
.nav-glass-eye::after{
  inset:auto 11px 4px;
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,#fff 72%,var(--accent-2) 28%),transparent);
  opacity:.74;
}
.nav-links.has-glass-eye .nav-glass-eye{opacity:1}
html[data-theme="dark"] .nav-glass-eye{
  background:
    linear-gradient(135deg,
      color-mix(in oklab,#fff 12%,transparent),
      color-mix(in oklab,var(--bg-elev) 70%,transparent) 52%,
      color-mix(in oklab,#fff 8%,transparent)),
    color-mix(in oklab,var(--bg-elev) 74%,transparent);
  border-color:color-mix(in oklab,#fff 16%,var(--hairline-strong));
  box-shadow:
    inset 0 1px 1px color-mix(in oklab,#fff 18%,transparent),
    inset 0 -1px 1px color-mix(in oklab,#000 70%,transparent),
    0 1px 2px rgba(0,0,0,.34),
    0 20px 38px -24px rgba(0,0,0,.72);
}
.nav-links.has-glass-eye.is-eye-hovered .nav-glass-eye{
  box-shadow:
    inset 0 1px 1px color-mix(in oklab,#fff 96%,transparent),
    inset 0 -1px 1px color-mix(in oklab,var(--fg) 9%,transparent),
    0 1px 2px color-mix(in oklab,var(--fg) 9%,transparent),
    0 20px 42px -26px color-mix(in oklab,var(--fg) 46%,transparent);
}
.nav-links.has-glass-eye a{
  position:relative;
  z-index:1;
}
.nav-links.has-glass-eye a:hover,
.nav-links.has-glass-eye a:focus-visible,
.nav-links.has-glass-eye a.is-active,
.nav-links.has-glass-eye:not(.is-enhanced) a:first-child{
  background:transparent !important;
  box-shadow:none !important;
  color:var(--fg) !important;
}
.nav-links.has-glass-eye a.is-active .nav-link-icon,
.nav-links.has-glass-eye:not(.is-enhanced) a:first-child .nav-link-icon{opacity:.9}
@media (prefers-reduced-motion:reduce){
  .nav-glass-eye{
    transition:opacity 120ms linear !important;
  }
}
.motion-chip{display:inline-flex;align-items:center;padding:4px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.motion-chip button{appearance:none;border:0;background:transparent;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .2s var(--ease-out),color .2s var(--ease-out)}
.motion-chip button:hover{color:var(--fg-dim)}
.motion-chip button[aria-pressed="true"]{background:var(--accent-soft);color:var(--fg)}
html[data-motion-intensity="subtle"] #field{display:none}
html[data-motion-intensity="subtle"] .ticker-track,html[data-motion-intensity="subtle"] .live-dot,html[data-motion-intensity="subtle"] .ticker-tag::before,html[data-motion-intensity="subtle"] .dyn-dot{animation:none !important}
html[data-motion-intensity="showcase"] .ticker-track{animation-duration:50s}
::view-transition-old(theme-root),::view-transition-new(theme-root){animation-duration:.42s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.nav-brand{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.cmdk-overlay{position:fixed;inset:0;z-index:90;display:none;place-items:start center;padding:12vh 16px 16px;background:rgba(10,10,12,.65);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
html[data-theme="light"] .cmdk-overlay{background:rgba(251,251,253,.72)}
.cmdk-overlay.is-open{display:grid;animation:cmdkIn .25s var(--ease-out)}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.cmdk-panel{width:min(620px,100%);max-height:72vh;display:flex;flex-direction:column;border:1px solid var(--hairline-strong);border-radius:18px;background:var(--bg-elev);box-shadow:0 40px 100px -40px var(--accent-glow);overflow:hidden}
.cmdk-search{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--hairline)}
.cmdk-search svg{width:16px;height:16px;color:var(--fg-faint);flex-shrink:0}
.cmdk-search input{flex:1;border:0;background:transparent;color:var(--fg);font-family:var(--sans);font-size:16px;letter-spacing:-.005em;outline:none;min-width:0}
.cmdk-search input::placeholder{color:var(--fg-faint)}
.cmdk-kbd{font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:5px;border:1px solid var(--hairline-strong);background:var(--surface-2);color:var(--fg-faint)}
.cmdk-list{overflow:auto;padding:8px;flex:1;min-height:0}
.cmdk-section{padding:14px 12px 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.cmdk-section:first-child{padding-top:6px}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--fg);font-size:14.5px;letter-spacing:-.005em}
.cmdk-item.is-active{background:var(--accent-soft);color:var(--fg)}
.cmdk-item-meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--fg-faint)}
.cmdk-empty{padding:32px 16px;text-align:center;color:var(--fg-faint);font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.cmdk-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:10.5px;color:var(--fg-faint);letter-spacing:.04em}
.cmdk-foot .cmdk-kbd{font-size:9.5px}
@media (prefers-reduced-motion:reduce){.cmdk-overlay.is-open{animation:none}}

@media (max-height:480px) and (orientation:landscape) {
  .nav {
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 18px 0;
  }
  .nav-brand,
  .nav-right {
    min-height: 58px;
  }
  .theme-toggle,
  .nav-hamburger {
    width: 44px;
    height: 44px;
  }
  body.tbn-active {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  #tbn-root #tbn-bar {
    left: 50% !important;
    right: auto !important;
    bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    width: min(calc(100vw - 24px), 680px) !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
  }
  #tbn-root #tbn-logo {
    width: 26px !important;
    height: 34px !important;
  }
  #tbn-root #tbn-links {
    height: 34px !important;
    min-height: 34px !important;
  }
}