:root{--bg:#05060f;--cy:#00f0ff;--mg:#ff2bd6;--lm:#b6ff3b;--glass:rgba(10,16,40,.55);--line:rgba(0,240,255,.25)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:#cfefff;font-family:'JetBrains Mono',monospace;font-size:12px}
body{background:radial-gradient(ellipse at 20% 0%,#1a0b3a 0%,transparent 50%),radial-gradient(ellipse at 100% 100%,#002a33 0%,transparent 50%),var(--bg)}
button{font-family:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--cy);background:rgba(0,240,255,.06);border:1px solid var(--line);padding:7px 10px;cursor:pointer;transition:.15s}
button:hover{box-shadow:0 0 12px var(--cy);transform:translate(1px,-1px)}
button.hot{color:var(--bg);background:var(--cy);font-weight:800}
#app{display:grid;height:100%;grid-template-columns:230px 1fr 230px;grid-template-rows:auto 1fr auto auto;grid-template-areas:"h h h" "r s c" "t t t" "f f f";gap:8px;padding:8px}
header{grid-area:h;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 12px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px)}
h1{font-family:'Audiowide',sans-serif;font-size:22px;color:var(--cy);text-shadow:0 0 10px var(--cy);animation:flick 4s infinite}
h1 span{color:var(--mg);text-shadow:0 0 10px var(--mg)}h1 b{color:var(--lm);font-weight:400}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.4}95%{opacity:1}96%{opacity:.6}}
.readout{font-size:10px;opacity:.7;letter-spacing:.1em;flex:1}
#ink{color:var(--lm)}
.cmds{display:flex;gap:6px;flex-wrap:wrap}
.mob{display:none}
#rack{grid-area:r;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.tool{background:var(--glass);border:1px solid var(--line);padding:8px 10px;cursor:pointer;transition:.15s;position:relative;animation:in .4s both}
.tool:hover{border-color:var(--cy)}
.tool .n{font-family:'Audiowide';color:#fff;font-size:12px}.tool .y{float:right;color:var(--mg);font-size:9px}
.tool .d{font-size:9.5px;opacity:.6;margin-top:3px;font-weight:200}
.tool .k{position:absolute;left:-1px;top:-1px;font-size:8px;background:var(--line);padding:0 4px}
.tool.on{border-color:var(--cy);box-shadow:0 0 14px rgba(0,240,255,.5),inset 0 0 20px rgba(0,240,255,.15);animation:pulse 1.5s infinite}
@keyframes pulse{50%{box-shadow:0 0 4px rgba(0,240,255,.3),inset 0 0 8px rgba(0,240,255,.1)}}
@keyframes in{from{opacity:0;transform:translateX(-20px)}}
#stage{grid-area:s;position:relative;border:1px solid var(--line);overflow:hidden;touch-action:none}
#stage canvas{position:absolute;inset:0;width:100%;height:100%}
#overlay{cursor:none}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.br{position:absolute;width:18px;height:18px;border:2px solid var(--cy);pointer-events:none}
.tl{top:6px;left:6px;border-right:0;border-bottom:0}.tr{top:6px;right:6px;border-left:0;border-bottom:0}
.bl{bottom:6px;left:6px;border-right:0;border-top:0}.bot{bottom:6px;right:6px;border-left:0;border-top:0}
#coords{position:absolute;right:30px;bottom:10px;font-size:10px;color:var(--cy);opacity:.7;pointer-events:none}
#console{grid-area:c;overflow-y:auto;background:var(--glass);border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:14px;backdrop-filter:blur(8px)}
.sec label{display:block;font-size:10px;letter-spacing:.15em;color:var(--mg);margin-bottom:6px}
.sec.row{display:flex;justify-content:space-between;align-items:center}.sec.row label{margin:0}
input[type=range]{width:100%;accent-color:var(--cy)}
.huebar{-webkit-appearance:none;height:14px;background:linear-gradient(90deg,red,#ff0,lime,cyan,blue,#f0f,red);border:1px solid var(--line)}
.huebar::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:18px;background:#fff;box-shadow:0 0 6px #fff}
#nm{margin:6px 0;font-size:10px}
#swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.sw{height:26px;border:1px solid var(--line);cursor:pointer;font-size:7px;display:flex;align-items:flex-end;padding:2px;color:#fff;text-shadow:0 0 2px #000}
.seg{display:flex;flex-wrap:wrap;gap:3px}.seg button{flex:1;padding:6px 4px;font-size:9px}
.seg button.on,.tog.on{background:var(--cy);color:var(--bg)}
#dreamPrompt{width:100%;background:#000a;border:1px solid var(--line);color:#fff;padding:7px;font-family:inherit;margin-bottom:5px}
.full{width:100%}#dreamStatus{font-size:10px;margin-top:5px;color:var(--lm)}
#ticker{grid-area:t;background:#000c;border:1px solid var(--mg);padding:8px 12px;color:var(--lm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ticker b{color:var(--mg)}.caret{animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}
footer{grid-area:f;text-align:center;font-size:10px;opacity:.6}footer a{color:var(--cy)}
#boot{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .6s}
#bootText{font-family:'JetBrains Mono';color:var(--cy);white-space:pre;font-size:14px;text-shadow:0 0 8px var(--cy)}
body.retro *{font-family:'Courier New',monospace!important;text-shadow:none!important}
@media(max-width:820px){
#app{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto auto;grid-template-areas:"h" "s" "r" "t" "f";padding:4px;gap:4px}
h1{font-size:16px}.readout{display:none}.cmds button{padding:6px;font-size:9px}.mob{display:inline-block}
#rack{flex-direction:row;overflow-x:auto;overflow-y:hidden}
.tool{min-width:130px}.tool .d{display:none}
#console{position:fixed;left:0;right:0;bottom:0;max-height:65%;z-index:50;transform:translateY(105%);transition:.3s}
#console.open{transform:none}
}