:root {
  --canvas: oklch(96.5% .004 95);
  --surface: oklch(98.5% .002 95);
  --ink: oklch(19% .012 55);
  --muted: oklch(45% .012 70);
  --rule: oklch(82% .008 80);
  --rule-soft: oklch(89% .006 80);
  --vermilion: oklch(61% .17 35);
  --moss: oklch(48% .105 155);
  --blue: oklch(51% .145 255);
  --plum: oklch(47% .09 340);
  --warning: oklch(58% .115 70);
  --display: 82px;
  --title: 52px;
  --heading: 18px;
  --body: 14px;
  --assist: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--canvas); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font: var(--body)/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", sans-serif; letter-spacing: 0; }
button, input { font: inherit; letter-spacing: 0; }
button, a { color: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }
.hidden { display: none !important; }
.context-label { margin: 0 0 28px; color: var(--muted); font: 700 var(--assist)/1.2 ui-monospace, SFMono-Regular, monospace; }
.wordmark { font-size: 22px; font-weight: 800; letter-spacing: 0; }
.wordmark span { color: var(--vermilion); }

.site-header { position: sticky; top: 0; z-index: 30; height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(24px, 4vw, 64px); border-bottom: 1px solid var(--rule); background: var(--canvas); }
.public-nav { display: flex; gap: 30px; }
.public-nav a { font-size: 13px; font-weight: 650; }
.public-nav a:hover { color: var(--vermilion); }
.console-entry { justify-self: end; min-height: 44px; border: 1px solid var(--ink); border-radius: 6px; padding: 0 15px; background: transparent; font-weight: 700; transition: background 180ms ease-out, color 180ms ease-out; }
.console-entry:hover { background: var(--ink); color: var(--surface); }
.console-entry span { margin-left: 16px; color: var(--vermilion); }
.console-entry:focus-visible, .hero-actions button:focus-visible, .login-form input:focus-visible, .login-form button:focus-visible, .console-footer button:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 3px; }

