/* Geist and Geist Mono, self-hosted (SIL Open Font License, Vercel). Latin subset, variable weight. */
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ==========================================================================
   Matteo Favetta · Portfolio
   Tokens follow the Linear reference: void canvas, hairline borders,
   400 to 590 weights, 6 / 12 radii, one chromatic accent (#E8501E).
   ========================================================================== */

:root {
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: var(--mono);

  --accent: #E8501E;
  --accent-rgb: 232, 80, 30;

  --max: 1200px;
  --read: 680px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(88px, 11vw, 136px);
  --top-h: 56px;

  --r-card: 12px;
  --r-btn: 6px;
  --r-badge: 4px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 700ms;
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #08090a;
  --bg-2: #0b0c0d;
  --surface: #0f1011;
  --surface-2: #141516;
  --surface-3: #1b1c1e;
  --line: #1e2023;
  --line-2: #2a2c30;
  --line-3: #383b3f;
  --fg: #f7f8f8;
  --fg-2: #d0d6e0;
  --muted: #8a8f98;
  --faint: #62666d;
  --accent-ink: #ff6a3a;
  --accent-soft: rgba(var(--accent-rgb), .12);
  --accent-line: rgba(var(--accent-rgb), .38);
  --glass: rgba(8, 9, 10, .72);
  --grid: rgba(255, 255, 255, .032);
  --tint: rgba(255, 255, 255, .04);
  --tint-2: rgba(255, 255, 255, .07);
  --invert-bg: #ffffff;
  --invert-fg: #08090a;
  --pop: 0 24px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  --inset: inset 0 0 0 1px var(--line);
  --img-bg: #121314;
  --viz-dot: rgba(208, 214, 224, .55);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #fbfbfa;
  --bg-2: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #f5f5f3;
  --surface-3: #ededeb;
  --line: #e7e7e4;
  --line-2: #dbdbd8;
  --line-3: #c6c7c4;
  --fg: #0b0c0d;
  --fg-2: #33363b;
  --muted: #696d74;
  --faint: #9a9da3;
  --accent-ink: #c4400e;
  --accent-soft: rgba(var(--accent-rgb), .09);
  --accent-line: rgba(var(--accent-rgb), .35);
  --glass: rgba(251, 251, 250, .8);
  --grid: rgba(0, 0, 0, .04);
  --tint: rgba(0, 0, 0, .03);
  --tint-2: rgba(0, 0, 0, .055);
  --invert-bg: #0b0c0d;
  --invert-fg: #ffffff;
  --pop: 0 24px 80px rgba(20, 20, 20, .14), 0 0 0 1px rgba(0, 0, 0, .06);
  --img-bg: #efefed;
  --viz-dot: rgba(40, 42, 46, .5);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 24px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font: 400 15.5px/1.65 var(--font);
  letter-spacing: -.011em;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--t-med) var(--ease);
}
body.locked { overflow: hidden; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(var(--accent-rgb), .32); color: var(--fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); letter-spacing: -.01em; }
.acc { color: var(--accent); }

/* page grid texture */
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}
.bg-glow {
  position: fixed; left: 50%; top: -340px; width: 1100px; height: 640px; translate: -50% 0;
  pointer-events: none; z-index: 0; opacity: .55;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .13), transparent 70%);
  filter: blur(10px);
  transition: opacity 1s var(--ease);
}
[data-theme="light"] .bg-glow { opacity: .5; }
main { position: relative; z-index: 1; }

/* ---------- type ---------- */
.d1, .d2, .d3, .d4 { font-family: var(--display); color: var(--fg); font-weight: 500; letter-spacing: -.06em; word-spacing: -.24em; font-feature-settings: "ss01"; text-wrap: balance; }
.d1 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1; letter-spacing: -.07em; font-weight: 480; }
.d2 { font-size: clamp(27px, 3.7vw, 44px); line-height: 1.06; letter-spacing: -.062em; }
.d3 { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.16; letter-spacing: -.05em; word-spacing: -.2em; }
.d4 { font-size: 17px; line-height: 1.3; letter-spacing: -.04em; word-spacing: -.16em; }
.dim { color: var(--faint); }
.lede { font-size: clamp(16.5px, 1.5vw, 18.5px); line-height: 1.55; letter-spacing: -.017em; color: var(--muted); max-width: 40em; text-wrap: pretty; }
.lede b, .lede strong { color: var(--fg); font-weight: 500; }
.small { font-size: 14px; color: var(--muted); line-height: 1.55; letter-spacing: -.006em; }
.micro { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.prose { max-width: var(--read); }
.prose p { font-size: 16.5px; line-height: 1.7; letter-spacing: -.012em; color: var(--fg-2); text-wrap: pretty; }
.prose p + p { margin-top: 1.05em; }
.prose strong, .prose b { color: var(--fg); font-weight: 550; }
.prose a { color: var(--fg); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1px no-repeat; transition: background-size var(--t-med) var(--ease), color var(--t-fast); }
.prose a:hover { color: var(--accent-ink); }

.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.eyebrow .n { color: var(--accent); }
.eyebrow .ln { width: 24px; height: 1px; background: var(--line-3); transform-origin: left; }

/* word mask reveal */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease); transition-delay: calc(var(--i) * 38ms + var(--d, 0ms)); }
.split.in .w > span { transform: none; }

/* generic reveal */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }

/* ---------- buttons ---------- */
.btn {
  --bh: 40px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--bh); padding: 0 16px; border-radius: var(--r-btn);
  font: 500 14px/1 var(--font); letter-spacing: -.012em; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  user-select: none;
}
.btn:active { transform: scale(.97); }
.btn .arr { display: inline-block; transition: transform var(--t-med) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn:hover .arr.dn { transform: translateY(3px); }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 1px rgba(var(--accent-rgb), .6);
}
.btn-primary:hover { background: #f05a27; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 24px rgba(var(--accent-rgb), .35), 0 0 0 1px rgba(var(--accent-rgb), .8); }
.btn-ghost { color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--tint); }
.btn-ghost:hover { color: var(--fg); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.btn-pill { --bh: 32px; padding: 0 14px; border-radius: 999px; background: var(--invert-bg); color: var(--invert-fg); font-size: 13px; }
.btn-pill:hover { box-shadow: 0 0 0 4px var(--tint-2); }
.btn-sm { --bh: 32px; padding: 0 12px; font-size: 13px; font-weight: 450; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); font-weight: 500; font-size: 14px; }
.link-arrow .arr { transition: transform var(--t-med) var(--ease); }
.link-arrow:hover .arr { transform: translate(2px, -2px); }

.kbd { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px; border-radius: 4px; font: 500 11px/1 var(--mono); color: var(--muted); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 -1px 0 var(--line-2); }

.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px; border-radius: 12px; font-size: 12px; line-height: 1.35; color: var(--fg-2); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-badge); font: 500 11px/1 var(--mono); letter-spacing: .02em; color: var(--muted); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); text-transform: uppercase; }
.badge.acc { color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- cards ---------- */
.card { position: relative; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--inset); }
.spot { isolation: isolate; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  padding: 1px;
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(var(--accent-rgb), .55), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--t-med);
}
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(600px circle at var(--mx, -999px) var(--my, -999px), var(--tint), transparent 40%);
  opacity: 0; transition: opacity var(--t-med);
}
.spot:hover::before, .spot:hover::after { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--top-h);
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med), background-color var(--t-med);
}
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { height: 100%; display: flex; align-items: center; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--fg); font: 500 13.5px/1 var(--mono); letter-spacing: -.045em; word-spacing: -.18em; flex-shrink: 0; }
.mark { position: relative; width: 22px; height: 12px; flex-shrink: 0; }
.mark i { position: absolute; top: 0; width: 12px; height: 12px; border-radius: 50%; transition: transform 600ms var(--spring); }
.mark i:first-child { left: 0; background: var(--accent); }
.mark i:last-child { right: 0; box-shadow: inset 0 0 0 1.5px var(--fg-2); }
.logo:hover .mark i:first-child { transform: translateX(10px); }
.logo:hover .mark i:last-child { transform: translateX(-10px); }
.crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 12.5px/1 var(--mono); color: var(--faint); overflow: hidden; }
.crumb .sep { color: var(--line-3); }
.crumb button { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--t-fast); }
.crumb button:hover { color: var(--fg); }
.crumb .sec-name { display: inline-block; transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.crumb .sec-name.swap { opacity: 0; transform: translateY(-6px); }
.top .spacer { flex: 1; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { position: relative; padding: 8px 10px; font-size: 13.5px; font-weight: 450; letter-spacing: -.01em; color: var(--fg-2); border-radius: 6px; transition: color var(--t-fast), background-color var(--t-fast); }
.nav a:hover { color: var(--fg); background: var(--tint); }
.nav a.on { color: var(--fg); }
.nav a.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 1px; background: var(--accent); }
.search-btn { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 6px 0 10px; border-radius: var(--r-btn); color: var(--muted); font-size: 12.5px; white-space: nowrap; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); transition: color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.search-btn:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-3); background: var(--tint-2); }
.icon-btn { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-btn); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--tint); transition: color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); overflow: hidden; }
.icon-btn:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-3); }
.icon-btn:active { transform: scale(.94); }
.theme-btn svg { position: absolute; transition: transform 600ms var(--spring), opacity 300ms var(--ease); }
.theme-btn .sun { transform: translateY(24px) rotate(-90deg); opacity: 0; }
[data-theme="light"] .theme-btn .sun { transform: none; opacity: 1; }
[data-theme="light"] .theme-btn .moon { transform: translateY(-24px) rotate(90deg); opacity: 0; }
.progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: var(--po, 0); transition: opacity var(--t-med); }

