/* info.sahaj.si · "Attention Is All You See"
   One accent (vermilion "activation"), two themes, three typefaces. */

@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --paper: #F6F2EA;
  --paper-2: #EEE8DC;
  --paper-3: #E6DECF;
  --ink: #16140F;
  --ink-2: #48443B;
  --ink-3: #6A6458;
  --rule: #D9D0BF;
  --rule-2: #C9BFAB;
  --accent: #B23E0E;
  --accent-ink: #FFF8F2;
  --accent-soft: rgba(178, 62, 14, .12);
  --accent-line: rgba(178, 62, 14, .55);
  --glow: 0 0 0 transparent;
  --grain-opacity: .055;

  --gutter: clamp(16px, 4.2vw, 56px);
  --maxw: 1320px;
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --d: 0; /* layer depth 0..1, set per section */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B1020; --paper-2: #10172C; --paper-3: #172040;
    --ink: #ECE8DE; --ink-2: #B9B5AA; --ink-3: #8F8C84;
    --rule: #1E2742; --rule-2: #2A3557;
    --accent: #FF8A5B; --accent-ink: #1A0B04;
    --accent-soft: rgba(255, 138, 91, .14); --accent-line: rgba(255, 138, 91, .6);
    --glow: 0 0 18px rgba(255, 138, 91, .35);
    --grain-opacity: .04;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0B1020; --paper-2: #10172C; --paper-3: #172040;
  --ink: #ECE8DE; --ink-2: #B9B5AA; --ink-3: #8F8C84;
  --rule: #1E2742; --rule-2: #2A3557;
  --accent: #FF8A5B; --accent-ink: #1A0B04;
  --accent-soft: rgba(255, 138, 91, .14); --accent-line: rgba(255, 138, 91, .6);
  --glow: 0 0 18px rgba(255, 138, 91, .35);
  --grain-opacity: .04;
  color-scheme: dark;
}

/* ---------- no visible scrollbars (they clash with the design); scrolling itself still works everywhere ---------- */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 clamp(16px, .25vw + 15px, 18px)/1.6 var(--sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
body::before { /* paper grain: a small pre-rendered noise tile; no blend mode or filter, which are slow to composite */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: url("/assets/img/grain-light.png");
}
:root[data-theme="dark"] body::before { background-image: url("/assets/img/grain-dark.png"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { background-image: url("/assets/img/grain-dark.png"); } }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.mono { font-family: var(--mono); font-size: .78em; letter-spacing: -.01em; font-feature-settings: "zero" 0; }
.muted { color: var(--ink-3); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- token-highlight links ---------- */
.tok-link {
  text-decoration: none; position: relative;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) no-repeat 0 100% / 0% 100%,
              linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  transition: background-size .45s var(--ease-out), color .2s;
  padding: 0 .12em; margin: 0 -.12em; border-radius: 2px;
}
.tok-link:hover, .tok-link:focus-visible { background-size: 100% 100%, 100% 1px; color: var(--accent); }

/* ---------- inference shimmer for buttons ---------- */
.shimmer { position: relative; overflow: hidden; isolation: isolate; }
.shimmer::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, var(--accent-soft) 45%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, var(--accent-soft) 55%, transparent 80%);
  transform: translateX(-120%);
}
.shimmer:hover::after, .shimmer:focus-visible::after, .shimmer.is-busy::after { animation: infer 1.1s var(--ease) 1; }
.shimmer.is-busy::after { animation-iteration-count: infinite; }
@keyframes infer { to { transform: translateX(120%); } }

.btn {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .65em 1.1em;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer; font-weight: 500; transition: transform .2s var(--ease), background .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); }

/* ---------- header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 18px;
  padding: 14px var(--gutter); transition: background .3s, border-color .3s, transform .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-head.is-scrolled { background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-color: var(--rule); }
/* brand: see the "header brand" block at the end of this file */
.site-nav { display: none; gap: 22px; margin-left: auto; font-size: 15px; }
.head-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.site-nav + .head-tools { margin-left: 18px; }
.kbd-btn {
  display: none; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px 0 12px;
  border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; cursor: pointer; color: var(--ink-2);
}
.kbd-btn:hover { border-color: var(--ink-3); color: var(--ink); }
kbd { font: 500 11px/1 var(--mono); padding: 4px 6px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-2); }

/* temperature switch = theme toggle */
.temp {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; min-width: 44px; padding: 0 10px;
  border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; cursor: pointer; color: var(--ink-2);
}
.temp:hover { color: var(--ink); border-color: var(--ink-3); }
.temp-label { display: none; }
.temp-track { position: relative; width: 34px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #2C3E78, #8C8A86 50%, var(--accent)); opacity: .85; }
.temp-knob {
  position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink); transition: left .45s var(--ease-out);
}
[data-theme-state="light"] .temp-knob { left: 15%; }
[data-theme-state="dark"] .temp-knob { left: 85%; }
.temp-val { min-width: 3.4ch; text-align: left; font-size: 11px; }

/* ---------- layer rail ---------- */
.rail { display: none; }
@media (min-width: 1100px) {
  .rail {
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
    position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 40; pointer-events: none;
  }
  .rail-label, .rail-name { font-size: 11px; color: var(--ink-2); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .rail-name { color: var(--accent); max-height: 30vh; overflow: hidden; text-overflow: ellipsis; }
  .rail-ticks { display: flex; flex-direction: column; pointer-events: auto; }
  /* 24px-tall hit area (WCAG 2.5.8); the visible tick is the pseudo-element. */
  .rail-ticks a { position: relative; display: block; width: 28px; height: 24px; margin-left: auto; }
  .rail-ticks a::before { content: ""; position: absolute; right: 0; top: 11px; width: 12px; height: 2px; background: var(--rule-2); transition: width .35s var(--ease-out), background .3s; }
  .rail-ticks a:hover::before { background: var(--ink-3); width: 18px; }
  .rail-ticks a.is-past::before { background: var(--ink-3); }
  .rail-ticks a.is-on::before { width: 26px; background: var(--accent); box-shadow: var(--glow); }
}
.rail-mobile {
  position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--accent) var(--p, 0%), transparent 0);
}
@media (min-width: 1100px) { .rail-mobile { display: none; } }

