:root{--bg:#0a0612;--pan:#140b22;--mag:#ff2bd6;--cy:#22f3ff;--y:#ffe14a;--tx:#e9defa;--dim:#7d6b99}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,#3a0d4f 0,transparent 60%),linear-gradient(transparent 60%,#1a0630),repeating-linear-gradient(90deg,#ff2bd608 0 1px,transparent 1px 40px),var(--bg);color:var(--tx);font-family:'IBM Plex Mono',monospace;min-height:100vh}
header{text-align:center;padding:28px 12px 8px}
h1{font-family:Monoton,cursive;font-weight:400;font-size:clamp(2.2rem,7vw,4.6rem);margin:0;color:#fff;text-shadow:0 0 12px var(--mag),0 0 30px var(--mag)}
.sub{font-weight:200;color:var(--cy);margin:6px 0 12px}
.pills{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.pill{border:1px solid var(--mag);padding:3px 12px;border-radius:99px;font-size:.75rem;letter-spacing:.15em;font-weight:700;color:var(--mag);box-shadow:0 0 10px #ff2bd655}
.pill.dim{border-color:var(--dim);color:var(--dim);box-shadow:none;font-weight:400}
main{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;padding:18px;max-width:1200px;margin:auto}
.panel{background:linear-gradient(160deg,#1b0f2e,var(--pan));border:1px solid #ff2bd633;border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:10px;animation:rise .7s both var(--d)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
h2{margin:0;font-weight:200;letter-spacing:.2em;text-transform:uppercase;font-size:1rem}
h2 span{font-weight:700;color:var(--y);margin-right:8px}
canvas{width:100%;background:#000;border:1px solid #22f3ff33;border-radius:3px;display:block}
#reality{aspect-ratio:1}
#film{height:32px;image-rendering:pixelated}
#recon{image-rendering:pixelated}
button{font:inherit;background:transparent;color:var(--cy);border:1px solid var(--cy);padding:7px 12px;border-radius:3px;cursor:pointer;transition:.15s}
button:hover{background:var(--cy);color:var(--bg);box-shadow:0 0 14px var(--cy)}
button:disabled{opacity:.4;pointer-events:none}
button.big{border-color:var(--mag);color:var(--mag);font-weight:700}
button.big:hover{background:var(--mag);color:#fff;box-shadow:0 0 18px var(--mag)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row button{flex:1}
label{display:flex;flex-direction:column;font-size:.75rem;color:var(--dim);gap:3px}
label.chk{flex-direction:row;align-items:center;color:var(--tx)}
input[type=range]{accent-color:var(--mag)}
input[type=number],select{background:#0006;color:var(--tx);border:1px solid #ffffff22;padding:5px;font:inherit}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mono{font-size:.8rem;color:var(--y)}
.legend{font-size:.7rem;color:var(--dim);display:flex;gap:6px;align-items:center}
.legend i{width:14px;height:3px;display:inline-block}.c1{background:var(--cy)}.c2{background:var(--mag)}
.log{height:110px;overflow:auto;font-size:.72rem;background:#0005;padding:6px;border-left:2px solid var(--y);color:#cbb8e8}
.log div{animation:rise .3s}
.tabs{display:flex}.tabs button{flex:1;border-radius:0}.tabs button.on{background:var(--mag);color:#fff;border-color:var(--mag)}
.dreamwrap{position:relative}
#dream{aspect-ratio:1;filter:saturate(1.3) drop-shadow(0 0 12px #ff2bd666)}
.crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0006 2px 3px),radial-gradient(ellipse,transparent 60%,#000a);border-radius:3px}
.sleep{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:1.2rem;letter-spacing:.2em;animation:breathe 3s infinite}
@keyframes breathe{50%{opacity:.3}}
#explore{aspect-ratio:1;cursor:crosshair;image-rendering:pixelated}
.hidden{display:none!important}
#touch{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:4px;touch-action:none;user-select:none}
.dpad button{padding:0;font-size:1.1rem}
.dpad button.act{background:var(--mag);color:#fff;border-color:var(--mag);box-shadow:0 0 14px var(--mag)}
.du{grid-area:1/2}.dl{grid-area:2/1}.dr{grid-area:2/3}.dd{grid-area:3/2}
.dpad .dc{grid-area:2/2;display:grid;place-items:center;text-align:center;font-size:.55rem;color:var(--dim);border-color:var(--dim);letter-spacing:.1em}
.dpad .dc.act{background:var(--y);color:#000;border-color:var(--y);box-shadow:0 0 10px var(--y)}
.keymap{flex:1;min-width:150px;font-size:.72rem;display:flex;flex-direction:column;gap:5px;color:var(--dim)}
.keymap div.act{color:var(--y)}
kbd{border:1px solid #ffffff33;border-radius:3px;padding:0 5px;margin-right:3px;color:var(--tx);font-family:inherit}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:9}
#toast div{background:var(--y);color:#000;padding:8px 16px;font-weight:700;border-radius:3px;animation:rise .3s}
footer{text-align:center;padding:24px;font-size:.75rem;color:var(--dim)}
footer a{color:var(--mag)}