/* ---------- splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: grid; place-items: center;
  transition: opacity 700ms var(--ease), visibility 0s linear 700ms;
}
.splash canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.splash .s-meta { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; justify-content: center; gap: 28px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.splash .s-meta b { color: var(--fg-2); font-weight: 500; }
.splash .s-name { position: absolute; top: calc(50% + 46px); left: 0; right: 0; text-align: center; font: 500 15px/1 var(--display); letter-spacing: -.01em; color: var(--fg); }
.splash .s-name span { display: inline-block; opacity: 0; transform: translateY(8px); filter: blur(4px); transition: opacity 500ms var(--ease), transform 500ms var(--ease), filter 500ms var(--ease); transition-delay: calc(var(--i) * 22ms); }
.splash.named .s-name span { opacity: 1; transform: none; filter: none; }
.splash.out { opacity: 0; visibility: hidden; }
.splash .s-skip { position: absolute; top: 20px; right: 24px; font: 500 11px/1 var(--mono); color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- cursor ---------- */
.cur, .cur-dot { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity 300ms; }
.cur { width: 34px; height: 34px; margin: -17px 0 0 -17px; box-shadow: inset 0 0 0 1px var(--fg-2); transition: width 380ms var(--ease), height 380ms var(--ease), margin 380ms var(--ease), background-color 300ms, box-shadow 300ms, opacity 300ms; display: grid; place-items: center; }
.cur-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--accent); }
.cur .lbl { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: 0; transform: scale(.6); transition: opacity 200ms, transform 300ms var(--spring); }
body.has-cur .cur, body.has-cur .cur-dot { opacity: 1; }
body.cur-hover .cur { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(var(--accent-rgb), .12); box-shadow: inset 0 0 0 1px var(--accent); }
body.cur-label .cur { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--accent); box-shadow: none; }
body.cur-label .cur .lbl { opacity: 1; transform: none; }
body.cur-label .cur-dot { opacity: 0; }
body.cur-down .cur { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
body.cur-text .cur { width: 3px; height: 26px; margin: -13px 0 0 -1px; border-radius: 2px; background: var(--fg-2); box-shadow: none; }
@media (pointer: coarse) { .cur, .cur-dot { display: none; } }

/* ---------- views ---------- */
.view { display: none; }
.view.on { display: block; }
.view.enter { animation: viewIn 700ms var(--ease) both; }
.view.leave { animation: viewOut 220ms var(--ease-io) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes viewOut { to { opacity: 0; transform: translateY(-6px); filter: blur(2px); } }

section.block { padding: var(--section) 0 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; }
.sec-head .d2 { max-width: 15em; }
.sec-head p { max-width: 30em; }

/* ---------- hero ---------- */
.hero { padding-top: calc(var(--top-h) + clamp(48px, 9vw, 112px)); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.status { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; padding: 5px 12px 5px 10px; line-height: 1.35; border-radius: 999px; font-size: 13px; color: var(--fg-2); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); margin-bottom: 28px; }
.pulse { position: relative; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); animation: pulse 2.2s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.hero h1 { margin-bottom: 28px; }
.hero .lede { margin-bottom: 36px; max-width: 34em; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.win { overflow: hidden; }
.win-bar { height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 400 12px/1 var(--mono); color: var(--faint); }
.win-bar .dots { display: flex; gap: 6px; }
.win-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.win-bar .ttl { flex: 1; text-align: center; }
.viz-stage { position: relative; aspect-ratio: 1.12; background: radial-gradient(ellipse at 50% 40%, var(--tint), transparent 70%); }
.viz-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.viz-cap { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); transition: opacity 300ms; }
.viz-cap b { color: var(--fg-2); font-weight: 500; }
.viz-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.viz-tab { position: relative; text-align: left; padding: 14px 16px 16px; transition: background-color var(--t-fast); }
.viz-tab + .viz-tab { border-left: 1px solid var(--line); }
.viz-tab:hover { background: var(--tint); }
.viz-tab .k { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; transition: color var(--t-fast); }
.viz-tab .v { font-size: 13.5px; color: var(--muted); transition: color var(--t-fast); }
.viz-tab.on .k { color: var(--accent); }
.viz-tab.on .v { color: var(--fg); }
.viz-tab .bar { position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.viz-tab.on .bar { animation: tabbar var(--dur, 5200ms) linear forwards; }
.viz-paused .viz-tab.on .bar { animation-play-state: paused; }
@keyframes tabbar { to { transform: scaleX(1); } }

.proof { margin-top: clamp(64px, 9vw, 104px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof .it { padding: 20px 16px 20px 0; font-size: 12px; line-height: 1.5; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.proof .it + .it { padding-left: 24px; border-left: 1px solid var(--line); }
.proof b { color: var(--fg); font-weight: 500; font-family: var(--display); font-size: 16px; letter-spacing: -.05em; word-spacing: -.18em; white-space: nowrap; }

/* ---------- work index ---------- */
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 8px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { position: relative; z-index: 1; height: 30px; padding: 0 14px; border-radius: 6px; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; transition: color var(--t-fast); }
.seg button .c { font: 500 11px/1 var(--mono); color: var(--faint); transition: color var(--t-fast); }
.seg button.on { color: var(--fg); }
.seg button.on .c { color: var(--accent); }
.seg .ind { position: absolute; z-index: 0; top: 3px; left: 0; height: 30px; border-radius: 6px; background: var(--surface-3); box-shadow: 0 1px 2px rgba(0, 0, 0, .2), inset 0 0 0 1px var(--line-2); transition: transform 420ms var(--ease), width 420ms var(--ease); }
[data-theme="light"] .seg .ind { background: var(--surface); }

.work { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.work-groups { display: grid; gap: clamp(48px, 6vw, 72px); }
.wk-group.hide { display: none; }
.wk-gh { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 24px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.wk-gt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wk-gt h3 { font: 500 clamp(20px, 2vw, 24px)/1.1 var(--display); letter-spacing: -.055em; word-spacing: -.2em; color: var(--fg); }
.wk-gc { font: 500 12px/1 var(--mono); color: var(--faint); }
.wk-gh p { font-size: 13.5px; color: var(--muted); max-width: 34em; line-height: 1.5; }
.wk.third { grid-column: span 4; }
.wk.third .foot { flex-wrap: wrap; }
.kp { display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 8px; border-radius: var(--r-badge); font: 500 11px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.kp i, .kg { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; background: currentColor; }
.kp.research, .kg.research { color: var(--accent-ink); }
.kp.research { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.kp.research i, .kg.research { border-radius: 50%; }
.kp.design, .kg.design { color: var(--fg); }
.kp.design { background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.kp.design i, .kg.design { border-radius: 1px; transform: rotate(45deg) scale(.9); }
.seg button .kg { margin-right: -2px; opacity: .55; transition: opacity var(--t-fast); }
.seg button.on .kg { opacity: 1; }

/* sticky project filter: stays under the header while the work grid is on screen */
.work-bar { position: sticky; top: var(--top-h); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -12px 0 32px; padding: 10px 0; }
/* the band behind it spans the full viewport, so once stuck it reads as a second row of the header */
.work-bar::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--glass); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity var(--t-med) var(--ease); pointer-events: none; }
.work-bar.stuck::before { opacity: 1; }
body.bar-stuck .top { border-bottom-color: transparent; }
#work-seg { padding: 4px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-3); }
#work-seg .ind { top: 4px; height: 34px; border-radius: 7px; background: var(--invert-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
#work-seg button { height: 34px; padding: 0 16px; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--fg-2); transition: color var(--t-fast), background-color var(--t-fast); }
#work-seg button:hover:not(.on) { color: var(--fg); background: var(--tint-2); }
#work-seg button .c { color: var(--muted); }
#work-seg button.on { color: var(--invert-fg); }
#work-seg button.on .c { color: var(--accent); }
#work-seg button.on .kg.design { color: var(--invert-fg); }
#work-seg button.on .kg.research { color: var(--accent); }
.wb-now { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--fg); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.work-bar.stuck .wb-now { opacity: 1; transform: none; }
.wb-now b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.wb-now .kg { opacity: .9; }
.wb-c { font: 400 12px/1 var(--mono); color: var(--faint); }
.wb-now.swap b, .wb-now.swap .wb-c { opacity: 0; }
.wb-now b, .wb-c { transition: opacity 180ms var(--ease); }
.wk-group { scroll-margin-top: calc(var(--top-h) + 76px); }
.wk { grid-column: span 6; display: flex; flex-direction: column; overflow: hidden; transition: transform 500ms var(--ease), opacity 400ms var(--ease), box-shadow var(--t-med); }
.wk.feat { grid-column: span 12; flex-direction: row; }
.wk.hide { display: none; }
.wk .media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--img-bg); border-bottom: 1px solid var(--line); }
.wk.feat .media { aspect-ratio: auto; flex: 1.3; border-bottom: 0; border-right: 1px solid var(--line); min-height: 380px; }
.wk .media > img, .wk .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease), opacity 600ms var(--ease); }
.wk:hover .media > img, .wk:hover .media > video { transform: scale(1.035); }
.wk .body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.wk.feat .body { flex: 1; padding: 32px; justify-content: space-between; }
.wk .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk h3 { font: 500 21px/1.16 var(--display); letter-spacing: -.055em; word-spacing: -.2em; text-wrap: balance; color: var(--fg); transition: color var(--t-fast); }
.wk.feat h3 { font-size: clamp(26px, 2.6vw, 34px); }
.wk p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.wk .foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.wk .wk-metric { font: 500 13px/1 var(--mono); color: var(--fg-2); }
.wk .wk-metric b { color: var(--accent); font-weight: 500; }
.wk .go { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; transition: color var(--t-fast); }
.wk .go .arr { transition: transform var(--t-med) var(--ease); }
.wk:hover .go { color: var(--fg); }
.wk:hover .go .arr { transform: translateX(4px); }
.wk .kind { position: absolute; top: 14px; left: 14px; z-index: 3; }
.wk .media .shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .25), transparent 40%); }
.mini-viz { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; }

/* mini forest */
.mf { width: 100%; max-width: 420px; }
.mf .r { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; height: 40px; font: 400 11.5px/1 var(--mono); color: var(--muted); }
.mf .tr { position: relative; height: 100%; }
.mf .tr::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.mf .z { position: absolute; top: -10px; bottom: -10px; width: 1px; background: var(--line-3); }
.mf .ci { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--muted); transition: left 900ms var(--ease), width 900ms var(--ease); }
.mf .pt { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--fg-2); transition: left 900ms var(--ease); }
.mf .r.sig .ci { background: var(--accent); }
.mf .r.sig .pt { background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); }
.mf .r.ns .pt { background: var(--surface); box-shadow: inset 0 0 0 2px var(--muted); }
.mf .ax { display: flex; justify-content: space-between; margin-left: 110px; font: 400 10px/1 var(--mono); color: var(--faint); margin-top: 6px; }

/* mini tree */
.mt { font: 400 12px/1 var(--mono); color: var(--muted); display: grid; gap: 7px; width: 100%; max-width: 360px; }
.mt div { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 10px; border-radius: 4px; transition: background-color 400ms, color 400ms, box-shadow 400ms; }
.mt div::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--line-3); transition: background 400ms; }
.mt .l1 { margin-left: 20px; }
.mt .l2 { margin-left: 40px; }
.mt div.hit { color: var(--fg); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.mt div.hit::before { background: var(--accent); }

/* ---------- method ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: var(--r-card); box-shadow: var(--inset); background: var(--surface); overflow: hidden; }
.step { position: relative; padding: 28px 24px 24px; min-height: 0; display: flex; flex-direction: column; gap: 14px; transition: background-color var(--t-med); }
.step + .step { border-left: 1px solid var(--line); }
.step:hover { background: var(--surface-2); }
.step .k { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.step .k b { color: var(--accent); font-weight: 500; }
.step h3 { font: 500 18px/1.22 var(--display); color: var(--fg); letter-spacing: -.05em; word-spacing: -.18em; }
.step p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.step p { margin-bottom: 10px; }
.art { position: relative; margin-top: auto; aspect-ratio: 240 / 150; max-height: 280px; border-radius: 8px; overflow: hidden; background: radial-gradient(circle, var(--tint-2) 1px, transparent 1.4px) 0 0 / 12px 12px, var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t-med); }
.step:hover .art { box-shadow: inset 0 0 0 1px var(--line-3); }
.art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.art .cap { position: absolute; z-index: 1; left: 10px; top: 9px; font: 500 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.art .cap.r { left: auto; right: 10px; }
.art * { transform-box: fill-box; transform-origin: center; }
.art .g2 { fill: none; stroke: var(--line-2); }
.art .g3 { fill: none; stroke: var(--line-3); }
.art .g2f { fill: var(--line-2); }
.art .g3f { fill: var(--line-3); }
.art .dt { fill: var(--viz-dot); }
.art .fg { fill: var(--fg-2); }
.art .ac { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.art .acf { fill: var(--accent); }
.art .tx { font: 500 7px var(--mono); letter-spacing: .06em; fill: var(--faint); }
.art .tx.f { fill: var(--fg-2); }
.art .tx.a { fill: var(--accent-ink); }
/* 01 frame: loose signals pass through a model of behaviour; the noise is dropped, one testable question comes out */
.a1 .pill { fill: var(--surface); stroke: var(--line-3); }
.a1 .node { fill: var(--surface); stroke: var(--fg-2); stroke-width: 1.2; }
.a1 .core { fill: var(--fg-2); }
.a1 .card { fill: var(--surface); stroke: var(--accent-line); }
.a1 .spin { animation: artSpin 40s linear infinite both; }
.a1 .flk { fill: none; stroke: var(--fg-2); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 8 100; animation: artFlow 2.6s linear infinite both; }
.a1 .fl { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 18 100; animation: artFlow 1.6s linear infinite both; }
.a1 .drop { animation: artDrop 6s ease-in-out infinite alternate both; }
.a1 .xm { fill: none; stroke: var(--faint); stroke-width: 1.2; stroke-linecap: round; animation: artX 6s ease-in-out infinite alternate both; }
.a1 .pu { animation: artPulse 2.2s ease-out infinite both; }
@keyframes artSpin { to { transform: rotate(360deg); } }
@keyframes artPulse { from { transform: scale(1); opacity: .5; } to { transform: scale(3.4); opacity: 0; } }
@keyframes artDrop { 0%, 35% { opacity: 1; } 65%, 100% { opacity: .28; } }
@keyframes artX { 0%, 40% { opacity: 0; } 70%, 100% { opacity: 1; } }
/* 02 isolate: one manipulation shifts the distribution */
.a2 .fa { fill: var(--tint-2); }
.a2 .sa { fill: none; stroke: var(--fg-2); stroke-width: 1.3; }
.a2 .fb { fill: rgba(var(--accent-rgb), .14); }
.a2 .sb { animation: artShift 5.5s cubic-bezier(.65, 0, .35, 1) infinite alternate both; }
.a2 .dl { animation: artDelta 5.5s ease infinite alternate both; }
@keyframes artShift { 0%, 18% { transform: translateX(0); } 72%, 100% { transform: translateX(52px); } }
@keyframes artDelta { 0%, 66% { opacity: 0; } 86%, 100% { opacity: 1; } }
/* 03 design: tokens feed components feed screens */
.a3 .t1 { fill: var(--fg-2); }
.a3 .t2 { fill: var(--line-3); }
.a3 .aa { font: 600 12px var(--font); fill: var(--fg-2); letter-spacing: -.02em; }
.a3 .cb { fill: var(--tint-2); stroke: var(--line-3); }
.a3 .cd, .a3 .ph { fill: var(--surface); stroke: var(--line-3); }
.a3 .tg { fill: var(--tint); stroke: var(--line-3); }
.a3 .kn { animation: artKnob 2.6s cubic-bezier(.65, 0, .35, 1) infinite alternate both; }
.a3 .b0 { fill: var(--line-2); }
.a3 .bk { fill: var(--line-3); }
.a3 .bl { animation: artBuild 5s cubic-bezier(.22, 1, .36, 1) infinite alternate both; animation-delay: calc(var(--i) * 140ms); }
.a3 .fl { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 10 100; animation: artFlow 2.4s linear infinite both; }
@keyframes artKnob { 0%, 30% { transform: translateX(0); fill: var(--fg-2); } 70%, 100% { transform: translateX(12px); fill: var(--accent); } }
@keyframes artBuild { 0%, 12% { opacity: 0; transform: translateY(5px) scale(.96); } 42%, 100% { opacity: 1; transform: none; } }
@keyframes artFlow { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -100; } }
/* 04 report: the null result stays in the plot */
.a4 .ci { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 100; animation: artCi 6s cubic-bezier(.22, 1, .36, 1) infinite alternate both; animation-delay: calc(var(--i) * 160ms); }
.a4 .ci.nul { stroke: var(--muted); }
.a4 .mn { animation: artPop 6s cubic-bezier(.34, 1.4, .64, 1) infinite alternate both; animation-delay: calc(var(--i) * 160ms); }
.a4 .hol { fill: var(--surface); stroke: var(--muted); stroke-width: 1.6; }
.a4 .nb { fill: rgba(var(--accent-rgb), .07); stroke: var(--accent-line); stroke-dasharray: 3 3; animation: artBox 6s ease infinite alternate both; }
.a4 .nbt { animation: artBox 6s ease infinite alternate both; }
@keyframes artCi { 0%, 10% { stroke-dashoffset: 100; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes artPop { 0%, 30% { transform: scale(0); } 50%, 100% { transform: scale(1); } }
@keyframes artBox { 0%, 58% { opacity: 0; } 80%, 100% { opacity: 1; } }
.steps:not(.in) .art * { animation-play-state: paused !important; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.portrait { position: sticky; top: calc(var(--top-h) + 24px); overflow: hidden; aspect-ratio: 4 / 5; background: var(--img-bg); }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.02); transition: filter 800ms var(--ease), transform 1200ms var(--ease); }
.portrait:hover img { filter: none; transform: scale(1.02); }
.portrait .tag { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; }
.portrait .tag .badge { background: rgba(8, 9, 10, .6); color: #e6e6e6; backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.langs { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 0; }
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.skills .card { padding: 20px 22px; }
.skills h4 { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.skills li { font-size: 14px; color: var(--fg-2); padding: 7px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
.skills li:first-child { border-top: 0; }

.xp { margin-top: 56px; }
.xp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.xp-group { margin-top: 28px; }
.xp-group > .micro { display: flex; justify-content: space-between; padding-bottom: 10px; }
.xp-item { position: relative; border-radius: 10px; transition: background-color 260ms var(--ease), box-shadow 260ms var(--ease); }
/* hairline separators drawn inset, so they never bend round the rounded hover panel */
.xp-item::before, .xp-item:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transition: opacity 200ms; pointer-events: none; }
.xp-item::before { top: 0; }
.xp-item:last-child::after { bottom: 0; }
/* hover: lift the row off the list */
.xp-item:hover { background: var(--tint-2); }
/* open: accent panel, the strongest state on the list */
.xp-item.open { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.xp-item:hover::before, .xp-item:hover::after, .xp-item.open::before, .xp-item.open::after,
.xp-item:hover + .xp-item::before, .xp-item.open + .xp-item::before { opacity: 0; }
.xp-btn { position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto 28px; gap: 16px; align-items: center; padding: 18px 16px 18px 20px; text-align: left; border-radius: 10px; }
.xp-btn:focus-visible { outline-offset: -2px; }
.xp-bar { position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform 380ms var(--ease); }
.xp-item:hover .xp-bar { transform: scaleY(.55); }
.xp-item.open .xp-bar { transform: scaleY(1); }
.xp-btn > span:nth-child(2) { transition: transform 380ms var(--ease); }
.xp-item:hover .xp-btn > span:nth-child(2), .xp-item.open .xp-btn > span:nth-child(2) { transform: translateX(4px); }
.xp-btn .t { display: block; color: var(--fg-2); font: 500 16px/1.25 var(--font); letter-spacing: -.02em; transition: color 220ms; }
.xp-item:hover .t { color: var(--fg); }
.xp-item.open .t { color: var(--accent-ink); }
.xp-btn .o { display: block; color: var(--muted); font-size: 13.5px; letter-spacing: -.008em; margin-top: 4px; }
.xp-btn .d { font: 400 12px/1.45 var(--mono); color: var(--faint); text-align: right; letter-spacing: -.02em; transition: color 220ms; }
.xp-item:hover .d, .xp-item.open .d { color: var(--fg-2); }
.xp-btn .pl { position: relative; width: 28px; height: 28px; border-radius: 50%; justify-self: end; box-shadow: inset 0 0 0 1px var(--line-2); transition: background 260ms, box-shadow 260ms; }
.xp-btn .pl::before, .xp-btn .pl::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--muted); border-radius: 1px; transition: transform 400ms var(--ease), background 260ms; }
.xp-btn .pl::after { transform: rotate(90deg); }
.xp-item:hover .pl { box-shadow: inset 0 0 0 1px var(--line-3); }
.xp-item:hover .pl::before, .xp-item:hover .pl::after { background: var(--fg); }
.xp-item.open .pl { background: var(--accent); box-shadow: none; }
.xp-item.open .pl::before, .xp-item.open .pl::after { background: #fff; }
.xp-item.open .pl::after { transform: rotate(0); }
.xp-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease); }
.xp-item.open .xp-body { grid-template-rows: 1fr; }
.xp-body > div { overflow: hidden; }
.xp-inner { padding: 0 20px 20px 24px; }
.xp-inner ul { display: grid; gap: 8px; }
.xp-inner li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; letter-spacing: -.01em; color: var(--fg-2); opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.xp-item.open .xp-inner li { opacity: 1; transform: none; }
.xp-item.open .xp-inner li:nth-child(2) { transition-delay: 60ms; }
.xp-item.open .xp-inner li:nth-child(3) { transition-delay: 120ms; }
.xp-inner li::before { content: ""; position: absolute; left: 2px; top: calc(.75em - 1px); width: 7px; height: 2px; border-radius: 1px; background: var(--accent); }
.xp-inner li b { font: 500 13.5px/1 var(--mono); letter-spacing: -.04em; color: var(--fg); }
.xp-inner .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.xp-item.open .chip { background: var(--tint-2); }
@media (max-width: 720px) { .xp-btn { grid-template-columns: 1fr 28px; padding: 16px 12px 16px 16px; } .xp-btn .d { grid-column: 1; grid-row: 2; text-align: left; transition: color 220ms, transform 380ms var(--ease); } .xp-item:hover .d, .xp-item.open .d { transform: translateX(4px); } .xp-btn .pl { grid-row: 1 / span 2; grid-column: 2; } .xp-inner { padding: 0 14px 18px 18px; } }

.away { margin-top: var(--section); }
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 12px; width: max-content; animation: marq 60s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.marquee figure { margin: 0; width: 220px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--img-bg); box-shadow: var(--inset); flex-shrink: 0; }
.marquee figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 600ms var(--ease), transform 900ms var(--ease); }
.marquee figure:hover img { filter: none; transform: scale(1.04); }
.away-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.away-grid .card { padding: 22px 24px; display: flex; gap: 18px; align-items: center; }
.wave { flex-shrink: 0; width: 120px; height: 44px; }

