/* AReA project page. The visual language of the AReA method videos (remotion/src/method/model.ts NAVY):
   navy ground, warm off-white text, blue = Phase I (global, coarse), orange = Phase II (local, fine),
   teal = Halo, yellow = Global-KV Bridge, coral = the problem. IBM Plex Sans for prose, Plex Mono for tags. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; unicode-range: U+0370-03FF; src: url(../fonts/ibm-plex-sans-greek-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; unicode-range: U+0370-03FF; src: url(../fonts/ibm-plex-sans-greek-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; unicode-range: U+0370-03FF; src: url(../fonts/ibm-plex-sans-greek-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #0b1628;
  --panel: #11213a;
  --text: #eee8dc;
  --muted: #8c9bb4;
  --faint: #23385a;
  --coarse: #7db4ff;
  --fine: #f2a65a;
  --halo: #4fd1b8;
  --bridge: #f7d774;
  --bad: #ff8a7a;
  --rule: rgba(238, 232, 220, 0.1);
  --glass: rgba(255, 255, 255, 0.05);
  --rim: rgba(255, 255, 255, 0.22);
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  /* Plex Mono has no Greek subset: sigma falls through to Plex Sans */
  --mono: "IBM Plex Mono", "IBM Plex Sans", ui-monospace, monospace;
  --measure: 46rem;
  --wide: 72rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 106%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.62;
  overflow-x: hidden;
}

a { color: var(--coarse); text-decoration: none; text-underline-offset: 0.18em; }
a:hover { text-decoration: underline; }
strong { color: var(--text); font-weight: 600; }
::selection { background: rgba(125, 180, 255, 0.3); color: var(--text); }
:focus-visible { outline: 2px solid var(--coarse); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the AReA wordmark in running text: coarse to fine */
.wm {
  font-weight: 600;
  background: linear-gradient(90deg, var(--coarse), var(--fine));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- backdrop: navy, a glow in the section's accent, drifting token dust (as in the videos) ---------- */

.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.backdrop__glow {
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 55% 45% at 50% 18%, rgba(17, 33, 58, 0.95), transparent 70%),
    radial-gradient(ellipse 40% 50% at 85% 70%, var(--glow, rgba(125, 180, 255, 0.08)), transparent 70%);
}
.backdrop__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.backdrop__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 55%, rgba(11, 22, 40, 0.85) 100%);
}

.page { position: relative; z-index: 1; }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.35rem; }
.wrap--wide { max-width: calc(var(--wide) + 2.7rem); }

/* ---------- hero ---------- */

.hero {
  min-height: min(100svh, 62rem);
  display: flex; flex-direction: column; justify-content: center;
  padding: 2.5rem 0 3rem;
  text-align: center;
}
.hero > .wrap { width: 100%; }
.title-stage {
  position: relative;
  transform: translateY(var(--intro-shift, 0px));
  transition: transform 1.4s var(--ease);
  width: min(100%, 52rem);
  margin: 0 auto;
  aspect-ratio: 1320 / 550; /* the crop of the 1920 x 1080 title canvas that holds the word and its subtitle */
}
.title-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.title-stage__fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text); visibility: hidden;
}
.no-canvas .title-stage__fallback { visibility: visible; }
.title-stage__fallback b { font-weight: 500; font-size: clamp(4rem, 15vw, 11rem); line-height: 1; letter-spacing: -0.01em; }
.title-stage__fallback span { color: var(--muted); font-size: clamp(1rem, 2.6vw, 2rem); margin-top: 0.6rem; }
.title-stage__fallback em { font-style: normal; color: var(--text); font-size: clamp(0.85rem, 1.9vw, 1.45rem); margin-top: 0.4rem; }



.meta { margin-top: 1.2rem; }
.authors {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.25rem;
  margin: 0; padding: 0; list-style: none;
  font-size: 1.08rem; font-weight: 500;
}
.authors a { color: var(--text); }
.authors a:hover { color: var(--coarse); text-decoration: none; }
.authors sup { font: 500 0.66em var(--mono); color: var(--coarse); margin-left: 0.12em; }
.authors .eq { color: var(--fine); }
.affiliations { margin: 0.55rem 0 0; font-size: 0.9rem; color: var(--muted); }
.affiliations span { white-space: nowrap; margin: 0 0.45rem; }
.affiliations sup { font: 500 0.75em var(--mono); color: var(--coarse); margin-right: 0.18em; }
.note { margin: 0.35rem 0 0; font: 0.7rem var(--mono); letter-spacing: 0.06em; color: var(--muted); opacity: 0.8; }
.note sup { color: var(--fine); }

