:root{--bg:#0b0b0b;--panel:#161616;--lime:#c6ff00;--hot:#ff2e63;--ink:#f4f1e8;--dim:#8a8a80}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Arial Black",Impact,system-ui,sans-serif}
body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.marquee{overflow:hidden;background:var(--lime);color:#000;border-bottom:4px solid #000;white-space:nowrap;font-size:13px;letter-spacing:.2em}
.track{display:inline-flex;animation:slide 28s linear infinite}
.track span{padding:6px 0}
@keyframes slide{to{transform:translateX(-50%)}}
header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px}
.logo{margin:0;font-size:clamp(34px,6vw,64px);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;transform:rotate(-1.5deg);text-shadow:4px 4px 0 var(--hot)}
.logo em{font-style:normal;color:var(--lime);text-shadow:4px 4px 0 #000,6px 6px 0 var(--hot)}
.hdr-r{display:flex;gap:10px;align-items:center}
.badge{border:3px solid var(--lime);color:var(--lime);padding:4px 10px;font-size:12px;letter-spacing:.15em}
nav{display:flex;gap:8px;padding:0 22px 14px;flex-wrap:wrap}
nav button{background:var(--bg);color:var(--ink);border:3px solid var(--ink);padding:10px 20px;font:inherit;font-size:14px;letter-spacing:.12em;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
nav button:hover{background:#1f1f1f}
nav button:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
nav button.on{background:var(--lime);color:#000;border-color:#000;box-shadow:4px 4px 0 var(--hot)}
main{padding:0 22px 22px}
.panel{background:var(--panel);border:3px solid var(--lime);box-shadow:8px 8px 0 var(--hot);padding:18px;margin-bottom:22px}
h2{margin:0 0 14px;font-size:22px;letter-spacing:.08em;color:var(--lime)}
.row{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
label{font-size:12px;letter-spacing:.14em;color:var(--dim);min-width:56px}
input,select,textarea{background:#000;color:var(--lime);border:3px solid var(--ink);padding:9px 11px;font:14px ui-monospace,Consolas,monospace;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--lime)}
input:not(.num):not([type=checkbox]){flex:1;min-width:200px}
.num{width:110px}
.btn{background:var(--lime);color:#000;border:3px solid #000;padding:11px 22px;font:inherit;font-size:14px;letter-spacing:.1em;cursor:pointer;box-shadow:5px 5px 0 #000,5px 5px 0 3px var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translate(5px,5px);box-shadow:none}
.btn.pink{background:var(--hot);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn.small{padding:7px 12px;font-size:12px;box-shadow:3px 3px 0 #000,3px 3px 0 3px var(--ink)}
.btn.ghost.small{box-shadow:3px 3px 0 var(--ink)}
.btn:disabled{opacity:.35;pointer-events:none}
.hint{font:13px/1.5 system-ui,sans-serif;color:var(--dim);margin:6px 0 12px}
code{background:#000;padding:1px 5px;color:var(--lime)}
.log{background:#000;border:3px solid var(--ink);color:#9dff9d;font:12px/1.5 ui-monospace,Consolas,monospace;height:240px;overflow:auto;padding:10px;margin:0 0 12px;white-space:pre-wrap;word-break:break-all}
#bOut{height:130px}
canvas{width:100%;max-width:640px;height:auto;background:#000;border:3px solid var(--ink);display:block;margin-bottom:12px}
.json{width:100%;height:90px;margin-top:10px;resize:vertical}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.chk{display:flex;align-items:center;gap:5px;min-width:0;color:var(--ink)}
.chk.warn{color:var(--hot)}
.chk input{width:16px;height:16px;padding:0;accent-color:var(--lime)}
.status{font:12px ui-monospace,Consolas,monospace;color:var(--dim);margin-left:auto}
.vault{display:grid;grid-template-columns:240px 1fr 1fr;gap:18px;height:calc(100vh - 290px);min-height:380px}
.vault .panel{margin:0;padding:10px;display:flex;flex-direction:column;min-height:0;box-shadow:6px 6px 0 var(--hot)}
.curname{font-size:11px;letter-spacing:.14em;color:var(--dim);padding:2px 4px 8px}
#editor{flex:1;width:100%;resize:none;tab-size:2;line-height:1.5;font-size:13px}
#frame{flex:1;width:100%;border:3px solid var(--ink);background:#fff}
.tree-wrap{overflow:auto}
.tree ul{list-style:none;margin:0;padding-left:14px}
.tree>ul{padding-left:0}
.tree summary{cursor:pointer;font:700 13px system-ui,sans-serif;padding:3px 0;color:var(--lime)}
.tree .file{background:none;border:0;color:var(--ink);font:13px ui-monospace,Consolas,monospace;padding:3px 4px;cursor:pointer;text-align:left;width:100%}
.tree .file:hover{background:var(--lime);color:#000}
.tree .file.cur{background:var(--hot);color:#fff}
footer{text-align:center;color:var(--dim);font:12px system-ui,sans-serif;padding:16px}
body.desk .web-only,body.web .need-desk{display:none}
@media(max-width:900px){.vault{grid-template-columns:1fr;height:auto}.vault .panel{height:340px}}
@media(prefers-reduced-motion:reduce){.track{animation:none}}