:root { color-scheme: dark; --ink:#f2f2ee; --muted:#8b8e99; --line:rgba(255,255,255,.11); --panel:rgba(10,11,16,.9); --accent:#91ffd9; }
* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#08090d; color:var(--ink); font-family:Inter,"Segoe UI",system-ui,sans-serif; }
button, input { font:inherit; }
button { color:inherit; }
#art { position:fixed; inset:0; width:100%; height:100%; cursor:crosshair; }
#art::selection { background:transparent; }
.topbar { position:fixed; z-index:4; top:0; left:0; right:0; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(8,9,13,.8),transparent); pointer-events:none; }
.topbar > * { pointer-events:auto; }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:11px; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(255,255,255,.3); border-radius:50%; font-family:Consolas,monospace; font-weight:500; }
.brand b { display:block; font-size:14px; line-height:1; letter-spacing:-.02em; }
.brand small { display:block; margin-top:5px; color:var(--muted); font:10px Consolas,monospace; letter-spacing:.16em; text-transform:uppercase; }
.stats { display:flex; gap:24px; color:#a7a9b0; font:10px Consolas,monospace; letter-spacing:.12em; }
.stats span { display:flex; align-items:center; gap:8px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.icon-button { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:rgba(10,11,16,.5); display:grid; place-items:center; cursor:pointer; transition:.2s ease; }
.icon-button:hover { border-color:rgba(255,255,255,.35); transform:rotate(4deg); }
#togglePanel { display:none; }
.panel { position:fixed; z-index:3; top:76px; right:0; bottom:0; width:390px; padding:34px 34px 26px; overflow:auto; border-left:1px solid var(--line); background:var(--panel); backdrop-filter:blur(24px); box-shadow:-32px 0 80px rgba(0,0,0,.18); }
.panel-heading { display:flex; justify-content:space-between; }
.eyebrow, .section-label, .hint, output, .canvas-note { font-family:Consolas,monospace; }
.eyebrow { margin:0 0 12px; color:var(--accent); font-size:10px; letter-spacing:.2em; }
h1 { margin:0; font-size:42px; line-height:.96; letter-spacing:-.055em; font-weight:500; }
h1 em { color:var(--accent); font-family:Georgia,serif; font-weight:400; }
section { margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
.section-label { margin-bottom:18px; color:#b5b7be; font-size:10px; letter-spacing:.17em; text-transform:uppercase; }
.section-label span { margin-right:12px; color:#565963; }
.presets { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.presets button { display:flex; align-items:center; gap:9px; padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.025); font-size:12px; cursor:pointer; transition:.2s ease; }
.presets button:hover, .presets button.active { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08); }
.presets i { width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); }
label { display:grid; grid-template-columns:1fr auto; gap:9px; margin:16px 0; color:#d5d6da; font-size:12px; }
output { color:var(--muted); font-size:10px; }
input[type=range] { grid-column:1 / -1; width:100%; height:3px; appearance:none; border-radius:2px; background:rgba(255,255,255,.14); accent-color:var(--accent); }
input[type=range]::-webkit-slider-thumb { appearance:none; width:13px; height:13px; border:2px solid #0b0c10; border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--accent); cursor:pointer; }
.seed-row { display:grid; grid-template-columns:1fr 38px; gap:9px; }
.seed-row input { width:100%; border:1px solid var(--line); border-radius:9px; padding:0 13px; color:#dedfe2; background:rgba(255,255,255,.035); font:11px Consolas,monospace; outline:none; }
.seed-row input:focus { border-color:var(--accent); }
.hint { margin:13px 0 0; color:#6f727c; font-size:9px; line-height:1.6; }
.actions { display:grid; grid-template-columns:.8fr 1.4fr; gap:9px; margin-top:28px; }
.actions button { min-height:45px; border-radius:10px; cursor:pointer; font-size:12px; font-weight:600; }
.secondary { border:1px solid var(--line); background:transparent; }
.primary { border:0; color:#07100e; background:var(--accent); }
.primary span { margin-left:8px; }
.canvas-note { position:fixed; z-index:2; left:28px; bottom:24px; color:#656873; font-size:9px; letter-spacing:.15em; }
.mobile-only { display:none; }
@media (max-width:720px) {
  .stats { display:none; }
  #togglePanel { display:grid; }
  .panel { top:0; width:min(92vw,390px); z-index:6; transform:translateX(105%); transition:transform .3s ease; }
  .panel.open { transform:translateX(0); }
  .mobile-only { display:grid; }
  .topbar { height:66px; padding:0 18px; }
  .canvas-note { left:18px; bottom:18px; }
}
@media (prefers-reduced-motion:reduce) { .panel, button { transition:none!important; } }