.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  font: 500 0.68rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text);
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--rim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s var(--ease);
}
a.chip:hover { text-decoration: none; border-color: rgba(125, 180, 255, 0.7); background: rgba(125, 180, 255, 0.1); transform: translateY(-1px); }
.chip svg { width: 0.95rem; height: 0.95rem; flex: none; }
.chip--soon { color: var(--muted); border-style: dashed; border-color: rgba(140, 155, 180, 0.4); box-shadow: none; cursor: default; }
.chip--soon em { font-style: normal; opacity: 0.7; letter-spacing: 0.08em; }

/* a small pointer to our previous work */
.prev { margin: 0.9rem 0 0; }
.prev__link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--muted); font: 500 0.62rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s, background 0.2s; }
.prev__link:hover { text-decoration: none; color: var(--text); border-color: var(--rim); background: rgba(255, 255, 255, 0.04); }
.prev__name { color: var(--text); font: 600 0.78rem/1 var(--sans); letter-spacing: 0.02em; text-transform: none; }
.prev__link svg { width: 0.8rem; height: 0.8rem; transition: transform 0.2s var(--ease); }
.prev__link:hover svg { transform: translateX(2px); }

/* hero entrance: the title plays at the viewport's centre, glides up when it finishes, then the meta rises in */
.hero .stage-in { opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity 0.9s ease, transform 0.9s var(--ease), filter 0.9s ease; }
.is-meta-in .hero .stage-in { opacity: 1; transform: none; filter: none; }
.is-title-up .title-stage { --intro-shift: 0px !important; }
.is-meta-in .hero .stage-in[data-step="1"] { transition-delay: 0.12s; }
.is-meta-in .hero .stage-in[data-step="2"] { transition-delay: 0.24s; }
.is-meta-in .hero .stage-in[data-step="3"] { transition-delay: 0.36s; }

.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.45rem; margin: 2.4rem auto 0;
  font: 0.62rem var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.scroll-cue:hover { text-decoration: none; color: var(--text); }
.scroll-cue i { width: 1px; height: 2.2rem; background: linear-gradient(var(--muted), transparent); animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- sections ---------- */

.section { padding: 5.5rem 0 0; scroll-margin-top: 1rem; }
.kicker {
  margin: 0 0 0.7rem;
  font: 500 0.72rem var(--mono); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent, var(--muted));
}
.h2 {
  margin: 0;
  font-weight: 500; font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--accent-title, var(--text));
}
.lede { margin: 0.9rem 0 0; font-size: 1.12rem; line-height: 1.5; color: var(--text); opacity: 0.82; max-width: 40rem; }
.prose p { margin: 1rem 0 0; font-size: 1.02rem; }
.prose p:first-child { margin-top: 0; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

.sec--problem { --accent: var(--bad); }
.sec--observation { --accent: var(--coarse); --accent-title: var(--coarse); }
.sec--idea { --accent: var(--muted); }
.sec--phase1 { --accent: var(--coarse); }
.sec--phase2 { --accent: var(--fine); }
.sec--results, .sec--numbers { --accent: var(--muted); }

/* reveal on scroll: a short rise, blur to sharp */
.rv { opacity: 0; transform: translateY(18px); filter: blur(8px);
  transition: opacity 0.9s ease, transform 0.9s var(--ease), filter 0.9s ease; }
.rv.is-in { opacity: 1; transform: none; filter: none; }
.rv[data-d="1"] { transition-delay: 0.08s; } .rv[data-d="2"] { transition-delay: 0.16s; }
.rv[data-d="3"] { transition-delay: 0.24s; } .rv[data-d="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) { .rv, .hero .stage-in { opacity: 1; transform: none; filter: none; transition: none; } }

/* ---------- glass ---------- */

.glass {
  background: var(--glass);
  border: 1px solid var(--rim);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 14px 40px rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}

/* ---------- keywords: what AReA is good at, resolving coarse to fine ---------- */

.keywords { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem 2rem; margin-top: 0.5rem; }
.keywords .kw:first-child { grid-column: 1 / -1; } /* the headline claim on its own line, the three qualities under it */
.keywords .kw:first-child .kw__word { white-space: nowrap; font-size: clamp(1.5rem, 4.4vw, 3rem); }
.kw { text-align: center; }
.kw__word {
  display: inline-block; position: relative;
  font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.1; color: var(--text);
  text-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent);
}
.kw__word::after {
  content: ""; position: absolute; left: 0; bottom: -0.45rem; height: 3px; width: 100%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--c)); box-shadow: 0 0 10px var(--c);
  transform-origin: left; transform: scaleX(1);
}
.kw__sub { margin-top: 1rem; font: 0.8rem var(--mono); letter-spacing: 0.08em; color: var(--c); }
.kw.res .kw__word { letter-spacing: 0.32em; filter: blur(12px); color: var(--coarse); opacity: 0;
  transition: letter-spacing 1.1s var(--ease), filter 1.1s ease, color 1.1s ease, opacity 0.7s ease; }