/* ---------- layout ---------- */
main { position: relative; z-index: 1; }
.layer { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(88px, 13vh, 160px) var(--gutter); }
.layer-head { max-width: 900px; margin-bottom: clamp(36px, 6vw, 72px); }
.layer-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); margin-bottom: 18px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.layer-tag::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.layer-title { font: 400 clamp(2.3rem, 6.2vw, 5.2rem)/1.0 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.layer-title em { letter-spacing: -.02em; font-size: 1.08em; }
.layer-sub { margin-top: 22px; max-width: 62ch; color: var(--ink-2); font-size: 1.04em; text-wrap: pretty; }

/* Deeper layers are calmer: raw token scaffolding fades, type gets more editorial. */
.layer[data-layer="1"] { --d: 0; }
.layer[data-layer="2"] { --d: .1; }
.layer[data-layer="3"] { --d: .2; }
.card.layer { --d: .4; }
.layer[data-layer="9"] { --d: .7; }
.layer[data-layer="10"] { --d: .8; }
.layer[data-layer="11"] { --d: .9; }
.layer[data-layer="12"] { --d: 1; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(84px, 12vh, 150px); /* room above the name for the popup on tall screens; short screens place it below instead */ padding-bottom: clamp(36px, 6vh, 72px); }
.hero-grid { display: grid; gap: 10px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 12px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: var(--glow); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.hero-name { font: italic 400 clamp(4.1rem, min(17vw, 27vh), 14.5rem)/.86 var(--serif); letter-spacing: -.035em; margin: 14px 0 4px -.04em; }
.hero-title { font: 450 clamp(1.45rem, 4.6vw, 3.6rem)/1.08 var(--sans); letter-spacing: -.03em; max-width: 19ch; min-height: 1.2em; }
/* The tagline is one line from 320px up; below that it may wrap, so only the narrowest phones reserve two lines. */
@media (max-width: 340px) { .hero-title { min-height: 2.3em; } .hero-title .tk { white-space: pre-wrap; } }
.hero-title .k { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--accent); }
.hero-trace { margin-top: 10px; min-height: 1.5em; color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .hero-trace .m-tail { display: none; } }
.hero-foot { display: grid; gap: 22px; margin-top: clamp(20px, 3.6vh, 40px); align-items: end; }
.hero-lede { max-width: 46ch; color: var(--ink-2); text-wrap: pretty; }
@keyframes blink { 50% { opacity: 0; } }
.focus-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; font-size: 12px; }
.focus-chips li { display: inline-flex; gap: 8px; align-items: center; padding: 6px 11px; border: 1px dashed var(--rule-2); border-radius: 6px; color: var(--ink-2); }
.tid { color: var(--ink-3); font-size: 10px; }
.scroll-cue { position: absolute; left: var(--gutter); bottom: 26px; display: flex; align-items: center; gap: 12px; color: var(--ink-3); text-decoration: none; font-size: 11px; }
.cue-line { width: 64px; height: 1px; background: var(--rule-2); position: relative; overflow: hidden; }
.cue-line::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-100%); animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { 60%, 100% { transform: translateX(100%); } }

/* generated tokens */
.gen { position: relative; }
.js .gen:not(.is-done) { visibility: hidden; }
.js .gen.is-live { visibility: visible; }
.tk { position: relative; display: inline; white-space: pre; }
.tk.is-new { animation: sharpen .55s var(--ease-out) both; }
@keyframes sharpen { from { filter: blur(10px); opacity: 0; } 60% { opacity: 1; } to { filter: blur(0); opacity: 1; } }
.gen .tk + .tk::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 14%; width: 1px; background: var(--rule-2); opacity: calc(1 - var(--fade, 0)); transition: opacity 1.2s; }
.gen.is-done .tk::before { --fade: 1; }

.dist {
  position: absolute; left: 0; top: calc(100% + 12px); z-index: 30; width: 170px; padding: 8px 10px 9px;
  font: 500 10.5px/1.25 var(--mono); letter-spacing: 0; color: var(--ink-2); font-style: normal;
  background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1px solid var(--rule-2); border-radius: 8px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none;
  animation: distIn .18s var(--ease-out) both;
}

.dist.is-out { animation: distOut .3s var(--ease) forwards; }
/* Transform and clip only: an opacity fade would briefly make the chart text fail contrast checks.
   The clip box is 12px larger on every side so the notch (which sits outside the border) is never cut off. */
@keyframes distIn { from { transform: translateY(-4px); clip-path: inset(50%); } to { clip-path: inset(-12px); } }
@keyframes distOut { to { transform: translateY(4px); clip-path: inset(50%); } }
/* placePopup() (popup.js) sets data-side and --nx / --ny so this notch always points at the token it describes. */
.dist::after { content: ""; position: absolute; width: 9px; height: 9px; background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1px solid var(--rule-2); transform: rotate(45deg); }
.dist[data-side="above"]::after { bottom: -6px; left: calc(var(--nx, 16px) - 4px); border-top: 0; border-left: 0; }
.dist[data-side="below"]::after { top: -6px; left: calc(var(--nx, 16px) - 4px); border-bottom: 0; border-right: 0; }
.dist[data-side="right"]::after { left: -6px; top: calc(var(--ny, 16px) - 4px); border-top: 0; border-right: 0; }
.dist[data-side="left"]::after { right: -6px; top: calc(var(--ny, 16px) - 4px); border-bottom: 0; border-left: 0; }
.dist-row { display: grid; grid-template-columns: 7ch 1fr 3.6ch; align-items: center; gap: 7px; padding: 1.5px 0; }
.dist-tok { white-space: pre; overflow: hidden; text-overflow: clip; }
.dist-bar { height: 5px; border-radius: 3px; background: var(--rule); position: relative; overflow: hidden; }
.dist-bar i { position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--ink-3); transition: width .09s linear; border-radius: 3px; }
.dist-p { text-align: right; color: var(--ink-3); }
.dist-row.is-pick .dist-tok, .dist-row.is-pick .dist-p { color: var(--accent); }
.dist-row.is-pick .dist-bar i { background: var(--accent); }

