/* TITAIB visual system: neutral graphite surfaces, precise green signals. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --ui-canvas:#0a0e10; --ui-canvas-raised:#141b1e;
  --ui-surface:#1c272a; --ui-surface-raised:#253135; --ui-surface-hover:#2c3a3e;
  --ui-border:#344247; --ui-border-strong:#52636a;
  --ui-text-strong:#ecf2ee; --ui-text:#e4ece7; --ui-text-soft:#cbd8cf; --ui-text-dim:#b4c4b8; --ui-text-muted:#90a298;
  --ui-accent:#67e99b; --ui-accent-hover:#8af3b2; --ui-accent-ink:#092015;
  --ui-success:#67e99b; --ui-warning:#edbf6b; --ui-danger:#f28d86;
  --bg:var(--ui-canvas); --bg-soft:var(--ui-canvas-raised);
  --panel:var(--ui-surface); --panel-2:var(--ui-surface-raised); --panel-3:var(--ui-surface-hover);
  --line:var(--ui-border); --line-strong:var(--ui-border-strong);
  --ink-strong:var(--ui-text-strong); --ink:var(--ui-text); --ink-soft:var(--ui-text-soft); --ink-dim:var(--ui-text-dim); --ink-muted:var(--ui-text-muted);
  --accent:var(--ui-accent); --accent-hover:var(--ui-accent-hover); --accent-2:var(--ui-accent);
  --accent-soft:color-mix(in srgb,var(--ui-accent) 11%,transparent); --accent-glow:transparent; --button-ink:var(--ui-accent-ink);
  --ok:var(--ui-success); --warn:var(--ui-warning); --bad:var(--ui-danger);
  --ok-bg:color-mix(in srgb,var(--ui-success) 10%,transparent); --warn-bg:color-mix(in srgb,var(--ui-warning) 10%,transparent); --bad-bg:color-mix(in srgb,var(--ui-danger) 10%,transparent); --ok-glow:transparent;
  --text:var(--ink); --muted:var(--ink-dim);
  --radius-lg:10px; --radius-md:7px; --radius-sm:5px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"Berkeley Mono","Cascadia Code","SFMono-Regular",Consolas,monospace;
  --shadow-sm:none; --shadow-md:0 10px 28px #00000030; --shadow-lg:0 24px 64px #0000005c;
}
:root[data-theme="light"] {
  color-scheme:light;
  --ui-canvas:#eaf0f1; --ui-canvas-raised:#f2f5f5;
  --ui-surface:#ffffff; --ui-surface-raised:#e9f0ef; --ui-surface-hover:#dde8e6;
  --ui-border:#d2dddc; --ui-border-strong:#aabdb9;
  --ui-text-strong:#14231c; --ui-text:#14231c; --ui-text-soft:#344b3d; --ui-text-dim:#486451; --ui-text-muted:#536d5b;
  --ui-accent:#147a43; --ui-accent-hover:#0d6335; --ui-accent-ink:#ffffff;
  --ui-success:#147a43; --ui-warning:#986115; --ui-danger:#b73e38;
  --shadow-md:0 10px 28px #233c2b1c; --shadow-lg:0 24px 64px #233c2b33;
}
* {box-sizing:border-box; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
html {background:var(--bg); scroll-padding-top:80px}
body {margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased}
body {font-variant-numeric:tabular-nums}
button,input,textarea,select {font:inherit}
button,a,input,textarea,select,summary {touch-action:manipulation}
button {cursor:pointer}
a {color:inherit; text-decoration:none}
button:disabled {cursor:not-allowed; opacity:.5}
[hidden] {display:none !important}
:focus-visible {outline:2px solid var(--accent); outline-offset:3px}
::selection {background:var(--accent); color:var(--button-ink)}
.site-logo {display:inline-flex; align-items:center; gap:10px; color:var(--ink); font:700 19px/1 var(--sans); letter-spacing:-.6px; flex-shrink:0}
.site-logo svg {width:25px; height:25px; color:var(--accent)}
.site-logo:hover {color:var(--ink); text-decoration:none}
.theme-toggle {display:inline-flex; justify-content:center; align-items:center; flex-shrink:0; width:38px; min-height:38px; padding:9px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--ink-soft); box-shadow:none}
.theme-toggle:hover {background:var(--panel-2); color:var(--ink); transform:none; box-shadow:none}
.theme-toggle svg {width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.skip-link {position:fixed; top:12px; left:16px; padding:12px 20px; z-index:100; background:var(--accent); color:var(--button-ink); clip-path:inset(100%); pointer-events:none}
.skip-link:focus {clip-path:none; pointer-events:auto}
.eyebrow {font:500 11px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim)}
.text-link {color:var(--ink); font-weight:500}
.text-link:hover {color:var(--accent)}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto !important; animation:none !important; transition:none !important}}