:root{--gold:#d4af37;--red:#b30000}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
#sky{position:fixed;inset:0;width:100vw;height:100vh;background:radial-gradient(circle at 50% 100%,rgba(120,35,10,.13),transparent 38%),#000}
.brand{position:fixed;top:18px;right:20px;text-align:right;z-index:5;pointer-events:none;opacity:.82}
.brand div{color:var(--gold);font-size:11px;letter-spacing:.24em}
.brand strong{display:block;color:var(--gold);font-size:34px;letter-spacing:.12em;text-shadow:0 0 24px rgba(179,0,0,.75)}
.brand span{font-size:11px;color:#aaa;letter-spacing:.1em;text-transform:uppercase}
.tab{position:fixed;z-index:40;left:0;top:43%;width:38px;height:90px;border:1px solid rgba(212,175,55,.55);border-left:0;border-radius:0 14px 14px 0;background:rgba(0,0,0,.78);color:var(--gold);font-size:28px}
.drawer{position:fixed;z-index:39;left:0;top:0;width:min(355px,88vw);height:100vh;overflow:auto;padding:14px;border-right:1px solid rgba(212,175,55,.5);background:rgba(0,0,0,.88);backdrop-filter:blur(12px);transform:translateX(-100%);transition:.25s}
.drawer.open{transform:translateX(0)}
.head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #333;margin-bottom:12px;padding-bottom:10px}
h1{margin:0;color:var(--gold);font-size:18px;letter-spacing:.16em}
#close{width:34px;height:34px;border-radius:999px;font-size:22px}
label{display:block;color:var(--gold);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin:11px 0 6px}
select,input{width:100%;margin-bottom:4px}
select{background:#070707;color:#fff;border:1px solid #444;border-radius:9px;padding:9px}
input[type=range]{accent-color:var(--gold)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
button{border:1px solid rgba(212,175,55,.6);border-radius:10px;background:rgba(179,0,0,.24);color:#fff;padding:10px;font-size:11px;letter-spacing:.08em;cursor:pointer}
button:active{transform:scale(.97);background:rgba(212,175,55,.25)}
#clear{grid-column:1/-1;background:#111}
.status{position:fixed;left:16px;bottom:14px;color:rgba(255,255,255,.52);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.fps{position:fixed;top:12px;left:14px;color:#58ff7a;font:12px monospace;z-index:50;display:none;background:rgba(0,0,0,.6);padding:4px 6px;border:1px solid rgba(88,255,122,.35)}
@media(max-width:760px){.brand strong{font-size:24px}.brand span{display:none}.status{display:none}}