:root{--bg: #05060a;--panel: rgba(10, 12, 18, .86);--line: rgba(255, 255, 255, .09);--text: #eef1f7;--muted: rgba(238, 241, 247, .55);--accent: #8fd0ff;--radius: 12px;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;overscroll-behavior:none}.app{position:fixed;inset:0}.stage,.overlay{position:absolute;inset:0;width:100%;height:100%;display:block}.stage{touch-action:none}.overlay{pointer-events:none}.hud{position:absolute;top:calc(12px + env(safe-area-inset-top));left:16px;right:16px;display:flex;gap:12px;align-items:baseline;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.7)}.hud__name{color:var(--text);font-weight:600}.hud__source{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40%}.transport{position:absolute;inset:auto 16px 0%;display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:999px;transform:translateY(-8px);z-index:2}.app .transport{bottom:auto;top:calc(44px + env(safe-area-inset-top))}.transport__play{border:none;background:#ffffff1a;border-radius:50%;width:34px;height:34px;flex:0 0 34px;font-size:12px;padding:0}.transport__seek{flex:1;accent-color:var(--accent)}.transport__time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.chrome{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;pointer-events:none;z-index:3}.sheet{pointer-events:auto;background:var(--panel);backdrop-filter:blur(24px);border-top:1px solid var(--line);padding:16px 16px 10px;max-height:46vh;overflow-y:auto}.sheet h2{display:flex;align-items:baseline;gap:10px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}.sheet h2:first-child{margin-top:0}.sheet h2 em{font-style:normal;text-transform:none;letter-spacing:0;font-size:11px;opacity:.7}.row{display:flex;gap:8px}.row.wrap{flex-wrap:wrap}button,.button,select,input.text,input.search{font:inherit;color:var(--text);background:#ffffff0f;border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;transition:background .12s ease}button:hover,.button:hover{background:#ffffff1f}button.active,.chip.active{background:var(--accent);color:#05060a;border-color:transparent;font-weight:600}button.primary{background:var(--accent);color:#05060a;font-weight:600;border-color:transparent;width:100%;padding:14px}button.link{background:none;border:none;padding:0;font-size:11px;color:var(--accent);text-transform:none;letter-spacing:0;margin-left:auto;cursor:pointer}.chip{padding:7px 13px;border-radius:999px;font-size:13px}.disclosure{width:100%;margin-top:6px;font-size:13px;color:var(--muted)}input.text,input.search{width:100%;cursor:text;margin-bottom:8px}.status{color:var(--muted);font-size:13px;line-height:1.45;margin:10px 0 0}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}.card{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px}.card strong{font-size:14px}.card span{font-size:12px;color:var(--muted);line-height:1.35}.card.active span{color:#05060ab8}.param{display:block;margin:12px 0}.param--inline{display:flex;justify-content:space-between;align-items:center}.param__label{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:5px}.param__label em{font-style:normal;color:var(--text);font-variant-numeric:tabular-nums}.param input[type=range]{width:100%;accent-color:var(--accent)}.param select{width:100%}.progress{height:8px;border-radius:999px;background:#ffffff1a;overflow:hidden;margin-bottom:10px}.progress__fill{height:100%;background:var(--accent);transition:width .12s linear}.tabs{pointer-events:auto;display:flex;gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--panel);backdrop-filter:blur(24px);border-top:1px solid var(--line)}.tabs button{flex:1;border:none;background:transparent;border-radius:10px;font-size:11px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted)}.tabs button.active{color:var(--accent);background:#8fd0ff1f;font-weight:600}.tabs__glyph{font-size:15px;line-height:1}@media(min-width:900px){.chrome{inset:0 auto 0 0;width:380px;flex-direction:column-reverse}.sheet{max-height:none;flex:1;border-top:none;border-right:1px solid var(--line)}.tabs{border-top:none;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}.app--bare .chrome{width:auto}.hud{left:400px}.app--bare .hud{left:16px}.app .transport{left:400px}.app--bare .transport{left:16px}}