/* ---------- about ---------- */
.about-grid { display: grid; gap: 34px; }
.portrait { margin: 0; width: min(260px, 100%); position: relative; }
.portrait-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; border: 1px solid var(--rule-2); background: var(--paper-2); isolation: isolate; }
.portrait-frame picture { display: block; width: 100%; height: 100%; }
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; filter: grayscale(.12) contrast(1.02); }
.cnn-cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .3s; }
.portrait figcaption { margin-top: 14px; color: var(--ink-3); font-size: 11px; line-height: 1.4; min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.about-text { display: grid; gap: 18px; max-width: 60ch; }
.about-text .lead { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.38; letter-spacing: -.015em; }
.about-text p:not(.lead) { color: var(--ink-2); }
.facts { display: grid; gap: 0; border-top: 1px solid var(--rule); font-size: 13px; }
.facts div { display: grid; grid-template-columns: minmax(13ch, max-content) minmax(0, 1fr); gap: 4px 24px; padding: 11px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 100px; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

/* ---------- embedding map: watch it learn, then ask it ---------- */
:root { --m0: #2E8B62; --m1: #3C6FD1; --m2: #BD7A0C; --m3: #A24F90; --m4: #1B8A92; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --m0: #6FD0A0; --m1: #86A9FF; --m2: #F4B94F; --m3: #DE98D3; --m4: #5CCFD6; } }
:root[data-theme="dark"] { --m0: #6FD0A0; --m1: #86A9FF; --m2: #F4B94F; --m3: #DE98D3; --m4: #5CCFD6; }

.map-pin { position: relative; }
.map-sticky { display: flex; flex-direction: column; gap: 16px; }
/* Wide screens: the section pins for about 1.5 screens while scrolling trains the map. Elsewhere it is a normal block. */
@media (min-width: 1000px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .map-pin { height: 280vh; }
  .map-sticky { position: sticky; top: 76px; height: calc(100svh - 92px); min-height: 520px; }
  .map-grid { flex: 1; min-height: 0; }
  .map-main { height: 100%; }
  .map-stage { height: 100% !important; }
}

.map-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.map-q { flex: 1 1 320px; min-width: 0; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); font: 16px var(--sans); }
.map-q::placeholder { color: var(--ink-3); }
.map-q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.map-go { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 15px var(--sans); cursor: pointer; }
.map-status { flex-basis: 100%; min-height: 1.3em; color: var(--ink-3); font-size: 11px; order: 3; }
@media (min-width: 720px) { .map-status { flex-basis: auto; order: 0; min-width: 14ch; } }
.map-chips { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; order: 4; }
.map-chip { padding: 8px 13px; min-height: 36px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2); font-size: 12px; cursor: pointer; }
.map-chip:hover { border-color: var(--accent); color: var(--accent); }

.map-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .map-grid { grid-template-columns: minmax(0, 1fr) 330px; } }
.map-main { position: relative; display: flex; flex-direction: column; min-width: 0; }
.map-stage {
  position: relative; height: clamp(360px, 58vh, 560px); overflow: hidden; border: 1px solid var(--rule); border-radius: 18px; cursor: grab; touch-action: pan-y;
  background: radial-gradient(ellipse at 50% 45%, var(--paper-2), var(--paper) 78%);
}
.map-stage:active { cursor: grabbing; }
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.map-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; will-change: transform; transition: opacity .7s var(--ease);
  font: italic 400 clamp(17px, 1.7vw, 24px)/1 var(--serif); color: var(--ink); letter-spacing: -.005em;
  text-shadow: 0 0 10px var(--paper), 0 0 4px var(--paper), 0 0 2px var(--paper);
}
.map-label::before { content: ""; display: inline-block; width: .36em; height: .36em; margin-right: .42em; border-radius: 50%; background: var(--c, var(--accent)); vertical-align: .14em; }
.map-labels.on .map-label:not(.is-off) { opacity: 1; }
.map-hud { position: absolute; left: 14px; top: 12px; z-index: 3; color: var(--ink-3); font-size: 11px; line-height: 1.5; pointer-events: none; }
.map-hud b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.hud-curve { display: block; width: 150px; height: 44px; margin-top: 6px; overflow: visible; }
.hud-curve polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.hud-base { stroke: var(--rule-2); stroke-width: 1; }
.hud-draw { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hud-dot { fill: var(--accent); }
.map-zoom { position: absolute; right: 12px; top: 12px; z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.map-zoom button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule-2); background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--ink-2); font: 500 16px/1 var(--mono); cursor: pointer; }
.map-zoom button:hover { border-color: var(--accent); color: var(--accent); }
.map-nodes { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.map-node { position: absolute; left: 0; top: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: auto; cursor: pointer; }
.map-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-tip { position: absolute; left: 0; top: 0; z-index: 6; max-width: 300px; padding: 9px 11px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 12px/1.45 var(--sans); pointer-events: none; }
.map-tip b { display: block; margin-bottom: 2px; font: 500 11px/1.3 var(--mono); }
.map-tip span { display: block; }
.map-tip small { display: block; margin-top: 4px; font: 11px var(--mono); opacity: .78; }
.map-card { position: absolute; left: 0; top: 0; z-index: 7; width: 270px; padding: 14px 16px 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule-2); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45); }
.map-card[hidden], .map-tip[hidden] { display: none; }
.mc-kicker { margin: 0 0 4px; color: var(--ink-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.mc-title { margin: 0; font: italic 400 24px/1.1 var(--serif); color: var(--ink); }
.mc-text { margin: 8px 0 10px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.mc-link { font-size: 12px; color: var(--accent); }
.map-error { margin: 0; padding: 40px 20px; text-align: center; color: var(--ink-3); }

.map-legend { z-index: 4; display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 11px; }
.map-legend button { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ink-2); font: inherit; cursor: pointer; }
.map-legend button:hover, .map-legend button.is-on { border-color: var(--rule-2); color: var(--ink); }
.map-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.map-legend b { color: var(--ink-3); font-weight: 400; }
@media (min-width: 1000px) {
  .map-legend { position: absolute; left: 10px; bottom: 10px; flex-direction: column; flex-wrap: nowrap; margin: 0; align-items: flex-start; }
  .map-legend button { background: color-mix(in srgb, var(--paper) 78%, transparent); }
}

.map-results { display: flex; flex-direction: column; min-height: 0; padding: 18px 18px 14px; border: 1px solid var(--rule); border-radius: 18px; background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.mr-head { margin: 0 0 10px; color: var(--ink-3); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }
.mr-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 2px; }
.mr-list li { list-style: none; }
.mr-list a { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 10px 8px; border-radius: 10px; text-decoration: none; }
.mr-list a:hover, .mr-list a:focus-visible { background: var(--accent-soft); }
.mr-score { color: var(--accent); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mr-body { display: grid; gap: 3px; min-width: 0; }
.mr-body b { font-weight: 500; font-size: 14px; line-height: 1.3; }
.mr-body > span { color: var(--ink-2); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mr-body small { color: var(--ink-3); font-size: 10.5px; }
.mr-empty { padding: 10px 8px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.mr-note { margin: 10px 0 0; color: var(--ink-3); font-size: 10.5px; line-height: 1.5; }
@media (max-width: 999px) { .mr-list { max-height: 420px; } }

@media (max-width: 700px) {
  .map-label { font-size: 15px; }
  .map-hud .hud-line { display: block; max-width: 210px; }
  .hud-curve { width: 110px; height: 32px; }
  .map-zoom button { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .map-label { transition: none; } }

/* ---------- projects as model cards ---------- */
.work { max-width: var(--maxw); margin: 0 auto; padding: clamp(88px, 13vh, 160px) var(--gutter) 0; }
.work-head { margin-bottom: 0; }
.card.layer { padding: clamp(44px, 7vw, 84px) 0; border-top: 1px solid var(--rule); margin: 0; max-width: none; }
.card:first-of-type { margin-top: clamp(40px, 6vw, 72px); }
.card-head { display: grid; gap: 26px; align-items: end; margin-bottom: clamp(26px, 4vw, 44px); }
.heat { margin: 0; width: min(100%, 220px); }
.heat svg { width: 100%; height: auto; border-radius: 6px; background: var(--paper-2); outline: 1px solid var(--rule); }
.heat-cells rect { fill: var(--accent); }
.heat figcaption { margin-top: 8px; font-size: 10px; color: var(--ink-3); line-height: 1.5; }
.heat figcaption span { color: var(--accent); }
.heat-empty { aspect-ratio: 1; background: var(--paper-2); border-radius: 6px; }
.card-kicker { color: var(--ink-3); font-size: 11.5px; margin-bottom: 12px; }
.card-title { font: italic 400 clamp(2.4rem, 6.5vw, 5.6rem)/.95 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.card-task { margin-top: 12px; color: var(--ink-2); font-size: 12px; }
.card-metric { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.metric-val { font: 300 clamp(2.6rem, 6vw, 4.6rem)/1 var(--sans); letter-spacing: -.05em; color: var(--accent); font-variant-numeric: tabular-nums; }
.metric-label { color: var(--ink-2); max-width: 28ch; font-size: 12px; }
.card-body { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.cb-row { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.cb-row dt { color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.cb-row dd { margin: 0; max-width: 72ch; text-wrap: pretty; }
.evals { border-collapse: collapse; width: 100%; max-width: 640px; }
.evals th { text-align: left; font-weight: 400; color: var(--ink-2); padding: 5px 16px 5px 0; vertical-align: top; }
.evals td { padding: 5px 0; font-size: 12.5px; color: var(--ink); }
.stack { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.stack li { padding: 4px 9px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-2); }
.card-foot { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; margin-top: 22px; font-size: 13px; }
.card-repo { color: var(--ink); }
.card-gh { color: var(--ink-3); font-size: 11.5px; }

/* ---------- skills ---------- */
.skill-groups { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.skill-group { display: grid; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.sg-name { color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 400; }
.sg-items { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: clamp(1.05rem, 1.6vw, 1.35rem); letter-spacing: -.01em; }
.sg-items li { display: inline-flex; align-items: baseline; gap: 6px; }
.w { font-size: 10px; color: var(--ink-3); }

/* ---------- training curve ---------- */
.loss-wrap { position: relative; margin: 0 calc(var(--gutter) * -.4); }
.loss-svg { width: 100%; height: auto; overflow: visible; font-family: var(--mono); }
.ticks line { stroke: var(--rule); stroke-dasharray: 2 4; }
.ticks text, .axis-y { fill: var(--ink-3); font-size: 12px; text-anchor: middle; }
.axis-y { text-anchor: end; }
.loss-raw { fill: none; stroke: var(--ink-3); stroke-width: 1; opacity: .35; }
.loss-smooth { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(var(--glow)); }
.loss-future { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 3 6; }
.js .loss-wrap:not(.is-drawn) .loss-smooth { stroke-dasharray: 1; stroke-dashoffset: 1; }
.loss-wrap.is-drawn .loss-smooth { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease); }
.now-line { stroke: var(--accent); stroke-width: 1; opacity: .5; }
.now-label { fill: var(--accent); font-size: 11px; }
.ckpt { cursor: pointer; outline: none; }
.ckpt line { stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 1 3; }
.ckpt circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; transition: r .2s, fill .2s; }
.ckpt text { fill: var(--ink-2); font-size: 11px; text-anchor: middle; }
.ckpt-project circle { stroke: var(--accent); }
.ckpt-future circle { stroke-dasharray: 2 2; }
.ckpt:hover circle, .ckpt:focus circle, .ckpt.is-hot circle { fill: var(--accent); stroke: var(--accent); r: 7; }
.js .loss-wrap:not(.is-drawn) .ckpt { opacity: 0; }
.loss-wrap.is-drawn .ckpt { opacity: 1; transition: opacity .5s calc(var(--k, 0) * 120ms + 400ms); }
.loss-tip { position: absolute; z-index: 3; pointer-events: none; padding: 8px 10px; border-radius: 8px; font-size: 11.5px; max-width: 260px; background: var(--ink); color: var(--paper); opacity: 0; transform: translate(-50%, calc(-100% - 14px)); transition: opacity .15s; }
.loss-tip.is-on { opacity: 1; }
.ckpt-list { display: grid; gap: 0; margin-top: 30px; font-size: 12.5px; border-top: 1px solid var(--rule); }
.ckpt-list li { display: grid; grid-template-columns: 3ch 8ch 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); transition: background .2s; }
.ckpt-list li.is-hot { background: var(--accent-soft); }
.ck-n { color: var(--ink-3); }
.ck-project .ck-n { color: var(--accent); }
.ck-t { font-family: var(--sans); font-size: 14.5px; color: var(--ink); letter-spacing: 0; }
.ck-future .ck-t { color: var(--ink-3); font-style: italic; }
.roles { display: grid; gap: 40px; margin-top: clamp(48px, 7vw, 88px); }
.role header { margin-bottom: 14px; }
.role-when { color: var(--accent); font-size: 12px; }
.role-title { font: italic 400 clamp(1.9rem, 3.6vw, 2.8rem)/1.05 var(--serif); margin-top: 8px; letter-spacing: -.015em; }
.role-org { margin-top: 6px; color: var(--ink-2); }
.role ul { display: grid; gap: 10px; }
.role li { position: relative; padding-left: 22px; color: var(--ink-2); max-width: 70ch; }
.role li::before { content: "→"; position: absolute; left: 0; color: var(--ink-3); font-family: var(--mono); font-size: .85em; top: .1em; }
.community ul { display: grid; gap: 0; margin-top: 12px; border-top: 1px solid var(--rule); }
.community li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.c-role { font-weight: 500; }
.c-when { margin-left: auto; color: var(--ink-3); font-size: 11.5px; }

/* ---------- evaluation ---------- */
.eval-grid { display: grid; gap: 56px; }
.certs { margin-top: 12px; border-top: 1px solid var(--rule); }
.certs li { display: grid; grid-template-columns: 3ch 1fr; gap: 4px 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.cert-n { color: var(--ink-3); grid-row: span 2; padding-top: .3em; }
.cert-name { font-size: 1.12rem; letter-spacing: -.01em; }
.cert-by { color: var(--ink-3); font-size: 11.5px; }
.gh-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 20px; font-size: 12px; color: var(--ink-2); }
.gh-stats b { font: 300 2.4rem/1 var(--sans); letter-spacing: -.04em; color: var(--ink); display: block; margin-bottom: 4px; }
.lang-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.lang-bar span { width: var(--w); background: color-mix(in srgb, var(--accent) calc(100% - var(--i) * 15%), var(--paper-3)); }
.lang-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11.5px; }
.lang-key li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: color-mix(in srgb, var(--accent) calc(100% - var(--i) * 15%), var(--paper-3)); }
.gh-sub { margin: 26px 0 8px; color: var(--ink-3); font-weight: 400; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.gh-recent li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }

/* ---------- contact ---------- */
.contact { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; }
.contact-title { font: 400 clamp(3.2rem, 11vw, 10rem)/.92 var(--sans); letter-spacing: -.05em; }
.contact-title em { color: var(--accent); letter-spacing: -.03em; text-shadow: var(--glow); }
.contact-lede { margin-top: 28px; max-width: 48ch; color: var(--ink-2); }
.contact-mail {
  align-self: flex-start; margin-top: 34px; font: italic 400 clamp(1.5rem, 4.4vw, 3.1rem)/1.1 var(--serif); text-decoration: none;
  border-bottom: 1px solid var(--ink); padding: 0 .1em .08em; overflow-wrap: anywhere; transition: color .2s, border-color .2s;
}
.contact-mail:hover { color: var(--accent); border-color: var(--accent); }
.contact-links { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 44px; font-size: 13px; }

/* ---------- footer ---------- */
/* site footer: see the "footer" block at the end of this file */

/* ---------- attention overlay ---------- */
.attn-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 45; overflow: visible; }
.attn-layer path { fill: none; stroke: var(--accent); stroke-linecap: round; opacity: .75; filter: drop-shadow(var(--glow)); }
.attn-layer path.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: drawLine .5s var(--ease-out) forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.attn-layer circle { fill: var(--accent); }
.attn-layer text { font: 500 10px var(--mono); fill: var(--accent); }
.w-tok { border-radius: 3px; transition: background .2s, color .2s, box-shadow .2s; cursor: default; }
.w-tok.is-q { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent); }
.w-tok.is-k { background: color-mix(in srgb, var(--accent) calc(var(--a, .3) * 60%), transparent); box-shadow: 0 0 0 1px var(--accent-line); }
/* early layers show raw token boundaries; they vanish with depth */
.w-tok.has-attn { text-decoration: underline dotted color-mix(in srgb, var(--ink-3) calc((1 - var(--d)) * 70%), transparent); text-underline-offset: .28em; text-decoration-thickness: 1px; }

/* ---------- secondary pages ---------- */
.page-main { min-height: 100svh; display: flex; align-items: center; }
.solo { width: 100%; padding-top: 140px; }
.solo-title { font: 400 clamp(2.8rem, 9vw, 7.5rem)/.95 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.solo-title em { color: var(--accent); }
.unk { font-size: .55em; color: var(--ink-3); letter-spacing: -.02em; }
.solo-lede { margin-top: 26px; max-width: 52ch; color: var(--ink-2); font-size: 1.1em; }
.solo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.solo-dist { display: grid; gap: 6px; margin-top: 34px; max-width: 360px; font-size: 12px; }
.solo-dist span { display: grid; grid-template-columns: 9ch 1fr; align-items: center; gap: 10px; color: var(--ink-2); }
.solo-dist span::after { content: ""; height: 5px; border-radius: 3px; width: calc(var(--p) * 100% / .31); background: var(--ink-3); opacity: .6; }
.ellipsis span { animation: blink 1.4s steps(1) infinite; }
.ellipsis span:nth-child(2) { animation-delay: .25s; }
.ellipsis span:nth-child(3) { animation-delay: .5s; }
.post-list { margin-top: 40px; border-top: 1px solid var(--rule); }
.post-link { display: grid; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.post-title { font: italic 400 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--serif); }
.post-link:hover .post-title { color: var(--accent); }
.post-date { color: var(--ink-3); }
.prose { max-width: 68ch; margin-top: 40px; font-size: 1.08rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: italic 400 2rem/1.15 var(--serif); margin-top: 1.8em; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--paper-2); padding: .1em .35em; border-radius: 4px; }
.prose pre { background: var(--paper-2); padding: 16px; border-radius: 10px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose a { color: var(--accent); }

/* ---------- page transition: softmax from noise to sharp ---------- */
/* Animated on main/footer, never body: a filter on body would break position: fixed. */
/* Plays as the boot screen dissolves (html.boot-reveal is set by the inline boot script). */
.boot-reveal main, .boot-reveal .site-foot { animation: softmaxIn .7s var(--ease-out) backwards; }
@keyframes softmaxIn { from { filter: blur(14px) contrast(1.6); opacity: 0; } to { filter: blur(0); opacity: 1; } }
body.is-leaving main, body.is-leaving .site-foot { animation: softmaxOut .35s var(--ease) forwards; }
@keyframes softmaxOut { to { filter: blur(12px) contrast(1.5); opacity: 0; } }

/* ---------- breakpoints ---------- */
@media (min-width: 640px) {
  .temp-label { display: inline; font-size: 11px; color: var(--ink-3); }
  .hero-foot { grid-template-columns: 1fr auto; }
  .about-grid { grid-template-columns: auto 1fr; }
  .portrait { width: 280px; }
  .facts { grid-column: 1 / -1; }
  .card-head { grid-template-columns: 200px 1fr; }
  .cb-row { grid-template-columns: minmax(14ch, max-content) minmax(0, 1fr); gap: 24px; }
  .skill-group { grid-template-columns: 22ch 1fr; gap: 24px; }
}
@media (min-width: 900px) {
  .kbd-btn { display: inline-flex; }
  .site-nav { display: flex; }
  .about-grid { grid-template-columns: 300px 1fr 280px; gap: 48px; align-items: start; }
  .portrait { width: 100%; }
  .facts { grid-column: auto; }
  .card-head { grid-template-columns: 240px 1fr; gap: 48px; }
  .heat { width: 240px; }
  .eval-grid { grid-template-columns: 1fr 1fr; gap: 72px; }
  .roles { grid-template-columns: 1fr 1fr; gap: 56px; }
  .community { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .layer, .work { padding-right: calc(var(--gutter) + 40px); }
}

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .gen:not(.is-done) { visibility: visible; }
}
@media print {
  .site-head, .rail, .rail-mobile, .attn-layer, .map-stage, #ask-root, body::before { display: none !important; }
}

/* ---------- ask my portfolio ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ask-fab {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 70;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 500; cursor: pointer;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.45); transition: transform .25s var(--ease);
}
.ask-fab:hover { transform: translateY(-2px); }
.fab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: var(--glow); animation: pulse 2.4s var(--ease) infinite; }
@media (min-width: 1100px) { .ask-fab { right: 72px; } }

.ask {
  position: fixed; z-index: 90; inset: auto 0 0 0; height: min(86svh, 720px); display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,.35); transform: translateY(16px); opacity: 0;
  transition: transform .3s var(--ease-out), opacity .25s;
}
.ask:not(.is-open) { pointer-events: none; }
.ask.is-open { transform: none; opacity: 1; }
@media (min-width: 700px) {
  .ask { inset: auto 24px 24px auto; width: 420px; height: min(78vh, 680px); border-radius: 18px; }
}
@media (min-width: 1100px) { .ask { right: 72px; } }
.ask-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--rule); }
.ask-title { font: 500 1.2rem/1.1 var(--sans); letter-spacing: -.02em; }
.ask-title em { color: var(--accent); font-size: 1.15em; }
.ask-status { margin-top: 6px; color: var(--ink-3); font-size: 11px; }
.ask-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-2); background: transparent; cursor: pointer; font-size: 22px; line-height: 1; flex: none; }
.ask-x:hover { border-color: var(--ink); }
.ask-llm { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 10px 18px; font-size: 11px; color: var(--ink-2); border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.ask-bar { grid-column: 1 / -1; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.ask-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.ask-llm.is-ready .ask-bar { display: none; }
.ask-llm-btn { grid-row: 1; grid-column: 2; font: 500 11px var(--mono); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; cursor: pointer; }
.ask-log { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.msg.bot { align-self: flex-start; background: var(--paper-2); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.msg.user { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.msg .cite { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11px; color: var(--ink-2); }
.msg a { color: var(--accent); }
.dots span { animation: blink 1.2s steps(1) infinite; }
.dots span:nth-child(2) { animation-delay: .2s; } .dots span:nth-child(3) { animation-delay: .4s; }
.ask-chips { display: flex; gap: 6px; padding: 0 18px 10px; overflow-x: auto; scrollbar-width: none; }
.chip { flex: none; font-size: 11.5px; padding: 8px 11px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; cursor: pointer; color: var(--ink-2); min-height: 36px; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.ask-form { display: flex; gap: 8px; padding: 12px 14px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
.ask-in { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); font: 16px var(--sans); }
.ask-in::placeholder { color: var(--ink-3); }
.ask-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ask-send { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 18px; cursor: pointer; flex: none; }

/* ---------- command palette ---------- */
.palette { position: fixed; inset: 0; z-index: 95; display: grid; place-items: start center; padding: 12vh 16px 16px; background: color-mix(in srgb, var(--paper) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.palette[hidden] { display: none; }
.pal-box { width: min(620px, 100%); background: var(--paper); border: 1px solid var(--rule-2); border-radius: 16px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); overflow: hidden; animation: distIn .2s var(--ease-out); }
.pal-in-wrap { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--rule); }
.pal-caret { color: var(--accent); font-size: 18px; }
.pal-in { flex: 1; min-width: 0; height: 58px; border: 0; background: transparent; color: var(--ink); font: 18px var(--sans); outline: none; }
.pal-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.pal-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.pal-list li.is-sel { background: var(--accent-soft); }
.pal-list li.is-sel > span:first-child { color: var(--accent); }
.pal-list li.is-ask > span:first-child { font-family: var(--serif); font-style: italic; font-size: 1.1em; }
.pal-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 11px; }
.pal-foot kbd { margin-right: 3px; }

/* ---------- persona: hero button and "not you? switch" ---------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cta2 {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--ink); color: var(--ink); font-weight: 500; transition: transform .25s var(--ease), background .2s, color .2s;
}
.cta2:hover { transform: translateY(-2px); background: var(--ink); color: var(--paper); }
.cta2[hidden] { display: none; }
.persona-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 18px; color: var(--ink-3); font-size: 11.5px; }
.persona-line b { font-weight: 500; color: var(--ink-2); }
.persona-switch { border: 0; background-color: transparent; padding: 10px 2px; margin: -10px 0; cursor: pointer; color: var(--ink-2); font: inherit; }
.persona-menu { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.persona-menu[hidden] { display: none; }
.persona-menu button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2); cursor: pointer; font: inherit; }
.persona-menu button:hover { border-color: var(--accent); color: var(--accent); }
.persona-menu button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* Off-screen sections are not rendered until they are near the viewport: this cuts the first layout of the
   page (the boot screen needs it early) a lot. The map section is left out because its canvas needs a real size. */
/* (no content-visibility here: estimated section heights made anchor links land in the wrong place) */

/* ---------- hero "thinking" line: one continuous word, token boundaries as soft highlights ---------- */
:root {
  /* low-opacity tints: the orange letters keep >= 4.59:1 contrast on every one of them (light) */
  --t0: rgba(60, 165, 105, .14); --t1: rgba(90, 150, 235, .14); --t2: rgba(230, 155, 25, .14);
  /* about 55% of the tagline on desktop, 22-26px on phones, and never wider than the screen for the longest verb
     (Combinatorially Computing is ~10.8em wide) so a word never wraps or scrolls */
  --vsize: min(clamp(1.4rem, 2.2vw + .6rem, 2.4rem), calc((100vw - 2 * var(--gutter) - 3.4rem) / 10.9));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --t0: rgba(120, 178, 146, .15); --t1: rgba(112, 148, 214, .15); --t2: rgba(214, 170, 96, .15); }
}
:root[data-theme="dark"] { --t0: rgba(120, 178, 146, .15); --t1: rgba(112, 148, 214, .15); --t2: rgba(214, 170, 96, .15); }

.think { position: relative; margin-top: 10px; min-height: calc(var(--vsize) * 1.35); }
.think:not(.is-on) .think-line { visibility: hidden; }
.think-line { display: flex; align-items: baseline; font-size: var(--vsize); line-height: 1.35; white-space: nowrap; }
.think-label { margin-right: 12px; color: var(--ink-3); font-size: 11.5px; line-height: 1; letter-spacing: 0; }
.think-word { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--accent); white-space: pre; }
.tkn { position: relative; display: inline-block; line-height: 1.15; border-radius: 3px; animation: tknIn .2s var(--ease-out) backwards; }
.tkn.c0 { background: var(--t0); } .tkn.c1 { background: var(--t1); } .tkn.c2 { background: var(--t2); }
.tkn.is-static { animation: none; }
@keyframes tknIn { from { opacity: 0; transform: translateY(.14em); } }
.think-caret { align-self: center; width: 2px; height: .8em; margin-left: 4px; background: var(--accent); border-radius: 1px; }
.think-caret.is-waiting { animation: blink 1.05s steps(1) infinite; }
/* The old word leaves as one piece (fade and blur), then the next one streams in. */
.think-line.is-out .think-word, .think-line.is-out .think-caret { opacity: 0; filter: blur(6px); transition: opacity .26s var(--ease), filter .26s var(--ease); }
.think-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Token ids appear only on hover, and only for fine pointers: touch devices never see them. */
@media (hover: hover) and (pointer: fine) {
  .tkn:hover::after {
    content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 6; padding: 3px 7px; border-radius: 5px;
    background: var(--ink); color: var(--paper); font: 500 10.5px/1.3 var(--mono); font-style: normal; letter-spacing: 0; white-space: nowrap; pointer-events: none;
  }
}

/* Faint next-token panel on wide screens: the candidates for the next verb, and the sampled winner. */
.think-next { display: none; }
@media (min-width: 1280px) {
  .think-next { display: block; position: absolute; right: 0; top: 2px; width: 236px; color: var(--ink-3); font-size: 11px; line-height: 1.45; }
  .nx-h { margin-bottom: 4px; }
  .nx-row { display: grid; grid-template-columns: 1fr auto 54px; gap: 8px; align-items: center; padding: 1px 0; }
  .nx-w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nx-p { font-variant-numeric: tabular-nums; }
  .nx-b { height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
  .nx-b i { display: block; height: 100%; border-radius: 2px; background: var(--ink-3); transition: width .45s var(--ease-out), background-color .3s; }
  .nx-row.is-win .nx-w, .nx-row.is-win .nx-p { color: var(--accent); }
  .nx-row.is-win .nx-b i { background: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .tkn { animation: none; }
  .think-caret.is-waiting { animation: none; }
  .think-line.is-out .think-word, .think-line.is-out .think-caret { filter: none; transition: opacity .35s linear; }
}

/* Short laptop screens: tighten the hero's rhythm so name, tagline, verb, meta, intro and button fit in one screen. */
@media (min-width: 900px) and (max-height: 800px) {
  .hero-foot { margin-top: 14px; }
  .focus-chips { margin-top: 16px; }
  .persona-line { margin-top: 12px; }
  .scroll-cue { display: none; }
}

/* ---- first-visit generation (assets/js/generate.js). Only opacity and transform change; the layout is final from the start. ---- */
.gt { transition: opacity .16s linear, color .5s; }
.gen .gt:not(.gt-on) { opacity: 0; }
.gt.gt-new { color: var(--accent); }
.gt.gt-anchor { position: relative; }
.gn-host { position: relative; color: transparent !important; }
.gn { position: absolute; left: 0; top: 0; white-space: pre; font: inherit; letter-spacing: inherit; }
.gen-box { position: relative; }
.gen-cv { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s; pointer-events: none; }
.gen-lab { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; font-size: 10px; white-space: nowrap; background: color-mix(in srgb, var(--paper) 80%, transparent); border: 1px solid var(--rule-2); color: var(--ink-2); transition: opacity .4s; pointer-events: none; }
.gen-cv.is-out, .gen-lab.is-out { opacity: 0; }
.gen .gen-bars span { transform: scaleX(0); transform-origin: 0 50%; }
.gen .gen-bars.gen-on span { transform: none; transition: transform .7s var(--ease-out) calc(var(--i, 0) * 90ms); }
.gen .gbox:not(.gbox-on) { opacity: 0; transform: translateY(14px); }
.gen .gbox.gbox-on { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
@media print { .gt { opacity: 1 !important; } .gen-cv, .gen-lab, .gn { display: none; } .gn-host { color: inherit !important; } }

/* ---------- footer: one slim bar, shared by every page ---------- */
.site-foot { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--gutter); border-top: 1px solid var(--rule); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px; font: 400 13.5px/1.4 var(--sans); color: var(--ink-3); }
.foot-copy-line { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-right: auto; }
.foot-link { color: var(--ink-2); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s var(--ease-out), color .2s; }
.foot-link:hover, .foot-link:focus-visible { background-size: 100% 1px; color: var(--accent); }
.foot-card { margin: 0; position: relative; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.foot-card b { font-weight: 500; color: var(--ink-2); }
.foot-i { position: relative; width: 16px; height: 16px; padding: 0; margin-left: 2px; border-radius: 50%; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-3); font: italic 500 10px/1 var(--serif); cursor: help; vertical-align: 1px; }
.foot-i:hover, .foot-i:focus-visible { color: var(--ink); border-color: var(--ink-3); }
.foot-tip { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(300px, 80vw); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink-2); font: 400 13px/1.45 var(--sans); box-shadow: 0 10px 30px -12px rgba(0,0,0,.4); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; }
.foot-i:hover + .foot-tip, .foot-i:focus-visible + .foot-tip { opacity: 1; transform: none; }
.foot-top { font: 400 13px/1 var(--sans); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); cursor: pointer; transition: border-color .2s, color .2s; }
.foot-top:hover { border-color: var(--ink-3); color: var(--ink); }
.site-foot a:focus-visible, .site-foot button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 720px) {
  .site-foot { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; padding-bottom: 84px; } /* room for the floating Ask button */
  .foot-links { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .foot-card { grid-column: 1 / -1; grid-row: 3; }
  .foot-top { grid-column: 2; grid-row: 1; }
  .foot-tip { right: auto; left: 0; }
}

/* ---------- header brand: live logo + wordmark that morphs into the name ---------- */
@font-face { font-family: "Anthropic Serif"; src: url("/assets/fonts/anthropic-serif/anthropic-serif-text-500-italic.woff2") format("woff2"); font-style: italic; font-weight: 500; font-display: swap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); border-radius: 999px; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.brand-logo { flex: none; width: 40px; height: 40px; margin: -3px; overflow: visible; transition: transform .25s var(--ease-out); will-change: transform; }
.brand-logo .ring-track { fill: none; stroke: var(--rule); stroke-width: 1; }
.brand-logo .ring-prog { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: var(--p, 0) 100; transform-origin: 20px 20px; }
.brand-logo .disc { fill: #F3EEE3; stroke: rgba(0,0,0,.14); stroke-width: 12; }
.brand-logo .s-stroke { fill: none; stroke: #0B0F1E; stroke-linecap: round; stroke-linejoin: round; }
.brand-logo .s-node { fill: #0B0F1E; }
.brand-logo .cursor { fill: #E8571A; }
.brand-logo .ticks { stroke: var(--accent); stroke-width: 1; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.brand.is-attn .ticks { opacity: .85; }
/* the dot blinks while something is being generated, and rests solid when idle */
html[data-busy] .brand-logo .cursor { animation: cursorBlink 1.3s steps(1) infinite; }
@keyframes cursorBlink { 50% { opacity: .1; } }
/* while the chatbot thinks, the ring becomes a spinner instead of a progress bar */
html[data-thinking] .brand-logo .ring-prog { stroke-dasharray: 26 74; animation: ringSpin 1.1s linear infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.brand-text { display: inline-grid; align-items: center; font: italic 500 19.5px/1 "Anthropic Serif", "Source Serif 4", Georgia, serif; letter-spacing: -.01em; white-space: pre; padding-bottom: 2px; }
.brand-text > * { grid-area: 1 / 1; }
.bt-size { visibility: hidden; height: 0; overflow: hidden; } /* reserves the width of the longer text, so the nav never shifts */
.bt-cur { transition: opacity .16s; }
.bt-cur.is-fade { opacity: 0; }
.bt-tok { display: inline-block; white-space: pre; transition: opacity .12s linear; }
.bt-tok.is-out, .bt-tok.is-in:not(.is-on) { opacity: 0; }
.bt-tok.is-in.is-on { color: var(--accent); }
.bt-cur .dist { font-style: normal; }
@media (max-width: 640px) { .brand-text { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .brand-logo { transition: none; } html[data-busy] .brand-logo .cursor { animation: none; } }

@media (min-width: 1200px) { .about-grid { grid-template-columns: 340px 1fr 300px; gap: 56px; } }

/* ---------- Guinness World Records card: a benchmark entry that "reads" its certificate ---------- */
.gwr { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 20px 24px; align-items: start; padding: 28px 0 32px; margin-bottom: 40px; border-top: 1px solid #C6922C; border-bottom: 1px solid var(--rule); scroll-margin-top: 90px; }
.gwr-badge { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.gwr-logo { display: block; width: 56px; height: 56px; }
.gwr-star { position: absolute; left: 50%; top: 36%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,236,170,.5) 45%, transparent 70%); opacity: 0; pointer-events: none; }
.gwr-badge:hover .gwr-star, .gwr:focus-within .gwr-star { animation: starShimmer .9s ease-out 1; }
@keyframes starShimmer { 0% { opacity: 0; transform: scale(.5) rotate(0); } 40% { opacity: 1; transform: scale(1.5) rotate(45deg); } 100% { opacity: 0; transform: scale(1.1) rotate(90deg); } }
.gwr-body { min-width: 0; }
.gwr-title { margin: 0 0 14px; font: 500 clamp(1.15rem, 1rem + .8vw, 1.5rem)/1.25 var(--sans); letter-spacing: -.015em; }
.gwr-rows { display: grid; gap: 8px; margin: 0; }
.gwr-rows > div { display: grid; grid-template-columns: minmax(12ch, max-content) minmax(0, 1fr); gap: 4px 24px; align-items: baseline; }
.gwr-rows dt { color: var(--ink-3); font-size: 12px; }
.gwr-rows dd { margin: 0; color: var(--ink); font: 400 15px/1.45 var(--sans); }
.gwr-ok { color: #C6922C; font-weight: 600; }
.gwr-note { margin: 16px 0 0; max-width: 62ch; color: var(--ink-3); font-size: 13.5px; }
.gwr-thumb { grid-column: 1 / -1; justify-self: start; display: grid; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink-3); text-align: left; cursor: zoom-in; }
.gwr-frame { position: relative; display: block; width: 150px; border-radius: 8px; overflow: hidden; border: 1px solid var(--rule-2); background: #fff; }
.gwr-frame img { display: block; width: 100%; height: auto; }
.gwr-hint { font-size: 11px; }
.gwr-thumb:hover .gwr-frame { border-color: #C6922C; }
.gwr-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.gwr-ocr { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gwr-ocr rect { fill: rgba(198,146,44,.12); stroke: #C6922C; stroke-width: 2; opacity: 0; transition: opacity .25s; }
.gwr-ocr rect.is-on { opacity: 1; }
.gwr-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #C6922C; box-shadow: 0 0 10px 2px rgba(198,146,44,.55); opacity: 0; pointer-events: none; }
.gwr-scan.is-run { animation: gwrScan .9s linear forwards; }
@keyframes gwrScan { 0% { opacity: 1; transform: translateY(0); } 99% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--h, 220px)); } }
.gwr-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gwr-links path { fill: none; stroke: #C6922C; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; }
.gwr-links path.is-draw { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease-out); }
.gwr-links path.is-out { opacity: 0; transition: opacity .4s; }
@media (min-width: 720px) {
  .gwr { grid-template-columns: auto 1fr 168px; }
  .gwr-thumb { grid-column: 3; grid-row: 1; justify-self: end; }
  .gwr-frame { width: 168px; }
}
@media (max-width: 560px) {
  .gwr { grid-template-columns: 1fr; }
  .gwr-rows > div { grid-template-columns: 1fr; gap: 0; }
  .gwr-frame { width: 160px; }
}
.gwr-lb { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr; background: rgba(8,10,18,.86); backdrop-filter: blur(6px); animation: lbIn .2s var(--ease-out); }
@keyframes lbIn { from { opacity: 0; } }
.gwr-lb-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px var(--gutter); color: #ddd; }
.gwr-lb-bar .sp { margin-left: auto; }
.gwr-lb button { font: 400 13px/1 var(--sans); padding: 9px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #eee; cursor: pointer; }
.gwr-lb button:hover { border-color: #C6922C; }
.gwr-lb button[aria-pressed="true"] { background: #C6922C; border-color: #C6922C; color: #1a1205; }
.gwr-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gwr-lb-main { position: relative; min-height: 0; display: grid; grid-template-columns: 1fr; }
.gwr-stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; }
.gwr-pan { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.gwr-pan img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.gwr-pan svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .25s; pointer-events: none; }
.gwr-lb.is-ocr .gwr-pan svg { opacity: 1; }
.gwr-pan rect { fill: rgba(198,146,44,.1); stroke: #C6922C; stroke-width: 2; }
.gwr-pan text { font: 600 11px ui-monospace, "JetBrains Mono", monospace; fill: #1a1205; }
.gwr-pan .tag { fill: #C6922C; }
.gwr-json { display: none; margin: 0; padding: 16px; overflow: auto; background: rgba(0,0,0,.45); color: #e8e2d4; font: 12.5px/1.5 var(--mono); border-top: 1px solid rgba(255,255,255,.12); max-height: 38vh; }
.gwr-lb.is-ocr .gwr-json { display: block; }
.gwr-json .k { color: #C6922C; } .gwr-json small { display: block; white-space: normal; margin-bottom: 8px; color: #aaa; font-family: var(--sans); }
@media (min-width: 900px) { .gwr-lb-main { grid-template-columns: 1fr 340px; } .gwr-json { max-height: none; border-top: 0; border-left: 1px solid rgba(255,255,255,.12); } }
@media print { .gwr-lb { display: none; } }

/* phones: keys sit above their values */
@media (max-width: 420px) {
  .facts div, .gwr-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.facts div.is-flash { animation: rowFlash 1.4s ease-out; }
@keyframes rowFlash { 0% { box-shadow: inset 0 0 0 1px rgba(198,146,44,0); background: rgba(198,146,44,0); } 20% { box-shadow: inset 0 0 0 1px rgba(198,146,44,.7); background: rgba(198,146,44,.16); } 100% { box-shadow: inset 0 0 0 1px rgba(198,146,44,0); background: rgba(198,146,44,0); } }

/* ---------- hero badge: Guinness World Records participant, predicted last ---------- */
.hero-grid { position: relative; }
.hero-badge { position: relative; display: inline-flex; align-items: center; gap: 12px; width: max-content; max-width: 100%; margin-top: 14px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; transition: transform .25s var(--ease-out), border-color .2s; }
.hero-badge:hover { transform: translateY(-2px); border-color: rgba(198,146,44,.6); }
.hero-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hb-logo { position: relative; flex: none; width: 48px; height: 48px; }
.hb-disc { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(198,146,44,.4); }
.hb-img { display: block; width: 84%; height: 84%; transition: opacity .3s; }
.hb-cv { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s; pointer-events: none; }
.hb-cv.is-out { opacity: 0; }
.hb-disc .gwr-star { width: 14%; height: 14%; margin: -7% 0 0 -7%; }
.hero-badge:hover .gwr-star, .hero-badge.is-shimmer .gwr-star { animation: starShimmer .9s ease-out 1; }
.hb-text { display: grid; gap: 2px; text-align: left; }
.hb-name { font: 450 13px/1.2 var(--sans); white-space: nowrap; }
.hb-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.hb-ph { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; border-radius: inherit; border: 1px dashed var(--rule-2); color: var(--ink-3); font-size: 12px; background: var(--paper); }
.hero-badge.is-pending .hb-ph { display: flex; }
.hero-badge.is-pending .hb-text, .hero-badge.is-pending .hb-logo { visibility: hidden; }
.hero-badge.is-pending.is-decoding .hb-ph { display: none; }
.hero-badge.is-pending.is-decoding .hb-logo { visibility: visible; }
.hero-badge.is-pending.is-decoding .hb-img { opacity: 0; }
.hero-badge.is-pending.is-decoding .hb-img.is-in { opacity: 1; }
.hero-badge.is-pending.is-decoding .hb-disc { background: transparent; box-shadow: none; }
.hero-badge.is-wide { position: absolute; right: 0; top: 44px; margin: 0; padding: 0; border: 0; display: grid; justify-items: center; gap: 10px; width: 160px; border-radius: 0; }
.hero-badge.is-wide:hover { border-color: transparent; }
.hero-badge.is-wide .hb-logo { width: 104px; height: 104px; }
.hero-badge.is-wide .hb-text { text-align: center; }
.hero-badge.is-wide .hb-ph { border-radius: 14px; }
@media (max-width: 480px) { .hero-badge { margin-top: 10px; } }
@media print { .hero-badge { display: none; } }