/* ---------- contact ---------- */
.contact { margin-top: var(--section); padding: clamp(40px, 6vw, 72px); overflow: hidden; }
.contact .d1 { font-size: clamp(32px, 5vw, 60px); max-width: 13em; }
.contact .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; align-items: center; }
.contact canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; pointer-events: none; }
.contact .links { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid var(--line); }
.contact .links a { padding: 18px 0 4px; display: flex; flex-direction: column; gap: 6px; transition: color var(--t-fast); }
.contact .links a + a { padding-left: 20px; border-left: 1px solid var(--line); }
.contact .links .micro { transition: color var(--t-fast); }
.contact .links span:last-child { color: var(--fg-2); font-size: 14px; }
.contact .links a:hover span:last-child { color: var(--fg); }
.contact .links a:hover .micro { color: var(--accent); }

footer { margin-top: 56px; padding: 28px 0 40px; border-top: 1px solid var(--line); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--faint); }
footer .clock { font-family: var(--mono); font-size: 12px; }
footer .clock i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2fb35a; margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(47, 179, 90, .15); }

/* toast */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 220; transform: translate(-50%, 20px) scale(.96); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--surface-3); color: var(--fg); font-size: 13.5px; box-shadow: var(--pop); transition: transform 500ms var(--spring), opacity 250ms; }
.toast.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.toast svg { color: var(--accent); }
.toast .ck path { stroke-dasharray: 20; stroke-dashoffset: 20; }
.toast.show .ck path { animation: draw 500ms 120ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- command palette ---------- */
.pal-wrap { position: fixed; inset: 0; z-index: 150; display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 16px; visibility: hidden; }
.pal-wrap.open { visibility: visible; }
.pal-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 220ms var(--ease); }
[data-theme="light"] .pal-scrim { background: rgba(20, 20, 20, .18); }
.pal-wrap.open .pal-scrim { opacity: 1; }
.pal { position: relative; width: 100%; max-width: 640px; border-radius: 14px; background: var(--surface); box-shadow: var(--pop); overflow: hidden; transform: translateY(-8px) scale(.97); opacity: 0; transition: transform 380ms var(--spring), opacity 180ms var(--ease); }
.pal-wrap.open .pal { transform: none; opacity: 1; }
.pal-in { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.pal-in svg { color: var(--faint); flex-shrink: 0; }
.pal-in input { flex: 1; height: 100%; border: 0; outline: 0; background: none; color: var(--fg); font: 400 16px var(--font); }
.pal-in input::placeholder { color: var(--faint); }
.pal-ctx { display: flex; gap: 6px; padding: 10px 16px 0; }
.pal-list { position: relative; max-height: min(420px, 52vh); overflow-y: auto; padding: 8px; scroll-padding: 8px; }
.pal-grp { padding: 12px 10px 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pal-it { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 10px; border-radius: 8px; cursor: pointer; color: var(--fg-2); font-size: 14px; }
.pal-it .ic { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 500 10px/1 var(--mono); }
.pal-it .ic.r { color: var(--accent); }
.pal-it .ic.d { color: var(--fg); }
.pal-tag { font: 500 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 4px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.pal-it .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-it .tx small { color: var(--faint); margin-left: 8px; font-size: 12.5px; }
.pal-it mark { background: none; color: var(--accent-ink); }
.pal-it .rt { font: 400 11.5px/1 var(--mono); color: var(--faint); display: flex; gap: 6px; align-items: center; }
.pal-it.sel { color: var(--fg); }
.pal-it.sel .ic { color: var(--fg); background: var(--tint-2); }
.pal-hl { position: absolute; left: 8px; right: 8px; top: 0; height: 44px; border-radius: 8px; background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform 220ms var(--ease); pointer-events: none; }
.pal-hl::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--accent); }
.pal-empty { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.pal-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.pal-foot span { display: inline-flex; gap: 6px; align-items: center; }
.pal-foot .kbd { height: 18px; font-size: 10.5px; }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; visibility: hidden; pointer-events: none; transition: visibility 0s linear 320ms; }
.lb.open { visibility: visible; pointer-events: auto; transition: none; }
.lb-scrim { position: absolute; inset: 0; background: rgba(4, 5, 6, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 280ms var(--ease); }
.lb.open .lb-scrim { opacity: 1; }
.lb-stage { position: relative; border-radius: 10px; overflow: hidden; background: #0f1011; box-shadow: 0 30px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); transform-origin: top left; will-change: transform; cursor: zoom-out; }
.lb-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.lb-stage .lb-hi { opacity: 0; transition: opacity 220ms var(--ease); }
.lb-stage.hi .lb-hi { opacity: 1; }
.lb-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: lbload 1s linear infinite; opacity: 0; transition: opacity 200ms; }
.lb-stage.loading::after { opacity: 1; transition-delay: 150ms; }
@keyframes lbload { from { background-position: -100% 0; } to { background-position: 200% 0; } }
.lb-err { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 12px; color: #a5a9b0; font: 500 12px/1.4 var(--mono); text-align: center; }
.lb-stage.err .lb-err { display: grid; }
.lb-err button { color: #fff; padding: 8px 14px; border-radius: 6px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font: inherit; }
.lb-err button:hover { background: rgba(255, 255, 255, .18); }
.lb-cap { position: absolute; bottom: 20px; left: 0; right: 0; padding: 0 72px; text-align: center; color: #a5a9b0; font-size: 12.5px; opacity: 0; transition: opacity 240ms 120ms; }
.lb.open .lb-cap { opacity: 1; }
.lb-x, .lb-p, .lb-n { position: absolute; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #ddd; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); opacity: 0; transition: opacity 240ms 120ms, background 160ms, transform 160ms var(--ease); }
.lb.open .lb-x, .lb.open .lb-p, .lb.open .lb-n { opacity: 1; }
.lb.single .lb-p, .lb.single .lb-n, .lb.single .lb-count { display: none; }
.lb-x:hover, .lb-p:hover, .lb-n:hover { background: rgba(255, 255, 255, .16); }
.lb-p:active, .lb-n:active, .lb-x:active { transform: scale(.92); }
.lb-x { top: 20px; right: 20px; }
.lb-p { left: 20px; top: 50%; margin-top: -20px; }
.lb-n { right: 20px; top: 50%; margin-top: -20px; }
.lb-count { position: absolute; top: 32px; left: 0; right: 0; text-align: center; font: 500 11px/1 var(--mono); color: #8a8f98; letter-spacing: .08em; opacity: 0; transition: opacity 240ms 120ms; }
.lb.open .lb-count { opacity: 1; }
@media (max-width: 720px) { .lb-p, .lb-n { top: auto; bottom: 56px; margin: 0; } .lb-cap { padding: 0 20px; bottom: 20px; } }

/* ==========================================================================
   Case study
   ========================================================================== */
.case-head { padding-top: calc(var(--top-h) + clamp(36px, 6vw, 72px)); }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 40px; transition: color var(--t-fast); }
.back .arr { transition: transform var(--t-med) var(--ease); }
.back:hover { color: var(--fg); }
.back:hover .arr { transform: translateX(-4px); }
.case-tag { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.case-tag .micro b { color: var(--accent); font-weight: 500; }
.case-head h1 { font-size: clamp(40px, 6.2vw, 76px); max-width: 13.5em; margin-bottom: 28px; }
.case-head .lede { margin-bottom: 44px; }
.meta { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.meta > div { padding: 18px 20px 20px 0; }
.meta > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.meta .micro { display: block; margin-bottom: 10px; }
.meta .v { font-size: 14px; color: var(--fg-2); line-height: 1.5; }
.meta .v a { color: var(--fg); display: inline-flex; gap: 4px; margin-right: 12px; transition: color var(--t-fast); }
.meta .v a:hover { color: var(--accent-ink); }
.cover { margin-top: 40px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--img-bg); }
.cover > img, .cover > video { width: 100%; height: 100%; object-fit: cover; }

.case-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); margin-top: clamp(56px, 7vw, 88px); }
.toc { position: sticky; top: calc(var(--top-h) + 32px); align-self: start; }
.toc .micro { margin-bottom: 16px; display: block; }
.toc ol { position: relative; }
.toc ol::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.toc .fill { position: absolute; left: 3px; top: 8px; width: 1px; background: var(--accent); height: var(--fh, 0px); transition: height 400ms var(--ease); }
.toc li a { position: relative; display: grid; grid-template-columns: 42px 1fr; align-items: baseline; padding: 6px 0 6px 0; font-size: 13.5px; color: var(--muted); transition: color var(--t-fast); }
.toc li a::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-3); transition: background 300ms, box-shadow 300ms, transform 400ms var(--spring); }
.toc li a .n { font: 400 10.5px/1 var(--mono); color: var(--faint); padding-left: 18px; transition: color var(--t-fast); }
.toc li a:hover { color: var(--fg); }
.toc li a.on { color: var(--fg); }
.toc li a.on .n { color: var(--accent); }
.toc li a.on::before, .toc li a.done::before { background: var(--accent); box-shadow: none; }
.toc li a.on::before { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); }
.toc .toc-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.toc .toc-foot a, .toc .toc-foot button { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; transition: color var(--t-fast); }
.toc .toc-foot a:hover, .toc .toc-foot button:hover { color: var(--fg); }

.c-sec { padding-bottom: clamp(72px, 9vw, 112px); }
.c-sec .d2 { font-size: clamp(26px, 3.3vw, 40px); max-width: 16em; margin-bottom: 28px; }
.c-blk + .c-blk { margin-top: 28px; }
.c-blk.gap-lg { margin-top: 48px; }
.h3 { font: 500 19px/1.25 var(--display); letter-spacing: -.05em; word-spacing: -.18em; color: var(--fg); margin: 8px 0 12px; }
.h3 + .prose { margin-top: 0; }

/* summary */
.sum { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.sum > div { padding: 20px 24px 22px 0; border-bottom: 1px solid var(--line); }
.sum > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
.sum .micro { display: block; margin-bottom: 10px; color: var(--accent-ink); }
.sum p { font-size: 15px; color: var(--fg-2); line-height: 1.6; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.metric { padding: 22px 22px 24px; }
.metric .num { font: 400 clamp(34px, 3.8vw, 46px)/1 var(--display); letter-spacing: -.07em; font-variant-numeric: tabular-nums; color: var(--fg); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.metric .num.a { color: var(--accent); }
.metric .num small { font-size: 16px; color: var(--muted); letter-spacing: -.01em; }
.metric .l { margin-top: 16px; font-size: 14.5px; color: var(--fg); font-weight: 500; }
.metric .s { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* figures */
.fig { margin: 0; }
.fig .frame { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--img-bg); box-shadow: var(--inset); }
.fig .frame img, .fig .frame video { width: 100%; height: auto; transition: opacity 700ms var(--ease), transform 1100ms var(--ease), filter 700ms var(--ease); }
.fig .frame.fit img, .fig .frame.fit video { height: 100%; object-fit: cover; position: absolute; inset: 0; }
.fig .frame.zoom { cursor: zoom-in; }
.fig .frame.zoom:hover img { transform: scale(1.02); }
.fig figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); display: flex; gap: 10px; }
.fig figcaption .micro { padding-top: 3px; }
.ld img, .ld video { opacity: 0; filter: blur(8px); }
.ld.ok img, .ld.ok video { opacity: 1; filter: none; }
.ld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--tint) 50%, transparent 70%) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; pointer-events: none; }
.ld.ok::after { display: none; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -100% 0; } }
.vid-ctl { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); opacity: 0; transition: opacity var(--t-med), transform var(--t-fast); }
.fig .frame:hover .vid-ctl, .cover:hover .vid-ctl, .vid-ctl:focus-visible { opacity: 1; }
.vid-ctl:active { transform: scale(.92); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2.al-c { align-items: center; }
.split-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.split-2.rev > :first-child { order: 2; }

.reel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; cursor: grab; }
.reel.drag { cursor: grabbing; scroll-snap-type: none; }
.reel .fig { flex: 0 0 auto; scroll-snap-align: start; }
.reel .frame img { height: 420px; width: auto; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }

