/* EvoTrias — project page. Palette and type follow the promo film: deep blue-black space, teal/cyan light, amber accents. */
:root {
  --bg: #03060a;
  --bg2: #070d13;
  --panel: rgba(8, 15, 22, 0.72);
  --panel-2: rgba(12, 22, 31, 0.8);
  --line: rgba(120, 220, 235, 0.13);
  --line-2: rgba(120, 220, 235, 0.28);
  --ink: #e8f1ef;
  --dim: #8ea3a0;
  --faint: #6a7c7e;
  --teal: #22a889;
  --cyan: #4fd1e8;
  --ice: #bff4ff;
  --amber: #e0a24a;
  --clay: #d0552b;
  --violet: #9b8ad0;
  --gov: #2ed3a0;
  --prop: #ff8a4c;
  --judge: #6f8cff;
  --grad: linear-gradient(90deg, #4fd1e8, #22a889 55%, #e0a24a);
  /* hairline border that catches light at the top edge, used by the panels */
  --edge: linear-gradient(180deg, rgba(170, 235, 245, 0.24), rgba(170, 235, 245, 0.06) 38%, rgba(170, 235, 245, 0.1));
  --surface: linear-gradient(180deg, rgba(13, 23, 31, 0.8), rgba(6, 12, 18, 0.8));
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --disp: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", Consolas, "Cascadia Mono", monospace;
  --r: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* content grid: nav, hero and sections share one left edge */
  --gutter: clamp(20px, 5vw, 80px);
  --wrap: 1360px;
  --edge-x: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
* { box-sizing: border-box; }
html { scroll-padding-top: 80px; overflow-x: clip; }
/* smooth anchor scrolling only once the page has loaded: a reload then restores its scroll position in one jump
   instead of animating there while content is still settling (UI.loader adds .ready) */
html.ready { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
::selection { background: rgba(79, 209, 232, 0.35); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code { font-family: var(--mono); font-size: 0.9em; color: var(--ice); background: rgba(79, 209, 232, 0.1); padding: 1px 7px; border-radius: 6px; }
.mono { font-family: var(--mono); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-gov { color: var(--gov); } .c-prop { color: var(--prop); } .c-judge { color: var(--judge); } .c-cyan { color: var(--cyan); }
.dim { color: var(--faint); }

/* ---------------------------------------------------------------- background layers */
#galaxy, #triad { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
#galaxy { z-index: 0; }
#triad { z-index: 1; }
#grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main { position: relative; z-index: 2; overflow-x: clip; }

/* ---------------------------------------------------------------- loader */
#loader {
  position: fixed; inset: 0; z-index: 100; background: radial-gradient(circle at 50% 45%, #0b2126, #03060a 65%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: clip-path 1.1s var(--ease), opacity 0.6s 0.6s; clip-path: circle(150% at 50% 45%);
}
#loader.out { clip-path: circle(0% at 50% 45%); opacity: 0; pointer-events: none; }
.ld-core { position: relative; width: 170px; height: 170px; display: grid; place-items: center; }
.ld-dino { width: 130px; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 0 24px rgba(79, 209, 232, 0.45)); }
.ld-ring { position: absolute; inset: -18px; }
.ld-ring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--gov); animation: spin 1.4s linear infinite; }
.ld-ring i:nth-child(2) { inset: 12px; border-top-color: var(--prop); animation-duration: 1.9s; animation-direction: reverse; }
.ld-ring i:nth-child(3) { inset: 24px; border-top-color: var(--judge); animation-duration: 2.6s; }
.ld-word { font-family: var(--disp); font-size: 44px; font-weight: 700; letter-spacing: 0.02em; }
.ld-bar { width: 220px; height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: var(--grad); box-shadow: 0 0 12px var(--cyan); }
.ld-pct { font-size: 12px; color: var(--dim); letter-spacing: 0.3em; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }

/* ---------------------------------------------------------------- nav */
#nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(calc(var(--wrap) + 32px), calc(100% - 2 * var(--gutter) + 32px));
  display: flex; align-items: center; gap: 22px; padding: 9px 10px 9px 16px; border-radius: 16px;
  background: rgba(6, 12, 18, 0.68); border: 1px solid var(--line); backdrop-filter: blur(10px);
  transition: background 0.4s, box-shadow 0.4s, top 0.4s;
}
#nav.scrolled { background: rgba(6, 12, 18, 0.82); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); top: 10px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand b { font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { position: relative; display: flex; gap: 4px; margin-left: auto; }
.nav-links a { position: relative; z-index: 1; padding: 7px 12px; font-size: 14px; color: var(--dim); border-radius: 10px; transition: color 0.25s, background 0.25s; }
.nav-links a:hover { color: #fff; }
/* hover ink: one pill that glides between links (UI.navInk) */
.nav-ink { position: absolute; z-index: 0; left: 0; top: 0; height: 100%; width: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.06); opacity: 0; pointer-events: none; transition: transform 0.5s var(--ease), width 0.5s var(--ease), opacity 0.3s; }
.nav-links:hover .nav-ink { opacity: 1; }
.nav-links a.on { color: #fff; }
.nav-links a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 10px var(--cyan); }
.nav-progress { position: absolute; left: 14px; right: 14px; bottom: -1px; height: 1px; overflow: hidden; }
.nav-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad); box-shadow: 0 0 10px var(--cyan); }
.nav-burger { display: none; width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); position: relative; margin-left: auto; }
.nav-burger i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ice); border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.25s; }
.nav-burger i:nth-child(1) { top: 12px; } .nav-burger i:nth-child(2) { top: 17px; } .nav-burger i:nth-child(3) { top: 22px; }
#nav.open .nav-burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
#nav.open .nav-burger i:nth-child(2) { opacity: 0; }
#nav.open .nav-burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 900px) {
  .nav-burger { display: block; }
  .nav-links { position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; flex-direction: column; gap: 2px; padding: 8px; border-radius: 16px;
    background: rgba(6, 12, 18, 0.96); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: 50% 0; pointer-events: none; transition: opacity 0.3s, transform 0.35s var(--ease); }
  #nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav-ink { display: none; }
  .nav-links a { padding: 13px 14px; font-size: 16px; }
  .nav-links a:hover { background: rgba(255, 255, 255, 0.05); }
  .nav-links a.on::after { left: 14px; right: auto; width: 26px; bottom: 6px; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 14px;
  font-weight: 600; font-size: 15.5px; letter-spacing: 0.005em; transition: transform 0.3s var(--ease), box-shadow 0.3s, background 0.3s, border-color 0.3s;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { color: #041014; background: linear-gradient(120deg, #bff4ff, #4fd1e8 40%, #22a889); box-shadow: 0 10px 30px rgba(79, 209, 232, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); overflow: hidden; }
.btn-primary svg { stroke: #041014; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.8s var(--ease); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:hover { box-shadow: 0 14px 44px rgba(79, 209, 232, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.btn-ghost { background: rgba(8, 15, 22, 0.6); border: 1px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: rgba(191, 244, 255, 0.6); background: rgba(79, 209, 232, 0.08); box-shadow: 0 0 28px rgba(79, 209, 232, 0.2); }
.btn-sm { padding: 8px 14px; font-size: 14px; border-radius: 11px; }
.btn-glow { background: rgba(79, 209, 232, 0.12); border: 1px solid rgba(79, 209, 232, 0.45); color: var(--ice); }
.btn-glow:hover { background: rgba(79, 209, 232, 0.2); box-shadow: 0 0 24px rgba(79, 209, 232, 0.35); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 120px var(--edge-x) 110px; overflow: hidden; }
.hero-copy { position: relative; z-index: 3; max-width: 720px; }
.hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -12% -14% -12% -40%; background: radial-gradient(closest-side, rgba(3, 6, 10, 0.6), transparent); pointer-events: none; } /* keeps the copy legible where the galaxy passes behind it */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(6, 14, 20, 0.55); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; color: var(--ice); text-transform: uppercase; backdrop-filter: blur(8px); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gov); box-shadow: 0 0 0 0 rgba(46, 211, 160, 0.6); animation: live 1.8s infinite; flex: none; }
@keyframes live { 70% { box-shadow: 0 0 0 10px rgba(46, 211, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 211, 160, 0); } }
.wordmark { margin: 22px 0 6px; font-family: var(--disp); font-size: clamp(76px, 12vw, 188px); line-height: 0.9; letter-spacing: -0.045em; font-weight: 700; white-space: nowrap; }
.wordmark span { display: inline-block; }
.wm-evo { color: #fff; font-weight: 300; }
/* "Trias" carries ONE gradient across the word: every letter paints the same word-wide gradient, shifted by its own
   offset (--ox), and the sheen moves a shared phase (--u) — so the colours flow through the word as a whole. */
@property --u { syntax: "<number>"; inherits: true; initial-value: 0; }
.wm-trias { --tw: 3.2em; color: transparent; animation: sheen 4.2s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { --u: 0; } 50% { --u: 1; } }
.wordmark .ch { display: inline-block; opacity: 0; transform: translateY(0.4em) rotateX(-70deg); filter: blur(12px); transform-origin: 50% 100%; }
.wordmark.in .ch { animation: chIn 1s var(--ease) forwards; animation-delay: calc(var(--i) * 55ms + 120ms); }
.wm-trias .ch { --ox: 0px; background: linear-gradient(100deg, #bff4ff 0%, #4fd1e8 25%, #22a889 55%, #e0a24a 85%, #ff8a4c); background-size: calc(var(--tw) * 2) 100%; background-position: calc(var(--u) * var(--tw) * -1 - var(--ox)) 50%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes chIn { to { opacity: 1; transform: none; filter: blur(0); } }
.hero-claim { margin: 10px 0 4px; font-family: var(--disp); font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.hero-title { margin: 0 0 18px; font-size: 17px; color: var(--dim); font-family: var(--mono); letter-spacing: 0.01em; }
.hero-lede { margin: 0 0 32px; font-size: 19px; color: #c6d6d3; max-width: 600px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-dino { position: absolute; z-index: 2; right: calc(var(--edge-x) + 2vw); top: 50%; width: min(28vw, 400px); aspect-ratio: 1; transform: translateY(-50%); }
.dino-float { position: absolute; inset: 8%; width: 84%; animation: float 6s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 40px rgba(79, 209, 232, 0.25)); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-22px) rotate(2deg); } }
.dino-shadow { position: absolute; left: 25%; right: 25%; bottom: -4%; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(79, 209, 232, 0.35), transparent); filter: blur(6px); animation: shadow 6s ease-in-out infinite; }
@keyframes shadow { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(0.75); opacity: 0.45; } }
.orbit { position: absolute; inset: -6%; border-radius: 50%; border: 1px dashed rgba(79, 209, 232, 0.22); transform: rotateX(72deg) rotateZ(0); animation: orb 26s linear infinite; }
.orbit.o2 { inset: -16%; border-style: solid; border-color: rgba(224, 162, 74, 0.14); animation-duration: 40s; animation-direction: reverse; }
.orbit i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 16px var(--cyan), 0 0 40px var(--cyan); }
.orbit.o2 i { background: #ffe2a8; box-shadow: 0 0 16px var(--amber); }
@keyframes orb { to { transform: rotateX(72deg) rotateZ(360deg); } }
.triad-labels .tl { position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; transition: opacity 0.5s; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; opacity: 0; white-space: nowrap; transform: translate(-50%, -150%); text-shadow: 0 0 12px currentColor; }
.tl small { display: block; font-size: 10.5px; font-weight: 400; letter-spacing: 0.08em; color: var(--dim); text-shadow: none; text-align: center; }
.tl-gov { color: var(--gov); } .tl-prop { color: var(--prop); } .tl-judge { color: var(--judge); }
.scroll-cue { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; color: var(--dim); text-transform: uppercase; }
.scroll-cue i { width: 22px; height: 36px; border-radius: 12px; border: 1.5px solid var(--line-2); position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px; background: var(--cyan); transform: translateX(-50%); animation: wheel 1.8s infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%, 12px); } 100% { opacity: 0; } }
@media (max-width: 1000px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .hero-dino { position: relative; right: auto; top: auto; transform: none; width: min(70vw, 360px); margin: 30px auto 0; }
}

