:root{--gold:#d4af37;--red:#b30000;--panel:#0b0b0b;--line:#333}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font-family:"Courier New",monospace}
#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(410px,92vw);height:100vh;overflow:auto;padding:14px;border-right:2px solid rgba(212,175,55,.48);background:rgba(10,10,10,.92);backdrop-filter:blur(12px);transform:translateX(-100%);transition:.25s;box-shadow:20px 0 80px rgba(0,0,0,.65)}
.drawer.open{transform:translateX(0)}
.head{display:flex;align-items:flex-start;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}.head p{margin:5px 0 0;color:#888;font-size:10px;text-transform:uppercase;letter-spacing:.12em}
#close{width:34px;height:34px;border-radius:999px;font-size:22px}
section{border-top:1px solid #303030;margin-top:12px;padding-top:11px}
label{display:block;color:var(--gold);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin:10px 0 6px}
select,input,textarea{width:100%;margin-bottom:5px}
select,textarea{background:#070707;color:#fff;border:1px solid #444;border-radius:5px;padding:9px;font-family:inherit}
input[type=color]{height:38px;border:1px solid #444;border-radius:5px;background:#111}
input[type=range]{accent-color:var(--gold)}
.check{color:#ddd;text-transform:none;letter-spacing:0;font-size:12px}.check input{width:auto;margin-right:6px}
details{border:1px solid #333;border-left:4px solid var(--gold);border-radius:6px;background:#151515;padding:9px;margin:10px 0;box-shadow:0 8px 20px rgba(0,0,0,.28)}
summary{cursor:pointer;color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.break-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:end}
.swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0 10px}
.swatch{height:26px;border-radius:5px;border:1px solid rgba(255,255,255,.35);padding:0}
.cue{width:100%;background:#111;border-color:#58ff7a;color:#b8ffd0;margin-top:4px}
.schematic{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:4px;min-height:120px;border:1px dashed #444;background:#090909;padding:10px}
.layer{min-width:120px;border:1px solid var(--gold);border-radius:4px;padding:6px 8px;color:#fff;font-size:10px;text-align:center;transition:.2s}
.delay{color:var(--gold);font-size:10px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
button{border:1px solid rgba(212,175,55,.6);border-radius:5px;background:rgba(179,0,0,.24);color:#fff;padding:10px;font-size:11px;letter-spacing:.08em;cursor:pointer;font-family:inherit}
button:active{transform:scale(.97);background:rgba(212,175,55,.25)}
#clear{background:#111}textarea{min-height:82px;resize:vertical;font-size:11px;line-height:1.35}
.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}.break-grid{grid-template-columns:1fr}}