/* Hallmark: theme: inherited SATO Precision; genre: modern-minimal; idea: a network trace becomes an investigation; hero: product led; nav: separate islands; footer: compact brand row; job: understand SATO; posture: restrained; signature: interactive IOC evidence; surface: navy */
/* Critique: the product scenario is illustrative; its visible caption distinguishes it from a released interface. */
/* waive: 1 — Inter is the approved SATO brand face; 59 — compact development preview, separated by surfaces and rules. */
:root {
  --color-canvas: #11161d;
  --color-surface: #19222c;
  --color-inset: #141c25;
  --color-rule: #34414f;
  --color-ink: #eaf1f7;
  --color-secondary: #b3c1cf;
  --color-muted: #95a7b9;
  --color-cyan: #70caff;
  --color-blue: #3d7bff;
  --color-red: #ff8297;
  --color-match: #32212d;
  --color-match-rule: #764453;
  --color-purple: #bd9dff;
  --color-light: #eaf1f7;
  --color-light-ink: #17202a;
  --color-light-secondary: #435465;
  --color-light-rule: #b8c7d5;
  --color-clear: transparent;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-code: 'JetBrains Mono', monospace;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-panel: 16px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --container: 1248px;
}

@font-face { font-family: 'Inter'; src: url('./assets/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; src: url('./assets/inter-cyrillic.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'JetBrains Mono'; src: url('./assets/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--space-6); background: var(--color-canvas); }
body { margin: var(--space-0); overflow-x: clip; color: var(--color-ink); background: var(--color-canvas); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button, .button { -webkit-tap-highlight-color: var(--color-clear); user-select: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
button:active, .button:active { transform: translateY(1px); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 5px; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure, dl, dd { margin: var(--space-0); }
h1, h2, h3 { min-width: 0; overflow-wrap: break-word; }
h1, h2 { text-wrap: balance; }
code, pre, .technical { font-family: var(--font-code); font-size: .86em; font-variant-numeric: tabular-nums; }
.container { width: min(calc(100% - 80px), var(--container)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 2; top: var(--space-4); left: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--color-cyan); color: var(--color-canvas); transform: translateY(-160%); border-radius: var(--radius-control); }
.skip-link:focus { transform: none; }
.island { border: 1px solid var(--color-rule); background: var(--color-surface); border-radius: var(--radius-pill); }
.header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-5); padding-block: var(--space-6); }
.brand { justify-self: start; padding: var(--space-4) var(--space-5); }
.navigation { display: flex; align-items: center; padding: var(--space-1); }
.navigation a { display: flex; align-items: center; min-height: 44px; padding-inline: var(--space-5); font-size: 14px; color: var(--color-secondary); border-radius: var(--radius-pill); }
.language { display: flex; justify-self: end; padding: var(--space-1); }
.language button { min-height: 44px; min-width: 44px; padding: var(--space-0) var(--space-3); border: 1px solid var(--color-clear); background: var(--color-clear); border-radius: var(--radius-pill); color: var(--color-secondary); font-size: 13px; font-weight: 600; }
.language button[aria-pressed='true'] { color: var(--color-cyan); border-color: var(--color-cyan); }
.hero { padding-top: var(--space-12); padding-bottom: var(--space-8); }
.hero__heading { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); align-items: end; gap: var(--space-12); margin-bottom: var(--space-12); }
h1 { font-size: clamp(36px, 4.6vw, 66px); font-weight: 600; line-height: 1.11; letter-spacing: -.052em; }
h1 span { display: block; }
.hero__intro p { color: var(--color-secondary); max-width: 34ch; font-size: 16px; line-height: 1.6; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: var(--space-5); padding: var(--space-3) var(--space-5); border-radius: var(--radius-control); background: var(--color-cyan); color: var(--color-canvas); font-size: 14px; font-weight: 600; }
.preview { scroll-margin-top: var(--space-6); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); background: var(--color-surface); overflow: clip; }
.preview__caption { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-rule); font-size: 14px; font-weight: 500; }
.preview__disclaimer { color: var(--color-muted); font-size: 12px; font-weight: 400; }
.preview__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.event-stream { padding: var(--space-6); border-right: 1px solid var(--color-rule); }
.event-stream__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 13px; color: var(--color-secondary); }
.event-stream__heading .technical { color: var(--color-cyan); }
.events { list-style: none; margin: var(--space-5) var(--space-0); padding: var(--space-0); }
.events li { display: grid; grid-template-columns: 64px 48px minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: 49px; border-bottom: 1px solid var(--color-rule); font-size: 12px; }
.events time { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.events__type { color: var(--color-cyan); font-family: var(--font-code); }
.events code { overflow-wrap: anywhere; font-size: 11px; }
.events .events__match { color: var(--color-red); border-bottom-color: var(--color-match-rule); }
.events__match .events__type { color: var(--color-red); }
.event-stream__foot { display: flex; gap: var(--space-2); align-items: center; color: var(--color-muted); font-size: 12px; }
.connection-mark { display: block; flex: 0 0 14px; height: 8px; border-left: 2px solid var(--color-cyan); border-bottom: 2px solid var(--color-cyan); }
.investigation { padding: var(--space-5) var(--space-6) var(--space-6); }
.view-switch { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--color-rule); }
.view-switch button { min-height: 44px; padding: var(--space-0); border: 0; border-bottom: 2px solid var(--color-clear); background: var(--color-clear); color: var(--color-muted); font-size: 13px; }
.view-switch button[aria-pressed='true'] { color: var(--color-ink); border-bottom-color: var(--color-cyan); }
.investigation__panel { min-height: 249px; padding-top: var(--space-5); }
.match-label { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--color-red); font-size: 12px; }
.match-label__symbol { display: inline-flex; justify-content: center; align-items: center; width: 17px; height: 17px; border: 1px solid var(--color-red); border-radius: 50%; font-weight: 600; line-height: 1; }
.indicator { font-family: var(--font-code); font-size: clamp(19px, 2vw, 26px); font-weight: 500; line-height: 1.4; letter-spacing: -.04em; }
.evidence { display: grid; gap: var(--space-3); margin-top: var(--space-6); font-size: 12px; }
.evidence > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--space-3); }
.evidence dt { color: var(--color-muted); }
.evidence code { font-size: 11px; }
.panel-title { font-size: 17px; font-weight: 500; line-height: 1.4; }
.session-graph { display: flex; align-items: center; margin-block: var(--space-6); }
.session-graph__node { display: grid; gap: var(--space-2); min-width: 0; }
.session-graph__node span { font-size: 12px; color: var(--color-secondary); overflow-wrap: anywhere; }
.session-graph__node code { color: var(--color-cyan); font-size: 11px; }
.session-graph__edge { display: flex; align-items: center; flex: 1; min-width: 40px; margin-inline: var(--space-3); border-top: 1px solid var(--color-purple); }
.session-graph__edge span { margin-top: var(--space-2); font-size: 10px; color: var(--color-muted); }
.panel-note { color: var(--color-secondary); font-size: 12px; max-width: 55ch; }
.raw-event { margin-top: var(--space-4); margin-bottom: var(--space-0); color: var(--color-cyan); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.8; }
.raw-event code { font-size: inherit; }
.hero__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-5); color: var(--color-muted); font-size: 12px; }
.hero__foot > span { flex-shrink: 0; color: var(--color-secondary); }
.about { margin-top: var(--space-16); background: var(--color-light); color: var(--color-light-ink); }
.about__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); padding-block: var(--space-24); }
h2 { font-size: clamp(32px, 3.5vw, 48px); font-weight: 550; line-height: 1.14; letter-spacing: -.04em; }
.about__intro h2 { max-width: 15ch; }
.about__intro > p { margin-top: var(--space-6); max-width: 45ch; color: var(--color-light-secondary); }
.protocols { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-10); font-size: 13px; color: var(--color-light-secondary); }
.protocols span { font-family: var(--font-code); }
.capabilities { display: grid; }
.capabilities > div { padding-block: var(--space-6); border-top: 1px solid var(--color-light-rule); }
.capabilities > div:first-child { padding-top: var(--space-0); border-top: 0; }
.capabilities > div:last-child { padding-bottom: var(--space-0); }
.capabilities dt { font-size: 20px; font-weight: 550; letter-spacing: -.02em; }
.capabilities dd { margin-top: var(--space-2); color: var(--color-light-secondary); font-size: 15px; line-height: 1.65; max-width: 48ch; }
.architecture { padding-top: var(--space-24); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.section-heading p { max-width: 44ch; color: var(--color-secondary); }
.pipeline { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr) 110px minmax(0, 1fr); align-items: center; padding-block: var(--space-16); }
.pipeline__stage { display: grid; justify-items: center; text-align: center; padding: var(--space-6) var(--space-0); }
.pipeline__glyph { display: flex; align-items: center; justify-content: center; height: 52px; font-size: 36px; color: var(--color-secondary); letter-spacing: -.08em; }
.pipeline__stage h3 { margin-top: var(--space-5); font-size: 18px; font-weight: 550; }
.pipeline__stage p { margin-top: var(--space-1); font-size: 13px; color: var(--color-muted); }
.pipeline__stage--sato h3 { color: var(--color-cyan); }
.pipeline__link { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); color: var(--color-muted); font-size: 12px; }
.pipeline__link::after { content: ''; width: 100%; height: 1px; background: var(--color-rule); }
.architecture__foot { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: 12px; }
.roadmap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-24); padding-top: var(--space-24); padding-bottom: var(--space-24); }
.roadmap__intro > p { margin-top: var(--space-6); max-width: 36ch; color: var(--color-secondary); }
#roadmap-title { white-space: pre-line; }
.roadmap__list { list-style: none; margin: var(--space-0); padding: var(--space-0); }
.roadmap__list li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-6); border-top: 1px solid var(--color-rule); }
.roadmap__list li:first-child { padding-top: var(--space-0); border-top: 0; }
.roadmap__state { padding-top: var(--space-1); font-size: 12px; color: var(--color-muted); }
.roadmap__list li:first-child .roadmap__state { color: var(--color-cyan); }
.roadmap__list h3 { font-size: 18px; font-weight: 550; }
.roadmap__list p { margin-top: var(--space-2); max-width: 43ch; font-size: 14px; color: var(--color-secondary); }
.footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); border-top: 1px solid var(--color-rule); padding-top: var(--space-8); padding-bottom: max(var(--space-8), env(safe-area-inset-bottom)); }
.footer__brand { padding-block: var(--space-3); }
.footer p { color: var(--color-muted); font-size: 12px; }
.footer__top { display: flex; align-items: center; min-height: 44px; font-size: 13px; }

