/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@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{.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.table{display:table}}:root{--ink:#20304a;--muted:#758096;--cream:#fff8e9;--paper:#fffdf7;--coral:#ff6b5d;--teal:#18a999;--sun:#ffcf45;--lavender:#e9e3ff;--line:#26344c}*{box-sizing:border-box}html{background:var(--cream)}body{background:var(--cream);color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font-family:Nunito,Avenir Next,PingFang SC,Microsoft YaHei,sans-serif}button{font:inherit;touch-action:manipulation}button:focus-visible{outline-offset:3px;outline:4px solid #18a9994d}.game-shell{min-height:100svh;padding:18px clamp(18px,3vw,44px) 28px;position:relative;overflow:hidden}.game-shell:before,.game-shell:after{content:"";z-index:0;pointer-events:none;border-radius:50%;position:fixed}.game-shell:before{background:#dff5ef;width:240px;height:240px;top:17%;left:-96px}.game-shell:after{background:#ffe9dd;width:300px;height:300px;bottom:-100px;right:-130px}.topbar,.game-card{z-index:1;max-width:1260px;margin-inline:auto;position:relative}.topbar{justify-content:space-between;align-items:center;gap:18px;min-height:60px;margin-bottom:16px;display:flex}.brand{align-items:center;gap:12px;min-width:230px;display:flex}.brand-mark{background:var(--coral);color:#fff;border-radius:16px 16px 16px 6px;place-items:center;width:48px;height:48px;font-size:29px;display:grid;transform:rotate(-3deg);box-shadow:0 6px #dd5146}.brand div{display:grid}.brand strong{letter-spacing:.03em;font-size:clamp(19px,2vw,26px)}.brand div span{color:var(--muted);margin-top:1px;font-size:12px}.topbar-actions{justify-content:flex-end;align-items:center;gap:10px;min-width:0;display:flex}.profile-button{min-height:54px;color:var(--ink);background:#e9f8f3;border:1px solid #18a99933;border-radius:16px;align-items:center;gap:8px;padding:6px 12px 6px 8px;display:flex;box-shadow:0 4px 12px #20304a0f}.profile-button--error{background:#fff3df;border-color:#edcaa4}.profile-cloud{background:#fff;border-radius:12px;flex:none;place-items:center;width:36px;height:36px;font-size:20px;display:grid}.profile-copy{text-align:left;min-width:78px;display:grid}.profile-copy strong{text-overflow:ellipsis;white-space:nowrap;max-width:100px;font-size:12px;line-height:1.1;overflow:hidden}.profile-copy small{color:#39877d;margin-top:4px;font-size:9px;font-weight:900}.profile-button--error .profile-copy small{color:#a56a30}.animal-collection{min-height:54px;color:var(--ink);cursor:pointer;background:#ffffffb8;border:1px solid #20304a14;border-radius:999px;justify-content:center;align-items:center;gap:9px;padding:6px 11px 6px 7px;display:flex;box-shadow:0 4px 12px #20304a0f}.collection-preview{align-items:center;padding-left:8px;display:flex}.collection-preview i{border:2px solid #fff;margin-left:-8px;font-style:normal}.collection-copy{text-align:left;display:grid}.collection-copy strong{font-size:12px;line-height:1.1}.collection-copy small{color:var(--muted);margin-top:3px;font-size:9px;font-weight:800}.collection-arrow{color:#9ba2af;font-size:22px;line-height:1}.animal{color:#aab0bd;filter:grayscale();background:#e8e9ec;border-radius:50%;place-items:center;width:35px;height:35px;font-size:17px;font-weight:900;display:grid}.animal.unlocked{filter:none;background:#fff0b9;animation:.55s both animalHello}.level-map-modal{background:#fffaf0;border:6px solid #fff;border-radius:28px;flex-direction:column;width:min(1020px,95vw);max-height:min(91svh,820px);animation:.3s cubic-bezier(.2,.9,.2,1.15) both modalIn;display:flex;overflow:hidden;box-shadow:0 25px 75px #0e182b52}.level-map-header{justify-content:space-between;align-items:center;gap:20px;padding:19px 22px 13px;display:flex}.level-map-header>div>span{color:var(--coral);letter-spacing:.12em;font-size:11px;font-weight:900}.level-map-header h2{margin:2px 0;font-size:clamp(24px,4vw,34px)}.level-map-header p{color:var(--muted);margin:0;font-size:12px;font-weight:700}.level-map-header button{width:46px;height:46px;color:var(--ink);cursor:pointer;background:#f0ebe2;border:0;border-radius:50%;flex:none;font-size:28px;line-height:1}.level-map-summary{gap:8px;padding:0 22px 13px;display:flex}.level-map-summary span{color:#6f6658;background:#f3ede2;border-radius:10px;padding:7px 10px;font-size:11px;font-weight:800}.level-map-summary b{color:var(--ink)}.level-map-scroll{overscroll-behavior:contain;min-height:0;padding:0 22px 24px;overflow-y:auto}.level-world{--world-color:#4f9b6b;--world-soft:#e7f5e9;background:#fffdf8;border:1px solid #eadfca;border-radius:19px;grid-template-columns:145px minmax(0,1fr);gap:14px;padding:14px;display:grid}.level-world+.level-world{margin-top:11px}.level-world--2{--world-color:#d88635;--world-soft:#fff0d5}.level-world--3{--world-color:#318eae;--world-soft:#e0f3f8}.level-world--4{--world-color:#7a62b0;--world-soft:#eee9fb}.level-world--5{--world-color:#c26b91;--world-soft:#fbe8f0}.level-world-title{color:var(--world-color);align-items:center;gap:9px;display:flex}.level-world-title>span{background:var(--world-soft);border-radius:13px;place-items:center;width:42px;height:42px;font-size:25px;display:grid}.level-world-title small{font-size:9px;font-weight:900;display:block}.level-world-title h3{margin:1px 0 0;font-size:15px;line-height:1.15}.level-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.level-card{border:1px solid var(--world-color);flex-direction:column;align-items:center;min-width:0;min-height:116px;padding:10px 7px 8px;display:flex;position:relative}@supports (color:color-mix(in lab, red, red)){.level-card{border:1px solid color-mix(in srgb, var(--world-color) 26%, white)}}.level-card{color:var(--ink);background:var(--world-soft);text-align:center;cursor:pointer;border-radius:14px}.level-card.current{border:3px solid var(--world-color);box-shadow:0 0 0 3px var(--world-color);padding:8px 5px 6px}@supports (color:color-mix(in lab, red, red)){.level-card.current{box-shadow:0 0 0 3px color-mix(in srgb, var(--world-color) 13%, white)}}.level-card:disabled{color:#9a9894;filter:grayscale(.85);cursor:default;background:#f0ede7;border-color:#ddd7cc}.level-card-number{color:#fff;background:var(--world-color);border-radius:999px;place-items:center;min-width:23px;height:23px;padding-inline:4px;font-size:9px;font-weight:900;display:grid;position:absolute;top:7px;left:7px}.level-card-emoji{font-size:30px;line-height:1.05}.level-card strong{text-overflow:ellipsis;white-space:nowrap;width:100%;margin-top:4px;font-size:11px;overflow:hidden}.level-card>small{width:100%;min-height:24px;color:var(--muted);margin-top:2px;font-size:8px;font-weight:800;line-height:1.4;overflow:hidden}.level-card-stars{color:#d7d1c6;letter-spacing:1px;margin-top:auto;font-size:12px}.level-card-stars i{font-style:normal}.level-card-stars i.active{color:#f2ab16}.collection-modal{background:#fffaf0;border:6px solid #fff;border-radius:28px;flex-direction:column;width:min(820px,94vw);max-height:min(88svh,760px);animation:.3s cubic-bezier(.2,.9,.2,1.15) both modalIn;display:flex;overflow:hidden;box-shadow:0 25px 75px #0e182b52}.collection-header{justify-content:space-between;align-items:center;gap:20px;padding:20px 22px 16px;display:flex}.collection-header>div>span{color:var(--teal);letter-spacing:.12em;font-size:11px;font-weight:900}.collection-header h2{margin:3px 0 2px;font-size:clamp(24px,4vw,34px)}.collection-header p{color:var(--muted);margin:0;font-size:12px;font-weight:700}.collection-header button{width:46px;height:46px;color:var(--ink);cursor:pointer;background:#f0ebe2;border:0;border-radius:50%;flex:none;font-size:28px;line-height:1}.collection-progress{background:#e9e3d8;border-radius:999px;height:8px;margin:0 22px 14px;overflow:hidden}.collection-progress span{border-radius:inherit;background:var(--teal);height:100%;transition:width .35s;display:block}.collection-scroll{overscroll-behavior:contain;min-height:0;padding:0 22px 24px;overflow-y:auto}.collection-section{background:#fffdf8;border:1px solid #eadfca;border-radius:18px;padding:15px}.collection-section+.collection-section{margin-top:12px}.collection-section--1{--category-color:#58a877;--category-soft:#e5f5e8}.collection-section--2{--category-color:#df8c36;--category-soft:#fff0d6}.collection-section--3{--category-color:#3e99bb;--category-soft:#e0f3f8}.collection-section--4{--category-color:#8b6bc0;--category-soft:#eee8fb}.collection-section-title{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.collection-section-title h3{color:var(--category-color);margin:0;font-size:15px}.collection-section-title span{color:var(--category-color);background:var(--category-soft);border-radius:999px;padding:3px 8px;font-size:10px;font-weight:900}.collection-grid{grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;display:grid}.collection-item{color:#a6a3a0;text-align:center;background:#f2efea;border:1px dashed #d8d2c8;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:88px;padding:7px 3px;display:flex}.collection-item.unlocked{border-style:solid;border-color:var(--category-color)}@supports (color:color-mix(in lab, red, red)){.collection-item.unlocked{border-color:color-mix(in srgb, var(--category-color) 30%, white)}}.collection-item.unlocked{color:var(--ink);background:var(--category-soft)}.collection-item>span{background:#ffffffb8;border-radius:50%;place-items:center;width:38px;height:38px;font-size:25px;font-weight:900;display:grid}.collection-item strong{text-overflow:ellipsis;white-space:nowrap;width:100%;margin-top:5px;font-size:10px;overflow:hidden}.collection-item small{opacity:.65;margin-top:2px;font-size:8px;font-weight:800}.score-pill{color:#fff;background:#21304a;border-radius:15px;flex-direction:column;justify-content:center;align-items:center;gap:1px;min-width:126px;min-height:52px;padding:5px 14px;font-size:18px;display:flex;box-shadow:0 6px #101a2d}.score-main{align-items:center;gap:7px;line-height:1;display:flex}.score-pill small{color:#cbeee3;font-size:9px;font-weight:900}.game-card{background:var(--paper);border:2px solid #20304a14;border-radius:26px;overflow:hidden;box-shadow:0 18px 55px #4437221f}.mode-row{border-bottom:1px solid #eee7da;justify-content:space-between;align-items:center;gap:24px;min-height:76px;padding:14px 22px;display:flex}.journey-level{min-width:350px;max-width:500px;color:var(--ink);text-align:left;cursor:pointer;background:linear-gradient(135deg,#fff9e9,#fff);border:1px solid #e5dbc8;border-radius:16px;flex:1;align-items:center;gap:11px;padding:9px 12px;display:flex;box-shadow:0 4px 12px #41321b12}.journey-level:active{transform:translateY(2px)}.journey-level:disabled{opacity:.72;cursor:default}.journey-level-emoji{background:#ffecb2;border-radius:14px;flex:none;place-items:center;width:48px;height:48px;font-size:30px;display:grid}.journey-level-copy{flex:1;min-width:0;display:grid}.journey-level-copy small{color:#9b7032;letter-spacing:.04em;font-size:9px;font-weight:900}.journey-level-copy strong{text-overflow:ellipsis;white-space:nowrap;font-size:16px;overflow:hidden}.journey-level-copy em{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-style:normal;font-weight:800;overflow:hidden}.journey-map-link{color:var(--teal);flex:none;font-size:11px;font-weight:900}.journey-map-link b{margin-left:3px;font-size:18px}.level-tags{flex-wrap:wrap;justify-content:center;gap:6px;max-width:235px;display:flex}.level-tags span{color:#667085;white-space:nowrap;background:#fff;border:1px solid #e7dfd2;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:900}.mode-switch{background:#f2eee6;border-radius:16px;gap:7px;padding:5px;display:flex}.level-switch{background:#fff;border:1px solid #e2d9ca;border-radius:13px;gap:4px;padding:4px;display:flex}.level-switch button{min-height:44px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:9px;padding:7px 11px;font-size:12px;font-weight:900}.level-switch button.active{color:#7b5611;background:#fff0b8;box-shadow:inset 0 0 0 1px #f2d36a}.mode-switch button{color:#70788a;cursor:pointer;background:0 0;border:0;border-radius:11px;min-height:42px;padding:8px 14px;font-weight:800;transition:transform .18s,background .18s,color .18s}.mode-switch button span{margin-right:5px;font-size:18px}.mode-switch button.active{color:var(--ink);background:#fff;box-shadow:0 3px 9px #20304a1a}.mode-switch button:active,.tool-buttons button:active,.round-modal button:active{transform:translateY(2px)}.round-track{color:var(--muted);align-items:center;gap:10px;font-size:13px;font-weight:800;display:flex}.round-track b{color:var(--ink);min-width:25px}.progress-path{padding-top:19px;position:relative}.progress-runner{z-index:2;filter:drop-shadow(0 2px 2px #20304a29);font-size:18px;line-height:1;transition:left .45s cubic-bezier(.2,.85,.25,1.2);position:absolute;top:-6px;transform:translate(-50%)}.progress-dots{gap:5px;display:flex}.progress-dots i{background:#fff;border:2px solid #d8d5d0;border-radius:50%;width:14px;height:14px;transition:transform .2s,background .2s;display:block}.progress-dots i.done{border-color:var(--sun);background:var(--sun);transform:scale(1.08)}.challenge-area{background-color:#fffdf7;background-image:radial-gradient(#20304a14 1px,#0000 1px);background-size:22px 22px;grid-template-columns:minmax(250px,.78fr) minmax(400px,1.4fr);align-items:center;gap:clamp(24px,5vw,70px);min-height:250px;padding:24px clamp(28px,5vw,70px) 20px;display:grid;position:relative}.prompt-panel{flex-direction:column;justify-content:center;align-self:stretch;display:flex}.eyebrow{color:var(--teal);letter-spacing:.12em;align-items:center;gap:8px;font-size:13px;font-weight:900;display:flex}.pulse-dot{background:var(--teal);border-radius:50%;width:9px;height:9px;box-shadow:0 0 0 6px #18a99921}.prompt-panel h1{letter-spacing:-.025em;max-width:360px;margin:11px 0 12px;font-size:clamp(28px,3.3vw,44px);line-height:1.15}.prompt-panel h1 em{color:var(--coral);font-style:normal}.prompt-panel h1 small{color:#8d6a5d;vertical-align:.18em;font-size:.48em}.feedback{width:fit-content;min-height:34px;color:var(--muted);background:#f2efe8;border-radius:10px;align-items:center;gap:7px;margin:0;padding:7px 12px;font-size:14px;font-weight:800;display:flex}.feedback>span{color:#fff;border-radius:50%;place-items:center;width:20px;height:20px;display:grid}.feedback--correct{color:#0e756a;background:#dcf5ed}.feedback--wrong{color:#b84d43;background:#ffebe6}.feedback--black{color:#5f556f;background:#eee9fa}.feedback .feedback-friend{background:#fff;border:2px solid #ffffffe6;flex:none;width:31px;height:31px;font-size:19px;animation:.45s both friendNod;box-shadow:0 2px 6px #20304a1f}.mini-stats{flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px;display:flex}.mini-stats>span{background:#fff;border:1px solid #e7e1d7;border-radius:9px;padding:7px 10px;font-size:13px}.mini-stats .clef-tag{border:0;font-weight:900}.mini-stats .note-growth{color:#5a744a;background:#f0f7e8;border-color:#d9e6ca;font-weight:900}.note-growth b{margin-right:2px}.mini-stats .note-growth--mastered{color:#8c6721;background:#fff6d6;border-color:#f0d285}.mini-stats .paw-progress{background:#fff9e6;border-color:#eedaa1;align-items:center;gap:2px;display:flex}.paw-progress i{filter:grayscale();opacity:.22;font-style:normal;transform:scale(.86)}.paw-progress i.done{filter:none;opacity:1;transform:scale(1)}.paw-progress small{color:#8b6d37;margin-left:3px;font-size:10px;font-weight:900}.clef-tag.high{color:#6451a8;background:var(--lavender)}.clef-tag.low{color:#226f88;background:#dff2f7}.staff{background:#ffffffe0;border:2px solid #20304a12;border-radius:20px;justify-self:center;width:100%;max-width:650px;height:168px;position:relative;box-shadow:0 11px 25px #2b324512}.staff--shake{animation:.35s staffShake}.clef-name{color:var(--muted);letter-spacing:.08em;font-size:11px;font-weight:900;position:absolute;top:10px;right:14px}.staff-line{background:var(--line);opacity:.85;height:2px;position:absolute;left:20%;right:6%}.clef{z-index:2;color:var(--ink);font-family:Times New Roman,Noto Music,serif;line-height:1;position:absolute;left:7.5%}.clef--treble{font-size:86px;top:25px}.clef--bass{font-size:64px;top:48px}.note-symbol{z-index:3;width:22px;height:48px;animation:.35s cubic-bezier(.2,.8,.2,1) both noteArrive;position:absolute;left:62%;transform:translate(-50%,-7px)}.note-head{background:var(--coral);border-radius:50%;width:22px;height:14px;position:absolute;top:0;left:0;transform:rotate(-14deg);box-shadow:inset -3px -2px #882a2226}.note-stem{background:var(--coral);border-radius:3px;width:3px;height:41px;position:absolute;top:-34px;left:19px}.note-symbol--down .note-stem{top:7px;left:1px}.ledger-line{z-index:4;background:var(--line);width:38px;height:2px;position:absolute;left:calc(62% - 19px)}.piano-wrap{background:#f6f0e5;border-top:1px solid #e8dfd1;padding:14px clamp(20px,3vw,40px) 28px}.piano-instruction{color:#626b7d;justify-content:space-between;align-items:center;gap:14px;min-height:42px;margin-bottom:10px;font-size:13px;font-weight:900;display:flex}.piano-instruction>span{letter-spacing:.04em;align-items:center;gap:8px;display:flex}.piano-instruction>span i{background:var(--coral);border-radius:4px 4px 4px 1px;width:11px;height:11px;display:inline-block;transform:rotate(6deg)}.tool-buttons{gap:7px;display:flex}.keyboard-zones{color:#687184;letter-spacing:.08em;grid-template-columns:1fr 1fr;margin:0 8px 7px;font-size:11px;font-weight:900;display:grid}.keyboard-zones span{border-bottom:3px solid #9acfc5;padding:5px 12px}.keyboard-zones span:last-child{text-align:right;border-bottom-color:#f3aa9a}.tool-buttons button{min-height:44px;color:var(--ink);cursor:pointer;background:#fff;border:1px solid #ded6c8;border-radius:10px;padding:7px 11px;font-size:12px;font-weight:800}.tool-buttons button span{margin-right:4px}.piano-range{min-width:0}.piano-range-heading{color:#7a8495;letter-spacing:.04em;justify-content:space-between;align-items:center;gap:12px;min-height:24px;padding:0 8px 5px;font-size:10px;font-weight:900;display:flex}.piano-range-heading strong{color:var(--ink);font-size:12px}.piano-range-heading a{color:#3e7890;text-underline-offset:2px;-webkit-text-decoration:underline #3e789059;text-decoration:underline #3e789059}.keyboard-navigation{grid-template-columns:minmax(98px,auto) 1fr minmax(98px,auto);align-items:center;gap:10px;min-height:46px;margin-bottom:7px;padding-inline:4px;display:grid}.keyboard-navigation button{color:#657084;cursor:pointer;background:#fffdf9;border:1px solid #d9d2c6;border-radius:12px;min-height:42px;padding:7px 13px;font-size:12px;font-weight:900}.keyboard-navigation button.active{color:#117d72;background:#e1f5ef;border-color:#18a99961;box-shadow:0 3px #18a9992e}.swipe-hint{color:#747e8e;letter-spacing:.05em;justify-content:center;align-items:center;gap:10px;font-size:12px;font-weight:900;display:flex}.swipe-hint b{color:var(--coral);font-size:19px}.piano-scroll-shell{position:relative}.piano-scroll-shell:before,.piano-scroll-shell:after{z-index:8;content:"";pointer-events:none;width:24px;position:absolute;top:2px;bottom:18px}.piano-scroll-shell:before{background:linear-gradient(90deg,#f6f0e5,#f6f0e500);left:0}.piano-scroll-shell:after{background:linear-gradient(270deg,#f6f0e5,#f6f0e500);right:0}.piano-scroll{scroll-behavior:smooth;scrollbar-color:#a9b4c4 #e6dfd4;scrollbar-width:thin;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%;padding:2px 11px 18px;overflow:auto hidden}.piano-scroll:focus-visible{outline-offset:2px;border-radius:18px;outline:3px solid #18a99973}.piano-scroll::-webkit-scrollbar{height:8px}.piano-scroll::-webkit-scrollbar-track{background:#e6dfd4;border-radius:999px}.piano-scroll::-webkit-scrollbar-thumb{background:#a9b4c4;border-radius:999px}.piano{-webkit-user-select:none;user-select:none;background:#21304a;border:8px solid #21304a;border-bottom-width:12px;border-radius:15px 15px 20px 20px;height:clamp(112px,12vw,142px);position:relative;overflow:hidden;box-shadow:0 9px #101a2d,0 15px 22px #20304a2e}.piano--continuous{--piano-key-width:clamp(54px, 6.2vw, 68px);--black-key-width:clamp(34px, 3.9vw, 42px);--black-key-half:clamp(17px, 1.95vw, 21px);width:max-content;min-width:100%;height:clamp(144px,15vw,176px)}.white-keys{background:#21304a;gap:2px;height:100%;display:flex}.piano--continuous .white-keys{grid-template-columns:repeat(28, var(--piano-key-width));display:grid}.white-key{min-width:0;color:var(--ink);cursor:pointer;touch-action:pan-x;background:#fffefb;border:0;border-radius:0 0 9px 9px;flex:1;justify-content:center;align-items:flex-end;padding:0 2px 15px;transition:background .12s,transform .12s,box-shadow .12s;display:flex;position:relative;box-shadow:inset 0 -8px #ece9e1}.piano--continuous .white-key{width:var(--piano-key-width);min-width:var(--piano-key-width);flex:none}.white-key:not(:disabled):active,.white-key--correct,.white-key--wrong{transform:translateY(6px)}.white-key--correct{background:#c8f2e5;box-shadow:inset 0 -5px #6ccdb5}.white-key--wrong{background:#ffe0d8;animation:.38s keyWrong;box-shadow:inset 0 -5px #ef8a78}.white-key--hint{animation:.9s ease-in-out infinite alternate keyHint}.white-key:disabled{cursor:default}.key-label{z-index:3;place-items:center;gap:0;transition:opacity .2s;display:grid;position:relative}.key-label b{color:var(--coral);letter-spacing:-.03em;font-size:clamp(14px,2vw,22px);line-height:1.05}.key-label small{color:#8790a0;font-size:10px;font-weight:800}.key-label--hidden{opacity:0}.octave-label{color:#8b93a1;writing-mode:vertical-rl;font-size:8px;font-weight:900;position:absolute;bottom:10px;left:7px}.black-keys{z-index:5;pointer-events:none;position:absolute;inset:0}.black-key{pointer-events:auto;cursor:pointer;background:#26344c;border:0;border-radius:0 0 7px 7px;width:4.3%;height:57%;padding:0;position:absolute;top:0;box-shadow:inset 0 -8px #111b2e,0 4px 5px #0000003d}.piano--continuous .black-key{width:var(--black-key-width);touch-action:pan-x}.clef-divider{z-index:4;pointer-events:none;background:linear-gradient(#18a999cc,#f2705fb8);width:3px;position:absolute;top:0;bottom:0;left:50%}.clef-divider i{display:none}.black-key:active{transform:translateY(3px);box-shadow:inset 0 -5px #111b2e,0 2px 3px #0003}.reward-pop{z-index:20;background:var(--sun);width:min(280px,72vw);min-height:210px;color:var(--ink);border:5px solid #fff;border-radius:30px;flex-direction:column;justify-content:center;align-items:center;padding:22px;animation:1.75s both rewardPop;display:flex;position:fixed;top:46%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #20304a47}.reward-animal{font-size:78px;line-height:1;animation:.55s .1s both rewardBounce}.reward-pop strong{margin-top:8px;font-size:26px}.reward-pop small{opacity:.68;font-weight:800}.success-sparkles{z-index:8;pointer-events:none;width:10px;height:10px;position:absolute;top:44%;left:73%}.success-sparkles i{color:var(--coral);font-size:24px;font-style:normal;font-weight:900;animation:.8s ease-out both sparkleFly;position:absolute}.success-sparkles i:nth-child(2){color:var(--sun);animation-delay:50ms;transform:rotate(12deg)}.success-sparkles i:nth-child(3){color:var(--teal);animation-delay:.1s}.success-sparkles i:nth-child(4){color:#8b72cd;animation-delay:.15s}.combo-burst{z-index:18;color:#7a4b12;pointer-events:none;background:#fff0a9;border:4px solid #fff;border-radius:22px;grid-template-columns:auto auto;align-items:center;gap:0 8px;padding:13px 20px;animation:1.05s both comboBurst;display:grid;position:fixed;top:15%;left:50%;transform:translate(-50%);box-shadow:0 15px 38px #5b3d0c38}.combo-burst>span{grid-row:1/3;font-size:39px}.combo-burst strong{font-size:20px}.combo-burst small{font-weight:900}.confetti i{background:var(--coral);border-radius:3px;width:9px;height:16px;position:absolute;top:50%;left:50%}.confetti i:first-child{transform:translate(-110px,-80px)rotate(20deg)}.confetti i:nth-child(2){background:var(--teal);transform:translate(105px,-72px)rotate(55deg)}.confetti i:nth-child(3){background:#7257c7;transform:translate(-122px,12px)rotate(-25deg)}.confetti i:nth-child(4){transform:translate(112px,30px)rotate(30deg)}.confetti i:nth-child(5){background:var(--teal);transform:translate(-85px,82px)rotate(65deg)}.confetti i:nth-child(6){background:#7257c7;transform:translate(88px,88px)rotate(-25deg)}.confetti i:nth-child(7){transform:translate(-62px,-102px)rotate(70deg)}.confetti i:nth-child(8){background:var(--teal);transform:translate(65px,-103px)rotate(12deg)}.confetti i:nth-child(9){transform:translate(-130px,62px)rotate(42deg)}.confetti i:nth-child(10){background:#7257c7;transform:translate(128px,-18px)rotate(-55deg)}.modal-backdrop{z-index:30;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#18233794;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.round-modal{text-align:center;background:#fff8e4;border:6px solid #fff;border-radius:32px;width:min(430px,92vw);padding:34px 30px 30px;animation:.35s cubic-bezier(.2,.9,.2,1.2) both modalIn;position:relative;overflow:hidden;box-shadow:0 25px 70px #0e182b4d}.modal-rays{color:var(--sun);opacity:.35;font-size:100px;position:absolute;inset:-26px auto auto -17px}.modal-animal{background:var(--sun);border-radius:50%;place-items:center;width:112px;height:112px;margin:0 auto 13px;font-size:72px;display:grid}.round-modal p{color:var(--muted);margin:0 0 6px;font-size:14px;font-weight:900}.round-modal h2{margin:0;font-size:clamp(28px,5vw,38px)}.modal-stars{letter-spacing:.1em;margin:13px 0 20px;font-size:30px}.modal-stars i{color:#ddd6c8;font-style:normal}.modal-stars i.active{color:#f3ad19}.round-report{grid-template-columns:1fr 1fr;gap:8px;margin:-7px 0 20px;display:grid}.round-report span{color:var(--muted);background:#fff;border:1px solid #eadfc6;border-radius:12px;gap:2px;padding:10px 7px;font-size:10px;font-weight:800;display:grid}.round-report b{color:var(--ink);font-size:20px}.round-modal button{background:var(--teal);color:#fff;cursor:pointer;border:0;border-radius:15px;width:100%;min-height:55px;font-size:18px;font-weight:900;box-shadow:0 6px #0d766d}.round-modal button span{margin-left:7px}.round-actions{gap:10px;display:grid}.round-modal .round-map-button{color:#657083;min-height:42px;box-shadow:none;background:#eee9de;font-size:13px}@keyframes noteArrive{0%{opacity:0;transform:translate(-50%,-22px)scale(.7)}to{opacity:1;transform:translate(-50%,-7px)scale(1)}}@keyframes staffShake{0%,to{transform:translate(0)}30%{transform:translate(-6px)}65%{transform:translate(6px)}}@keyframes keyWrong{0%,to{filter:none}50%{filter:saturate(1.8)}}@keyframes keyHint{0%{background:#fffefb}to{background:#fff0a8;box-shadow:inset 0 -6px #eac85c,0 0 22px #ffcf45e6}}@keyframes rewardPop{0%{opacity:0;transform:translate(-50%,-45%)scale(.5)rotate(-5deg)}16%,78%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(0)}to{opacity:0;transform:translate(-50%,-58%)scale(.9)}}@keyframes rewardBounce{0%{transform:scale(.3)rotate(-10deg)}70%{transform:scale(1.16)rotate(5deg)}to{transform:scale(1)rotate(0)}}@keyframes friendNod{0%{transform:rotate(-7deg)scale(.82)}65%{transform:rotate(6deg)scale(1.1)}to{transform:rotate(0)scale(1)}}@keyframes sparkleFly{0%{opacity:0;transform:translate(0)scale(.35)rotate(0)}22%{opacity:1}to{opacity:0;transform:translate(var(--spark-x,48px), -58px) scale(1.15) rotate(24deg)}}.success-sparkles i:first-child{--spark-x:-58px}.success-sparkles i:nth-child(2){--spark-x:-17px}.success-sparkles i:nth-child(3){--spark-x:28px}.success-sparkles i:nth-child(4){--spark-x:60px}@keyframes comboBurst{0%{opacity:0;transform:translate(-50%,-16px)scale(.62)rotate(-4deg)}18%,75%{opacity:1;transform:translate(-50%)scale(1)rotate(0)}to{opacity:0;transform:translate(-50%,-12px)scale(.9)}}@keyframes modalIn{0%{opacity:0;transform:translateY(20px)scale(.88)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes animalHello{0%{transform:scale(.5)rotate(-8deg)}70%{transform:scale(1.14)rotate(5deg)}to{transform:scale(1)}}@media (width<=820px){.game-shell{padding:12px 12px 22px}.topbar{gap:8px}.topbar-actions{gap:6px}.brand div span{display:none}.profile-button{padding-right:9px}.profile-copy{min-width:68px}.animal-collection{gap:5px}.collection-copy strong{font-size:11px}.collection-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.score-pill{min-width:112px;padding-inline:9px}.mode-row{flex-direction:column;align-items:stretch;gap:12px;padding:12px}.journey-level{width:100%;min-width:0;max-width:none}.level-tags{max-width:none}.level-switch{align-self:center}.mode-switch button{flex:1;padding-inline:8px;font-size:12px}.round-track{justify-content:center}.level-world{grid-template-columns:1fr}.level-world-title{padding-inline:3px}.challenge-area{grid-template-columns:1fr;gap:12px;min-height:370px;padding:20px}.prompt-panel{text-align:center;align-items:center}.prompt-panel h1{margin-block:8px;font-size:29px}.mini-stats{margin-top:10px}.staff{height:158px}.piano-wrap{padding-inline:10px}.piano{border-width:6px 6px 10px;height:132px}.piano--continuous{height:150px}.key-label b{font-size:15px}.key-label small,.octave-label{display:none}}@media (width<=570px){.topbar{gap:8px}.topbar-actions{flex:1}.brand{min-width:0}.brand-mark{width:42px;height:42px}.brand strong{font-size:17px}.animal-collection{display:none}.profile-button{flex:1;min-width:0}.profile-cloud{width:32px;height:32px}.profile-copy{min-width:0}.profile-copy strong{max-width:72px}.journey-level-emoji{width:42px;height:42px;font-size:25px}.journey-map-link{font-size:0}.journey-map-link b{font-size:23px}.level-map-header{padding:15px 15px 10px}.level-map-header p{display:none}.level-map-summary,.level-map-scroll{padding-inline:15px}.level-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-switch button span{margin:0;display:block}.piano-instruction{flex-direction:column;align-items:flex-start}.keyboard-navigation{grid-template-columns:1fr 1fr;gap:6px}.keyboard-navigation button:first-child{grid-area:2/1}.keyboard-navigation button:last-child{grid-area:2/2}.swipe-hint{grid-area:1/1/auto/-1}.tool-buttons{width:100%}.tool-buttons button{flex:1}.piano{height:120px}.piano--continuous{height:138px}.white-keys{gap:1px}.white-key{padding-bottom:10px}}@media (height<=780px) and (width>=821px){.game-shell{padding-top:10px;padding-bottom:14px}.topbar{min-height:48px;margin-bottom:10px}.brand-mark,.score-pill{height:44px}.mode-row{min-height:62px;padding-block:9px}.challenge-area{min-height:218px;padding-block:16px}.staff{height:156px}.piano-wrap{padding-bottom:20px}.piano{height:108px}.piano--continuous{height:128px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}