:root { --ink:#071212; --paper:#edf3e9; --acid:#c8ff43; --cyan:#64e5d5; --line:rgba(237,243,233,.2); font-family:Arial,Helvetica,sans-serif; color-scheme:dark; }
* { box-sizing:border-box; }
html,body { min-width:320px; height:100%; min-height:100%; margin:0; }
body { overflow:hidden; color:var(--paper); background:radial-gradient(circle at 25% 0,#18302d 0,transparent 38%),#071212; }
a { color:inherit; }
.site-header,main { width:min(1500px,calc(100% - 40px)); margin:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); }
.brand,.site-header nav { display:flex; align-items:center; gap:14px; }
.brand { font-weight:800; text-decoration:none; }.brand img{width:34px;height:34px}.site-header nav a{color:#aac5bd;text-decoration:none;font-weight:700}.site-header nav a:hover{color:var(--cyan)}
main { display:flex; height:calc(100dvh - 72px); min-height:0; flex-direction:column; padding:22px 0 18px; }
.intro { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:36px; margin-bottom:18px; }
.intro h1 { margin:0; font-size:clamp(2.6rem,5vw,4.8rem); line-height:.84; letter-spacing:-.075em; }
.intro>p { max-width:540px; margin:0; color:#aac5bd; font-size:1.05rem; line-height:1.6; }
.eyebrow { margin:0 0 12px; color:var(--cyan); font:700 .7rem/1 ui-monospace,Consolas,monospace; letter-spacing:.15em; text-transform:uppercase; }
.laboratory { display:grid; min-height:0; flex:1 1 auto; grid-template-columns:minmax(0,1fr) 310px; border:2px solid var(--paper); background:#0a1616; box-shadow:9px 9px 0 var(--acid); }
.stage { position:relative; min-width:0; min-height:0; overflow:hidden; background:linear-gradient(rgba(100,229,213,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(100,229,213,.04) 1px,transparent 1px),#071212; background-size:28px 28px; }
canvas { display:block; width:100%; height:100%; min-height:0; cursor:crosshair; touch-action:none; }
.stage-hud { position:absolute; right:14px; bottom:12px; left:14px; display:flex; justify-content:space-between; gap:12px; pointer-events:none; color:#91aaa3; font:650 .65rem/1.3 ui-monospace,Consolas,monospace; letter-spacing:.06em; text-transform:uppercase; }
.controls { display:flex; min-height:0; flex-direction:column; gap:18px; padding:22px; border-left:2px solid var(--paper); background:#10201f; overflow-y:auto; overscroll-behavior:contain; }
.controls h2 { margin:0; font-size:2rem; letter-spacing:-.04em; }
.controls label:not(.check) { display:grid; gap:8px; }.controls label>span{display:flex;justify-content:space-between;font:700 .7rem/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}.controls output{color:var(--acid)}
input[type=range]{width:100%;accent-color:var(--acid)}select{width:100%;min-height:40px;padding:0 9px;border:1px solid var(--paper);border-radius:0;color:var(--paper);background:#071212;font:700 .8rem/1 ui-monospace,Consolas,monospace}
.social-controls{display:grid;gap:18px;padding-top:4px}.control-divider{margin:0;padding-top:16px;border-top:1px solid var(--line);color:var(--cyan);font:700 .66rem/1 ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}.social-controls label{display:grid;gap:8px}
.sow-chaos{min-height:42px;border:1px solid #ff956f;color:#ffb39a;background:rgba(255,92,59,.08);font-weight:800;cursor:pointer}.sow-chaos:hover,.sow-chaos:focus-visible{color:var(--ink);background:#ff956f}
.controls.is-classic .social-controls{display:none}
.controls.is-classic .preset-control{display:none}.control-group{border-top:1px solid var(--line);padding-top:14px}.control-group summary{color:var(--cyan);font:700 .7rem/1 ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.control-group[open] summary{margin-bottom:18px}.control-group label{display:grid;gap:8px;margin-top:16px}
.control-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }.control-actions button{min-height:42px;border:1px solid var(--paper);color:var(--paper);background:transparent;font-weight:800;cursor:pointer}.control-actions button:hover,.control-actions button:focus-visible{color:var(--ink);background:var(--acid)}
.credit { margin:auto 0 0; color:#91aaa3; font-size:.72rem; line-height:1.5; }.credit a{color:var(--cyan)}
@media(max-width:900px){body{height:auto;overflow:auto}main{height:auto;padding:32px 0}.intro{align-items:start;flex-direction:column}.laboratory{min-height:670px;grid-template-columns:1fr}.controls{border-top:2px solid var(--paper);border-left:0}.stage,canvas{min-height:60vh}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.control-heading,.control-actions,.credit{grid-column:1/-1}}
@media(max-width:580px){.site-header,main{width:min(100% - 24px,1500px)}.site-header{align-items:flex-start;flex-direction:column}.controls{grid-template-columns:1fr}.stage-hud{display:none}.laboratory{box-shadow:7px 7px 0 var(--acid)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}