:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--paper-start:#fff;--paper-end:#f8f9fa;--surface:#fff;--surface-raised:#f8f9fa;--input-bg:#fff;--ink:#2c3e50;--muted:#666;--muted-soft:#858585;--line:#0000000d;--line-strong:#0000001f;--accent:#9ce159;--accent-text:#527d27;--accent-hover:#8fd54c;--accent-soft:#9ce15929;--accent-ink:#1d2a14;--button-bg:#00000006;--waveform-bg:#f8f9fa;--waveform-line:#00000014;--waveform-empty:#666;--loop-end:#2c3e50;--shadow:0 5px 20px #00000014;--shadow-hover:0 15px 35px #0000001f}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--paper-start:#2a2a2a;--paper-end:#353535;--surface:#383838;--surface-raised:#404040;--input-bg:#2f2f2f;--ink:#e1e1e1;--muted:#fffc;--muted-soft:#ffffff94;--line:#ffffff1a;--line-strong:#ffffff29;--accent-text:#9ce159;--accent-hover:#b2ed78;--button-bg:#ffffff0f;--waveform-bg:#2f2f2f;--waveform-line:#ffffff1a;--waveform-empty:#fffc;--loop-end:#e1e1e1;--shadow:0 5px 20px #0000004d;--shadow-hover:0 15px 35px #00000061}}*{box-sizing:border-box}html{background:linear-gradient(135deg, var(--paper-start) 0%, var(--paper-end) 100%);min-height:100%}body{min-height:100%;color:var(--ink);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:16px;line-height:1.65;overflow-x:hidden}button,input,select{font:inherit}button,.file-button{-webkit-tap-highlight-color:transparent}button{border:1px solid var(--line-strong);min-height:2.75rem;color:var(--ink);background:var(--button-bg);cursor:pointer;border-radius:999px;padding:0 1.05rem;transition:background-color .18s,border-color .18s,box-shadow .18s,color .18s,transform .18s}button:hover:not(:disabled){color:var(--accent-text);background:var(--accent-soft);border-color:#9ce15985;transform:translateY(-1px)}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #9ce15947}.file-button:has(input:focus-visible){outline-offset:2px;outline:3px solid #9ce15947}button:disabled,input:disabled{cursor:not-allowed;opacity:.46}.app-shell{width:min(960px,100% - 40px);margin:0 auto;padding:44px 0 72px}.top-bar{justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px;display:flex}h1{letter-spacing:-.035em;text-wrap:balance;margin:0;font-size:clamp(2.65rem,6vw,3.35rem);font-weight:700;line-height:1.12}.file-button{max-width:100%;min-height:2.9rem;color:var(--accent-ink);background:var(--accent);cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;padding:0 1.2rem;font-size:.92rem;font-weight:700;transition:background-color .18s,box-shadow .18s,transform .18s;display:inline-flex;position:relative;box-shadow:0 8px 22px #00000038}.file-button:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 12px 28px #00000047}.file-button input{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}.workspace{grid-template-columns:minmax(0,1.55fr) minmax(310px,.85fr);align-items:start;gap:20px;display:grid}.player-column{gap:14px;min-width:0;display:grid}.player-panel,.control-panel{border:1px solid var(--line);min-width:0;color:var(--ink);background:var(--surface);box-shadow:var(--shadow);border-radius:20px}.player-panel{margin:0;padding:26px;position:relative;overflow:hidden}.drop-overlay{z-index:3;color:var(--ink);background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;border:1px dashed #9ce15994;border-radius:15px;justify-content:center;align-items:center;transition:opacity .14s,transform .14s;display:flex;position:absolute;inset:10px;transform:scale(.985)}.drop-content{text-align:center;justify-items:center;gap:8px;padding:24px;display:grid}.drop-content strong{font-size:1.05rem}.drop-content span{color:var(--muted);font-size:.9rem}.player-panel.is-empty .drop-overlay,.player-panel.is-dragging .drop-overlay{opacity:1;transform:scale(1)}.player-panel.is-empty.is-dragging .drop-overlay,.player-panel.has-audio.is-dragging .drop-overlay{background:var(--input-bg);box-shadow:inset 0 0 0 1px #9ce15957}.drop-mark{border:2px solid var(--accent);background:var(--accent-soft);border-radius:999px;width:50px;height:50px;position:relative}.drop-mark:before,.drop-mark:after{content:"";background:var(--accent);position:absolute}.drop-mark:before{width:18px;height:2px;top:23px;left:14px}.drop-mark:after{width:2px;height:18px;top:15px;left:22px}.track-row{justify-content:space-between;align-items:start;gap:20px;margin-bottom:20px;display:flex}.track-copy{gap:3px;min-width:0;display:grid}.track-copy strong{text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem;overflow:hidden}.track-copy span,.small-status{color:var(--muted);font-size:.9rem}.time-readout{border:1px solid var(--line);color:var(--muted);background:var(--button-bg);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:.4rem .75rem;font-size:.88rem;display:flex}#waveform{border:1px solid var(--line);background:var(--input-bg);border-radius:14px;width:100%;height:180px;display:block}input[type=range]{accent-color:var(--accent)}.seek-control{width:100%;margin:20px 0 14px}.transport-row{gap:10px;display:flex}.transport-row button:first-child{min-width:7rem;color:var(--accent-ink);background:var(--accent);border-color:#0000;font-weight:700}.transport-row button:first-child:hover:not(:disabled){color:var(--accent-ink);background:var(--accent-hover);border-color:#0000;box-shadow:0 8px 20px #0003}.control-grid{gap:14px;display:grid}.control-panel{margin:0;padding:18px;transition:border-color .18s,box-shadow .18s,transform .18s}.control-panel:focus-within{box-shadow:var(--shadow-hover);border-color:#9ce15952}.player-panel legend,.control-panel legend{color:var(--ink);padding:0 7px;font-size:.95rem;font-weight:700}.control-header{color:var(--muted);justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;font-size:.9rem;display:flex}.control-header output{color:var(--accent-text);font-variant-numeric:tabular-nums;font-weight:700}.control-panel input[type=range]{width:100%}.stacked-controls{gap:12px;display:grid}.stacked-controls label{color:var(--muted);gap:6px;font-size:.9rem;display:grid}.stacked-controls input,.stacked-controls select{border:1px solid var(--line-strong);width:100%;min-height:2.55rem;color:var(--ink);background:var(--input-bg);border-radius:10px;padding:0 .75rem;transition:border-color .18s,box-shadow .18s}.stacked-controls input:not(:disabled):hover,.stacked-controls select:hover{border-color:#9ce15966}.stacked-controls .checkbox-control{min-height:2.25rem;color:var(--ink);align-items:center;gap:10px;display:flex}.stacked-controls .checkbox-control input{flex:none;width:1.05rem;height:1.05rem;min-height:0;margin:0;padding:0}.stacked-controls .checkbox-control:has(input:disabled){color:var(--muted-soft);opacity:.62}.metronome-settings{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.metronome-settings label{color:var(--muted);gap:6px;font-size:.86rem;display:grid}.metronome-settings input,.metronome-settings select{border:1px solid var(--line-strong);width:100%;min-width:0;min-height:2.55rem;color:var(--ink);background:var(--input-bg);font-variant-numeric:tabular-nums;border-radius:10px;padding:0 .7rem;transition:border-color .18s,box-shadow .18s}.metronome-settings input:hover,.metronome-settings select:hover{border-color:#9ce15966}.metronome-volume{margin-top:14px}.metronome-volume .control-header{margin-bottom:6px}.metronome-volume input{width:100%;display:block}.metronome-actions{flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:14px;display:flex}.metronome-actions .checkbox-control{color:var(--ink);align-items:center;gap:9px;font-size:.9rem;display:flex}.metronome-actions .checkbox-control input{width:1.05rem;height:1.05rem;margin:0}.metronome-hint{color:var(--muted-soft);margin:12px 0 0;font-size:.8rem;line-height:1.45}.loop-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.loop-buttons button{padding-inline:.7rem}.small-status{min-height:1.3rem;margin:12px 0 0}@media (width>=881px){.count-in-panel .stacked-controls{grid-template-columns:minmax(0,1fr) auto;align-items:end}.count-in-panel .stacked-controls>label:nth-child(-n+2){grid-column:1/-1}.count-in-panel .checkbox-control{margin-bottom:.15rem}}@media (width<=880px){.app-shell{width:min(720px,100% - 32px);padding:32px 0 56px}.workspace{grid-template-columns:1fr}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.app-shell{width:min(100% - 24px,520px);padding-top:24px}.top-bar{flex-direction:column;align-items:stretch;gap:18px}.file-button{width:100%}.player-panel{padding:20px}.player-panel.is-empty{min-height:360px}.player-panel.is-empty>.track-row,.player-panel.is-empty>#waveform,.player-panel.is-empty>.seek-control,.player-panel.is-empty>.transport-row{display:none}.track-row,.transport-row{flex-direction:column}.transport-row button{width:100%}.metronome-settings{grid-template-columns:repeat(2,minmax(0,1fr))}.metronome-settings label:last-child{grid-column:1/-1}.metronome-actions{flex-direction:column;align-items:stretch}.control-grid,.loop-buttons{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}