/* Shared structure for the S2 interpretations. Each page sets the tokens and its own composition. */
* { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--body-size, 17px)/1.65 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
a { color: var(--link, var(--hi)); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--hi); }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--hi); outline-offset: 4px; }
::selection { background: var(--hi); color: var(--bg); }
.wrap { width: min(1440px, calc(100% - 96px)); margin-inline: auto; }
@media (max-width: 700px) { .wrap { width: calc(100% - 32px); } body { font-size: 16px; } }

/* header + docking name */
.top { position: fixed; inset: 0 0 auto; z-index: 40; background: linear-gradient(var(--bg) 55%, transparent); }
.top .wrap { display: flex; justify-content: space-between; align-items: center; height: 74px; }
.dock-slot { width: var(--dock-w, 210px); height: 26px; }
.top nav { display: flex; gap: 28px; font: 14px var(--nav-font, var(--body)); }
.top nav a { color: var(--ink); text-decoration: none; }
.top nav a:hover { color: var(--hi); }
@media (max-width: 560px) { .top nav { gap: 14px; font-size: 12px; } .dock-slot { width: 120px; } }
.dock-name a { text-decoration: none; display: block; color: inherit; }
.dock-name .w { display: block; width: max-content; }
.dock-on .dock-name .w { position: fixed; top: 0; left: 0; transform-origin: 0 0; z-index: 41; will-change: transform; }

/* hero canvas */
.field { position: absolute; inset: 0; width: 100%; height: 100%; }
.typed::after { content: '▍'; color: var(--hi); animation: blink 1.1s steps(1) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }

/* mixer */
.mx-ratio { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mx-side { display: flex; flex-direction: column; }
.mx-side.b { text-align: right; }
.mx-side span { font-size: 14px; color: var(--dim); }
.mx-side b { font: var(--mx-num-weight, 700) clamp(52px, 5.4vw, 104px)/.95 var(--display); letter-spacing: -.03em; }
.mx-side.a b, .mx-label.a, .mx-sentence b.a { color: var(--a); }
.mx-side.b b, .mx-label.b, .mx-sentence b.b { color: var(--b); }
.mx-colon { font: 300 clamp(36px, 3.6vw, 70px) var(--display); color: var(--dim); }
.mx-slider { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font-size: 13px; color: var(--dim); margin: 16px 0 24px; }
.mx-slider input { width: 100%; accent-color: var(--hi); height: 30px; cursor: ew-resize; }
.mx-lanes { display: grid; grid-template-columns: 8ch 1fr; row-gap: 8px; column-gap: 12px; align-items: center; font-size: 13px; }
.mx-lane { position: relative; height: 32px; border-bottom: 1px solid var(--faint); }
.mx-lane i { position: absolute; top: 4px; bottom: 4px; border-radius: var(--mx-radius, 2px); transition: left .5s cubic-bezier(.3,1,.4,1), width .5s cubic-bezier(.3,1,.4,1), opacity .3s; }
.mx-lane.a i { background: var(--a); } .mx-lane.b i { background: var(--b); }
.mx-axis { grid-column: 2; display: flex; justify-content: space-between; color: var(--dim); font-size: 12px; }
.mx-sentence { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .mx-lane i { transition: none; } }

/* diagrams */
.dg { display: block; width: 100%; height: auto; overflow: visible; font: 15px var(--diagram-font, var(--display)); }
.dg text { fill: var(--ink); } .dg text.sub { fill: var(--dim); font-size: 13px; } .dg text.note { fill: var(--dim); font-size: 12px; } .dg text.hl { fill: var(--hi); }
.dg rect { fill: none; stroke: var(--dim); stroke-width: 1.2; transition: stroke .35s, fill .35s; }
.dg rect.host { stroke: var(--faint); stroke-width: 1.5; }
.dg .ln { fill: none; stroke: var(--dim); stroke-width: 1.2; transition: stroke .35s; }
.dg .ln.dotted { stroke-dasharray: 2 5; }
.dg .ah { fill: var(--dim); }
.dg .step { cursor: default; }
.dg .step text { transition: fill .35s; }
.dg .step.on rect { stroke: var(--hi); fill: color-mix(in srgb, var(--hi) 10%, transparent); }
.dg .step.on text { fill: var(--hi); }
.dg .step.on .ln { stroke: var(--hi); }
.dg .pkt { fill: var(--hi); }
@media (prefers-reduced-motion: no-preference) { .dg .pkt { animation: pkt 2.8s ease-in-out infinite alternate; } }
@keyframes pkt { to { transform: translateX(100px); } }

/* gold chart */
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--faint); } .chart .tick { fill: var(--dim); font: 12px var(--body); }
@media (prefers-reduced-motion: no-preference) {
  .scroll-draw .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.6,0,.2,1); }
  .scroll-draw .area, .scroll-draw .end-dot { opacity: 0; transition: opacity .5s 2s; }
  .scroll-draw.in .draw { stroke-dashoffset: 0; } .scroll-draw.in .area { opacity: .1; } .scroll-draw.in .end-dot { opacity: 1; }
}

/* contact */
.contact { padding: 150px 0 110px; }
.contact .big { font: var(--contact-weight, 600) clamp(34px, 3.6vw, 60px)/1.1 var(--display); letter-spacing: -.02em; text-decoration: none; color: var(--hi); }
.contact .big span { display: inline-block; transition: transform .3s; }
.contact .big:hover span { transform: translate(5px, -5px); }
.contact .row { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; color: var(--dim); font-size: 14px; border-top: 1px solid var(--faint); padding-top: 18px; }
.contact .row a:first-child { margin-right: auto; }

/* prototype chrome */
.proto { position: fixed; right: 16px; bottom: 72px; z-index: 50; font: 12px system-ui, sans-serif; background: #000c; border: 1px solid #444; border-radius: 8px; padding: 7px 10px; color: #aaa; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; max-width: calc(100vw - 32px); }
.proto a { color: #eee; }
.proto button { font: 12px system-ui, sans-serif; background: none; color: #ddd; border: 1px solid #555; border-radius: 5px; padding: 2px 8px; cursor: pointer; }
.proto button[aria-pressed=true] { background: #eee; color: #111; }