:root{--bg:#0a0a0f;--panel:#11121a;--gold:#c9a227;--text:#e8e8ec;--muted:#8a8a94;--border:#1f2030;--accent:#c9a227}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;padding:0;font-family:Inter,-apple-system,system-ui,sans-serif;overflow:hidden}#app{grid-template-columns:1fr 340px;height:100vh;display:grid;position:relative}#canvas{background:#050507;width:100%;height:100%;display:block}#panel{background:var(--panel);border-left:1px solid var(--border);padding:18px 18px 24px;overflow-y:auto}#panel header{border-bottom:1px solid var(--border);margin-bottom:18px;padding-bottom:14px}#panel h1{letter-spacing:.5px;color:var(--gold);margin:0;font-family:Space Grotesk,sans-serif;font-size:18px}#panel .tag{color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:11px}#panel section{margin-bottom:22px}#panel h2{text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:0 0 10px;font-size:11px}.row{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;display:flex}.row label{flex:1;align-items:center;gap:6px;font-size:13px;display:flex}input[type=range]{min-width:80px;accent-color:var(--gold);flex:1}button{color:var(--text);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;flex:1;padding:7px 12px;font-family:inherit;font-size:12px;transition:all .15s}button:hover{border-color:var(--gold);color:var(--gold)}button.active{background:var(--gold);color:var(--bg);border-color:var(--gold)}.output{color:var(--muted);white-space:pre-wrap;word-break:break-all;background:#0000004d;border-radius:4px;min-height:30px;padding:8px;font-family:JetBrains Mono,monospace;font-size:11px}#hud{color:var(--gold);border:1px solid var(--border);pointer-events:none;background:#0a0a0fcc;border-radius:4px;padding:6px 10px;font-family:JetBrains Mono,monospace;font-size:12px;position:absolute;bottom:12px;left:12px}select{color:var(--text);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;padding:6px 8px;font-family:inherit;font-size:12px}select:hover{border-color:var(--gold)}.tool-row{grid-template-columns:repeat(5,1fr);gap:4px;display:grid}.tool-btn{padding:6px 4px;font-size:11px;font-weight:600}.clip-grid{grid-template-columns:14px 1fr 1fr;align-items:center;gap:4px 6px;margin-bottom:8px;display:grid}.clip-grid span{color:var(--gold);text-align:center;font-family:JetBrains Mono,monospace;font-size:11px}.clip-grid input[type=range]{min-width:0}
