@font-face{font-family:Inter;src:local('Inter');font-display:swap}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#101827;color:#edf2fa;font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.5}button,input,a,label.button{font:inherit}button,a,label.button{touch-action:manipulation}button,.button,.quiet{border:1px solid #334154;background:#223044;color:#edf2fa;border-radius:9px;min-height:44px;padding:10px 14px;font-size:.875rem;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,border-color .15s}button:hover,.button:hover{background:#2b3a50;border-color:#647389}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #47c5b1;outline-offset:3px}input{min-width:0}input[type=file]{display:none}input[type=range]{width:100%;height:44px;accent-color:#47c5b1;cursor:pointer}input[type=number],input[type=text],input:not([type]){background:#111c2b;border:1px solid #39485d;color:#edf2fa;border-radius:7px;min-height:44px;padding:8px 10px;width:100%}input[type=color]{border:0;width:80px;height:44px;background:transparent;cursor:pointer}[hidden]{display:none!important}.topbar{max-width:1512px;padding:24px 40px;margin:auto;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #293447}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:1.35rem;font-weight:700;letter-spacing:-.025em}.brand-mark{width:44px;height:44px;border-radius:12px;background:#47c5b1;color:#102c2c;display:grid;place-items:center;font-size:1.7rem}.brand small{display:block;font-size:.75rem;color:#9cabbf;letter-spacing:.05em;font-weight:500}.top-actions{display:flex;align-items:center;gap:12px}.quiet{background:transparent}.status{font-size:.8rem;color:#a7b6cb;background:#1b2738;border:1px solid #334154;padding:5px 10px;border-radius:30px}.status.offline{color:#e6b66c;border-color:#6f593d}main{max-width:1512px;padding:36px 40px 24px;margin:auto}.page-heading{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow{font-size:.75rem;letter-spacing:.13em;color:#47c5b1;font-weight:700}h1,h2,h3,p{margin:0}h1{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.2;letter-spacing:-.04em;margin:8px 0;overflow-wrap:anywhere}h2{font-size:1.2rem;line-height:1.35;letter-spacing:-.025em;margin:5px 0}.page-heading p,.muted{color:#9cabbf}.page-heading p{font-size:.9rem;max-width:680px}.upload-button{display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:12px 18px;background:#47c5b1;color:#102b2d;font-weight:700;font-size:.875rem;border-radius:9px;min-height:48px;cursor:pointer;flex-shrink:0}.upload-button span{font-size:1.25rem}.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:22px}.main-column,.side-column{min-width:0;display:flex;flex-direction:column;gap:22px}.panel{border:1px solid #2e3b4f;border-radius:15px;background:#162133;padding:24px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.chip,.count{border:1px solid #36455b;padding:4px 10px;color:#aebbd0;border-radius:7px;font-size:.8rem;white-space:nowrap;font-variant-numeric:tabular-nums}.count{font-weight:700}.wave-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.segmented{display:flex;border:1px solid #354258;border-radius:8px;padding:3px;gap:3px}.segmented button{border:0;background:transparent;min-height:38px;padding:7px 11px;color:#9cabbf}.segmented .selected{background:#2b3b50;color:#fff}.hint,.fine{font-size:.8rem;color:#a0adc1;line-height:1.5}.hint{flex:1}.zoom-label{font-size:.75rem;color:#a0adc1;display:flex;align-items:center;gap:8px}.zoom-label input{width:70px}.wave-scroll{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid #2f4056;border-radius:9px;background:#101b2c}.wave-stage{height:190px;min-width:100%;position:relative;touch-action:pan-y;user-select:none}#wave{position:absolute;top:20px;width:100%;height:134px}#region-overlays{position:absolute;inset:0 0 28px;pointer-events:none}.wave-region{position:absolute;top:0;bottom:0;border-left:2px solid var(--color);background:color-mix(in srgb,var(--color) 12%,transparent);padding:4px 6px;overflow:hidden;color:var(--color);font-size:.75rem;white-space:nowrap}.wave-region.suggested{border-left-style:dashed}#selection-overlay{position:absolute;top:0;bottom:28px;border-left:2px solid #e6b66c;border-right:2px solid #e6b66c;background:#e6b66c18;pointer-events:none;display:flex;justify-content:space-between;min-width:1px}#selection-overlay span{padding:0 4px;background:#e6b66c;color:#172334;font-size:.75rem;font-weight:800;height:20px}#cursor{position:absolute;top:0;bottom:28px;width:2px;background:white;box-shadow:0 0 8px #ffffff30;pointer-events:none}#time-labels{position:absolute;bottom:0;left:0;right:0;height:28px;border-top:1px solid #293c52;font-size:.75rem;color:#91a0b5;font-variant-numeric:tabular-nums}#time-labels span{position:absolute;transform:translateX(-50%);padding-top:4px}.selection-editor{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px;padding-bottom:20px;border-bottom:1px solid #2e3b4f}.range-fields{display:flex;gap:8px;align-items:center}.range-fields label{font-size:.75rem;color:#a7b7cc;display:flex;flex-direction:column;gap:4px}.range-fields input{width:100px;font-variant-numeric:tabular-nums}.range-dash{color:#66768c;margin-top:20px}.selection-actions{display:flex;gap:7px;align-self:flex-end;flex-wrap:wrap}.selection-actions button{padding:9px 10px;font-size:.8rem}.accent{color:#75dfce;border-color:#3c746e;background:#1d3a42}#loop[aria-pressed=true]{background:#604e2f;border-color:#e6b66c;color:#ffe1a4}.song-controls{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:22px}.control-group{display:flex;flex-direction:column;min-width:0;gap:6px}.control-label{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;color:#c3cee0}.control-label strong{color:#edf2fa}.stepper{display:flex;align-items:center;gap:12px}.stepper strong{min-width:105px;text-align:center;font-size:1.125rem;font-variant-numeric:tabular-nums}.stepper button{font-size:1.25rem;padding:4px 13px}.slider-captions{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:#9cabbf}.text-button{background:none;border:0;color:#9fb0ca;min-height:36px;padding:4px;font-size:.8rem;text-decoration:underline;text-underline-offset:3px}.primary{background:#47c5b1;border-color:#47c5b1;color:#102b2d}.primary:hover{background:#68dac8;border-color:#68dac8}.amber{color:#e6b66c}.amber-chip{color:#e6b66c;border-color:#62543f}.amber-button{background:#e6b66c;border-color:#e6b66c;color:#2b2418}.amber-button:hover{background:#efc789;border-color:#efc789}.intro-panel>p{font-size:.875rem;margin-bottom:16px}.intro-actions{display:flex;flex-wrap:wrap;gap:9px}.piano-strip{margin:22px 0 14px;background:#101b2c;border:1px solid #344259;border-radius:8px;padding:8px;height:115px}.piano-strip canvas{width:100%;height:100%}.piano-controls{display:flex;align-items:center;gap:22px}.piano-controls .control-group{flex:1}#melody-message{margin-top:10px}details{margin-top:16px;border-top:1px solid #334154;padding-top:14px}summary{font-size:.875rem;color:#cfdaeb;cursor:pointer;min-height:44px}#note-list{max-height:260px;overflow:auto;margin:10px 0;display:grid;gap:5px}.note-row{display:grid;grid-template-columns:60px 50px 1fr 44px 44px 44px;align-items:center;gap:6px;font-size:.8rem;padding:4px 0;border-bottom:1px solid #29394e}.note-row.low{color:#e6b66c}.note-row button{padding:4px;font-size:1rem}#region-list{display:flex;flex-direction:column;gap:9px;margin:18px 0}.region-card{padding:12px;border:1px solid #364359;border-left:3px solid var(--color);border-radius:8px;background:#1b283c}.region-card.active{background:#25364b}.region-card .region-title{font-size:.875rem;color:#e8eff9;font-weight:600;overflow-wrap:anywhere}.region-card .region-times{font-size:.75rem;color:#9eacc3;font-variant-numeric:tabular-nums;margin:4px 0 8px}.region-card .region-buttons{display:flex;gap:6px}.region-card button{flex:1;font-size:.75rem;padding:6px;min-height:44px}.suggested-badge{font-size:.7rem;color:#e6b66c;font-weight:500;margin-left:6px}.region-empty{padding:22px 0;color:#a0adc1;font-size:.875rem}.full{width:100%}.save-panel h2{margin-bottom:16px}.save-panel>p{margin:10px 0 18px}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.export-grid button{font-size:.8rem;padding:8px}.import-button{display:flex;justify-content:center;margin:8px 0;cursor:pointer}.danger{color:#eaa0ab}.notice{padding:13px 18px;background:#213446;border:1px solid #42617d;border-radius:9px;margin-bottom:20px;font-size:.875rem;overflow-wrap:anywhere}.notice.error{color:#ffbec7;border-color:#8b5261;background:#3e2637}.notice.busy::before{content:'';display:inline-block;width:12px;height:12px;border:2px solid #5a7b91;border-top-color:#8fe4d7;border-radius:50%;margin-right:10px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{max-width:760px;margin:55px auto 100px;text-align:center;padding:35px}.empty-state h2{font-size:1.65rem;margin:28px 0 12px}.empty-state p{max-width:570px;color:#a7b7cc;margin:0 auto 24px;font-size:1rem}.empty-state .fine{display:block;margin-top:18px}.empty-wave{height:110px;display:flex;align-items:center;justify-content:center;gap:9px}.empty-wave i{width:5px;border-radius:5px;background:#47c5b1;opacity:.8;height:28px}.empty-wave i:nth-child(3n){height:68px}.empty-wave i:nth-child(4n){height:95px}.empty-wave i:nth-child(5n){height:48px}.credits{max-width:1512px;margin:auto;padding:12px 40px 130px;color:#73859f;font-size:.75rem;display:flex;justify-content:space-between;align-items:center}.transport{position:fixed;z-index:20;bottom:0;left:0;right:0;display:flex;align-items:center;gap:20px;padding:16px max(24px,calc((100vw - 1432px)/2)) calc(16px + env(safe-area-inset-bottom));background:#1b283bee;border-top:1px solid #3b4b62;backdrop-filter:blur(20px)}.play-button{width:50px;height:50px;background:#47c5b1;color:#102b2d;border:0;font-size:1.3rem;flex-shrink:0}.transport-meta{display:flex;flex-direction:column;min-width:80px;font-size:.8rem}.transport-meta strong{font-size:.875rem}.transport-meta span{font-variant-numeric:tabular-nums;color:#9fb0c8}.transport-meta b{font-weight:500;color:#e4ecf9}#seek{flex:1;min-width:40px}.volume-label{display:flex;align-items:center;gap:8px;width:115px;color:#a3b7cf}.transport-tag{font-size:.75rem;white-space:nowrap;color:#e6b66c;max-width:170px;overflow:hidden;text-overflow:ellipsis}dialog{background:#192639;color:#edf2fa;border:1px solid #4a5a71;border-radius:14px;padding:24px;width:min(480px,calc(100vw - 32px));max-height:85vh;overflow:auto}dialog::backdrop{background:#050e1bbb;backdrop-filter:blur(3px)}dialog label{display:flex;flex-direction:column;gap:6px;font-size:.875rem;margin-bottom:18px}.dialog-range{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dialog-buttons{display:flex;justify-content:space-between;gap:12px}#info-dialog p{margin:16px 0 24px;color:#bac8dc;white-space:pre-line}.busy-action{opacity:.55;pointer-events:none}@media(max-width:1150px){.workspace-grid{grid-template-columns:minmax(0,1fr) 300px}.panel{padding:20px}.topbar{padding:20px 28px}main{padding:28px}.selection-actions{width:100%}.hint{display:none}}@media(max-width:900px){.workspace-grid{grid-template-columns:1fr}.side-column{display:grid;grid-template-columns:1fr 1fr;align-items:start}.transport{gap:12px}.volume-label{display:none}.transport-tag{max-width:100px}.sibling{display:none}}@media(max-width:600px){.topbar{padding:14px 16px}.brand{font-size:1.15rem}.brand-mark{width:38px;height:38px;font-size:1.4rem}.brand small{font-size:.7rem}.top-actions{gap:7px}.top-actions button{padding:8px;font-size:.75rem}.status{font-size:.7rem;padding:4px 7px}main{padding:24px 14px 16px}.page-heading{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:22px}.page-heading .upload-button{width:100%}h1{font-size:1.75rem}.eyebrow{font-size:.7rem}.panel{padding:18px 15px;border-radius:12px}.section-heading{gap:8px}h2{font-size:1.125rem}.chip{font-size:.7rem;padding:4px 7px}.wave-toolbar{gap:8px;justify-content:space-between}.wave-stage{height:165px}#wave{height:112px;top:22px}.zoom-label{font-size:.7rem}.zoom-label input{width:55px}.selection-editor{gap:14px}.range-fields{width:100%}.range-fields label{flex:1}.range-fields input{width:100%}.selection-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.song-controls{grid-template-columns:1fr;gap:22px}.stepper{justify-content:space-between}.stepper strong{flex:1}.song-controls .control-group:first-child .fine{text-align:center}.side-column{display:flex;flex-direction:column}.side-column .panel{width:100%}.intro-actions{display:grid;grid-template-columns:1fr}.piano-controls{flex-wrap:wrap;gap:14px}.piano-controls>button{width:100%}.piano-controls .control-group{min-width:100%}.note-row{grid-template-columns:45px 42px 1fr 38px 38px 38px;gap:3px}.note-row button{min-width:38px}.credits{padding:12px 18px 150px;gap:15px;align-items:flex-start}.transport{padding:12px 14px calc(12px + env(safe-area-inset-bottom));gap:12px;flex-wrap:wrap}.transport-meta{flex:1}.play-button{width:46px;height:46px}#seek{order:6;flex-basis:100%;height:32px}.transport-tag{max-width:110px}.empty-state{margin:20px auto 40px;padding:20px 10px}.empty-state h2{font-size:1.4rem}.empty-wave{gap:6px}.empty-wave i{width:4px}.dialog-range{gap:12px}.transport #stop{padding:8px}.region-card button,.export-grid button{min-height:46px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}