:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#d8f6f0;background:#030b17}*{box-sizing:border-box}body{margin:0;display:grid;grid-template-rows:auto minmax(260px,1fr) auto;height:100dvh;overflow:hidden}header{padding:22px 28px 0;pointer-events:none}.eyebrow{font:10px monospace;letter-spacing:.22em;color:#7fa99f}h1{font-weight:450;font-size:clamp(21px,3vw,35px);letter-spacing:-.04em;margin:9px 0}p{font-size:12px;color:#8aa5ae;line-height:1.5;margin:6px 0}#view{min-height:0;position:relative;touch-action:none}canvas{display:block;width:100%;height:100%}footer{padding:12px 28px 18px;border-top:1px solid #193440;background:#06121d}.controls{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}button,select{background:#102b37;border:1px solid #34525a;color:#d8f6f0;border-radius:8px;min-height:40px;padding:8px 13px;font:12px system-ui;touch-action:none}button:active,button[aria-pressed=true]{background:#215b5b;border-color:#80ffe4}#screen{color:#99ffe2}#readout{font:11px monospace;color:#9df2d9}#media{font:10px monospace;color:#a1b2c0;margin-top:6px}.hint{font-size:10px}@media(max-width:500px){header{padding:16px 18px 0}footer{padding:10px 16px 14px}button,select{padding:7px 10px;min-height:38px}h1{font-size:24px}header p{max-width:320px;font-size:11px}.hint{font-size:9px}body{grid-template-rows:auto minmax(220px,1fr) auto}}

.density{display:flex;align-items:center;gap:6px;font-size:12px;color:#d8f6f0}.density input{width:80px;accent-color:#80ffe4}header p{color:#b1c9d0}.eyebrow{color:#a4cfc4}