.feat-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
.fc { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.fc .k { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.fc h4 { font: 600 16px/1.3 var(--font); color: var(--fg); letter-spacing: -.022em; }
.fc p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.fc .was { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 13px; }
.fc .was div { display: grid; grid-template-columns: 44px 1fr; gap: 8px; color: var(--fg-2); }
.fc .was span { font: 500 10.5px/1.6 var(--mono); color: var(--faint); }
.fc .was div:last-child span { color: var(--accent); }

.callout { padding: 20px 22px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--inset); position: relative; overflow: hidden; }
.callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.callout .micro { display: block; margin-bottom: 8px; color: var(--accent-ink); }
.callout p { font-size: 14.5px; color: var(--fg-2); line-height: 1.65; }
.quote { padding: 26px 26px 24px; }
.quote p { font: 400 20px/1.45 var(--font); color: var(--fg); letter-spacing: -.024em; text-wrap: pretty; }
.quote p::before { content: "\201C"; color: var(--accent); margin-right: 2px; }
.quote p::after { content: "\201D"; color: var(--accent); }
.quote cite { display: block; margin-top: 16px; font-style: normal; font-size: 13px; color: var(--muted); }
.nlist { counter-reset: n; display: grid; gap: 0; border-top: 1px solid var(--line); }
.nlist li { counter-increment: n; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--fg-2); line-height: 1.6; }
.nlist li::before { content: counter(n, decimal-leading-zero); font: 500 12px/1.9 var(--mono); color: var(--accent); }
.nlist li b { color: var(--fg); font-weight: 560; }
.limits { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.limits li { padding: 12px 0 12px 22px; border-top: 1px solid var(--line); position: relative; font-size: 14px; color: var(--muted); }
.limits li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 1px; background: var(--faint); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.learn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.learn .card { padding: 22px; }
.learn h4 { font: 600 15.5px/1.35 var(--font); color: var(--fg); letter-spacing: -.02em; margin-bottom: 8px; }
.learn p { font-size: 14px; color: var(--muted); line-height: 1.6; }

.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.legend li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); line-height: 1.5; cursor: default; transition: color var(--t-fast); }
.legend li b { display: block; color: var(--fg); font-weight: 520; font-size: 14px; }
.legend li .no { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 500 10.5px/1 var(--mono); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-3); transition: background 200ms, color 200ms, box-shadow 200ms; }
.legend li:hover .no { background: var(--accent); color: #fff; box-shadow: none; }
.legend li:hover { color: var(--fg-2); }

.next { margin: 0 0 var(--section); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 28px 32px; overflow: hidden; }
.next .micro { display: block; margin-bottom: 12px; }
.next h3 { font: 500 clamp(22px, 2.6vw, 30px)/1.12 var(--display); letter-spacing: -.06em; word-spacing: -.22em; color: var(--fg); }
.next .circ { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg); transition: background 300ms, color 300ms, transform 500ms var(--spring), box-shadow 300ms; }
.next:hover .circ { background: var(--accent); color: #fff; box-shadow: none; transform: translateX(4px); }

/* ==========================================================================
   Research viz
   ========================================================================== */
.viz { padding: 22px 24px 24px; }
.viz-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.viz-h .ttl { font: 500 12px/1.3 var(--mono); color: var(--fg-2); letter-spacing: .02em; }
.viz-note { margin-top: 16px; font-size: 12.5px; color: var(--faint); line-height: 1.55; }
.lg { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.lg span { display: inline-flex; align-items: center; gap: 7px; }
.lg i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.lg i.a { background: var(--accent); }
.lg i.o { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.lg i.sq { border-radius: 2px; }

/* spectrum */
.spec { position: relative; padding: 34px 0 6px; }
.spec .tk { position: relative; height: 1px; background: var(--line-3); }
.spec .tk i { position: absolute; top: -4px; width: 1px; height: 9px; background: var(--line-3); }
.spec .grad { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--line-3), var(--fg-2) 50%, var(--line-3)); }
.spec .mk { position: absolute; top: -10px; left: var(--x, 50%); width: 21px; height: 21px; margin-left: -10.5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg-2); transition: left 1400ms var(--ease), box-shadow 400ms, background 400ms; display: grid; place-items: center; font: 600 10px/1 var(--mono); color: var(--fg-2); }
.spec.res .mk { background: var(--accent); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .18); color: #fff; }
.spec.q .mk { animation: wob 3s var(--ease-io) infinite; }
@keyframes wob { 0%, 100% { left: 46%; } 50% { left: 54%; } }
.spec .mk-l { position: absolute; top: -40px; left: var(--x, 50%); transform: translateX(-50%); white-space: nowrap; font: 500 10.5px/1 var(--mono); color: var(--accent-ink); letter-spacing: .04em; text-transform: uppercase; transition: left 1400ms var(--ease); }
.spec .lbls { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 22px; font-size: 13px; }
.spec .lbls div:nth-child(2) { text-align: center; }
.spec .lbls div:last-child { text-align: right; }
.spec .lbls b { display: block; color: var(--fg); font-weight: 520; }
.spec .lbls span { color: var(--muted); font-size: 12.5px; }