.kw.res .kw__word::after { transform: scaleX(0); transition: transform 1s var(--ease) 0.45s; }
.kw.res .kw__sub { opacity: 0; transform: translateY(8px); transition: opacity 0.7s ease 0.6s, transform 0.7s var(--ease) 0.6s; }
.kw.res.is-in .kw__word { letter-spacing: -0.01em; filter: none; color: var(--text); opacity: 1; }
.kw.res.is-in .kw__word::after { transform: scaleX(1); }
.kw.res.is-in .kw__sub { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kw.res .kw__word, .kw.res .kw__sub { letter-spacing: -0.01em; filter: none; color: var(--text); opacity: 1; transform: none; transition: none; }
  .kw.res .kw__sub { color: var(--c); }
  .kw.res .kw__word::after { transform: none; transition: none; }
}

/* ---------- figures, progressive images, zoom ---------- */

.figure { margin: 2.2rem 0 0; }
.figure--wide { --fw: min(var(--wide), calc(100vw - 2rem)); width: var(--fw); margin-left: calc(50% - var(--fw) / 2); }
.figure figcaption, .caption {
  margin: 0.85rem auto 0; max-width: var(--measure); padding: 0 0.35rem;
  font-size: 0.9rem; line-height: 1.55; color: var(--muted); text-align: center;
}
.figure figcaption b, .caption b { color: var(--text); font-weight: 600; }
.figure figcaption .hint { display: block; margin-top: 0.3rem; font: 0.68rem var(--mono); letter-spacing: 0.06em; opacity: 0.75; }

.frame { border-radius: 18px; overflow: hidden; border: 1px solid var(--rim);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 20px 60px rgba(0, 0, 0, 0.45); background: var(--panel); }

/* a figure drawn for a white page (dark-blue and black labels): shown on its own light sheet */
.frame--paper { background: #ffffff; border-color: rgba(255, 255, 255, 0.5); padding: clamp(0.4rem, 1.4vw, 1.1rem); }
.frame--paper .pimg { background-color: #ffffff; }
.frame--paper.zoom { padding: 0; }

/* one progressive image: the blurred placeholder is the background, the display image fades in over it */
.pimg { position: relative; display: block; width: 100%; aspect-ratio: var(--ar, 1); overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--panel); }
.pimg::before { /* the placeholder, blurred and slightly enlarged so its soft edge stays outside */
  content: ""; position: absolute; inset: -8%; background: inherit; background-size: cover; filter: blur(18px) saturate(1.2);
  transform: scale(1.02); }
.pimg > picture, .pimg > img { position: absolute; inset: 0; }
.pimg img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.7s ease; }
.pimg.is-loaded img { opacity: 1; }
.pimg.is-loaded::before { opacity: 0; transition: opacity 0.9s ease 0.4s; }
.pimg--pending { display: grid; place-items: center; background:
  repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 10px, transparent 10px 20px), var(--panel); }
.pimg--pending::before { display: none; }
.pimg--pending span { font: 0.68rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding: 0.4rem 0.7rem; border: 1px dashed rgba(140, 155, 180, 0.45); border-radius: 999px; background: rgba(11, 22, 40, 0.6); }

