:root { color-scheme: dark; --ink: #f3e6d8; --dim: #b89c86; --accent: #f0a640; font: 11px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.04em; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1b110b; color: var(--ink); overflow: hidden; }
canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; cursor: grab; }
canvas:active { cursor: grabbing; }
header { position: fixed; left: 28px; top: 24px; max-width: 380px; pointer-events: none; text-shadow: 0 1px 2px #0008; }
h1 { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.3em; color: var(--accent); font-weight: 600; }
header p { margin: 0; color: var(--ink); opacity: 0.85; text-transform: uppercase; }
aside { position: fixed; right: 24px; top: 24px; width: 230px; display: grid; gap: 10px; padding: 14px; background: #0e0805a8; border: 1px solid #f0a64033; backdrop-filter: blur(6px); }
label { display: grid; gap: 4px; text-transform: uppercase; color: var(--dim); }
input[type=range] { width: 100%; accent-color: var(--accent); }
.row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
button { flex: 1; font: inherit; letter-spacing: inherit; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid #f0a64055; padding: 6px 8px; cursor: pointer; }
button:hover, button.on { background: #f0a64026; border-color: var(--accent); color: var(--accent); }
#specimen { color: var(--dim); white-space: nowrap; }
footer { position: fixed; left: 28px; right: 28px; bottom: 18px; display: flex; gap: 24px; color: var(--dim); text-transform: uppercase; pointer-events: none; text-shadow: 0 1px 2px #0008; }
#fps { margin-left: auto; }
#fallback { position: fixed; inset: 40% 20% auto; text-align: center; color: var(--ink); }
body.clean header, body.clean aside, body.clean footer { display: none; }