@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap";@import "https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900;1000&display=swap";.mascot-wrap[data-v-a51cfdc4]{width:220px;max-width:100%;margin:auto}.note-mascot[data-v-a51cfdc4]{filter:drop-shadow(0 6px #7650cc10);width:100%;display:block}.happy[data-v-a51cfdc4]{animation:.7s ease-out celebrate-a51cfdc4}@keyframes celebrate-a51cfdc4{0%,to{transform:rotate(0)}30%{transform:rotate(-9deg)translateY(-12px)}65%{transform:rotate(8deg)translateY(-5px)}}@media (prefers-reduced-motion:reduce){.happy[data-v-a51cfdc4]{animation:none}}.keyboard-shell[data-v-be287799]{text-align:left;background:#34465c;border:3px solid #26384d;border-bottom-width:8px;border-radius:20px;padding:14px 12px 10px}.keyboard-label[data-v-be287799]{color:#d5e1ef;letter-spacing:.6px;justify-content:space-between;gap:12px;margin:0 2px 12px;font-size:10px;font-weight:900;display:flex}.keyboard-viewport[data-v-be287799]{scrollbar-color:#a8b8cb #26384d;border-radius:9px;padding-bottom:9px;overflow-x:auto}.piano-board[data-v-be287799]{height:190px;position:relative}.white-keys[data-v-be287799]{height:100%;display:flex}.piano-key[data-v-be287799]{touch-action:manipulation;padding:0}.white-key[data-v-be287799]{color:#50617a;background:#fff;border:1px solid #b5c2d0;border-bottom:7px solid #c7d2df;border-radius:0 0 9px 9px;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:3px;min-width:0;padding-bottom:12px;display:flex}.white-key-name[data-v-be287799]{font-size:13px;font-weight:900}.white-key small[data-v-be287799]{color:#8190a7;font-size:10px}.black-key[data-v-be287799]{z-index:2;color:#e8eef7;background:#2f4058;border:2px solid #182638;border-bottom:7px solid #142033;border-radius:0 0 7px 7px;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;height:112px;padding-bottom:8px;font-size:8px;font-weight:800;display:flex;position:absolute;top:0;transform:translate(-50%)}.piano-key[data-v-be287799]:hover:not(:disabled){background:#dff5bd}.piano-key[data-v-be287799]:active:not(:disabled){border-bottom-width:2px}.piano-key[data-v-be287799]:disabled{opacity:1}.piano-key.is-correct[data-v-be287799]{color:#305d12;background:#b5ee68;border-color:#73af32}.piano-key.is-wrong[data-v-be287799]{color:#902626;background:#ffb7b7;border-color:#e77e7e}.keyboard-help[data-v-be287799]{color:#c7d3e2;margin:9px 2px 0;font-size:10px;line-height:1.6}@media (width<=650px){.keyboard-label[data-v-be287799]{font-size:8px}.piano-board[data-v-be287799]{height:170px}.black-key[data-v-be287799]{height:100px}}:root{color:#19372f;font-synthesis:none;--green:#1d493d;--muted:#738078;background:#f4f3ed;font-family:Manrope,Arial,sans-serif;font-weight:500}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline-offset:4px;outline:3px solid #c79b42}button:disabled{cursor:default;opacity:.5}button{color:inherit}a{color:inherit;text-decoration:none}.shell{max-width:1240px;padding:0 46px;padding-top:max(0px, var(--tg-content-safe-area-inset-top,0px));padding-bottom:max(0px, var(--tg-content-safe-area-inset-bottom,0px));margin:auto}header{border-bottom:1px solid #daddd2;justify-content:space-between;align-items:center;height:106px;display:flex}.brand{letter-spacing:-2px;align-items:center;gap:9px;font-size:34px;font-weight:800;display:flex}.brand-icon{border:1px solid #b2beb0;border-radius:50%;place-items:center;width:45px;height:45px;font-family:serif;font-size:38px;font-weight:400;display:grid}.brand-dot{color:#b88c40;margin-left:-9px}.header-tag,.eyebrow{letter-spacing:1.8px;font-size:10px;font-weight:800}.header-tag{color:#859083}.icon-button{background:0 0;border:1px solid #c6cfc3;border-radius:50%;width:40px;height:40px;font-size:22px}.home{grid-template-columns:1.05fr 1fr;align-items:center;gap:76px;padding:65px 0 72px;display:grid}h1{letter-spacing:-1.8px;margin:26px 0;font-family:Playfair Display,Georgia,serif;font-size:57px;font-weight:500;line-height:1.16}em{color:#708565;font-weight:500}p{font-size:14px;line-height:1.8}.intro>p{color:#748074;max-width:400px}.eyebrow{color:#7a8b71}.mini-stats{gap:40px;margin:36px 0;display:flex}.mini-stats>div{flex-direction:column;gap:7px;display:flex}.mini-stats strong{letter-spacing:-1px;font-size:31px;font-weight:600}.mini-stats small{font-size:19px}.tip{border-top:1px solid #daddd2;gap:18px;max-width:380px;margin-top:36px;padding-top:25px;display:flex}.tip>span{color:#98a58a;font-size:32px}.tip b{font-size:12px}.tip p{color:#7a8477;margin:6px 0;font-size:12px}.card{background:#fffef9;border:1px solid #e0e3d8;border-radius:22px;box-shadow:0 12px 35px #233c2410}.card-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.pill{color:#718563;background:#edf1e7;border-radius:20px;padding:6px 9px;font-size:10px}h2{letter-spacing:-.7px;margin:18px 0 25px;font-size:22px;font-weight:700}.setup>label{color:#99a18f;margin:23px 0 10px;font-size:11px;display:block}.setup label b{color:#475849;margin-left:10px;font-size:12px;font-weight:600}.clefs{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}.clefs button{background:0 0;border:1px solid #dfe3d6;border-radius:11px;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;font-size:11px;display:flex}.clefs button>span{height:48px;font-family:serif;font-size:38px;line-height:1.3}.clefs .selected{background:#eef2e8;border-color:#83987b;box-shadow:inset 0 0 0 1px #83987b}.setup select{color:#40523f;background:#fffef9;border:1px solid #dfe3d6;border-radius:9px;width:100%;padding:12px;font-size:12px}.segmented{background:#f0f1e9;border-radius:10px;gap:4px;padding:4px;display:flex}.segmented button{color:#7c8678;background:0 0;border:0;border-radius:7px;flex:1;padding:10px 3px;font-size:12px}.segmented button.active{color:#294c3c;background:#fffef9;box-shadow:0 2px 5px #253d2410}.length{color:#788373;justify-content:space-between;align-items:center;margin:20px 0;font-size:11px;display:flex}.length select{width:auto;padding:7px 12px}.primary{background:var(--green);color:#fffef9;border:0;border-radius:10px;justify-content:space-between;align-items:center;gap:18px;width:100%;padding:16px 20px;font-size:13px;font-weight:600;display:flex}.text-button{background:0 0;border:0;padding:12px;font-size:12px}.setup>.text-button{margin:6px auto 0;display:block}.footnote{color:#919788;text-align:center;margin:7px 0 0;font-size:10px}footer{color:#919b8c;letter-spacing:1px;border-top:1px solid #daddd2;justify-content:space-between;padding:25px 0;font-size:9px;display:flex}.training{max-width:750px;margin:36px auto 64px}.training-top{justify-content:space-between;align-items:center;gap:12px;font-size:12px;display:flex}.progress{background:#e0e5d9;border-radius:4px;height:4px;margin:14px 0 26px}.progress>div{background:#768b62;height:100%;transition:width .3s}.exercise{text-align:center;padding:32px}.exercise h2{margin-bottom:7px}.muted{color:#808b7a;font-size:12px}.staff{max-width:370px;margin:auto}.staff svg{width:100%;height:auto;display:block}.answers{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.answers button{background:#f5f7ee;border:1px solid #cdd8c5;border-radius:9px;padding:14px 5px;font-size:14px}.answers.advanced{grid-template-columns:repeat(7,1fr)}.feedback{text-align:left;background:#eef3e5;border-radius:12px;margin-top:24px;padding:18px;font-size:14px}.feedback.incorrect{background:#faf0e4}.feedback p{font-size:12px}.feedback-actions{justify-content:space-between;align-items:center;gap:15px;display:flex}.feedback .primary{width:auto;padding:12px;font-size:12px}.piano-scroll{padding:5px 4px 18px;overflow-x:auto}.piano{isolation:isolate;min-width:max-content;padding:0 5px;display:flex}.piano button{background:#fff;border:1px solid #9da69d;border-radius:0 0 5px 5px;flex-shrink:0;width:42px;height:150px;padding:0;position:relative;box-shadow:0 4px #d6dbcf}.piano button.black{z-index:2;color:#fff;background:#24352f;width:26px;height:95px;margin-left:-13px;margin-right:-13px;box-shadow:0 3px #14211b}.piano button span{font-size:9px;position:absolute;bottom:10px;left:0;right:0}.piano button.black span{font-size:7px}.piano button:hover:not(:disabled){background:#b7cda5}.piano button:disabled{opacity:1}.result,.stats{max-width:700px;margin:50px auto;padding:36px}.result{text-align:center}.result-number{color:#6d865a;font-size:80px}.result-number small{font-size:30px}.result>.text-button{margin-top:10px}.history{max-height:400px;overflow:auto}.history>div{border-bottom:1px solid #e1e5d9;justify-content:space-between;padding:16px 0;font-size:12px;display:flex}.warning{background:#fae4c7;border-radius:8px;padding:12px;font-size:12px}@media (width<=900px){.shell{padding-left:24px;padding-right:24px}.home{gap:32px}h1{font-size:44px}.header-tag{display:none}.setup{padding:24px}.mini-stats{gap:28px}}@media (width<=650px){header{height:78px}.home{grid-template-columns:1fr;gap:25px;padding:32px 0}.intro h1{margin:16px 0;font-size:43px}.intro>p{margin:0;font-size:13px}.mini-stats{justify-content:space-between;margin:22px 0 0}.tip{display:none}.setup{padding:22px}.shell{padding-left:18px;padding-right:18px}footer{gap:20px;font-size:8px;line-height:1.8}.exercise{padding:22px 12px}.exercise h2{font-size:20px}.training-top>span{display:none}.answers{gap:4px}.answers button{padding:14px 2px;font-size:12px}.answers.advanced{grid-template-columns:repeat(3,1fr)}.feedback-actions{flex-wrap:wrap}.result,.stats{margin:28px auto;padding:24px}.result h1,.stats h1{font-size:35px}.history>div{font-size:10px}.brand{font-size:29px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}:root{color:#3c4c60;--green:#79bd24;--muted:#82909f;background:#fbfcf7;font-family:Nunito,Arial Rounded MT Bold,Arial,sans-serif;font-weight:700}body{background-image:radial-gradient(#b7d98b40 1.5px,#0000 1.5px);background-size:26px 26px}.shell{max-width:1160px}header{border-bottom:2px solid #e3eacb;height:95px}.brand{color:#77b728;letter-spacing:-1.8px;font-size:38px;font-weight:1000}.brand-icon{color:#fff;background:#9a78e7;border:0;border-bottom:4px solid #7854c4;border-radius:15px;font-size:35px;transform:rotate(-8deg)}.brand-dot{color:#a685eb}.header-tag{color:#a1ad91;font-size:10px}.icon-button{color:#8b68cd;background:#fff;border:2px solid #dce5cf;border-bottom-width:5px;border-radius:13px}.home{gap:70px;padding:40px 0 48px}h1{letter-spacing:-2.2px;color:#425263;margin:17px 0;font-family:Nunito,Arial,sans-serif;font-size:59px;font-weight:1000;line-height:1.04}em{color:#84c62c;font-style:normal;font-weight:1000}.eyebrow{color:#9a7bd4;font-size:10px;font-weight:1000}.intro>p{color:#84909c;max-width:420px;font-size:14px;font-weight:700}.mascot-intro{align-items:center;margin:10px 0 2px;display:flex;position:relative}.mascot-intro .mascot-wrap{width:185px;margin:0}.speech-bubble{color:#7d6b9e;background:#fff;border:2px solid #e0e7d2;border-bottom-width:5px;border-radius:18px;padding:15px;font-size:13px;line-height:1.6;transform:rotate(3deg)}.mini-stats{gap:18px;margin:22px 0}.mini-stats>div{background:#fff;border:2px solid #e5eadb;border-bottom-width:5px;border-radius:16px;flex:1;gap:3px;padding:12px 18px}.mini-stats strong{color:#9b76dc;letter-spacing:-1px;font-size:28px;font-weight:1000}.mini-stats>div:nth-child(2) strong{color:#f3ad2b}.mini-stats>div:nth-child(3) strong{color:#6fb8dd}.mini-stats span{color:#919d9f;font-size:10px}.tip{display:none}.card{box-shadow:none;background:#fff;border:2px solid #e1e8d6;border-bottom-width:7px;border-radius:26px}.setup{padding:28px}.pill{color:#85ad4c;background:#eef7df;font-weight:900}h2{letter-spacing:-.6px;color:#4c5c6e;font-size:25px;font-weight:1000}.setup>label{color:#b2c1a1;font-size:12px;font-weight:1000}.setup label b{color:#708174;font-size:13px;font-weight:900}.clefs{gap:10px}.clefs button{color:#84927e;background:#fff;border:2px solid #e3e8da;border-bottom-width:5px;border-radius:16px;padding:9px 3px;font-size:11px;font-weight:900}.clefs button>span{color:#9c7bd5}.clefs .selected{box-shadow:none;color:#6e9c37;background:#f1f9e6;border-color:#9ccc64}.clefs .selected>span{color:#7eae42}.setup select{color:#7d8b77;background:#f9fbf5;border:2px solid #e2e9d7;border-bottom-width:4px;border-radius:12px;font-weight:800}.segmented{background:#f0f4e9;border-radius:13px;gap:5px;padding:5px}.segmented button{border-radius:10px;font-size:11px;font-weight:900}.segmented button.active{color:#7b5db4;box-shadow:none;background:#fff;border-bottom:3px solid #dce5cb}.length{font-weight:800}.primary{color:#fff;text-shadow:0 1px #518e2530;background:#86c82c;border:0;border-bottom:5px solid #63a21b;border-radius:14px;padding:15px 20px;font-size:15px;font-weight:1000;transition:transform .12s,border-width .12s}.primary:hover{background:#91d733}.primary:active{border-bottom-width:2px;transform:translateY(3px)}.text-button{color:#8e75ba;font-weight:900}.text-button:disabled{color:#acb5a3}.footnote{color:#9ba995;font-size:10px;font-weight:700}footer{color:#a4b190;border-top:2px solid #e3eacb;font-weight:900}.training{max-width:800px}.training-top{color:#94a484;font-weight:900}.training-top b{color:#e1a526;background:#fff0c6;border-radius:12px;padding:8px 14px}.progress{background:#e4eadb;border:3px solid #e4eadb;border-radius:14px;height:17px}.progress>div{background:linear-gradient(#a3df4e 0 35%,#88cb32 35%);border-radius:10px}.exercise{padding:28px}.exercise .eyebrow{color:#9c7acd;background:#f1eafd;border-radius:11px;padding:8px 13px;display:inline-block}.exercise h2{font-size:25px}.staff{background:#fff;max-width:330px}.muted{color:#95a28d}.feedback{color:#74a33f;background:#f2fae7;border:2px solid #d0e6b6;border-bottom-width:5px;border-radius:16px}.feedback.incorrect{color:#b58a4c;background:#fff4e4;border-color:#f3dfb9}.feedback b{font-weight:1000}.feedback .primary{font-size:13px}.answers button{color:#7c9565;background:#fafcf7;border:2px solid #e2e7d9;border-bottom:5px solid #dce3cf;border-radius:12px;font-weight:1000}.answers button:hover:not(:disabled){background:#edf8de}.result-number{color:#86c82c;font-weight:1000}.result h1{font-size:38px}.result .mascot-wrap{width:150px}.stats h1{font-size:40px}.history>div{border-bottom:2px solid #edf1e6}.warning{font-weight:800}.danger{color:#df7979}@media (width<=900px){h1{font-size:48px}.home{gap:32px}.mini-stats>div{padding:10px}.speech-bubble{padding:10px;font-size:11px}.mascot-intro .mascot-wrap{width:150px}.setup{padding:22px}}@media (width<=650px){header{height:77px}.brand{font-size:32px}.home{gap:22px;padding:27px 0}.intro{position:relative}.intro h1{width:65%;margin:13px 0;font-size:43px}.intro>.eyebrow{letter-spacing:1px;font-size:8px}.intro>p{max-width:66%;min-height:65px;font-size:12px}.mascot-intro{width:35%;display:block;position:absolute;top:25px;right:-5px}.mascot-intro .mascot-wrap{width:100%}.speech-bubble{display:none}.mini-stats{gap:8px;margin:16px 0 0}.mini-stats>div{border-radius:13px;padding:8px 10px}.mini-stats strong{font-size:24px}.mini-stats span{font-size:9px}.setup{padding:20px}.exercise{padding:23px 12px}.exercise h2{font-size:22px}.exercise .muted{font-size:11px}.result h1{font-size:32px}.card{border-radius:21px}.training{margin-top:22px}.feedback{padding:13px}}