/* flow */
.flow-wrap { overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
.flow { min-width: 760px; position: relative; }
.flow svg { width: 100%; height: auto; overflow: visible; }
.flow .node rect { fill: var(--surface-2); stroke: var(--line-2); }
.flow .node.a rect { stroke: var(--accent-line); fill: var(--accent-soft); }
.flow text { font-family: var(--mono); fill: var(--fg-2); letter-spacing: -.02em; }
.flow .k { font: 500 9.5px var(--mono); fill: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.flow .v { font: 500 15px var(--display); fill: var(--fg); }
.flow .s { font-size: 11px; fill: var(--muted); }
.flow .p { fill: none; stroke: var(--line-3); }
.flow .p.a { stroke: var(--accent-line); }
.flow .dot { fill: var(--viz-dot); }
.flow .dot.a { fill: var(--accent); }
.flow .tag { font: 500 9px var(--mono); }

/* matrix */
.mx { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 8px; }
.mx .hd { font: 500 11px/1.3 var(--mono); color: var(--muted); letter-spacing: .03em; display: flex; align-items: flex-end; padding: 0 4px 6px; }
.mx .rh { font: 500 11px/1.3 var(--mono); color: var(--muted); display: flex; align-items: center; letter-spacing: .03em; }
.mx .cell { position: relative; padding: 18px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 400ms var(--ease), box-shadow 300ms; }
.mx .cell:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-3); }
.mx .cell.a { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.mx .pair { display: flex; gap: 6px; font: 500 10.5px/1 var(--mono); }
.mx .pair span { padding: 4px 6px; border-radius: 3px; }
.mx .pair .ok { color: #3fb96a; background: rgba(63, 185, 106, .1); }
.mx .pair .no { color: var(--muted); background: var(--tint-2); text-decoration: line-through; text-decoration-color: var(--faint); }
.mx .n5 { font: 400 26px/1 var(--display); letter-spacing: -.06em; color: var(--fg); }
.mx .n5 small { font: 400 12px var(--font); color: var(--muted); margin-left: 6px; }
.mx .cell.a .n5 small { color: var(--accent-ink); }

/* timeline */
.tl { display: flex; gap: 4px; height: 48px; }
.tl .sg { position: relative; flex: var(--f); border-radius: 6px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; font: 500 11px/1 var(--mono); color: var(--muted); transition: background 300ms, color 300ms; cursor: default; }
.tl .sg.a { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--accent-ink); }
.tl .sg:hover { color: var(--fg); background: var(--tint-2); }
.tl-l { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 16px; }
.tl-l div { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.tl-l b { display: block; font: 500 10.5px/1.4 var(--mono); color: var(--fg-2); letter-spacing: .04em; margin-bottom: 4px; }

/* trial */
.trial-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.trial-q { font: 500 19px/1.4 var(--font); color: var(--fg); letter-spacing: -.024em; margin-bottom: 20px; max-width: 38em; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-2); }
.switch .sw { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-3); transition: background 300ms; }
.switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--fg-2); transition: transform 400ms var(--spring), background 300ms; }
.switch[aria-checked="true"] .sw { background: var(--accent); box-shadow: none; }
.switch[aria-checked="true"] .sw::after { transform: translateX(16px); background: #fff; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ans { position: relative; text-align: left; padding: 20px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform 300ms var(--ease), box-shadow 300ms, background 300ms, opacity 400ms; display: flex; flex-direction: column; gap: 12px; }
.ans:hover:not([disabled]) { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-3); }
.ans .who { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--mono); color: var(--faint); letter-spacing: .04em; }
.ans .who .l { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; background: var(--tint-2); color: var(--fg-2); }
.ans .src { display: inline-block; transition: opacity 400ms var(--ease), filter 400ms var(--ease); }
.answers:not(.lab) .src { opacity: 0; filter: blur(5px); }
.ans p { font-size: 14px; color: var(--fg-2); line-height: 1.6; }
.ans .vd { display: none; font-size: 13px; font-weight: 520; }
.ans.ok .vd { color: #3fb96a; }
.ans.no .vd { color: var(--accent-ink); }
.answers.done .ans { cursor: default; }
.answers.done .ans .vd { display: block; animation: viewIn 500ms var(--ease) both; }
.answers.done .ans.ok { box-shadow: inset 0 0 0 1px rgba(63, 185, 106, .5); }
.answers.done .ans.pick { background: var(--surface-3); }
.answers.done .ans:not(.pick) { opacity: .65; }
.trial-out { display: none; margin-top: 16px; gap: 10px; flex-wrap: wrap; }
.trial-out.show { display: flex; }

/* stacked + hist */
.stk { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; margin: 10px 0; font-size: 13px; color: var(--fg-2); }
.stk .bar { display: flex; height: 26px; gap: 2px; }
.stk .bar i { position: relative; height: 100%; width: 0; border-radius: 3px; background: var(--surface-3); transition: width 900ms var(--ease); transition-delay: var(--dl); display: grid; place-items: center; font: 500 10.5px/1 var(--mono); color: var(--fg-2); font-style: normal; overflow: hidden; }
.in .stk .bar i { width: var(--w); }
.stk .bar i.c3 { background: var(--line-3); }
.stk .bar i.c4 { background: rgba(var(--accent-rgb), .55); color: #fff; }
.stk .bar i.c5 { background: var(--accent); color: #fff; }
.scale5 { display: flex; justify-content: space-between; margin-left: 124px; font: 400 10.5px/1 var(--mono); color: var(--faint); margin-top: 8px; }
.hist { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; height: 150px; align-items: end; }
.hist .b { position: relative; height: 0; border-radius: 4px 4px 2px 2px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: height 900ms var(--ease); transition-delay: var(--dl); }
.in .hist .b { height: var(--h); }
.hist .b.top { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.hist .b span { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font: 500 11px/1 var(--mono); color: var(--fg-2); }
.hist-x { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; font: 400 10.5px/1.3 var(--mono); color: var(--faint); text-align: center; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 0 10px; }
.tbl th:last-child, .tbl td:last-child { text-align: right; }
.tbl td { padding: 11px 0; border-top: 1px solid var(--line); color: var(--fg-2); }
.tbl td:last-child { font-family: var(--mono); color: var(--fg); }
.tbl tr.tot td { color: var(--fg); font-weight: 520; }
.tbl tr.tot td:last-child { color: var(--accent); }

/* forest */
.ftabs { margin-bottom: 8px; }
.ftabs button b { font-weight: inherit; }
.ftabs button { gap: 0; }
.ftabs .rq-t::before { content: "\00a0·\00a0"; }
.f-axis.r-ax { grid-template-columns: 170px minmax(0, 1fr) 150px; }
.lol-ax.db-ax { grid-template-columns: 170px minmax(0, 1fr) 120px; gap: 20px; }
.forest { position: relative; }
.f-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 236px; gap: 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.f-label .nm { display: block; color: var(--fg); font-size: 14px; font-weight: 500; }
.f-label .nn { color: var(--faint); font: 400 11.5px var(--mono); }
.f-plot { position: relative; height: 34px; }
.f-plot .gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.f-plot .gl.z { background: var(--line-3); }
.f-plot .zl { position: absolute; top: -18px; transform: translateX(-50%); font: 400 10px var(--mono); color: var(--faint); white-space: nowrap; }
.f-ci { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--muted); border-radius: 2px; transition: left 800ms var(--ease), width 800ms var(--ease), background 400ms; }
.f-ci::before, .f-ci::after { content: ""; position: absolute; top: -5px; width: 1px; height: 12px; background: inherit; }
.f-ci::before { left: 0; }
.f-ci::after { right: 0; }
.f-pt { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--fg-2); transition: left 800ms var(--ease), background 400ms, box-shadow 400ms, transform 300ms var(--spring); outline: none; }
.f-pt:hover, .f-pt:focus-visible { transform: scale(1.35); }
.f-row.sig .f-ci { background: var(--accent); }
.f-row.sig .f-pt { background: var(--accent); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .16); }
.f-row.ns .f-pt { background: var(--surface); box-shadow: inset 0 0 0 2px var(--muted); }
.f-stat { display: grid; grid-template-columns: .9fr 1.5fr 1fr; gap: 10px; font-size: 12px; white-space: nowrap; }
.f-stat i { display: block; font: 400 10px/1 var(--mono); font-style: normal; color: var(--faint); margin-bottom: 5px; letter-spacing: .04em; }
.f-stat b { font: 500 12.5px var(--mono); color: var(--fg); }
.f-axis { display: grid; grid-template-columns: 130px minmax(0, 1fr) 236px; gap: 20px; padding-top: 10px; border-top: 1px solid var(--line); }
.f-axis .ax { position: relative; height: 16px; font: 400 10.5px var(--mono); color: var(--faint); }
.f-axis .ax span { position: absolute; transform: translateX(-50%); }
.f-xl { text-align: center; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.f-msg { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.f-msg .micro { color: var(--accent-ink); display: block; margin-bottom: 8px; }
.f-msg p { font-size: 15px; line-height: 1.65; color: var(--fg-2); max-width: 46em; transition: opacity 250ms; }
.f-tip { position: absolute; z-index: 5; pointer-events: none; padding: 8px 10px; border-radius: 6px; background: var(--surface-3); box-shadow: var(--pop); font: 500 11.5px/1.5 var(--mono); color: var(--fg); white-space: nowrap; opacity: 0; transform: translate(-50%, -110%) translateY(4px); transition: opacity 150ms, transform 200ms var(--ease); }
.f-tip.show { opacity: 1; transform: translate(-50%, -110%); }

.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp .card { padding: 22px; }
.cmp .num { font: 400 40px/1 var(--display); letter-spacing: -.07em; color: var(--fg); }
.cmp .num.a { color: var(--accent); }
.cmp p { margin-top: 10px; font-size: 14px; color: var(--fg-2); }
.cmp .st { margin-top: 12px; font: 400 12px var(--mono); color: var(--faint); }

/* regression */
.reg-h { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.reg-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.r-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px; gap: 20px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.r-row .nm { color: var(--fg); font-size: 14px; font-weight: 500; display: block; }
.r-row .ds { color: var(--faint); font-size: 12px; }
.r-row .eff { display: inline-block; margin-left: 6px; font: 500 9.5px/1 var(--mono); color: var(--accent-ink); background: var(--accent-soft); padding: 3px 5px; border-radius: 3px; vertical-align: 2px; text-transform: uppercase; letter-spacing: .04em; }
.r-row .stat { font: 400 12px/1.5 var(--mono); color: var(--muted); text-align: right; }
.r-row .stat b { color: var(--fg); font-weight: 500; }

/* IA viz */
.lol { display: grid; gap: 4px; }
.lol-r { display: grid; grid-template-columns: 200px minmax(0, 1fr) 46px; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.lol-r .nm { color: var(--fg); font-size: 14px; display: block; }
.lol-r .ds { color: var(--faint); font: 400 11px var(--mono); }
.lol-r .rk { font: 500 12px var(--mono); color: var(--faint); text-align: right; }
.lol-r:first-child .rk { color: var(--accent); }
.lol-t { position: relative; height: 28px; }
.lol-t .gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.lol-t .stem { position: absolute; top: 50%; left: 0; height: 1px; background: var(--line-3); width: 0; transition: width 900ms var(--ease); transition-delay: var(--dl); }
.lol-t .m { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; left: 0; transition: left 900ms var(--ease); transition-delay: var(--dl); }
.lol-t .m.a { background: var(--fg-2); }
.lol-t .m.b { background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15); }
.in .lol-t .stem { width: var(--w); }
.in .lol-t .m { left: var(--x); }
.lol-t .tip { position: absolute; top: -14px; transform: translateX(-50%); font: 500 10.5px var(--mono); color: var(--fg-2); left: var(--x); opacity: 0; transition: opacity 400ms 900ms; }
.lol-t .tip.b { color: var(--accent-ink); top: auto; bottom: -14px; }
.in .lol-t .tip { opacity: 1; }
.lol-ax { display: grid; grid-template-columns: 200px minmax(0, 1fr) 46px; gap: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.lol-ax .ax { position: relative; height: 14px; font: 400 10.5px var(--mono); color: var(--faint); }
.lol-ax .ax span { position: absolute; transform: translateX(-50%); }

.tree-box { overflow: hidden; }
.tree-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tree-url { font: 400 12px var(--mono); color: var(--faint); display: flex; gap: 8px; align-items: center; }
.tree-url i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-3); }
.tree-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.tree { padding: 18px 18px 22px; min-height: 420px; position: relative; }
.tree ul { display: grid; gap: 2px; }
.tree li { --dl: calc(var(--i) * 26ms); }
.tn { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 10px; border-radius: 6px; font-size: 14px; color: var(--fg-2); opacity: 0; transform: translateX(-6px); animation: tnIn 500ms var(--ease) forwards; animation-delay: var(--dl); transition: background 300ms, color 300ms, box-shadow 300ms; }
@keyframes tnIn { to { opacity: 1; transform: none; } }
.tn .ar { width: 12px; color: var(--faint); font-size: 10px; flex-shrink: 0; }
.tn .nl { font: 400 11.5px var(--mono); color: var(--faint); }
.tn .nb { margin-left: auto; font: 500 9.5px/1 var(--mono); padding: 3px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); background: var(--accent-soft); }
.tn .nb.g { color: var(--muted); background: var(--tint-2); }
.tree .sub { padding-left: 22px; }
.tree .sub .tn { font-size: 13.5px; color: var(--muted); }
.tree .leaf { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px 6px 44px; }
.tree .leaf span { font: 400 11px var(--mono); color: var(--faint); padding: 3px 6px; border-radius: 3px; background: var(--tint); }
.tn.path { color: var(--fg); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.tn.path .ar { color: var(--accent); }
.tn.path.end { background: var(--accent); color: #fff; box-shadow: none; }
.tn.path.end .nl { color: rgba(255, 255, 255, .8); }
.tree-side { border-left: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-2); }
.tree-side .st { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tree-side .st:last-of-type { border-bottom: 0; }
.tree-side .num { font: 400 34px/1 var(--display); letter-spacing: -.07em; color: var(--fg); margin: 8px 0 6px; }
.tree-side .num.a { color: var(--accent); }
.tree-side p { font-size: 13px; color: var(--muted); line-height: 1.5; }

.fc-q { font: 500 18px/1.4 var(--font); letter-spacing: -.022em; color: var(--fg); margin: 6px 0 18px; max-width: 34em; }
.fc-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fc-b { position: relative; overflow: hidden; height: 52px; padding: 0 14px; border-radius: 8px; text-align: left; font-size: 14px; color: var(--fg-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); display: flex; align-items: center; justify-content: space-between; transition: transform 250ms var(--ease), box-shadow 250ms, color 250ms; }
.fc-b:hover:not([disabled]) { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg); }
.fc-b .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--tint-2); transition: width 900ms var(--ease); z-index: 0; }
.fc-b span { position: relative; z-index: 1; }
.fc-b .pc { font: 500 12px var(--mono); color: var(--fg-2); opacity: 0; transition: opacity 400ms 400ms; }
.fc-nav.done .fc-b { cursor: default; }
.fc-nav.done .fc-b .fill { width: var(--p); }
.fc-nav.done .fc-b .pc { opacity: 1; }
.fc-nav.done .fc-b.right { box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--fg); }
.fc-nav.done .fc-b.right .fill { background: var(--accent-soft); }
.fc-nav.done .fc-b.right .pc { color: var(--accent-ink); }
.fc-nav.done .fc-b.pick::after { content: "your pick"; position: absolute; right: 10px; top: 6px; font: 500 9px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; z-index: 1; }
.fc-out { display: none; margin-top: 18px; }
.fc-out.show { display: block; animation: viewIn 500ms var(--ease) both; }
.fc-out .big { font: 400 38px/1 var(--display); color: var(--accent); letter-spacing: -.07em; }
.fc-out p { margin-top: 10px; font-size: 14.5px; color: var(--fg-2); max-width: 44em; line-height: 1.6; }
.fc-out .row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.fc-steps { display: flex; gap: 4px; }
.fc-steps i { width: 18px; height: 3px; border-radius: 2px; background: var(--line-3); transition: background 300ms; }
.fc-steps i.on { background: var(--accent); }

.db-r { display: grid; grid-template-columns: 170px minmax(0, 1fr) 120px; gap: 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.db-r .nm { display: block; color: var(--fg); font-size: 14px; font-weight: 500; }
.db-r .ds { color: var(--faint); font: 400 11px var(--mono); }
.db-t { position: relative; height: 30px; }
.db-t .gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.db-t .ln { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, var(--line-3), var(--accent)); left: var(--a); width: 0; transition: width 900ms var(--ease); transition-delay: var(--dl); }
.in .db-t .ln { width: var(--w); }
.db-t .m { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; }
.db-t .m.o { left: var(--a); background: var(--muted); }
.db-t .m.n { left: var(--a); background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); transition: left 900ms var(--ease); transition-delay: var(--dl); }
.in .db-t .m.n { left: var(--b); }
.db-r.ns .db-t .m.n { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.db-t .v { position: absolute; bottom: -12px; transform: translateX(-50%); font: 500 10.5px var(--mono); color: var(--muted); }
.db-t .v.n { bottom: auto; top: -12px; color: var(--accent-ink); left: var(--b); opacity: 0; transition: opacity 400ms; transition-delay: calc(var(--dl) + 700ms); }
.in .db-t .v.n { opacity: 1; }
.db-r .res { text-align: right; font: 500 13px var(--mono); color: var(--fg); }
.db-r .res small { display: block; color: var(--faint); font-size: 11px; font-weight: 400; margin-top: 3px; }
.db-r.ns .res { color: var(--muted); }

.pair-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pc { padding: 18px; }
.pc .micro { display: block; margin-bottom: 4px; }
.pc .lab { font-size: 13px; color: var(--fg-2); margin-bottom: 16px; }
.pc .bars { display: grid; gap: 8px; }
.pc .bars div { display: grid; grid-template-columns: 1fr 48px; gap: 8px; align-items: center; font: 500 12px var(--mono); color: var(--muted); }
.pc .bars i { display: block; height: 8px; border-radius: 4px; background: var(--line-3); width: 0; transition: width 900ms var(--ease); }
.pc .bars div:last-child i { background: var(--accent); }
.pc .bars div:last-child { color: var(--fg); }
.in .pc .bars i { width: var(--w); }
.pc .dl { margin-top: 14px; font: 400 20px/1 var(--display); color: var(--accent); letter-spacing: -.05em; }

.split-bar { display: flex; height: 44px; border-radius: 8px; overflow: hidden; gap: 2px; }
.split-bar i { width: 0; display: flex; align-items: center; padding: 0 14px; font: 500 13px/1 var(--mono); font-style: normal; transition: width 1000ms var(--ease); white-space: nowrap; }
.in .split-bar i { width: var(--w); }
.split-bar i:first-child { background: var(--accent); color: #fff; }
.split-bar i:last-child { background: var(--surface-3); color: var(--fg-2); justify-content: flex-end; }

.phase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.phase .fc .stats { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; }

/* design-case coded visuals */
.chain { overflow: hidden; }
.chain canvas { width: 100%; height: 220px; display: block; }
.chain-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 16px; border-top: 1px solid var(--line); background: var(--bg-2); }
.ck { position: relative; height: 64px; border-radius: 8px; padding: 10px 12px; text-align: left; background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px var(--line-2), 0 2px 0 var(--line); transition: transform 120ms var(--ease), box-shadow 120ms; display: flex; flex-direction: column; justify-content: space-between; }
.ck:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 var(--line); }
.ck .nm { font: 600 11px/1 var(--mono); letter-spacing: .1em; color: var(--fg-2); }
.ck .led { width: 7px; height: 7px; border-radius: 50%; background: var(--line-3); transition: background 200ms, box-shadow 200ms; }
.ck.on .led { background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .9); }
.ck .ds { font-size: 11px; color: var(--faint); }

