@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap");
/* Niko Vijay — brand tokens (draft v0.1) */
:root {
  --ground: #F4F1EA; --ground-2: #ECE8DE; --ink: #151513; --ink-2: #4F4C45; --muted: #8A857A; --line: #DED9CD;
  --accent: #1F9D55; --accent-text: #0F7F44; --accent-bright: #2FCB75; --plate: #151513;
  --th: #D8D3C8; --th-fig: #C4BEB1;
  --sans: Geist, Inter, system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --serif: "Instrument Serif", Georgia, serif;
}
.dark { --ground: #111110; --ground-2: #1A1A18; --ink: #F1EEE6; --ink-2: #B9B4A9; --muted: #7D786E; --line: #2A2926;
  --accent: #1F9D55; --accent-text: #2FCB75; --th: #2B2A27; --th-fig: #3A3935; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
/* hairline figures take the brand palette: plate = ground, lit strokes = ink */
[data-hairline] { --hairline-plate: var(--ground); --hairline-hi: var(--accent); --hairline-edge: #85806F; --hairline-mid: #ABA595; --hairline-lo: #D2CCBE; --hairline-stroke: 1.4; }
.dark [data-hairline] { --hairline-hi: var(--accent); --hairline-edge: #8E897E; --hairline-mid: #57544D; --hairline-lo: #2E2D29; }
/* engine conventions: one numbered mono label per beat, number in the accent */
.label { position: absolute; font: 500 17px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
.label b { color: var(--accent-text); font-weight: 600; margin-right: 14px; }
.eyebrow { font: 500 15px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.eyebrow b { color: var(--accent-text); font-weight: 600; }
/* talking-head placeholder: never a real face */
.th { position: absolute; background: var(--th); overflow: hidden; }
.th svg { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.th .tag { position: absolute; left: 50%; transform: translateX(-50%); font: 500 15px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); background: var(--ground); padding: 8px 14px; border-radius: 4px; white-space: nowrap; }
/* hairline fades strokes with CSS transitions on wall time; in a frame render the timeline owns time */
[data-hairline] svg * { transition: none !important; }

/* N logo: monochrome only, takes the ink of its ground */
.nmark { position: absolute; color: var(--ink); line-height: 0; }