@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@600;700;800&display=swap";:root{color:#f4f7f8;font-synthesis:none;background:#0d1b22;font-family:Nunito,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 50% -15%,#244755 0%,#10252e 34%,#0c1920 74%);min-width:320px;min-height:100vh;margin:0}button{font:inherit}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #ffdc82}main{width:min(1120px,100% - 32px);margin:auto;padding:24px 0 18px}header,.brand,.header-actions,.stat,.game-head,.actions,.keyboard-head,.sheet-head{align-items:center;display:flex}header{justify-content:space-between;margin-bottom:22px}.brand{gap:12px}.brand>span{color:#13232b;background:linear-gradient(145deg,#9fe67e,#5fcaa0);border-radius:15px;place-items:center;width:46px;height:46px;font-size:25px;display:grid;box-shadow:0 8px 24px #4ed99a26}.brand strong{font-family:Fredoka,sans-serif;font-size:21px;display:block}.brand small,.stat small{color:#8ea5af;letter-spacing:.7px;text-transform:uppercase;font-size:11px;display:block}.header-actions{gap:10px}.stat{background:#142a34;border:1px solid #29414b;border-radius:14px;gap:8px;min-width:78px;padding:8px 12px}.stat>span{color:#ffcf63;font-size:19px}.stat strong{line-height:1}.settings-button,.close{cursor:pointer;color:#9bb1ba;background:#192f38;border:0;place-items:center;display:grid}.settings-button{border-radius:14px;width:46px;height:46px;font-size:20px}.game-card{background:linear-gradient(150deg,#152b34f2,#10232cf5);border:1px solid #28414b;border-radius:28px;padding:32px;box-shadow:0 28px 80px #0006,inset 0 1px #ffffff0a}.game-head{justify-content:space-between;gap:20px}.eyebrow{color:#73d3a1;text-transform:uppercase;letter-spacing:1.4px;margin:0 0 4px;font-size:11px;font-weight:800}h1,h2{margin:0;font-family:Fredoka,sans-serif}h1{font-size:clamp(26px,4vw,38px)}h2{font-size:22px}.listen,.secondary,.primary{cursor:pointer;border:0;border-radius:14px;font-weight:800;transition:transform .15s,opacity .15s}.listen:hover,.secondary:hover,.primary:hover{transform:translateY(-2px)}.listen:disabled,.secondary:disabled,.primary:disabled{cursor:not-allowed;opacity:.45;transform:none}.listen{color:#10252e;background:#82daa6;align-items:center;gap:9px;padding:13px 18px;display:flex}.listen svg,.secondary svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:21px}.staff{background:#0e2028;border:1px solid #2d4b56;border-radius:22px;height:220px;margin:26px 0 14px;position:relative;overflow:hidden}.staff-lines{height:110px;position:absolute;inset:55px 3% auto}.staff-lines i{background:#36505a;border-radius:2px;height:2px;position:absolute;left:0;right:0}.staff-lines i:nth-child(2){top:25%}.staff-lines i:nth-child(3){top:50%}.staff-lines i:nth-child(4){top:75%}.staff-lines i:nth-child(5){top:100%}.notes-row{grid-template-columns:repeat(4,1fr);align-items:center;gap:15px;display:grid;position:absolute;inset:0 4%}.note-slot{height:160px;position:relative}.note{left:50%;top:var(--pos);border:2px solid color-mix(in srgb,var(--note),white 16%);color:#102027;background:var(--note);width:min(105px,90%);height:45px;box-shadow:0 8px 20px color-mix(in srgb,var(--note),transparent 76%);border-radius:13px;place-items:center;display:grid;position:absolute;transform:translate(-50%)}.note:after{content:"";background:#fff6;border-radius:5px;width:34%;height:4px;position:absolute;top:8px;right:9px}.note b{font-family:Fredoka;font-size:20px}.mystery{color:#6f93a1;background:#18333f;border:2px dashed #4a6b78;border-radius:18px;place-items:center;transition:all .2s;display:grid;position:absolute;inset:10px 8%}.mystery.active{color:#ffe297;background:#29404a;border-color:#ffe297;box-shadow:0 0 0 5px #ffe29712}.mystery b{font-family:Fredoka;font-size:46px}.mystery small{letter-spacing:.7px;text-transform:uppercase;font-size:10px;font-weight:800;position:absolute;bottom:14px}.feedback{color:#a9bec6;justify-content:center;align-items:center;gap:10px;min-height:46px;margin:0 auto 24px;font-weight:800;display:flex}.feedback>span{background:#29434d;border-radius:50%;place-items:center;width:29px;height:29px;display:grid}.feedback.correct{color:#9be8b6}.feedback.correct>span{color:#10261d;background:#79d99d}.feedback.wrong{color:#ffd18c}.feedback.wrong>span{color:#30220e;background:#ffc66e}.keyboard-head{justify-content:space-between;margin-bottom:12px}.keyboard-head>small{color:#9eb3bb;background:#1d3640;border-radius:20px;padding:7px 11px}.piano{background:#09151b;border-radius:18px;grid-template-columns:repeat(5,1fr);gap:7px;height:190px;padding:8px 8px 11px;display:grid;box-shadow:inset 0 3px 10px #0009}.key{border:1px solid #acc1c7;border-bottom:8px solid color-mix(in srgb,var(--key),#20343c 46%);cursor:pointer;color:#19303a;touch-action:manipulation;background:linear-gradient(#fbffff,#cfdbdd);border-radius:10px 10px 14px 14px;transition:transform 80ms,background 80ms,box-shadow 80ms;position:relative;box-shadow:0 5px #728890}.key span{color:#18303a;background:var(--key);border-radius:50%;place-items:center;width:38px;height:38px;font-family:Fredoka;font-size:18px;font-weight:700;display:grid;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.key:hover{background:#fff}.key.pressed{background:var(--key);box-shadow:0 1px 0 #52676d,0 0 22px color-mix(in srgb,var(--key),transparent 45%);transform:translateY(5px)}.key:disabled{cursor:default;opacity:.7}.actions{justify-content:flex-end;gap:10px;margin-top:24px}.secondary,.primary{min-height:48px;padding:0 19px}.secondary{color:#dbe8ec;background:#233d47;align-items:center;gap:8px;display:flex}.primary{color:#10241b;background:linear-gradient(135deg,#8ae0aa,#61cd9d);box-shadow:0 8px 24px #66d39d20}.primary span{margin-left:9px}.full{width:100%;margin-top:18px}footer{color:#66818c;justify-content:center;gap:9px;margin-top:16px;font-size:12px;display:flex}footer button{cursor:pointer;color:#7f9ba6;background:0 0;border:0;padding:0;text-decoration:underline}.backdrop{z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#061015c9;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.settings{background:#142a33;border:1px solid #35525d;border-radius:26px;width:min(580px,100%);padding:28px;box-shadow:0 30px 90px #0009}.sheet-head{justify-content:space-between;margin-bottom:20px}.close{border-radius:50%;width:42px;height:42px;font-size:28px}.level-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.level-grid button{cursor:pointer;text-align:left;color:#eff6f7;background:#19313b;border:2px solid #2d4650;border-radius:15px;padding:15px}.level-grid button.selected{background:#203f3e;border-color:#7edaa3}.level-grid strong,.level-grid span{display:block}.level-grid span{color:#92aab3;margin-top:3px;font-size:12px}.toggle{cursor:pointer;background:#19313b;border-radius:15px;justify-content:space-between;align-items:center;margin-top:18px;padding:15px;display:flex}.toggle strong,.toggle small{display:block}.toggle small{color:#8fa6ae}.toggle input{opacity:0;position:absolute}.toggle i{background:#40565e;border-radius:20px;width:48px;height:28px;position:relative}.toggle i:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:all .2s;position:absolute;top:4px;left:4px}.toggle input:checked+i{background:#68d09b}.toggle input:checked+i:after{transform:translate(20px)}@keyframes pop{0%{opacity:0;transform:translate(-50%)scale(.7)}70%{transform:translate(-50%)scale(1.08)}}@media (width<=650px){main{width:min(100% - 20px,540px);padding-top:12px}.brand small{display:none}.brand>span{width:40px;height:40px}.brand strong{font-size:17px}.stat{min-width:54px;padding:7px 9px}.stat small{display:none}.stat>span{font-size:15px}.streak{display:none}.settings-button{width:40px;height:40px}.game-card{border-radius:22px;padding:20px 13px}.game-head{align-items:flex-end}.game-head h1{max-width:210px}.listen{justify-content:center;width:47px;height:47px;padding:0;font-size:0}.listen svg{width:23px}.staff{height:190px;margin-top:20px}.staff-lines{top:45px}.notes-row{gap:5px;inset-inline:2%}.note-slot{height:150px}.note{width:90%;height:40px}.mystery{inset-inline:3%}.mystery small{display:none}.piano{gap:4px;height:172px;padding:6px 5px 10px}.key{border-bottom-width:7px}.key span{width:34px;height:34px;bottom:13px}.actions{grid-template-columns:1fr 1fr;display:grid}.actions button{justify-content:center;padding-inline:8px}footer span{display:none}.level-grid{grid-template-columns:1fr}.settings{max-height:92vh;padding:22px;overflow:auto}}@media (width<=390px){.brand strong{font-size:15px}.stat{display:none}.game-head h1{font-size:25px}.keyboard-head h2{font-size:19px}.keyboard-head small{font-size:10px}.staff{height:178px}.notes-row{gap:3px}.mystery b{font-size:38px}.piano{height:155px}.key span{width:30px;height:30px;font-size:16px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.staff{--staff-top:55px;--staff-half-step:13.75px;--staff-height:110px;--neutral-hidden-y:110px}.notes-row{grid-template-columns:repeat(var(--note-count),minmax(0,1fr));align-items:stretch;inset:0 4%}.note-slot{height:100%}.pitch-card{top:var(--pitch-y);width:min(105px,90%);height:40px;left:50%;transform:translate(-50%,-50%)}.mystery.pitch-card{display:grid;bottom:auto;right:auto}.mystery.pitch-card b{font-size:27px}.mystery.pitch-card small{display:none}.mystery.pitch-card.neutral-hidden{width:min(112px,92%);height:calc(var(--staff-height) + 32px);background:#18333f;border-style:dashed;border-width:2px;box-shadow:0 10px 22px #0005}.mystery.pitch-card.neutral-hidden.active{background:#29404a;box-shadow:0 0 0 5px #ffe29712,0 10px 22px #0005}.pitch-card.current{z-index:4;outline-offset:4px;outline:3px solid #ffe297;box-shadow:0 0 0 8px #ffe29712,0 10px 24px #0006}.pitch-card.completed{filter:grayscale()saturate(.1);opacity:.48;box-shadow:none}.playback-marker{z-index:6;color:#ffe297;text-shadow:0 2px 10px #000;font-size:18px;line-height:1;animation:.75s ease-in-out infinite marker-bounce;position:absolute;top:-30px;left:50%;transform:translate(-50%)}@keyframes marker-bounce{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,5px)}}.pitch-card.ledger{isolation:isolate}.pitch-card.ledger:before{content:"";z-index:-1;background:#52707b;border-radius:3px;height:2px;position:absolute;top:50%;left:-13px;right:-13px}.note.revealed{animation:.35s both contour-pop}.feedback.listen{color:#a9bec6;cursor:default;width:auto;height:auto;font-size:inherit;background:0 0;border-radius:0;justify-content:center;padding:0}@keyframes contour-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.7)}70%{transform:translate(-50%,-50%)scale(1.08)}to{transform:translate(-50%,-50%)scale(1)}}.piano{background:#09151b;border:2px solid #071117;border-radius:16px;height:200px;padding:8px 8px 12px;display:block;position:relative;overflow:hidden}.white-keys{width:100%;height:100%;display:flex}.white-key{border:1px solid #879da5;border-right-width:0;border-bottom:8px solid color-mix(in srgb,var(--key),#20343c 55%);border-radius:0 0 9px 9px;flex:12.5%;min-width:0;box-shadow:inset 0 -9px 15px #71858b22,0 5px #52676e}.white-key:first-child{border-radius:7px 0 9px 9px}.white-key:last-child{border-right-width:1px;border-radius:0 7px 9px 9px}.white-key span{border-radius:10px;width:auto;min-width:34px;height:32px;padding:0 7px;font-size:15px;bottom:13px}.black-keys{pointer-events:auto;position:absolute;inset:8px 8px 12px}.black-key{z-index:3;top:0;left:calc(var(--after) * (100% / var(--white-count)) - (56% / var(--white-count)) / 2);width:calc(56% / var(--white-count));cursor:pointer;color:#fff;opacity:1;background:linear-gradient(90deg,#172a32,#071116 55%,#233943);border:1px solid #324750;border-bottom:8px solid #050b0e;border-radius:0 0 7px 7px;height:59%;position:absolute;box-shadow:0 7px 8px #0009,inset 0 -7px #0d171c}.black-key.future{cursor:default;filter:saturate(.2);opacity:.55}.black-key.scale-key{border-color:var(--key-border);background:linear-gradient(110deg,var(--key-border),#13252d 68%);box-shadow:0 7px 8px #0009,0 0 18px var(--key-shadow),inset 0 -7px #0d171c}.black-key span{color:#102027;background:var(--key);white-space:nowrap;border:1px solid #fff8;border-radius:6px;padding:3px 5px;font-family:Fredoka;font-size:11px;position:absolute;bottom:9px;left:50%;transform:translate(-50%)}.black-key.future span{color:#d7e0e3;box-shadow:none;background:#52636a;border-color:#7d8d94}.black-key.pressed{box-shadow:0 2px 4px #0008,0 0 24px var(--key-shadow);transform:translateY(4px)}@media (width<=650px){.staff{--staff-top:38px;--staff-half-step:13px;--staff-height:104px;--neutral-hidden-y:90px;height:205px}.staff-lines{height:104px;top:38px}.pitch-card{width:90%;height:36px}.mystery.pitch-card.neutral-hidden{width:92%;height:calc(var(--staff-height) + 32px)}.piano{height:178px;padding:6px 5px 10px}.black-keys{inset:6px 5px 10px}.white-key span{min-width:29px;height:29px;padding:0 5px;font-size:13px;bottom:10px}}@media (width<=390px){.staff{height:198px}.piano{height:165px}.white-key span{min-width:25px;padding:0 4px;font-size:12px}}.note{border-color:var(--note-border);box-shadow:0 8px 20px var(--note-shadow)}.white-key{border-bottom-color:var(--key-border)}.white-key span{border:2px solid var(--key-border);box-shadow:0 4px 12px var(--key-shadow)}.white-key.future{filter:none;opacity:1;background:linear-gradient(#d7dee0,#aab5b9);border-bottom-color:#64748b;box-shadow:inset 0 -9px 15px #4755691c,0 5px #64748b}.white-key.future span{color:#334155;box-shadow:none;background:#94a3b8;border-color:#64748b}.key.pressed{background:var(--key);box-shadow:0 1px 0 var(--key-border),0 0 22px var(--key-shadow)}.staff{--staff-half-step:13px;--staff-height:104px;--staff-top:calc((100% - var(--staff-height))/2);--neutral-hidden-y:50%}.staff-lines{top:var(--staff-top);height:var(--staff-height)}@media (width<=650px){.staff{--staff-half-step:10px;--staff-height:80px;--staff-top:calc((100% - var(--staff-height))/2);--neutral-hidden-y:50%}.staff-lines{top:var(--staff-top);height:var(--staff-height)}}.settings{max-height:92vh;overflow:auto}.settings-group{border:0;min-width:0;margin:0 0 18px;padding:0}.settings-group legend{color:#9db3bc;letter-spacing:.8px;text-transform:uppercase;margin-bottom:9px;font-size:12px;font-weight:800}.length-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.length-grid button{cursor:pointer;text-align:left;color:#eff6f7;background:#19313b;border:2px solid #2d4650;border-radius:15px;padding:15px}.length-grid button.selected{background:#203f3e;border-color:#7edaa3;box-shadow:0 0 0 3px #7edaa315}.length-grid strong,.length-grid span{display:block}.length-grid span{color:#92aab3;margin-top:3px;font-size:12px}.mode-grid{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;display:grid}.mode-grid button{cursor:pointer;color:#dce9ec;background:#19313b;border:2px solid #2d4650;border-radius:13px;min-height:43px;font-weight:800}.mode-grid button.selected{color:#b8f0cf;background:#203f3e;border-color:#7edaa3}.tonic-select{color:#a9bec6;background:#19313b;border-radius:13px;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;display:flex}.tonic-select span{font-size:13px;font-weight:800}.tonic-select select{color:#f1f7f8;min-width:128px;font:inherit;background:#10262f;border:1px solid #48646f;border-radius:10px;padding:8px 32px 8px 11px;font-weight:800}.staff.length-8 .notes-row{gap:8px;inset-inline:2.5%}.staff.length-8 .pitch-card{width:94%}.staff.length-8 .mystery.pitch-card.neutral-hidden{border-radius:13px;width:94%}@media (width<=650px){.settings-group{margin-bottom:15px}.staff.length-8 .notes-row{gap:3px;inset-inline:1.5%}.staff.length-8 .pitch-card{width:96%}.staff.length-8 .mystery.pitch-card.neutral-hidden{border-radius:10px;width:96%}.staff.length-8 .mystery.pitch-card b{font-size:23px}}.black-keys{pointer-events:none}.black-key{pointer-events:auto}.black-key.future,.white-key.future{pointer-events:none}.white-key.future{pointer-events:auto;cursor:not-allowed;filter:grayscale();opacity:.42;background:linear-gradient(#c9d0d2,#9da8ac);border-color:#7a888e #7a888e #66747a;transform:none;box-shadow:inset 0 -9px 15px #47556926,0 4px #56656c}.white-key.future span{color:#46535a;box-shadow:none;opacity:.72;background:#8f9ba0;border-color:#75838a}.white-key.future:hover{background:linear-gradient(#c9d0d2,#9da8ac);transform:none}.black-key.future{pointer-events:auto;cursor:not-allowed;filter:grayscale();opacity:.38;background:linear-gradient(90deg,#26343a,#10191d 55%,#35434a);border-color:#3f4d53 #3f4d53 #111a1e;transform:none;box-shadow:0 5px 6px #0007,inset 0 -7px #172126}.black-key.future span{color:#b7c0c4;box-shadow:none;opacity:.7;background:#46555b;border-color:#66747a}.black-key.future:hover{background:linear-gradient(90deg,#26343a,#10191d 55%,#35434a);transform:none}.exercise-key,.exercise-key .key-root,.exercise-key .key-mode{text-transform:none}header{z-index:8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(#102832f5 0%,#102832e8 76%,#10283200 100%);border-radius:0 0 18px 18px;margin-inline:-8px;padding:10px 8px;position:sticky;top:0}.settings-button{z-index:9;flex:none;position:relative}@media (width<=650px){.brand small{font-size:9px;display:block}.stat,.streak{display:flex}header{gap:8px}.header-actions{gap:6px}.stat{min-width:50px;padding-inline:7px}}.settings{width:min(900px,100%);max-width:calc(100vw - 32px);overflow-x:hidden}.settings-group,.signature-grid{width:100%;min-width:0}.signature-grid{grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;padding:3px 2px 4px;display:grid;overflow:visible}.signature-card{color:#eff6f7;background:#19313b;border:2px solid #2d4650;border-radius:12px;width:100%;min-width:0;padding:6px 4px;transition:border-color .15s,background .15s}.signature-card.selected{background:#1c3939;border-color:#5cae85}.signature-card>strong{color:#b8f0cf;white-space:nowrap;margin:0 2px 4px;font-size:clamp(7px,1.15vw,10px);line-height:1.1;display:block}.signature-card[aria-label="0 sharps/flats"]>strong{font-size:clamp(7px,1vw,9px)}.signature-card .key-option{cursor:pointer;text-align:left;color:#dce9ec;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:7px;width:100%;min-width:0;min-height:0;margin:1px 0;padding:3px 2px;font-size:clamp(8px,1.25vw,11px);font-weight:700;line-height:1.15;transition:color .15s,background .15s,border-color .15s;display:block}.signature-card .key-option:hover{color:#fff;background:#29464b}.signature-card .key-option.selected{color:#102c21;background:#8be0ad;border-color:#8be0ad;box-shadow:0 2px 8px #61cd9d35}@media (width<=520px){.backdrop{padding:12px}.settings{max-width:calc(100vw - 24px)}.signature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow-x:hidden}.signature-card>strong{font-size:9px}.signature-card .key-option{font-size:10px}}.level-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}.level-grid button{border-radius:13px;width:100%;min-width:0;height:auto;min-height:0;padding:11px 12px}.level-grid strong{font-size:15px;line-height:1.1}.level-grid span{margin-top:4px;font-size:11px;line-height:1.2}@media (width<=520px){.level-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}html,body,#root{height:100%;min-height:100%;overflow:hidden}body{min-height:100dvh}main{flex-direction:column;width:min(1120px,100% - 24px);height:100dvh;min-height:100dvh;padding:clamp(10px,1.7dvh,18px) 0 clamp(5px,1dvh,10px);display:flex;overflow:hidden}header{margin-inline:0;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;flex:none;margin-bottom:clamp(5px,1dvh,12px);padding:clamp(6px,1dvh,10px) clamp(4px,.8vw,8px) clamp(5px,.8dvh,8px);position:relative;top:auto;overflow:visible}.brand,.header-actions,.stat,.brand-icon,.settings-button{flex-shrink:0;overflow:visible}.brand-icon{line-height:1}.brand>span{width:clamp(38px,5.5dvh,46px);height:clamp(38px,5.5dvh,46px)}.brand strong{font-size:clamp(17px,2.6dvh,21px)}.stat{padding-block:clamp(5px,1dvh,8px)}.settings-button{width:clamp(40px,5.5dvh,46px);height:clamp(40px,5.5dvh,46px)}.game-card{border-radius:clamp(20px,3dvh,28px);flex-direction:column;flex:none;min-height:0;padding:clamp(10px,2dvh,20px) clamp(12px,2vw,24px);display:flex;overflow:hidden}.game-head{flex:none}h1{font-size:clamp(23px,4dvh,34px);line-height:1.05}h2{font-size:clamp(18px,2.7dvh,22px);line-height:1.1}.listen{padding:clamp(10px,1.5dvh,13px) 16px}.staff{border-radius:clamp(16px,2.5dvh,22px);flex:none;height:300px;min-height:300px;max-height:300px;margin:clamp(7px,1.2dvh,13px) 0 clamp(5px,.9dvh,10px)}.feedback{flex:none;min-height:clamp(32px,5dvh,42px);margin:0 auto clamp(4px,.8dvh,9px)}.feedback>span{width:clamp(25px,3.8dvh,29px);height:clamp(25px,3.8dvh,29px)}.keyboard-head{flex:none;margin-bottom:clamp(5px,.8dvh,9px)}.keyboard-head>small{padding:5px 9px}.keyboard-head.progress-only{justify-content:flex-end;min-height:0;margin-top:0;margin-bottom:clamp(3px,.6dvh,6px)}.piano{flex:none;height:clamp(140px,23dvh,185px);padding:clamp(5px,1dvh,8px) clamp(5px,1dvh,8px) clamp(8px,1.3dvh,12px)}.black-keys{inset:clamp(5px,1dvh,8px) clamp(5px,1dvh,8px) clamp(8px,1.3dvh,12px)}.actions{flex:none;margin-top:clamp(5px,1dvh,11px)}.actions.single-action{grid-template-columns:none;justify-content:flex-end;display:flex}.actions.single-action .primary{min-width:clamp(180px,24vw,260px)}.secondary,.primary{min-height:clamp(42px,6dvh,48px)}footer{flex-direction:column;flex:none;align-items:center;gap:2px;margin-top:auto;padding-top:clamp(3px,.8dvh,8px);line-height:1.15}.footer-tools{justify-content:center;gap:9px;display:flex}.footer-credit{opacity:.7;text-align:center;font-size:clamp(.7rem,1.2vw,.85rem);font-weight:700}@media (height<=760px){.brand small{font-size:9px}.header-actions{gap:6px}.stat{min-width:64px;padding-inline:8px}.game-card{padding-block:10px}.eyebrow{margin-bottom:2px}.staff{--staff-half-step:11px;--staff-height:88px;--staff-top:calc((100% - var(--staff-height))/2);--neutral-hidden-y:50%;height:260px;min-height:260px;max-height:260px}.piano{height:clamp(132px,22dvh,165px)}.white-key span{min-width:29px;height:28px;font-size:13px;bottom:9px}}@media (width<=650px){main{width:min(100% - 12px,540px);padding-block:8px 4px}header{gap:6px;margin-bottom:4px;padding:4px 2px 5px}.brand{gap:7px}.brand small{font-size:8px;display:block}.brand>.brand-icon{width:38px;height:38px;font-size:22px}.header-actions{gap:4px}.stat,.streak{min-width:48px;padding:5px 6px;display:flex}.stat>span{font-size:14px}.settings-button{width:38px;height:38px}.game-card{border-radius:18px;padding:9px 9px 8px}.game-head h1{max-width:none}.listen{flex:0 0 48px;justify-content:center;gap:0;width:48px;min-width:48px;height:48px;padding:0}.listen svg{flex:0 0 24px;width:24px;height:24px;display:block}.play-melody-label{display:none}.staff{--staff-half-step:10px;--staff-height:80px;--staff-top:calc((100% - var(--staff-height))/2);--neutral-hidden-y:50%;height:250px;min-height:250px;max-height:250px;margin-block:6px 4px}.feedback{min-height:30px;margin-bottom:4px;font-size:13px}.feedback>span{width:25px;height:25px}.keyboard-head{margin-bottom:5px}.keyboard-head>small{padding:4px 7px}.piano{height:clamp(128px,22dvh,158px)}.actions{margin-top:5px}.secondary,.primary{min-height:42px}.actions.single-action .primary{width:100%}footer{margin-top:auto;padding-top:3px;font-size:10px}.footer-tools span{display:none}.footer-credit{display:block}}@media (height<=700px) and (width>=700px){main{width:min(1180px,100% - 12px);padding:8px 0 3px}header{margin-bottom:3px}.brand>span,.settings-button{width:36px;height:36px}.brand strong{font-size:16px}.stat{padding-block:3px}.game-card{flex:auto;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px 12px;padding:7px 10px;display:grid}.game-head{grid-area:1/1}.game-head h1{font-size:21px}.listen{justify-content:center;width:40px;height:40px;padding:0;font-size:0}.listen svg{width:21px}.staff{--staff-half-step:13px;--staff-height:104px;--staff-top:calc((100% - var(--staff-height))/2);--neutral-hidden-y:50%;grid-area:2/1;height:100%;min-height:0;max-height:none;margin:0}.feedback{grid-area:3/1;min-height:36px;margin:0}.piano{grid-area:1/2/3;height:100%;min-height:0}.actions{grid-area:3/2;margin:0}footer{margin-top:2px}}@media (width<=650px) and (height<=700px){.staff{--staff-half-step:8.5px;--staff-height:68px;height:220px;min-height:220px;max-height:220px}}