:root{--bg: #0a0d14;--panel: rgba(14, 18, 28, .86);--border: rgba(255, 255, 255, .08);--text: #dbe4f5;--muted: #7c8aa5;--accent: #6ea8ff;--accent-2: #b06eff}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}button,input,select,label{touch-action:manipulation}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;user-select:none;-webkit-user-select:none}#app,#app canvas{position:fixed;top:0;right:0;bottom:0;left:0;display:block}#panel{position:fixed;top:14px;left:14px;bottom:14px;width:272px;padding:16px 14px;overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:14px;scrollbar-width:thin}#panel>*{flex-shrink:0}header{position:relative}#btn-info{position:absolute;top:0;right:0;width:22px;height:22px;padding:0;border-radius:50%;font-size:12px;font-style:italic;font-family:Georgia,serif;color:var(--muted);line-height:1}#btn-info:hover{color:var(--text)}#info-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#05070c99;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}#info-modal.hidden{display:none}.info-card{width:min(430px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow-y:auto;padding:22px;background:var(--panel);border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.55;color:var(--text)}.info-card h3{font-size:15px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.info-card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}.info-card li::marker{color:var(--accent)}.info-card b{color:#fff}header h1{font-size:19px;letter-spacing:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}header h1 span{font-weight:300}header .sub{color:var(--muted);font-size:11px;margin-top:2px}h2{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:8px}.row{display:flex;gap:6px}button{font:inherit;color:var(--text);background:#ffffff0f;border:1px solid var(--border);border-radius:9px;padding:7px 10px;cursor:pointer;transition:background .15s,border-color .15s}button:hover{background:#ffffff1f}button.wide{width:100%}.seg{background:#ffffff0a;border-radius:10px;padding:3px}.seg-btn{flex:1;border:none;background:transparent}.seg-btn.active{background:#6ea8ff38;border:1px solid rgba(110,168,255,.45)}.transport button{flex:1;font-size:15px;padding:8px 0}.transport .accent{background:linear-gradient(135deg,#6ea8ff59,#b06eff59);border-color:#6ea8ff8c;flex:1.6}.slider-row label{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:4px}.slider-row b{color:var(--text);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent)}#status{background:#6ea8ff14;border:1px solid rgba(110,168,255,.18);border-radius:9px;padding:8px 10px;min-height:34px;font-size:12px;line-height:1.35}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:11px;color:var(--muted);background:#ffffff0d;border:1px solid var(--border);border-radius:999px;padding:3px 9px;font-variant-numeric:tabular-nums}.chip.hidden{display:none}#presets{display:grid;grid-template-columns:1fr 1fr;gap:7px}.preset{display:flex;flex-direction:column;gap:4px;padding:6px;text-align:center;font-size:11px}.preset canvas{width:100%;height:44px;border-radius:5px;background:#0a0e18}.actions{margin-top:8px}.actions button{flex:1}.opt{display:flex;align-items:center;gap:8px;padding:4px 0;color:var(--text);cursor:pointer}.opt-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0}select{font:inherit;color:var(--text);background:#ffffff0f;border:1px solid var(--border);border-radius:7px;padding:4px 8px}footer{margin-top:auto;padding-top:6px;color:var(--muted);font-size:10.5px;text-align:center;letter-spacing:.5px}#btn-panel{display:none;position:fixed;top:12px;right:12px;z-index:6;width:44px;height:44px;padding:0;border-radius:50%;font-size:19px;background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}@media (max-width: 700px),(max-height: 520px){#btn-panel{display:block}#panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:52vh;border-radius:16px 16px 0 0;border-bottom:none;padding-bottom:max(14px,env(safe-area-inset-bottom));transition:transform .28s ease}#panel.closed{transform:translateY(105%)}footer{display:none}button{padding:9px 12px}.transport button{font-size:17px;padding:11px 0}.seg-btn,.preset{padding:8px 6px}}