:root{--bg:#07061a;--panel:rgba(20,16,52,.72);--pink:#ff2bd6;--cyan:#22f3ff;--yel:#ffe14d;--txt:#e8e4ff;--dim:#8a84b8}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,#3a0f5c 0%,transparent 55%),linear-gradient(180deg,#07061a,#0b0626 60%,#120430);color:var(--txt);font-family:'IBM Plex Mono',monospace;min-height:100vh;padding:14px}
body::before{content:"";position:fixed;inset:auto 0 0 0;height:40vh;background:linear-gradient(transparent,rgba(255,43,214,.08)),repeating-linear-gradient(90deg,rgba(34,243,255,.08) 0 1px,transparent 1px 60px);pointer-events:none;z-index:-1}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
h1{font-family:Monoton,cursive;font-weight:400;font-size:clamp(28px,6vw,64px);margin:0;background:linear-gradient(90deg,var(--pink),var(--cyan));-webkit-background-clip:text;color:transparent;letter-spacing:2px}
.tag{margin:4px 0 14px;color:var(--dim);font-weight:200}
.tag em{color:var(--yel)}
.hstats{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pill{padding:4px 12px;border-radius:99px;border:1px solid var(--cyan);color:var(--cyan);font-weight:700;letter-spacing:2px;font-size:12px}
.pill.TRAINING{border-color:var(--yel);color:var(--yel);animation:pulse 1s infinite}
.pill.DREAMING{border-color:var(--pink);color:var(--pink);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.45}}
.mono{font-family:'IBM Plex Mono',monospace}.dim{color:var(--dim)}.small{font-size:12px}.big{font-size:26px;font-weight:700;color:var(--yel)}
.panels,.deck{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
@media(max-width:980px){.panels,.deck{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid rgba(34,243,255,.18);border-radius:14px;padding:14px;backdrop-filter:blur(6px);transition:box-shadow .3s;animation:rise .6s both}
.panel:nth-child(2){animation-delay:.1s}.panel:nth-child(3){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.panel:hover{box-shadow:0 0 24px rgba(255,43,214,.18)}
h2{margin:0 0 10px;font-size:15px;text-transform:uppercase;letter-spacing:3px}
h2 b{color:var(--pink);margin-right:6px}h2 small{color:var(--dim);font-weight:200;text-transform:none;letter-spacing:0}
h3{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin:14px 0 6px}
.screen{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#000}
.screen canvas,#scene-container canvas{width:100%!important;height:100%!important;display:block;image-rendering:pixelated}
#scene-container{width:100%;height:100%}
.crt::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);pointer-events:none;box-shadow:inset 0 0 60px rgba(0,0,0,.8)}
.offline{position:absolute;inset:0;display:none;place-items:center;text-align:center;background:rgba(7,6,26,.92);color:var(--pink);font-family:Monoton;font-size:22px}
.offline small{font-family:'IBM Plex Mono';font-size:12px;color:var(--dim)}
.dreaming .offline{display:grid}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.tog{display:flex;gap:6px;align-items:center;cursor:pointer}
.bigtog{font-size:16px;color:var(--pink);font-weight:700}
input[type=checkbox]{accent-color:var(--pink);width:18px;height:18px}
input[type=range]{accent-color:var(--cyan);width:100px;vertical-align:middle}
input[type=number],select{background:#0d0a2a;border:1px solid rgba(34,243,255,.3);color:var(--txt);border-radius:6px;padding:4px 6px;font-family:inherit;width:80px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:11px;color:var(--dim)}
.grid4 input,.grid4 select{width:100%;margin-top:2px}
button{font-family:inherit;font-weight:700;border-radius:8px;padding:8px 14px;border:none;cursor:pointer;font-size:13px;transition:transform .1s}
button:active{transform:scale(.95)}
button.hot{background:linear-gradient(90deg,var(--pink),#ff7a3d);color:#fff;box-shadow:0 0 18px rgba(255,43,214,.4)}
button.ghost{background:transparent;color:var(--cyan);border:1px solid rgba(34,243,255,.4)}
button.ghost:hover{background:rgba(34,243,255,.1)}
.meter{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);flex:1}
.meter i{flex:1;height:8px;background:#1c1745;border-radius:4px;overflow:hidden}
.meter b{display:block;height:100%;width:0;background:var(--cyan);transition:width .2s}
.meter i.hot b{background:linear-gradient(90deg,var(--yel),var(--pink))}
.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.diffs figure{margin:0;text-align:center}
.diffs canvas{width:100%;image-rendering:pixelated;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:#000}
figcaption{font-size:11px;color:var(--dim)}
.pix{image-rendering:pixelated}.wide{width:100%;display:block;margin-top:8px;border-radius:6px;background:rgba(0,0,0,.3)}
.arch{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.arch span{font-size:10px;padding:3px 6px;border-radius:4px;background:rgba(255,43,214,.12);border-left:2px solid var(--pink)}
.arch span:nth-child(n+5){background:rgba(34,243,255,.1);border-color:var(--cyan)}
#quip{color:var(--yel);min-height:1.4em}
.pad{display:none;justify-content:center;gap:10px;margin-bottom:14px;position:sticky;bottom:8px;z-index:5}
.pad button{width:64px;height:54px;font-size:22px;background:rgba(255,43,214,.25);color:#fff;border:1px solid var(--pink)}
@media(pointer:coarse){.pad{display:flex}}
footer{text-align:center;color:var(--dim);font-size:12px;padding:20px}
footer a{color:var(--pink)}