:root{color:#151a20;font-synthesis:none;text-rendering:optimizelegibility;--canvas:#f7f7f6;--paper:#fff;--ink:#151a20;--muted:#687078;--line:#d9dcde;--line-soft:#e8e9ea;--coral:#ff5a43;--coral-dark:#e64733;--coral-contrast:#c8402e;--coral-contrast-hover:#ad3122;--coral-soft:#fff1ee;--blue:#8faeea;--green:#19a861;--shadow:0 1px 2px #141a200f, 0 12px 30px #141a2009;background:#f7f7f6;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:var(--canvas);min-height:100vh}button,input,select{font:inherit}button{color:inherit}button,select,input[type=range]{accent-color:var(--coral)}select{cursor:pointer;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}select option,select optgroup{color:#252c32;background:#fff}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #ff5a4342}button:disabled{cursor:not-allowed;opacity:.45}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{min-height:100vh}.app-header{border-bottom:1px solid var(--line);z-index:30;background:#fffffffa;align-items:stretch;gap:30px;height:64px;padding:0 28px;display:flex;position:sticky;top:0}.brand{letter-spacing:-.6px;cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;padding:0;font-size:21px;font-weight:740;display:inline-flex}.brand-mark{width:34px;height:34px;color:var(--coral);place-items:center;display:grid}.brand-mark svg{stroke-width:1.9px;width:34px;height:34px}.main-nav{align-items:stretch;gap:10px;display:flex}.nav-link{cursor:pointer;background:0 0;border:0;padding:0 15px;font-size:14px;font-weight:570;position:relative}.nav-link:after{content:"";background:0 0;height:2px;position:absolute;bottom:-1px;left:15px;right:15px}.nav-link:hover{color:var(--coral-contrast)}.nav-link.active:after{background:var(--coral)}.header-actions{align-items:center;gap:15px;margin-left:auto;display:flex}.help-button{cursor:pointer;background:0 0;border:0;align-items:center;gap:7px;font-size:14px;display:flex}.header-divider{background:var(--line);width:1px;height:25px}.avatar-button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:50%;place-items:center;width:34px;height:34px;display:grid}.mobile-menu-button{background:0 0;border:0;padding:7px;display:none}.studio-page{min-height:calc(100vh - 64px);padding-bottom:84px}.session-strip{border-bottom:1px solid var(--line);background:#fbfbfa;grid-template-columns:minmax(220px,1fr) minmax(245px,auto) auto;align-items:center;gap:24px;min-height:94px;padding:14px 28px;display:grid}.session-identity{min-width:0}.session-identity input{width:min(100%,390px);color:var(--ink);letter-spacing:-.45px;background:0 0;border:0;padding:2px 0;font-size:22px;font-weight:690}.session-identity input:hover{box-shadow:inset 0 -1px var(--line)}.session-identity span{color:var(--muted);margin-top:5px;font-size:12px;font-style:italic;display:block}.permission-note{color:#6a7076;align-items:center;gap:9px;max-width:300px;font-size:12px;line-height:1.35;display:flex}.permission-note.listening{color:var(--green)}.permission-note.denied,.permission-note.error,.permission-note.unsupported{color:#b54a37}.session-actions{justify-content:flex-end;align-items:center;gap:9px;display:flex}.session-actions button{cursor:pointer;white-space:nowrap;border-radius:7px;justify-content:center;align-items:center;gap:8px;height:44px;padding:0 16px;font-size:13px;font-weight:630;display:inline-flex}.quiet-action{color:#4d555d;background:0 0;border:0}.quiet-action:hover{background:#f0f1f1}.listen-button{border:1px solid var(--coral-contrast);color:#fff;background:var(--coral-contrast);min-width:143px;box-shadow:0 5px 16px #c8402e33}.listen-button:hover{background:var(--coral-contrast-hover);border-color:var(--coral-contrast-hover)}.listen-button.stop{box-shadow:none;background:#242b31;border-color:#242b31}.upload-button{background:#fff;border:1px solid #cfd3d6;min-width:132px}.upload-button:hover{background:#fafafa;border-color:#aeb4b9}.url-button{color:#384149;background:#fff;border:1px solid #cfd3d6;min-width:112px}.url-button:hover,.url-button.active{color:#087f7b;background:#effcfb;border-color:#4fbab6}.url-import-panel{border:1px solid var(--line);color:var(--ink);background:var(--paper);box-shadow:var(--shadow);border-radius:10px;margin:12px 24px 0;padding:15px}.url-import-heading,.url-import-heading>div,.youtube-capture-copy,.youtube-capture-actions{align-items:center;display:flex}.url-import-heading{justify-content:space-between;gap:16px;margin-bottom:12px}.url-import-heading>div,.youtube-capture-copy{gap:10px;min-width:0}.url-import-heading strong,.url-import-heading small,.youtube-capture-copy strong,.youtube-capture-copy small{display:block}.url-import-heading strong,.youtube-capture-copy strong{font-size:12px}.url-import-heading small,.youtube-capture-copy small{color:var(--muted);margin-top:3px;font-size:10px;line-height:1.35}.url-import-heading>button{width:32px;height:32px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;place-items:center;display:grid}.url-import-heading>button:hover{color:var(--ink);background:var(--line-soft)}.url-import-form{grid-template-columns:minmax(0,1fr) auto;gap:9px;display:grid}.url-import-form input{border:1px solid var(--line);width:100%;height:42px;color:var(--ink);background:var(--paper);border-radius:7px;padding:0 12px;font-size:12px}.url-import-form input:focus{border-color:var(--coral);outline:3px solid #ff5a4338}.url-import-form>button,.youtube-capture-actions button,.youtube-capture-actions a{color:#fff;cursor:pointer;background:#218f8a;border:1px solid #218f8a;border-radius:7px;justify-content:center;align-items:center;gap:7px;min-height:40px;padding:0 14px;font-size:11px;font-weight:700;text-decoration:none;display:inline-flex}.url-import-form>button:disabled,.youtube-capture-actions button:disabled{opacity:.58;cursor:wait}.youtube-capture-card{background:#effcfb;border:1px solid #9bd4d1;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:12px;padding:12px;display:grid}.youtube-capture-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px}.youtube-capture-actions a{color:#087f7b;background:0 0}.youtube-capture-actions .capture-stop{background:#bf4e3e;border-color:#bf4e3e}.url-import-message{color:var(--muted);margin:10px 1px 0;font-size:11px;line-height:1.45}.url-import-message.error{color:#b54a37}.url-import-legal{color:var(--muted);margin:5px 1px 0;font-size:9px;line-height:1.4}.spin{animation:.8s linear infinite spin}.workspace-shell{padding:0 24px 18px}.mode-tabs{align-items:flex-end;gap:8px;height:57px;display:flex}.mode-tab{color:#5f666c;cursor:pointer;background:0 0;border:1px solid #0000;border-bottom:0;border-radius:8px 8px 0 0;justify-content:center;align-items:center;gap:10px;min-width:166px;height:45px;padding:0 17px;font-size:14px;font-weight:560;display:inline-flex;position:relative}.mode-tab.active{color:var(--ink);border-color:var(--line);background:#fff}.mode-tab.active:after{content:"";background:var(--coral);height:2px;position:absolute;bottom:0;left:13px;right:13px}.control-bar{border:1px solid var(--line);background:#fff;border-bottom:0;border-radius:10px 10px 0 0;grid-template-columns:minmax(240px,1.45fr) minmax(94px,.5fr) minmax(108px,.6fr) minmax(122px,.7fr) minmax(160px,.95fr) minmax(104px,.58fr);gap:10px;min-height:61px;padding:10px 12px;display:grid}.microphone-select-wrap{align-items:center;gap:12px;min-width:0;display:flex}.microphone-select-wrap .select-control{flex:1}.select-control{color:#273038;cursor:pointer;background:#fff;border:1px solid #d5d8da;border-radius:6px;align-items:center;min-width:0;height:40px;transition:border-color .14s,background-color .14s,box-shadow .14s;display:flex;position:relative}.select-control:hover{background:#fafafa;border-color:#aeb4b9}.select-control:focus-within{outline-offset:2px;border-color:var(--coral);outline:3px solid #ff5a4342}.select-control select{appearance:none;width:100%;min-width:0;height:100%;color:inherit;cursor:pointer;background:0 0;border:0;outline:0;padding:0 34px 0 12px;font-size:12px;font-weight:540;position:absolute;inset:0}.select-control:has(.select-leading-icon) select{padding-left:39px}.select-leading-icon{z-index:1;pointer-events:none;position:absolute;left:11px}.select-chevron{z-index:1;pointer-events:none;position:absolute;right:10px}.select-control select:focus-visible{outline:0}.level-meter{align-items:center;gap:2px;width:48px;height:18px;display:flex}.level-meter span{background:#d9dcde;border-radius:2px;width:3px;height:6px;transition:height .12s,background .12s}.level-meter span:nth-child(2),.level-meter span:nth-child(6){height:10px}.level-meter span:nth-child(3),.level-meter span:nth-child(5){height:14px}.level-meter span:nth-child(4){height:18px}.level-meter .filled{background:var(--coral)}.level-meter.listening span{animation:.92s ease-in-out infinite alternate level-pulse}.level-meter.listening span:nth-child(2n){animation-delay:.16s}.workspace-grid{grid-template-columns:minmax(0,1fr) 296px;align-items:stretch;gap:14px;display:grid}.workspace-canvas{align-items:start;min-width:0;display:grid}.studio-mode-panel,.workspace-canvas>.piano-surface{grid-area:1/1;min-width:0}.studio-mode-panel.is-hidden{visibility:hidden;pointer-events:none}.inspector-stack{align-items:start;min-width:0;display:grid}.inspector-stack>.studio-mode-panel{grid-area:1/1}.score-loading{border:1px solid var(--line);min-height:620px;color:var(--muted);background:#fff;border-radius:0 0 10px 10px;place-items:center;font-size:12px;display:grid}.score-surface{border:1px solid var(--line);min-height:620px;box-shadow:var(--shadow);background:#fff;border-radius:0 0 10px 10px;flex-direction:column;display:flex;overflow:hidden}.score-toolbar{border-bottom:1px solid var(--line);background:#fdfdfd;flex:none;justify-content:space-between;align-items:center;height:48px;padding:0 10px;display:flex}.toolbar-group{align-items:center;gap:3px;display:flex}.tool-button{color:#333b42;cursor:pointer;background:0 0;border:0;border-radius:5px;place-items:center;width:34px;height:34px;display:grid}.tool-button:hover{background:#f0f1f2}.tool-button.active{color:#11161a;background:#f0f1f2;box-shadow:inset 0 0 0 1px #e2e4e5}.toolbar-group-right{gap:7px}.score-pagination{border:1px solid var(--line);border-radius:5px;align-items:center;gap:3px;height:34px;padding:0 4px;display:flex}.score-pagination button{cursor:pointer;background:0 0;border:0;border-radius:4px;place-items:center;width:27px;height:27px;display:grid}.score-pagination button:hover:not(:disabled){background:var(--line-soft)}.score-pagination span{min-width:72px;color:var(--muted);text-align:center;white-space:nowrap;font-size:10px}.zoom-control{border:1px solid var(--line);border-radius:5px;align-items:center;gap:6px;min-width:90px;height:34px;padding:0 8px;display:flex}.zoom-control select{background:0 0;border:0;outline:0;font-size:12px}.score-paper{background-color:#fff;flex:1;min-height:570px;padding:25px 26px 0;position:relative;overflow:auto}.score-paper-heading{justify-content:center;align-items:flex-start;min-height:70px;display:flex;position:relative}.score-paper-heading h2{letter-spacing:.6px;margin:0;font:600 28px/1.1 Georgia,Times New Roman,serif}.score-paper-heading p{color:#75716f;text-align:center;margin:7px 0 0;font:15px/1.2 Georgia,Times New Roman,serif}.detected-readout{color:#626a70;font-variant-numeric:tabular-nums;font-size:12px;position:absolute;top:10px;right:0}.notation-wrap{min-height:560px;transition:transform .18s;position:relative}.vex-score{min-height:560px}.vex-score svg{overflow:visible}.notation-playhead{pointer-events:none;background:#ff5a43bd;width:1px;transition:left 50ms linear;position:absolute;top:13px;bottom:35px}.notation-playhead span{background:var(--coral);border-radius:50%;width:9px;height:9px;position:absolute;top:-3px;left:-4px}.canvas-hint{color:#9f3c2c;width:max-content;box-shadow:var(--shadow);background:#fff6f4;border:1px solid #ffd1c9;border-radius:6px;align-items:center;gap:7px;margin:0 auto 10px;padding:7px 10px;font-size:11px;display:flex;position:sticky;bottom:14px;left:50%}.inspector{border:1px solid var(--line);min-width:0;min-height:620px;box-shadow:var(--shadow);background:#fff;border-radius:10px;flex-direction:column;display:flex;overflow:hidden}.inspector-heading{border-bottom:1px solid var(--line-soft);flex:none;justify-content:space-between;align-items:center;height:58px;padding:0 18px;display:flex}.inspector-heading h2{letter-spacing:-.25px;margin:0;font-size:17px}.inspector-body{flex:1;padding:18px}.inspector-control{margin-bottom:22px}.control-label{justify-content:space-between;align-items:center;font-size:12px;display:flex}.control-label span,.inspector-field>span,.switch-row>span{align-items:center;gap:7px;display:inline-flex}.control-label strong{color:var(--green);font-size:12px;font-weight:650}.accuracy-meter{grid-template-columns:repeat(5,1fr);gap:3px;margin-top:10px;display:grid}.accuracy-meter span{background:#e3e5e6;border-radius:4px;height:3px}.accuracy-meter span.filled{background:var(--green)}.inspector-field{margin:0 0 20px;font-size:12px;display:block}.inspector-field>span{margin-bottom:8px}.inspector-field select,.field-select{color:#252c32;background:#fff;border:1px solid #d4d7da;border-radius:5px;justify-content:space-between;align-items:center;width:100%;height:36px;padding:0 10px;font-size:12px;display:flex}.switch-row{justify-content:space-between;align-items:center;min-height:42px;margin:4px 0 12px;font-size:12px;display:flex}.toggle{cursor:pointer;background:#c6c9cb;border:0;border-radius:20px;width:38px;height:22px;padding:2px;transition:background .16s}.toggle span{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .16s;display:block;box-shadow:0 1px 3px #0003}.toggle.on{background:var(--coral)}.toggle.on span{transform:translate(16px)}.inspector-separator{background:var(--line-soft);height:1px;margin:20px 0}.takes-section h3{margin:0 0 9px;font-size:12px;font-weight:650}.takes-list{gap:3px;display:grid}.take-row{color:#677078;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;grid-template-columns:25px 1fr auto 18px;align-items:center;gap:8px;width:100%;min-width:0;min-height:50px;padding:6px 8px;display:grid}.take-row:hover{background:#f7f8f8}.take-row.active{color:var(--coral);background:var(--coral-soft);border-color:#ffd6cf}.take-name{min-width:0}.take-name strong,.take-name small{color:var(--ink);font-size:11px;display:block}.take-name small{color:var(--muted);margin-top:3px}.take-time{color:var(--muted);white-space:nowrap;font-size:9px}.clear-session{border:1px solid var(--line);color:#5e666c;cursor:pointer;background:#fff;border-radius:5px;justify-content:center;align-items:center;gap:8px;height:38px;margin:0 18px 17px;font-size:11px;display:flex}.clear-session:hover{color:#a53b2d;border-color:#edb9b1}.piano-surface{color:#fff;background:#1f2428;border:1px solid #353b40;border-radius:10px;height:clamp(620px,100vh - 296px,740px);min-height:620px;overflow:hidden;box-shadow:0 16px 36px #12171b21}.piano-canvas-header{border-bottom:1px solid #3e4449;justify-content:space-between;align-items:center;height:73px;padding:0 20px;display:flex}.piano-canvas-header h2{margin:0;font-size:14px}.piano-canvas-header p{color:#c5c9cc;margin:6px 0 0;font-size:11px}.piano-canvas-header p span{margin:0 5px}.piano-canvas-actions{gap:8px;display:flex}.piano-canvas-actions label,.piano-canvas-actions button{color:#e9ebec;background:#282e33;border:1px solid #4b5155;border-radius:5px;align-items:center;gap:7px;height:36px;padding:0 11px;font-size:11px;display:flex}.piano-canvas-actions select{appearance:none;color:#fff;background:0 0;border:0;outline:0;max-width:55px}.piano-canvas-actions button{cursor:pointer}.piano-roll-area{height:calc(100% - 73px);position:relative;overflow:hidden}.measure-ruler{color:#aeb4b8;border-bottom:1px solid #50565a;grid-template-columns:repeat(4,1fr);height:40px;padding:0 12px;font-size:10px;display:grid;position:absolute;inset:0 0 auto}.measure-ruler span{border-left:1px solid #4a5054;padding:13px 0 0 9px}.roll-grid{grid-template-columns:repeat(16,1fr);display:grid;position:absolute;inset:40px 0 147px}.roll-grid i{border-left:1px solid #ffffff0f}.falling-notes{position:absolute;inset:40px 0 147px;overflow:hidden}.falling-note{border-radius:5px;width:clamp(8px,1.15vw,15px);transition:top 50ms linear;position:absolute;transform:translate(-50%);box-shadow:0 0 10px}.falling-note.right{color:#ff654f;background:#ff654f}.falling-note.left{color:#90b1ef;background:#90b1ef}.falling-note.played{color:#e9ddca;background:#e9ddca}.piano-keyboard{background:#131719;border-top:2px solid #ff6b58;height:147px;display:flex;position:absolute;bottom:0;left:0;right:0}.white-key{background:#f7f5f2;border:1px solid #596067;border-top:0;border-radius:0 0 3px 3px;flex:1;position:relative;box-shadow:inset 0 -7px #d9dbdc}.white-key span{color:#454c52;text-align:center;font-size:10px;font-weight:650;position:absolute;bottom:18px;left:0;right:0}.white-key.active span{color:#fff}.black-key{z-index:3;background:#161a1d;border:1px solid #060707;border-radius:0 0 3px 3px;width:2.8%;height:84px;position:absolute;top:0;transform:translate(-50%);box-shadow:inset 0 -5px #30363b,0 4px 5px #0006}.tutorial-inspector{min-height:620px}.inline-field{justify-content:space-between;align-items:center;min-height:47px;font-size:12px;display:flex}.inline-field select{border:1px solid var(--line);background:#fff;border-radius:5px;min-width:88px;height:34px;padding:0 8px;font-size:12px}.tutorial-legend{border:1px solid var(--line);border-radius:6px;gap:13px;margin-top:17px;padding:14px;font-size:11px;display:grid}.tutorial-legend span{align-items:center;gap:10px;display:flex}.tutorial-legend i{border-radius:2px;width:14px;height:14px;display:inline-block}.tutorial-legend .coral{background:var(--coral)}.tutorial-legend .blue{background:var(--blue)}.tutorial-legend .cream{background:#e7dac7}.progress-heading{justify-content:space-between;font-size:12px;display:flex}.progress-heading strong{font-size:13px}.progress-bar{background:#e4e5e6;border-radius:5px;height:5px;margin-top:13px;overflow:hidden}.progress-bar span{border-radius:inherit;background:var(--coral);height:100%;display:block}.tutorial-tip{color:var(--muted);margin:26px 0 0;font-size:10px;line-height:1.55}.transport{z-index:25;border-top:1px solid var(--line);background:#fffffffa;grid-template-columns:145px 105px minmax(190px,.7fr) minmax(280px,1.2fr) 96px 45px;align-items:center;gap:12px;min-height:84px;padding:0 28px;display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -12px 28px #1a20250a}.transport button{cursor:pointer;background:0 0;border:0}.transport-time{font-variant-numeric:tabular-nums;align-items:baseline;gap:7px;display:flex}.transport-time strong{letter-spacing:.5px;font-size:20px}.transport-time span{color:var(--muted);font-size:14px}.mini-wave{height:28px;color:var(--coral);align-items:center;gap:2px;display:flex}.mini-wave i{background:currentColor;border-radius:2px;width:2px}.mini-wave i:nth-child(n+6){opacity:.25}.transport-main{justify-content:center;align-items:center;gap:22px;display:flex}.transport-main>button:not(.play-button){place-items:center;width:34px;height:34px;display:grid}.play-button{place-items:center;width:52px;height:52px;display:grid;box-shadow:0 6px 16px #ff5a4338;color:#fff!important;background:var(--coral)!important;border-radius:50%!important}.play-button svg{width:21px}.transport-tools{border-left:1px solid var(--line-soft);align-items:center;gap:19px;padding-left:26px;display:flex}.transport-tools button{border-radius:5px;place-items:center;width:35px;height:35px;display:grid}.transport-tools button.active{color:var(--coral);background:var(--coral-soft)}.volume-control{flex:1;align-items:center;gap:12px;min-width:120px;display:flex}.volume-control input{width:100%;height:3px}.tempo-readout{text-align:center;white-space:nowrap;font-size:13px}.transport-settings{place-items:center;width:36px;height:36px;display:grid}.transport-progress{opacity:0;cursor:pointer;width:100%;height:4px;margin:0;transition:opacity .16s;position:absolute;top:-3px;left:0;right:0}.transport:hover .transport-progress,.transport-progress:focus{opacity:1}.content-page{width:min(1180px,100% - 48px);margin:0 auto;padding:58px 0 90px}.page-heading-row{justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.page-heading-row h1{letter-spacing:-2px;margin:0;font-size:clamp(32px,4vw,48px);line-height:1}.page-heading-row p{color:var(--muted);margin:14px 0 0;font-size:15px}.primary-page-action,.learn-intro button{border:1px solid var(--coral-contrast);color:#fff;background:var(--coral-contrast);cursor:pointer;border-radius:6px;align-items:center;gap:8px;height:43px;padding:0 16px;font-size:13px;font-weight:650;display:flex}.primary-page-action:hover,.learn-intro button:hover{border-color:var(--coral-contrast-hover);background:var(--coral-contrast-hover)}.score-search{border:1px solid var(--line);color:#8a9196;background:#fff;border-radius:6px;align-items:center;gap:10px;width:min(420px,100%);height:42px;margin:38px 0 18px;padding:0 13px;display:flex}.score-search input{background:0 0;border:0;outline:0;flex:1}.scores-table-wrap{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;border-radius:9px;overflow-x:auto}.scores-table{border-collapse:collapse;width:100%;font-size:13px}.scores-table th{color:#626a70;text-align:left;background:#fafafa;height:43px;padding:0 18px;font-size:11px;font-weight:600}.scores-table td{border-top:1px solid var(--line-soft);color:#555d63;height:70px;padding:0 18px}.score-name-button{cursor:pointer;background:0 0;border:0;align-items:center;gap:12px;display:flex}.score-name-button>span{width:34px;height:34px;color:var(--coral);background:var(--coral-soft);border-radius:5px;place-items:center;display:grid}.score-name-button strong{color:var(--ink)}.table-actions{justify-content:flex-end;gap:6px;display:flex}.table-actions button{color:#626a70;cursor:pointer;background:0 0;border:0;border-radius:5px;place-items:center;width:32px;height:32px;display:grid}.table-actions button:hover{background:#f0f1f1}.table-actions .danger:hover{color:#a43c2f;background:#fff0ed}.empty-scores{border:1px solid var(--line);text-align:center;min-height:380px;box-shadow:var(--shadow);background:#fff;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-scores>span{width:61px;height:61px;color:var(--coral);background:var(--coral-soft);border-radius:50%;place-items:center;display:grid}.empty-scores h2{letter-spacing:-.4px;margin:19px 0 8px;font-size:20px}.empty-scores p{color:var(--muted);margin:0;font-size:13px}.empty-scores button{border:1px solid var(--coral-contrast);color:#fff;background:var(--coral-contrast);cursor:pointer;border-radius:5px;margin-top:22px;padding:10px 14px;font-size:12px;font-weight:650}.empty-scores button:hover{border-color:var(--coral-contrast-hover);background:var(--coral-contrast-hover)}.learn-page{padding-top:0}.learn-intro{grid-template-columns:1fr 1fr;align-items:center;gap:70px;min-height:440px;display:grid}.learn-intro h1{letter-spacing:-3.4px;max-width:620px;margin:0;font-size:clamp(42px,5vw,68px);line-height:.98}.learn-intro p{max-width:580px;color:var(--muted);margin:24px 0;font-size:16px;line-height:1.6}.learn-intro button{border:0}.learn-visual{color:#fff;background:#20262b;border:1px solid #343b41;border-radius:12px;justify-content:space-between;align-items:center;height:270px;padding:0 55px;display:flex;position:relative;overflow:hidden}.learn-visual svg{z-index:2;width:48px;height:48px}.learn-visual svg:first-child{color:var(--coral)}.learn-visual svg:last-child{color:var(--blue)}.learn-visual span{background:#555c61;height:2px;position:absolute;left:80px;right:80px}.learn-visual i{background:var(--coral);width:2px;height:130px;position:absolute;left:50%;box-shadow:0 0 10px #ff5a43b3}.learn-workflow{border-top:1px solid var(--line);padding:70px 0}.learn-workflow>h2{letter-spacing:-1px;margin:0 0 35px;font-size:28px}.workflow-steps{grid-template-columns:repeat(3,1fr);gap:50px;display:grid}.workflow-steps article{border-top:1px solid #bfc4c7;padding-top:24px;position:relative}.workflow-steps article>span{color:#b03828;font-size:11px;font-weight:700}.workflow-steps svg{width:25px;height:25px;margin:32px 0 18px;display:block}.workflow-steps h3{margin:0;font-size:17px}.workflow-steps p,.learn-notes p{color:var(--muted);font-size:13px;line-height:1.6}.learn-notes{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.learn-notes>div{border:1px solid var(--line);background:#fff;border-radius:8px;padding:27px}.learn-notes svg{color:var(--coral)}.learn-notes h3{margin:18px 0 8px}.learn-notes p{margin:0}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#12171b78;place-items:center;padding:20px;animation:.15s both fade-in;display:grid;position:fixed;inset:0}.modal{background:#fff;border:1px solid #fff6;border-radius:11px;width:min(500px,100%);max-height:min(720px,90vh);animation:.18s both modal-in;overflow:auto;box-shadow:0 28px 80px #0a0e1240}.modal.small{width:min(340px,100%)}.modal-heading{border-bottom:1px solid var(--line-soft);justify-content:space-between;align-items:center;height:63px;padding:0 21px;display:flex}.modal-heading h2{letter-spacing:-.3px;margin:0;font-size:18px}.modal-heading button{cursor:pointer;background:0 0;border:0;border-radius:5px;place-items:center;width:32px;height:32px;display:grid}.modal-heading button:hover{background:#f1f2f2}.modal-intro,.privacy-note{color:var(--muted);margin:20px 21px 15px;font-size:13px;line-height:1.5}.export-options{gap:8px;margin:0 21px;display:grid}.export-options button{border:1px solid var(--line);text-align:left;cursor:pointer;background:#fff;border-radius:7px;grid-template-columns:38px 1fr 20px;align-items:center;gap:12px;min-height:68px;padding:8px 11px;display:grid}.export-options button:hover{background:#fff9f7;border-color:#ffb3a8}.export-icon{width:36px;height:36px;color:var(--coral);background:var(--coral-soft);border-radius:5px;place-items:center;display:grid}.export-icon svg{width:18px}.export-options strong,.export-options small{display:block}.export-options strong{font-size:13px}.export-options small{color:var(--muted);margin-top:4px;font-size:10px}.modal-done{border:1px solid var(--coral-contrast);color:#fff;background:var(--coral-contrast);cursor:pointer;border-radius:5px;justify-content:center;align-items:center;gap:7px;height:40px;margin:18px 21px 21px auto;padding:0 15px;font-size:12px;font-weight:650;display:flex}.modal-done:hover{border-color:var(--coral-contrast-hover);background:var(--coral-contrast-hover)}.help-steps{gap:20px;padding:23px 21px 5px;display:grid}.help-steps>div{grid-template-columns:28px 1fr;gap:12px;display:grid}.help-steps>div>span{color:#a93425;background:var(--coral-soft);border-radius:50%;place-items:center;width:27px;height:27px;font-size:11px;font-weight:700;display:grid}.help-steps p{color:var(--muted);margin:1px 0 0;font-size:12px;line-height:1.5}.help-steps strong{color:var(--ink);margin-bottom:3px;font-size:13px;display:block}.privacy-note{background:#f4f5f5;border-radius:6px;padding:12px}.profile-panel{align-items:center;gap:14px;padding:25px 21px 10px;display:flex}.profile-panel>span{color:#fff;background:#252c31;border-radius:50%;place-items:center;width:48px;height:48px;font-size:13px;font-weight:700;display:grid}.profile-panel p{color:var(--muted);margin:5px 0 0;font-size:12px}.playback-modal{gap:19px;padding:24px 21px;display:grid}.playback-modal label{justify-content:space-between;align-items:center;gap:20px;font-size:13px;display:flex}.playback-modal input[type=range]{width:190px}.playback-modal select{border:1px solid var(--line);background:#fff;border-radius:5px;height:34px}.mobile-nav-modal{padding:12px;display:grid}.mobile-nav-modal button{border:0;border-bottom:1px solid var(--line-soft);text-align:left;cursor:pointer;background:#fff;height:46px}.toast{z-index:120;color:#fff;background:#20262b;border:1px solid #3d454c;border-radius:6px;padding:11px 15px;font-size:12px;animation:.2s both toast-in;position:fixed;bottom:102px;left:50%;transform:translate(-50%);box-shadow:0 12px 35px #0f14183b}@keyframes level-pulse{0%{transform:scaleY(.6)}to{transform:scaleY(1.15)}}@keyframes fade-in{0%{opacity:0}}@keyframes modal-in{0%{opacity:0;transform:translateY(7px)scale(.985)}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=1180px){.session-strip{grid-template-columns:1fr auto}.permission-note{grid-area:2/1/auto/-1;max-width:none}.session-actions{grid-area:1/2}.quiet-action span{display:none}.workspace-grid{grid-template-columns:minmax(0,1fr) 260px}.control-bar{grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(102px,.7fr)) minmax(92px,.55fr)}.transport{grid-template-columns:126px 65px 180px minmax(245px,1fr) 80px 38px;padding:0 18px}.transport-tools{gap:10px;padding-left:16px}}@media (width<=920px){.app-header{padding:0 18px}.main-nav{display:none}.mobile-menu-button{display:grid}.header-divider{display:none}.session-strip{grid-template-columns:1fr;gap:12px;padding:16px 18px}.session-actions{flex-wrap:wrap;grid-area:auto/1;justify-content:flex-start}.permission-note{grid-area:auto/1}.workspace-shell{padding-inline:14px}.control-bar{display:flex;overflow-x:auto}.control-bar>*{flex:0 0 170px}.control-bar>.microphone-select-wrap{flex-basis:285px}.workspace-grid{grid-template-columns:1fr}.inspector{min-height:auto}.inspector-body{grid-template-columns:repeat(2,1fr);gap:0 20px;display:grid}.takes-section,.tutorial-legend,.tutorial-tip,.inspector-separator{grid-column:1/-1}.clear-session{width:auto}.transport{grid-template-columns:120px 1fr auto;min-height:76px}.mini-wave,.transport-tools{display:none}.transport-main{grid-area:1/2}.tempo-readout{grid-column:3}.transport-settings{display:none!important}.learn-intro{grid-template-columns:1fr;gap:35px;padding:60px 0}.learn-visual{height:230px}}@media (width<=640px){.app-header{height:56px}.brand{font-size:19px}.brand-mark,.brand-mark svg{width:29px;height:29px}.help-button span,.avatar-button{display:none}.studio-page{min-height:calc(100vh - 56px);padding-bottom:72px}.session-strip{padding:13px 14px 16px}.session-identity input{font-size:19px}.permission-note{order:2}.session-actions{grid-template-columns:repeat(2,1fr);width:100%;display:grid}.session-actions button{min-width:0;padding:0 9px}.session-actions .quiet-action{grid-row:2}.session-actions .quiet-action span{display:inline}.url-import-panel{margin:8px 8px 0;padding:12px}.url-import-form,.youtube-capture-card{grid-template-columns:1fr}.url-import-form>button{min-height:42px}.youtube-capture-actions{justify-content:stretch}.youtube-capture-actions>*{flex:1}.workspace-shell{padding:0 8px 8px}.mode-tabs{height:54px}.mode-tab{flex:1;min-width:0;padding:0 9px;font-size:12px}.control-bar{margin-inline:0}.score-surface,.inspector,.piano-surface{border-radius:7px}.score-paper{min-height:520px;padding:19px 12px 0}.score-paper-heading{justify-content:flex-start;padding-left:20px}.score-paper-heading h2{font-size:23px}.detected-readout{font-size:10px}.notation-wrap{min-width:680px}.score-paper{overflow-x:auto}.workspace-grid{gap:8px}.inspector-body{display:block}.piano-canvas-header{height:auto;min-height:76px;padding:12px}.piano-canvas-actions label span{display:none}.piano-canvas-actions button{font-size:0}.piano-roll-area{height:500px}.falling-notes,.roll-grid{bottom:127px}.piano-keyboard{height:127px}.black-key{height:72px}.transport{grid-template-columns:92px 1fr 61px;gap:4px;min-height:69px;padding:0 9px}.transport-time strong{font-size:14px}.transport-time span{font-size:11px}.transport-time span:nth-child(3){display:none}.transport-main{gap:9px}.play-button{width:44px;height:44px}.tempo-readout{font-size:11px}.content-page{width:min(100% - 28px,1180px);padding-top:38px}.page-heading-row{flex-direction:column;align-items:flex-start}.scores-table th:nth-child(2),.scores-table td:nth-child(2),.scores-table th:nth-child(3),.scores-table td:nth-child(3){display:none}.scores-table th,.scores-table td{padding:0 11px}.learn-intro h1{letter-spacing:-2.3px}.workflow-steps,.learn-notes{grid-template-columns:1fr;gap:24px}.learn-workflow{padding-block:50px}.toast{text-align:center;width:calc(100% - 32px);bottom:83px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media print{.app-header,.session-strip,.mode-tabs,.control-bar,.inspector,.transport,.score-toolbar{display:none!important}.studio-page,.workspace-shell{padding:0}.workspace-grid{display:block}.score-surface{box-shadow:none;border:0}.score-paper{background:#fff;overflow:visible}}.transcription-progress{box-shadow:var(--shadow);background:#fff8f6;border:1px solid #ffd1c9;border-radius:8px;margin:12px 24px 0;padding:12px 15px}.transcription-progress>div{color:#5b6268;grid-template-columns:20px 1fr auto;align-items:center;gap:10px;font-size:11px;display:grid}.transcription-progress>div>span{white-space:nowrap;text-overflow:ellipsis;align-items:baseline;gap:8px;min-width:0;display:flex;overflow:hidden}.transcription-progress strong{color:var(--ink);font-size:12px}.transcription-progress b{color:var(--coral-dark);font-variant-numeric:tabular-nums}.transcription-progress progress{width:100%;height:6px;accent-color:var(--coral);border:0;border-radius:9px;margin:10px 0 7px;display:block;overflow:hidden}.transcription-progress small{color:var(--muted);font-size:10px}.transcription-error{color:#913629;background:#fff3f0;border:1px solid #edb8ae;border-radius:7px;margin:12px 24px 0;padding:10px 13px;font-size:12px}.system-playhead{z-index:4;bottom:auto}.empty-score-message{z-index:3;border:1px solid var(--line);color:var(--muted);box-shadow:var(--shadow);text-align:center;pointer-events:none;background:#fffffff2;border-radius:9px;flex-direction:column;align-items:center;padding:17px 22px;display:flex;position:absolute;top:285px;left:50%;transform:translate(-50%)}.empty-score-message svg{color:var(--coral);margin-bottom:8px}.empty-score-message strong{color:var(--ink);font-size:13px}.empty-score-message span{margin-top:5px;font-size:10px}.score-preview-note{color:var(--muted);text-align:center;margin:0 0 18px;font-size:10px}.inspector-explainer,.empty-takes{color:var(--muted);margin:-3px 0 0;font-size:10px;line-height:1.55}.empty-takes{padding:10px 2px}.keys-status{color:#e9ebec;background:#282e33;border:1px solid #4b5155;border-radius:5px;align-items:center;gap:7px;height:36px;padding:0 11px;font-size:11px;display:flex}.falling-note{place-items:center;min-height:18px;transition:bottom 50ms linear;display:grid;overflow:hidden}.falling-note b{color:#fff;text-shadow:0 1px 2px #00000073;writing-mode:vertical-rl;font-size:8px;line-height:1}.tutorial-empty{z-index:8;color:#abb1b5;text-align:center;background:#1f2428f2;border:1px solid #4e555a;border-radius:9px;flex-direction:column;align-items:center;padding:20px 25px;display:flex;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.tutorial-empty svg{color:var(--coral);margin-bottom:8px}.tutorial-empty strong{color:#fff;font-size:13px}.tutorial-empty span{margin-top:5px;font-size:10px}.piano-canvas-actions select{max-width:66px}.transport button:disabled{cursor:not-allowed;opacity:.35}.play-button:disabled{box-shadow:none;background:#aeb3b6!important}@media (width<=640px){.transcription-progress,.transcription-error{margin-inline:8px}.transcription-progress>div>span{display:block}.keys-status{font-size:0}.keys-status svg{width:17px}.detected-readout{display:none}}.theme-toggle{border:1px solid var(--line);width:36px;height:36px;color:var(--ink);background:var(--paper);cursor:pointer;border-radius:50%;place-items:center;display:grid}.theme-toggle:hover{color:var(--coral);background:var(--coral-soft)}.vex-score{contain:layout paint style}.falling-notes{contain:strict}.falling-note{transition:bottom 34ms linear}.falling-note b{writing-mode:horizontal-tb;color:#151a20;text-align:center;text-overflow:clip;white-space:nowrap;max-width:100%;font-size:7px;line-height:1;overflow:hidden;transform:none}.black-key span{color:#f5f5f5;text-align:center;white-space:nowrap;font-size:6px;bottom:9px;left:0;right:0;transform:none}.piano-keyboard{border-top-color:#555d63}html[data-theme=dark]{--canvas:#101316;--paper:#181d21;--ink:#eef2f4;--muted:#9aa3aa;--line:#343b40;--line-soft:#2a3035;--coral-soft:#38231f;--shadow:0 1px 2px #0000003d, 0 14px 34px #0000002e;background:var(--canvas)}html[data-theme=dark] body,html[data-theme=dark] .app-shell,html[data-theme=dark] .studio-page{color:var(--ink);background:var(--canvas)}html[data-theme=dark] .app-header,html[data-theme=dark] .session-strip,html[data-theme=dark] .control-bar,html[data-theme=dark] .score-surface,html[data-theme=dark] .score-toolbar,html[data-theme=dark] .score-paper,html[data-theme=dark] .inspector,html[data-theme=dark] .transport,html[data-theme=dark] .modal,html[data-theme=dark] .scores-table-wrap,html[data-theme=dark] .empty-scores,html[data-theme=dark] .learn-notes>div{color:var(--ink);border-color:var(--line);background:var(--paper)}html[data-theme=dark] .app-header,html[data-theme=dark] .transport{background:#181d21fa}html[data-theme=dark] .session-strip,html[data-theme=dark] .score-toolbar{background:#151a1e}html[data-theme=dark] .permission-note,html[data-theme=dark] .mode-tab{color:var(--muted)}html[data-theme=dark] .mode-tab.active{color:var(--ink);border-color:var(--line);background:var(--paper)}html[data-theme=dark] .quiet-action,html[data-theme=dark] .help-button,html[data-theme=dark] .nav-link,html[data-theme=dark] .tool-button,html[data-theme=dark] .transport button,html[data-theme=dark] .table-actions button{color:var(--ink)}html[data-theme=dark] .quiet-action:hover,html[data-theme=dark] .tool-button:hover,html[data-theme=dark] .tool-button.active,html[data-theme=dark] .table-actions button:hover,html[data-theme=dark] .modal-heading button:hover{background:#252b30}html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] .select-control,html[data-theme=dark] .zoom-control,html[data-theme=dark] .upload-button,html[data-theme=dark] .clear-session,html[data-theme=dark] .score-search,html[data-theme=dark] .export-options button,html[data-theme=dark] .mobile-nav-modal button{color:var(--ink);border-color:var(--line);background:#20262b}html[data-theme=dark] select{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html[data-theme=dark] select option,html[data-theme=dark] select optgroup{color:#eef2f4;background:#20262b}html[data-theme=dark] .select-control:hover{background:#252c31;border-color:#59636b}html[data-theme=dark] .avatar-button{color:var(--ink);border-color:var(--line);background:#20262b}html[data-theme=dark] .session-identity input{background:0 0}html[data-theme=dark] .select-control select,html[data-theme=dark] .piano-canvas-actions select{color:inherit;background:0 0}html[data-theme=dark] .url-button{color:var(--ink);border-color:var(--line);background:#20262b}html[data-theme=dark] .url-button:hover,html[data-theme=dark] .url-button.active{color:#64d8d3;background:#15302f;border-color:#36aaa6}html[data-theme=dark] .url-import-panel{border-color:var(--line);background:var(--paper)}html[data-theme=dark] .youtube-capture-card{background:#162928;border-color:#315e5c}html[data-theme=dark] .youtube-capture-actions a{color:#64d8d3;border-color:#36aaa6}html[data-theme=dark] .score-paper-heading p,html[data-theme=dark] .detected-readout,html[data-theme=dark] .transport-time span{color:var(--muted)}html[data-theme=dark] .empty-score-message{color:var(--muted);border-color:var(--line);background:#181d21f5}html[data-theme=dark] .scores-table th{color:var(--muted);background:#151a1e}html[data-theme=dark] .scores-table td{color:#bdc4c9;border-color:var(--line-soft)}html[data-theme=dark] .score-name-button strong,html[data-theme=dark] .help-steps strong,html[data-theme=dark] .take-name strong,html[data-theme=dark] .take-name small{color:var(--ink)}html[data-theme=dark] .take-row:hover{background:#22282d}html[data-theme=dark] .help-steps>div>span,html[data-theme=dark] .workflow-steps article>span{color:#ff9b89}html[data-theme=dark] .transcription-progress{color:var(--ink);background:#251b19;border-color:#684138}html[data-theme=dark] .transcription-error{color:#ffb5aa;background:#291b19;border-color:#714239}html[data-theme=dark] .privacy-note{background:#20262b}html[data-theme=dark] .export-options button:hover{background:#2a211f;border-color:#8b5147}html[data-theme=dark] .profile-panel>span{background:#303840}html[data-theme=dark] .playback-modal select{color:var(--ink);border-color:var(--line);background:#20262b}@media (width<=640px){.white-key span{font-size:7px;bottom:14px;transform:none}.black-key span{font-size:5px;bottom:8px;transform:none}}.tempo-control{background:var(--paper);min-width:94px;height:40px;color:var(--ink);border:1px solid #d5d8da;border-radius:6px;grid-template-columns:auto minmax(44px,1fr);align-items:center;gap:8px;padding:0 9px;display:grid}.tempo-control>span{color:var(--muted);letter-spacing:.08em;font-size:9px;font-weight:750}.tempo-control input{width:100%;min-width:0;color:inherit;background:0 0;border:0;outline:0;font-size:13px;font-weight:680}.refresh-settings-button{border:1px solid var(--line);height:40px;color:var(--ink);background:var(--paper);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:7px;padding:0 10px;font-size:11px;font-weight:700;display:inline-flex;position:relative}.refresh-settings-button:hover,.refresh-settings-button.dirty{color:#087f7b;background:#effcfb;border-color:#4fbab6}.refresh-settings-button.dirty{box-shadow:0 0 0 2px #2bbcb71f}.refresh-settings-button i{background:var(--coral);border-radius:50%;width:7px;height:7px;position:absolute;top:5px;right:5px}.tutorial-control-bar{background:#fdfdfd;grid-template-columns:minmax(170px,1.2fr) 88px minmax(112px,.75fr) minmax(102px,.65fr) minmax(130px,.8fr) minmax(100px,.58fr) minmax(108px,.65fr);align-items:center}.focus-view-button{border:1px solid var(--line);height:40px;color:var(--ink);background:var(--paper);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:0 12px;font-size:11px;font-weight:650;display:inline-flex}.focus-view-button:hover,.focus-view-button.active{color:#087f7b;background:#effcfb;border-color:#4fbab6}.workspace-grid{grid-template-columns:minmax(0,1fr) 320px;transition:grid-template-columns .18s}.workspace-grid.panel-expanded{grid-template-columns:minmax(0,1fr) 420px}.workspace-grid.panel-collapsed{grid-template-columns:minmax(0,1fr) 58px;gap:8px}.inspector-stack,.inspector-stack>.studio-mode-panel{height:100%}.inspector-heading{gap:12px}.dock-actions{align-items:center;gap:4px;margin-left:auto;display:flex}.dock-actions button,.dock-open-button{width:34px;height:34px;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;place-items:center;padding:0;display:grid}.dock-actions button:hover,.dock-open-button:hover{color:var(--ink);border-color:var(--line);background:var(--line-soft)}.collapsed-inspector{align-items:center;gap:12px;min-height:620px;padding:11px 0}.collapsed-dock-label{color:var(--muted);letter-spacing:.08em;writing-mode:vertical-rl;text-transform:uppercase;margin-top:auto;padding-bottom:6px;font-size:10px;font-weight:700;transform:rotate(180deg)}.collapsed-tab-buttons{gap:7px;display:grid}.collapsed-tab-buttons button{width:38px;height:38px;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;place-items:center;display:grid}.collapsed-tab-buttons button:hover,.collapsed-tab-buttons button.active{color:#087f7b;background:#effcfb;border-color:#74cbc7}.tutorial-active .session-strip{grid-template-columns:minmax(200px,1fr) auto;min-height:72px;padding:8px 24px}.tutorial-active .permission-note{display:none}.tutorial-active .session-identity input{font-size:19px}.tutorial-active .session-identity span{margin-top:2px}.tutorial-active .mode-tabs{height:49px}.tutorial-active .mode-tab{height:40px}.tutorial-active .control-bar{min-height:56px;padding-block:8px}.tutorial-active .workspace-shell{padding:0 12px 10px}.tutorial-active .piano-surface,.tutorial-active .tutorial-inspector,.tutorial-active .collapsed-inspector{height:max(470px,100vh - 325px);min-height:470px}.tutorial-focus .session-strip,.tutorial-focus .mode-tabs,.tutorial-focus .control-bar{display:none}.tutorial-focus .workspace-shell{padding:0}.tutorial-focus .workspace-grid{gap:0}.tutorial-focus .piano-surface,.tutorial-focus .tutorial-inspector,.tutorial-focus .collapsed-inspector{border-radius:0;height:calc(100vh - 148px);min-height:500px}.tutorial-focus .piano-surface{border-bottom:0;border-left:0}.tutorial-focus .inspector{border-bottom:0;border-right:0}.tutorial-inspector{min-height:620px;overflow:hidden}.tutorial-inspector-header{border-bottom:1px solid var(--line-soft);flex:none;align-items:stretch;gap:4px;min-height:58px;padding:0 8px 0 10px;display:flex}.tutorial-tabs{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0;display:grid}.tutorial-tabs button{min-width:0;min-height:52px;color:var(--muted);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:6px;padding:0 5px;font-size:11px;display:inline-flex;position:relative}.tutorial-tabs button:after{content:"";background:0 0;height:2px;position:absolute;bottom:-1px;left:9px;right:9px}.tutorial-tabs button:hover{color:var(--ink)}.tutorial-tabs button.active{color:#078c87;font-weight:700}.tutorial-tabs button.active:after{background:#2bbcb7}.tutorial-inspector-header .dock-actions{flex:none}.tutorial-inspector-scroll{scrollbar-width:thin;scrollbar-color:#747d84 transparent;flex:1;min-height:0;overflow:auto}.tutorial-tab-panel{min-height:100%;padding:18px}.tutorial-control-group{margin-bottom:22px}.tutorial-control-label,.inspector-section>h3,.live-preview-section>h3{color:var(--muted);letter-spacing:.09em;text-transform:uppercase;margin:0 0 10px;font-size:10px;font-weight:760;display:block}.segmented-control{border:1px solid var(--line);border-radius:7px;min-height:38px;display:flex;overflow:hidden}.segmented-control button{border:0;border-left:1px solid var(--line);min-width:0;color:var(--muted);cursor:pointer;background:0 0;flex:1;padding:0 7px;font-size:10px}.segmented-control button:first-child{border-left:0}.segmented-control button:hover{color:var(--ink);background:var(--line-soft)}.segmented-control button.active{color:#087f7b;background:#e9faf9;font-weight:700;box-shadow:inset 0 0 0 1px #2bbcb7}.inspector-section{border-bottom:1px solid var(--line-soft);margin-bottom:20px;padding-bottom:18px}.hand-color-row{grid-template-columns:70px 32px minmax(0,1fr);align-items:center;gap:8px;min-height:46px;font-size:11px;display:grid}.custom-color{border:1px solid var(--line);cursor:pointer;border-radius:7px;width:31px;height:31px;padding:3px;display:block;position:relative}.custom-color input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.custom-color i{pointer-events:none;border-radius:4px;width:100%;height:100%;display:block}.color-swatches{align-items:center;gap:6px;min-width:0;display:flex;overflow:hidden}.color-swatches button{background:var(--swatch);cursor:pointer;border:2px solid #0000;border-radius:5px;flex:0 23px;width:23px;height:23px;padding:0}.color-swatches button:hover{transform:translateY(-1px)}.color-swatches button.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper), 0 0 0 3px var(--swatch)}.visual-style-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.visual-style-grid>button{border:1px solid var(--line);min-width:0;color:var(--muted);cursor:pointer;background:0 0;border-radius:7px;padding:4px}.visual-style-grid>button:hover{color:var(--ink);border-color:#9da5aa}.visual-style-grid>button.active{color:#087f7b;border-color:#2bbcb7;box-shadow:inset 0 0 0 1px #2bbcb7}.visual-style-grid b{text-overflow:ellipsis;padding:5px 0 2px;font-size:8px;font-weight:650;display:block;overflow:hidden}.style-preview{background:#111820;border-radius:4px;justify-content:space-around;align-items:flex-end;height:42px;padding:7px 7px 4px;display:flex;position:relative;overflow:hidden}.style-preview i{background:#5d93ff;border-radius:3px;width:4px;box-shadow:0 0 6px}.style-preview i:first-child{height:13px}.style-preview i:nth-child(2){background:#ff745f;height:26px}.style-preview i:nth-child(3){height:18px}.style-preview i:nth-child(4){background:#ff745f;height:29px}.style-preview.aurora{background:radial-gradient(circle at 50% 100%,#174c53,#171526 65%)}.style-preview.aurora i:nth-child(odd){background:#36d7c7}.style-preview.concert{background:radial-gradient(circle at 50% 100%,#624819,#171816 66%)}.style-preview.concert i{background:#e8b856!important}.style-preview.minimal{background:#15191d}.style-preview.minimal i{box-shadow:none;opacity:.75}.effects-section{margin-top:4px}.effect-row{border-bottom:1px solid var(--line-soft);justify-content:space-between;align-items:center;min-height:42px;font-size:11px;display:flex}.effect-row>span{align-items:center;gap:9px;display:inline-flex}.effect-row>span svg{color:var(--muted)}.tutorial-range{margin:4px 0 22px;font-size:11px;display:block}.tutorial-range>span{justify-content:space-between;margin-bottom:11px;display:flex}.tutorial-range strong{color:var(--muted);font-size:10px}.tutorial-range input{cursor:pointer;width:100%}.live-preview-section{border-top:1px solid var(--line-soft);padding-top:18px}.inspector-live-preview{background:#111820;border:1px solid #3c454c;border-radius:7px;height:118px;position:relative;overflow:hidden}.inspector-live-preview.visual-aurora{background:radial-gradient(circle at 50% 100%,#174c53,#171526 68%)}.inspector-live-preview.visual-concert{background:radial-gradient(circle at 50% 100%,#5a431c,#151718 68%)}.inspector-live-preview.visual-minimal{background:#14181b}.preview-notes{width:30%;position:absolute;inset:8px auto 30px}.preview-notes.left{color:var(--left-hand-color);left:15%}.preview-notes.right{color:var(--right-hand-color);right:15%}.preview-notes i{background:currentColor;border-radius:4px;width:6px;height:26px;position:absolute;bottom:0;box-shadow:0 0 8px}.preview-notes i:nth-child(2){height:19px;bottom:28px;left:42%}.preview-notes i:nth-child(3){height:34px;bottom:11px;right:2px}.shape-beam .preview-notes i{border-radius:1px}.shape-crystal .preview-notes i{clip-path:polygon(50% 0,100% 14%,100% 86%,50% 100%,0 86%,0 14%);border-radius:1px}.preview-keys{border-top:1px solid #737b80;height:30px;display:flex;position:absolute;bottom:0;left:0;right:0}.preview-keys i{background:#f0f1f1;border-right:1px solid #777;flex:1}.preview-keys i:nth-child(3n){z-index:2;background:#15191c;height:18px;margin-left:-2px}.practice-guide{border-block:1px solid var(--line-soft);color:var(--muted);gap:10px;margin:23px 0;padding:15px 0;font-size:10px;display:grid}.practice-guide span{align-items:center;gap:9px;display:flex}.practice-guide i{background:var(--guide-color);width:13px;height:13px;box-shadow:0 0 8px var(--guide-color);border-radius:3px}.sound-panel .inspector-section{padding-bottom:20px}.instrument-family-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:16px;display:grid}.instrument-family-grid button{border:1px solid var(--line);min-width:0;min-height:58px;color:var(--muted);cursor:pointer;background:0 0;border-radius:7px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:5px 2px;font-size:8px;display:flex}.instrument-family-grid button:hover{color:var(--ink);background:var(--line-soft)}.instrument-family-grid button.active{color:#087f7b;background:#e9faf9;border-color:#2bbcb7}.instrument-picker{color:var(--muted);margin-bottom:13px;font-size:10px;display:block}.instrument-picker>span{margin-bottom:6px;display:block}.instrument-picker select{border:1px solid var(--line);width:100%;height:42px;color:var(--ink);background:var(--paper);border-radius:6px;padding:0 10px;font-size:11px}.instrument-detail{background:var(--line-soft);border-left:2px solid #2bbcb7;align-items:center;gap:11px;min-height:54px;padding:9px 10px;display:flex}.instrument-detail>svg{color:#078c87}.instrument-detail strong,.instrument-detail small{display:block}.instrument-detail strong{color:var(--ink);font-size:11px}.instrument-detail small{color:var(--muted);margin-top:4px;font-size:9px}.sound-volume{padding-top:2px}.audition-button{color:#087f7b;cursor:pointer;background:#effcfb;border:1px solid #2bbcb7;border-radius:6px;justify-content:center;align-items:center;gap:8px;width:100%;height:42px;font-size:11px;font-weight:700;display:flex}.audition-button:hover{color:#fff;background:#168f8a}.sound-panel .tutorial-tip{margin-top:19px}.piano-surface{--left-hand-color:#5d93ff;--right-hand-color:#ff745f;--keyboard-height:142px;background:#101820;position:relative}.piano-surface.visual-studio{background:linear-gradient(#101923,#16212a 68%,#0f151a)}.piano-surface.visual-aurora{background:radial-gradient(at 18% 100%,#2c818f80,#0000 45%),radial-gradient(at 82% 18%,#6e449247,#0000 48%),#101721}.piano-surface.visual-concert{background:radial-gradient(at 50% 100%,#97671c57,#0000 55%),linear-gradient(#15191c,#202017 80%)}.piano-surface.visual-minimal{background:#14191d}.piano-canvas-header{z-index:12;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a1015c2;position:relative}.piano-canvas-header h2{letter-spacing:-.1px;font-size:13px}.piano-canvas-header p span{color:#68737b;margin:0 5px}.piano-canvas-actions button span{display:inline}.piano-roll-area{isolation:isolate}.measure-ruler{z-index:3;background:#090f1347}.roll-grid{bottom:var(--keyboard-height);z-index:1}.falling-notes{bottom:var(--keyboard-height);z-index:5}.falling-note{color:var(--note-color);background:var(--note-color);opacity:var(--note-opacity,1);will-change:bottom}.falling-note.right{--note-color:var(--right-hand-color);color:var(--note-color);background:var(--note-color)}.falling-note.left{--note-color:var(--left-hand-color);color:var(--note-color);background:var(--note-color)}.effect-glow .falling-note{box-shadow:0 0 8px currentColor, 0 0 18px color-mix(in srgb, currentColor 42%, transparent)}.effect-trails .falling-note:before{content:"";z-index:-1;opacity:.28;filter:blur(3px);background:linear-gradient(#0000,currentColor);width:100%;height:min(80px,180%);position:absolute;top:-70%;left:0}.shape-rounded .falling-note{border-radius:6px}.shape-beam .falling-note{border-radius:1px}.shape-crystal .falling-note{clip-path:polygon(50% 0,100% 8%,100% 92%,50% 100%,0 92%,0 8%);border-radius:1px}.falling-note b{color:#fff;text-shadow:0 1px 2px #000000a6;font-size:8px;font-weight:800}.strike-line{height:2px;left:0;right:0;bottom:var(--keyboard-height);z-index:8;pointer-events:none;background:#ffffffd9;position:absolute;box-shadow:0 0 8px #ffffff6b}.tutorial-particles{inset:40px 0 var(--keyboard-height);z-index:2;pointer-events:none;position:absolute;overflow:hidden}.tutorial-particles i{width:var(--particle-size);height:var(--particle-size);animation:tutorial-particle var(--particle-duration) linear var(--particle-delay) infinite;background:#71d5cfb8;border-radius:50%;position:absolute;bottom:-6px;box-shadow:0 0 7px #71d5cf9e}.tutorial-particles i:nth-child(2n){color:var(--right-hand-color);opacity:.6;background:currentColor;box-shadow:0 0 8px}.tutorial-particles i:nth-child(3n){color:var(--left-hand-color);opacity:.65;background:currentColor;box-shadow:0 0 8px}.visual-minimal .tutorial-particles{display:none}.piano-keyboard{height:var(--keyboard-height);z-index:9;border-top:0;box-shadow:0 -8px 22px #00000057}.white-key.active.right{background:var(--right-hand-color);box-shadow:inset 0 -7px 0 #4c1811a8, 0 0 18px var(--right-hand-color)}.white-key.active.left{background:var(--left-hand-color);box-shadow:inset 0 -7px 0 #182e5ca8, 0 0 18px var(--left-hand-color)}.black-key{height:59%}.black-key.active.right{background:var(--right-hand-color);box-shadow:inset 0 -5px 0 #4c1811a8, 0 0 17px var(--right-hand-color)}.black-key.active.left{background:var(--left-hand-color);box-shadow:inset 0 -5px 0 #182e5ca8, 0 0 17px var(--left-hand-color)}.white-key span,.black-key span{writing-mode:horizontal-tb;transform:none}.visual-minimal .falling-note,.visual-minimal .active{box-shadow:none}html[data-theme=dark] .tempo-control,html[data-theme=dark] .refresh-settings-button,html[data-theme=dark] .focus-view-button,html[data-theme=dark] .instrument-picker select{color:var(--ink);border-color:var(--line);background:#20262b}html[data-theme=dark] .tutorial-control-bar{background:#151a1e}html[data-theme=dark] .focus-view-button:hover,html[data-theme=dark] .focus-view-button.active,html[data-theme=dark] .refresh-settings-button:hover,html[data-theme=dark] .refresh-settings-button.dirty,html[data-theme=dark] .collapsed-tab-buttons button:hover,html[data-theme=dark] .collapsed-tab-buttons button.active,html[data-theme=dark] .segmented-control button.active,html[data-theme=dark] .instrument-family-grid button.active,html[data-theme=dark] .audition-button{color:#64d8d3;background:#15302f;border-color:#36aaa6}html[data-theme=dark] .instrument-detail{background:#20282d}html[data-theme=dark] .visual-style-grid>button,html[data-theme=dark] .segmented-control,html[data-theme=dark] .instrument-family-grid button{border-color:var(--line)}html[data-theme=dark] .visual-style-grid>button:hover,html[data-theme=dark] .segmented-control button:hover,html[data-theme=dark] .instrument-family-grid button:hover{background:#242b30}html[data-theme=dark] .color-swatches button.active{box-shadow:0 0 0 2px var(--paper), 0 0 0 3px var(--swatch);border-color:#fff}html[data-theme=dark] .audition-button:hover{color:#fff;background:#168f8a}@keyframes tutorial-particle{0%{opacity:0;transform:translateY(8px)}18%{opacity:.75}to{opacity:0;transform:translate(8px,-250px)}}@media (width<=1180px){.workspace-grid{grid-template-columns:minmax(0,1fr) 286px}.workspace-grid.panel-expanded{grid-template-columns:minmax(0,1fr) 360px}.tutorial-control-bar{grid-template-columns:minmax(160px,1.15fr) 82px minmax(105px,.75fr) minmax(96px,.65fr) minmax(118px,.75fr) 88px 45px}.tutorial-control-bar .refresh-settings-button span,.tutorial-control-bar .focus-view-button span{display:none}.hand-color-row{grid-template-columns:62px 30px 1fr;gap:6px}.color-swatches{gap:4px}.color-swatches button{width:20px;height:20px}}@media (width<=920px){.workspace-grid,.workspace-grid.panel-expanded,.workspace-grid.panel-collapsed{grid-template-columns:1fr}.collapsed-inspector{flex-direction:row;min-height:58px;padding:8px 11px}.collapsed-tab-buttons{display:flex}.collapsed-dock-label{writing-mode:horizontal-tb;margin:0 0 0 auto;padding:0;transform:none}.tutorial-active .piano-surface{height:560px}.tutorial-active .tutorial-inspector{height:min(680px,76vh)}.tutorial-focus .workspace-grid{display:grid}.tutorial-focus .inspector-stack{display:none}.tutorial-focus .piano-surface{height:calc(100vh - 140px);min-height:480px}.tutorial-control-bar{min-width:0}}@media (width<=640px){.tutorial-active .session-strip{padding:10px 12px}.tutorial-active .session-actions .listen-button,.tutorial-active .session-actions .quiet-action{display:none}.tutorial-active .session-actions{width:auto;display:flex}.tutorial-active .workspace-shell{padding-inline:6px}.piano-canvas-actions .keys-status,.piano-canvas-actions button span{display:none}.piano-canvas-header{padding:10px 12px}.piano-surface{--keyboard-height:122px!important}.tutorial-tabs button svg{display:none}.tutorial-tab-panel{padding:15px}.tutorial-active .piano-surface{height:max(380px,100vh - 380px);min-height:380px}.tutorial-active .piano-roll-area{height:calc(100% - 76px)}.tutorial-active .tutorial-inspector{height:620px}.tutorial-focus .piano-surface{height:calc(100vh - 125px)}}@media (prefers-reduced-motion:reduce){.workspace-grid{transition:none}.tutorial-particles i{opacity:.35;animation:none}}