:root{--bg:#121212;--panel:#1c1c1c;--line:#333;--fox:#ff7a1a;--ok:#4ade80;--bad:#f87171;--warn:#facc15}
html,body{background:var(--bg);color:#e8e2da;font-family:'JetBrains Mono',monospace;margin:0}
body{background-image:radial-gradient(circle at 15% -10%,rgba(255,122,26,.13),transparent 40%),repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;animation:rise .5s both}
.panel:hover{box-shadow:0 0 0 1px rgba(255,122,26,.35),0 0 24px rgba(255,122,26,.08)}
.ptitle{font-family:'VT323',monospace;font-size:20px;color:var(--fox);letter-spacing:1px;margin-bottom:6px}
.btn{background:#262626;border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:12px;transition:.15s}
.btn:hover{border-color:var(--fox);color:var(--fox)}
.btn.pri{background:var(--fox);color:#121212;border-color:var(--fox);font-weight:800}
.inp{background:#111;border:1px solid var(--line);border-radius:6px;padding:3px 6px;font-size:12px;color:#eee;outline:none}
.inp:focus{border-color:var(--fox)}
.flash{animation:flash .6s}
@keyframes flash{0%{background:var(--fox);color:#000}100%{background:transparent}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
@keyframes pulse{50%{opacity:.35}}
.pulse{animation:pulse 1s infinite}
@keyframes run{0%,100%{transform:translateY(0) scaleX(-1)}50%{transform:translateY(-4px) scaleX(-1)}}
.fox-run{animation:run .3s infinite}
.fox-sleep{filter:grayscale(.6);opacity:.7}
@keyframes shake{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.fox-err{animation:shake .25s infinite}
.drop{border:2px dashed #444;border-radius:10px;transition:.2s}
.drop.over{border-color:var(--fox);background:rgba(255,122,26,.07)}
canvas{image-rendering:pixelated}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#444;border-radius:3px}