.hero { position: relative; min-height: calc(100svh - 72px); overflow: hidden; display: flex; align-items: center; padding: clamp(70px, 10vw, 150px) clamp(24px, 7vw, 110px); border-bottom: 1px solid var(--ink); background: var(--surface); }
.hero-copy { position: relative; z-index: 2; max-width: 930px; }
.hero-copy h1 { max-width: 920px; margin: 0; font-size: var(--display); line-height: 1.02; letter-spacing: 0; text-wrap: balance; }
.hero-copy > p:not(.context-label) { max-width: 660px; margin: 34px 0 0; font-size: 18px; line-height: 1.8; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.demo-entry, .hero-console-entry { min-height: 46px; border: 1px solid var(--ink); border-radius: 6px; padding: 0 16px; font-weight: 800; transition: background 180ms ease-out, color 180ms ease-out; }
.demo-entry { background: var(--ink); color: var(--surface); }
.hero-console-entry { background: transparent; color: var(--ink); }
.demo-entry:hover { background: var(--vermilion); border-color: var(--vermilion); }
.hero-console-entry:hover { background: var(--ink); color: var(--surface); }
.hero-actions span { margin-left: 14px; color: var(--vermilion); }
.demo-entry span { color: inherit; }
.hero-curve { position: absolute; right: -7%; bottom: -7%; width: 85%; height: 75%; opacity: .74; }
.hero-curve path { fill: none; stroke: var(--vermilion); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1800; animation: draw 1600ms cubic-bezier(.22, 1, .36, 1) both; }
.hero-curve circle { fill: var(--surface); stroke: var(--vermilion); stroke-width: 3; vector-effect: non-scaling-stroke; }
@keyframes draw { from { stroke-dashoffset: 1800; } to { stroke-dashoffset: 0; } }
.hero-status { position: absolute; right: 5vw; bottom: 44px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px 10px; text-align: right; }
.hero-status i { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: var(--moss); }
.hero-status span { font: 700 var(--assist)/1 ui-monospace, monospace; }
.hero-status b { font-size: 13px; }

.system-proof { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(500px, 1.85fr); gap: 7vw; padding: 110px clamp(24px, 6vw, 92px); }
.proof-copy h2, .flow-band h2 { margin: 0; font-size: var(--title); line-height: 1.1; letter-spacing: 0; text-wrap: balance; }
.proof-copy p { max-width: 420px; margin: 28px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.observer-preview { overflow: hidden; border: 1px solid var(--ink); background: var(--surface); }
.observer-preview > header { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--ink); }
.observer-preview > header span { color: var(--moss); font: 700 var(--assist)/1 ui-monospace, monospace; }
.observer-preview > header i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
.preview-metrics span { padding: 20px; border-right: 1px solid var(--rule); }
.preview-metrics span:last-child { border-right: 0; }
.preview-metrics small { display: block; color: var(--muted); }
.preview-metrics b { display: block; margin-top: 10px; font: 700 32px/1 ui-monospace, monospace; }
.observer-preview svg { display: block; width: 100%; height: 240px; padding: 20px; }
.observer-preview svg g line, .chart-grid line { stroke: var(--rule-soft); stroke-width: 1; }
.observer-preview polyline, .chart-polyline { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.document-line { stroke: var(--vermilion); }
.line-line { stroke: var(--blue); }
.cjk-line { stroke: var(--moss); }

.flow-band { display: grid; grid-template-columns: 1.1fr 3fr; gap: 70px; padding: 90px clamp(24px, 6vw, 92px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--surface); }
.flow-band > div > p { color: #aaa8a1; }
.flow-band ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: #4a4945; }
.flow-band li { min-height: 190px; padding: 22px; background: var(--ink); }
.flow-band li span { color: #f57a5e; font: 700 var(--assist)/1 ui-monospace, monospace; }
.flow-band li b { display: block; margin-top: 52px; font-size: 14px; line-height: 1.6; }
.boundary-band { min-height: 100px; display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 40px; padding: 0 clamp(24px, 6vw, 92px); }
.boundary-band p { font-size: 18px; font-weight: 800; }
.boundary-band span { color: var(--muted); }
.boundary-band i { width: 10px; height: 10px; border-radius: 50%; background: var(--moss); }

.login-page { min-height: calc(100svh - 72px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); align-items: center; gap: 8vw; padding: clamp(50px, 8vw, 120px) clamp(24px, 8vw, 130px); }
.login-copy h1 { max-width: 680px; margin: 0; font-size: var(--display); line-height: 1.03; letter-spacing: 0; }
.login-copy > p:last-child { max-width: 620px; margin-top: 30px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.login-form { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 34px 0; }
.login-form label { display: block; margin-bottom: 12px; font-weight: 700; }
.login-form input { width: 100%; height: 48px; border: 1px solid var(--ink); border-radius: 6px; padding: 0 14px; background: var(--surface); }
.login-form button { width: 100%; min-height: 48px; margin-top: 12px; border: 0; border-radius: 6px; background: var(--ink); color: var(--surface); font-weight: 800; }
.login-form button:disabled { cursor: wait; opacity: .65; }
.login-form p { min-height: 22px; margin: 12px 0 0; color: var(--vermilion); }

.console-header { min-height: 210px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 48px clamp(24px, 4vw, 64px) 36px; }
.console-header h1 { margin: 0; font-size: var(--title); line-height: 1.04; letter-spacing: 0; }
.console-header > div:first-child > p:last-child { margin: 16px 0 0; color: var(--muted); }
.freshness { min-width: 310px; padding: 18px 20px; border: 1px solid var(--warning); background: color-mix(in oklch, var(--warning) 8%, var(--surface)); }
.freshness[data-tone="fresh"] { border-color: var(--moss); background: color-mix(in oklch, var(--moss) 6%, var(--surface)); }
.freshness[data-tone="stale"] { border-color: var(--vermilion); background: color-mix(in oklch, var(--vermilion) 6%, var(--surface)); }
.freshness span, .freshness em { display: block; font-size: var(--assist); font-style: normal; }
.freshness b { display: block; margin: 8px 0 4px; font-size: 20px; }
.freshness em { color: var(--muted); }
.console-page[data-mode="demo"] .freshness { min-width: 280px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--ink); background: transparent; }
.console-page[data-mode="demo"] .freshness span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--vermilion); }
.console-page[data-mode="demo"] .freshness b { margin-top: 12px; }
.metric-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.metric-strip article { position: relative; min-height: 150px; padding: 30px clamp(20px, 3vw, 48px); border-right: 1px solid var(--ink); }
.metric-strip article:last-child { border-right: 0; }
.metric-strip span { color: var(--muted); font-size: var(--assist); }
.metric-strip b { display: block; margin-top: 22px; font: 720 58px/.9 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0; }
.metric-strip em { position: absolute; top: 30px; right: 32px; color: var(--moss); font-style: normal; font-weight: 700; }
.console-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); border-bottom: 1px solid var(--ink); }
.trend-panel { border-right: 1px solid var(--ink); }
.trend-panel > header, .signal-rail section > header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--ink); }
.trend-panel h2, .signal-rail h2 { margin: 0; font-size: var(--heading); }
.legend { display: flex; gap: 22px; color: var(--muted); font-size: var(--assist); }
.legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; }
.document-key::before { background: var(--vermilion); }
.line-key::before { background: var(--blue); }
.cjk-key::before { background: var(--moss); }
.chart-stage { min-height: 410px; padding: 46px 48px 34px; }
.chart-stage svg, .token-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.document-series { stroke: var(--vermilion); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.line-series { stroke: var(--blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.cjk-series { stroke: var(--moss); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.chart-dot.document-series { fill: var(--vermilion); }
.chart-dot.line-series { fill: var(--blue); }
.chart-dot.cjk-series { fill: var(--moss); }
.token-series { stroke: var(--plum); fill: var(--plum); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.token-baseline { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis { fill: var(--muted); font: 700 var(--assist)/1 ui-monospace, monospace; }
.chart-dot { stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart-dot:focus, .chart-dot:hover { r: 5.5; outline: none; }
.empty-state { display: grid; min-height: 280px; place-items: center; color: var(--muted); }
.token-row { min-height: 170px; display: grid; grid-template-columns: 290px 1fr; align-items: center; gap: 30px; padding: 25px 30px; border-top: 1px solid var(--rule); }
.token-row span, .token-row em { display: block; color: var(--muted); font-size: var(--assist); font-style: normal; }
.token-row b { display: block; margin: 7px 0; font: 700 28px/1 ui-monospace, monospace; }
.token-chart { height: 90px; }
.signal-rail section { border-bottom: 1px solid var(--ink); }
.signal-rail header span { color: var(--muted); font: 700 var(--assist)/1 ui-monospace, monospace; }
.directory-mass { padding: 10px 28px 18px; }
.mass-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule-soft); }
.mass-row:last-child { border-bottom: 0; }
.mass-row b, .mass-row span { font-size: var(--assist); }
.mass-row span { color: var(--muted); font-family: ui-monospace, monospace; }
.mass-row progress { grid-column: 1 / -1; width: 100%; height: 4px; border: 0; appearance: none; }
.mass-row progress::-webkit-progress-bar { background: var(--rule-soft); }
.mass-row progress::-webkit-progress-value { background: var(--ink); }
.mass-row progress::-moz-progress-bar { background: var(--ink); }
.signal-rail dl { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; }
.signal-rail dl div { min-height: 86px; padding: 18px 22px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.signal-rail dl div:nth-child(2n) { border-right: 0; }
.signal-rail dt { color: var(--muted); font-size: var(--assist); }
.signal-rail dd { margin: 12px 0 0; font: 700 13px/1 ui-monospace, monospace; }
.good { color: var(--moss); }
.console-footer { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: var(--muted); font: 700 var(--assist)/1 ui-monospace, monospace; }
.console-actions { display: flex; align-items: center; gap: 16px; }
.console-footer button { border: 0; background: transparent; color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
  :root { --display: 52px; --title: 38px; --body: 15px; --assist: 14px; }
  .site-header { position: static; height: auto; min-height: 64px; grid-template-columns: 1fr auto; padding: 0 18px; }
  .public-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-around; border-top: 1px solid var(--rule); }
  .public-nav a { min-height: 46px; display: flex; align-items: center; }
  .console-entry { width: 44px; padding: 0; font-size: 0; }
  .console-entry span { margin: 0; font-size: 15px; }
  .hero { min-height: 650px; padding: 72px 24px; }
  .hero-copy h1 { font-size: var(--display); overflow-wrap: anywhere; }
  .hero-copy > p:not(.context-label) { font-size: 16px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions button { width: 100%; }
  .hero-curve { right: -40%; width: 150%; }
  .hero-status { right: auto; left: 24px; }
  .system-proof { grid-template-columns: 1fr; padding: 70px 20px; }
  .flow-band { grid-template-columns: 1fr; padding: 60px 20px; }
  .flow-band ol { grid-template-columns: 1fr; }
  .flow-band li { min-height: 110px; }
  .flow-band li b { margin-top: 25px; }
  .boundary-band { min-height: 150px; grid-template-columns: 1fr; gap: 12px; padding: 28px 20px; }
  .login-page { min-height: calc(100svh - 110px); grid-template-columns: 1fr; gap: 48px; padding: 50px 20px; }
  .login-copy h1 { font-size: var(--display); }
  .console-header { align-items: flex-start; flex-direction: column; padding: 36px 20px 24px; }
  .freshness { width: 100%; min-width: 0; }
  .metric-strip { grid-template-columns: 1fr; }
  .metric-strip article { min-height: 110px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .metric-strip article:last-child { border-bottom: 0; }
  .metric-strip b { font-size: 40px; }
  .console-grid { grid-template-columns: 1fr; }
  .trend-panel { border-right: 0; }
  .chart-stage { min-height: 300px; padding: 35px 22px 24px; }
  .token-row { grid-template-columns: 1fr; }
  .observer-preview { overflow: hidden; }
  .preview-metrics b { font-size: 23px; }
  .signal-rail dd { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}