@media (hover: hover) and (pointer: fine) {
  .navigation a:hover, .view-switch button:hover, .footer__top:hover { color: var(--color-cyan); }
  .button:hover { background: var(--color-ink); }
  .language button:not([aria-pressed='true']):hover { color: var(--color-ink); }
}

@media (max-width: 1050px) {
  .hero__heading { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: var(--space-8); }
  .about__layout, .section-heading, .roadmap { gap: var(--space-12); }
  .events li { grid-template-columns: 56px 38px minmax(0, 1fr); gap: var(--space-2); }
  .event-stream, .investigation { padding-inline: var(--space-5); }
  .view-switch { gap: var(--space-4); }
  .view-switch button { font-size: 12px; }
  .pipeline { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .container { width: calc(100% - 40px); }
  .header { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); padding-top: max(var(--space-5), env(safe-area-inset-top)); padding-bottom: var(--space-0); }
  .brand { padding: var(--space-4); }
  .brand img { width: 108px; height: auto; }
  .language { grid-column: 2; grid-row: 1; }
  .navigation { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .navigation a { padding-inline: var(--space-5); font-size: 13px; }
  .hero { padding-top: var(--space-10); }
  .hero__heading { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-bottom: var(--space-8); }
  h1 { font-size: clamp(32px, 6.4vw, 48px); letter-spacing: -.045em; }
  .hero__intro { display: flex; align-items: center; gap: var(--space-5); }
  .hero__intro p { max-width: 36ch; font-size: 14px; }
  .button { flex-shrink: 0; margin-top: var(--space-0); }
  .preview__caption { align-items: start; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); }
  .preview__body { grid-template-columns: minmax(0, 1fr); }
  .event-stream { border-right: 0; border-bottom: 1px solid var(--color-rule); padding: var(--space-5); }
  .events { margin-top: var(--space-3); margin-bottom: var(--space-4); }
  .events li { grid-template-columns: 64px 48px minmax(0, 1fr); min-height: 42px; gap: var(--space-3); }
  .investigation { padding-top: var(--space-3); }
  .investigation__panel { min-height: 245px; }
  .hero__foot { align-items: start; flex-direction: column; gap: var(--space-2); }
  .about { margin-top: var(--space-8); }
  .about__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); padding-block: var(--space-16); }
  h2 { font-size: 36px; }
  .about__intro h2 { max-width: 19ch; }
  .about__intro > p { font-size: 15px; }
  .protocols { margin-top: var(--space-6); }
  .capabilities dt { font-size: 19px; }
  .architecture { padding-top: var(--space-16); }
  .section-heading { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .section-heading p { font-size: 15px; }
  .pipeline { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); padding-block: var(--space-10); }
  .pipeline__stage h3 { font-size: 15px; }
  .pipeline__stage p { font-size: 12px; }
  .pipeline__link { gap: var(--space-2); font-size: 10px; }
  .pipeline__link { writing-mode: vertical-rl; }
  .pipeline__link::after { width: 1px; height: 24px; }
  .architecture__foot { flex-direction: column; gap: var(--space-1); }
  .roadmap { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); padding-block: var(--space-16); }
  .roadmap__intro > p { max-width: 45ch; font-size: 15px; }
  .roadmap__list li { grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-4); }
  .roadmap__list h3 { font-size: 17px; }
  .footer { flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-5); }
  .footer p { order: 3; width: 100%; }
}

@media (max-width: 440px) {
  .hero__intro { align-items: start; flex-direction: column; }
  .navigation a { padding-inline: var(--space-4); }
  .events li { grid-template-columns: 56px 34px minmax(0, 1fr); gap: var(--space-2); }
  .events time { font-size: 11px; }
  .view-switch { justify-content: space-between; gap: var(--space-2); }
  .view-switch button { font-size: 11px; }
  .evidence > div { grid-template-columns: 62px minmax(0, 1fr); gap: var(--space-2); }
  .evidence { font-size: 11px; }
  .session-graph__node code { font-size: 10px; }
  .session-graph__node span { font-size: 11px; }
  .session-graph__edge { margin-inline: var(--space-2); min-width: 24px; }
  .session-graph__edge span { font-size: 9px; }
  .pipeline__stage h3 { font-size: 13px; }
  .pipeline__stage p { font-size: 11px; }
  .roadmap__list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  button:active, .button:active { transform: none; }
}