/* zoom: click in, click again for full detail, drag to pan, Esc or Reset to leave */
.zoom { position: relative; touch-action: pan-y; cursor: zoom-in; outline: none; }
.zoom__stage { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.zoom__stage > .pimg { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.zoom__hq { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.zoom__hq.is-loaded { opacity: 1; }
.zoom.is-zoomed { cursor: grab; touch-action: none; }
.zoom.is-dragging { cursor: grabbing; }
.zoom__ui { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 3; display: flex; gap: 0.4rem; }
.zoom__btn, .zoom__badge {
  font: 500 0.62rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
  padding: 0.45rem 0.65rem; border-radius: 999px; border: 1px solid var(--rim); background: rgba(11, 22, 40, 0.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.zoom__btn { cursor: pointer; display: none; }
.zoom.is-zoomed:hover .zoom__btn, .zoom.is-zoomed:focus-within .zoom__btn { display: inline-block; }
@media (hover: none) { .zoom.is-zoomed .zoom__btn { display: inline-block; } }
.zoom__badge { position: absolute; left: 0.7rem; bottom: 0.7rem; z-index: 3; color: var(--muted); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.zoom.is-loading-hq .zoom__badge { opacity: 1; }
.zoom__badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 0.45rem;
  vertical-align: 1px; background: var(--fine); box-shadow: 0 0 8px var(--fine); animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* magnifier: a glass lens parked on the image, following the pointer */
.magnify { position: relative; touch-action: pan-y; outline: none; }
.frame.magnify { overflow: visible; } /* the lens may hang over the edge; the image keeps the rounded corners */
.frame.magnify > .pimg { border-radius: inherit; }
.magnify:focus-visible { box-shadow: 0 0 0 2px var(--coarse); }
@media (hover: hover) and (pointer: fine) { .magnify.is-following { cursor: none; } }
.lens { position: absolute; left: 0; top: 0; z-index: 2; border-radius: 50%; overflow: hidden; pointer-events: none;
  background-color: var(--panel); background-repeat: no-repeat; will-change: transform;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(11, 22, 40, 0.5), inset 0 8px 18px rgba(255, 255, 255, 0.12), 0 0 0 4px rgba(125, 180, 255, 0.12), 0 18px 40px rgba(0, 0, 0, 0.55); }
.lens::after { /* the glass: a soft highlight across the top */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 70% 45% at 35% 18%, rgba(255, 255, 255, 0.16), transparent 70%); }
.lens__tag { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap;
  font: 500 0.6rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
  padding: 0.35rem 0.55rem; border-radius: 999px; border: 1px solid var(--rim); background: rgba(11, 22, 40, 0.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.full-link { display: block; width: fit-content; margin: 0.45rem auto 0; font: 500 0.62rem var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--coarse); }
.cmp__cell .full-link { margin-top: 0.25rem; font-size: 0.56rem; letter-spacing: 0.04em; color: var(--muted); }
.cmp__cell .full-link:hover { color: var(--coarse); }

/* ---------- the problem: failure modes ---------- */

.fails { --cols: 5; --gap: 0.7rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem var(--gap); }
.fails > .fail { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.fail { margin: 0; }
.fail .pimg { border-radius: 12px; border: 1px solid var(--rule); } /* square, as in the paper's Figure 2 */
.fail__tag { display: inline-block; white-space: nowrap; margin-bottom: 0.55rem; font: 500 0.64rem var(--mono); letter-spacing: 0.08em;
  color: var(--bad); padding: 0.3rem 0.55rem; border: 1px solid rgba(255, 138, 122, 0.35); border-radius: 999px; }
.fail--ours .fail__tag { color: var(--fine); border-color: rgba(242, 166, 90, 0.45); }
.fail figcaption { margin-top: 0.5rem; font-weight: 500; color: var(--text); text-align: center; font-size: 0.92rem; }
.fail--ours figcaption { color: var(--fine); }
.fail-head { display: flex; justify-content: center; align-items: flex-end; min-height: 2.9rem; text-align: center; margin: 0 -1rem; }
.prompt { margin: 0 auto 1rem; font-size: 0.82rem; font-style: italic; color: var(--muted); text-align: center; text-wrap: balance; }
.prompt::before { content: "\201C"; } .prompt::after { content: "\201D"; }

/* ---------- the observation: two numbers ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.stats { display: grid; gap: 0.9rem; }
.stat { padding: 1.1rem 1.3rem; }
.stat__label { font: 500 0.66rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.stat__value { margin-top: 0.3rem; font: 600 2.7rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--text); }
.stat__value small { font: 400 0.36em var(--mono); color: var(--muted); letter-spacing: 0.06em; margin-left: 0.5rem; }
.stat__note { margin-top: 0.45rem; font-size: 0.9rem; color: var(--muted); }
.stat--hot .stat__value { color: var(--coarse); }
.track { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; font: 0.75rem var(--mono); color: var(--muted); }
.track b { color: var(--text); font-weight: 500; }
.track i { flex: 1; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--coarse), var(--fine)); opacity: 0.8; }

/* ---------- the idea: two phases along the noise axis ---------- */

.idea { margin-top: 2.6rem; padding: 2rem 2rem 1.6rem; }
.idea__panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.phase { text-align: center; transition: opacity 0.5s ease; }
.phase svg { display: block; width: min(100%, 19rem); height: auto; margin: 0 auto; overflow: visible; }
.phase__tag { margin-top: 1.1rem; font: 500 0.72rem var(--mono); letter-spacing: 0.2em; color: var(--c); }
.phase__title { margin-top: 0.25rem; font-weight: 600; font-size: 1.35rem; color: var(--text); line-height: 1.2; }
.phase__sub { margin: 0.4rem auto 0; max-width: 22rem; font-size: 0.95rem; color: var(--muted); line-height: 1.45; }
.phase.is-dim { opacity: 0.45; }
.axis { position: relative; margin: 2.2rem 0.5rem 0; height: 4.4rem; user-select: none; touch-action: none; cursor: pointer; }
.axis__line { position: absolute; left: 0; right: 0; top: 1.9rem; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--coarse) 0 var(--star), var(--fine) var(--star) 100%); }
.axis__star { position: absolute; top: 1.15rem; width: 2px; height: 1.9rem; margin-left: -1px; left: var(--star); background: var(--text); }
.axis__knob { position: absolute; top: 1.42rem; left: var(--pos, 0%); width: 1.05rem; height: 1.05rem; margin-left: -0.525rem; border-radius: 50%;
  background: var(--text); box-shadow: 0 0 14px var(--knob, var(--coarse)); transition: box-shadow 0.3s; }
.axis__lab { position: absolute; font: 0.72rem var(--mono); color: var(--muted); white-space: nowrap; transform: translateX(-50%); }
.axis__lab--top { top: 0; } .axis__lab--bot { top: 2.75rem; }
.axis__lab--coarse { color: var(--coarse); } .axis__lab--fine { color: var(--fine); } .axis__lab--star { color: var(--text); }
.axis__hint { margin-top: 0.2rem; text-align: center; font: 0.66rem var(--mono); letter-spacing: 0.08em; color: var(--muted); opacity: 0.75; }

/* ---------- method details ---------- */

.phase-head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* four cards as two rows of two */
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* medium widths: two across, and the third card takes the whole row instead of sitting alone at half width */
@media (max-width: 900px) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards--3 > :nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 600px) { .cards--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) { .cards--2 { grid-template-columns: minmax(0, 1fr); } }
.card { padding: 1.3rem 1.35rem 1.25rem; }
.card__tag { font: 500 0.64rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c, var(--muted)); }
.card__title { margin: 0.4rem 0 0; font-weight: 600; font-size: 1.12rem; color: var(--text); line-height: 1.25; }
.card p { margin: 0.5rem 0 0; font-size: 0.95rem; line-height: 1.52; }
.card .eq { display: block; margin-top: 0.7rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(11, 22, 40, 0.55);
  font: 0.8rem var(--mono); color: var(--text); overflow-x: auto; white-space: nowrap; }
.card .eq i { font-family: var(--sans); font-style: italic; }
.card--halo { --c: var(--halo); } .card--bridge { --c: var(--bridge); } .card--coarse { --c: var(--coarse); } .card--fine { --c: var(--fine); }
.card__icon { float: right; width: 2.4rem; height: 2.4rem; margin: 0 0 0.4rem 0.8rem; }

.video-slot { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 18px; overflow: hidden; }
.video-slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- comparisons ---------- */

.tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; margin: 0 0 1.3rem; }
.tab { font: 500 0.66rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); cursor: pointer;
  padding: 0.55rem 0.85rem; border-radius: 999px; border: 1px solid var(--rule); background: transparent; transition: all 0.2s; }
.tab:hover { color: var(--text); border-color: var(--rim); }
.tab[aria-selected="true"] { color: var(--bg); background: var(--text); border-color: var(--text); }
.cmp__meta { display: flex; justify-content: center; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.pill { font: 500 0.64rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid var(--rule); }
.pill i { font: 500 0.56rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); opacity: 0.8; margin-right: 0.55em; }
.pill--model { font: 600 0.8rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); background: rgba(255, 255, 255, 0.06); }
.pill--res { color: var(--text); }
.cmp__grid { --cols: var(--n, 5); --gap: 0.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
/* a centred wrap: a short last row (e.g. SEGA and AReA under three panels) sits in the middle, not on the left */
.cmp__cell { margin: 0; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.cmp__cell .zoom { border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); }
.cmp__cell--ours .zoom { border-color: rgba(242, 166, 90, 0.6); box-shadow: 0 0 0 1px rgba(242, 166, 90, 0.25), 0 0 30px rgba(242, 166, 90, 0.12); }
.cmp__cell figcaption { margin-top: 0.5rem; text-align: center; font-weight: 500; font-size: 0.92rem; color: var(--text); }
.cmp__cell--ours figcaption { color: var(--fine); }
.cmp__cell figcaption small { color: var(--muted); font-weight: 400; }

/* ---------- numbers: latency chart and tables ---------- */

.speed { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.2rem; align-items: stretch; margin-top: 2rem; }
.speed__hero { padding: 1.4rem 1.4rem; display: flex; flex-direction: column; justify-content: center; }
.speed__hero .big { font: 600 3.6rem/1 var(--sans); letter-spacing: -0.02em; color: var(--text); }
.speed__hero .big small { font-size: 0.55em; font-weight: 500; color: var(--fine); margin-left: 0.04em; }
.speed__hero p { margin: 0.6rem 0 0; font-size: 0.92rem; }
.speed__hero .row + .row { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.chart { padding: 1.2rem 1.3rem 1rem; }
.chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.chart__title { font-weight: 600; color: var(--text); font-size: 1rem; }
.legend { display: flex; gap: 1rem; font: 0.72rem var(--mono); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--panel); }
.chart__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 0.4rem; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart svg text { font-family: var(--mono); }
.tip { position: fixed; z-index: 20; pointer-events: none; padding: 0.55rem 0.7rem; border-radius: 10px; font: 0.72rem/1.45 var(--mono);
  color: var(--text); background: rgba(11, 22, 40, 0.92); border: 1px solid var(--rim); box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; white-space: nowrap; }
.tip.is-on { opacity: 1; transform: none; }
.tip b { font-weight: 500; } .tip .k { color: var(--muted); }

.table-card { margin-top: 1.2rem; padding: 1.1rem 1.2rem 0.8rem; }
.table-tools { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.table-tools .tabs { margin: 0; justify-content: flex-start; }
.table-tools__tabs { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-end; }
.table-tools__tabs .tabs { justify-content: flex-end; }
.tabgroup { display: flex; align-items: center; gap: 0.7rem; }
.tabgroup__label { font: 500 0.58rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); opacity: 0.8; }
/* backbone: a joined segmented control in the sans face; resolution: separate mono pills */
.tabs--model { gap: 0; padding: 3px; border: 1px solid var(--rim); border-radius: 999px; background: rgba(11, 22, 40, 0.45); }
.tabs--model .tab { border: 0; font: 600 0.78rem/1 var(--sans); letter-spacing: 0; text-transform: none; padding: 0.5rem 0.95rem; }
.tabs--model .tab[aria-selected="true"] { color: var(--bg); background: var(--text); }
.tabs--res .tab[aria-selected="true"] { color: var(--text); background: rgba(242, 166, 90, 0.16); border-color: var(--fine); }
.swipe-hint { display: none; margin: 0 0 0.4rem; font: 0.62rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: right; transition: opacity 0.3s; }
.swipe-hint.is-gone { opacity: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.num { width: 100%; border-collapse: collapse; font: 0.8rem var(--mono); color: var(--muted); }
table.num th, table.num td { padding: 0.55rem 0.6rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--rule); }
table.num th:first-child, table.num td:first-child { text-align: left; }
table.num thead th { font-weight: 500; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
table.num tbody td:first-child { font-family: var(--sans); font-size: 0.92rem; color: var(--text); }
table.num td.best { color: var(--text); font-weight: 500; }
table.num td.best::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 0.35rem; border-radius: 50%; background: var(--fine); vertical-align: 2px; }
table.num td.second { color: var(--text); opacity: 0.85; text-decoration: underline; text-decoration-color: rgba(238,232,220,0.35); text-underline-offset: 0.25em; }
table.num tr.ours td { background: rgba(242, 166, 90, 0.07); }
table.num tr.ours td:first-child { color: var(--fine); font-weight: 600; }
table.num tr.group td { padding-top: 0.9rem; font: 500 0.62rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-bottom: 0; }
.table-note { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--muted); }
.table-note i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--fine); vertical-align: 2px; margin: 0 0.25rem 0 0.1rem; }

