.app-shell{display:flex;flex-direction:row;min-height:100vh}.app-brand{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 1.25rem}.app-brand-logo{display:flex;align-items:center;gap:.75rem}.app-theme-btn{flex-shrink:0;width:36px;height:36px;padding:0;border-radius:50%;background:var(--surface-1);border:1px solid var(--border-color);color:var(--text-color);font-size:1rem;display:flex;align-items:center;justify-content:center;box-shadow:none}.app-theme-btn:hover{background:var(--surface-2);border-color:var(--border-strong);transform:none;filter:none;box-shadow:none}.app-brand-mark{flex-shrink:0;font-size:1.1rem;font-weight:800;letter-spacing:.02em;color:var(--accent-color)}.app-brand-full{font-size:1.85rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap}.App{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.brand-tune{color:var(--accent-color)}.brand-weave{color:var(--accent-2)}main{flex:1;display:flex;flex-direction:column;min-height:0;padding:1.25rem}.upload-container,.results-container,.samples-container{flex:1;display:flex;flex-direction:column;background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);padding:3rem;border-radius:24px;text-align:center;box-shadow:0 25px 50px -12px var(--shadow-color);animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.page-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.4rem;row-gap:.2rem;margin:-2.3rem 0 1.25rem;padding:.6rem 0}.page-breadcrumb-item{background:transparent;border:none;box-shadow:none;margin:0;padding:.35rem .55rem;font-size:clamp(1.05rem,4.5vw,1.4rem);font-weight:800;letter-spacing:-.01em;color:var(--text-secondary);border-radius:8px;cursor:pointer}.page-breadcrumb-item:hover:not(:disabled){background:var(--border-color);transform:none;box-shadow:none}.page-breadcrumb-item.is-active{color:var(--text-color)}.page-breadcrumb-sep{color:var(--text-secondary);opacity:.5;font-size:1.2rem}h2{font-size:2rem;margin-bottom:2rem}.section-heading{margin:0 0 .75rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-secondary)}input[type=file]{display:block;margin:2rem auto;background:var(--surface-1);padding:1rem;border-radius:12px;border:2px dashed var(--border-strong);cursor:pointer;transition:all .3s}input[type=file]:hover{border-color:var(--accent-color);background:var(--surface-2)}.llm-refine-toggle{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1.5rem;color:var(--text-secondary);font-size:.95rem;cursor:pointer}.llm-refine-toggle input[type=checkbox]{width:1.1rem;height:1.1rem;cursor:pointer;accent-color:var(--accent-color)}button{background:var(--accent-color);color:var(--accent-contrast);border:none;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;border-radius:12px;cursor:pointer;transition:background-color .15s,transform .15s,box-shadow .15s;box-shadow:0 4px 6px -1px var(--shadow-color),0 2px 4px -1px var(--shadow-color)}button:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 10px 15px -3px var(--shadow-color),0 4px 6px -2px var(--shadow-color)}button:disabled{opacity:.5;cursor:not-allowed}.generate-btn{height:40px;padding:0 1.4rem;border-radius:20px;font-size:.85rem;font-weight:600;background:var(--surface-2);border:1px solid var(--accent-color);color:var(--text-color);cursor:pointer;transition:background .15s,opacity .15s;white-space:nowrap;box-shadow:none}.generate-btn:hover:not(:disabled){background:var(--surface-3);transform:none;box-shadow:none}.generate-btn:disabled{opacity:.5;cursor:not-allowed}.status-msg{margin-top:1.5rem;color:var(--accent-color);font-weight:500}.chord-readout{display:flex;align-items:baseline;justify-content:center;gap:.9rem;margin:0 0 1.5rem;padding:1.1rem 1.5rem;background:var(--surface-1);border-radius:16px}.chord-readout-current{font-size:2.2rem;font-weight:800;color:var(--accent-3);letter-spacing:-.01em;display:inline-block;animation:chord-slide-in .3s ease-out}.chord-readout-next{font-size:1.3rem;font-weight:700;color:var(--text-secondary);opacity:.5;display:inline-block;animation:chord-slide-in-faded .3s ease-out}@keyframes chord-slide-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes chord-slide-in-faded{0%{opacity:0;transform:translate(14px)}to{opacity:.5;transform:translate(0)}}.chord-readout-idle{font-size:1.4rem;font-weight:700;color:var(--text-secondary)}audio{width:100%;margin:1.5rem 0;height:40px}.multitrack{margin:2rem 0}.track-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem}.track-block{display:flex;flex-direction:column}.track-row{display:flex;align-items:center;gap:.9rem;background:var(--surface-1);border:1px solid var(--border-color);border-radius:12px;padding:.75rem 1rem;transition:opacity .2s}.track-block:has(.fx-panel) .track-row{border-radius:12px 12px 0 0}.track-row.is-muted{opacity:.45}.track-color-bar{width:4px;height:32px;border-radius:2px;flex-shrink:0}.track-name{font-size:.9rem;font-weight:600;min-width:110px;text-align:left}.mute-btn{padding:.25rem .65rem;font-size:.75rem;font-weight:700;border-radius:6px;box-shadow:none;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-secondary);flex-shrink:0;min-width:52px}.mute-btn:hover:not(:disabled){transform:none;background:var(--surface-3);box-shadow:none}.mute-btn.is-muted{background:var(--danger-soft);border-color:var(--danger-color);color:var(--danger-color)}.track-vol-row{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.vol-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;background:var(--surface-3);outline:none;cursor:pointer;border:none;padding:0;min-width:0}.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--tc, var(--accent-color));cursor:pointer}.vol-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--tc, var(--accent-color));border:none;cursor:pointer}.vol-pct{font-size:.75rem;color:var(--text-secondary);min-width:32px;text-align:right;font-variant-numeric:tabular-nums}.track-dl{font-size:1rem;color:var(--text-secondary);text-decoration:none;padding:.2rem .4rem;border-radius:6px;flex-shrink:0;transition:color .2s}.track-dl:hover{color:var(--accent-color)}.fx-btn{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .45rem;font-size:.95rem;border-radius:6px;box-shadow:none;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-secondary);flex-shrink:0;min-width:36px;line-height:1}.fx-btn:hover:not(:disabled){transform:none;background:var(--surface-3);box-shadow:none}.fx-btn.active{background:var(--surface-3);border-color:var(--border-strong);color:var(--text-color)}.fx-btn.has-filter{border-color:var(--accent-color);color:var(--accent-color)}.fx-btn.active.has-filter{background:var(--accent-soft)}.fx-panel{background:var(--surface-1);border:1px solid var(--border-color);border-top:none;border-radius:0 0 12px 12px;padding:.7rem 1rem .8rem 1.5rem;display:flex;flex-direction:column;gap:.85rem}.fx-group{display:flex;flex-direction:column;gap:.55rem}.fx-group+.fx-group{padding-top:.75rem;border-top:1px solid var(--border-color)}.fx-group-title{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);opacity:.75}.fx-group-note{font-weight:500;letter-spacing:.02em;text-transform:none;opacity:.7;margin-left:.4rem}.fx-row{display:flex;align-items:center;gap:.75rem}.fx-label{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--text-secondary);min-width:34px;text-align:left}.fx-slider:disabled{opacity:.4;cursor:not-allowed}.fx-label.active{color:var(--tc, var(--accent-color))}.fx-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:3px;border-radius:2px;background:var(--surface-3);outline:none;cursor:pointer;border:none;padding:0;min-width:0}.fx-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--tc, var(--accent-color));cursor:pointer}.fx-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--tc, var(--accent-color));border:none;cursor:pointer}.fx-freq{font-size:.7rem;color:var(--text-secondary);min-width:54px;text-align:right;font-variant-numeric:tabular-nums}.fx-reset{padding:0;width:18px;height:18px;font-size:.8rem;line-height:1;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-secondary);box-shadow:none;flex-shrink:0;display:flex;align-items:center;justify-content:center}.fx-reset:hover{transform:none;box-shadow:none;background:var(--danger-soft);border-color:var(--danger-color);color:var(--danger-color)}.seek-wrap{margin-bottom:1.25rem}.seek-bar-bg{position:relative;height:6px;background:var(--surface-3);border-radius:3px;cursor:pointer;margin-bottom:.5rem}.seek-bar-fill{position:absolute;left:0;top:0;height:100%;background:var(--accent-color);border-radius:3px;pointer-events:none}.seek-bar-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--card-bg);border:2px solid var(--accent-color);pointer-events:none;box-shadow:0 1px 4px var(--shadow-color)}.seek-labels{display:flex;justify-content:space-between;font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--text-secondary)}.transport-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.download-mix-btn{height:40px;padding:0 1.1rem;border-radius:20px;font-size:.85rem;font-weight:600;background:var(--surface-2);border:1px solid var(--accent-color);color:var(--text-color);cursor:pointer;transition:background .15s,opacity .15s;white-space:nowrap;box-shadow:none}.download-mix-btn:hover:not(:disabled){background:var(--surface-3);transform:none;box-shadow:none}.transport-refine-btn{height:40px;padding:0 1.1rem;border-radius:20px;font-size:.85rem;font-weight:600;background:transparent;border:1px solid var(--accent-2-soft-border);color:var(--accent-2);cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;box-shadow:none}.transport-refine-btn:hover:not(:disabled){background:var(--accent-2-soft);border-color:var(--accent-2);transform:none;box-shadow:none}.download-mix-btn:disabled{opacity:.45;cursor:default}.play-pause-btn{width:52px;height:52px;border-radius:50%;font-size:1.3rem;padding:0;display:flex;align-items:center;justify-content:center;background:var(--accent-color);box-shadow:0 4px 16px var(--shadow-color)}.play-pause-btn:hover:not(:disabled){background:var(--accent-hover)}.download-btn{display:inline-block;text-decoration:none;color:var(--accent-color);font-weight:600;font-size:.9rem;border:1px solid var(--accent-color);padding:.5rem 1rem;border-radius:8px;transition:all .2s}.download-btn:hover{background:var(--accent-color);color:var(--accent-contrast)}.upload-container>button{align-self:center}.song-description{display:block;width:100%;max-width:480px;margin:0 auto 1.5rem;background:var(--surface-1);border:1px solid var(--border-color);border-radius:12px;padding:.75rem 1rem;color:var(--text-color);font-family:inherit;font-size:.9rem;line-height:1.5;resize:vertical;box-sizing:border-box;transition:border-color .2s}.song-description:focus{outline:none;border-color:var(--accent-color)}.song-description::placeholder{color:var(--text-secondary)}.bpm-section{margin-bottom:1.75rem}.bpm-row{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.75rem}.bpm-display{display:flex;flex-direction:column;align-items:center;min-width:64px}.bpm-number{font-size:2.4rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:var(--accent-3)}.bpm-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-top:2px}.bpm-adj{width:36px;height:36px;padding:0;border-radius:50%;font-size:1.3rem;font-weight:400;display:flex;align-items:center;justify-content:center;box-shadow:none}.bpm-adj{background:var(--accent-3)}.bpm-adj:hover:not(:disabled){transform:none;background:var(--accent-3-hover);box-shadow:none}.tap-btn{padding:.4rem .9rem;font-size:.82rem;font-weight:600;border-radius:20px;box-shadow:none;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-color)}.tap-btn:hover:not(:disabled){transform:none;background:var(--surface-3);box-shadow:none}.bpm-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:240px;height:4px;border-radius:2px;background:var(--surface-3);outline:none;cursor:pointer;display:block;margin:0 auto;border:none;padding:0}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent-3);cursor:pointer}.bpm-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent-3);cursor:pointer;border:none}.listen-btn{padding:.4rem .9rem;font-size:.82rem;font-weight:600;border-radius:20px;box-shadow:none;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-color)}.listen-btn:hover:not(:disabled){transform:none;background:var(--surface-3);box-shadow:none}.listen-btn.active{background:var(--accent-soft);border-color:var(--accent-color);color:var(--accent-color)}.live-bpm-label{font-size:.8rem;color:var(--text-secondary);margin:0 0 .75rem;letter-spacing:.05em}.beat-row{display:flex;justify-content:center;gap:1rem;margin-bottom:1.25rem}.beat-dot{width:14px;height:14px;border-radius:50%;background:var(--surface-3);transition:background .05s,transform .05s}.beat-dot.active{background:var(--border-strong);transform:scale(1.25)}.beat-dot.downbeat.active{background:var(--accent-3);transform:scale(1.5)}.record-panel{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:1.5rem;min-height:140px;background:var(--surface-1);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem}.record-btn-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.record-btn-wrap.recording:before{content:"";position:absolute;width:90px;height:90px;border-radius:50%;border:2px solid var(--danger-color);animation:pulse-ring 1.2s ease-out infinite;pointer-events:none}@keyframes pulse-ring{0%{transform:scale(.9);opacity:.8}to{transform:scale(1.5);opacity:0}}.record-btn{width:68px;height:68px;border-radius:50%;font-size:1.6rem;padding:0;display:flex;align-items:center;justify-content:center;background:var(--accent-3);box-shadow:0 4px 20px var(--shadow-color);position:relative;z-index:1}.record-btn:hover:not(:disabled){background:var(--accent-3-hover)}.record-btn-wrap.recording .record-btn{background:var(--danger-color)}.record-timer{font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--danger-color);margin:0}.countin-number{font-size:4rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:var(--accent-color, var(--danger-color));margin:.25rem 0}.record-hint{color:var(--text-secondary);font-size:.9rem;margin:0}.record-headphone-hint{color:var(--text-secondary);font-size:.78rem;line-height:1.5;margin:0;max-width:320px;text-align:center}.record-main{display:flex;flex-direction:column;align-items:center;gap:.75rem;flex-shrink:0}.metronome-panel{background:var(--surface-1);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem;text-align:left}.metronome-hint{font-size:.85rem;color:var(--text-secondary);margin:0 0 1rem;line-height:1.5}.metronome-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.metronome-panel-header .section-heading{margin:0}.metronome-enable-btn{flex-shrink:0;padding:.3rem .8rem;font-size:.78rem;font-weight:700;border-radius:20px;box-shadow:none;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-secondary)}.metronome-enable-btn:hover:not(:disabled){transform:none;background:var(--surface-3);box-shadow:none}.metronome-enable-btn.is-active{background:var(--success-soft);border-color:var(--success-color);color:var(--success-color)}.metronome-bpm-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .85rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}.metronome-slider-group{display:flex;align-items:center;gap:.85rem;flex:1 1 200px;min-width:0}.metronome-adjust-group{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.metronome-bpm-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;background:var(--surface-3);outline:none;cursor:pointer;border:none;padding:0;min-width:0}.metronome-bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent-3);cursor:pointer}.metronome-bpm-slider::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent-3);border:none;cursor:pointer}.metronome-preview-btn{flex-shrink:0;width:2.1rem;height:2.1rem;padding:0;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-color);font-size:.8rem;display:flex;align-items:center;justify-content:center;box-shadow:none}.metronome-preview-btn:hover{background:var(--accent-3);border-color:var(--accent-3);color:var(--accent-3-contrast);transform:none;box-shadow:none}.metronome-bpm-input{width:2.8rem;flex-shrink:0;padding:.3rem;font-size:.9rem;font-variant-numeric:tabular-nums;text-align:center;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:8px;color:var(--text-color);-moz-appearance:textfield}.metronome-bpm-input::-webkit-outer-spin-button,.metronome-bpm-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.metronome-bpm-adj{flex-shrink:0;width:1.7rem;height:1.7rem;padding:0;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-color);font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:none}.metronome-bpm-adj:hover:not(:disabled){background:var(--accent-3);border-color:var(--accent-3);color:var(--accent-3-contrast);transform:none;box-shadow:none}.metronome-bpm-unit{font-size:.8rem;color:var(--text-secondary);flex-shrink:0}.metronome-active-hint{color:var(--text-secondary);font-size:.8rem;margin:0;max-width:320px;text-align:center}.recorded-preview{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;max-width:420px;margin:0 auto}.generate-panel{background:var(--surface-1);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem}.simple-player{width:100%;display:flex;flex-direction:column;gap:.4rem}.simple-player-transport{display:flex;align-items:center;gap:1rem}.simple-player-btn{width:40px;height:40px;font-size:1rem;flex-shrink:0;box-shadow:none}.simple-player-btn:hover:not(:disabled){box-shadow:none}.simple-player-seek-bar{flex:1;min-width:0;margin-bottom:0}.pattern-row{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 0 1.5rem;flex-wrap:wrap}.pattern-badge{background:var(--surface-1);border:1px solid var(--border-color);border-radius:20px;padding:.35rem .9rem;font-size:.88rem;color:var(--text-secondary)}.pattern-badge strong{color:var(--accent-color)}.regen-btn{background:transparent;border:1px solid var(--accent-2);color:var(--accent-2);padding:.35rem 1rem;font-size:.88rem;font-weight:500;border-radius:20px;box-shadow:none}.regen-btn:hover:not(:disabled){background:var(--accent-2);color:var(--accent-2-contrast);transform:none;box-shadow:none}.tempo-section{margin-bottom:1.5rem;text-align:left}.tempo-blurb{margin:0 0 .9rem;font-size:.78rem;line-height:1.5;color:var(--text-secondary)}.tempo-find-btn{height:34px;border-color:var(--accent-color);padding:0 1rem;border-radius:18px;font-size:.78rem;font-weight:600;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-color);cursor:pointer;box-shadow:none;transition:background .15s,opacity .15s}.tempo-find-btn:hover:not(:disabled){background:var(--surface-3);transform:none;box-shadow:none}.tempo-find-btn:disabled{opacity:.5;cursor:not-allowed}.tempo-panel{background:var(--surface-1);border:1px solid var(--border-color);border-radius:12px;padding:1rem 1.1rem}.tempo-stepper{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}.tempo-step-btn{min-width:44px;height:34px;padding:0 .6rem;border-radius:17px;font-size:.8rem;font-weight:700;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-color);cursor:pointer;box-shadow:none}.tempo-step-btn:hover:not(:disabled){background:var(--surface-3);transform:none;box-shadow:none}.tempo-step-btn:disabled,.tempo-reset-btn:disabled{opacity:.5;cursor:not-allowed}.tempo-value{min-width:5.5rem;text-align:center;font-size:1.6rem;font-weight:800;letter-spacing:-.01em;color:var(--text-color);font-variant-numeric:tabular-nums}.tempo-value small{margin-left:.3rem;font-size:.6rem;font-weight:700;letter-spacing:.09em;color:var(--text-secondary)}.tempo-reset-btn{height:28px;padding:0 .7rem;border-radius:14px;font-size:.72rem;font-weight:600;background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;box-shadow:none}.tempo-reset-btn:hover:not(:disabled){background:var(--surface-2);transform:none;box-shadow:none}.tempo-ratios{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}.tempo-ratios-label{margin-right:.15rem;font-size:.7rem;font-weight:600;color:var(--text-secondary)}.tempo-ratio-btn{height:26px;padding:0 .6rem;border-radius:13px;font-size:.74rem;font-weight:700;background:transparent;border:1px solid var(--border-strong);color:var(--text-secondary);cursor:pointer;box-shadow:none}.tempo-ratio-btn:hover:not(:disabled){background:var(--surface-2);color:var(--text-color);transform:none;box-shadow:none}.tempo-ratio-btn:disabled{opacity:.5;cursor:not-allowed}.tempo-player.is-loading{opacity:.45;pointer-events:none}.tempo-hint{margin:.75rem 0 0;text-align:center;font-size:.78rem;color:var(--text-secondary)}.tempo-note{margin:.6rem 0 0;text-align:center;font-size:.72rem;line-height:1.5;color:var(--text-secondary);opacity:.8}.players-section{margin-bottom:1.5rem;text-align:left}.preset-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}.preset-tag{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .8rem;font-size:.78rem;font-weight:700;border-radius:20px;box-shadow:none;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-secondary)}.preset-tag:hover:not(:disabled){transform:none;background:var(--surface-3);box-shadow:none}.preset-tag.is-active{background:var(--success-soft);border-color:var(--success-color);color:var(--success-color)}.preset-tag:disabled{opacity:.5;cursor:not-allowed}.preset-tag-dots{display:inline-flex;gap:2px}.preset-tag-dots i{width:6px;height:6px;border-radius:50%;display:block}.player-row{display:flex;align-items:center;gap:.9rem;background:var(--surface-1);border:1px solid var(--border-color);border-radius:12px;padding:.75rem 1rem}.player-row+.player-row{margin-top:.6rem}.player-color-bar{width:4px;height:32px;border-radius:2px;flex-shrink:0}.player-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem;text-align:left}.player-name{font-size:.9rem;font-weight:600}.player-description{font-size:.78rem;font-weight:400;color:var(--text-secondary);line-height:1.4}.player-enable-btn{flex-shrink:0;padding:.3rem .8rem;font-size:.78rem;font-weight:700;border-radius:20px;box-shadow:none;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-secondary)}.player-enable-btn:hover:not(:disabled){transform:none;background:var(--surface-3);box-shadow:none}.player-enable-btn.is-active{background:var(--success-soft);border-color:var(--success-color);color:var(--success-color)}.player-enable-btn:disabled{opacity:.5;cursor:not-allowed}.samples-hint{font-size:.85rem;color:var(--text-secondary);margin:0 0 1.5rem;line-height:1.5}.sample-list{text-align:left}.sample-block{display:flex;flex-direction:column;gap:.75rem;background:var(--surface-1);border:1px solid var(--border-color);border-radius:12px;padding:1rem 1.1rem}.sample-block+.sample-block{margin-top:.75rem}.sample-header{display:flex;align-items:center;gap:.9rem}.sample-color-bar{width:4px;height:32px;border-radius:2px;flex-shrink:0}.sample-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem;text-align:left}.sample-title{font-size:.9rem;font-weight:600}.sample-meta{font-size:.78rem;color:var(--text-secondary)}.sample-genre-badge{flex-shrink:0;background:var(--surface-2);border:1px solid var(--border-color);border-radius:20px;padding:.3rem .8rem;font-size:.72rem;font-weight:600;color:var(--text-secondary)}.refine-panel{margin:0 0 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.refine-form{width:100%;max-width:480px;display:flex;flex-direction:column;gap:.75rem;background:var(--accent-2-soft);border:1px solid var(--accent-2-soft-border);border-radius:16px;padding:1.25rem 1.5rem}.refine-hint{font-size:.85rem;color:var(--text-secondary);margin:0;line-height:1.5;text-align:left}.refine-actions{display:flex;gap:.75rem;justify-content:flex-end}.refine-cancel-btn{background:transparent;border:1px solid var(--border-strong);color:var(--text-secondary);padding:.4rem 1rem;font-size:.85rem;border-radius:8px;box-shadow:none}.refine-cancel-btn:hover:not(:disabled){border-color:var(--text-color);color:var(--text-color);background:transparent;transform:none;box-shadow:none}.refine-go-btn{background:var(--accent-color);color:var(--accent-contrast);padding:.4rem 1.2rem;font-size:.85rem;font-weight:700;border-radius:8px;border:none}.refine-go-btn:hover:not(:disabled){background:var(--accent-hover);transform:none;box-shadow:none}.refine-error{font-size:.82rem;color:var(--danger-color);margin:0}.refine-done-note{font-size:.82rem;color:var(--success-color);margin:0}.refine-provider-toggle{display:inline-flex;gap:.25rem;padding:.25rem;background:var(--surface-1);border:1px solid var(--border-color);border-radius:10px;align-self:center}.refine-provider-btn{background:transparent;border:none;color:var(--text-secondary);font-size:.82rem;font-weight:600;padding:.35rem 1rem;border-radius:7px;box-shadow:none;transition:background .15s,color .15s}.refine-provider-btn:hover:not(:disabled):not(.is-active){color:var(--text-color);background:transparent;transform:none;box-shadow:none}.refine-provider-btn.is-active{background:var(--accent-color);color:var(--accent-contrast)}.refine-api-key-input{display:block;width:100%;max-width:480px;margin:0 auto;background:var(--surface-1);border:1px solid var(--border-color);border-radius:12px;padding:.65rem 1rem;color:var(--text-color);font-family:inherit;font-size:.9rem;box-sizing:border-box;transition:border-color .2s}.refine-api-key-input:focus{outline:none;border-color:var(--accent-color)}.refine-api-key-hint{font-size:.75rem;color:var(--text-secondary);margin:.35rem 0 0;text-align:left}.refine-forget-key-btn{background:transparent;border:none;color:var(--text-secondary);font-size:.78rem;text-decoration:underline;padding:0;box-shadow:none;align-self:flex-start}.refine-forget-key-btn:hover:not(:disabled){color:var(--text-color);background:transparent;transform:none;box-shadow:none}.sidebar{width:200px;flex-shrink:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:calc(64px + 1.25rem) .75rem 1.5rem;transition:width .2s ease;cursor:pointer}.sidebar.is-collapsed{width:60px;padding:calc(64px + 1.25rem) .5rem 1.5rem}.sidebar.is-collapsed .sidebar-nav-item{justify-content:center;padding:.7rem}.sidebar.is-collapsed .sidebar-nav-label{display:none}.sidebar-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}.sidebar-nav-item{width:100%;display:flex;align-items:center;gap:.75rem;background:transparent;border:none;color:var(--text-color);font-size:.82rem;font-weight:600;padding:.7rem .9rem;border-radius:10px;box-shadow:none;justify-content:flex-start}.sidebar-nav-item:hover:not(:disabled){background:var(--border-color);transform:none;box-shadow:none}.sidebar-nav-label{white-space:nowrap;display:flex;align-items:center;gap:.5rem}.sidebar-nav-item.is-soon{opacity:.55}.sidebar-nav-item.is-soon:hover{opacity:.8}@media (max-width: 640px){.app-shell{flex-direction:column}.sidebar,.sidebar.is-collapsed{width:100%;height:auto;flex-direction:row;align-items:center;padding:.5rem .75rem;order:1;position:sticky;top:auto;bottom:0;z-index:20;background:var(--bg-color)}.sidebar-nav{flex:1;flex-direction:row;gap:.15rem}.sidebar-nav>li{flex:1;display:flex}.sidebar-nav-item,.sidebar.is-collapsed .sidebar-nav-item{flex:1;width:100%}.sidebar-nav-item,.sidebar.is-collapsed .sidebar-nav-item{width:auto;justify-content:center;padding:.7rem .3rem;font-size:1.35rem;position:relative}.sidebar-nav-label{display:none}.sidebar-nav-item:hover .sidebar-nav-label,.sidebar-nav-item:focus .sidebar-nav-label{display:block;position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:.4rem;background:var(--surface-3);border:1px solid var(--border-color);padding:.3rem .6rem;border-radius:8px;font-size:.72rem;white-space:nowrap;box-shadow:0 4px 10px var(--shadow-color);z-index:30}main{padding:1rem}.upload-container,.results-container,.samples-container{padding:1.5rem 1.1rem;border-radius:16px}.page-breadcrumb{margin:-1.1rem 0 1rem;padding:.5rem 0}.metronome-panel{padding:1.1rem}h2{font-size:1.4rem;margin-bottom:1.5rem}button{padding:.85rem 1.5rem;font-size:1rem}.transport-row{gap:.6rem}.play-pause-btn{width:46px;height:46px;font-size:1.1rem}.download-mix-btn,.transport-refine-btn{height:36px;padding:0 .85rem;font-size:.8rem}.track-row{flex-wrap:wrap;gap:.6rem;padding:.65rem .8rem}.track-name{min-width:0;flex:1 1 auto;font-size:.85rem}.track-vol-row{flex:1 1 100%}.chord-readout{gap:.6rem;padding:.85rem 1.1rem;flex-wrap:wrap}.chord-readout-current{font-size:1.8rem}.fx-panel{padding:.65rem .8rem .75rem}.fx-row{flex-wrap:wrap}.player-row{padding:.65rem .8rem}.sample-block{padding:.8rem .9rem}.refine-form{padding:1rem 1.1rem}.refine-actions{flex-wrap:wrap}.record-btn{width:60px;height:60px;font-size:1.4rem}.bpm-slider{width:100%;max-width:240px}}.metronome-panel-title{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;min-width:0}.metronome-panel-title .section-heading{margin:0}.headphone-required{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .5rem;border-radius:10px;background:var(--accent-soft);border:1px solid var(--accent-soft-border);color:var(--accent-color);font-size:.66rem;font-weight:700;letter-spacing:.03em;white-space:nowrap}*,*:before,*:after{box-sizing:border-box}:root{--bg-color: #0d1117;--card-bg: rgba(22, 27, 34, .6);--surface-1: rgba(255, 255, 255, .04);--surface-2: rgba(255, 255, 255, .07);--surface-3: rgba(255, 255, 255, .11);--border-color: rgba(255, 255, 255, .1);--border-strong: rgba(255, 255, 255, .22);--text-color: #e6edf3;--text-secondary: #8b949e;--accent-color: #b39a4b;--accent-hover: #907b3d;--accent-soft: rgba(179, 154, 75, .16);--accent-soft-border: rgba(179, 154, 75, .38);--accent-contrast: #1a1400;--accent-2: #9268bb;--accent-2-hover: #774ba6;--accent-2-soft: rgba(146, 104, 187, .16);--accent-2-soft-border: rgba(146, 104, 187, .38);--accent-2-contrast: #faf5ff;--accent-3: #b35665;--accent-3-hover: #944350;--accent-3-soft: rgba(179, 86, 101, .16);--accent-3-soft-border: rgba(179, 86, 101, .38);--accent-3-contrast: #fff1f2;--danger-color: #b35656;--danger-soft: rgba(179, 86, 86, .14);--success-color: #78974a;--success-hover: #5d7439;--success-soft: rgba(120, 151, 74, .16);--success-soft-border: rgba(120, 151, 74, .38);--success-contrast: #131a00;--shadow-color: rgba(0, 0, 0, .45);--primary-color: var(--accent-color)}:root[data-theme=light]{--bg-color: #dedcd6;--card-bg: #e3e1da;--surface-1: #dad8cf;--surface-2: #cecbc1;--surface-3: #c1bdb1;--border-color: rgba(15, 23, 31, .1);--border-strong: rgba(15, 23, 31, .22);--text-color: #1b1f24;--text-secondary: #5b6470;--accent-color: #916a26;--accent-hover: #71531e;--accent-soft: rgba(145, 106, 38, .08);--accent-soft-border: rgba(145, 106, 38, .28);--accent-contrast: #ffffff;--accent-2: #6f34a2;--accent-2-hover: #5a2a83;--accent-2-soft: rgba(111, 52, 162, .08);--accent-2-soft-border: rgba(111, 52, 162, .28);--accent-2-contrast: #ffffff;--accent-3: #952d47;--accent-3-hover: #763724;--accent-3-soft: rgba(149, 45, 71, .08);--accent-3-soft-border: rgba(149, 45, 71, .28);--accent-3-contrast: #ffffff;--danger-color: #8a2d2d;--danger-soft: rgba(138, 45, 45, .1);--success-color: #56782a;--success-hover: #415a20;--success-soft: rgba(86, 120, 42, .09);--success-soft-border: rgba(86, 120, 42, .3);--success-contrast: #ffffff;--shadow-color: rgba(15, 23, 31, .1)}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;transition:background-color .2s ease,color .2s ease}::selection{background:var(--border-strong);color:var(--text-color)}#root{width:100%}