:root {
  color-scheme: dark;
  --bg: #0b0f13;
  --bg-soft: #10161b;
  --panel: #131b21;
  --panel-hot: #18232a;
  --ink: #f0f3ee;
  --muted: #8f9ba0;
  --faint: #526068;
  --line: rgba(189, 218, 221, .15);
  --line-strong: rgba(189, 218, 221, .3);
  --cyan: #8ef5d0;
  --cyan-dim: #3cae9a;
  --orange: #ff9d5c;
  --violet: #b8a8ff;
  --yellow: #d8f17b;
  --max: 1240px;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --display: 'Space Grotesk', var(--sans);
  --mono: 'DM Mono', ui-monospace, monospace;
}

html[data-theme='light'] { color-scheme: light; --bg: #edf0ec; --bg-soft: #f5f7f3; --panel: #fff; --panel-hot: #e6f2ec; --ink: #14201e; --muted: #5e6a6a; --faint: #899797; --line: rgba(20, 61, 58, .15); --line-strong: rgba(20, 61, 58, .3); --cyan: #087f6d; --cyan-dim: #42ad95; --orange: #b9521b; --violet: #6652ba; --yellow: #657c00; }
@media (prefers-color-scheme: light) { html[data-theme='system'] { color-scheme: light; --bg: #edf0ec; --bg-soft: #f5f7f3; --panel: #fff; --panel-hot: #e6f2ec; --ink: #14201e; --muted: #5e6a6a; --faint: #899797; --line: rgba(20, 61, 58, .15); --line-strong: rgba(20, 61, 58, .3); --cyan: #087f6d; --cyan-dim: #42ad95; --orange: #b9521b; --violet: #6652ba; --yellow: #657c00; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; transition: background .3s, color .3s; }
body::before { content: ''; position: fixed; z-index: -1; inset: 0; opacity: .32; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000, transparent 50%); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.site-shell { max-width: 1440px; margin: auto; overflow: hidden; }
.topbar { width: min(calc(100% - 72px), var(--max)); height: 82px; display: flex; align-items: center; justify-content: space-between; margin: auto; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); font: 700 13px var(--display); letter-spacing: .08em; }
.brand b { color: var(--muted); font-weight: 500; }
.brand-mark { display: flex; align-items: end; gap: 3px; width: 22px; height: 22px; padding: 2px; border: 1px solid var(--cyan); }
.brand-mark i { display: block; flex: 1; background: var(--cyan); height: 45%; }.brand-mark i:nth-child(2) { height: 72%; }.brand-mark i:nth-child(3) { height: 100%; }
.nav-links { display: flex; gap: 30px; margin-left: 100px; color: var(--muted); font: 12px var(--mono); }.nav-links a { transition: color .2s; }.nav-links a:hover { color: var(--cyan); }
.top-actions { display: flex; gap: 20px; align-items: center; }.language-button { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--panel); color: var(--muted); cursor: pointer; font: 10px var(--mono); letter-spacing: .05em; transition: color .2s, border-color .2s, background .2s; }.language-button:hover, .language-button:focus-visible { border-color: var(--cyan); color: var(--cyan); background: var(--panel-hot); outline: none; }.language-glyph { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; color: var(--orange); font: 11px var(--sans); line-height: 1; }.icon-button { width: 30px; height: 30px; border: 1px solid var(--line); background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--cyan); }.theme-moon { display: none; } html[data-theme='dark'] .theme-sun { display: none; } html[data-theme='dark'] .theme-moon { display: inline; }
.github-link { color: var(--muted); font: 12px var(--mono); }.github-link span { color: var(--cyan); font-size: 17px; }
.section-grid { width: min(calc(100% - 72px), var(--max)); margin: auto; display: grid; grid-template-columns: .88fr 1.12fr; gap: 80px; }
.hero { min-height: 630px; align-items: center; padding: 70px 0 80px; }.eyebrow { margin: 0 0 18px; color: var(--cyan); font: 11px var(--mono); letter-spacing: .11em; text-transform: uppercase; }.live-dot { display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px color-mix(in srgb, var(--orange) 13%, transparent); }
h1, h2, h3, p { margin-top: 0; }.hero h1 { margin: 0 0 24px; font: 600 clamp(50px, 4.8vw, 68px)/.96 var(--display); letter-spacing: -.055em; text-wrap: balance; }.hero h1 em { color: var(--cyan); font-style: italic; }.section-heading h2 span, .footer-cta em { color: var(--cyan); font-style: normal; }.hero-lede { max-width: 430px; color: var(--muted); font-size: 17px; line-height: 1.65; }.hero-actions { display: flex; gap: 10px; margin: 34px 0 35px; }.button { display: inline-flex; align-items: center; gap: 18px; min-height: 46px; padding: 0 18px; border: 1px solid var(--line-strong); font: 12px var(--mono); transition: transform .2s, background .2s, border-color .2s; }.button:hover { transform: translateY(-2px); border-color: var(--cyan); }.button span { color: var(--cyan); font-size: 16px; }.button-primary { border-color: var(--cyan); background: var(--cyan); color: #0d201c; font-weight: 500; }.button-primary span { color: #0d201c; }.button-quiet { color: var(--muted); }.hero-meta { display: flex; gap: 18px; color: var(--faint); font: 10px var(--mono); letter-spacing: .08em; }.hero-meta span::before { content: '·'; margin-right: 8px; color: var(--orange); }
.hero-visual { position: relative; min-height: 470px; }.network-stage { position: relative; min-height: 470px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at center, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 42%), var(--panel); }.network-grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 42px 42px; }.visual-label { position: absolute; z-index: 2; padding: 6px 9px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--muted); font: 10px var(--mono); letter-spacing: .04em; }.visual-label span { margin-left: 8px; color: var(--orange); }.visual-label b { color: var(--cyan); font-weight: 500; }.label-a { top: 17px; left: 17px; }.label-b { top: 58px; right: 17px; bottom: auto; }.network-lines { position: absolute; inset: 0; width: 100%; height: 100%; }.network-lines path { fill: none; stroke: var(--cyan-dim); stroke-width: 1; stroke-dasharray: 4 8; opacity: .62; animation: dash 12s linear infinite; }.orbit { position: absolute; border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }.orbit-one { width: 260px; height: 260px; }.orbit-two { width: 410px; height: 410px; opacity: .45; }.node { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--cyan); border-radius: 50%; background: var(--panel); box-shadow: 0 0 20px color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); font: 10px var(--mono); animation: pulse 3.5s ease-in-out infinite; }.node-core { left: calc(50% - 25px); top: calc(50% - 25px); width: 50px; height: 50px; border-color: var(--orange); color: var(--orange); font-size: 22px; animation-delay: -.8s; }.node-1 { left: 24%; top: 18%; animation-delay: -.5s; }.node-2 { right: 22%; top: 15%; animation-delay: -1.2s; }.node-3 { left: 10%; top: 56%; animation-delay: -2.2s; }.node-4 { right: 10%; top: 48%; animation-delay: -1.7s; }.node-5 { left: 31%; bottom: 10%; animation-delay: -2.7s; }.node-6 { right: 28%; bottom: 14%; animation-delay: -1.1s; }.node-7 { left: 48%; top: 5%; animation-delay: -2.8s; }.packet { position: absolute; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); animation: travel 5s linear infinite; }.packet-one { animation-delay: -1s; }.packet-two { animation-delay: -3s; background: var(--yellow); }.packet-three { animation-delay: -4s; background: var(--cyan); }.stage-readout { position: absolute; bottom: 20px; left: 25px; display: flex; flex-direction: column; color: var(--muted); }.stage-readout strong { margin: 5px 0; color: var(--ink); font: 600 19px var(--display); }.mono { font: 10px var(--mono); letter-spacing: .08em; }
.signal-strip { width: min(calc(100% - 72px), var(--max)); display: grid; grid-template-columns: repeat(4, 1fr); margin: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.signal-strip > div { display: grid; grid-template-columns: 30px 1fr; padding: 20px 18px; border-right: 1px solid var(--line); }.signal-strip > div:first-child { padding-left: 0; }.signal-strip > div:last-child { border: 0; }.signal-key { grid-row: span 2; color: var(--orange); font: 11px var(--mono); }.signal-strip strong { font: 600 11px var(--display); letter-spacing: .09em; }.signal-strip small { color: var(--muted); font: 11px var(--mono); }
.section, .data-section { width: min(calc(100% - 72px), var(--max)); margin: auto; padding: 145px 0 30px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 80px; margin-bottom: 56px; }.section-heading h2, .footer-cta h2 { margin: 0; font: 600 clamp(39px, 5vw, 62px)/.98 var(--display); letter-spacing: -.05em; }.section-heading h2 span { color: var(--muted); }.section-intro { max-width: 370px; margin: 0 4px 4px 0; color: var(--muted); line-height: 1.7; }.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.model-card { min-height: 340px; padding: 27px; border: 1px solid var(--line); background: var(--panel); position: relative; }.model-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 72px; height: 2px; background: var(--cyan); }.routine-card::before { background: var(--orange); }.card-top, .card-footer { display: flex; justify-content: space-between; align-items: center; }.model-index { color: var(--cyan); font: 18px var(--mono); }.routine-card .model-index { color: var(--orange); }.model-tag, .panel-kicker { color: var(--faint); font: 10px var(--mono); letter-spacing: .08em; }.model-title { display: flex; align-items: center; gap: 14px; margin: 45px 0 16px; }.model-title h3 { margin: 0; font: 600 28px var(--display); }.clock-icon { color: var(--cyan); font-size: 34px; }.routine-card .clock-icon { color: var(--orange); }.model-card > p { max-width: 440px; min-height: 68px; color: var(--muted); }.card-footer { padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font: 10px var(--mono); }.card-footer a { color: var(--cyan); }.routine-card .card-footer a { color: var(--orange); }.mini-timeline { display: flex; align-items: center; gap: 5px; height: 40px; margin: 20px 0 21px; }.mini-timeline span { width: 34px; height: 4px; background: var(--line-strong); }.mini-timeline span.active { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }.mini-timeline i, .mini-network i { margin-left: 8px; color: var(--faint); font: 10px var(--mono); }.mini-network { display: flex; align-items: center; height: 40px; margin: 20px 0 21px; }.mini-network span { position: relative; width: 10px; height: 10px; margin-right: 30px; border: 1px solid var(--orange); border-radius: 50%; }.mini-network span::after { content: ''; position: absolute; top: 4px; left: 10px; width: 30px; border-top: 1px dashed var(--orange); opacity: .5; }.mini-network span:last-of-type { margin: 0; }.mini-network span:last-of-type::after { display: none; }
.data-section { width: 100%; max-width: none; padding: 135px max(36px, calc((100% - var(--max)) / 2)) 90px; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.compact-heading { width: min(100%, var(--max)); margin-left: auto; margin-right: auto; }.data-controls { display: flex; align-items: center; gap: 20px; }.segmented { display: flex; border: 1px solid var(--line-strong); }.segmented button { padding: 9px 13px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 10px var(--mono); }.segmented button.active { background: var(--cyan); color: #0d201c; }.data-note { color: var(--faint); font: 10px var(--mono); }.dashboard { width: min(100%, var(--max)); display: grid; grid-template-columns: 1fr 1.5fr .75fr; gap: 18px; margin: auto; }.metric-grid { display: grid; gap: 18px; }.metric, .chart-panel, .insight-panel { border: 1px solid var(--line); background: var(--panel); }.metric { position: relative; padding: 21px 20px 18px; overflow: hidden; }.metric > span { color: var(--muted); font: 10px var(--mono); letter-spacing: .06em; }.metric strong { display: block; margin-top: 7px; font: 600 35px var(--display); }.metric small { color: var(--faint); font: 10px var(--mono); }.metric-bar { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--line); }.metric-bar i { display: block; height: 100%; background: var(--cyan); }.metric-bar.cyan i { background: var(--cyan-dim); }.metric-bar.orange i { background: var(--orange); }.metric-bar.violet i { background: var(--violet); }.chart-panel { min-height: 380px; padding: 25px 26px 20px; }.panel-heading { display: flex; align-items: start; justify-content: space-between; }.panel-heading h3, .insight-panel h3 { margin: 9px 0 0; font: 600 19px var(--display); }.chart-unit { color: var(--faint); font: 10px var(--mono); }.chart-wrap { display: flex; height: 275px; margin-top: 27px; }.y-labels { display: flex; flex-direction: column; justify-content: space-between; padding: 0 12px 23px 0; color: var(--faint); font: 10px var(--mono); }.chart { position: relative; flex: 1; }.chart-grid { position: absolute; inset: 0 0 23px; display: flex; flex-direction: column; justify-content: space-between; }.chart-grid i { border-top: 1px solid var(--line); }.chart svg { position: absolute; inset: 0 0 23px; width: 100%; height: calc(100% - 23px); overflow: visible; }.chart svg path:first-child { fill: color-mix(in srgb, var(--cyan) 12%, transparent); }.chart #chart-line { fill: none; stroke: var(--cyan); stroke-width: 3; vector-effect: non-scaling-stroke; }.chart circle { fill: var(--panel); stroke: var(--orange); stroke-width: 3; }.x-labels { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: var(--faint); font: 10px var(--mono); }.insight-panel { min-height: 380px; padding: 26px; border-color: color-mix(in srgb, var(--orange) 45%, var(--line)); }.insight-panel h3 { font-size: 24px; line-height: 1.1; }.insight-panel p { margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.7; }.insight-line { margin-top: 70px; padding-top: 13px; border-top: 1px solid var(--line); }.insight-line span { display: block; width: 12px; height: 12px; margin-bottom: 12px; background: var(--orange); }.insight-line b { display: block; color: var(--orange); font: 600 27px var(--display); }.insight-line small { color: var(--faint); font: 10px var(--mono); }
.routine-lab { width: min(100%, var(--max)); margin: 18px auto 0; border: 1px solid var(--line); background: var(--panel); }.routine-lab-heading { padding: 23px 26px 0; margin-bottom: 18px; }.routine-lab-controls { display: flex; align-items: center; gap: 14px; }.scenario-tabs { display: flex; gap: 4px; }.scenario-tabs button { width: 30px; height: 25px; border: 1px solid var(--line-strong); background: transparent; color: var(--faint); cursor: pointer; font: 10px var(--mono); }.scenario-tabs button.active { border-color: var(--orange); color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent); }.play-button { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 9px; border: 1px solid var(--line-strong); background: transparent; color: var(--cyan); cursor: pointer; font: 10px var(--mono); }.play-button:hover { border-color: var(--cyan); }.play-icon { font-size: 13px; }.routine-stage { position: relative; min-height: 270px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--orange) 8%, transparent), transparent 50%), var(--bg-soft); }.routine-stage::before { content: ''; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 45px 45px; }.routine-stage svg { position: relative; z-index: 1; width: 100%; height: 270px; }.routine-main-line, .routine-fork-line { fill: none; stroke: var(--cyan-dim); stroke-width: 2; stroke-dasharray: 5 7; }.routine-fork-line { stroke: var(--orange); }.routine-node { fill: var(--panel); stroke: var(--line-strong); stroke-width: 2; transition: r .3s, fill .3s; }.routine-node.active-node { fill: var(--cyan); stroke: var(--cyan); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--cyan) 55%, transparent)); }.routine-node.fork-node { fill: var(--orange); stroke: var(--orange); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--orange) 55%, transparent)); }.routine-readout { position: absolute; z-index: 2; top: 18px; left: 24px; display: flex; flex-direction: column; }.routine-readout strong { margin: 5px 0 2px; color: var(--ink); font: 600 21px var(--display); }.routine-readout small { color: var(--muted); font: 11px var(--mono); }.routine-meta { display: flex; justify-content: space-between; padding: 14px 24px 17px; color: var(--faint); }.routine-meta span:last-child { color: var(--orange); }
.architecture-layout { display: grid; grid-template-columns: 1.45fr .65fr; gap: 18px; }.flow-diagram { min-height: 220px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 30px; border: 1px solid var(--line); background: var(--panel); }.flow-node { min-width: 145px; padding: 15px; border-left: 2px solid var(--cyan); background: var(--panel-hot); }.flow-node b { display: block; color: var(--orange); font: 10px var(--mono); }.flow-node strong { display: block; margin: 20px 0 3px; font: 600 21px var(--display); }.flow-node small { color: var(--muted); font: 10px var(--mono); }.flow-arrow { color: var(--cyan); font-size: 22px; }.code-note { padding: 26px; border: 1px solid var(--line); }.code-note code { display: block; margin: 28px 0 20px; color: var(--cyan); font: 15px var(--mono); }.code-note p { margin: 0; color: var(--muted); font-size: 13px; }.footer-cta { width: min(calc(100% - 72px), var(--max)); display: flex; align-items: end; justify-content: space-between; gap: 30px; margin: 130px auto 100px; padding-top: 36px; border-top: 1px solid var(--line); }.cta-actions { display: flex; gap: 10px; }.footer { width: min(calc(100% - 72px), var(--max)); display: flex; justify-content: space-between; padding: 20px 0 34px; border-top: 1px solid var(--line); color: var(--faint); font: 10px var(--mono); }
.section, .data-section, .signal-strip, .footer-cta { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }.is-visible { opacity: 1; transform: none; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); box-shadow: 0 0 30px color-mix(in srgb, var(--cyan) 35%, transparent); } } @keyframes dash { to { stroke-dashoffset: -100; } } @keyframes travel { 0% { left: 20%; top: 26%; } 35% { left: 50%; top: 50%; } 70% { left: 78%; top: 25%; } 100% { left: 20%; top: 26%; } }
@media (max-width: 900px) { .section-grid { grid-template-columns: 1fr; gap: 20px; }.hero { padding-top: 65px; }.hero-visual { min-height: 430px; }.network-stage { min-height: 430px; }.dashboard { grid-template-columns: 1fr 1.6fr; }.insight-panel { grid-column: 1 / -1; min-height: auto; }.insight-line { margin-top: 30px; }.architecture-layout { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .topbar, .section-grid, .signal-strip, .section, .footer-cta, .footer { width: min(calc(100% - 36px), var(--max)); }.topbar { height: 68px; }.nav-links { display: none; }.github-link { display: none; }.top-actions { gap: 8px; }.language-button { padding: 0 7px; }.hero { min-height: auto; padding: 65px 0 45px; }.hero h1 { font-size: 48px; }.hero-lede { font-size: 15px; }.hero-actions { flex-wrap: wrap; }.hero-meta { gap: 9px; font-size: 8px; }.hero-visual { min-height: 350px; }.network-stage { min-height: 350px; }.orbit-two { width: 300px; height: 300px; }.node { width: 34px; height: 34px; }.node-core { width: 44px; height: 44px; }.node-1 { left: 16%; }.node-2 { right: 15%; }.node-3 { left: 5%; }.node-4 { right: 5%; }.node-5 { left: 22%; }.node-6 { right: 20%; }.signal-strip { grid-template-columns: 1fr 1fr; }.signal-strip > div, .signal-strip > div:first-child { padding: 15px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }.signal-strip > div:nth-child(2) { border-right: 0; }.signal-strip > div:nth-child(3), .signal-strip > div:nth-child(4) { border-bottom: 0; }.section, .data-section { padding-top: 90px; }.section-heading { display: block; margin-bottom: 34px; }.section-intro { margin-top: 25px; }.model-grid, .dashboard { grid-template-columns: 1fr; }.chart-panel { min-height: 340px; padding: 20px 15px; }.chart-wrap { height: 245px; }.insight-panel { grid-column: auto; }.data-section { padding-right: 18px; padding-left: 18px; }.data-controls { display: block; margin-top: 25px; }.routine-lab-heading { display: block; padding: 20px 15px 0; }.routine-lab-controls { justify-content: space-between; margin-top: 16px; }.routine-meta { display: block; padding: 12px 15px 15px; line-height: 1.8; }.routine-meta span { display: block; }.data-note { display: block; margin-top: 12px; }.flow-diagram { flex-direction: column; }.flow-arrow { transform: rotate(90deg); }.flow-node { width: min(100%, 270px); }.footer-cta { display: block; margin-top: 90px; margin-bottom: 60px; }.cta-actions { flex-wrap: wrap; margin-top: 30px; }.footer { display: block; line-height: 2.3; }.label-b { top: 62px; right: 12px; bottom: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Chain visual and experiment family layout. */
.chain-visual { position: absolute; inset: 0; width: 100%; height: 100%; }
.chain-visual { transition: opacity .65s ease, transform .65s ease; }
.chain-visual.is-changing { opacity: .2; transform: translateY(5px); }
.log-main-track, .log-fork-track { fill: none; stroke: var(--cyan-dim); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 9; animation: chain-flow 6s linear infinite; transition: d .6s ease; }
.log-fork-track { stroke: var(--orange); stroke-width: 2; }
.log-main-node, .log-fork-node { fill: var(--panel); stroke: var(--cyan); stroke-width: 2; transition: r .25s, fill .25s; }
.log-main-node.tip-node { fill: var(--cyan); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cyan) 55%, transparent)); }
.log-fork-node { fill: var(--panel); stroke: var(--orange); }
.log-main-node:hover, .log-main-node:focus-visible { fill: var(--cyan); outline: none; }.log-fork-node:hover, .log-fork-node:focus-visible { fill: var(--orange); outline: none; }
.log-height { fill: var(--ink); font: 10px var(--mono); pointer-events: none; }.fork-height { fill: var(--orange); }.log-miner { fill: var(--faint); font: 9px var(--mono); pointer-events: none; }
.chain-legend { position: absolute; top: 19px; right: 18px; display: flex; gap: 15px; color: var(--muted); font: 10px var(--mono); }
.chain-legend span { display: flex; align-items: center; gap: 6px; }.chain-legend i { width: 18px; border-top: 2px solid var(--cyan); }.chain-legend .legend-fork { border-color: var(--orange); }
.chain-parameters { position: absolute; right: 18px; bottom: 56px; max-width: 52%; color: var(--faint); font: 9px var(--mono); text-align: right; line-height: 1.5; overflow-wrap: anywhere; }
.chain-pagination { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 5px; z-index: 3; }.chain-pagination button { width: 28px; height: 23px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--faint); cursor: pointer; font: 9px var(--mono); }.chain-pagination button.active { border-color: var(--orange); color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.experiment-families { width: min(100%, var(--max)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: auto; }
.experiment-family { min-height: 380px; padding: 25px; border: 1px solid var(--line); background: var(--panel); }
.family-heading { display: flex; gap: 15px; align-items: flex-start; }.family-heading .model-index { color: var(--cyan); }.family-selfish .model-index, .family-attack .model-index { color: var(--orange); }
.family-heading h3 { margin: 9px 0 0; font: 600 22px var(--display); line-height: 1.1; }.experiment-family > p { min-height: 74px; margin: 28px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.comparison-table { border-top: 1px solid var(--line); font: 10px var(--mono); }.comparison-table > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }.comparison-table span { color: var(--muted); }.comparison-table b { color: var(--cyan); font-weight: 500; text-align: right; white-space: nowrap; }.family-selfish .comparison-table b, .family-attack .comparison-table b { color: var(--orange); }.table-head { color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
@keyframes chain-flow { to { stroke-dashoffset: -72; } }
@media (max-width: 900px) { .experiment-families { grid-template-columns: 1fr 1fr; }.experiment-family:last-child { grid-column: 1 / -1; } }
@media (max-width: 650px) { .chain-legend { top: 15px; right: 12px; display: block; line-height: 2; }.chain-legend span { justify-content: flex-end; }.chain-parameters { right: 14px; bottom: 58px; max-width: 58%; font-size: 8px; }.chain-pagination { right: 14px; bottom: 15px; }.experiment-families { grid-template-columns: 1fr; }.experiment-family:last-child { grid-column: auto; }.experiment-family { min-height: auto; }.comparison-table > div { display: block; }.comparison-table b { display: block; margin-top: 5px; text-align: left; } }
.hero-title-line { color: inherit; font-style: normal; }