.sig-chart { position: relative; }
.sig-chart svg { width: 100%; height: auto; overflow: visible; }
.sig-chart .cdl { stroke-width: 1; }
.sig-chart .up { fill: var(--fg-2); stroke: var(--fg-2); }
.sig-chart .dn { fill: var(--surface); stroke: var(--muted); }
.sig-chart .zone { fill: rgba(var(--accent-rgb), .1); stroke: none; }
.sig-chart .lvl { stroke-dasharray: 4 4; stroke-width: 1; }
.sig-chart .lvl.t { stroke: #3fb96a; }
.sig-chart .lvl.s { stroke: var(--accent); }
.sig-chart .lvl.e { stroke: var(--fg-2); }
.sig-chart text { font: 500 10.5px var(--mono); fill: var(--muted); }
.sig-chart .lt { fill: var(--fg); }
.sig-chart .gridl { stroke: var(--line); }
.sig-chart .xh { stroke: var(--line-3); stroke-dasharray: 2 3; }
.sig-chart .cdl-g { opacity: 0; transition: opacity 300ms var(--ease); }
.sig-chart.in .cdl-g { opacity: 1; }

.phones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.phone-c { padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.phone { width: 150px; height: 300px; border-radius: 22px; padding: 10px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-3); display: flex; flex-direction: column; gap: 6px; }
.phone .hb { height: 120px; border-radius: 12px; transition: background-color 600ms var(--ease); display: flex; align-items: flex-end; padding: 10px; }
.phone .hb i { display: block; height: 6px; width: 60%; border-radius: 3px; background: rgba(255, 255, 255, .7); }
.phone .ln { height: 6px; border-radius: 3px; background: var(--line-3); }
.phone .ln.s { width: 60%; }
.phone .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.phone .cards i { height: 52px; border-radius: 6px; background: var(--line-2); }
.phone .cta { margin-top: auto; height: 22px; border-radius: 6px; background: var(--line-3); }
.phone.stable .hb { background: #c8b29a; }
.phone.stable .cta { background: var(--accent); }
.phone-c .cap { text-align: center; }
.phone-c .cap b { display: block; color: var(--fg); font-weight: 520; font-size: 14px; }
.phone-c .cap span { font-size: 13px; color: var(--muted); }

.gestalt { display: grid; grid-template-columns: minmax(0, 1fr) 220px; }
.g-stage { position: relative; height: 300px; padding: 20px; }
.g-el { position: absolute; border-radius: 4px; transition: left 800ms var(--ease), top 800ms var(--ease), width 800ms var(--ease), height 800ms var(--ease), background 500ms, opacity 500ms; }
.g-el.img { background: var(--line-2); }
.g-el.tt { background: var(--fg-2); height: 6px; }
.g-el.pr { background: var(--accent); height: 8px; }
.g-el.btn { background: var(--line-3); height: 16px; border-radius: 4px; }
.g-el.bx { background: transparent; box-shadow: inset 0 0 0 1px transparent; border-radius: 10px; transition: all 800ms var(--ease), box-shadow 600ms; }
.gestalt.on .g-el.bx { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.g-side { border-left: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-2); }
.g-side p { font-size: 13px; color: var(--muted); line-height: 1.55; }
.g-side .d4 { font-size: 17px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .nav { display: none; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(3) { border-left: 0; }
  .art { max-height: 300px; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pair-cards { grid-template-columns: 1fr 1fr; }
  .f-row, .f-axis { grid-template-columns: 110px minmax(0, 1fr) 180px; gap: 14px; }
}
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .proof .wrap { grid-template-columns: 1fr 1fr; }
  .proof .it:nth-child(3) { padding-left: 0; border-left: 0; }
  .proof .it:nth-child(n+3) { border-top: 1px solid var(--line); }
  .wk, .wk.feat, .wk.third { grid-column: span 12; flex-direction: column; }
  .wk.feat .media { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; aspect-ratio: 16 / 10; flex: none; }
  .wk.feat .body { padding: 22px 24px 24px; }
  .about { grid-template-columns: 1fr; }
  .portrait { position: relative; top: 0; max-width: 420px; }
  .case-body { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .meta { grid-template-columns: 1fr 1fr; }
  .meta > div { padding: 16px 16px 16px 0 !important; border-left: 0 !important; border-top: 1px solid var(--line); }
  .meta > div:nth-child(-n+2) { border-top: 0; }
  .meta > div:nth-child(even) { padding-left: 16px !important; border-left: 1px solid var(--line) !important; }
  .tree-grid { grid-template-columns: 1fr; }
  .tree-side { border-left: 0; border-top: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; }
  .tree-side .st { flex: 1 1 200px; border-bottom: 0; }
  .gestalt { grid-template-columns: 1fr; }
  .g-side { border-left: 0; border-top: 1px solid var(--line); }
  .crumb { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .search-btn .lbl, .search-btn .kbd { display: none; }
  .search-btn { width: 32px; padding: 0; justify-content: center; }
  .top .btn-pill { display: none; }
  .viz-tab .v { font-size: 12px; }
  .viz-tab { padding: 12px 10px 14px; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; border-left: 0 !important; }
  .step + .step { border-top: 1px solid var(--line); }
  .skills, .away-grid, .grid-2, .grid-3, .split-2, .learn, .cmp, .answers, .phones, .legend, .limits { grid-template-columns: 1fr; }
  .split-2.rev > :first-child { order: 0; }
  .metrics, .feat-cards, .phase { grid-template-columns: 1fr; }
  .sum { grid-template-columns: 1fr; }
  .sum > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .contact .links { grid-template-columns: 1fr 1fr; }
  .contact .links a:nth-child(3) { padding-left: 0; border-left: 0; }
  .f-row, .f-axis { grid-template-columns: 1fr; gap: 8px; }
  .f-axis > :first-child, .f-axis > :last-child { display: none; }
  .r-row, .lol-r, .db-r { grid-template-columns: 1fr; gap: 8px; }
  .lol-ax, .r-ax { grid-template-columns: 1fr; }
  .lol-ax > :first-child, .lol-ax > :last-child { display: none; }
  .r-row .stat, .db-r .res { text-align: left; }
  .mx { grid-template-columns: 70px 1fr 1fr; }
  .tl-l { grid-template-columns: 1fr 1fr; }
  .pair-cards { grid-template-columns: 1fr; }
  .chain-keys { grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 10px; }
  .ck { padding: 8px; height: 56px; }
  .ck .ds { display: none; }
  .reel .frame img { height: 340px; }
  .next { grid-template-columns: 1fr; }
  .next .circ { display: none; }
  .wk .body { padding: 18px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .split .w > span, .rv { transform: none; opacity: 1; }
  .marquee .track { animation: none; }
}

/* fixes */
.badge.nc { text-transform: none; letter-spacing: 0; }
.frame img, .portrait img, .marquee img, .wk .media img { color: transparent; }
.fig .frame.ld:not(.ok) { min-height: 220px; }
.reel .frame.ld:not(.ok) { min-width: 260px; }

/* ==========================================================================
   Hero: ink sculpture panel (adapted from 21st.dev ink-orbit-hero)
   ========================================================================== */
:root { --ih-paper: #0d0e0f; --ih-ink: #e9ebee; --ih-hatch: rgba(255, 255, 255, .045); --ih-band: #141517; }
[data-theme="light"] { --ih-paper: #ffffff; --ih-ink: #141518; --ih-hatch: rgba(0, 0, 0, .06); --ih-band: #f1f1ef; }
.hero { padding-top: calc(var(--top-h) + clamp(20px, 3.5vw, 44px)); }
.ih { --ih-pad: clamp(10px, 1.6vw, 18px); position: relative; padding: var(--ih-pad); border-radius: 16px; background-image: repeating-linear-gradient(135deg, var(--ih-hatch) 0 1px, transparent 1px 10px); box-shadow: inset 0 0 0 1px var(--line); }
.ih-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(640px, calc(100svh - var(--top-h) - 150px)); background: var(--ih-paper); box-shadow: 0 0 0 1px var(--line), 0 30px 80px -40px rgba(0, 0, 0, .5); transition: background-color var(--t-med) var(--ease); }
.ih-c { position: absolute; width: 12px; height: 12px; border: 0 solid var(--line-3); pointer-events: none; transition: border-color var(--t-med), transform 350ms var(--ease); z-index: 2; }
.ih-c.tl { top: -6px; left: -6px; border-top-width: 1.5px; border-left-width: 1.5px; }
.ih-c.tr { top: -6px; right: -6px; border-top-width: 1.5px; border-right-width: 1.5px; }
.ih-c.bl { bottom: -6px; left: -6px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.ih-c.br { bottom: -6px; right: -6px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.ih-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); min-width: 0; }
.ih-band { --ih-bx: clamp(18px, 3vw, 36px); padding: clamp(18px, 2.4vw, 28px) var(--ih-bx); background: linear-gradient(90deg, var(--ih-band) 0%, var(--ih-band) 55%, transparent 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ih-h1 { font: 500 clamp(28px, 3.5vw, 46px)/1.02 var(--display); letter-spacing: -.068em; word-spacing: -.26em; color: var(--fg); margin: 0; }
.ih-top, .ih-acc { display: block; }
.ih-h1 .rv { filter: blur(8px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0ms); }
.ih-h1 .rv.in { filter: none; }
.ih-acc { color: var(--faint); min-height: 1.1em; white-space: nowrap; }
.ih-word { display: inline-block; animation: ihIn .9s var(--ease) both; }
.ih-word.out { animation: ihOut .42s ease both; }
.ih-caret { display: inline-block; width: .5em; height: .82em; margin-left: .08em; vertical-align: -.06em; background: var(--accent); animation: ihBlink 1.1s steps(1) infinite; }
.ih-body { padding: 24px clamp(18px, 3vw, 36px) 0; }
.ih-lede { font-size: 16px; line-height: 1.6; letter-spacing: -.016em; color: var(--muted); max-width: 40ch; margin: 0; text-wrap: pretty; }
.ih-lede b { color: var(--fg); font-weight: 550; }
.ih-ctas { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 28px; }
.ih-ctas .btn-ghost svg { margin-right: 2px; }
.ih-brk { position: relative; display: inline-flex; }
.ih-brk .ih-c { width: 7px; height: 7px; }
.ih-brk .ih-c.tl { top: -4px; left: -4px; } .ih-brk .ih-c.tr { top: -4px; right: -4px; } .ih-brk .ih-c.bl { bottom: -4px; left: -4px; } .ih-brk .ih-c.br { bottom: -4px; right: -4px; }
.ih-brk:hover .ih-c { border-color: var(--accent); }
.ih-brk:hover .ih-c.tl { transform: translate(-3px, -3px); } .ih-brk:hover .ih-c.tr { transform: translate(3px, -3px); }
.ih-brk:hover .ih-c.bl { transform: translate(-3px, 3px); } .ih-brk:hover .ih-c.br { transform: translate(3px, 3px); }
.ih-proof { display: flex; align-items: center; gap: 12px; margin-top: 32px; font-size: 12.5px; letter-spacing: -.005em; color: var(--muted); text-wrap: pretty; }
.ih-art { position: relative; min-height: 360px; border-left: 1px solid var(--line); overflow: hidden; background: radial-gradient(60% 55% at 50% 50%, var(--surface-2), var(--ih-paper)); }
.ih-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; touch-action: pan-y; cursor: grab; outline: none; animation: ihFade 1.4s .2s ease both; }
.ih-art canvas:active { cursor: grabbing; }
.ih-art canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-line); }
.ih-hud { position: absolute; left: 14px; right: 14px; display: flex; justify-content: space-between; gap: 12px; font: 400 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--faint); pointer-events: none; font-variant-numeric: tabular-nums; }
.ih-hud.hud-t { top: 14px; } .ih-hud.hud-b { bottom: 14px; }
.ih-status { display: none; position: absolute; z-index: 2; left: 12px; top: 12px; max-width: calc(100% - 24px); align-items: center; gap: 9px; padding: 6px 11px 6px 9px; border-radius: 999px; font-size: 12px; line-height: 1.35; color: var(--fg-2); background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line-2); pointer-events: none; }
.ih-hd::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.hero .proof { margin-top: clamp(28px, 4vw, 48px); }
@keyframes ihIn { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes ihOut { from { opacity: 1; filter: none; } to { opacity: 0; filter: blur(8px); transform: translateY(-8px); } }
@keyframes ihBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes ihFade { from { opacity: 0; } to { opacity: 1; } }

/* process dialog */
.how { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; padding: 16px; visibility: hidden; pointer-events: none; transition: visibility 0s linear 260ms; }
.how.open { visibility: visible; pointer-events: auto; transition: none; }
.how-scrim { position: absolute; inset: 0; background: rgba(4, 5, 6, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 240ms var(--ease); }
.how.open .how-scrim { opacity: 1; }
.how-dlg { position: relative; width: min(580px, 100%); max-height: calc(100svh - 32px); overflow: auto; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--pop); opacity: 0; transform: translateY(14px) scale(.97); transition: opacity 260ms var(--ease), transform 400ms var(--ease); }
.how.open .how-dlg { opacity: 1; transform: none; }
.how-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.how-st { display: inline-flex; align-items: center; gap: 10px; font: 400 11.5px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.how-live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: howPing 2.2s ease-out infinite; }
.how.done .how-live { animation: none; background: #3fb950; }
.how-x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: var(--muted); transition: color var(--t-fast), background var(--t-fast); }
.how-x:hover { color: var(--fg); background: var(--tint-2); }
.how-steps { display: grid; gap: 4px; padding: 14px; margin: 0; list-style: none; }
.how-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 8px; opacity: .4; transition: opacity 300ms, background 300ms, box-shadow 300ms; }
.how-step[data-s="run"] { opacity: 1; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); }
.how-step[data-s="done"] { opacity: 1; }
.how-step b { display: block; font: 500 13.5px/1.3 var(--mono); letter-spacing: -.03em; color: var(--fg); }
.how-step small { display: block; font-size: 13px; line-height: 1.5; letter-spacing: -.008em; color: var(--muted); margin-top: 3px; }
.how-ix { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; font: 500 10.5px/1 var(--mono); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); transition: background 300ms, color 300ms, box-shadow 300ms; }
.how-step[data-s="run"] .how-ix { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.how-step[data-s="done"] .how-ix { background: var(--accent); color: #fff; box-shadow: none; }
.how-spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: howSpin .7s linear infinite; }
.how-tm { font: 400 11px/1 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.how-bar { height: 2px; margin: 0 14px; background: var(--line); border-radius: 2px; overflow: hidden; }
.how-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.how-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 18px; font-size: 12.5px; color: var(--muted); }
.how-acts { display: flex; gap: 8px; }
.how-acts .btn { height: 32px; font-size: 12.5px; }
.how-replay[disabled] { opacity: .45; pointer-events: none; }
@keyframes howSpin { to { transform: rotate(360deg); } }
@keyframes howPing { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); } }

/* Mobile and tablet portrait: visual on top, copy pinned to the bottom,
   the whole panel sized to the visible viewport so both CTAs stay above the fold. */
@media (max-width: 980px) {
  .hero { padding-top: calc(var(--top-h) + 12px); }
  .ih-panel { display: flex; flex-direction: column; min-height: calc(100vh - var(--top-h) - 24px - 2 * var(--ih-pad)); min-height: calc(100svh - var(--top-h) - 24px - 2 * var(--ih-pad)); }
  .ih-art { order: -1; flex: 1 1 auto; min-height: 190px; max-height: 64svh; border-left: 0; border-bottom: 1px solid var(--line); }
  .ih-copy { flex: 0 0 auto; margin-top: auto; justify-content: flex-end; padding: 0 0 24px; }
  .ih-band { border-top: 0; }
  .ih-h1 { font-size: clamp(18px, calc((100vw - 2 * var(--gutter) - 2 * var(--ih-pad) - 2 * var(--ih-bx)) / 10.6), 44px); }
  .hero .ih-h1 { margin: 0; }
  .ih-top, .ih-acc { white-space: nowrap; }
  .ih-body { padding-top: 18px; }
  .ih-ctas { margin-top: 20px; }
  .ih-proof { display: none; }
  .ih-status { display: inline-flex; }
  .ih-hud.hud-t { display: none; }
}
@media (max-width: 720px) {
  .ih { --ih-pad: 8px; border-radius: 12px; }
  .ih-band { padding-top: 16px; padding-bottom: 16px; }
  .ih-lede { font-size: 15px; line-height: 1.55; }
  .ih-ctas { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .ih-ctas .btn-primary { width: 100%; }
  .ih-long { display: none; }
}
@media (max-width: 400px) {
  .seg button { padding: 0 10px; gap: 6px; }
  .ih-ctas .btn { padding: 0 13px; }
  .ih-hud.hud-b { white-space: nowrap; }
  .ih-seed { display: none; }
  .proof b { white-space: normal; }
}
@media (max-width: 339px) {
  .proof .wrap { grid-template-columns: 1fr; }
  .proof .it, .proof .it + .it { padding-left: 0; border-left: 0; }
  .proof .it + .it { border-top: 1px solid var(--line); }
  .away-grid .card { flex-direction: column; align-items: flex-start; }
  .contact .links { grid-template-columns: 1fr; }
  .contact .links a + a { padding-left: 0; border-left: 0; }
  .ih-ctas { grid-template-columns: 1fr; }
  .ih-brk, .ih-brk .btn { width: 100%; }
  .ih-status { font-size: 11px; }
}
/* Short portrait screens (SE, mini, small Android): drop the second sentence, keep the CTAs visible */
@media (max-width: 980px) and (max-height: 760px) and (orientation: portrait) {
  .ih-more { display: none; }
  .ih-art { min-height: 170px; }
  .ih-copy { padding: 0 0 20px; }
  .ih-band { padding-top: 14px; padding-bottom: 14px; }
  .ih-body { padding-top: 14px; }
  .ih-ctas { margin-top: 16px; }
}
/* Phones in landscape: side by side again, compact */
@media (max-width: 980px) and (max-height: 540px) and (orientation: landscape) {
  .ih-panel { flex-direction: row; }
  .ih-art { flex: 0 0 42%; min-height: 0; max-height: none; border-bottom: 0; border-right: 1px solid var(--line); }
  .ih-copy { flex: 1 1 auto; justify-content: center; padding: 14px 0; min-width: 0; }
  .ih-h1 { font-size: clamp(18px, 2.9vw, 28px); }
  .ih-band { padding: 12px 18px; }
  .ih-body { padding: 12px 18px 0; }
  .ih-lede { font-size: 14px; }
  .ih-more, .ih-hud.hud-b { display: none; }
  .ih-ctas { margin-top: 14px; display: flex; }
  .ih-ctas .btn-primary { width: auto; }
  .ih-long { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ih-word, .ih-word.out, .ih-caret, .ih-art canvas, .how-live { animation: none; }
  .ih-h1 .rv { filter: none; }
}

.grid-3.ar-916-45 { grid-template-columns: .5625fr .8fr .8fr; align-items: start; }

/* numbered hotspots */
.hot { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.hot-fig .frame { overflow: visible; }
.hot-fig .frame img { border-radius: inherit; }
.hot-pt { position: absolute; z-index: 2; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 600 11px/1 var(--mono); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25), 0 4px 12px rgba(0, 0, 0, .35); transition: transform 320ms var(--spring), opacity 220ms var(--ease), box-shadow 220ms; }
.hot-pt::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; animation: pulse 2.6s var(--ease) infinite; animation-delay: calc(var(--i) * 260ms); pointer-events: none; }
.hot-pt:focus-visible { outline-offset: 4px; }
.hot.has-hl .hot-pt:not(.hl) { opacity: .35; transform: scale(.86); }
.hot.has-hl .hot-pt::before { animation: none; }
.hot-pt.hl { transform: scale(1.28); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .3), 0 6px 18px rgba(0, 0, 0, .4); }
.hot-tip { position: absolute; z-index: 3; padding: 7px 10px; border-radius: 6px; background: var(--surface-3); color: var(--fg); font: 500 12.5px/1 var(--font); white-space: nowrap; box-shadow: var(--pop); pointer-events: none; opacity: 0; transform: translate(22px, -50%); transition: opacity 160ms var(--ease); }
.hot-tip.lft { transform: translate(calc(-100% - 22px), -50%); }
.hot-tip.show { opacity: 1; }
.hot-legend li { cursor: pointer; transition: opacity 220ms var(--ease), color var(--t-fast); }
.hot.has-hl .hot-legend li:not(.hl) { opacity: .45; }
.hot-legend li.hl { color: var(--fg-2); }
.hot-legend li.hl .no { background: var(--accent); color: #fff; box-shadow: none; }
.hot-legend li.hl b { color: var(--accent-ink); }

/* decision pipeline (trading assistant app) */
.pl-auto i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); }
.pl-col { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 0 22px; }
.pl-col:first-child { padding-left: 0; }
.pl-col:last-child { padding-right: 0; }
.pl-col + .pl-col { border-left: 1px solid var(--line); }
.pl-col + .pl-col::before { content: ""; position: absolute; left: -5px; top: 132px; width: 9px; height: 9px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); background: var(--surface); transform: rotate(45deg); }
.pl-k { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pl-k b { color: var(--accent); font-weight: 500; margin-right: 6px; }
.pl-col > p { margin-top: auto; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pl-feed { position: relative; height: 232px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.pl-row { display: grid; grid-template-columns: 40px 44px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font: 400 11.5px/1.4 var(--mono); color: var(--muted); white-space: nowrap; animation: plIn 420ms var(--ease) both; }
.pl-row .ty { color: var(--faint); }
.pl-row .tk { color: var(--fg-2); }
.pl-row .ev { overflow: hidden; text-overflow: ellipsis; }
.pl-row.hit .tk, .pl-row.hit .ty { color: var(--accent-ink); }
@keyframes plIn { from { opacity: 0; transform: translateY(-8px); background: var(--accent-soft); } to { opacity: 1; transform: none; background: transparent; } }
.pl-rank { position: relative; height: 228px; }
.pl-r { position: absolute; left: 0; right: 0; top: 0; height: 32px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 26px; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); color: var(--muted); transition: top 650ms var(--ease); }
.pl-r .bar { position: relative; height: 6px; background: var(--tint-2); }
.pl-r .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--line-3); transition: width 650ms var(--ease), background-color 300ms; }
.pl-r .sc { text-align: right; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.pl-r.top .tk { color: var(--fg); }
.pl-r.top .bar i { background: var(--accent); }
.pl-r.top .sc { color: var(--accent-ink); }
.pl-card { padding: 14px 16px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.pl-hd { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font: 500 13px/1 var(--mono); color: var(--fg); }
.pl-sc { font-size: 11.5px; color: var(--accent-ink); }
.pl-card dl { margin: 0; }
.pl-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 12.5px; opacity: 0; transform: translateX(-6px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.pl-card dl > div.on { opacity: 1; transform: none; }
.pl-card dt { color: var(--muted); }
.pl-card dd { margin: 0; font: 500 12px/1.3 var(--mono); color: var(--fg); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-card dd.t { color: #3fb96a; }
.pl-card dd.s { color: var(--accent-ink); }
.pl-go { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.pl-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-3); transition: color 300ms, box-shadow 300ms; }
.pl-card.ready .pl-btn { color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent); animation: plPing 1.8s var(--ease) infinite; }
@keyframes plPing { 0% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 0 rgba(var(--accent-rgb), .45); } 80%, 100% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 8px rgba(var(--accent-rgb), 0); } }
.pl-wait { display: inline-flex; align-items: center; gap: 6px; font: 400 11px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.pl-wait i { width: 6px; height: 11px; background: var(--accent); opacity: 0; }
.pl-card.ready .pl-wait { color: var(--fg-2); }
.pl-card.ready .pl-wait i { opacity: 1; animation: ihBlink 1.1s steps(1) infinite; }

@media (max-width: 920px) {
  .pl-grid { grid-template-columns: 1fr; }
  .pl-col { padding: 0; }
  .pl-col + .pl-col { border-left: 0; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
  .pl-col + .pl-col::before { left: 50%; top: -5px; margin-left: -4.5px; transform: rotate(135deg); }
  .pl-feed { height: 170px; }
  .pl-col > p { margin-top: 0; }
}
@media (max-width: 720px) {
  .hot { grid-template-columns: 1fr; }
  .hot-fig { max-width: 420px; justify-self: center; width: 100%; }
  .grid-3.ar-916-45 { grid-template-columns: 1fr 1fr; }
  .grid-3.ar-916-45 > :first-child { grid-column: 1 / -1; width: min(100%, 320px); justify-self: center; }
}

/* sticky project filter on small screens: full-width, thumb-sized, status label drops away */
@media (max-width: 720px) {
  .work-bar { margin: -16px 0 24px; padding: 8px 0; }
  #work-seg { flex: 1; }
  #work-seg button { flex: 1; justify-content: center; padding: 0 8px; height: 38px; }
  #work-seg .ind { height: 38px; }
  .wb-now { display: none; }
}
@media (max-width: 360px) { #work-seg button .c { display: none; } }

/* forest plot and other row charts on phones: label, then a full-width plot, then the numbers */
@media (max-width: 720px) {
  .viz { padding: 18px 16px 20px; }
  .ftabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .ftabs button { height: 44px; flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px; font-size: 12px; line-height: 1.1; text-align: center; }
  .ftabs button b { font: 500 11px/1 var(--mono); letter-spacing: .04em; }
  .ftabs .rq-t { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .ftabs .rq-t::before { content: none; }
  .ftabs .ind { height: 44px; }
  .viz-h .lg { width: 100%; }
  .f-row { gap: 10px; padding: 14px 0 16px; }
  .f-label { display: flex; align-items: baseline; gap: 8px; }
  .forest > .f-row:first-child .f-plot { margin-top: 18px; }
  .f-plot { height: 28px; }
  .f-stat { grid-template-columns: .8fr 1.5fr 1fr; gap: 8px; padding: 9px 10px; border-radius: 6px; background: var(--tint); white-space: normal; }
  .f-stat b { font-size: 12px; }
  .f-axis { gap: 0; }
  .f-msg p { font-size: 14.5px; }
  .f-axis.r-ax, .lol-ax.db-ax { grid-template-columns: 1fr; gap: 0; }
  .f-axis.r-ax > :first-child, .f-axis.r-ax > :last-child, .lol-ax.db-ax > :first-child, .lol-ax.db-ax > :last-child { display: none; }
  .r-row .stat { font-size: 11.5px; }
}


/* ==========================================================================
   Sound: four beats, one pixel system
   ========================================================================== */
#music .sec-head { margin-bottom: 26px; }
.bt-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 26px; font-size: 13px; color: var(--muted); }
.bt-legend li { display: inline-flex; align-items: center; gap: 9px; }
.bt-legend b { color: var(--fg); font-weight: 500; margin-right: 2px; }
.bt-key { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; }
.bt-key.ink { background: var(--fg-2); }
.bt-key.acc { background: var(--accent); }
.bt-key.tear { width: 15px; background: linear-gradient(var(--fg-2), var(--fg-2)) 0 0 / 10px 3px no-repeat, linear-gradient(var(--accent), var(--accent)) 5px 4px / 10px 2px no-repeat, linear-gradient(var(--fg-2), var(--fg-2)) 2px 7px / 10px 3px no-repeat; }

.bt { position: relative; }
.bt-track { --bt-w: min(820px, 74vw); position: relative; display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 10px calc(50% - var(--bt-w) / 2) 6px; scrollbar-width: none; cursor: grab; outline: none; overscroll-behavior-x: contain; }
.bt-track::-webkit-scrollbar { display: none; }
.bt-track.drag { cursor: grabbing; scroll-snap-type: none; }
.bt-track.drag .bt-card { transition: none; }
.bt-card { flex: 0 0 var(--bt-w); min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; opacity: .36; transform: scale(.955); transform-origin: 50% 40%; transition: opacity 500ms var(--ease), transform 650ms var(--ease); }
.bt-card.on { opacity: 1; transform: none; }
.bt-card:not(.on) .bt-screen { cursor: pointer; }
.bt-track:focus-visible .bt-card.on .bt-frame { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px var(--accent); }
.bt-frame { position: relative; padding: clamp(8px, 1.2vw, 14px); border-radius: 14px; background-image: repeating-linear-gradient(135deg, var(--ih-hatch) 0 1px, transparent 1px 10px); box-shadow: inset 0 0 0 1px var(--line); }
.bt-sw { position: relative; }
.bt-screen { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: var(--ih-paper); box-shadow: 0 0 0 1px var(--line), 0 30px 80px -40px rgba(0, 0, 0, .5); isolation: isolate; user-select: none; -webkit-user-select: none; transition: background-color var(--t-med); }
.bt-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; image-rendering: crisp-edges; image-rendering: pixelated; }
.bt-screen::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, .38)); }
.bt-screen::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .6; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .24) 0 1px, transparent 1px 3px); }
[data-theme="light"] .bt-screen::before { background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 60%, rgba(0, 0, 0, .07)); }
[data-theme="light"] .bt-screen::after { opacity: .45; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px); }

