@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/fef07dbb0973bf53-s.00az9qtie3ho1.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/8a480f0b521d4e75-s.3j-a226dh71aj.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/53b9e256198e5412-s.2gwoz23eiro2t.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7178b3e590c64307-s.0i3h3th1vs4m7.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/caa3a2e1cccd8315-s.p.0zr6hhvz-h9nw.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Fallback;src:local(Arial);ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.0%;size-adjust:104.76%}.geist_dbbf8c4b-module__5qCx7q__className{font-family:Geist,Geist Fallback;font-style:normal}.geist_dbbf8c4b-module__5qCx7q__variable{--font-geist:"Geist", "Geist Fallback"}
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.fixed{position:fixed}.relative{position:relative}.static{position:static}.start{inset-inline-start:var(--spacing)}}:root{--paper:#f6f3ec;--card:#fffdf8;--ink:#172725;--muted:#687572;--line:#d8d9d1;--coral:#e95949;--coral-dark:#bd3c31;--yellow:#efc85c;--mint:#cfe4db;--green:#267667;--blue:#3f6f93;--shadow:0 24px 70px #20312d1a}*{box-sizing:border-box}html{background:var(--paper)}body{background:var(--paper);color:var(--ink);font-family:var(--font-geist), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;-webkit-font-smoothing:antialiased;margin:0}button,select,input{font:inherit}button{color:inherit}button:focus-visible,select:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #3f6f9352}.home-shell,.setup-shell,.practice-shell,.result-shell{min-height:100vh}.home-shell,.setup-shell,.result-shell{padding:0 max(28px,50vw - 640px)}.site-header{border-bottom:1px solid #1727251f;justify-content:space-between;align-items:center;height:96px;display:flex}.site-header.compact{height:76px}.site-nav{align-items:center;gap:5px;margin-left:auto;margin-right:clamp(22px,5vw,74px);display:flex}.header-actions{align-items:center;gap:18px;display:flex}.header-link{min-height:44px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:0 15px;font-size:17px;font-weight:760}.header-link:hover,.header-link.active{color:var(--green);background:#cfe4db75}.brand{letter-spacing:-.04em;align-items:center;gap:11px;font-size:23px;font-weight:760;display:inline-flex}.brand-mark{background:var(--coral);color:#fff;border-radius:50% 50% 46% 54%;place-items:center;width:34px;height:34px;font-size:21px;display:grid;transform:rotate(-4deg)}.midi-pill{cursor:pointer;background:#fffdf8c2;border:1px solid #17272529;border-radius:999px;align-items:center;gap:9px;min-height:42px;padding:0 16px;font-size:13px;font-weight:700;display:inline-flex}.status-dot{background:#9aa19f;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #9aa19f24}.midi-pill.connected .status-dot{background:#3ca77c;box-shadow:0 0 0 4px #3ca77c26}.midi-pill.connecting .status-dot{background:var(--yellow);animation:1s ease-in-out infinite pulse}.midi-pill.choosing .status-dot,.midi-pill.empty .status-dot{background:var(--yellow);box-shadow:0 0 0 4px #efc85c33}.midi-pill.error .status-dot,.midi-pill.denied .status-dot,.midi-pill.unsupported .status-dot{background:var(--coral)}.midi-dialog-backdrop{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#111d1b9e;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.midi-dialog{background:var(--card);width:min(620px,100%);max-height:min(760px,100vh - 48px);box-shadow:0 30px 90px #040c0b47, 10px 10px 0 var(--yellow);border:1px solid #fff9;padding:34px;position:relative;overflow-y:auto}.midi-dialog>.eyebrow{margin-bottom:12px}.dialog-close{border:1px solid var(--line);cursor:pointer;background:0 0;width:38px;height:38px;font-size:24px;line-height:1;position:absolute;top:16px;right:18px}.dialog-state{text-align:center;padding:18px 8px 4px}.dialog-state h2,.device-picker h2{letter-spacing:-.025em;margin:12px 0 9px;font:500 29px/1.2 Georgia,Songti SC,serif}.dialog-state>p,.device-picker-heading p{max-width:500px;color:var(--muted);margin:0 auto 22px;font-size:13px;line-height:1.75}.dialog-spinner{border:3px solid var(--mint);border-top-color:var(--green);border-radius:50%;width:46px;height:46px;animation:.9s linear infinite spin;display:inline-block}.dialog-symbol{width:46px;height:46px;color:var(--coral-dark);background:#f8d7d0;border-radius:50%;place-items:center;font:700 24px Georgia,serif;display:inline-grid}.dialog-symbol.warm{color:#936d0f;background:#f8edc9;font-size:38px}.dialog-primary,.dialog-secondary{cursor:pointer;border:0;min-height:46px;padding:0 18px;font-weight:760}.dialog-primary{background:var(--ink);color:#fff}.dialog-primary:disabled{opacity:.4;cursor:not-allowed}.dialog-secondary{background:0 0;border:1px solid #17272538}.midi-steps{text-align:left;border-top:1px solid var(--line);margin:24px 0;padding:0;list-style:none}.midi-steps li{border-bottom:1px solid var(--line);grid-template-columns:30px 1fr;gap:13px;padding:15px 0;display:grid}.midi-steps li>span{background:var(--mint);width:25px;height:25px;color:var(--green);border-radius:50%;place-items:center;font-size:11px;font-weight:800;display:grid}.midi-steps li div{flex-direction:column;gap:5px;display:flex}.midi-steps small{color:var(--muted);font-size:11px;line-height:1.55}.device-picker{padding-top:8px}.device-picker-heading{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px;display:flex}.device-picker-heading h2{margin-top:0}.device-picker-heading p{margin-bottom:0}.permission-ok{color:var(--green);background:#e9f4ef;border-radius:999px;flex:none;padding:7px 10px;font-size:10px;font-weight:800}.device-list{border-top:1px solid var(--ink)}.device-list label{border-bottom:1px solid var(--line);cursor:pointer;grid-template-columns:auto auto 1fr auto;align-items:center;gap:14px;min-height:74px;padding:10px 12px;display:grid}.device-list label.selected{background:#f0f5f1}.device-list input{opacity:0;pointer-events:none;position:absolute}.device-icon{width:38px;height:38px;color:var(--green);background:#eef0e9;place-items:center;font-size:18px;display:grid}.device-list label>span:nth-of-type(2){flex-direction:column;gap:4px;display:flex}.device-list small{color:var(--muted);font-size:10px}.device-list i{border:1px solid #9aa4a1;border-radius:50%;width:18px;height:18px}.device-list label.selected i{border:5px solid var(--green)}.dialog-actions{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}.dialog-actions.centered{justify-content:center}.connection-methods{padding-top:8px}.connection-method{text-align:left;cursor:pointer;background:#fff;border:1px solid #17272529;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;width:100%;min-height:82px;margin-top:12px;padding:14px 16px;display:grid}.connection-method:hover{border-color:var(--green);background:#f4f8f5}.connection-method.recommended{box-shadow:inset 4px 0 var(--green);border-color:#26766773}.connection-method:disabled{opacity:.48;cursor:not-allowed}.connection-method>span:nth-child(2){flex-direction:column;gap:5px;display:flex}.connection-method small{color:var(--muted);font-size:10px}.connection-method>i{color:var(--green);font-size:18px;font-style:normal}.method-icon{background:var(--mint);width:42px;height:42px;color:var(--green);border-radius:50%;place-items:center;font-size:20px;font-weight:800;display:grid}.method-note{color:var(--muted);text-align:center;margin:15px 0 0;font-size:10px}.direct-bluetooth{margin:0 0 8px}.text-method-switch{color:var(--green);cursor:pointer;background:0 0;border:0;margin:17px auto 0;font-size:11px;font-weight:750;display:block}.bluetooth-connected{text-align:center;padding-top:8px}.bluetooth-connected>h2{margin:12px 0 8px;font:500 29px/1.2 Georgia,Songti SC,serif}.bluetooth-connected>p{max-width:480px;color:var(--muted);margin:0 auto;font-size:12px;line-height:1.7}.connected-badge{background:var(--mint);width:48px;height:48px;color:var(--green);border-radius:50%;place-items:center;margin:0 auto;font-size:22px;font-weight:800;display:grid}.midi-calibration{border-top:1px solid var(--line);margin-top:22px;padding-top:22px}.calibration-kicker{color:var(--coral-dark);letter-spacing:.09em;font-size:10px;font-weight:800}.midi-calibration h3{margin:5px 0 7px;font:500 21px/1.2 Georgia,Songti SC,serif}.midi-calibration p{color:var(--muted);margin:0;font-size:11px;line-height:1.65}.midi-calibration p b{color:var(--ink)}.calibration-reading{background:#f8f6f0;border:1px solid #17272521;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:76px;margin:16px 0 4px;display:flex}.calibration-reading span,.calibration-reading small{color:var(--muted);font-size:10px}.calibration-reading strong{font-family:Georgia,serif;font-size:20px;font-weight:500}.calibration-actions{margin-top:12px}.calibration-status{color:var(--muted);text-align:center;margin-top:10px;font-size:10px;display:block}.hero-grid{grid-template-columns:.92fr 1.08fr;align-items:center;gap:clamp(48px,7vw,108px);min-height:610px;padding:64px 0 72px;display:grid}.eyebrow{text-transform:uppercase;letter-spacing:.17em;color:var(--coral-dark);margin:0 0 16px;font-size:12px;font-weight:780}.hero-copy h1{letter-spacing:-.055em;max-width:680px;margin:0;font-family:Georgia,Songti SC,serif;font-size:clamp(52px,5.1vw,82px);font-weight:500;line-height:.98}.hero-copy h1 em{color:var(--coral);font-style:italic;font-weight:500;display:inline-block}.hero-description{max-width:530px;color:var(--muted);margin:28px 0 0;font-size:17px;line-height:1.85}.hero-actions{flex-wrap:wrap;align-items:center;gap:14px;margin-top:35px;display:flex}.primary-action,.secondary-action,.text-action{cursor:pointer;border:0;min-height:52px;padding:0 23px;font-weight:760}.primary-action{color:#fff;background:var(--ink);box-shadow:6px 6px 0 var(--yellow);justify-content:center;align-items:center;gap:20px;display:inline-flex}.primary-action:hover{background:#263d3a;transform:translateY(-1px)}.primary-action.full{width:100%}.secondary-action{background:0 0;border:1px solid #1727253d}.secondary-action:hover{background:#ffffff8c}.text-action{color:var(--muted);background:0 0;padding-inline:10px}.trust-row{color:var(--muted);flex-wrap:wrap;gap:20px;margin-top:33px;font-size:12px;display:flex}.trust-row b{color:var(--green)}.hero-demo{background:var(--card);min-height:430px;box-shadow:var(--shadow), 13px 13px 0 var(--mint);border:1px solid #17272529;padding:24px 25px 0;position:relative;overflow:hidden}.hero-demo:before{content:"";background:var(--yellow);opacity:.32;border-radius:50%;width:70px;height:70px;position:absolute;top:76px;right:22px}.demo-topline{justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:740;display:flex}.wait-badge{color:var(--green);background:#eef7f2;border:1px solid #bbd9cc;border-radius:999px;padding:8px 12px}.mini-staff{height:135px;margin-top:38px;position:relative}.mini-line,.staff-line{background:#283431;height:1.5px;position:absolute;left:0;right:0}.mini-clef{font-family:Times New Roman,serif;font-size:73px;line-height:1;position:absolute;top:18px;left:2%}.mini-note{background:var(--ink);border-radius:50%;width:17px;height:12px;position:absolute;transform:rotate(-15deg)}.mini-note:after{content:"";background:var(--ink);transform-origin:bottom;width:2px;height:35px;position:absolute;bottom:7px;right:1px;transform:rotate(15deg)}.mini-cursor{border-left:2px solid var(--coral);background:#e9594921;width:24px;position:absolute;top:8px;bottom:15px;left:38%}.demo-lower{border-top:1px solid var(--line);background:var(--line);grid-template-columns:1fr 1fr;gap:1px;margin:10px -25px 0;display:grid}.finger-demo,.answer-demo{background:var(--card);min-height:104px;padding:20px 25px}.finger-demo{align-items:center;gap:14px;display:flex}.finger-dot{background:var(--coral);color:#fff;border-radius:50%;place-items:center;width:46px;height:46px;font-weight:800;display:grid;box-shadow:0 0 0 8px #e959491a}.finger-demo div{flex-direction:column;gap:4px;display:flex}.finger-demo small,.answer-demo small{color:var(--muted)}.answer-demo{grid-template-columns:1fr auto;align-items:center;display:grid}.answer-demo>span{color:var(--muted);font-size:12px}.answer-demo strong{grid-area:1/2/span 2;font-family:Georgia,serif;font-size:38px}.answer-demo small{grid-column:1}.demo-keyboard{background:#202c2a;grid-template-columns:repeat(16,1fr);gap:2px;height:66px;padding:0 2px 2px;transition:transform .25s;display:grid;position:absolute;bottom:0;left:0;right:0;transform:translateY(42px)}.hero-demo:hover .demo-keyboard{transform:translateY(0)}.demo-keyboard span{background:#f6f1e7;border-radius:0 0 3px 3px}.demo-keyboard span.active{background:var(--yellow)}.today-panel{border-top:1px solid #17272529;border-bottom:1px solid #17272529;grid-template-columns:1.45fr repeat(3,.65fr);margin-bottom:64px;display:grid}.today-intro,.metric{padding:31px 28px}.today-intro{padding-left:0}.today-intro h2{margin:0 0 8px;font-family:Georgia,Songti SC,serif;font-size:26px;font-weight:500}.today-intro p:last-child{color:var(--muted);margin:0;font-size:13px}.metric{border-left:1px solid #17272529;flex-direction:column;justify-content:center;gap:7px;display:flex}.metric strong{font-family:Georgia,serif;font-size:33px;font-weight:500}.metric span{color:var(--muted);font-size:12px}.back-link{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0;font-size:13px;font-weight:700}.setup-shell>.back-link{margin-top:24px}.setup-heading{justify-content:space-between;align-items:end;gap:40px;padding:48px 0 38px;display:flex}.setup-heading h1{letter-spacing:-.04em;margin:0;font-family:Georgia,Songti SC,serif;font-size:clamp(36px,4vw,54px);font-weight:500}.setup-heading>p{max-width:340px;color:var(--muted);margin:0;line-height:1.7}.setup-layout{grid-template-columns:1fr 360px;align-items:start;gap:40px;padding-bottom:70px;display:grid}.setup-form{background:var(--card);border:1px solid #17272521}.setting-block{border-bottom:1px solid var(--line);grid-template-columns:250px 1fr;align-items:center;gap:34px;padding:28px 30px;display:grid}.setting-block:last-child{border-bottom:0}.setting-label{align-items:flex-start;gap:17px;display:flex}.setting-label>span{color:var(--coral-dark);border-bottom:2px solid var(--coral);padding-bottom:4px;font-size:11px}.setting-label h2{margin:0 0 5px;font-size:17px}.setting-label p{color:var(--muted);margin:0;font-size:12px;line-height:1.55}.segmented{background:#f2f0e9;border:1px solid #17272529;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;display:grid}.segmented button{cursor:pointer;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:55px;display:flex}.segmented button.selected{background:var(--card);color:var(--coral-dark);box-shadow:0 3px 12px #17272517}.segmented small{color:var(--muted);font-size:11px;font-weight:500}.sub-choice{justify-content:flex-end;gap:14px;margin-top:13px;display:flex}.sub-choice button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:0 0 4px;font-size:12px}.sub-choice button.selected{color:var(--green);border-color:var(--green);font-weight:740}.field-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.field-grid label{color:var(--muted);flex-direction:column;gap:8px;font-size:12px;display:flex}.field-grid select{height:48px;color:var(--ink);background:#fff;border:1px solid #1727252e;padding:0 13px}.setup-summary{background:var(--ink);color:#fff;box-shadow:10px 10px 0 var(--yellow);padding:28px;position:sticky;top:24px}.setup-summary .eyebrow{color:#9dcdbc}.setup-summary .mini-staff{margin:5px -5px 20px}.setup-summary .mini-line,.setup-summary .mini-note,.setup-summary .mini-note:after{background:#ffffffe0}.setup-summary .mini-cursor{border-color:var(--yellow);background:#efc85c26}.setup-summary dl{margin:0 0 26px}.setup-summary dl div{border-bottom:1px solid #ffffff1f;justify-content:space-between;gap:14px;padding:13px 0;display:flex}.setup-summary dt{color:#ffffff94;font-size:12px}.setup-summary dd{text-align:right;margin:0;font-size:13px;font-weight:700}.setup-summary .primary-action{background:var(--coral);box-shadow:none}.summary-note{color:#ffffff9c;margin:18px 0 0;font-size:11px;line-height:1.6}.summary-note span{color:#66c39f}.summary-symbol-preview{border-top:1px solid #ffffff2b;border-bottom:1px solid #ffffff2b;flex-direction:column;justify-content:center;align-items:center;gap:9px;height:145px;margin:5px -5px 20px;display:flex}.summary-symbol-preview span{color:var(--yellow);font:500 56px/1 Georgia,Songti SC,serif}.summary-symbol-preview small{color:#ffffff8c;letter-spacing:.08em;font-size:10px}.summary-symbol-preview.grand-preview span{font-family:Times New Roman,serif;font-size:48px}.practice-shell{background:#fbfaf6;padding-bottom:0}.practice-shell>.site-header,.practice-toolbar,.practice-main,.browser-warning{margin-left:max(26px,50vw - 690px);margin-right:max(26px,50vw - 690px)}.practice-toolbar{border-bottom:1px solid #1727251f;grid-template-columns:1fr auto 1fr;align-items:center;min-height:84px;display:grid}.practice-context{text-align:center;flex-direction:column;gap:5px;display:flex}.practice-context b{font-size:14px}.practice-context span{color:var(--muted);font-size:11px}.progress-block{color:var(--muted);justify-self:end;align-items:center;gap:12px;font-size:12px;font-weight:700;display:flex}.progress-block i{background:#deded8;width:110px;height:4px;overflow:hidden}.progress-block i b{background:var(--coral);height:100%;transition:width .24s;display:block}.browser-warning{color:#8e352c;background:#fff0eb;border:1px solid #f2c4ba;justify-content:center;align-items:center;gap:12px;min-height:46px;margin-top:16px;font-size:12px;display:flex}.browser-warning span{color:#8a5c54}.practice-main{grid-template-columns:minmax(0,1fr) 250px;gap:24px;padding:24px 0;display:grid}.staff-stage{background:#fff;border:1px solid #17272521;min-height:420px;position:relative;overflow:hidden}.staff-stage:before{content:"";z-index:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 38%,#26766729,#0000 42%);position:absolute;inset:0}.staff-stage:after{content:"";pointer-events:none;border:3px solid #0000;transition:border .15s;position:absolute;inset:0}.staff-stage.wrong:after{border-color:#e959496b}.staff-stage.partial:after{border-color:#efc85c99}.staff-stage.correct:after{border-color:#2676675c}.staff-stage.correct:before{animation:.48s cubic-bezier(.2,.75,.25,1) both feedback-wash}.staff-stage.wrong:before{background:radial-gradient(circle at 50% 38%,#e9594926,#0000 42%);animation:.42s cubic-bezier(.2,.75,.25,1) both feedback-wash-wrong}.staff-stage.partial:before{background:radial-gradient(circle at 50% 38%,#efc85c24,#0000 42%);animation:.36s ease-out both feedback-wash-partial}.staff-titlebar{border-bottom:1px solid #ecece7;justify-content:space-between;align-items:center;min-height:60px;padding:0 24px;font-size:13px;font-weight:740;display:flex}.staff-titlebar small{color:var(--muted);font-weight:520}.staff-canvas{height:245px;margin:8px 30px 0;position:relative}.staff-systems,.staff-system{position:relative}.grand-staff{min-height:550px}.grand-staff .staff-systems{padding:4px 0 102px}.grand-staff .staff-canvas{height:188px;margin-top:0}.grand-staff .staff-system+.staff-system{border-top:1px dashed #1727251f;margin-top:-22px}.staff-line{background:#111918;left:60px;right:15px}.clef{z-index:2;font-family:Times New Roman,serif;font-size:76px;line-height:1;position:absolute;top:64px;left:59px}.key-symbol{z-index:2;font-family:Georgia,serif;font-size:25px;line-height:1;position:absolute}.time-signature{flex-direction:column;font-family:Georgia,serif;font-size:24px;line-height:.77;display:flex;position:absolute;top:72px;left:178px}.note-wrap{z-index:4;width:28px;height:20px;transition:left .2s;position:absolute;transform:translate(-50%,-50%)}.note-head{background:#172725;border-radius:50%;width:20px;height:13px;transition:background .15s,transform .15s;position:absolute;top:5px;left:3px;transform:rotate(-14deg)}.note-stem{background:#172725;width:2px;height:45px;position:absolute;bottom:8px;left:20px}.finger-number{font:700 11px var(--font-geist), sans-serif;color:#56615f;position:absolute;bottom:23px;left:8px}.note-wrap.current .note-head{background:var(--coral);transform:rotate(-14deg)scale(1.12)}.note-wrap.current .note-stem{background:var(--coral)}.staff-stage.correct .note-wrap.current .note-head{background:var(--green);animation:.46s cubic-bezier(.2,.75,.25,1) both note-success}.staff-stage.correct .note-wrap.current .note-stem{background:var(--green)}.staff-stage.wrong .note-wrap.current .note-head{animation:.42s cubic-bezier(.36,.07,.19,.97) both note-wrong}.staff-stage.partial .note-wrap.current .note-head{background:#d7a91d;animation:.38s ease-out both note-partial}.staff-stage.partial .note-wrap.current .note-stem{background:#d7a91d}.note-wrap.done{opacity:.28}.ledger{z-index:0;background:#172725;width:34px;height:2px;position:absolute;left:-4px}.reading-cursor{border-left:2px solid var(--coral);z-index:1;background:#e959491a;width:30px;transition:left .26s;position:absolute;top:46px;bottom:77px;transform:translate(-50%)}.staff-message{text-align:center;background:#f8f6f0;border-top:1px solid #e5e3dc;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:100px;padding:24px 28px;display:flex;position:absolute;bottom:0;left:0;right:0}.staff-message b{font-family:Georgia,Songti SC,serif;font-size:20px;font-weight:500;animation:.34s cubic-bezier(.2,.75,.25,1) both message-pop}.staff-message span{color:var(--muted);font-size:12px}.staff-stage.wrong .staff-message b{color:var(--coral-dark)}.staff-stage.partial .staff-message b{color:#99700b}.staff-stage.correct .staff-message b{color:var(--green)}.staff-stage.flash .note-head{width:28px;height:18px}.staff-stage.flash .note-stem{height:55px;left:28px}.staff-stage.flash .finger-number{font-size:14px;bottom:30px;left:12px}.symbol-stage{min-height:420px}.symbol-board{grid-template-columns:repeat(8,minmax(68px,1fr));align-items:stretch;gap:10px;min-height:258px;padding:36px 28px 118px;display:grid}.symbol-stage.flash .symbol-board{justify-content:center;display:flex}.symbol-card{opacity:.76;background:#faf8f2;border:1px solid #1727251f;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-width:0;min-height:126px;transition:transform .16s,border-color .16s,opacity .16s;display:flex}.symbol-card.current{border:2px solid var(--coral);opacity:1;background:#fff9f4;transform:translateY(-4px);box-shadow:0 9px 24px #e959491a}.symbol-card.done{opacity:.25}.symbol-stage.correct .symbol-card.current{border-color:var(--green);animation:.46s cubic-bezier(.2,.75,.25,1) both symbol-success;box-shadow:0 10px 28px #26766733}.symbol-stage.wrong .symbol-card.current{border-color:var(--coral-dark);animation:.42s cubic-bezier(.36,.07,.19,.97) both symbol-wrong}.symbol-stage.partial .symbol-card.current{border-color:#d7a91d;animation:.38s ease-out both symbol-partial}.symbol-stage.flash .symbol-card{width:min(280px,70%);min-height:156px}.symbol-note{justify-content:center;align-items:center;gap:7px;min-width:0;display:flex}.symbol-note>small{background:var(--mint);width:20px;height:20px;color:var(--green);border-radius:50%;place-items:center;font-size:9px;font-weight:800;display:grid}.symbol-note>strong{white-space:nowrap;max-width:100%;font:500 clamp(22px,3vw,42px)/1 Georgia,Songti SC,serif}.number-glyph{grid-template-rows:15px 40px 15px;place-items:center;width:50px;min-height:70px;display:grid}.number-glyph b{font:500 40px/1 Georgia,Songti SC,serif}.number-dots{min-height:13px;color:var(--coral-dark);letter-spacing:1px;font:800 16px/1 sans-serif}.practice-side{flex-direction:column;gap:16px;display:flex}.hand-guide,.live-card{background:#fff;border:1px solid #17272521;padding:20px}.hand-guide-heading{justify-content:space-between;align-items:start;display:flex}.hand-guide-heading>div{flex-direction:column;gap:4px;display:flex}.hand-guide-heading span,.live-card>span{color:var(--muted);font-size:11px}.hand-guide-heading strong{font-family:Georgia,serif;font-size:26px;font-weight:500}.hand-guide-heading small{color:var(--green);background:#eef5f1;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:700}.hand-map{height:135px;margin:10px 0 4px;position:relative}.palm{background:#ead2b7;border-radius:45% 48% 28% 28%;width:92px;height:77px;position:absolute;bottom:8px;left:50%;transform:translate(-50%);box-shadow:inset -10px 0 #ae76561a}.finger{transform-origin:bottom;background:#ead2b7;border-radius:16px 16px 8px 8px;width:25px;position:absolute;bottom:67px}.finger b{color:#6e5545;background:#ffffffb8;border-radius:50%;place-items:center;width:21px;height:21px;font-size:10px;display:grid;position:absolute;top:7px;left:50%;transform:translate(-50%)}.finger.active b{background:var(--coral);color:#fff;box-shadow:0 0 0 7px #e9594921}.finger-1{height:55px;bottom:27px;left:28px;transform:rotate(-48deg)}.finger-2{height:82px;left:63px;transform:rotate(-12deg)}.finger-3{height:92px;left:93px}.finger-4{height:84px;right:63px;transform:rotate(9deg)}.finger-5{height:64px;right:34px;transform:rotate(20deg)}.hand-guide.left .hand-map{transform:scaleX(-1)}.hand-guide.left .finger b{transform:translate(-50%)scaleX(-1)}.hand-guide p{color:var(--muted);margin:8px 0 0;font-size:10px;line-height:1.55}.dual-hand-guide{min-height:250px}.dual-hand-guide .hand-guide-heading strong{font-size:22px}.dual-finger-grid{grid-template-columns:1fr 1fr;gap:8px;margin:22px 0 16px;display:grid}.dual-finger-grid>div{border:1px solid var(--line);background:#f5f2ea;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:105px;display:flex}.dual-finger-grid span{color:var(--muted);font-size:10px}.dual-finger-grid strong{color:var(--coral-dark);font:500 37px/1 Georgia,serif}.dual-finger-grid strong small{margin-left:2px;font:700 10px sans-serif}.dual-finger-grid b{font:500 15px Georgia,serif}.live-card{flex-direction:column;flex:1;min-height:155px;display:flex}.live-card>strong{margin:5px 0 18px;font-family:Georgia,Songti SC,serif;font-size:22px;font-weight:500}.live-card>div{border-top:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 0;font-size:12px;display:flex}.live-card button{cursor:pointer;background:0 0;border:1px solid #1727252e;min-height:38px;margin-top:auto;font-size:12px;font-weight:700}.keyboard-dock{z-index:20;color:#fff;background:#202b29;position:sticky;bottom:0;box-shadow:0 -15px 40px #17272524}.keyboard-bar{justify-content:space-between;align-items:center;max-width:1380px;height:50px;margin:0 auto;padding:0 26px;display:flex}.keyboard-bar>div{align-items:baseline;gap:12px;display:flex}.keyboard-bar b{font-size:12px}.keyboard-bar span{color:#ffffff8c;font-size:10px}.keyboard-bar button{color:#fff;cursor:pointer;background:0 0;border:0;font-size:11px;font-weight:700}.keyboard-scroll{scrollbar-width:thin;background:#151e1d;padding-bottom:4px;overflow-x:auto}.piano-88{width:1664px;height:154px;margin:0 auto;position:relative}.white-keys{gap:1px;height:150px;display:flex}.white-keys button{cursor:pointer;background:#f6f2e8;border:0;border-radius:0 0 4px 4px;flex:0 0 31px;position:relative;box-shadow:inset 0 -5px #d9d3c7}.white-keys button span{color:#9a9c96;font-size:9px;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.white-keys button.correct{background:#8fd6bd;animation:.42s cubic-bezier(.2,.75,.25,1) both key-success}.white-keys button.wrong{background:#f29b8e;animation:.38s cubic-bezier(.36,.07,.19,.97) both key-wrong}.black-keys{pointer-events:none;position:absolute;inset:0}.black-keys button{pointer-events:auto;z-index:3;cursor:pointer;background:#19211f;border:0;border-radius:0 0 3px 3px;width:20px;height:92px;position:absolute;top:0;box-shadow:inset 0 -5px #060908}.black-keys button.correct{background:#318b73;animation:.42s cubic-bezier(.2,.75,.25,1) both black-key-success}.black-keys button.wrong{background:#d54a3b;animation:.38s cubic-bezier(.36,.07,.19,.97) both key-wrong}.keyboard-dock.collapsed .keyboard-bar{height:48px}.result-shell{padding-bottom:80px}.result-hero{text-align:center;border-bottom:1px solid #17272524;padding:74px 20px 48px}.result-kicker{color:var(--green);letter-spacing:.08em;align-items:center;gap:8px;font-size:12px;font-weight:800;display:inline-flex}.result-kicker span{background:var(--mint);border-radius:50%;place-items:center;width:24px;height:24px;display:grid}.result-hero h1{letter-spacing:-.045em;margin:18px 0 10px;font:500 clamp(40px,5vw,68px)/1 Georgia,Songti SC,serif}.result-hero p{color:var(--muted)}.result-metrics{background:var(--card);border:1px solid #17272524;grid-template-columns:1.25fr 1fr 1fr;margin:42px 0;display:grid}.result-metrics>div{border-right:1px solid var(--line);flex-direction:column;justify-content:center;min-height:180px;padding:28px 32px;display:flex}.result-metrics>div:last-child{border-right:0}.result-metrics span{color:var(--muted);font-size:12px}.result-metrics strong{margin:8px 0 3px;font:500 42px Georgia,serif}.result-metrics .lead-metric strong{color:var(--coral);font-size:64px}.result-metrics strong small{font-size:24px}.result-metrics p{color:var(--muted);margin:0;font-size:11px}.weak-notes{grid-template-columns:1fr 1.2fr;align-items:start;gap:70px;padding:42px 0;display:grid}.weak-notes h2{max-width:500px;margin:0 0 14px;font:500 32px/1.2 Georgia,Songti SC,serif}.weak-notes>div>p:last-child{max-width:460px;color:var(--muted);font-size:13px;line-height:1.7}.weak-notes ol{border-top:1px solid var(--ink);margin:0;padding:0;list-style:none}.weak-notes li{border-bottom:1px solid var(--line);grid-template-columns:32px 1fr auto;align-items:center;min-height:62px;display:grid}.weak-notes li>span{color:var(--coral-dark);font-size:11px}.weak-notes li b{font:500 20px Georgia,serif}.weak-notes li small{color:var(--muted)}.result-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;padding-top:20px;display:flex}@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes feedback-wash{0%{opacity:0;transform:scale(.92)}35%{opacity:1}to{opacity:0;transform:scale(1.08)}}@keyframes feedback-wash-wrong{0%{opacity:0;transform:translate(0)}18%{opacity:1}35%{transform:translate(-5px)}52%{transform:translate(4px)}70%{transform:translate(-2px)}to{opacity:0;transform:translate(0)}}@keyframes feedback-wash-partial{0%{opacity:0;transform:scale(.96)}45%{opacity:1}to{opacity:0;transform:scale(1.04)}}@keyframes note-success{0%{transform:rotate(-14deg)scale(1.12)}45%{transform:rotate(-14deg)scale(1.34)}to{transform:rotate(-14deg)scale(1.12)}}@keyframes note-wrong{0%,to{transform:rotate(-14deg)translate(0)scale(1.12)}20%{transform:rotate(-20deg)translate(-4px)scale(1.15)}40%{transform:rotate(-8deg)translate(4px)scale(1.15)}60%{transform:rotate(-17deg)translate(-2px)scale(1.13)}}@keyframes note-partial{0%{transform:rotate(-14deg)scale(1.12)}55%{transform:rotate(-14deg)scale(1.25)}to{transform:rotate(-14deg)scale(1.12)}}@keyframes message-pop{0%{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes symbol-success{0%{transform:translateY(-4px)scale(1)}45%{transform:translateY(-4px)scale(1.055)}to{transform:translateY(-4px)scale(1)}}@keyframes symbol-wrong{0%,to{transform:translateY(-4px)translate(0)}22%{transform:translateY(-4px)translate(-5px)}44%{transform:translateY(-4px)translate(5px)}66%{transform:translateY(-4px)translate(-2px)}}@keyframes symbol-partial{0%{transform:translateY(-4px)scale(1)}50%{transform:translateY(-4px)scale(1.035)}to{transform:translateY(-4px)scale(1)}}@keyframes key-success{0%{transform:translateY(0);box-shadow:inset 0 -5px #d9d3c7,0 0 #8fd6bd00}45%{transform:translateY(3px);box-shadow:inset 0 -3px #d9d3c7,0 0 22px #8fd6bdcc}to{transform:translateY(0);box-shadow:inset 0 -5px #d9d3c7,0 0 #8fd6bd00}}@keyframes black-key-success{0%{transform:translateY(0);box-shadow:inset 0 -5px #060908,0 0 #8fd6bd00}45%{transform:translateY(3px);box-shadow:inset 0 -3px #060908,0 0 22px #8fd6bdcc}to{transform:translateY(0);box-shadow:inset 0 -5px #060908,0 0 #8fd6bd00}}@keyframes key-wrong{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}}@media (max-width:1040px){.hero-grid{grid-template-columns:1fr;padding-top:48px}.hero-copy{text-align:center}.hero-copy h1,.hero-description{margin-left:auto;margin-right:auto}.hero-actions,.trust-row{justify-content:center}.hero-demo{width:100%;max-width:760px;margin:0 auto}.today-panel{grid-template-columns:1fr 1fr 1fr}.today-intro{border-bottom:1px solid var(--line);grid-column:1/-1}.metric:first-of-type{border-left:0}.setup-layout{grid-template-columns:1fr}.setup-summary{position:static}.practice-main{grid-template-columns:1fr}.practice-side{grid-template-columns:1fr 1fr;display:grid}.staff-stage{min-height:410px}}@media (max-width:720px){.home-shell,.setup-shell,.result-shell{padding-inline:18px}.site-header{height:72px}.brand{font-size:20px}.header-actions{gap:10px}.midi-pill{white-space:nowrap;text-overflow:ellipsis;max-width:170px;overflow:hidden}.midi-dialog-backdrop{place-items:end center;padding:12px}.midi-dialog{width:100%;max-height:calc(100vh - 24px);padding:28px 20px 22px;box-shadow:0 20px 70px #040c0b4d}.dialog-state h2,.device-picker h2{font-size:24px}.device-picker-heading{display:block}.permission-ok{margin-top:12px;display:inline-block}.dialog-actions{grid-template-columns:1fr 1fr;display:grid}.hero-grid{gap:50px;padding:42px 0 55px}.hero-copy h1{font-size:clamp(42px,13vw,62px)}.hero-description{font-size:15px}.hero-demo{min-height:395px;box-shadow:8px 8px 0 var(--mint);padding-inline:16px}.demo-topline{align-items:flex-start}.wait-badge{padding:6px 9px}.mini-clef{left:-1%}.demo-lower{grid-template-columns:1fr;margin-inline:-16px}.answer-demo{display:none}.today-panel{grid-template-columns:1fr}.metric{border-left:0;border-bottom:1px solid var(--line);padding-left:0}.setup-heading{padding-top:36px;display:block}.setup-heading>p{margin-top:18px}.setting-block{grid-template-columns:1fr;gap:20px;padding:24px 18px}.field-grid{grid-template-columns:1fr}.practice-shell>.site-header,.practice-toolbar,.practice-main,.browser-warning{margin-left:14px;margin-right:14px}.practice-toolbar{grid-template-columns:1fr auto;gap:10px;padding:13px 0}.practice-context{display:none}.progress-block i{width:70px}.browser-warning{flex-direction:column;align-items:flex-start;padding:12px}.practice-main{padding-top:14px}.staff-stage{min-height:400px}.grand-staff{min-height:540px}.staff-canvas{margin-inline:4px;overflow:hidden}.grand-staff .staff-canvas{height:186px}.staff-line{left:28px;right:5px}.clef{left:26px}.key-symbol{display:none}.time-signature{left:100px}.reading-cursor{width:22px}.symbol-board{grid-template-columns:repeat(4,minmax(60px,1fr));gap:7px;padding:24px 12px 118px}.symbol-card:nth-child(n+5){display:none}.symbol-note>strong{font-size:24px}.symbol-stage.flash .symbol-card{width:82%}.practice-side{grid-template-columns:1fr}.hand-guide{display:none}.live-card{min-height:145px}.keyboard-bar>div span{display:none}.result-hero{padding-top:55px}.result-metrics{grid-template-columns:1fr}.result-metrics>div{border-right:0;border-bottom:1px solid var(--line);min-height:140px}.weak-notes{grid-template-columns:1fr;gap:30px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (max-width:420px){.site-header{gap:4px}.brand{gap:6px;font-size:18px}.brand-mark{width:30px;height:30px;font-size:18px}.midi-pill{gap:6px;max-width:112px;padding-inline:8px;font-size:10px}}