:root{color-scheme:dark;--bg: #0b0d10;--panel: #15191f;--panel2: #1d232b;--text: #f3f5f7;--muted: #9aa4b1;--accent: #64d2ff;--border: #303844;--good: #63e6be;--danger: #ff7b72;--ink: #050607}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.app{max-width:1180px;margin:0 auto;padding:18px 14px calc(18px + env(safe-area-inset-bottom))}.top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.logo{width:clamp(30px,6vw,40px);height:clamp(30px,6vw,40px);flex:none;color:var(--accent);display:block}h1{font-size:clamp(19px,4vw,24px);margin:0 0 5px}.sub{margin:0;color:var(--muted);font-size:14px}.badge{padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--panel);font-size:13px;white-space:nowrap}.viewer{display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(380px,1.55fr);gap:16px;align-items:start}.focus-wrap,.grid-stage{position:relative;background:var(--ink);border:1px solid var(--border);border-radius:15px;overflow:hidden;isolation:isolate;contain:paint}.focus-wrap{aspect-ratio:1 / 1}.grid-stage{aspect-ratio:2 / 1}.focus-wrap canvas,.grid-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1}.focus-wrap.dim:before{content:"";position:absolute;inset:0;background:#0000009e;z-index:2;pointer-events:none}.focus-wrap:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--ink);pointer-events:none;z-index:3}.focus-label{position:absolute;left:10px;bottom:10px;background:#000000ad;padding:6px 9px;border-radius:8px;font-weight:650;font-size:14px;z-index:4}.grid-controls{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);z-index:2}.tile{position:relative;min-width:0;min-height:0}.tile-select{position:absolute;inset:0;border:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation;z-index:1}.tile-name{position:absolute;left:6px;bottom:6px;background:#000000ad;padding:3px 6px;border-radius:6px;font-size:clamp(9px,1.5vw,12px);pointer-events:none;z-index:3}.mute{position:absolute;right:5px;top:5px;width:clamp(26px,4.4vw,34px);height:clamp(26px,4.4vw,34px);border-radius:50%;border:2px solid rgba(255,255,255,.85);background:#050607cc;color:#fff;display:grid;place-items:center;padding:0;cursor:pointer;z-index:4;box-shadow:0 1px 5px #000000bf;touch-action:manipulation}.mute svg{width:58%;height:58%;display:block;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}.mute[aria-pressed=true]{background:#fff;color:var(--ink);border-color:var(--ink)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:15px;padding:15px;margin-top:15px}.recording-row{display:flex;gap:9px;align-items:center;margin-bottom:12px}.recording-row label{color:var(--muted);font-size:14px}.recording-row select{font:inherit;flex:1;min-width:0;color:var(--text);background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:9px 11px}.transport{display:flex;gap:9px;align-items:center;flex-wrap:wrap}button{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 13px;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.transport .primary{background:var(--accent);color:#001018;border-color:transparent;font-weight:700}.time{font-variant-numeric:tabular-nums;margin-left:auto;font-size:14px}.timeline{width:100%;margin:14px 0 3px;touch-action:none}input[type=range]{width:100%}.tempo-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:6px;margin-top:11px}.tempo-buttons button{padding:9px 4px;font-size:13px;font-weight:700}.tempo-buttons button[aria-pressed=true]{background:var(--accent);color:#001018;border-color:transparent}.advanced{margin-top:14px}.advanced summary{color:var(--muted);cursor:pointer;font-size:14px;padding:4px 0}.loop-grid{display:grid;grid-template-columns:110px 1fr 92px;gap:10px;align-items:center;margin-top:10px}.loop-grid label{color:var(--muted);font-size:14px}.loop-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}.loop-buttons button{font-size:13px}.status{font-size:14px;color:var(--muted);margin:12px 0 0;line-height:1.4}.status.good{color:var(--good)}.status.error{color:var(--danger)}.sync{font-size:12px;color:var(--muted);margin:6px 0 0;opacity:.8}@media (max-width: 860px){.viewer{grid-template-columns:1fr;gap:8px}.app{padding:10px 10px calc(12px + env(safe-area-inset-bottom))}.panel{padding:12px;margin-top:10px}.time{width:100%;margin-left:0;text-align:right}.loop-grid{grid-template-columns:1fr;gap:4px}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto}}