/* ---------------------------------------------------------------- sections */
.section { position: relative; padding: 140px var(--gutter) 40px; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; }
.section::before { content: ""; position: absolute; inset: 0 -50vw; z-index: -1; background: linear-gradient(180deg, transparent, rgba(3, 6, 10, 0.72) 180px, rgba(3, 6, 10, 0.72) calc(100% - 180px), transparent); pointer-events: none; }
.sec-head { max-width: 860px; margin-bottom: 56px; }
.sec-idx { font-size: 12px; letter-spacing: 0.24em; color: var(--cyan); text-transform: uppercase; margin-bottom: 14px; }
.sec-idx::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--cyan); vertical-align: middle; margin-right: 12px; box-shadow: 0 0 8px var(--cyan); }
h2 { margin: 0 0 16px; font-family: var(--disp); font-size: clamp(38px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; }
h3 { font-family: var(--disp); letter-spacing: -0.02em; font-weight: 600; }
.sec-sub { margin: 0; font-size: 19px; color: #b7c8c5; max-width: 760px; }
.sec-sub em { color: #fff; font-style: normal; font-weight: 600; }

/* reveal */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
.reveal[data-d="1"] { --d: 1; } .reveal[data-d="2"] { --d: 2; } .reveal[data-d="3"] { --d: 3; } .reveal[data-d="4"] { --d: 4; }
.reveal.in { opacity: 1; transform: none; }
/* scramble glyphs paint over a transparent copy of the real character, so the layout never changes (see scramble()) */
.scr-g { position: relative; color: transparent; }
.scr-g::after { content: attr(data-g); position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: var(--cyan); opacity: 0.8; }

/* ---------------------------------------------------------------- film */
.film-wrap { perspective: 1600px; }
.film-frame { position: relative; border-radius: 22px; padding: 2px; background: #000; box-shadow: 0 60px 140px rgba(0, 0, 0, 0.7), 0 0 80px rgba(79, 209, 232, 0.16), 0 0 18px rgba(79, 209, 232, 0.25); }
.film-border { position: absolute; inset: -1px; border-radius: 23px; padding: 1.5px; overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.film-border::before { content: ""; position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(#22a889, #4fd1e8, transparent 30%, transparent 50%, #e0a24a 62%, #22a889 75%, #4fd1e8 90%, #22a889); animation: spin 6s linear infinite; }
.film-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; background: #000; object-fit: cover; }
.film-play { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; display: grid; place-items: center; background: rgba(4, 12, 18, 0.55); backdrop-filter: blur(10px); border: 1px solid rgba(191, 244, 255, 0.5); transition: transform 0.4s var(--ease), opacity 0.4s; }
.film-play svg { width: 38px; height: 38px; fill: var(--ice); margin-left: 6px; filter: drop-shadow(0 0 10px var(--cyan)); }
.film-play:hover { transform: scale(1.08); }
.fp-ring { position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--cyan); animation: ripple 2.4s var(--ease) infinite; }
.fp-ring.r2 { animation-delay: 1.2s; }
@keyframes ripple { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }
.film-frame.playing .film-play, .film-frame.playing .film-meta { opacity: 0; pointer-events: none; }
.film-meta { position: absolute; left: 22px; right: 22px; top: 18px; display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.12em; color: rgba(232, 241, 239, 0.75); text-transform: uppercase; transition: opacity 0.4s; pointer-events: none; }

/* ---------------------------------------------------------------- planes */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; perspective: 1400px; }
.plane { position: relative; padding: 26px 28px 30px; border-radius: 28px; background: linear-gradient(180deg, rgba(var(--c2), 0.1), rgba(8, 15, 22, 0.82) 45%); border: 1px solid rgba(var(--c2), 0.25); overflow: hidden; transform-style: preserve-3d; transition: border-color 0.4s, box-shadow 0.4s; }
.plane::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--c2), 0.18), transparent 55%); opacity: 0; transition: opacity 0.4s; }
.plane:hover { border-color: rgba(var(--c2), 0.6); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(var(--c2), 0.18); }
.plane:hover::after { opacity: 1; }
.pl-top { display: flex; justify-content: space-between; align-items: center; }
.pl-num { font-size: 13px; color: var(--c); letter-spacing: 0.2em; }
.pl-chip { font-size: 11px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(var(--c2), 0.4); color: var(--c); background: rgba(var(--c2), 0.08); letter-spacing: 0.06em; }
.pl-dino { position: relative; height: 210px; margin: 6px 0 4px; display: grid; place-items: center; transform: translateZ(40px); }
.pl-dino::before { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--c2), 0.35), transparent); filter: blur(4px); }
.pl-dino img { position: relative; height: 205px; width: auto; transition: transform 0.6s var(--ease); filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.45)); }
.plane:hover .pl-dino img { transform: translateY(-10px) rotate(-4deg) scale(1.06); }
.plane h3 { margin: 6px 0 4px; font-size: 27px; color: #fff; }
.pl-own { margin: 0 0 12px; font-size: 12.5px; color: var(--dim); }
.pl-own b { color: var(--c); }
.plane p { color: #b6c6c3; font-size: 15.5px; margin: 0 0 14px; }
.pl-list { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px dashed rgba(var(--c2), 0.25); display: grid; gap: 8px; font-size: 14.5px; color: #cad8d5; }
.pl-list li { padding-left: 20px; position: relative; }
.pl-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); transform: rotate(45deg); }
@media (max-width: 1000px) { .planes { grid-template-columns: 1fr; } }

/* loop */
.loop { margin-top: 70px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
#loop-svg { width: 100%; height: auto; overflow: visible; display: block; }
.loop-copy h3 { font-size: 36px; margin: 0 0 20px; line-height: 1.1; }
.loop-copy > p { color: #b6c6c3; }
.eq { display: grid; gap: 8px; margin-bottom: 20px; }
.eq-row { display: grid; grid-template-columns: 48px 22px auto 1fr; align-items: baseline; gap: 6px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); font-family: "Cambria Math", "Times New Roman", serif; font-size: 22px; transition: all 0.4s var(--ease); }
.eq-row .eq-note { font-size: 11.5px; color: var(--dim); text-align: right; letter-spacing: 0.02em; }
.eq-row.on { border-color: var(--c, var(--cyan)); background: color-mix(in srgb, var(--c, var(--cyan)) 10%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--c, var(--cyan)) 18%, transparent); transform: translateX(6px); }
.eq-row[data-k="0"] { --c: var(--gov); } .eq-row[data-k="1"] { --c: var(--prop); } .eq-row[data-k="2"] { --c: var(--judge); }
.eq-l { font-style: normal; color: var(--c); }
.eq-op { color: var(--dim); }
.hooks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.hook { display: flex; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid rgba(224, 162, 74, 0.28); background: rgba(224, 162, 74, 0.06); }
.hk-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(224, 162, 74, 0.16); color: var(--amber); font-size: 18px; }
.hook b { display: block; font-size: 15px; color: #fff; }
.hook span { font-size: 13.5px; color: #b8b0a0; line-height: 1.45; }
@media (max-width: 1000px) { .loop { grid-template-columns: 1fr; } .hooks { grid-template-columns: 1fr; } }

.paperfig { margin-top: 60px; }

/* ---------------------------------------------------------------- lineage replay */
.replay { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: stretch; }
.rp-main, .rp-side > * { border-radius: 24px; background: var(--surface) padding-box, var(--edge) border-box; border: 1px solid transparent; }
.rp-main { padding: 18px 20px 16px; min-width: 0; }
.rp-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rp-scroll::-webkit-scrollbar { display: none; }
.rp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.rp-title { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dim); }
.rp-stats { display: flex; gap: 18px; font-size: 13px; color: var(--dim); }
.rp-stats b { color: #fff; font-weight: 700; }
#rp-best { color: var(--cyan); }
#lineage-svg { width: 100%; height: auto; display: block; overflow: visible; }
.rp-ctrl { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.rp-play { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(79, 209, 232, 0.14); border: 1px solid rgba(79, 209, 232, 0.5); flex: none; transition: box-shadow 0.3s; }
.rp-play:hover { box-shadow: 0 0 20px rgba(79, 209, 232, 0.45); }
.rp-play svg { width: 18px; height: 18px; fill: var(--ice); }
.rp-btns { display: flex; align-items: center; gap: 8px; flex: none; }
.rp-play .i-pause, .rp-play .i-replay { display: none; } .rp-play.playing .i-pause { display: block; } .rp-play.playing .i-play { display: none; }
.rp-play.ended .i-replay { display: block; } .rp-play.ended .i-play { display: none; }
.rp-track { position: relative; flex: 1; min-width: 160px; height: 22px; cursor: pointer; }
.rp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.rp-fill { position: absolute; left: 0; top: 10px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 10px var(--cyan); width: 0; }
.rp-knob { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px var(--cyan); left: 0; }
.rp-legend { display: flex; gap: 14px; font-size: 11px; color: var(--dim); flex-wrap: wrap; }
.rp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.lg-root { border: 2px solid #fff; } .lg-best { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } .lg-note { background: var(--amber); } .lg-mg { background: var(--violet); border-radius: 2px !important; transform: rotate(45deg); }
.rp-legend i.lg-size { width: 4px; height: 4px; margin-right: 19px; vertical-align: 1px; border: 1px solid var(--dim); position: relative; }
.lg-size::after { content: ""; position: absolute; left: 5px; top: -4px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--dim); }
.rp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.capsule { padding: 15px 18px 14px; position: relative; overflow: hidden; flex: none; }
.capsule::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(46, 211, 160, 0.12), transparent 60%); pointer-events: none; }
.cap-h { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.2em; color: var(--gov); }
.cap-h span { font-family: "Cambria Math", serif; font-size: 18px; letter-spacing: 0; font-style: normal; }
.cap-task { font-family: var(--disp); font-size: 25px; font-weight: 600; margin: 2px 0 6px; letter-spacing: -0.02em; }
.cap-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px dashed var(--line); font-size: 13.5px; }
.cap-row span { color: var(--dim); font-size: 12px; white-space: nowrap; }
.cap-row b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: #fff; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.cap-row b.flash { animation: capflash 0.8s var(--ease); }
@keyframes capflash { 0% { color: var(--cyan); text-shadow: 0 0 12px var(--cyan); } 100% { color: #fff; text-shadow: none; } }
.cap-phase { margin-top: 8px; display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid rgba(46, 211, 160, 0.4); color: var(--gov); }
.note-feed { flex: 1 1 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; mask: linear-gradient(180deg, #000 80%, transparent); }
.nf-card { flex: none; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-left: 3px solid var(--k); animation: nfIn 0.7s var(--ease); }
@keyframes nfIn { from { opacity: 0; transform: translateY(-14px) scale(0.97); filter: blur(4px); } }
.nf-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k); }
.nf-t { font-size: 13.5px; font-weight: 600; color: #fff; margin: 3px 0 3px; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nf-b { font-size: 12px; color: #a8b8b5; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nf-empty { font-family: var(--mono); font-size: 12px; color: var(--faint); text-align: center; margin: auto; }
@media (max-width: 1000px) { .replay { grid-template-columns: 1fr; } .note-feed { flex: none; height: 300px; } }

/* ---------------------------------------------------------------- governance case replays (Notes, Meta-guidance) */
.c-violet { color: #c9b8ff; }
.c-neg { color: #ff6f7d; }
.case { --pos: #2ed3a0; --neg: #ff6f7d; position: relative; margin-bottom: 22px; padding: clamp(18px, 2vw, 30px); border-radius: 28px; background: linear-gradient(180deg, rgba(10, 20, 28, 0.86), rgba(6, 12, 18, 0.86)) padding-box, var(--edge) border-box; border: 1px solid transparent; overflow: hidden; }
.case::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 300px at 15% -10%, rgba(46, 211, 160, 0.09), transparent 70%), radial-gradient(600px 300px at 100% 110%, rgba(111, 140, 255, 0.07), transparent 70%); }
#case-mg::before { background: radial-gradient(700px 300px at 85% -10%, rgba(180, 156, 255, 0.1), transparent 70%), radial-gradient(600px 300px at 0% 110%, rgba(224, 162, 74, 0.07), transparent 70%); }
.case-head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.case-head .sec-idx { margin-bottom: 6px; font-size: 11px; }
.case-head h3 { margin: 0; font-size: 23px; max-width: 540px; line-height: 1.25; }
.cs-ctrl { display: flex; align-items: center; gap: 10px; }
.cs-play { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(79, 209, 232, 0.12); border: 1px solid rgba(79, 209, 232, 0.5); flex: none; transition: box-shadow 0.3s, transform 0.3s var(--ease); }
.cs-play:hover { box-shadow: 0 0 20px rgba(79, 209, 232, 0.45); transform: scale(1.06); }
.cs-play svg { width: 17px; height: 17px; fill: var(--ice); }
.cs-play .i-pause, .cs-play .i-replay { display: none; }
.cs-play.playing .i-pause { display: block; } .cs-play.playing .i-play { display: none; }
.cs-play.ended .i-replay { display: block; } .cs-play.ended .i-play { display: none; }
.cs-step { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ice); flex: none; transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease); }
.cs-step:hover { background: rgba(79, 209, 232, 0.12); border-color: rgba(79, 209, 232, 0.5); }
.cs-step:active { transform: scale(0.92); }
.cs-step svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cs-track { position: relative; width: 150px; height: 22px; cursor: pointer; touch-action: none; }
.cs-track::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.cs-fill { position: absolute; left: 0; top: 10px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 10px var(--cyan); width: 0; }
.cs-knob { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px var(--cyan); left: 0; }
.cs-it { font-size: 12.5px; color: var(--dim); min-width: 56px; letter-spacing: 0.06em; }
.case-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: stretch; }
.case-vis { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.case-vis::-webkit-scrollbar { display: none; }
.case-vis svg { width: 100%; height: auto; display: block; overflow: visible; }
.case-side { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* svg vocabulary */
.case .cs-ax text { font-family: var(--mono); font-size: 12.5px; fill: #74888a; }
.case .cs-ax line { stroke: rgba(255, 255, 255, 0.06); }
.case .cs-ax .base { stroke: rgba(255, 255, 255, 0.2); }
.case .cs-lab { font-family: var(--mono); font-size: 12.5px; fill: #7f9290; }
.cs-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0 4px; font-size: 11.5px; color: #93a6a3; }
.cs-leg span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cs-leg i { display: inline-block; flex: none; }
.lk-band { width: 10px; height: 14px; border-radius: 2px; background: rgba(220, 235, 232, 0.16); }
.lk-seg { width: 2px; height: 14px; background: #7d8f8d; }
.lk-pos { width: 3px; height: 14px; background: #2ed3a0; box-shadow: 0 0 6px #2ed3a0; }
.lk-neg { width: 3px; height: 14px; background: #ff6f7d; box-shadow: 0 0 6px #ff6f7d; }
.lk-best { width: 18px; height: 0; border-top: 2.4px dashed #b49cff; }
.lk-root { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #4fd1e8; }
.lk-att { width: 8px; height: 8px; border-radius: 50%; border: 1.6px solid #8a9c9a; }
.lk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.lk-nb { width: 9px; height: 9px; transform: rotate(45deg); border: 2px solid #2ed3a0; background: #0a1a17; }
.lk-run { width: 18px; height: 3px; border-radius: 2px; background: #e8f1ef; }
.case .cs-legend text { font-family: var(--mono); font-size: 11.5px; fill: #93a6a3; }
.case .cs-scan { transition: opacity 0.4s; pointer-events: none; }
.case .cs-pop { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.2); transition: opacity 0.3s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* notes chart */
.nt-band { fill: rgba(220, 235, 232, 0.085); stroke: rgba(220, 235, 232, 0.12); stroke-width: 0.6; opacity: 0; transform: scaleY(0.05); transition: opacity 0.35s, transform 0.5s var(--ease); }
.nt-band.on-static { opacity: 1; transform: none; }
.nt-it.b .nt-band { opacity: 1; transform: none; }
.nt-seg { stroke: #7d8f8d; stroke-width: 2; stroke-linecap: round; stroke-dasharray: var(--len) 999; stroke-dashoffset: var(--len); transition: stroke-dashoffset 0.38s var(--ease); }
.nt-seg { opacity: 0; }
.nt-it.s .nt-seg { stroke-dashoffset: 0; opacity: 1; }
.nt-cap { stroke: #7d8f8d; stroke-width: 1.6; opacity: 0; transition: opacity 0.3s; }
.nt-it.s .nt-cap { opacity: 1; }
.nt-dot { fill: #b7c6c3; }
.nt-it.d .cs-pop { opacity: 1; transform: none; }
.nt-it.k-p .nt-seg, .nt-it.k-p .nt-cap { stroke: var(--pos); stroke-width: 3; }
.nt-it.k-n .nt-seg, .nt-it.k-n .nt-cap { stroke: var(--neg); stroke-width: 3; }
.nt-it.k-p .nt-dot { fill: var(--pos); } .nt-it.k-n .nt-dot { fill: var(--neg); }
.nt-it.k-p.w .nt-seg { filter: drop-shadow(0 0 6px rgba(46, 211, 160, 0.8)); }
.nt-it.k-n.w .nt-seg { filter: drop-shadow(0 0 6px rgba(255, 111, 125, 0.8)); }
.nt-it.k-p.w .nt-band, .nt-it.k-n.w .nt-band { fill: rgba(220, 235, 232, 0.14); }
.nt-chip { opacity: 0; transform: scale(0.4) translateY(6px); transition: opacity 0.35s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nt-it.w .nt-chip { opacity: 1; transform: none; }
.nt-pill { fill: var(--pos); }
.k-n .nt-pill { fill: var(--neg); }
.nt-pill-t { font-family: var(--mono); font-size: 12px; font-weight: 800; fill: #041014; }
.nt-lead { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.nt-ring { fill: none; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.k-p .nt-ring { stroke: var(--pos); } .k-n .nt-ring { stroke: var(--neg); }
.nt-it.w .nt-ring { animation: ntRing 1.1s var(--ease) 1; }
@keyframes ntRing { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(4.2); } }
.nt-it.hl .nt-seg { stroke-width: 4.5; }
.nt-it.hl .nt-band { fill: rgba(191, 244, 255, 0.2); }
.nt-best { fill: none; stroke: #b49cff; stroke-width: 2.4; stroke-dasharray: 7 5; filter: drop-shadow(0 0 5px rgba(180, 156, 255, 0.6)); }
/* gate panel */
.nt-gate, .nt-card { border-radius: 18px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); padding: 14px 16px; }
.g-h { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 0.18em; color: var(--cyan); margin-bottom: 8px; }
.g-h span { color: var(--dim); letter-spacing: 0.06em; }
.g-stack { display: grid; }
.g-view { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s; }
.g-view.on { opacity: 1; visibility: visible; }
.g-idle { margin: 0; align-self: center; font-size: 13.5px; color: #a9bab7; line-height: 1.5; }
.g-idle em { color: #fff; font-style: normal; font-weight: 600; }
.g-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; color: var(--dim); }
.g-row b { color: #fff; font-weight: 600; font-size: 12.5px; }
.g-row b.c-gov { color: var(--pos); } .g-row b.c-neg { color: var(--neg); }
.g-meter { position: relative; height: 18px; margin: 8px 0 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.03); overflow: hidden; }
.g-band { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: rgba(220, 235, 232, 0.16); transition: left 0.4s var(--ease), width 0.4s var(--ease); }
.g-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.35); }
.g-mark { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #b7c6c3; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4); transition: left 0.45s var(--ease); }
.g-mark.p { background: var(--pos); box-shadow: 0 0 14px var(--pos); } .g-mark.n { background: var(--neg); box-shadow: 0 0 14px var(--neg); }
.nt-gate .v { display: inline-block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid; }
.v.in { color: var(--dim); border-color: rgba(255, 255, 255, 0.16); }
.v.warm { color: var(--amber); border-color: rgba(224, 162, 74, 0.45); }
.v.pos { color: #041014; background: var(--pos); border-color: var(--pos); box-shadow: 0 0 18px rgba(46, 211, 160, 0.45); }
.v.neg { color: #1a0508; background: var(--neg); border-color: var(--neg); box-shadow: 0 0 18px rgba(255, 111, 125, 0.45); }
/* note card */
.nt-card { flex: 1; position: relative; overflow: hidden; display: grid; align-content: start; }
.nc { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); filter: blur(4px); transition: opacity 0.45s, transform 0.55s var(--ease), filter 0.45s, visibility 0.45s; }
.nc.on { opacity: 1; visibility: visible; transform: none; filter: none; }
.nc.pos { --k: var(--pos); } .nc.neg { --k: var(--neg); }
.nt-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--k, transparent); box-shadow: 0 0 14px var(--k, transparent); }
.nt-card.pos { --k: var(--pos); } .nt-card.neg { --k: var(--neg); }
@keyframes ncIn { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } }
.nc-k { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.nc-k b { padding: 2px 7px; border-radius: 6px; background: var(--k); color: #041014; font-weight: 800; letter-spacing: 0.04em; }
.nc-k span { margin-left: auto; color: var(--k); font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; }
.nt-card h4 { margin: 9px 0 5px; font-family: var(--disp); font-size: 16px; line-height: 1.28; color: #fff; letter-spacing: -0.01em; }
.nt-card p { margin: 0 0 8px; font-size: 13px; color: #b0c1be; line-height: 1.48; }
.nc-empty p { color: var(--dim); margin-top: 8px; }
.nc-e { font-size: 11px; color: #7f9290; line-height: 1.5; padding-top: 8px; border-top: 1px dashed var(--line); }
/* ledger */
.nt-ledger-h { position: relative; display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; align-items: baseline; margin: 16px 0 8px; }
.nt-ledger-h .sec-idx { margin: 0; font-size: 10.5px; }
.nt-count { font-size: 11.5px; color: var(--dim); }
.nt-ledger { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.lg-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 9px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.015); opacity: 0.32; filter: grayscale(1); transition: opacity 0.5s, filter 0.5s, transform 0.5s var(--ease), border-color 0.3s, background 0.3s; }
.lg-cell.on { opacity: 1; filter: none; animation: cellIn 0.7s var(--ease); }
@keyframes cellIn { from { transform: translateY(10px) scale(0.94); } }
.lg-cell:hover { border-color: var(--k); background: color-mix(in srgb, var(--k) 8%, transparent); }
.lg-cell.pos { --k: var(--pos); } .lg-cell.neg { --k: var(--neg); }
.lg-cell b { font-family: var(--mono); font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--k); color: #041014; }
.lg-cell strong { font-family: var(--disp); font-size: 19px; color: var(--k); letter-spacing: -0.02em; margin: 2px 0; }
.lg-cell span { font-size: 10.5px; color: var(--dim); white-space: nowrap; }
/* meta-guidance chart */
.mg-rband { opacity: 0; transform: scaleX(0); transition: opacity 0.5s, transform 0.9s var(--ease); }
.mg-round.on .mg-rband { opacity: 0.1; transform: none; }
.mg-round line { opacity: 0; transition: opacity 0.5s; }
.mg-round.on line { opacity: 1; }
.mg-rchip { opacity: 0; transform: translateY(-8px); transition: opacity 0.4s 0.2s, transform 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mg-round.on .mg-rchip { opacity: 1; transform: none; }
.mg-rchip-t { font-family: var(--mono); font-size: 12px; font-weight: 800; fill: #071017; }
.mg-ping { opacity: 0; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.mg-round.on .mg-ping { animation: ntRing 1.4s var(--ease) 2; }
.mg-ref { stroke: #ff6f7d; stroke-width: 1.4; stroke-dasharray: 6 5; opacity: 0.75; }
.mg-ref-t { font-family: var(--mono); font-size: 12px; fill: #ff8f9a; }
.mg-best { fill: none; stroke: #e8f1ef; stroke-width: 3; stroke-linejoin: round; }
.mg-best-glow { fill: none; stroke: rgba(191, 244, 255, 0.35); stroke-width: 9; stroke-linejoin: round; filter: blur(4px); }
.mg-pt.on .cs-pop { opacity: 1; transform: none; }
.mg-burst { fill: none; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mg-pt.on .mg-burst { animation: ntRing 1.3s var(--ease) 2; }
.mg-stall { opacity: 0; transition: opacity 0.4s; }
.mg-stall.on { opacity: 1; }
.mg-br { fill: none; stroke: #9fb2af; stroke-width: 1.4; }
.mg-br-t { font-family: var(--mono); font-size: 12.5px; font-style: italic; fill: #c5d3d1; }
.mg-stall:not(.full) .mg-br { stroke: var(--amber); }
.mg-stall:not(.full) .mg-br-t { fill: var(--amber); }
.mg-ann { opacity: 0; transition: opacity 0.6s 0.3s; }
.mg-ann.on { opacity: 1; }
.mg-ann-t { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.mg-bestl { font-size: 12px; color: var(--dim); margin-right: 4px; }
.mg-bestl b { color: #fff; font-size: 14px; transition: color 0.4s, text-shadow 0.4s; }
.mg-bestl b.over { color: #ffb4bc; text-shadow: 0 0 12px rgba(255, 111, 125, 0.7); }
/* meta-guidance side deck */
.mg-side { display: grid; border-radius: 18px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); padding: 14px 14px 12px; }
.mg-pane { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; }
.mg-pane.on { opacity: 1; visibility: visible; }
.mg-pane:not(.on) .dcard { animation: none; }
.mg-ph { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 0.18em; color: var(--c, var(--cyan)); }
.mg-ph i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.mg-side h4 { margin: 4px 0 0; font-family: var(--disp); font-size: 19px; }
.mg-p { margin: 0; font-size: 13.5px; color: #a9bab7; line-height: 1.5; }
.mg-stallbox { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(224, 162, 74, 0.35); background: rgba(224, 162, 74, 0.06); }
.mg-stallbox span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.mg-stallbox b { font-size: 30px; color: #fff; }
.mg-why { font-size: 12.5px; color: var(--dim); }
.mg-pane.on .mg-ph, .mg-pane.on .mg-why, .mg-pane.on > h4, .mg-pane.on > .mg-p { animation: ncIn 0.6s var(--ease) backwards; }
.mg-why b { color: #fff; }
.mg-deck { display: flex; flex-direction: column; gap: 8px; }
.dcard { position: relative; padding: 10px 12px 9px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-left: 3px solid var(--c); animation: dcIn 0.6s var(--ease) backwards; transition: border-color 0.4s, background 0.4s, opacity 0.4s; }
@keyframes dcIn { from { opacity: 0; transform: translateX(18px); } }
.dc-h { display: flex; align-items: baseline; gap: 8px; }
.dc-h b { font-size: 11.5px; color: var(--c); }
.dc-h span { font-family: var(--disp); font-size: 15px; font-weight: 600; color: #fff; }
.dcard p { margin: 3px 0 6px; font-size: 12.5px; color: #a3b4b1; line-height: 1.42; }
.dc-u { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.use { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--faint); padding: 2px 7px; border-radius: 7px; border: 1px dashed rgba(255, 255, 255, 0.14); transition: all 0.4s var(--ease); }
.use i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--faint); transition: all 0.4s; }
.use:not(.on) { color: transparent; }
.use:not(.on) i { border-color: rgba(255, 255, 255, 0.25); }
.use.on { color: #e8f1ef; border-style: solid; border-color: rgba(255, 255, 255, 0.16); }
.use.on i { background: var(--c); border-color: var(--c); box-shadow: 0 0 8px var(--c); }
.dc-out { margin-left: auto; font-style: normal; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; opacity: 0; transform: scale(0.8); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dcard.settled .dc-out { opacity: 1; transform: none; }
.s-win .dc-out { color: #041014; background: var(--c); box-shadow: 0 0 14px var(--c); }
.s-same .dc-out { color: var(--ice); border: 1px solid rgba(191, 244, 255, 0.4); }
.s-ret .dc-out { color: var(--faint); border: 1px solid rgba(255, 255, 255, 0.14); }
.dcard.settled.s-ret { opacity: 0.6; }
.dcard.settled.s-win { background: color-mix(in srgb, var(--c) 9%, transparent); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.mg-foot { margin: 2px 0 0; font-size: 12.5px; color: #a9bab7; line-height: 1.45; font-style: italic; }
@media (max-width: 1100px) {
  .case-body { grid-template-columns: 1fr; }
  .case-side { display: grid; grid-template-columns: 1fr 1fr; }
  .mg-side { display: grid; }
  .nt-ledger { grid-template-columns: repeat(5, 1fr); }
}

/* ---------------------------------------------------------------- plugin */
.plug-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; perspective: 1600px; }
.term { border-radius: 18px; background: linear-gradient(180deg, #0f161d, #0a1016); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4); overflow: hidden; transform-style: preserve-3d; }
.term-bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.dots { display: inline-flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; } .dots i:nth-child(3) { background: #28c840; }
.term-name { flex: 1; text-align: center; font-size: 12.5px; color: #8b9a98; }
.term-badge { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; font-size: 12px; color: #dff7f1; background: rgba(34, 168, 137, 0.14); border: 1px solid rgba(79, 209, 232, 0.45); box-shadow: 0 0 14px rgba(34, 168, 137, 0.35); opacity: 0; transform: scale(0.6); transition: all 0.6s var(--ease); }
.term-badge.on { opacity: 1; transform: none; }
.term-badge img { width: 20px; height: 20px; }
.term-body { padding: 18px 22px 20px; min-height: 420px; font-size: 14.5px; line-height: 1.65; color: #d6e2e0; }
.term-body .ln { white-space: pre-wrap; animation: lnIn 0.35s var(--ease); }
@keyframes lnIn { from { opacity: 0; transform: translateY(6px); } }
.term-body .user { color: #9fb0ad; margin-bottom: 12px; }
.term-body .cmd { color: var(--cyan); font-weight: 700; }
.term-body .b { color: var(--teal); } .term-body .tool b { color: var(--cyan); font-weight: 600; }
.term-body .sub { color: #7b8a88; padding-left: 20px; }
.term-body .spin { color: var(--amber); display: inline-block; width: 1ch; }
.term-body .caret { display: inline-block; width: 9px; height: 18px; background: #d6e2e0; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term-body .prompt-box { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 10px 14px; margin: 4px 0 12px; }
.term-body .menu { font-size: 13px; color: #8b9a98; margin: -4px 0 10px; }
.term-body .menu div { padding: 2px 14px; border-radius: 6px; display: flex; gap: 22px; }
.term-body .menu div.sel { background: rgba(79, 209, 232, 0.1); color: #bfeee4; }
.term-body .menu b { width: 88px; color: var(--cyan); font-weight: 500; }
.term-body .spark { display: block; margin: 8px 0 2px 20px; width: calc(100% - 20px); height: 70px; }
.term-body .link { color: var(--cyan); text-decoration: underline; text-underline-offset: 4px; }
.hosts { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.host-orbit { position: relative; width: min(420px, 90vw); aspect-ratio: 1; }
.ho-ring { position: absolute; inset: 10%; border-radius: 50%; border: 1px dashed rgba(79, 209, 232, 0.3); animation: spin 60s linear infinite; }
.ho-ring.r2 { inset: 26%; border: 1px solid rgba(224, 162, 74, 0.18); animation-direction: reverse; animation-duration: 40s; }
.ho-dino { position: absolute; left: 50%; top: 50%; width: 42%; translate: -50% -52%; animation: bob 3.6s ease-in-out infinite; filter: drop-shadow(0 0 30px rgba(79, 209, 232, 0.3)); }
.host { position: absolute; left: 50%; top: 50%; width: 0; height: 0; padding: 0; transform: rotate(calc(var(--a) + var(--spin, 0deg))) translateY(calc(min(420px, 90vw) * -0.4)) rotate(calc(-1 * (var(--a) + var(--spin, 0deg)))); }
.host img { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; max-width: none; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.host span { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--dim); transition: color 0.3s; }
.host.on img, .host:hover img { transform: scale(1.18); box-shadow: 0 0 0 2px var(--cyan), 0 0 36px rgba(79, 209, 232, 0.6); }
.host.on span, .host:hover span { color: #fff; }
.kit { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* planned hosts: a quiet asterisk and a footnote, kept below the visual weight of the orbit */
.soon-mark { position: absolute; left: 100%; top: 0.1em; margin-left: 1px; font-size: 0.78em; font-weight: 400; line-height: 1; color: var(--faint); } /* outside the name box, so the name itself stays centred */
.hosts-note { margin: -12px 0 0; font-size: 10.5px; letter-spacing: 0.04em; color: var(--faint); opacity: 0.85; }
/* decorative text (illustrative terminal session, code wall) is look-only: not selectable */
.term, .repo-code { -webkit-user-select: none; user-select: none; cursor: default; }
.kit-chip { padding: 8px 16px; border-radius: 999px; font-family: var(--mono); font-size: 13px; color: #e7dcff; background: rgba(155, 138, 208, 0.12); border: 1px solid rgba(155, 138, 208, 0.4); }
.porta { margin-top: 18px; padding: 24px 28px; border-radius: 24px; background: var(--surface) padding-box, var(--edge) border-box; border: 1px solid transparent; }
.po-k { font-size: 11.5px; letter-spacing: 0.16em; color: var(--dim); margin-bottom: 12px; }
.po-row { display: grid; grid-template-columns: 120px 1fr 70px; gap: 14px; align-items: center; margin: 6px 0; font-size: 14.5px; }
.po-row b { font-family: var(--mono); color: #fff; text-align: right; }
.po-bar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.po-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--grad); transition: width 1.6s var(--ease); }
.porta.in .po-bar i { width: calc((var(--w) - 0.6) / 0.16 * 100%); }
.po-note { margin: 12px 0 0; font-size: 14.5px; color: #a9bab7; }
.po-note b { color: #fff; }
@media (max-width: 1000px) { .plug-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- results */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.ctr { padding: clamp(22px, 2.2vw, 32px) clamp(20px, 2vw, 28px); border-radius: 24px; background: var(--surface) padding-box, var(--edge) border-box; border: 1px solid transparent; position: relative; overflow: hidden; transition: transform 0.6s var(--ease); }
.ctr:hover { transform: translateY(-4px); }
.ctr::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: var(--grad); opacity: 0.9; transform: scaleX(0.3); transform-origin: 0 50%; transition: transform 0.9s var(--ease); }
.ctr:hover::after { transform: none; }
.ctr-v { font-family: var(--disp); font-size: clamp(46px, 5vw, 66px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(180deg, #fff, #bff4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ctr-v small { font-size: 0.45em; color: var(--cyan); -webkit-text-fill-color: var(--cyan); margin-left: 3px; }
.ctr-v small.frac { letter-spacing: 0.01em; margin-left: 0.1em; }
.ctr-v .sl { display: inline-block; font-style: normal; font-weight: 300; margin: 0 0.2em 0 0.12em; opacity: 0.6; transform: skewX(-4deg); }
.ctr-l { margin-top: 10px; font-size: 14.5px; color: #a9bab7; }
.ctr-l em { color: #fff; font-style: normal; }
.ctr-l .dim { display: block; font-family: var(--mono); font-size: 12px; margin-top: 2px; }
.panel { position: relative; padding: clamp(18px, 2vw, 30px); border-radius: 24px; background: var(--surface) padding-box, var(--edge) border-box; border: 1px solid transparent; margin-bottom: 20px; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head .sec-idx { margin-bottom: 6px; font-size: 11px; }
.panel-head h3 { margin: 0; font-size: 22px; }
.panel-foot { margin: 14px 0 0; font-size: 13.5px; color: var(--dim); }
.k-first, .k-second { font-family: var(--mono); font-size: 11.5px; padding: 2px 8px; border-radius: 6px; margin-left: 6px; }
.k-first { color: #041014; background: var(--cyan); } .k-second { color: var(--amber); border: 1px solid rgba(224, 162, 74, 0.6); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.duo .panel { margin-bottom: 20px; }
.sub-head { max-width: 820px; margin: 70px 0 26px; }
.sub-head h3 { font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 10px; line-height: 1.05; }
.sub-head p { margin: 0; color: #b7c8c5; }
.sub-head b { color: #fff; }
.seg { position: relative; display: inline-flex; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); flex-wrap: wrap; }
.seg button { position: relative; z-index: 1; padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--dim); border-radius: 9px; transition: color 0.3s; }
.seg button.on { color: #fff; }
.seg > i { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 9px; background: rgba(79, 209, 232, 0.16); border: 1px solid rgba(79, 209, 232, 0.45); transition: left 0.45s var(--ease), width 0.45s var(--ease), top 0.45s var(--ease); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-hint { display: none; font-size: 11px; letter-spacing: 0.1em; color: var(--dim); margin: 2px 0 8px; }
#main-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 820px; }
#main-table th { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--dim); text-align: right; padding: 10px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
#main-table th:first-child { text-align: left; }
#main-table th.ours { color: var(--cyan); }
#main-table td { padding: 9px 10px; text-align: right; font-family: var(--mono); font-size: 13.5px; color: #c3d2cf; border-bottom: 1px solid rgba(255, 255, 255, 0.04); white-space: nowrap; transition: background 0.25s; }
#main-table td:first-child { text-align: left; font-family: var(--sans); color: #fff; font-weight: 500; }
#main-table td.ours { background: rgba(79, 209, 232, 0.05); }
#main-table tr.grp td { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--cyan); padding-top: 16px; background: none; text-align: left; }
#main-table tbody tr:not(.grp):hover td { background: rgba(79, 209, 232, 0.07); }
#main-table .v { display: inline-block; padding: 2px 7px; border-radius: 7px; }
#main-table .first .v { color: #041014; background: var(--cyan); font-weight: 700; box-shadow: 0 0 14px rgba(79, 209, 232, 0.45); }
#main-table .second .v { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(224, 162, 74, 0.6); }
#main-table td.delta { font-weight: 700; }
#main-table .up { color: var(--gov); } #main-table .even { color: var(--dim); } #main-table .down { color: #ff7a59; }
#main-table tbody tr { animation: rowIn 0.6s var(--ease) backwards; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-12px); } }
.chart { position: relative; width: 100%; aspect-ratio: 16 / 9.5; }
.chart.tall { aspect-ratio: 16 / 8; }
.chart.square { aspect-ratio: 1 / 0.86; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .ax text { font-family: var(--mono); font-size: 11px; fill: #6f8280; }
.chart .ax line, .chart .grid line { stroke: rgba(255, 255, 255, 0.06); }
.chart .ax .base { stroke: rgba(255, 255, 255, 0.18); }
.chart .lab { font-family: var(--mono); font-size: 11px; fill: var(--dim); }
.chart .ann { font-family: var(--mono); font-size: 11.5px; fill: var(--ice); }
.chart .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.chart.in .draw { animation: draw 2.2s var(--ease) forwards; animation-delay: var(--dl, 0s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart .pop { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.3); }
.chart.in .pop { animation: pop 0.8s var(--ease) forwards; animation-delay: var(--dl, 0s); }
@keyframes pop { to { opacity: 1; transform: none; } }
.chart .grow { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.chart .growy { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(0); }
.chart.in .grow, .chart.in .growy { animation: grow 1.3s var(--ease) forwards; animation-delay: var(--dl, 0s); }
@keyframes grow { to { transform: none; } }
.chart .xh { stroke: rgba(191, 244, 255, 0.4); stroke-dasharray: 3 4; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.legend button { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #c3d2cf; padding: 4px 10px 4px 8px; border-radius: 8px; border: 1px solid transparent; transition: opacity 0.3s, border-color 0.3s; }
.legend button:hover { border-color: var(--line-2); }
.legend button.off { opacity: 0.35; }
.legend i { width: 16px; height: 3px; border-radius: 2px; }
.legend button.ours { color: #fff; font-weight: 700; }
#tip { position: fixed; z-index: 80; pointer-events: none; padding: 10px 12px; border-radius: 12px; background: rgba(4, 10, 15, 0.94); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); font-family: var(--mono); font-size: 12px; color: var(--ink); opacity: 0; transform: translate(14px, 14px); transition: opacity 0.15s; min-width: 150px; }
#tip.on { opacity: 1; }
#tip .th { color: var(--dim); font-size: 11px; letter-spacing: 0.08em; margin-bottom: 6px; text-transform: uppercase; }
#tip .tr { display: flex; justify-content: space-between; gap: 18px; line-height: 1.6; }
#tip .tr i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
#tip .tr.ours { color: var(--cyan); font-weight: 700; }
.repo { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 20px; }
.repo-code { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #060b10; min-height: 360px; margin-bottom: 20px; }
.rc-scroll { position: absolute; inset: 0; overflow: hidden; font-size: 11.5px; line-height: 1.55; color: #3e5a5c; white-space: pre; -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent); mask: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent); }
/* the viewport (and its fade) stays put; only the track moves, in a seamless loop over two identical copies (js/charts.js) */
.rc-track { padding: 0 18px; will-change: transform; }
.rc-scroll .kw { color: #4f7f88; }
.rc-scroll .cm { color: #2c4547; font-style: italic; }
.rc-count { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 20px; background: linear-gradient(180deg, transparent, rgba(6, 11, 16, 0.96) 45%); }
.rc-count b { display: block; font-family: var(--disp); font-size: 56px; letter-spacing: -0.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rc-count span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.conc { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.conc-pick { display: flex; gap: 6px; }
.conc-pick button { width: 44px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); font-family: var(--mono); font-weight: 700; color: var(--dim); transition: all 0.3s var(--ease); }
.conc-pick button.on { color: #041014; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 18px rgba(79, 209, 232, 0.5); }
.conc-pick button.knee:not(.on) { border-color: rgba(79, 209, 232, 0.6); color: var(--ice); }
.conc-read { font-family: var(--mono); font-size: 13px; color: var(--dim); text-align: right; }
.conc-read b { color: #fff; font-size: 17px; }
.conc-read .neg { color: #ff7a59; }
/* when the row is a little short (laptop widths), tighten the picker and readout so the readout stays beside it */
.conc { container-type: inline-size; }
.conc-read .fv { display: inline-block; min-width: 7ch; text-align: left; } /* "±0" reserves the width of "-0.0308": same line length for every c */
@container (max-width: 590px) { .conc-pick { gap: 4px; } .conc-pick button { width: 36px; } .conc-read { font-size: 12px; } .conc-read b { font-size: 15px; } }
@media (max-width: 1000px) { .counters { grid-template-columns: 1fr 1fr; } .duo, .repo { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- cite */
#cite { padding-bottom: 0; }
.cite-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 50px; align-items: center; }
.cite-dino { position: relative; display: grid; place-items: center; }
.cite-copy { min-width: 0; }
.cite-dino img { width: min(360px, 70vw); height: auto; animation: bob 4s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 40px rgba(224, 162, 74, 0.2)); }
.confetti { position: absolute; inset: -10%; pointer-events: none; }
.confetti i { position: absolute; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: conf 3.6s linear infinite; }
@keyframes conf { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), 360px) rotate(var(--rot)); } }
.bib { position: relative; margin: 26px 0 26px; border-radius: 22px; background: linear-gradient(#060b10, #060b10) padding-box, var(--edge) border-box; border: 1px solid transparent; overflow: hidden; }
.bib pre { margin: 0; padding: 22px 24px; font-size: 13.5px; line-height: 1.7; color: #b8d8d2; overflow-x: auto; }
.bib-copy { position: absolute; right: 12px; top: 12px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line-2); font-size: 12px; color: var(--ice); background: rgba(79, 209, 232, 0.08); transition: all 0.3s; }
.bib-copy:hover { background: rgba(79, 209, 232, 0.2); }
.foot { margin-top: 110px; }
/* giant closing wordmark: a dim outline, lit by a spotlight that follows the pointer (drifts on its own when idle) */
.foot-word { position: relative; font-family: var(--disp); font-size: min(22.4vw, 318px); line-height: 0.78; letter-spacing: -0.065em; text-align: center; white-space: nowrap; user-select: none; padding: 0.08em 0 0.06em; }
.fw-layer { display: block; }
.fw-layer.base { color: transparent; -webkit-text-stroke: 1px rgba(191, 244, 255, 0.16); }
.fw-layer.lit { position: absolute; inset: 0; padding: inherit; color: transparent; background: linear-gradient(100deg, #bff4ff, #4fd1e8 30%, #22a889 55%, #e0a24a 80%, #ff8a4c); -webkit-background-clip: text; background-clip: text;
  -webkit-mask: radial-gradient(circle min(26vw, 380px) at var(--mx, 50%) var(--my, 60%), #000, transparent 72%); mask: radial-gradient(circle min(26vw, 380px) at var(--mx, 50%) var(--my, 60%), #000, transparent 72%); }
.fw-evo { font-weight: 300; } .fw-trias { font-weight: 700; }
.foot-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 0 34px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); letter-spacing: 0.06em; }
@media (max-width: 900px) { .cite-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- overlays */
#toast { position: fixed; left: 50%; bottom: 30px; z-index: 96; transform: translate(-50%, 30px); padding: 10px 18px; border-radius: 12px; background: rgba(4, 12, 18, 0.95); border: 1px solid rgba(79, 209, 232, 0.5); color: var(--ice); font-size: 13px; opacity: 0; transition: all 0.4s var(--ease); pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 700px) {
  body { font-size: 16px; }
  #nav { top: 8px; width: calc(100% - 16px); padding: 7px 8px 7px 12px; gap: 8px; }
  #nav.scrolled { top: 6px; }
  .brand { font-size: 18px; } .brand img { width: 26px; height: 26px; }
  .section { padding: 92px 18px 20px; }
  .sec-head { margin-bottom: 30px; }
  .sec-idx { font-size: 11px; letter-spacing: 0.2em; margin-bottom: 10px; }
  h2 { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.06; }
  .sec-sub { font-size: 16.5px; }
  .hero { padding: 92px 20px 56px; min-height: 0; }
  .eyebrow { font-size: 10.5px; padding: 6px 12px; letter-spacing: 0.06em; }
  .wordmark { font-size: clamp(62px, 19.5vw, 96px); margin: 18px 0 4px; }
  .hero-claim { font-size: 26px; }
  .hero-title { font-size: 13.5px; margin-bottom: 14px; }
  .hero-lede { font-size: 16.5px; margin-bottom: 22px; }
  .cta { gap: 10px; }
  .cta .btn { flex: 1 1 calc(50% - 5px); justify-content: center; padding: 12px 10px; font-size: 15px; }
  .hero-dino { width: min(64vw, 270px); margin: 30px auto 0; }
  .scroll-cue { display: none; }
  .film-frame, .film-frame video { border-radius: 14px; } .film-border { border-radius: 15px; }
  .film-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; } .film-play svg { width: 24px; height: 24px; margin-left: 4px; }
  .film-meta { left: 12px; right: 12px; top: 10px; font-size: 9.5px; }
  .plane { padding: 20px 20px 22px; border-radius: 22px; }
  .pl-dino { height: 176px; } .pl-dino img { height: 170px; }
  .plane h3 { font-size: 24px; }
  .loop { margin-top: 40px; gap: 22px; }
  .loop-copy h3 { font-size: 27px; margin-bottom: 16px; }
  .eq-row { grid-template-columns: 40px 18px 1fr; font-size: 20px; padding: 10px 14px; row-gap: 2px; }
  .eq-row .eq-note { grid-column: 1 / -1; text-align: left; font-size: 11px; }
  .eq-row.on { transform: none; }
  .rp-main { padding: 14px 12px 12px; border-radius: 18px; }
  .rp-title { font-size: 11px; } .rp-stats { font-size: 12px; gap: 14px; }
  #lineage-svg { width: 760px; max-width: none; }
  .rp-legend { gap: 10px; font-size: 10.5px; }
  .capsule { padding: 16px; } .cap-task { font-size: 26px; }
  .note-feed { height: 260px; }
  .case { padding: 16px 12px 14px; border-radius: 18px; }
  .case-head h3 { font-size: 19px; }
  .cs-ctrl { width: 100%; flex-wrap: wrap; row-gap: 6px; } .cs-track { order: 9; flex: 1 1 100%; width: auto; } .cs-it { margin-left: auto; text-align: right; }
  .case-vis svg { width: 760px; max-width: none; }
  .case-side { grid-template-columns: 1fr; }
  .nt-ledger { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .lg-cell strong { font-size: 17px; }
  .term { border-radius: 14px; }
  .term-bar { height: 40px; gap: 10px; padding: 0 12px; } .term-name { font-size: 10.5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .term-body { font-size: 12px; line-height: 1.6; padding: 14px 14px 16px; min-height: 360px; }
  .term-body .sub { padding-left: 12px; } .term-body .spark { margin-left: 12px; width: calc(100% - 12px); height: 56px; }
  .term-body .menu div { gap: 10px; padding: 2px 8px; } .term-body .menu b { width: 60px; flex: none; }
  .hosts { gap: 18px; margin-top: 10px; }
  .host img { left: -27px; top: -27px; width: 54px; height: 54px; border-radius: 14px; } .host span { top: 34px; font-size: 11.5px; }
  .kit-chip { font-size: 12px; padding: 7px 13px; }
  .porta { padding: 16px; } .po-row { grid-template-columns: 96px 1fr 58px; gap: 10px; font-size: 13.5px; }
  .counters { gap: 10px; margin-bottom: 14px; }
  .ctr { padding: 18px 14px 16px; border-radius: 16px; } .ctr-v { font-size: 40px; } .ctr-l { font-size: 13.5px; }
  .panel { padding: 16px 12px 14px; border-radius: 18px; margin-bottom: 14px; }
  .duo { gap: 0; } .duo .panel { margin-bottom: 14px; }
  .panel-head { margin-bottom: 8px; } .panel-head h3 { font-size: 19px; line-height: 1.25; }
  .panel-head .sec-idx { font-size: 10px; letter-spacing: 0.16em; }
  .panel-foot { font-size: 12.5px; }
  .seg button { padding: 7px 10px; font-size: 12.5px; }
  .sub-head { margin: 48px 0 18px; } .sub-head h3 { font-size: 27px; } .sub-head p { font-size: 15.5px; }
  .table-hint { display: block; }
  #main-table { font-size: 12.5px; min-width: 640px; }
  #main-table th, #main-table td { padding: 8px 8px; }
  #main-table td { font-size: 12.5px; }
  #main-table th:first-child, #main-table td:first-child { position: sticky; left: 0; z-index: 1; background: #0a121a; box-shadow: 8px 0 12px -8px rgba(0, 0, 0, 0.8); white-space: normal; min-width: 128px; line-height: 1.3; }
  #main-table tr.grp td { position: static; box-shadow: none; background: none; }
  #main-table tr.grp td span { position: sticky; left: 8px; }
  .legend { gap: 4px 8px; } .legend button { font-size: 11.5px; padding: 4px 8px 4px 6px; }
  .repo-code { min-height: 250px; margin-bottom: 14px; } .rc-count b { font-size: 44px; } .rc-scroll { font-size: 10.5px; }
  .conc { gap: 8px; } .conc-pick button { width: 42px; height: 40px; } .conc-read { text-align: left; font-size: 12px; } .conc-read b { font-size: 15px; }
  .cite-grid { gap: 10px; } .cite-dino img { width: min(230px, 58vw); }
  .bib pre { font-size: 11px; padding: 40px 14px 16px; white-space: pre-wrap; word-break: break-word; }
  .foot { margin-top: 64px; }
  .foot-bottom { font-size: 10.5px; }
  #tip { font-size: 11px; max-width: 78vw; }
}

/* animations in sections that are off screen are paused (see UI.pauseOffscreen) */
.offscreen *, .offscreen *::before, .offscreen *::after { animation-play-state: paused !important; }