.bt-hud { position: absolute; left: 12px; right: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); pointer-events: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt-hud.t { top: 12px; }
.bt-hud.b { bottom: 12px; }
.bt-hud b { color: var(--fg-2); font-weight: 500; }
.bt-hud > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 5px; margin: -3px -5px; background: color-mix(in srgb, var(--ih-paper) 78%, transparent); }
.bt-card.gl .bt-hud.t { transform: translateX(3px); }
.bt-card.gl .bt-hud.b { transform: translateX(-4px); color: var(--accent-ink); }
.bt-st i { width: 6px; height: 6px; background: var(--line-3); }
.bt-card.live .bt-st i { background: var(--accent); animation: btBlink 1.1s steps(1) infinite; }
.bt-card.live .bt-st b { color: var(--accent-ink); }
@keyframes btBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.bt-meter { display: inline-flex; gap: 2px; }
.bt-meter i { width: 4px; height: 8px; background: var(--line-2); }
.bt-meter i.on { background: var(--fg-2); }
.bt-meter i.pk { background: var(--accent); }

.notch { clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px)); }
.px-ic { display: grid; place-items: center; }
.px-ic svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.px-ic .pause, .is-playing > .px-ic .play, .is-playing .px-ic .play { display: none; }
.is-playing > .px-ic .pause, .is-playing .px-ic .pause { display: block; }
.bt-big { position: absolute; left: 50%; top: 50%; z-index: 3; width: 64px; height: 64px; display: grid; place-items: center; background: var(--accent); color: #fff; transform: translate(-50%, -50%); transition: opacity 260ms var(--ease), transform 360ms var(--spring), background-color var(--t-fast); }
.bt-big .px-ic { width: 20px; height: 20px; }
.bt-big:hover { background: #f05a27; }
.bt-big:active { transform: translate(-50%, -50%) scale(.92); }
.bt-card.live .bt-big { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
.bt-card.live .bt-screen:hover .bt-big, .bt-card.live .bt-big:focus-visible { opacity: 1; transform: translate(-50%, -50%); }
.bt-card:not(.on) .bt-big { opacity: 0; pointer-events: none; }
.bt-flag { position: absolute; left: 12px; bottom: 34px; z-index: 2; display: none; padding: 5px 7px; font: 500 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.bt-card.missing .bt-flag { display: inline-block; }

.bt-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 28px; align-items: end; padding: 20px 4px 0; }
.bt-meta .k { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bt-meta .k .m { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.bt-meta h3 { font: 500 clamp(20px, 2.2vw, 26px)/1.1 var(--display); letter-spacing: -.055em; word-spacing: -.2em; color: var(--fg); }
.bt-meta p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.bt-specs { display: flex; padding-top: 4px; }
.bt-specs div { padding: 0 16px; border-left: 1px solid var(--line); }
.bt-specs div:first-child { padding-left: 0; border-left: 0; }
.bt-specs .micro { display: block; margin-bottom: 7px; }
.bt-specs b { font: 500 13px/1 var(--mono); letter-spacing: -.02em; color: var(--fg-2); white-space: nowrap; }

.bt-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.bt-arrows { display: flex; align-items: center; gap: 10px; }
.bt-idx { min-width: 58px; text-align: center; font: 500 12px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.bt-idx b { color: var(--fg); font-weight: 500; }
.bt-pips { display: flex; gap: 2px; margin-left: 6px; }
.bt-pips button { width: 26px; height: 24px; display: grid; place-items: center; }
.bt-pips button i { display: block; width: 20px; height: 3px; background: var(--line-3); transition: background-color 300ms; }
.bt-pips button:hover i { background: var(--muted); }
.bt-pips button.on i { background: var(--accent); }
.bt-hint { font-size: 12.5px; color: var(--faint); text-align: right; text-wrap: pretty; }
.bt-ib { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; color: var(--fg-2); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); transition: color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast), transform var(--t-fast); }
.bt-ib:hover:not(:disabled) { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-3); background: var(--tint-2); }
.bt-ib:active:not(:disabled) { transform: scale(.92); }
.bt-ib:disabled { opacity: .35; cursor: default; }
.bt-ib svg, .bt-ib .px-ic { width: 14px; height: 14px; }

.bt-deck { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 250px) auto minmax(0, 1fr) auto; grid-template-areas: "now ctl scrub vol"; align-items: center; gap: 18px 28px; padding: 16px 20px; }
.bt-now { grid-area: now; display: flex; align-items: center; gap: 14px; min-width: 0; }
.bt-no { font: 400 30px/1 var(--display); letter-spacing: -.07em; color: var(--accent); font-variant-numeric: tabular-nums; }
.bt-nt { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bt-nt b { font-size: 15px; font-weight: 500; letter-spacing: -.015em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-nt span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-left: auto; flex-shrink: 0; }
.bt-eq i { width: 3px; height: 3px; background: var(--line-3); }
.is-playing .bt-eq i { background: var(--accent); animation: btEq .9s steps(1) infinite; }
.is-playing .bt-eq i:nth-child(2) { animation-delay: -.3s; }
.is-playing .bt-eq i:nth-child(3) { animation-delay: -.55s; }
.is-playing .bt-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes btEq { 0% { height: 3px; } 20% { height: 12px; } 40% { height: 6px; } 60% { height: 14px; } 80% { height: 9px; } }
.bt-ctl { grid-area: ctl; display: flex; align-items: center; gap: 8px; }
.bt-pp { width: 48px; height: 48px; display: grid; place-items: center; background: var(--accent); color: #fff; transition: transform var(--t-fast), background-color var(--t-fast); }
.bt-pp:hover { background: #f05a27; }
.bt-pp:active { transform: scale(.93); }
.bt-pp .px-ic { width: 16px; height: 16px; }
.bt-scrub { grid-area: scrub; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; font: 400 12px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.bt-wf { position: relative; height: 40px; cursor: pointer; touch-action: none; outline: none; border-radius: 4px; }
.bt-wf canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.bt-wf:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.bt-tip { position: absolute; top: -28px; transform: translateX(-50%); padding: 5px 7px; border-radius: 4px; background: var(--surface-3); color: var(--fg); font: 500 11px/1 var(--mono); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 150ms; box-shadow: var(--pop); }
.bt-wf.hov .bt-tip { opacity: 1; }
.bt-vol { grid-area: vol; display: flex; align-items: center; gap: 10px; cursor: pointer; touch-action: none; outline: none; padding: 6px 0; border-radius: 4px; }
.bt-vol:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.bt-vb { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.bt-vb i { width: 4px; background: var(--line-3); transition: background-color 120ms; }
.bt-vb i.on { background: var(--fg-2); }
.bt-vol:hover .bt-vb i.on { background: var(--fg); }

.bt-list { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.bt-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; text-align: left; background: var(--surface); box-shadow: var(--inset); transition: box-shadow var(--t-fast), background-color var(--t-fast); }
.bt-row:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.bt-row.is-cur { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.bt-row .n { font: 500 11px/1 var(--mono); color: var(--faint); }
.bt-row.is-cur .n { color: var(--accent); }
.bt-row b { display: block; font-size: 14px; font-weight: 500; letter-spacing: -.015em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-row small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-row .d { font: 400 12px/1 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.bt-row.missing { opacity: .5; }

/* mini player: follows you around the site while a beat plays */
.bt-dock { position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100% - 24px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); box-shadow: var(--pop); opacity: 0; transform: translate(-50%, calc(100% + 40px)); transition: transform 520ms var(--spring), opacity 260ms var(--ease); }
.bt-dock.show { opacity: 1; transform: translate(-50%, 0); }
.bt-dock-vis { position: relative; width: 64px; height: 40px; background: var(--ih-paper); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.bt-dock-vis canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; image-rendering: crisp-edges; image-rendering: pixelated; }
.bt-dock-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 0 4px; text-align: left; }
.bt-dock-info b { font-size: 13.5px; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-dock-info span { font: 400 11px/1 var(--mono); letter-spacing: .02em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bt-dock-info:hover b { color: var(--accent-ink); }
.bt-dock .bt-ib { width: 34px; height: 34px; }
.bt-dock .bt-ib.pp { color: #fff; background: var(--accent); box-shadow: none; }
.bt-dock-bar { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
body.has-dock .toast { bottom: 96px; }
body.has-dock footer { padding-bottom: 110px; }

@media (pointer: coarse) {
  .bt-vol { display: none; }
  .bt-deck { grid-template-columns: minmax(0, 250px) auto minmax(0, 1fr); grid-template-areas: "now ctl scrub"; }
}
@media (max-width: 720px) {
  .bt-legend { gap: 8px 18px; font-size: 12.5px; }
  .bt-track { --bt-w: 86vw; gap: 10px; }
  .bt-screen { aspect-ratio: 4 / 3.4; }
  .bt-hud { left: 10px; right: 10px; font-size: 9.5px; }
  .bt-hud.t { top: 10px; }
  .bt-hud.b { bottom: 10px; }
  .bt-meter i { width: 3px; height: 7px; }
  .bt-big { width: 56px; height: 56px; }
  .bt-meta { grid-template-columns: 1fr; padding-top: 16px; }
  .bt-nav { margin-top: 18px; }
  .bt-hint { display: none; }
  .bt-arrows { width: 100%; justify-content: space-between; }
  .bt-deck { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "now ctl" "scrub scrub"; gap: 14px 12px; padding: 14px; }
  .bt-no { font-size: 24px; }
  .bt-ctl .bt-ib { width: 40px; height: 40px; }
  .bt-list { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .bt-meter { display: none; }
  .bt-list { grid-template-columns: 1fr; }
  .bt-specs div { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-card, .bt-card.on { transform: none; }
}

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.vt * { transition: none !important; }
body:not(.ready) .split .w > span { transform: translateY(105%) !important; }
body:not(.ready) .rv { opacity: 0 !important; transform: translateY(14px) !important; }