:root{--bg: #0e0e10;--panel: #16161a;--card: #1a1a1f;--line: #2a2a31;--line-soft: #212128;--text: #f2f2f0;--muted: #8a8a93;--dim: #5f5f68;--radius: 12px;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Pretendard,Apple SD Gothic Neo,Segoe UI,system-ui,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}.app{height:100dvh;display:flex;flex-direction:column;padding-top:max(env(safe-area-inset-top,0px),18px);padding-bottom:max(env(safe-area-inset-bottom,0px),12px);padding-left:max(env(safe-area-inset-left,0px),16px);padding-right:max(env(safe-area-inset-right,0px),16px);gap:12px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;flex-wrap:nowrap;min-height:40px}.brand{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 auto;overflow:hidden}.brand h1{font-size:15px;font-weight:600;margin:0;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}.brand span{letter-spacing:.14em;text-transform:uppercase}.brand span{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.master{display:flex;align-items:center;gap:9px;padding:0 4px}.master-icon{font-size:15px;color:var(--muted);width:16px;text-align:center}.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:500;white-space:nowrap;flex:none;transition:background .12s,color .12s,border-color .12s}.chip:active{transform:scale(.97)}.chip.on{background:#f2f2f0;border-color:#f2f2f0;color:#0e0e10}.chip.danger{border-color:#5a2a22;background:#241512;color:#e58e6f}.chip.ghost{border-color:var(--line-soft);color:var(--dim)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:22px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--text);border:none}input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--text)}.grid-wrap{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.grid{display:grid;gap:9px;grid-auto-rows:minmax(84px,1fr);min-height:100%}.pad{position:relative;border-radius:var(--radius);padding:11px 13px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;text-align:left;overflow:hidden;transition:transform 90ms ease,background .14s ease,border-color .14s ease}.pad:active{transform:scale(.975)}.pad-top{display:flex;align-items:center;justify-content:space-between;gap:6px}.pad-tag{font-size:10px;font-weight:600;letter-spacing:.05em;white-space:nowrap}.pad-name{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25;word-break:keep-all}.pad-empty .pad-name{color:var(--dim);font-weight:500}.pad-drain{position:absolute;left:0;top:0;bottom:0;background:#00000052;transition:width .1s linear;pointer-events:none}.pad-body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:6px;pointer-events:none}.pad-remain{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}.pad-editable{touch-action:none}.pad-dragging{transform:scale(1.04);box-shadow:0 10px 26px #0000008c;z-index:2;opacity:.92}.maintrack{flex:none;height:52px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--line-soft);background:var(--card)}.maintrack.live{border-color:#2f5f4e;background:#14201c}.maintrack.ducked .mt-play,.maintrack.ducked .mt-fill{opacity:.4}.maintrack.ducked .mt-label{color:#c9871a}.mt-play{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center}.maintrack.live .mt-play{background:#17a47a;border-color:#3fc79c;color:#04241a}.mt-play:active{transform:scale(.94)}.mt-meta{display:flex;flex-direction:column;gap:1px;min-width:0;width:150px;flex:none}.mt-label{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--dim)}.mt-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mt-seek{flex:1;min-width:40px;height:24px;display:flex;align-items:center;touch-action:none}.mt-seek.seekable{cursor:pointer}.mt-seek:focus-visible{outline:2px solid #17a47a;outline-offset:3px;border-radius:4px}.mt-bar{position:relative;width:100%;height:5px;border-radius:3px;background:var(--line)}.mt-fill{display:block;height:100%;border-radius:3px;background:#17a47a}.mt-knob{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#17a47a;border:2px solid #0e0e10;transform:translate(-50%,-50%);pointer-events:none}.mt-seek.seekable:active .mt-knob{transform:translate(-50%,-50%) scale(1.25)}.mt-time{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;flex:none;width:122px;text-align:right}.mt-vol{display:flex;align-items:center;gap:7px;flex:none;color:var(--muted)}.mt-vol input[type=range]{width:84px}.mt-pct{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;width:30px;text-align:right}.mt-select{height:30px;max-width:130px;padding:0 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:12px;flex:none}.mt-file{height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:5px;flex:none;cursor:pointer;white-space:nowrap}.mt-file:active{transform:scale(.97)}.stopbar{flex:none;height:62px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);color:var(--dim);display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:-.01em;transition:background .14s,color .14s,border-color .14s,transform 90ms}.stopbar.live{background:#d8423f;border-color:#e8706d;color:#2a0b0a}.stopbar:active{transform:scale(.99)}.stopbar-count{font-size:12.5px;font-weight:500;opacity:.75;font-variant-numeric:tabular-nums}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:24px;z-index:10}.sheet{width:100%;max-width:460px;max-height:86dvh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:15px}.sheet h2{margin:0;font-size:15px;font-weight:600}.field{display:flex;flex-direction:column;gap:7px}.field>label{font-size:11.5px;color:var(--muted);font-weight:500}.input{height:38px;padding:0 11px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:14px;width:100%}.input:focus{outline:none;border-color:#4a4a55}.swatches{display:flex;flex-wrap:wrap;gap:7px}.swatch{width:30px;height:30px;border-radius:8px;border:2px solid transparent;transition:transform 90ms}.swatch.on{border-color:var(--text)}.swatch:active{transform:scale(.9)}.segs{display:flex;gap:6px}.seg{flex:1;height:36px;border-radius:9px;border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:500}.seg.on{background:var(--text);border-color:var(--text);color:#0e0e10}.hint{font-size:11.5px;color:var(--dim);line-height:1.5}.row{display:flex;align-items:center;gap:10px}.val{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;width:44px;text-align:right;flex:none}.sheet-actions{display:flex;gap:8px;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:14px}.btn{height:38px;padding:0 15px;border-radius:9px;border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--text)}.btn.primary{background:var(--text);border-color:var(--text);color:#0e0e10}.btn.danger{color:#e0705e;border-color:#4a2620}.btn:active{transform:scale(.97)}.file-name{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:700px){.app{padding-left:max(env(safe-area-inset-left,0px),10px);padding-right:max(env(safe-area-inset-right,0px),10px);gap:9px}.brand span{display:none}.brand h1{font-size:15px}.topbar{gap:10px}.topbar-right{gap:7px}.chip{height:32px;padding:0 10px;font-size:12px}.master{gap:6px;padding:0}.master input[type=range]{width:60px!important}.topbar.editing .master{display:none}.grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))!important;gap:7px;grid-auto-rows:minmax(76px,1fr)}.pad{padding:9px 10px}.pad-name{font-size:13.5px}.stopbar{height:56px;font-size:15px}.maintrack{gap:9px;padding:0 9px}.mt-meta{width:auto;flex:1;min-width:0}.mt-seek,.mt-time,.mt-pct{display:none}.mt-vol input[type=range]{width:66px}.mt-select{max-width:96px}.sheet{padding:15px}}@media(max-height:480px){.app{padding-top:max(env(safe-area-inset-top,0px),8px);padding-bottom:max(env(safe-area-inset-bottom,0px),8px);gap:8px}.stopbar{height:42px;font-size:14px}.maintrack{height:38px}.mt-play{width:26px;height:26px}.grid{grid-auto-rows:minmax(48px,1fr);gap:6px}.pad{padding:6px 9px}.pad-name{font-size:12.5px}.pad-tag{font-size:9px}.pad-remain{font-size:11px}.topbar{min-height:32px}.sheet{max-height:92dvh}}.toast{position:fixed;left:50%;transform:translate(-50%);bottom:max(env(safe-area-inset-bottom),16px);background:#f2f2f0;color:#0e0e10;font-size:13px;font-weight:500;padding:9px 16px;border-radius:20px;z-index:20}