@font-face { font-family: Inter; src: url('/fonts/inter-variable.woff2'); font-weight: 100 900; }
@font-face { font-family: Quattro; src: url('/fonts/ia-writer-quattro-variable.ttf'); font-weight: 400 700; }
:root { color-scheme: dark; --paper: #080a0f; --panel: #10151ef2; --ink: #e6edfa; --muted: #a5b1c8; --accent: #82b4ff; --line: #ffffff30; }
:root[data-theme='light'] { color-scheme: light; --paper: #f5f7fc; --panel: #ffffffed; --ink: #15243c; --muted: #52637e; --accent: #0046b0; --line: #193e7040; }
html, body { font-family: Inter, sans-serif; background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; }
button, select { color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; min-height: 40px; }
button { cursor: pointer; }
input[type='range'] { accent-color: var(--accent); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }