:root{color:#20243a;font-synthesis:none;background:#f4f6ff;font-family:ui-rounded,Nunito,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 8% 2%,#ffe8df 0,#0000 25rem),radial-gradient(circle at 92% 0,#e2efff 0,#0000 30rem),#f5f7ff;min-width:320px;min-height:100vh;margin:0;font-size:18px}button,select{font:inherit}button{cursor:pointer;border:0}button:focus-visible,select:focus-visible{outline-offset:3px;outline:4px solid #20243a}main{max-width:850px;margin:0 auto;padding:28px 18px 64px}.hero{text-align:center;margin:12px 0 29px}.logo{filter:drop-shadow(0 5px #525da426);font-size:70px;line-height:1}.hero h1,.unit-head h1,.activity h1,.mistake-head h1{letter-spacing:-.055em;margin:5px 0 3px;font-size:clamp(2.25rem,6vw,3.45rem);font-weight:900;line-height:1.04}.hero p,.unit-head p,.mistake-head p{color:#5b637e;margin:0;font-size:1.18rem}.app-tabs{justify-content:center;gap:10px;margin:0 0 26px;display:flex}.app-tabs button{color:#525c8b;background:#fffc;border:2px solid #dce1f2;border-radius:16px;min-height:52px;padding:11px 18px;font-weight:900;transition:transform .15s,border-color .15s;box-shadow:0 2px #d5d9e8}.app-tabs button:hover{border-color:#9da6d8;transform:translateY(-1px)}.app-tabs button.active{color:#fff;background:#6573d6;border-color:#6573d6;box-shadow:0 4px #4854ab}.unit-grid,.lessons,.mistake-list{gap:14px;display:grid}.unit-card{--accent:#6573d6;color:#20243a;text-align:left;background:#ffffffeb;border:2px solid #e1e5f3;border-radius:23px;align-items:center;gap:17px;width:100%;min-height:110px;padding:16px 18px;transition:all .16s;display:flex;box-shadow:0 4px #e0e4f1,0 10px 20px #47508812}.unit-card:not(:disabled):hover{border-color:var(--accent);box-shadow:0 7px 0 color-mix(in srgb, var(--accent) 24%, #e0e4f1), 0 13px 22px #4750881c;transform:translateY(-3px)}.unit-card.locked{opacity:.63;cursor:not-allowed;filter:grayscale(.18)}.unit-emoji{text-align:center;flex:0 0 64px;width:64px;font-size:47px}.unit-card span:nth-child(2){flex:1;gap:4px;min-width:0;display:grid}.unit-card b{font-size:1.27rem}.unit-card small,.lesson-card small,.mistake-card small{color:#626b86}.unit-card strong{color:var(--accent);font-size:.95rem}.unit-card i,.lesson-progress{background:#e8ebf5;border-radius:99px;height:9px;display:block;overflow:hidden}.unit-card em,.lesson-progress i{border-radius:inherit;background:var(--accent);height:100%;display:block}.back{color:#4c5791;background:0 0;padding:11px 5px;font-weight:900}.back:hover{color:#29346e;text-decoration:underline}.unit-head,.mistake-head{text-align:center;margin:8px 0 27px}.unit-head>div,.mistake-head>div{font-size:65px;line-height:1}.unit-head h1{color:var(--accent)}.unit-head aside{color:#514890;background:#eeedff;border-radius:15px;max-width:570px;margin:17px auto 0;padding:13px 16px;font-size:.96rem;font-weight:800}.lesson-card{text-align:left;color:#20243a;background:#fffffff0;border:2px solid #e3e7f4;border-radius:19px;min-height:84px;padding:16px 52px 16px 74px;transition:all .15s;position:relative;box-shadow:0 3px #e3e6f1}.lesson-card:hover{border-color:#8996da;transform:translateY(-2px);box-shadow:0 5px #d6dcf0}.lesson-card span{color:#52608a;background:#edf0fb;border-radius:50%;place-items:center;width:39px;height:39px;font-weight:900;display:grid;position:absolute;top:20px;left:17px}.lesson-card span.check{color:#fff;background:#55b877}.lesson-card b,.lesson-card small{display:block}.lesson-card i{color:#6573d6;font-size:32px;font-style:normal;position:absolute;top:23px;right:19px}.lesson-card.locked{opacity:.58;cursor:not-allowed;filter:grayscale(.25)}.activity{text-align:center;background:#fffffff5;border:2px solid #e0e5f3;border-radius:29px;padding:clamp(23px,5vw,43px);box-shadow:0 12px 30px #44508c1a}.tag,.mistake-tag{color:#fff;border-radius:99px;padding:6px 14px;font-size:.91rem;font-weight:900;display:inline-block}.mistake-tag{background:#6256ad}.activity h1{margin-top:12px}.lesson-intro{text-align:left;max-width:620px;margin:23px auto 0}.intro-icon{border-radius:22px;place-items:center;width:68px;height:68px;margin:0 auto 13px;font-size:40px;display:grid;box-shadow:0 5px #3037672e}.lesson-intro h2{text-align:center;letter-spacing:-.03em;margin:0 0 12px;font-size:clamp(1.55rem,4vw,2rem)}.lesson-intro>p{color:#4d5674;background:#f5f7ff;border-radius:14px;padding:12px 15px;line-height:1.45}.start-lesson{color:#fff;background:#6573d6;border-radius:17px;width:min(100%,380px);min-height:66px;margin:25px auto 0;padding:12px 18px;font-weight:900;transition:all .15s;display:block;box-shadow:0 4px #4854ab}.start-lesson:hover{filter:brightness(1.04);transform:translateY(-2px)}.bounce-activity{background:#fff6f1;border:2px solid #ffd5c8;border-radius:18px;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;margin:20px 0;padding:15px;display:grid}.bounce-stage{width:110px;height:120px;position:relative;overflow:hidden}.bounce-activity b,.bounce-activity small{display:block}.bounce-activity small{color:#765b55;margin-top:4px;font-size:.86rem}.bounce-activity button{color:#a54731;background:#ffdace;border-radius:13px;min-height:48px;padding:9px 13px;font-size:.9rem;font-weight:900}.color-guide{text-align:center;background:#f5f8ff;border:2px solid #dce5ff;border-radius:18px;margin:20px 0 4px;padding:16px}.color-guide h3{margin:0;font-size:1.2rem}.color-guide p{color:#5c6687;margin:5px auto 13px;font-size:.9rem}.color-guide>div{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.color-guide figure{border:2px solid var(--note-color);background:#fff;border-radius:10px;min-width:0;margin:0;padding:5px}.color-guide img{object-fit:contain;width:100%;height:35px}.color-guide figcaption{color:#fff;background:var(--note-color);border-radius:50%;place-items:center;width:27px;height:27px;margin:3px auto 0;font-size:.9rem;font-weight:900;display:grid}.practice{text-align:left;max-width:590px;margin:25px auto 0}.practice-top{color:#5d6681;justify-content:space-between;margin-bottom:8px;font-size:.92rem;font-weight:900;display:flex}.practice-top span{color:#5a4eae}.lesson-progress{background:#e6e9f5;height:12px;margin-bottom:25px}.lesson-progress i{background:#61be7e;transition:width .25s}.coach{color:#50478e;background:#f0edff;border-radius:12px;padding:10px 13px;font-size:.92rem;font-weight:800}.prompt{text-align:center;margin:13px auto 23px;font-size:clamp(1.35rem,3vw,1.72rem);font-weight:900;line-height:1.2}.answers{gap:11px;margin-top:22px;display:grid}.answers button{color:#313952;text-align:left;background:#fff;border:2px solid #dfe4f2;border-radius:16px;min-height:64px;padding:13px 18px;font-weight:900;transition:all .14s;box-shadow:0 2px #e3e7f2}.answers button:hover{background:#f7f8ff;border-color:#7887d2;transform:translateY(-1px)}.answers button.right{color:#207343;background:#e0f7e6;border-color:#43b36e}.answers button.wrong{color:#a43434;background:#ffe7e7;border-color:#e46464}.feedback{text-align:left;border-radius:18px;gap:4px;margin-top:18px;padding:17px;display:grid}.feedback.good{color:#207343;background:#e0f7e6}.feedback.again{color:#915c0a;background:#fff2d9}.feedback span{font-size:.94rem}.continue,.practice-all{color:#fff;background:#58b978;border-radius:15px;min-height:54px;padding:12px 22px;font-weight:900;box-shadow:0 3px #378e55}.continue{justify-self:end;margin-top:10px}.again .continue{background:#e1a23c;box-shadow:0 3px #a96e14}.session-end{justify-items:center;gap:12px;max-width:500px;margin:35px auto 0;display:grid}.session-end>div{font-size:75px}.session-end h2{margin:0;font-size:2rem}.session-end p{color:#596078;margin:0}.session-end .continue{justify-self:center}.real-staff{background:#fcfcff;border:1px solid #e1e5f1;border-radius:16px;width:min(500px,100%);height:170px;position:relative;box-shadow:inset 0 0 22px #cad2f038}.staff-line{background:#2d344a;width:82%;height:2px;position:absolute;left:12%}.staff-clef{z-index:2;font-size:70px;line-height:1;position:absolute;top:21px;left:15%}.placed-note{z-index:3;font-size:31px;line-height:20px;position:absolute;left:55%}.hear{color:#4857ad;background:#e8ebff;border-radius:13px;margin:10px auto 0;padding:9px 15px;font-size:.9rem;font-weight:900;display:block}.note-card-visual{justify-items:center;display:grid}.note-card-visual img{background:#fff;border:2px solid #e0e4f0;border-radius:13px;width:min(360px,100%);height:auto;display:block;box-shadow:0 4px #e5e8f1}.rhythm-visual{text-align:center}.rhythm-visual b{color:#eb725f;font-size:110px;line-height:1}.meter,.measure-visual{color:#3e8449;background:#eef7eb;border-radius:18px;place-items:center;gap:5px;width:210px;margin:auto;padding:15px;display:grid}.meter b{font-size:3.3rem;line-height:1}.measure-visual{color:#a96e14;background:#fff3e2}.measure-visual b{font-size:2.6rem}.symbol-visual,.compose-visual{color:#d77193;text-align:center;font-size:6rem;line-height:1}.piano-prompt{color:#51499d;background:#e9e7fb;border-radius:20px;place-items:center;gap:5px;margin:auto;padding:18px 30px;font-weight:900;display:grid}.piano-prompt:first-letter{font-size:3rem}.mistake-head h1{color:#5d52af}.practice-all{background:#5d52af;margin:0 auto 22px;display:block;box-shadow:0 4px #413878}.practice-all:hover,.continue:hover{filter:brightness(1.04);transform:translateY(-1px)}.mistake-card{text-align:left;background:#fffffff2;border:2px solid #e3e6f3;border-radius:18px;align-items:center;gap:15px;padding:12px 16px;display:flex;box-shadow:0 3px #e3e6f1}.mistake-card img{object-fit:contain;border:1px solid #e1e5f1;border-radius:8px;width:112px;height:56px}.mistake-card div{flex:1}.mistake-card b,.mistake-card small{display:block}.mistake-card small{margin-top:3px}.mistake-card>span{color:#51499d;background:#f0ecff;border-radius:50%;place-items:center;width:45px;height:45px;font-weight:900;display:grid}.empty-mistakes{text-align:center;background:#ffffffbf;border:2px dashed #cbd2ea;border-radius:22px;padding:40px 24px}.empty-mistakes>div{font-size:65px}.empty-mistakes h2{margin:8px 0}.empty-mistakes p{color:#596078;margin:0}@media (width<=540px){main{padding:18px 12px 40px}.unit-card{padding:13px}.unit-card b{font-size:1.07rem}.unit-card strong{display:none}.unit-emoji{flex-basis:52px;width:52px;font-size:40px}.app-tabs{gap:6px}.app-tabs button{padding:9px 11px;font-size:.85rem}.activity{border-radius:21px;padding:23px 15px}.prompt{font-size:1.35rem}.staff-clef{left:10%}.placed-note{left:58%}.mistake-card{padding:10px}.mistake-card img{width:88px}.practice-all{width:100%}}@keyframes slide-out-left{to{opacity:0;transform:translate(-90px)}}@keyframes slide-out-right{to{opacity:0;transform:translate(90px)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(90px)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-90px)}}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}}@keyframes pop{40%{transform:scale(1.04)}}@keyframes nudge{25%{transform:translate(-5px)}75%{transform:translate(5px)}}.practice,.session-end{view-transition-name:card}html[data-vt-scope=page] .practice,html[data-vt-scope=page] .session-end{view-transition-name:none}::view-transition-old(root){animation-duration:.2s;animation-timing-function:cubic-bezier(.4,0,1,1);animation-fill-mode:both}::view-transition-old(card){animation-duration:.2s;animation-timing-function:cubic-bezier(.4,0,1,1);animation-fill-mode:both}::view-transition-new(root){animation-duration:.3s;animation-timing-function:cubic-bezier(0,0,.2,1);animation-delay:.14s;animation-fill-mode:both}::view-transition-new(card){animation-duration:.3s;animation-timing-function:cubic-bezier(0,0,.2,1);animation-delay:.14s;animation-fill-mode:both}html[data-vt-dir=forward]::view-transition-old(root){animation-name:slide-out-left}html[data-vt-dir=forward]::view-transition-old(card){animation-name:slide-out-left}html[data-vt-dir=forward]::view-transition-new(root){animation-name:slide-in-right}html[data-vt-dir=forward]::view-transition-new(card){animation-name:slide-in-right}html[data-vt-dir=back]::view-transition-old(root){animation-name:slide-out-right}html[data-vt-dir=back]::view-transition-old(card){animation-name:slide-out-right}html[data-vt-dir=back]::view-transition-new(root){animation-name:slide-in-left}html[data-vt-dir=back]::view-transition-new(card){animation-name:slide-in-left}html[data-vt-scope=card]::view-transition-old(root){animation:none}html[data-vt-scope=card]::view-transition-new(root){animation:none}::view-transition-group(card){animation-duration:.44s}@supports not (view-transition-name:none){.screen,.card-stage{animation:.36s cubic-bezier(.33,0,.2,1) both slide-in-right}html[data-nav-dir=back] .screen,html[data-nav-dir=back] .card-stage{animation-name:slide-in-left}}button{-webkit-tap-highlight-color:transparent}.answers button:active:not(:disabled),.start-lesson:active,.continue:active,.practice-all:active,.unit-card:active:not(:disabled),.lesson-card:active:not(:disabled),.app-tabs button:active,.mini-practice:active{transform:scale(.97)}.answers button.right{animation:.35s ease-out pop}.answers button.wrong{animation:.3s ease-in-out nudge}.answers button:disabled{opacity:.55;cursor:default}.feedback,.tip,.hint-button{animation:.3s ease-out both rise-in}.mistake-card{animation:.35s ease-out both rise-in;animation-delay:calc(min(var(--i,0), 8) * 40ms)}.lesson-intro>p{animation:.4s ease-out both rise-in}.lesson-intro>p:nth-of-type(2){animation-delay:80ms}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}::view-transition-group(*){transition:none!important;animation:none!important}::view-transition-old(*){transition:none!important;animation:none!important}::view-transition-new(*){transition:none!important;animation:none!important}}.tab-count{color:#fff;background:#ff8a6b;border-radius:99px;place-items:center;min-width:26px;height:26px;margin-left:7px;padding:0 7px;font-size:.85rem;display:inline-grid}.app-tabs button.active .tab-count{color:#5d52af;background:#fff}.app-tabs button.active{cursor:default}.practice-top{flex-wrap:wrap;align-items:center;gap:8px}.helper-meter{background:#fff6d8;border-radius:99px;align-items:center;gap:6px;padding:4px 10px;font-size:.85rem;display:inline-flex;color:#8a6413!important}.helper-meter i{gap:3px;display:inline-flex}.helper-meter em{background:#ecdcae;border-radius:50%;width:9px;height:9px;transition:background .3s}.helper-meter em.on{background:#e1a23c}.helper-meter.level-0{background:#e0f7e6;color:#207343!important}.tip{border-radius:14px;margin:16px 0 0;padding:12px 15px;line-height:1.4}.tip b{margin-bottom:2px;display:block}.tip-2{color:#6d5210;background:#fff8e3;border:2px solid #f3d27e;font-size:1rem}.tip-1{color:#7a6526;background:#fffcf2;border:2px dashed #e6d6a8;font-size:.9rem}.hint-button{color:#8a6413;background:#fffcf2;border:2px dashed #e6d6a8;border-radius:13px;margin:16px auto 0;padding:8px 15px;font-size:.9rem;font-weight:900;display:block}.feedback-tip{opacity:.9;margin-top:4px;font-size:.9rem}.note-card-visual img{transition:border-color .3s,box-shadow .3s}.note-card-visual img.colored{border:6px solid var(--note-color);box-shadow:0 0 0 4px color-mix(in srgb, var(--note-color) 22%, transparent), 0 4px 0 #e5e8f1}.placed-note.colored{text-shadow:0 0}.answers button.color-coded{border-color:var(--note-color);background:color-mix(in srgb, var(--note-color) 10%, #fff);color:color-mix(in srgb, var(--note-color) 70%, #20243a);border-width:3px;align-items:center;gap:12px;display:flex}.answers button.color-coded:hover{background:color-mix(in srgb, var(--note-color) 18%, #fff);border-color:var(--note-color)}.answers button.color-coded .swatch{background:var(--note-color);border-radius:50%;flex:0 0 22px;width:22px;height:22px;box-shadow:inset 0 -2px #00000026}.answers button.color-coded.right{border-color:#43b36e}.answers button.color-coded.wrong{border-color:#e46464}.color-guide>div{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:7px}.color-note{border:4px solid var(--note-color);background:#fff;border-radius:14px;justify-items:center;gap:2px;padding:6px 4px 8px;transition:transform .15s;display:grid}.color-note:hover{transform:translateY(-2px)}.color-note img{object-fit:contain;width:100%;height:56px}.color-note b{color:#fff;background:var(--note-color);border-radius:50%;place-items:center;width:30px;height:30px;display:grid}.color-note small{color:#5c6687;font-size:.75rem;font-weight:800}.badge{border-radius:99px;margin:6px 6px 0 0;padding:3px 10px;font-size:.78rem;font-weight:900;display:inline-block}.badge.past{color:#8a3b3b;background:#ffe7e7}.badge.similar{color:#285f9e;background:#e2efff}.review-legend{color:#5c6687;margin:8px 0 0;font-size:.88rem}.mini-practice{color:#fff;background:#5d52af;border-radius:12px;padding:9px 13px;font-size:.85rem;font-weight:900;box-shadow:0 3px #413878}.mistake-card .answer-chip{color:#51499d;text-align:center;background:#f0ecff;border-radius:99px;place-items:center;min-width:45px;height:45px;padding:0 8px;font-size:.85rem;font-weight:900;display:grid}.mistake-card>span{width:auto}.helper-end{font-weight:800;color:#6d5210!important}@media (width<=540px){.mistake-card{flex-wrap:wrap}.helper-meter{order:3}}.hidden-meter b{justify-items:center;line-height:.95;display:grid}.hidden-meter b em{font-style:normal}.hidden-meter b em:first-child{border:3px dashed #3e8449;border-radius:12px;place-items:center;width:1.15em;height:1.05em;font-size:.9em;display:grid}.note-missing{background:#fff;border:2px dashed #cbd2ea;border-radius:13px;align-content:center;place-items:center;gap:6px;width:min(360px,100%);min-height:150px;font-size:2.4rem;display:grid}.note-missing small{color:#6b7391;font-size:.85rem;font-weight:800}.note-missing.colored{border:6px solid var(--note-color)}.color-note .note-missing,.mistake-card .note-missing{border-width:1px;width:100%;min-height:56px;font-size:1.2rem}.color-note .note-missing small,.mistake-card .note-missing small{font-size:.6rem}.mistake-card .note-missing{width:112px}@keyframes ball-bounce{0%{animation-timing-function:cubic-bezier(.2,.6,.35,1);transform:translateY(0)scale(1.14,.84)}10%{animation-timing-function:cubic-bezier(.25,.55,.45,1);transform:translateY(-16px)scale(.95,1.06)}50%{animation-timing-function:cubic-bezier(.55,0,.8,.45);transform:translateY(-62px)scale(1)}90%{animation-timing-function:cubic-bezier(.4,0,1,1);transform:translateY(-12px)scale(.96,1.05)}to{transform:translateY(0)scale(1.14,.84)}}@keyframes ball-shadow{0%,to{opacity:.9;transform:scaleX(1)}50%{opacity:.35;transform:scaleX(.45)}}.bounce-ball{transform-origin:50% 100%;animation:ball-bounce var(--beat,1s) infinite;will-change:transform;margin-left:-19px;font-size:38px;line-height:1;transition:none;display:block;position:absolute;bottom:16px;left:50%}.bounce-ball.landed{transform:none}.bounce-stage i{height:8px;animation:ball-shadow var(--beat,1s) infinite;background:#da907e;border-radius:50%;animation-timing-function:ease-in-out;position:absolute;bottom:10px;left:25px;right:25px}.bounce-stage.hit{background:radial-gradient(circle at 50% 90%,#c9f2d4 0,#0000 70%)}.bounce-stage.miss{background:radial-gradient(circle at 50% 90%,#ffe1d6 0,#0000 70%)}@media (prefers-reduced-motion:reduce){.bounce-ball{animation:ball-bounce var(--beat,1s) infinite!important}.bounce-stage i{animation:ball-shadow var(--beat,1s) infinite!important}}.lesson-intro{max-width:680px}.lesson-intro h2{margin-bottom:16px;font-size:clamp(1.9rem,5vw,2.5rem)}.lesson-intro>p{color:#39415f;padding:16px 19px;font-size:clamp(1.18rem,2.6vw,1.38rem);line-height:1.6}.color-guide h3{font-size:1.35rem}.color-guide p{font-size:1.05rem!important}.color-note b{width:34px;height:34px;font-size:1.1rem}.color-note small{font-size:.85rem}.color-note img{height:64px}.bounce-activity b{font-size:1.2rem}.bounce-activity small{font-size:1rem!important}.bounce-activity button{min-height:56px!important;padding:10px 16px!important;font-size:1rem!important}.start-lesson{font-size:1.2rem}.unit-number{color:var(--accent);letter-spacing:.04em;text-transform:uppercase;margin-top:4px;font-weight:900;display:block}.read-aloud-row{justify-content:center;margin:-10px 0 24px;display:flex}.read-aloud-toggle{text-align:left;color:#20243a;background:#fff;border:2px solid #dce1f2;border-radius:18px;align-items:center;gap:14px;width:min(100%,520px);padding:12px 16px;transition:border-color .2s,background .2s;display:flex;box-shadow:0 3px #dce1f2}.read-aloud-toggle:hover{border-color:#9da6d8}.read-aloud-toggle .ra-icon{font-size:30px}.read-aloud-toggle b,.read-aloud-toggle small{display:block}.read-aloud-toggle b{font-size:1.12rem}.read-aloud-toggle small{color:#5f6884;font-size:.9rem}.read-aloud-toggle>span:nth-child(2){flex:1}.ra-switch{background:#d5d9e8;border-radius:99px;flex:0 0 58px;width:58px;height:32px;transition:background .2s;position:relative}.ra-switch i{background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .2s;position:absolute;top:4px;left:4px;box-shadow:0 1px 3px #00000040}.read-aloud-toggle.on{background:#effaf2;border-color:#58b978;box-shadow:0 3px #bfe6cb}.read-aloud-toggle.on .ra-switch{background:#58b978}.read-aloud-toggle.on .ra-switch i{transform:translate(26px)}.read-again{color:#2d7a48;background:#e3f6e9;border-radius:12px;margin:-8px auto 16px;padding:8px 14px;font-size:.92rem;font-weight:900;display:block}.lesson-intro .read-again{margin:0 auto 14px}.unit-card.in-development{border-style:dashed}.unit-card .dev-badge{color:#8a6413;white-space:nowrap;background:#fff3d6;border-radius:99px;padding:5px 10px;font-size:.8rem}@media (width<=540px){.unit-card .dev-badge{display:inline-block}}.intro-visuals{gap:16px;margin-top:18px;display:grid}.vis-card{text-align:center;background:#fff;border:2px solid #e1e6f5;border-radius:20px;padding:16px;box-shadow:0 3px #e6e9f4}.vis-card h3{margin:0 0 12px;font-size:1.3rem}.vis-caption{color:#4d5674;margin:12px 0 0;font-size:1.05rem;font-weight:700}.vis-play{color:#3f4ca8;background:#e8ebff;border-radius:12px;margin-top:8px;padding:8px 14px;font-size:.95rem;font-weight:900}.vis-play:active{transform:scale(.96)}.two-up,.three-up{gap:12px;display:grid}.two-up{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.three-up{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.two-up figure,.three-up figure{margin:0}.row{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.family-row{text-align:left;background:#fafbff;border:2px solid #eef0f8;border-radius:16px;grid-template-columns:70px minmax(110px,1fr) minmax(120px,1.3fr) 26px;align-items:center;gap:10px;width:100%;margin-top:8px;padding:8px 12px;transition:transform .15s,border-color .15s;display:grid}.family-row:hover{border-color:#b8c0ea;transform:translateY(-1px)}.family-row svg{width:70px;height:62px}.family-row b,.family-row small{display:block}.family-row b{font-size:1.1rem}.family-row small{color:#5b637e;font-size:.9rem}.family-row em{font-style:normal}.beat-bar{background:#eef0f8;border-radius:9px;grid-template-columns:repeat(4,1fr);gap:0;height:34px;display:grid;position:relative;overflow:hidden}.beat-bar i{border-right:2px dashed #cfd5ea;transition:background .15s}.beat-bar i:last-of-type{border-right:0}.beat-bar i.now{background:#fff1a8}.beat-bar b{opacity:.9;border-radius:7px;margin-left:3px;position:absolute;top:5px;bottom:5px}@media (width<=540px){.family-row{grid-template-columns:56px 1fr}.family-row .beat-bar{grid-column:1/-1}.family-row em{display:none}}.measure-row{background:0 0;border-radius:14px;gap:4px;width:100%;margin-top:10px;padding:6px;display:grid}.measure-row small{color:#2f7a46;font-size:1rem;font-weight:900}.measure-box{background:#fff;border:3px solid #3a4060;border-radius:12px;grid-template-columns:repeat(4,1fr);height:70px;display:grid;position:relative;overflow:hidden}.measure-box>i{border-right:2px dashed #d3d8ea}.measure-box>i:last-of-type{border-right:0}.measure-box>span{background:var(--c);box-sizing:border-box;border:3px solid #fff;border-radius:10px;place-items:center;margin-left:4px;transition:transform .15s,filter .15s;display:grid;position:absolute;top:6px;bottom:6px}.measure-box>span.now{filter:brightness(1.15);transform:scale(1.04)}.measure-box>span svg{width:auto;height:90%}.measure-box.empty{max-width:380px;margin:0 auto}.measure-box.empty>i{place-items:center;font-style:normal;display:grid}.measure-box.empty b{color:#8a6413;background:#fff3e2;border-radius:50%;place-items:center;width:34px;height:34px;display:grid}.measure-visual-wrap{color:#a96e14;justify-items:center;gap:8px;font-weight:900;display:grid}.measure-visual-wrap .measure-box{width:min(380px,100%)}.mini-staff{width:100%;max-width:280px;height:auto}.staff-letters figcaption b,.staff-letters figcaption small{display:block}.staff-letters figcaption b{font-size:1.1rem}.staff-letters figcaption small{color:#5b637e;font-size:1rem;font-weight:700}.meter-card{border:3px solid var(--c);background:color-mix(in srgb, var(--c) 8%, #fff);border-radius:18px;justify-items:center;gap:6px;padding:12px 8px;display:grid}.meter-card .ts{color:var(--c);font-size:2.6rem;font-weight:900;line-height:.9;display:grid}.meter-card .dots{gap:6px;display:flex}.meter-card .dots i{color:#fff;background:color-mix(in srgb, var(--c) 45%, #fff);border-radius:50%;place-items:center;width:28px;height:28px;font-size:.8rem;font-style:normal;font-weight:900;transition:transform .1s,background .1s;display:grid}.meter-card .dots i.strong{width:36px;height:36px;font-size:1rem}.meter-card .dots i.now{background:var(--c);transform:scale(1.25)}.meter-card .emoji{font-size:2rem}.meter-card small{color:#39415f;font-size:1rem;font-weight:900}.keyboard{width:100%;max-width:300px;height:auto;margin:6px auto;display:block}.keyboard.small{max-width:190px}.acc-card,.key-card,.mood-card{border:3px solid var(--c,#dfe4f2);background:#fff;border-radius:18px;justify-items:center;gap:4px;padding:12px 8px;display:grid}.acc-card b,.key-card b,.mood-card b{font-size:1.1rem}.acc-card small,.key-card small,.mood-card small{color:#4d5674;font-size:.95rem;font-weight:700}.acc-sign{color:var(--c);font-size:3rem;font-weight:900;line-height:1}.key-name{color:var(--c)}.key-badge{color:#fff;background:var(--c);border-radius:99px;padding:3px 10px;font-size:.9rem;font-weight:900}.step-down{align-items:center;gap:6px;font-weight:900;display:flex}.step-down em{background:#eef0f8;border-radius:10px;place-items:center;min-width:32px;height:32px;padding:0 4px;font-style:normal;display:grid}.step-down em.end{color:#fff;background:#6573d6}.step-down i{color:#8a93b5;font-style:normal}.minor-name{color:#4b55b0}.mood-card.major{--c:#e8962e;background:#fff8ec}.mood-card.minor{--c:#6573d6;background:#f1f2ff}.big-emoji{font-size:2.6rem}.friend-visual{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;font-size:1.5rem;font-weight:900;display:flex}.friend-visual span{background:#f1f2ff;border-radius:16px;padding:10px 16px}.friend-visual i{color:#8a93b5;font-style:normal}.art-row{text-align:left;background:#fafbff;border:2px solid #eef0f8;border-radius:16px;grid-template-columns:80px 1fr 1.2fr 26px;align-items:center;gap:10px;width:100%;margin-top:8px;padding:6px 12px;transition:transform .15s,border-color .15s;display:grid}.art-row:hover{border-color:#b8c0ea;transform:translateY(-1px)}.art-row b,.art-row small{display:block}.art-row b{font-size:1.15rem}.art-row small{color:#5b637e;font-size:.92rem}.art-means{color:#39415f;align-items:center;gap:8px;font-weight:900;display:flex}.art-means em{font-size:1.6rem;font-style:normal}.art-row i{font-style:normal}.art-note{width:78px;height:78px}.art-sign{place-items:center;display:grid}.art-sign .art-note{width:150px;height:150px}@media (width<=540px){.art-row{grid-template-columns:64px 1fr}.art-row .art-means{grid-column:1/-1}.art-row i{display:none}}.staircase{text-align:center;margin:0}.staircase svg{width:100%;max-width:420px;height:auto;margin:0 auto;display:block}.staircase.small svg{max-width:260px}.staircase figcaption{margin-bottom:4px;font-size:1.1rem}.staircase rect{transition:opacity .15s}.skip-row{justify-content:center;gap:8px;margin-bottom:12px;display:flex}.skip-row span{border-radius:50%;place-items:center;width:50px;height:50px;font-size:1.3rem;font-weight:900;display:grid}.skip-row span.keep{color:#fff;background:var(--c);box-shadow:0 3px #00000026}.skip-row span.skip{color:#a5abc4;background:#f1f2f8;font-size:1rem;line-height:1}.skip-row span.skip small{font-size:.62rem}.snowman{justify-items:center;gap:4px;display:grid}.snowman span{color:#fff;background:var(--c);border-radius:50%;place-items:center;width:92px;height:66px;transition:transform .15s;display:grid}.snowman span:nth-child(2){width:104px}.snowman span:nth-child(3){width:116px}.snowman span.now{transform:scale(1.1)}.snowman b{font-size:1.4rem;line-height:1}.snowman small{font-size:.8rem;font-weight:900}.story-path{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.story-path span{border:3px solid var(--c);background:color-mix(in srgb, var(--c) 10%, #fff);border-radius:18px;justify-items:center;min-width:82px;padding:10px;transition:transform .15s;display:grid}.story-path span.now{background:color-mix(in srgb, var(--c) 30%, #fff);transform:scale(1.12)}.story-path em{font-size:1.8rem;font-style:normal}.story-path b{color:var(--c);font-size:1.5rem}.story-path small{font-weight:900}.story-path>i{color:#8a93b5;font-size:1.4rem;font-style:normal}.num-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.num-row button{background:#fff;border:3px solid #e3e7f4;border-radius:16px;justify-items:center;gap:2px;min-width:64px;padding:10px 8px;display:grid}.num-row button b{color:#fff;background:var(--c);border-radius:50%;place-items:center;width:40px;height:40px;font-size:1.2rem;display:grid}.num-row button span{color:#5b637e;font-size:1.3rem;font-weight:900}.num-row button.star{border-color:var(--c);background:color-mix(in srgb, var(--c) 10%, #fff)}.num-row button.star span{color:#20243a}.num-row em{font-style:normal}.plan-grid{grid-template-columns:repeat(4,1fr);gap:6px;max-width:360px;margin:0 auto;display:grid}.plan-grid i{color:#fff;background:var(--c);border-radius:10px;place-items:center;height:40px;font-style:normal;font-weight:900;display:grid}.vis-rhythm{width:auto;height:110px}.bounce-activity .stars{gap:4px;margin-top:6px;font-size:1.6rem;line-height:1;display:flex}.bounce-activity .stars i{color:#e3d9c4;font-style:normal;transition:color .2s,transform .2s}.bounce-activity .stars i.on{color:#f2b330;transform:scale(1.15)}.activity-card .bounce-activity{margin:10px 0}.activity-help{text-align:center;color:#5b637e;font-weight:800}.activity-card .bounce-activity{text-align:center;grid-template-columns:1fr;justify-items:center;gap:10px;padding:18px}.activity-card .bounce-stage{cursor:pointer;width:160px;height:150px}.activity-card .bounce-ball{margin-left:-26px;font-size:52px}.activity-card .bounce-activity .stars{justify-content:center;font-size:2.2rem}.bounce-activity .tap-pad{letter-spacing:.04em;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:linear-gradient(#ff8f6b,#ef6a4c);border:4px dashed #e58a6f;border-radius:26px;width:100%;font-weight:900;transition:transform 80ms,box-shadow 80ms;box-shadow:0 6px #c24e33;color:#fff!important;min-height:150px!important;padding:18px!important;font-size:2.1rem!important}.bounce-activity .tap-pad span{font-size:2.6rem;line-height:1.1;display:block}.bounce-activity .tap-pad:active{transform:translateY(5px);box-shadow:0 1px #c24e33}.bounce-stage.hit+div .stars i.on:last-child{transform:scale(1.3)}.beat-sum{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.beat-chip{color:#fff;background:var(--c);border-radius:16px;justify-items:center;gap:2px;min-width:76px;padding:8px 10px;display:grid;box-shadow:0 3px #00000026}.beat-chip svg{width:44px;height:46px}.beat-chip b{font-size:1.5rem;line-height:1}.beat-chip small{gap:3px;display:flex}.beat-chip small i{background:#fff;border-radius:50%;width:9px;height:9px}.beat-sum .op{color:#5b637e;font-size:1.8rem;font-weight:900}.beat-total{color:#207343;background:#e0f7e6;border-radius:50%;place-items:center;min-width:56px;height:56px;font-size:1.7rem;font-weight:900;display:grid}.beat-total.ask{color:#8a6413;background:#fff3d6;border:3px dashed #e1a23c}.value-row{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.sum-list{gap:10px;display:grid}.metro-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.beat-lights{gap:6px;display:flex}.beat-lights i{color:#a5674f;background:#ffe3d8;border-radius:50%;place-items:center;width:34px;height:34px;font-style:normal;font-weight:900;transition:transform 80ms,background 80ms;display:grid}.beat-lights i:first-child{border:2px solid #ef8a6c}.beat-lights i.now{color:#fff;background:#ef6a4c;transform:scale(1.2)}.metro-toggle{color:#6b4b40;background:#f3e6e0;border-radius:12px;padding:8px 12px;font-size:.9rem;font-weight:900}.metro-toggle.on{color:#2d7a48;background:#e3f6e9}.count-in{color:#4d5674;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-height:52px;margin-bottom:4px;font-size:1.05rem;font-weight:800;display:flex}.count-in i{color:#6573d6;background:#eceefe;border-radius:50%;place-items:center;width:42px;height:42px;font-size:1.3rem;font-style:normal;font-weight:900;transition:transform .1s,background .1s;display:grid}.count-in i.done{color:#fff;background:#aab2ec}.count-in i.now{color:#fff;background:#6573d6;transform:scale(1.25)}