/* ---------- citation, footer ---------- */

.pending { margin: 0; font: 0.76rem var(--mono); letter-spacing: 0.04em; color: var(--muted); }

.bib { position: relative; margin-top: 1.2rem; padding: 1.1rem 1.2rem; }
.bib pre { margin: 0; padding-right: 4.5rem; white-space: pre-wrap; font: 0.78rem/1.6 var(--mono); color: var(--muted); }
.bib .copy { position: absolute; top: 0.7rem; right: 0.7rem; }
.bib .copy.chip { padding: 0.45rem 0.7rem; cursor: pointer; font-size: 0.6rem; }
.foot { margin-top: 6rem; padding: 1.6rem 0 2.4rem; border-top: 1px solid var(--rule); text-align: center;
  font: 0.72rem var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.foot p { margin: 0.2rem 0; }

/* ---------- small screens ---------- */

@media (max-width: 860px) {
  .split, .speed, .chart__pair { grid-template-columns: minmax(0, 1fr); }
  .idea__panels { gap: 1.2rem; }
  .fails { --cols: 3; }
  .cmp__grid { --cols: min(var(--n, 5), 3); }
}
@media (max-width: 560px) {
  html { font-size: 100%; }
  .wrap { padding: 0 1rem; }
  .keywords { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .keywords .kw:first-child .kw__word { white-space: normal; text-wrap: balance; font-size: 1.75rem; }
  .fails { --cols: 2; }
  .cmp__grid { --cols: 2; }
  .idea { padding: 1.4rem 0.9rem 1.2rem; }
  .phase__sub { display: none; }
  .phase__title { font-size: 0.98rem; }
  .phase__tag { font-size: 0.6rem; letter-spacing: 0.1em; }
  .axis__lab--start { display: none; }
  /* results table: the controls become full-width segmented rows */
  .table-tools__tabs { width: 100%; align-items: stretch; gap: 0.8rem; }
  .tabgroup { flex-direction: column; align-items: stretch; gap: 0.35rem; }
  .table-tools__tabs .tabs { display: grid; gap: 0.35rem; }
  .table-tools__tabs .tabs--model { gap: 0; }
  .table-tools__tabs .tabs--model { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-tools__tabs .tabs--res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-tools__tabs .tab { padding: 0.6rem 0.4rem; letter-spacing: 0.04em; text-align: center; white-space: nowrap; }
  .swipe-hint { display: block; }
  table.num th:first-child, table.num td:first-child { position: sticky; left: 0; z-index: 1; background: #13243e; box-shadow: 6px 0 10px -6px rgba(0, 0, 0, 0.6); }
  table.num tr.ours td:first-child { background: #2a2c38; }
  table.num tbody td:first-child { font-size: 0.86rem; }
  .section { padding-top: 4.2rem; }
  .affiliations span { white-space: normal; }
}