/* NewMind — Brickyard layer: tokens, topbar, buttons, the explainer figure.
   Light = sky paper, dark = night navy. Category colours are the voxel materials. */
:root { --bg: var(--page); --bg-alt: #fff; --bg-elev: var(--page-2); --border: var(--line); --border-strong: var(--line-2);
  --text: var(--ink); --text-dim: var(--ink-3); --accent: var(--diamond-ink); --accent-dim: var(--diamond-side); --accent-btn: var(--diamond-side); --accent-wash: var(--diamond-soft);
  --danger: var(--bad); --success: var(--grass-ink); --warning: var(--sand-ink);
  --world: var(--water); --economy: var(--sand); --science: var(--grass); --tech: var(--amethyst); --politics: var(--lava); --sports: var(--diamond); --health: var(--rose); --entertainment: var(--sand-side);
  --font-display: var(--display); --font-mono: var(--font-ui); --radius: 4px; --shadow: var(--shadow-soft); --graph-edge: rgba(12,21,53,.28); --graph-halo: rgba(23,195,176,.18); }
[data-theme="dark"] { --page: #0b1230; --bg: #0b1230; --bg-alt: #121a42; --bg-elev: #19235a; --border: rgba(234,240,255,.14); --border-strong: rgba(234,240,255,.28);
  --text: #eaf0ff; --text-dim: #a3b2dc; --accent: var(--diamond-top); --accent-dim: var(--diamond); --accent-btn: var(--diamond-side); --accent-wash: rgba(23,195,176,.16);
  --danger: #ff8d7f; --success: #8be05a; --warning: var(--sand-top);
  --world: var(--water-top); --economy: var(--sand-top); --science: var(--grass-top); --tech: var(--amethyst-top); --politics: var(--lava-top); --sports: var(--diamond-top); --health: var(--rose-top); --entertainment: var(--sand);
  --graph-edge: rgba(234,240,255,.22); --graph-halo: rgba(124,240,224,.18); --shadow: 0 18px 48px rgba(0,0,0,.4); }
body { font-family: var(--font-ui); background: var(--bg); color: var(--text); }
:focus-visible { outline: 3px solid var(--diamond); outline-offset: 2px; }
.topbar { background: var(--bg-alt); border-bottom: 3px solid var(--diamond); }
.brand .title { font: 900 1.15rem/1 var(--display); font-stretch: 122%; letter-spacing: -0.02em; }
.brand .logo { color: var(--diamond); }
.tagline { color: var(--text-dim); font-weight: 600; }
.btn { font-family: var(--font-ui); font-weight: 800; border-radius: 0; border: 2px solid var(--text); background: var(--bg-alt); color: var(--text); transition: transform 0.14s var(--ease), box-shadow 0.14s, background 0.14s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--diamond); background: var(--bg-alt); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--diamond); }
.btn-primary { background: var(--diamond); color: var(--ink); border-color: var(--text); }
.btn-primary:hover { background: var(--diamond); }
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { border-color: var(--text); }
h1, h2, h3, h4 { font-family: var(--display); font-stretch: 112%; letter-spacing: -0.01em; }
.nm-flow h3 { font: 850 0.95rem/1.2 var(--display) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important; }
.nm-flow .nm-node, .nm-flow .nm-edge { animation: none !important; opacity: 1 !important; }
.nm-flow .nm-rect { fill: var(--bg-alt) !important; stroke: var(--text) !important; stroke-width: 2.5 !important; rx: 0; }
.nm-flow .nm-node line { display: none; }
.nm-flow .nm-title { font-family: var(--display) !important; font-stretch: 112%; font-weight: 850 !important; }
.nm-flow .nm-sub { font-family: var(--font-ui) !important; font-weight: 600; font-size: 11.5px !important; }
.nm-flow .nm-f1 .nm-rect { fill: var(--water-soft) !important; } .nm-flow .nm-f2 .nm-rect { fill: var(--sand-soft) !important; }
.nm-flow .nm-f3 .nm-rect { fill: var(--diamond) !important; } .nm-flow .nm-f3 text { fill: var(--ink) !important; } .nm-flow .nm-f4 .nm-rect { fill: var(--grass-soft) !important; }
[data-theme="dark"] .nm-flow .nm-f1 .nm-rect, [data-theme="dark"] .nm-flow .nm-f2 .nm-rect, [data-theme="dark"] .nm-flow .nm-f4 .nm-rect { fill: var(--bg-elev) !important; }
.nm-flow .nm-pkt { fill: var(--diamond) !important; }
html, body { overflow-x: clip; }