:root{--paper:#f7f8f2;--white:#fffefa;--ink:#253e35;--muted:#81877e;--green:#264e40;--lime:#dceac2;--line:#e6e8df;--orange:#d77b4b;--serif:Georgia,'Times New Roman',serif;--sans:'Segoe UI',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button{color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b9c994;outline-offset:4px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.sidebar{width:246px;background:#f0f2e9;border-right:1px solid #e1e5d9;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:37px 23px 22px;z-index:3}.brand{display:flex;align-items:center;font-family:var(--serif);font-size:35px;letter-spacing:-1.7px;font-weight:600;gap:12px;line-height:1}.brand-dot{color:var(--orange);margin-left:-12px}.brand-mark{display:flex;width:31px;height:32px;position:relative;gap:3px}.brand-mark i{display:block;background:var(--green);width:8px;border-radius:2px}.brand-mark b{position:absolute;top:0;width:5px;height:18px;background:#f0f2e9;left:7px}.brand-mark b:last-child{left:18px}.workspace{display:flex;align-items:center;gap:10px;border:1px solid #dce1d3;border-radius:11px;padding:12px 10px;margin:36px 0 32px;font-size:12px;font-weight:600}.workspace-avatar{width:31px;height:31px;background:#e1e6d4;display:grid;place-items:center;font-family:var(--serif);font-size:18px;border-radius:7px}.workspace small{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:4px}.local-dot,.privacy-pill span{width:6px;height:6px;background:#5b8460;border-radius:100%;margin-left:auto}.nav-label,.sidebar-project-heading{font-size:9px;letter-spacing:1.8px;color:#8a9183;font-weight:600}.nav-label{padding-left:13px;margin-bottom:12px}.nav-item{width:100%;display:flex;align-items:center;gap:12px;padding:12px 13px;background:transparent;border:0;text-align:left;font-size:12px;border-radius:8px;margin-bottom:7px}.nav-item.selected{background:#e1e8d7;font-weight:600;color:#315440}.nav-item svg{width:17px;height:17px}.nav-item>span{margin-left:auto;font-size:10px;display:grid;place-items:center;background:#d1ddc5;width:21px;height:21px;border-radius:5px}.nav-item:hover{background:#e5eadc}.sidebar-project-heading{display:flex;align-items:center;justify-content:space-between;margin:30px 0 7px 13px;letter-spacing:1.3px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:0;border-radius:7px;padding:5px;flex-shrink:0}.icon-button svg{width:17px;height:17px}.icon-button:hover{background:#e9eddf}.sidebar-projects{overflow:auto;min-height:40px}.side-project{border:0;background:transparent;text-align:left;width:100%;padding:11px 13px;display:flex;gap:11px;align-items:center;font-size:11px;color:#777f71;border-radius:7px}.side-project svg{width:14px;height:14px}.side-project span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.side-project.active{background:#e7ecdf;color:#34513c}.side-project:hover{background:#e5eadc}.sidebar-bottom{margin-top:auto;padding-top:38px;text-align:center}.practice-art{height:106px;position:relative;overflow:hidden;margin-bottom:17px}.practice-art>span{position:absolute;color:#7c9665;font-size:30px;left:27px;top:6px;transform:rotate(-12deg)}.practice-art>span:nth-child(2){left:auto;right:26px;top:34px;font-size:23px;transform:rotate(18deg)}.art-keys{display:flex;gap:3px;width:96px;height:65px;background:#cad7b7;border:6px solid #cad7b7;position:absolute;left:51px;top:24px;transform:rotate(-9deg);border-radius:6px;box-shadow:5px 5px 0 #e1e6d7}.art-keys i{width:16px;background:#fffef8;border-radius:0 0 2px 2px}.art-keys b{position:absolute;left:12px;top:0;width:9px;height:31px;background:#52674b;border-radius:0 0 2px 2px}.art-keys b:nth-last-child(2){left:31px}.art-keys b:last-child{left:68px}.sidebar-bottom>strong{font-family:var(--serif);font-weight:400;font-size:21px}.sidebar-bottom>p{font-size:11px;line-height:1.8;color:#909586;margin:10px 0 30px}.local-status{border-top:1px solid #dfe4d7;padding-top:18px;font-size:9px;color:#8b9184;display:flex;align-items:center;justify-content:center;gap:6px}.local-status span{width:5px;height:5px;border-radius:50%;background:#7a966a}main{margin-left:246px}.topbar{height:83px;border-bottom:1px solid var(--line);padding:0 45px;display:flex;align-items:center;justify-content:space-between}.breadcrumb{font-size:11px;color:#92978a;display:flex;gap:17px;align-items:center}.breadcrumb strong{font-weight:500;color:#56624f}.breadcrumb>span{color:#c1c6b9}.topbar-right{display:flex;align-items:center;gap:18px}.privacy-pill{display:flex;align-items:center;gap:7px;font-size:10px;color:#78856b}.privacy-pill span{margin:0;width:5px;height:5px}.avatar{width:30px;height:30px;display:grid;place-items:center;background:#e7e9db;border-radius:50%;font-family:var(--serif);font-size:15px}.main-content{max-width:1450px;padding:42px 45px 0;margin:auto}.welcome{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;display:flex;gap:8px;align-items:center;color:#7b886b;margin-bottom:14px}.eyebrow>span{width:16px;height:1px;background:#8b9b76}h1{font-family:var(--serif);font-size:clamp(35px,3.4vw,50px);font-weight:400;line-height:1.1;letter-spacing:-1.5px;margin:0}h1 em{font-weight:400;color:#738369}.welcome p{font-size:12px;color:#8a9083;margin:15px 0 0}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:7px;padding:12px 17px;font-size:11px;font-weight:500;line-height:1.4;transition:background .15s,transform .15s}.button svg{width:16px;height:16px}.button.primary{background:var(--green);color:#fbfdf7;box-shadow:0 3px 5px #243d3410}.button.primary:hover{background:#35634f;transform:translateY(-1px)}.button.subtle{background:transparent;color:#6f796a;border:1px solid #e2e6da;padding:8px 12px}.button.subtle:hover{background:#f0f3e9}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-heading h2{font-size:14px;font-weight:600;margin:0;display:flex;align-items:center;gap:9px}.section-heading h2>span{font-size:9px;background:#e8ecdf;border-radius:5px;padding:3px 6px;color:#8b947d}.search{display:flex;align-items:center;gap:8px}.search svg{width:14px;height:14px;color:#979e8f}.search input{font-size:10px;background:none;border:0;width:130px;outline:none;color:var(--ink)}.search input::placeholder{color:#969d8e}.project-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;max-height:310px;overflow:auto;padding-bottom:3px}.project-card{border:1px solid #e1e5d8;border-radius:10px;padding:17px 18px;text-align:left;background:#fffefa;display:flex;flex-direction:column;min-height:143px;position:relative;transition:border-color .15s,box-shadow .15s}.project-card.active{border-color:#8fa17a;background:#f1f4e8;box-shadow:0 0 0 1px #8fa17a33}.project-card:hover{border-color:#94a781}.card-top{display:flex;justify-content:space-between;align-items:center}.card-icon{width:31px;height:31px;border-radius:8px;background:#e7eddc;color:#6b8356;display:grid;place-items:center}.card-icon svg{width:16px;height:16px}.project-card:nth-child(3n+2) .card-icon{background:#f6e6d9;color:#b18360}.project-card:nth-child(3n) .card-icon{background:#e3e9ed;color:#788f99}.card-badge{font-size:8px;letter-spacing:.3px;color:#81916d;background:#e9eedf;padding:4px 6px;border-radius:4px}.project-card strong{font-weight:600;font-size:12px;margin:14px 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-meta{font-size:9px;color:#93998a;display:flex;gap:8px}.card-meta span+span:before{content:'·';margin-right:8px}.project-card.add-card{background:transparent;border-style:dashed;display:flex;align-items:center;justify-content:center;gap:8px;color:#89927c;min-height:143px}.add-card>svg{width:23px;height:23px;color:#9ba58d}.add-card strong{font-size:11px;margin:0;font-weight:500}.add-card small{font-size:9px;color:#a5ad9b}.empty-search{grid-column:1/-1;color:var(--muted);padding:22px;text-align:center;font-size:12px}.library-section{margin-bottom:29px}.studio{background:var(--white);border:1px solid #e2e6da;border-radius:13px;overflow:hidden}.studio-heading{padding:16px 24px 0;display:flex;align-items:center;justify-content:space-between}.studio-label{font-size:8px;letter-spacing:1.5px;display:flex;gap:6px;align-items:center;color:#89947d}.live-dot{width:5px;height:5px;background:#94a676;border-radius:50%}.save-status{display:flex;align-items:center;gap:4px;font-size:9px;color:#9ca38f}.save-status svg{width:12px;height:12px}.track-heading{display:flex;align-items:center;gap:13px;padding:19px 24px 23px}.track-cover{width:48px;height:48px;border-radius:9px;background:#e8eddc;color:#72865e;display:grid;place-items:center;flex-shrink:0}.track-cover svg{width:25px;height:25px}.track-title{min-width:0}.track-title h2{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.4px;margin:0 0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-meta{display:flex;gap:9px;align-items:center;font-size:9px;color:#939b89}.track-meta span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.track-meta svg{width:11px;height:11px}.track-meta .meta-separator{width:2px;height:2px;background:#c6cbbf;border-radius:50%}.track-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.track-actions .button{font-size:9px}.track-actions svg{width:13px;height:13px}.danger{color:#a89b89}.danger:hover{background:#fae9e1;color:#b55c3f}.waveform-wrap{position:relative;margin:0 24px;background:#f4f6ee;border:1px solid #e9edde;border-radius:8px;padding:13px 16px 9px;height:143px;overflow:hidden}.waveform-label{display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.2px;color:#98a18d}.waveform-label>span:last-child{letter-spacing:0}#waveform{width:100%;height:84px;display:block}#seek{position:absolute;left:16px;top:30px;opacity:0;width:calc(100% - 32px);height:85px;cursor:pointer}#seek:focus-visible{opacity:.15}.waveform-times{display:flex;justify-content:space-between;font-size:8px;color:#a3aa99;font-variant-numeric:tabular-nums}.transport{display:flex;justify-content:space-between;align-items:center;padding:16px 24px 21px}.transport-left{display:flex;gap:8px;align-items:center;width:140px}.transport-left select{appearance:none;background:#f3f5ed;border:1px solid #e8ecdf;border-radius:5px;padding:5px 8px;font-size:9px;cursor:pointer}.icon-button.active{background:#e0eacb;color:#36563b}.transport-main{display:flex;align-items:center;gap:15px}.play-button{border:0;display:grid;place-items:center;background:var(--green);color:#fffefa;width:41px;height:41px;border-radius:50%;box-shadow:0 3px 7px #264e4025}.play-button:hover{background:#3b6852}.play-button svg{width:17px;height:17px;stroke-width:2}.play-button svg use[href$="play"]{fill:currentColor}.play-time{font-size:9px;color:#a6ac9c;font-variant-numeric:tabular-nums;display:flex;gap:6px;margin-left:5px}.play-time b{font-weight:500;color:#67755c}.volume-control{display:flex;align-items:center;gap:9px;width:140px;justify-content:flex-end}.volume-control svg{width:15px;height:15px;color:#8d9880}.volume-control input{width:67px;accent-color:#799365;height:3px;cursor:pointer}.practice-grid{display:grid;grid-template-columns:245px 1fr;gap:16px;padding:0 24px 23px}.current-chord{background:#eef3e3;border:1px solid #e4ead7;border-radius:9px;padding:17px 19px}.panel-label{font-size:8px;font-weight:500;letter-spacing:1.2px;color:#8a977c;display:flex;align-items:center;justify-content:space-between}.panel-label>span{font-size:8px;letter-spacing:.2px;color:#a4ad96}.chord-display{display:flex;align-items:center;gap:18px;margin:15px 0 16px;min-height:60px}.chord-display>span{font-family:var(--serif);font-size:65px;line-height:1;letter-spacing:-3px;white-space:nowrap}.chord-display>div{display:flex;flex-direction:column;gap:7px}.chord-display strong{font-size:10px;font-weight:500;line-height:1.5}.chord-display>div>span{font-size:8px;color:#8c997d;line-height:1.5}.chord-next{border-top:1px solid #dce5cc;display:flex;align-items:center;padding-top:13px;color:#98a188;font-size:9px;gap:8px}.chord-next b{color:#637754;font-family:var(--serif);font-size:17px;font-weight:400}.chord-next svg{width:14px;height:14px;margin-left:auto}.keyboard-panel{padding:13px 16px 11px;border:1px solid #e8ebdf;border-radius:9px;min-width:0;display:flex;flex-direction:column}.keyboard-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:8px}.keyboard-heading>.panel-label{font-size:7px;letter-spacing:1px}.switch-label{display:flex;align-items:center;gap:6px;color:#939d87;font-size:8px;white-space:nowrap;cursor:pointer}.switch-label input{position:absolute;opacity:0}.switch{width:25px;height:14px;background:#dfe4d5;border-radius:20px;position:relative;display:block}.switch:after{content:'';background:#fffefa;width:10px;height:10px;position:absolute;top:2px;left:2px;border-radius:50%;transition:left .15s}.switch-label input:checked+.switch{background:#739460}.switch-label input:checked+.switch:after{left:13px}.switch-label input:focus-visible+.switch{outline:2px solid #94a781;outline-offset:2px}.keyboard{position:relative;display:flex;height:106px;isolation:isolate;touch-action:manipulation}.piano-key{border:1px solid #dee1d5;background:linear-gradient(#fffefb 90%,#f0f1e9);border-radius:0 0 5px 5px;position:relative;flex:1;min-width:0;padding:0 0 9px;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;box-shadow:0 2px 0 #d9ddcf;font-size:8px;color:#adb3a2}.piano-key.black{position:absolute;top:0;height:63%;background:linear-gradient(90deg,#303b32,#475145 60%,#303b32);border:1px solid #28342a;color:#aeb8a5;z-index:2;border-radius:0 0 4px 4px;box-shadow:1px 2px 2px #1a271a35;font-size:6px;padding-bottom:6px}.piano-key.active{background:linear-gradient(#d9e8bc,#b5ce8d);color:#4b6538;border-color:#9db97c;box-shadow:0 2px 0 #8ca76c}.piano-key.black.active{background:linear-gradient(#72975b,#426739);color:#eff6e4}.piano-key.active:before{content:'';width:5px;height:5px;border-radius:50%;background:#597b3f;margin-bottom:7px}.piano-key.black.active:before{background:#c1d9a8;width:4px;height:4px;margin-bottom:4px}.piano-key:hover{filter:brightness(.94)}.keyboard-caption{display:flex;justify-content:space-between;font-size:7px;color:#a3ab97;margin-top:auto;padding-top:13px}.keyboard-caption span:first-child{display:flex;align-items:center;gap:4px}.keyboard-caption i{width:5px;height:5px;border-radius:50%;background:#bfd497}.sequence-heading{border-top:1px solid #eceee5;margin:0 24px;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:8px}.sequence-heading h3{font-size:13px;font-weight:500;margin:0 0 6px}.sequence-heading p{font-size:9px;color:#9aa28e;margin:0}.sequence-tools{display:flex;align-items:center;gap:8px}.sequence-tools .button{font-size:9px;padding:7px 9px}.sequence-tools svg{width:13px;height:13px}.chord-sequence{display:flex;gap:8px;margin:17px 24px 12px;padding:0 0 8px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#d5dfc4 transparent;max-height:150px}.chord-tile{border:1px solid #e4e8db;border-radius:7px;background:#fafbf5;display:flex;align-items:flex-start;flex-direction:column;min-width:89px;padding:10px 13px;position:relative;text-align:left}.chord-tile.active{background:#e4edce;border-color:#9db47b}.chord-tile:hover{border-color:#a7b891}.chord-tile .tile-number{font-size:7px;color:#a4ad98;display:flex;justify-content:space-between;width:100%;gap:12px}.chord-tile strong{font-size:24px;font-family:var(--serif);font-weight:400;margin:6px 0;line-height:1.1}.chord-tile>small{font-size:7px;color:#9ba68b;white-space:nowrap}.confidence-dot{width:4px;height:4px;background:#acbc94;border-radius:50%;margin-top:2px}.confidence-dot.low{background:#d9ad76}.confidence-dot.edited{background:#7897b0}.analysis-footnote{display:flex;align-items:center;gap:5px;font-size:8px;color:#a4ab9b;margin:0 24px 20px;line-height:1.6}.analysis-footnote svg{width:11px;height:11px}.analysis-footnote button{margin-left:auto;background:none;border:0;border-bottom:1px solid #c6cfba;padding:1px 0;font-size:8px;white-space:nowrap;color:#839374}.notes-area{border-top:1px solid #eceee5;background:#fcfcf7;padding:16px 24px 12px}.notes-area label{display:flex;align-items:center;gap:12px;color:#8a967c;letter-spacing:1px;font-size:8px}.notes-area label>span{font-size:8px;letter-spacing:0;color:#b0b6a5}.notes-area textarea{border:0;background:transparent;resize:vertical;width:100%;font-size:10px;line-height:1.8;color:#6d7d5c;margin-top:10px;min-height:36px}.notes-area textarea::placeholder{color:#afb7a2}.notes-area textarea:focus{outline:0}footer{display:flex;align-items:center;gap:15px;justify-content:flex-start;font-size:9px;color:#a7ae9b;padding:25px 0}.footer-brand{font-family:var(--serif);font-size:19px;letter-spacing:-1px;color:#849375}footer>span:last-child{margin-left:auto;display:flex;gap:5px;align-items:center;font-size:8px}footer svg{width:11px;height:11px}.upload-zone{margin:0 24px 25px;border:1px dashed #b7c4a5;background:#f6f8ef;border-radius:10px;padding:35px 20px;text-align:center}.upload-zone.dragging{background:#e4edce;border-color:#66884e}.upload-symbol{display:grid;place-items:center;background:#e8efda;border-radius:50%;width:45px;height:45px;margin:auto;color:#758e5f}.upload-zone h3{font-family:var(--serif);font-size:25px;font-weight:400;margin:18px 0 8px}.upload-zone p{font-size:11px;color:#8b977d;margin-bottom:20px}.upload-zone small{display:block;color:#a3ad97;font-size:9px;margin-top:16px}.analysis-progress{margin:0 24px 25px;border:1px solid #dae5cb;border-radius:10px;background:#f2f6e9;padding:23px;display:flex;gap:17px;align-items:center;flex-wrap:wrap}.analysis-progress strong{font-size:12px;font-weight:500}.analysis-progress p{font-size:10px;color:#8a997b;margin:7px 0 0}.analysis-progress>span{margin-left:auto;font-variant-numeric:tabular-nums;font-size:12px}.analysis-progress progress{width:100%;height:4px;accent-color:#6c8b54}.progress-spinner{width:24px;height:24px;border:2px solid #dde6cd;border-top-color:#6c8b54;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{border:1px solid #dde4d4;border-radius:17px;background:var(--white);color:var(--ink);padding:34px;width:min(500px,calc(100% - 32px));box-shadow:0 24px 90px #1c342d25}dialog::backdrop{background:#23372d55;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:16px;top:13px;border:0;background:none;font-size:24px;color:#8e9b83;width:28px;height:28px}.dialog-kicker{font-size:8px;letter-spacing:1.5px;color:#8a9b77}dialog h2{font-family:var(--serif);font-weight:400;letter-spacing:-.6px;font-size:30px;line-height:1.1;margin:16px 0}dialog p{font-size:12px;color:#89967d;line-height:1.8}dialog label{display:block;font-size:11px;margin:24px 0 9px;color:#7b8b6d}dialog input:not([type=checkbox]),dialog select{border:1px solid #dce4d0;border-radius:7px;background:#f7f9f1;padding:12px;color:#506641;width:100%;font-size:12px}dialog .primary{width:100%;margin-top:22px}.edit-fields{display:grid;grid-template-columns:1fr 1.5fr;gap:15px}.edit-fields label{margin:9px 0}.edit-fields select{display:block;margin-top:9px}dialog .no-chord{display:flex;gap:8px;align-items:center}.no-chord input{accent-color:#66884e}.help-content ol{padding-left:19px;font-size:12px;line-height:1.8;color:#7a8a6e}.help-content li{padding:6px 0 6px 5px}.help-content strong{font-weight:600;color:#48613b}.help-content p{font-size:11px}.confirm-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:25px}.delete-confirm{color:#fff;background:#ac634a}.toast{position:fixed;left:calc(50% + 120px);bottom:26px;transform:translate(-50%,20px);z-index:10;background:var(--green);color:#f9fcf4;border-radius:9px;padding:14px 20px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 6px 25px #21433525;max-width:500px}.toast.visible{opacity:1;transform:translate(-50%,0)}.toast.error{background:#aa6149}
@media(min-width:1600px){.main-content{padding-top:50px}.welcome{margin-bottom:40px}.project-card{min-height:156px}.practice-grid{grid-template-columns:285px 1fr}.keyboard{height:125px}.current-chord{padding:22px}.chord-display{margin:20px 0}.chord-display>span{font-size:76px}.keyboard-panel{padding:18px 22px}.chord-tile{min-width:105px}.chord-sequence{gap:11px}.chord-tile strong{font-size:29px}}
@media(max-width:1200px){.sidebar{width:210px;padding:32px 17px 20px}main{margin-left:210px}.main-content{padding:33px 28px 0}.topbar{padding:0 28px;height:73px}.brand{font-size:32px}.art-keys{left:40px}.practice-grid{grid-template-columns:205px 1fr;gap:12px}.current-chord{padding:15px}.chord-display{gap:12px}.chord-display>span{font-size:55px}.track-actions .button span{display:none}.track-actions .button{padding:9px}.keyboard-heading>.panel-label{font-size:6px;letter-spacing:.6px}.switch-label{font-size:7px}.toast{left:calc(50% + 105px)}}
@media(max-width:950px){.sidebar{width:180px;padding:29px 12px 18px}.brand{font-size:28px;gap:9px;margin-left:7px}.brand-mark{transform:scale(.85);transform-origin:left center;width:27px}.workspace{margin-top:28px;padding:10px 7px;gap:7px}.workspace small{font-size:9px}.sidebar-project-heading{font-size:7px;letter-spacing:.8px;margin-left:9px}.art-keys{left:30px}.sidebar-bottom>strong{font-size:18px}.local-status{font-size:7px}main{margin-left:180px}.main-content{padding:28px 22px 0}.topbar{padding:0 22px}.welcome .primary{font-size:10px;padding:11px}.welcome{gap:10px}h1{font-size:36px}.welcome p{font-size:10px}.project-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.project-card.add-card{min-height:90px;grid-column:1/-1;flex-direction:row}.project-card.add-card small{display:none}.project-card{padding:13px;min-height:132px}.studio-heading{padding-left:18px;padding-right:18px}.track-heading{padding-left:18px;padding-right:18px}.track-title h2{font-size:21px}.track-meta{gap:6px;font-size:8px}.track-cover{width:39px;height:39px}.track-actions{gap:4px}.waveform-wrap{margin:0 18px}.practice-grid{grid-template-columns:1fr;padding:0 18px 20px}.current-chord{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;padding:12px 16px;column-gap:15px}.current-chord>.panel-label{grid-column:1;align-self:end}.chord-display{grid-row:1/3;grid-column:2;margin:0;justify-content:flex-end;min-height:63px}.chord-display>span{font-size:45px}.chord-next{padding:0;border:0;grid-column:1;align-self:start;margin-top:7px;width:130px}.chord-next svg{display:none}.keyboard{height:110px}.keyboard-panel{padding:13px 17px}.keyboard-heading>.panel-label{font-size:8px}.keyboard-heading{margin-bottom:13px}.sequence-heading{margin:0 18px}.sequence-heading p{font-size:8px}.sequence-tools .button{font-size:8px;padding:6px}.chord-sequence{margin-left:18px;margin-right:18px}.analysis-footnote{margin-left:18px;margin-right:18px}.transport{padding-left:16px;padding-right:16px}.transport-left{width:90px;gap:4px}.transport-main{gap:8px}.volume-control{width:90px;gap:5px}.volume-control input{width:48px}.notes-area{padding-left:18px;padding-right:18px}.toast{left:calc(50% + 90px)}footer>span:last-child{max-width:190px;text-align:right;line-height:1.6}.privacy-pill{font-size:9px}.topbar-right{gap:9px}}
@media(max-width:700px){.sidebar{position:relative;width:100%;height:65px;padding:0 20px;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid #dfe4d5}.brand{font-size:29px;margin:0}.sidebar .workspace,.sidebar .nav-label,.sidebar-project-heading,.sidebar-projects,.sidebar-bottom,.sidebar .nav-item.selected,.sidebar #newSidebar{display:none}.sidebar:after{content:'IL MIO STUDIO';font-size:8px;letter-spacing:1.5px;color:#89977d}main{margin-left:0}.topbar{height:51px;padding:0 20px}.breadcrumb{font-size:9px;gap:10px}.topbar-right{gap:7px}.avatar{width:24px;height:24px;font-size:12px}.privacy-pill{font-size:8px}.main-content{padding:27px 17px 0}.welcome{position:relative;align-items:flex-start;margin-bottom:26px}.eyebrow{font-size:7px;letter-spacing:1.4px;margin-bottom:14px}h1{font-size:36px}.welcome p{font-size:9px;line-height:1.7;max-width:230px;margin-top:12px}.welcome>.primary{position:absolute;bottom:0;right:0;font-size:0;padding:11px;border-radius:50%;width:35px;height:35px}.welcome>.primary svg{width:18px;height:18px}.search input{width:105px;font-size:9px}.section-heading h2{font-size:12px}.project-cards{gap:9px}.project-card{min-height:127px;padding:12px}.project-card strong{font-size:10px}.card-meta{font-size:8px;gap:4px}.card-meta span+span:before{margin-right:4px}.card-icon{width:27px;height:27px}.card-badge{font-size:7px}.project-card.add-card{min-height:65px;gap:10px}.studio-heading{padding:14px 14px 0}.track-heading{padding:17px 14px;gap:9px}.track-title h2{font-size:19px;margin-bottom:6px;max-width:210px}.track-cover{width:34px;height:38px;border-radius:6px}.track-cover svg{width:20px;height:20px}.track-meta{flex-wrap:wrap;gap:5px;font-size:7px}.track-actions{gap:2px}.track-actions .button{padding:6px;border:0}.track-actions svg{width:13px;height:13px}.track-actions .icon-button{width:24px;height:26px}.waveform-wrap{margin:0 14px;height:124px;padding:10px 10px 8px}#waveform{height:72px}#seek{top:20px;left:10px;width:calc(100% - 20px);height:76px}.waveform-label{font-size:6px}.waveform-times{font-size:7px}.transport{padding:13px 12px 18px}.transport-left{width:75px;gap:0}.transport-left .icon-button{width:25px}.transport-left select{padding:4px;font-size:8px}.transport-main{gap:5px}.play-button{width:36px;height:36px}.transport-main .icon-button{width:25px}.play-time{font-size:8px;gap:4px;margin-left:3px}.volume-control{width:auto}.volume-control svg{display:none}.volume-control input{width:36px}.practice-grid{padding:0 14px 18px;gap:10px}.panel-label{font-size:7px}.current-chord{padding:11px 13px}.chord-display{gap:12px}.chord-display>span{font-size:43px}.chord-display strong{font-size:9px}.chord-display>div>span{font-size:7px}.keyboard-panel{padding:12px 10px}.keyboard{height:103px}.keyboard-heading>.panel-label{font-size:6px;letter-spacing:.8px}.switch-label{font-size:7px}.piano-key{font-size:6px}.piano-key.black{font-size:5px}.keyboard-caption{font-size:6px}.sequence-heading{margin:0 14px;padding-top:16px;align-items:flex-start}.sequence-heading h3{font-size:12px}.sequence-heading p{font-size:7px;max-width:170px;line-height:1.7}.sequence-tools{gap:0}.sequence-tools .button{font-size:0;padding:6px}.sequence-tools .button svg{width:14px;height:14px}.sequence-tools .icon-button{width:25px;height:26px}.chord-sequence{margin:13px 14px 9px;gap:7px}.chord-tile{min-width:77px;padding:9px 10px}.chord-tile strong{font-size:23px}.analysis-footnote{margin:0 14px 15px;font-size:7px;gap:4px;align-items:flex-start}.analysis-footnote button{font-size:7px;margin-top:0}.notes-area{padding:13px 14px 10px}.notes-area label{font-size:7px;gap:8px;letter-spacing:.6px}.notes-area label>span{font-size:7px}.notes-area textarea{font-size:9px}footer{gap:8px;font-size:7px;padding:21px 0}.footer-brand{font-size:17px}footer>span:last-child{font-size:6px;max-width:130px;gap:3px}footer svg{width:9px;height:9px}.toast{left:50%;width:calc(100% - 36px);text-align:center;font-size:11px;bottom:17px}.upload-zone{margin:0 14px 20px;padding:25px 15px}.upload-zone h3{font-size:22px}.upload-zone small{font-size:8px}.analysis-progress{margin:0 14px 20px;padding:15px;gap:12px}.analysis-progress strong{font-size:10px}.analysis-progress p{font-size:8px}.analysis-progress>span{font-size:10px}.progress-spinner{width:20px;height:20px}dialog{padding:30px 23px}dialog h2{font-size:27px}.help-content li{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important}}

.change-timing{margin-top:13px;padding-top:12px;border-top:1px solid #dce5cc}.change-timing-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;color:#738363;font-size:10px}.change-timing-heading strong{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.5px;color:#456638;white-space:nowrap}.chord-change-bar{height:6px;border-radius:9px;background:#d9e3ca;overflow:hidden}.chord-change-bar>span{display:block;width:100%;height:100%;background:#7c9c5e;border-radius:inherit;transform:scaleX(0);transform-origin:left center}.change-timing.urgent .change-timing-heading strong{color:#b5743b}.change-timing.urgent .chord-change-bar>span{background:#c58b4c}@media(max-width:950px){.change-timing{grid-column:1/-1;margin-top:12px;padding-top:10px}.change-timing-heading{margin-bottom:7px}.change-timing-heading strong{font-size:18px}}@media(max-width:700px){.change-timing-heading{font-size:9px}.change-timing-heading strong{font-size:18px}}


/* Separate library and focused project workspace. */
.library-section .project-cards{max-height:none;overflow:visible}.back-to-projects{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;border:1px solid #dce4d1;border-radius:7px;background:#f3f6eb;padding:9px 13px;color:#587247;font-size:11px}.back-to-projects:hover{background:#e7eedb}.back-to-projects svg{width:15px;height:15px;transform:rotate(180deg)}
body.project-open .sidebar{display:none}body.project-open main{margin-left:0}body.project-open .topbar{height:60px;padding:0 24px;gap:20px}body.project-open .breadcrumb{min-width:0;flex:1}body.project-open .breadcrumb strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.project-open .main-content{max-width:none;padding:18px 24px 24px}body.project-open .main-content>footer{display:none}body.project-open .studio{display:flex;flex-direction:column;min-height:calc(100dvh - 102px)}body.project-open .track-heading{padding-top:14px;padding-bottom:18px}body.project-open .track-title h2{max-width:none;font-size:27px}body.project-open .track-actions .button span{display:inline}body.project-open .track-actions .button{font-size:11px;padding:9px 13px}body.project-open .waveform-wrap{height:120px}body.project-open #waveform{height:66px}body.project-open #seek{height:70px}body.project-open .practice-grid{grid-template-columns:minmax(245px,25%) minmax(0,1fr);gap:18px}body.project-open .current-chord{display:block;padding:18px 22px}body.project-open .current-chord>.panel-label{font-size:10px}body.project-open .chord-display{justify-content:flex-start;gap:18px;margin:20px 0;min-height:65px}body.project-open .chord-display strong{font-size:13px}body.project-open .chord-display>div>span{font-size:11px}body.project-open .chord-next{width:auto;border-top:1px solid #dce5cc;padding-top:12px;margin-top:0;font-size:11px}body.project-open .chord-next b{font-size:21px}body.project-open .chord-next svg{display:block}body.project-open .change-timing-heading{font-size:11px}body.project-open .change-timing-heading strong{font-size:24px}body.project-open .keyboard-panel{padding:16px 20px 13px}body.project-open .keyboard-heading>.panel-label{font-size:9px;letter-spacing:1px}body.project-open .switch-label{font-size:10px}body.project-open .keyboard{height:clamp(120px,18vh,230px)}body.project-open .piano-key{font-size:11px}body.project-open .piano-key.black{font-size:8px}body.project-open .keyboard-caption{font-size:9px}body.project-open .sequence-heading h3{font-size:15px}body.project-open .sequence-heading p{font-size:11px}body.project-open .sequence-tools .button{font-size:11px}body.project-open .chord-tile{min-width:100px}body.project-open .chord-tile strong{font-size:29px}body.project-open .chord-tile>small{font-size:9px}body.project-open .notes-area{margin-top:auto}body.project-open .notes-area textarea{font-size:12px}body.project-open .toast{left:50%}
@media(max-width:800px){body.project-open .topbar{padding:0 16px;gap:12px}body.project-open .breadcrumb{font-size:10px}body.project-open .breadcrumb>span,body.project-open .breadcrumb{gap:9px}body.project-open .main-content{padding:12px 14px 18px}body.project-open .practice-grid{grid-template-columns:215px minmax(0,1fr);gap:12px}body.project-open .current-chord{padding:15px}body.project-open .chord-display{gap:11px}body.project-open .chord-display strong{font-size:11px}body.project-open .chord-display>div>span{font-size:9px}body.project-open .keyboard-panel{padding:14px 12px}body.project-open .keyboard-heading>.panel-label{font-size:7px}body.project-open .switch-label{font-size:8px}body.project-open .keyboard-caption{font-size:7px}body.project-open .piano-key{font-size:8px}body.project-open .piano-key.black{font-size:6px}}
@media(max-width:600px){body.project-open .topbar{height:56px;padding:0 12px;gap:10px}body.project-open .back-to-projects{padding:8px 9px;font-size:10px;gap:6px}body.project-open .breadcrumb{display:none}body.project-open .topbar-right{margin-left:auto}body.project-open .main-content{padding:10px 10px 16px}body.project-open .studio{min-height:calc(100dvh - 82px)}body.project-open .track-title h2{font-size:21px}body.project-open .track-actions .button span{display:none}body.project-open .track-actions .button{padding:6px}body.project-open .practice-grid{grid-template-columns:minmax(0,1fr);gap:10px}body.project-open .current-chord{display:grid;grid-template-columns:1fr 1.2fr;padding:12px 15px;column-gap:12px}body.project-open .current-chord>.panel-label{font-size:8px}body.project-open .chord-display{grid-row:1/3;grid-column:2;margin:0;justify-content:flex-end;min-height:62px}body.project-open .chord-next{padding:0;border:0;grid-column:1;align-self:start;margin-top:7px;width:auto;font-size:10px}body.project-open .chord-next svg{display:none}body.project-open .change-timing{grid-column:1/-1;margin-top:12px;padding-top:10px}body.project-open .change-timing-heading{font-size:10px}body.project-open .change-timing-heading strong{font-size:20px}body.project-open .keyboard{height:130px}body.project-open .keyboard-heading>.panel-label{font-size:7px}body.project-open .switch-label{font-size:8px}body.project-open .keyboard-caption{font-size:7px}body.project-open .sequence-heading h3{font-size:13px}body.project-open .sequence-heading p{font-size:9px;max-width:200px}body.project-open .sequence-tools .button{font-size:0}body.project-open .chord-tile{min-width:85px}body.project-open .chord-tile strong{font-size:25px}body.project-open .chord-tile>small{font-size:8px}body.project-open .notes-area textarea{font-size:11px}}


/* Two-octave voicing choices and physical keys kept from the previous chord. */
.voicing-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}.voicing-toolbar .comfort-switch{font-size:10px;color:#65804d}.voicing-picker{display:flex;align-items:center;gap:7px;font-size:10px;color:#8a977b;flex:1;min-width:170px}.voicing-picker select{border:1px solid #dce4d0;border-radius:6px;background:#f7f9f1;color:#4c663d;padding:7px 8px;font-size:11px;min-width:0;width:100%;cursor:pointer}.voicing-toolbar .button{padding:7px 10px;font-size:10px;white-space:nowrap}.voicing-details{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#849776;margin:0 0 13px;flex-wrap:wrap}.voicing-details strong{font-weight:500;color:#577346;background:#edf3e3;padding:4px 7px;border-radius:4px;white-space:nowrap}.keyboard-octaves{display:flex;justify-content:space-around;font-size:9px;color:#95a387;margin-bottom:6px;letter-spacing:.5px}.piano-key[data-midi="72"]{border-left:2px solid #a5b294}.piano-key.active.held-note{background:linear-gradient(#9cc6b3,#719d8a);border-color:#668c78;color:#214d3c;box-shadow:0 2px 0 #567c66}.piano-key.active.held-note:before{background:#315d47}.piano-key.black.active.held-note{background:linear-gradient(#5c9581,#356856);color:#eef8ef}.piano-key.black.active.held-note:before{background:#b7e1cb}.keyboard-caption i.held-legend{background:#719d8a;margin-left:8px}.keyboard-panel .keyboard-caption>span:first-child{flex-wrap:wrap;row-gap:3px}body.project-open .voicing-toolbar{gap:12px}body.project-open .voicing-details{font-size:11px}body.project-open .keyboard-octaves{font-size:10px}body.project-open .keyboard-heading{margin-bottom:12px}
@media(max-width:800px){.voicing-toolbar{gap:8px}.voicing-toolbar .comfort-switch{font-size:9px}.voicing-picker{font-size:9px}.voicing-picker select{font-size:10px}.voicing-details,body.project-open .voicing-details{font-size:9px}.keyboard-octaves,body.project-open .keyboard-octaves{font-size:8px}.keyboard-caption>span:last-child{display:none}body.project-open .voicing-toolbar{gap:8px}}
@media(max-width:600px){.voicing-toolbar .comfort-switch{width:100%;margin-bottom:2px}.voicing-picker{min-width:160px}.voicing-picker select{font-size:10px}.voicing-details{gap:6px}.keyboard-panel .keyboard-caption{font-size:8px}body.project-open .keyboard{height:125px}}

/* Size each chord card to its full label; never compress cards in the scroller. */
.chord-sequence .chord-tile{flex:0 0 auto;width:max-content}.chord-sequence .chord-tile strong{white-space:nowrap}


/* Tempo derives from the detected BPM; the click follows the media timeline. */
.tempo-panel{margin:0 24px 22px;padding:15px 18px;background:#f5f8ee;border:1px solid #e1e8d7;border-radius:9px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px}.tempo-original{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#8c9b7e;font-size:10px;flex-wrap:wrap}.tempo-original label{display:flex;align-items:center;gap:6px;white-space:nowrap}.tempo-original input{width:52px;background:#fffefa;border:1px solid #dce5cf;border-radius:5px;padding:5px 4px;color:#4c663d;font-size:11px}.tempo-original>span{font-size:9px;color:#9ba68e}.tempo-target{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}.tempo-target>label{font-size:11px;color:#647d50}.bpm-stepper{display:flex;align-items:center;gap:7px;color:#819570;font-size:10px}.bpm-stepper>button{width:25px;height:25px;border:1px solid #dce4d0;background:#fbfcf6;border-radius:5px;font-size:16px;color:#688452}.bpm-stepper>button:hover{background:#e5edda}.bpm-stepper>input{appearance:textfield;width:65px;border:0;border-bottom:1px solid #b8c9a6;background:transparent;color:#456236;font-size:23px;font-weight:600;text-align:center;padding:1px 0;font-variant-numeric:tabular-nums}.bpm-stepper>input::-webkit-inner-spin-button,.bpm-stepper>input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#tempoRatio{font-size:10px;color:#97a587;font-variant-numeric:tabular-nums}.tempo-reset{margin-left:auto;background:none;border:0;border-bottom:1px solid #bdcbb0;font-size:9px;color:#7c916a;padding:2px 0;white-space:nowrap}#tempoRange{width:100%;accent-color:#78985d;height:4px;margin:15px 0 3px;cursor:pointer}.metronome-controls{border-left:1px solid #dfe7d3;padding-left:22px;min-width:0}.metro-heading{display:flex;align-items:center;gap:10px}.metro-heading .switch-label,body.project-open .metro-heading .switch-label{font-size:12px;color:#4e6b3e}.metro-heading .button{font-size:10px;padding:6px 10px;margin-left:auto}.metro-pulse{display:grid;place-items:center;width:27px;height:27px;background:#e6eddc;color:#a0b18c;border-radius:50%;font-size:10px;font-variant-numeric:tabular-nums}.metro-pulse.flash{background:#7d9b61;color:#fffefa;box-shadow:0 0 0 3px #dce9c9}.metro-pulse.flash.accent{background:#c18a4c;box-shadow:0 0 0 3px #efe0c8}.metro-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}.metro-options label{display:flex;align-items:center;gap:9px;font-size:9px;color:#8a9b7a}.metro-options input{width:74px;height:3px;accent-color:#78985d;cursor:pointer}.metro-options select{font-size:10px;border:1px solid #dce5cf;background:#fffefa;color:#70885e;border-radius:5px;padding:5px 7px;max-width:140px}.metronome-controls p{margin:11px 0 0;color:#a0ad93;font-size:8px;line-height:1.6}
@media(max-width:900px){.tempo-panel{gap:14px;padding:13px 14px}.metronome-controls{padding-left:14px}.tempo-original{gap:6px}.tempo-original>span{font-size:8px}.tempo-target{gap:7px}.tempo-target>label{font-size:10px}.tempo-reset{font-size:8px}.bpm-stepper{gap:5px}.bpm-stepper>input{width:58px;font-size:21px}.metro-options{gap:7px}.metro-options select{font-size:9px}.metro-options input{width:59px}}
@media(max-width:700px){.tempo-panel{grid-template-columns:minmax(0,1fr);margin:0 14px 18px;gap:14px}.metronome-controls{padding:13px 0 0;border-left:0;border-top:1px solid #dfe7d3}.tempo-original>span{font-size:9px}.tempo-target{gap:9px}.tempo-target>label{font-size:11px}.bpm-stepper>input{font-size:24px;width:65px}.tempo-reset{font-size:9px}.metro-options{justify-content:flex-start;gap:20px}.metronome-controls p{font-size:8px}.tempo-original input{font-size:12px}body.project-open .metro-heading .switch-label{font-size:12px}}

/* Line-timed lyrics and a focused karaoke view share the original media clock. */
.lyrics-panel{margin:0 24px 22px;border:1px solid #e1e7d7;border-radius:10px;padding:18px 20px;background:#fbfcf6}.lyrics-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.lyrics-heading .dialog-kicker{font-size:7px;letter-spacing:1.5px}.lyrics-heading h3{font-size:14px;font-weight:500;margin:6px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lyrics-heading h3>span{font-size:9px;font-weight:400;color:#9aa88b}.lyrics-heading>.button{font-size:10px;padding:9px 12px;white-space:nowrap}.lyrics-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:15px}.lyrics-toolbar label{display:flex;align-items:center;gap:7px;font-size:10px;color:#8b9a7c}.lyrics-toolbar select{border:1px solid #dce4d0;border-radius:5px;background:#fffefa;color:#6d865b;padding:6px 7px;font-size:10px}.lyrics-toolbar .button{padding:6px 9px;font-size:10px}.lyrics-empty{padding-top:13px;color:#819571;font-size:11px;line-height:1.7}.lyrics-empty p{margin:0 0 5px}.lyrics-empty small{color:#a4ae98;font-size:9px}.lyrics-empty .button{padding:5px 8px;font-size:9px;margin-left:10px}.speech-progress{display:flex;align-items:center;gap:12px;margin-top:16px;padding:15px;background:#eef4e4;border-radius:7px;color:#6f875d}.speech-progress strong{font-size:11px;font-weight:400;flex:1;line-height:1.6}.speech-progress .progress-spinner{width:21px;height:21px;flex-shrink:0}.speech-progress .button{font-size:10px;padding:6px 10px}.lyrics-stage{background:#f0f5e7;border:1px solid #e4ebd8;border-radius:9px;padding:15px 22px 18px;text-align:center;margin-top:17px;min-height:160px;display:flex;flex-direction:column;justify-content:center;position:relative}.karaoke-meta{display:flex;align-items:center;justify-content:space-between;color:#8fa37b;font-size:9px;gap:10px;margin-bottom:10px}.karaoke-chord{padding:4px 10px;border:1px solid #cad9b4;border-radius:6px;background:#e0ebcf;font-size:18px;font-family:var(--serif);color:#5d7948;min-width:45px}.lyric-previous{font-size:12px;color:#b0bba5;margin:0 0 9px;line-height:1.5}.lyric-current{font-family:var(--serif);font-size:clamp(24px,2.6vw,36px);font-weight:400;letter-spacing:-.5px;line-height:1.3;margin:0;color:#35542c;overflow-wrap:anywhere;white-space:pre-line}.lyric-next{font-size:14px;line-height:1.6;color:#9aa98b;margin:12px 0 0}.lyric-progress{height:3px;background:#dce7ce;border-radius:4px;overflow:hidden;margin-top:17px}.lyric-progress>span{display:block;height:100%;background:#88a56b;width:100%;transform:scaleX(0);transform-origin:left center}.lyrics-sync{display:flex;align-items:center;gap:7px;margin:12px 0;color:#8e9d7f;font-size:9px;flex-wrap:wrap}.lyrics-sync>button{font-size:9px;border:1px solid #dce4d0;background:#f5f8ee;color:#758e60;border-radius:5px;padding:4px 7px}.lyrics-sync>small{margin-left:auto;color:#b0b9a5;font-size:8px}.lyric-list{max-height:140px;overflow:auto;position:relative;scrollbar-width:thin;scrollbar-color:#d5dfc4 transparent}.lyric-row{display:flex;align-items:baseline;gap:14px;border:0;background:transparent;border-radius:5px;padding:7px 9px;text-align:left;width:100%;font-size:11px;color:#98a58b;line-height:1.6}.lyric-row time{flex-shrink:0;font-variant-numeric:tabular-nums;font-size:9px;color:#aeb99f}.lyric-row.active{background:#eaf1de;color:#597b40}.lyric-row:hover{background:#f0f4e8}.lyric-row>span{overflow-wrap:anywhere}#lyricsDialog{width:min(680px,calc(100% - 30px))}#lyricsDialog textarea{display:block;resize:vertical;width:100%;min-height:180px;border:1px solid #dce4d0;border-radius:7px;background:#f7f9f1;color:#526943;padding:12px;font-family:var(--sans);font-size:12px;line-height:1.8}#lyricsDialog small{display:block;font-size:10px;color:#96a487;line-height:1.7;margin-top:10px}#lyricsEditError{color:#ad6d4d;font-size:11px;min-height:0}body.karaoke-mode .practice-grid,body.karaoke-mode .sequence-heading,body.karaoke-mode .chord-sequence,body.karaoke-mode .analysis-footnote,body.karaoke-mode .notes-area,body.karaoke-mode .lyric-list,body.karaoke-mode .lyrics-sync{display:none}body.karaoke-mode .lyrics-panel{margin-bottom:24px;flex:1}body.karaoke-mode .lyrics-stage{min-height:300px;padding:22px 35px}body.karaoke-mode .lyric-current{font-size:clamp(32px,4.5vw,64px);line-height:1.25}body.karaoke-mode .lyric-next{font-size:clamp(18px,2.1vw,28px)}body.karaoke-mode .lyric-previous{font-size:16px}body.karaoke-mode .karaoke-chord{font-size:26px;padding:5px 14px}body.karaoke-mode .karaoke-meta{font-size:10px}
@media(max-width:700px){.lyrics-panel{margin:0 14px 18px;padding:14px}.lyrics-heading{align-items:flex-start}.lyrics-heading h3{font-size:12px;gap:5px}.lyrics-heading h3>span{font-size:8px;line-height:1.6}.lyrics-heading>.button{font-size:9px;padding:8px 9px}.lyrics-toolbar{gap:6px}.lyrics-toolbar .button{font-size:9px;padding:6px 7px}.lyrics-toolbar label,.lyrics-toolbar select{font-size:9px}.lyrics-empty{font-size:10px}.lyrics-empty small{font-size:8px}.lyrics-empty .button{display:block;margin:10px 0 0}.lyrics-stage{padding:12px 14px 15px}.lyric-current{font-size:26px}.lyric-next{font-size:12px}.lyric-previous{font-size:10px}.lyrics-sync>small{width:100%;margin:1px 0 0}.lyric-row{font-size:10px;gap:10px}body.karaoke-mode .lyrics-stage{min-height:250px;padding:16px}body.karaoke-mode .lyric-previous{font-size:12px}.speech-progress{padding:11px;gap:9px}.speech-progress strong{font-size:10px}}
:root{--stem-vocals:#a86c8e;--stem-drums:#bd8553;--stem-bass:#6a8c6d;--stem-guitar:#beae68;--stem-piano:#648b9d;--stem-other:#9683ab;--stem-music:#648b9d}
.stems-panel{margin:24px 0;padding:24px;border:1px solid var(--border,#e2e6d9);border-radius:16px;background:#fafbf6}
.stems-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.stems-heading h3{margin:6px 0;font-size:23px}.stems-heading p{margin:0;color:#7b887b;font-size:12px}.stem-empty{margin-top:18px;font-size:13px;color:#798477;line-height:1.7}
.stems-panel details{margin-top:20px}.stems-panel summary{cursor:pointer;font-size:13px;font-weight:600}.stem-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:16px 0}.stem-toolbar>span{font-size:11px;color:#7b887b;margin-left:auto}.stem-toolbar .button{padding:8px 12px;font-size:12px}
.stem-channels{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}.stem-row{display:grid;grid-template-columns:minmax(78px,1fr) 29px 29px minmax(45px,1.5fr) 33px 24px;align-items:center;gap:8px;padding:12px 0;border-top:1px solid #e4e8dc}.stem-track-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.stem-color{width:7px;height:22px;border-radius:3px;flex-shrink:0}.stem-vocals{background:var(--stem-vocals)}.stem-drums{background:var(--stem-drums)}.stem-bass{background:var(--stem-bass)}.stem-guitar{background:var(--stem-guitar)}.stem-piano{background:var(--stem-piano)}.stem-other{background:var(--stem-other)}.stem-music{background:var(--stem-music)}
.stem-mini{border:1px solid #dbe1d1;border-radius:6px;background:#fff;height:28px;cursor:pointer;color:#607465;font-size:11px;font-weight:700}.stem-mini[aria-pressed=true]{background:#214e42;color:white;border-color:#214e42}.stem-row input{width:100%;accent-color:#376752}.stem-percent{font-size:10px;text-align:right;color:#7b887b;font-variant-numeric:tabular-nums}.stem-download{text-align:center;color:#56765c;text-decoration:none;font-size:20px}.stem-muted .stem-track-name,.stem-muted .stem-percent{opacity:.4}.stem-footnote{font-size:11px;line-height:1.6;color:#8b9586;margin:14px 0 0}.stem-progress{margin-top:20px;display:flex;align-items:center;flex-wrap:wrap;gap:12px}.stem-progress strong{font-size:13px;flex:1}.stem-progress progress{width:100%;height:7px;accent-color:#376752}.stem-progress[hidden]{display:none}
@media(max-width:1000px){.stem-channels{grid-template-columns:1fr}}@media(max-width:600px){.stems-panel{padding:16px}.stems-heading{align-items:flex-start;flex-direction:column}.stem-row{gap:5px;grid-template-columns:minmax(66px,1fr) 26px 26px minmax(40px,1.2fr) 30px 20px}.stem-toolbar>span{width:100%;margin-left:0}}

/* Note a tempo del maestro */
.cue-banner{margin:0 24px 18px;padding:14px 18px;border-radius:10px;background:#fbeee4;border:1px solid #efc9ae;color:#8a4524;font-size:18px;font-weight:700;letter-spacing:.3px;display:flex;flex-wrap:wrap;gap:8px 22px;animation:cue-in .25s ease-out}
.cue-banner[hidden]{display:none}
.cue-banner-item{display:inline-flex;align-items:center;gap:10px}
.cue-banner svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}
@keyframes cue-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
body.karaoke-mode .cue-banner{font-size:24px}
.cues-panel{margin:0 24px 22px;padding:18px 20px;border:1px solid #e1e7d7;border-radius:10px;background:#fbfcf6}
.cues-panel[hidden]{display:none}
.cues-heading h3{margin:6px 0;font-size:20px}.cues-heading h3 span{font-size:12px;color:#8a9b77;font-weight:500;margin-left:6px}.cues-heading p{margin:0;color:#7b887b;font-size:12px}
.cue-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:16px 0 6px}
.cue-form[hidden]{display:none}
.cue-form label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:600;color:#5f6d5f}
.cue-form input{padding:8px 10px;border:1px solid #d8dfcf;border-radius:7px;font:inherit;font-size:13px;background:#fff;color:var(--ink);width:72px;box-sizing:border-box}
.cue-form .cue-text-label{flex:1;min-width:200px}.cue-form .cue-text-label input{width:100%}
.cue-form .button{padding:9px 13px;font-size:12px;cursor:pointer}
.cue-list{display:flex;flex-direction:column;margin-top:10px}
.cue-item{display:flex;align-items:center;gap:12px;padding:9px 6px;border-top:1px solid #e4e8dc;border-radius:6px}
.cue-item.active{background:#fbeee4}
.cue-time{border:0;background:#eef2e6;color:#3d5b4c;border-radius:6px;padding:5px 9px;font:inherit;font-size:12px;font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap}
.cue-text{flex:1;font-size:14px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.cue-item .button{padding:6px 10px;font-size:11px;cursor:pointer}
.cue-delete{color:#b2684b}
.cue-empty{font-size:13px;color:#798477;margin:8px 0 0}
@media(max-width:600px){.cue-banner,.cues-panel{margin-left:14px;margin-right:14px}.cue-banner{font-size:15px}.cue-item{flex-wrap:wrap}.cue-text{flex-basis:100%;order:3}}

/* Condivisione */
.track-actions #shareBtn.active{background:var(--lime);border-color:#c7d9a8;color:var(--green)}
#shareDialog label{display:block;font-size:12px;font-weight:600;margin:18px 0 6px}
.share-row{display:flex;gap:8px;align-items:stretch}#shareDialog .share-row input{flex:1 1 auto;width:auto;min-width:0;padding:10px 12px;border:1px solid #d8dfcf;border-radius:7px;font:inherit;font-size:12px;background:#f7f8f2;color:var(--ink)}
#shareDialog .share-row .button{flex:0 0 auto;width:auto;margin:0}.share-row .button,#shareCreate{font-size:12px;padding:10px 16px;cursor:pointer}
.share-warning{font-size:12px;line-height:1.6;color:#9a5a37;background:#fbeee4;border-radius:7px;padding:10px 12px;margin:12px 0 0}
.delete-share{margin-top:20px;color:#b2684b;font-size:12px;cursor:pointer}
.logout-button{font-size:11px;cursor:pointer}

/* Player condiviso: solo ascolto, nessuna modifica */
body.shared-mode .sidebar,body.shared-mode #backToProjects,body.shared-mode .track-actions,body.shared-mode .upload-zone,
body.shared-mode #reanalyzeBtn,body.shared-mode #editChordBtn,body.shared-mode .voicing-picker,body.shared-mode .notes-area,
body.shared-mode .lyrics-toolbar,body.shared-mode #lyricsEarlier,body.shared-mode #lyricsLater,body.shared-mode .lyrics-empty,
body.shared-mode #separateStemsBtn,body.shared-mode #stemEmpty,body.shared-mode .stem-download,body.shared-mode #saveStatus,
body.shared-mode .cue-form,body.shared-mode .welcome,body.shared-mode .library-section{display:none!important}
body.shared-mode main{margin-left:0}
.speech-progress{flex-wrap:wrap}
.speech-progress strong{font-size:12px;font-weight:600}
.speech-elapsed{font-size:11px;color:#7d906d;font-variant-numeric:tabular-nums}
.speech-progress progress{width:100%;height:7px;accent-color:#376752}
.speech-live{width:100%;margin:0;font-size:12px;font-style:italic;color:#56704a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:18px}

/* Selettore Editor / Player e zoom */
.view-switch{display:inline-flex;border:1px solid #dfe5d4;border-radius:999px;padding:2px;background:#f3f6ec}
.view-switch[hidden]{display:none}
.view-switch button{border:0;background:transparent;color:#6f796a;font:inherit;font-size:11px;font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer}
.view-switch button[aria-pressed=true]{background:var(--green);color:#fbfdf7}
.zoom-control{display:none;align-items:center;gap:8px;font-size:11px;font-weight:600;color:#6f796a}
.zoom-control input{width:90px;accent-color:#376752}
body.player-view .zoom-control{display:inline-flex}

/* Vista Player: trasporto fisso, karaoke + accordo + tastiera in una schermata */
body{--pz:1}
body.player-view .studio{overflow:visible}
body.player-view .studio-heading,body.player-view .track-actions,body.player-view .notes-area,
body.player-view .cues-panel,
body.player-view .sequence-heading,body.player-view .analysis-footnote,body.player-view .lyrics-heading,
body.player-view .lyrics-toolbar,body.player-view .speech-progress,body.player-view .lyrics-sync,
body.player-view .lyric-list,body.player-view .lyrics-empty,body.player-view .voicing-toolbar,
body.player-view .keyboard-octaves,body.player-view .keyboard-caption{display:none!important}
body.player-view .track-heading{padding:12px 24px 10px}
body.player-view .track-title h2{font-size:22px}
body.player-view #playerArea:not([hidden]){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"head head" "metro mix" "lyrics practice" "seq seq";column-gap:16px;padding:0 24px 16px}
body.player-view #playerArea:has(#lyricsContent[hidden]){grid-template-areas:"head head" "metro mix" "practice practice" "seq seq"}
body.player-view #playerArea:has(#lyricsContent[hidden]) .lyrics-panel{display:none}
body.player-view .player-head{grid-area:head;position:sticky;top:0;z-index:20;background:var(--white);margin:0 -24px 14px;padding:10px 24px 0;border-bottom:1px solid var(--line);box-shadow:0 8px 16px -14px #1c342d40}
body.player-view .waveform-wrap{margin:0;height:96px;padding:8px 14px 6px}
body.player-view .transport{padding:10px 0 12px}
body.player-view .cue-banner{margin:0 0 12px;font-size:calc(18px*var(--pz));padding:calc(10px*var(--pz)) 16px}
body.player-view .lyrics-panel{grid-area:lyrics;margin:0;padding:0;border:0;background:none;display:flex;flex-direction:column}
body.player-view #lyricsContent{display:flex;flex-direction:column;flex:1}
body.player-view .lyrics-stage{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:calc(220px*var(--pz));padding:calc(16px*var(--pz)) calc(22px*var(--pz));margin:0}
body.player-view .lyric-current{font-size:calc(32px*var(--pz));line-height:1.25}
body.player-view .lyric-next{font-size:calc(18px*var(--pz))}
body.player-view .lyric-previous{font-size:calc(14px*var(--pz))}
body.player-view .karaoke-chord{font-size:calc(18px*var(--pz))}
body.player-view .karaoke-meta{font-size:calc(11px*var(--pz))}
body.player-view .practice-grid{grid-area:practice;grid-template-columns:minmax(0,1fr);padding:0;gap:12px;align-content:start}
body.player-view #playerArea:has(#lyricsContent[hidden]) .practice-grid{grid-template-columns:minmax(220px,.8fr) minmax(0,2fr)}
body.player-view .current-chord{padding:calc(12px*var(--pz)) 16px}
body.player-view .chord-display{margin:calc(8px*var(--pz)) 0;min-height:0}
body.player-view .chord-display>span{font-size:calc(60px*var(--pz))}
body.player-view .chord-display strong{font-size:calc(12px*var(--pz))}
body.player-view .chord-display>div>span,body.player-view .chord-next{font-size:calc(11px*var(--pz))}
body.player-view .change-timing-heading strong{font-size:calc(18px*var(--pz))}
body.player-view .keyboard-panel{padding:10px 14px}
body.player-view .keyboard{height:calc(118px*var(--pz))}
body.player-view .piano-key{font-size:calc(9px*var(--pz))}
body.player-view .voicing-details{font-size:calc(11px*var(--pz));margin-bottom:8px}
body.player-view .chord-sequence{grid-area:seq;margin:14px 0 0}
body.player-view .chord-tile strong{font-size:calc(24px*var(--pz))}
@media(max-width:900px){
  body.player-view #playerArea:not([hidden]),body.player-view #playerArea:has(#lyricsContent[hidden]){grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "metro" "mix" "lyrics" "practice" "seq";padding:0 14px 14px}
  body.player-view #playerArea:has(#lyricsContent[hidden]) .practice-grid{grid-template-columns:minmax(0,1fr)}
  body.player-view .player-head{margin:0 -14px 12px;padding:8px 14px 0}
  body.player-view .lyrics-panel{margin-bottom:12px}
  body.player-view .lyrics-stage{min-height:calc(150px*var(--pz))}
  body.player-view .lyric-current{font-size:calc(24px*var(--pz))}
  body.player-view .track-heading{padding:10px 14px 8px}
  .zoom-control input{width:64px}
  .view-switch button{padding:5px 9px;font-size:10px}
}
@media(max-width:600px){body.project-open .privacy-pill{display:none}.zoom-control{font-size:0;gap:0}}

/* Vista Player: mixer compatto quando gli stem esistono */
body.player-view .stems-panel{grid-area:mix;margin:0 0 14px;padding:10px 16px}
body.player-view .stems-panel:not(:has(#stemMixerDetails:not([hidden]))){display:none}
body.player-view .stems-heading,body.player-view #stemEmpty,body.player-view #stemProgress,body.player-view .stem-footnote,
body.player-view .stem-download,body.player-view #stemPlaybackStatus,body.player-view #stemMixerDetails>summary{display:none!important}
body.player-view #stemMixerDetails{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}
body.player-view .stem-toolbar{margin:0;gap:8px}
body.player-view .stem-channels{flex:1;min-width:280px;grid-template-columns:1fr 1fr;gap:4px 20px}
body.player-view .stem-row{padding:4px 0;border-top:0;grid-template-columns:minmax(78px,1fr) 29px 29px minmax(60px,2fr) 36px}
@media(max-width:900px){body.player-view .stems-panel{padding:10px 12px}body.player-view .stem-channels{grid-template-columns:1fr;min-width:0;flex-basis:100%}}

/* Vista Player: metronomo compatto (acceso/spento, battito, volume, accenti) */
body.player-view .tempo-panel{grid-area:metro;display:flex;align-items:center;margin:0 0 14px;padding:10px 16px;gap:0}
body.player-view .tempo-controls,body.player-view #metroAlign,body.player-view #metroHint{display:none!important}
body.player-view .metronome-controls{border:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;width:100%}
body.player-view .metro-options{margin:0;gap:14px}
@media(max-width:900px){body.player-view .tempo-panel{padding:10px 12px}}

/* Vista Player compatta: tutto in una schermata. Le altezze seguono anche l'altezza della finestra. */
body.player-view .track-heading{display:none}
body.player-view.project-open .main-content{padding-top:10px;padding-bottom:10px}
body.player-view .player-head{padding-top:6px;margin-bottom:8px}
body.player-view .waveform-wrap{height:auto;padding:4px 12px}
body.player-view .waveform-label,body.player-view .waveform-times{display:none}
body.player-view #waveform{height:clamp(40px,7vh,64px)}
body.player-view #seek{top:4px;left:12px;width:calc(100% - 24px);height:clamp(40px,7vh,64px)}
body.player-view .transport{padding:6px 0 8px}
body.player-view .play-button{width:38px;height:38px}
body.player-view .cue-banner{margin-bottom:8px}
/* Metronomo e mixer: una striscia sottile */
body.player-view .tempo-panel,body.player-view .stems-panel{margin:0 0 8px;padding:5px 12px;border-radius:8px;min-height:0}
body.player-view .metronome-controls{gap:4px 16px;font-size:11px}
body.player-view .metro-heading{gap:8px}
body.player-view .metro-heading .switch-label{font-size:11px}
body.player-view .metro-pulse{width:24px;height:24px;font-size:10px}
body.player-view .metro-options{gap:10px;font-size:10px}
body.player-view .metro-options input{width:70px}
body.player-view .metro-options select{font-size:10px;padding:3px 6px}
body.player-view #stemMixerDetails{gap:4px 14px;flex-wrap:nowrap}
body.player-view .stem-toolbar{flex-wrap:nowrap;gap:6px}
body.player-view .stem-toolbar .switch-label{font-size:11px;white-space:nowrap}
body.player-view #stemKaraokePreset{padding:4px 8px;font-size:10px;white-space:nowrap}
body.player-view #stemResetMix,body.player-view .stem-percent,body.player-view .stem-color{display:none!important}
body.player-view .stem-channels{min-width:0;display:flex;gap:4px 14px}
body.player-view .stem-row{display:flex;align-items:center;gap:5px;padding:0}
body.player-view .stem-track-name{font-size:11px;white-space:nowrap}
body.player-view .stem-mini{height:22px;width:24px;font-size:10px}
body.player-view .stem-row input{width:64px}
/* Karaoke, accordo e tastiera */
body.player-view .lyrics-stage{min-height:min(calc(200px*var(--pz)),30vh);padding:calc(10px*var(--pz)) calc(18px*var(--pz))}
body.player-view .lyric-current{font-size:min(calc(30px*var(--pz)),5.2vh)}
body.player-view .lyric-next{font-size:min(calc(17px*var(--pz)),3vh)}
body.player-view .lyric-previous{font-size:min(calc(13px*var(--pz)),2.4vh)}
body.player-view .practice-grid{gap:8px}
body.player-view .current-chord{padding:calc(8px*var(--pz)) 14px}
body.player-view .chord-display{margin:calc(4px*var(--pz)) 0}
body.player-view .chord-display>span{font-size:min(calc(54px*var(--pz)),8vh)}
body.player-view .chord-next{padding-top:6px}
body.player-view .change-timing{margin-top:6px;padding-top:6px}
body.player-view .keyboard-panel{padding:6px 12px 8px}
body.player-view .keyboard-heading{margin-bottom:4px}
body.player-view .voicing-details{margin-bottom:4px}
body.player-view .keyboard{height:min(calc(110px*var(--pz)),17vh)}
body.player-view .chord-sequence{margin-top:8px;padding-bottom:4px}
body.player-view .chord-tile{padding:5px 10px;min-width:74px}
body.player-view .chord-tile strong{font-size:min(calc(20px*var(--pz)),3.4vh);margin:2px 0}
body.player-view .chord-tile>small{display:none}
@media(max-width:1100px){body.player-view #stemMixerDetails{flex-wrap:wrap}}

/* Banner delle note a tempo: altezza fissa, una riga; a riposo resta discreto invece di sparire */
.cue-banner{flex-wrap:nowrap;align-items:center;overflow:hidden;white-space:nowrap;height:54px;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box;animation:none;transition:background .2s,border-color .2s,color .2s}
body.player-view .cue-banner{height:calc(44px*var(--pz))}
.cue-banner-item{overflow:hidden;text-overflow:ellipsis;animation:cue-in .25s ease-out}
.cue-banner.idle{background:transparent;border-color:#e6e8df;border-style:dashed;color:#a3aa99;font-weight:500;font-size:13px}
body.player-view .cue-banner.idle{font-size:calc(13px*var(--pz))}
.cue-banner-next{display:inline-flex;align-items:center;gap:10px;overflow:hidden;text-overflow:ellipsis}
.cue-banner.idle svg{width:15px;height:15px}