:root{--bg: #020409;--amber: #ffb454;--cyan: #8fd8ff;--panel-bg: rgba(5, 10, 18, .78);--panel-border: rgba(143, 216, 255, .2);--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background:var(--bg);overflow:hidden;font-family:var(--mono);color:var(--cyan)}#gl{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.panel{position:fixed;background:var(--panel-bg);border:1px solid var(--panel-border);padding:10px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;-webkit-user-select:none;user-select:none}.panel-title{color:var(--amber);font-size:11px;margin-bottom:8px;letter-spacing:.18em}.panel-title.small{font-size:10px;opacity:.9}.accent{color:var(--cyan);opacity:.7}.hidden{display:none!important}#hud{top:14px;left:14px;min-width:230px}.tele-grid{display:grid;grid-template-columns:auto auto;gap:3px 14px}.lbl{opacity:.55}.val{color:#fff;text-align:right}.val.warn{color:var(--amber)}#keys{bottom:14px;left:14px}.keys-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px;font-size:10px}.keys-grid b{color:var(--amber);font-weight:400}.keys-grid span{opacity:.8}#presets{bottom:14px;right:14px;display:flex;gap:6px}#params{top:14px;right:14px;width:280px;max-height:calc(100% - 28px);overflow-y:auto}.slider-row{display:grid;grid-template-columns:1fr 100px 44px;align-items:center;gap:8px;margin:6px 0;font-size:10px}.slider-row label{opacity:.7}.sval{color:#fff;text-align:right;font-size:10px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:2px;background:#8fd8ff4d;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;background:var(--amber);border:none;cursor:pointer}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:var(--amber);border:none;cursor:pointer}.qrow{display:flex;gap:6px}.qrow .pbtn{flex:1}.qbtn.active{color:var(--amber);border-color:var(--amber)}.pbtn{background:transparent;border:1px solid var(--panel-border);color:var(--cyan);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;cursor:pointer}.pbtn:hover,.pbtn.active{color:var(--amber);border-color:var(--amber)}#sound-btn{bottom:60px;right:14px;cursor:pointer;color:var(--amber);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}#sound-btn.on{color:var(--cyan)}#loading{top:50%;left:50%;transform:translate(-50%,-50%);color:var(--amber)}.corner{position:fixed;width:22px;height:22px;border:1px solid rgba(255,180,84,.5);z-index:9;pointer-events:none}.corner.tl{top:6px;left:6px;border-right:none;border-bottom:none}.corner.tr{top:6px;right:6px;border-left:none;border-bottom:none}.corner.bl{bottom:6px;left:6px;border-right:none;border-top:none}.corner.br{bottom:6px;right:6px;border-left:none;border-top:none}@media(max-width:700px){#keys{display:none}#hud{min-width:180px;font-size:10px}#presets{flex-wrap:wrap;max-width:180px}#params{width:calc(100% - 28px)}}