@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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;--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,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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;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:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.static{position:static}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}}:root{color:#20285c;font-synthesis:none;background:#f6f7ff;font-family:ui-rounded,Avenir Next Rounded,Nunito,Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.6}button:focus-visible{outline-offset:3px;outline:4px solid #ffb940}.app-shell{background:radial-gradient(circle at 100% 0,#e7e4ff 0,#0000 25rem),#f6f7ff;min-height:100dvh}.topbar{color:#fff;background:#202960;justify-content:space-between;align-items:center;height:84px;padding:0 clamp(20px,4vw,64px);display:flex}.brand{color:#fff;letter-spacing:-.06em;background:0 0;border:0;align-items:center;gap:12px;padding:0;font-size:clamp(22px,2.2vw,29px);font-weight:900;display:flex}.brand-mark{color:#202960;background:#ffcf56;border-radius:14px;place-items:center;width:42px;height:42px;font-size:28px;display:grid;transform:rotate(-8deg)}.top-actions{align-items:center;gap:12px;display:flex}.mic-indicator{color:#f1efff;background:#374077;border-radius:50px;padding:9px 14px;font-size:14px;font-weight:800}.mic-on{color:#c7fff4;background:#315d59}.icon-button{color:#fff;background:#3b457c;border:0;border-radius:14px;width:40px;height:40px;font-size:24px;line-height:1}.welcome-screen{grid-template-columns:1.05fr 1fr;align-items:center;gap:6vw;max-width:1420px;min-height:calc(100dvh - 84px);margin:auto;padding:40px clamp(28px,6vw,84px) 70px;display:grid}.welcome-art{background:#bca8ff;border-radius:48% 52% 42% 58%/49% 45% 55% 51%;height:min(54vw,550px);min-height:380px;position:relative;transform:rotate(-5deg);box-shadow:inset -30px -32px #a690ed,0 30px 70px #8d80d348}.welcome-art>span{color:#fff;font-size:60px;position:absolute}.welcome-art>span:first-child{top:10%;left:17%;transform:rotate(-25deg)}.welcome-art>span:nth-child(2){color:#ffcf56;top:10%;right:15%}.welcome-art>span:nth-child(3){bottom:24%;right:8%;transform:rotate(20deg)}.mini-keys{background:#202960;border-radius:22px;width:78%;height:38%;padding:6px;display:flex;position:absolute;top:32%;left:11%;transform:rotate(7deg);box-shadow:0 22px #1a2353,0 35px 20px #6355af66}.mini-keys i{background:#fff8e4;border-right:3px solid #202960;border-radius:0 0 12px 12px;flex:1;position:relative}.mini-keys i:last-child{border-right:0}.mini-keys i:first-child:after,.mini-keys i:nth-child(2):after,.mini-keys i:nth-child(4):after,.mini-keys i:nth-child(5):after,.mini-keys i:nth-child(6):after{content:"";z-index:1;background:#202960;border-radius:0 0 8px 8px;width:44%;height:57%;position:absolute;top:0;right:-22%}.welcome-copy{max-width:550px}.welcome-copy h1{letter-spacing:-.075em;margin:0 0 28px;font-size:clamp(52px,6vw,88px);font-weight:1000;line-height:.99}.welcome-copy>p:not(.tiny-note){color:#555e87;margin:0 0 36px;font-size:clamp(18px,2vw,25px);line-height:1.45}.primary-button,.secondary-button{border:0;border-radius:20px;padding:17px 28px;font-size:20px;font-weight:900;transition:transform .15s,box-shadow .15s;box-shadow:0 7px #d78248}.primary-button{color:#202960;background:#ff9b72}.primary-button:active,.secondary-button:active{transform:translateY(5px);box-shadow:0 2px #d78248}.start-button{padding:20px 36px;font-size:26px}.start-button span{margin-right:10px;font-size:22px}.tiny-note{color:#7880a1;max-width:390px;margin-top:28px;font-size:14px;line-height:1.4}.library-screen,.lesson-screen,.about-screen{max-width:1310px;margin:0 auto;padding:40px clamp(18px,4vw,64px) 80px}.library-heading{justify-content:space-between;align-items:center;gap:20px;margin-bottom:42px;display:flex}.hello-badge{color:#6a55c7;background:#e9e5ff;border-radius:100px;margin-bottom:18px;padding:9px 15px;font-size:14px;font-weight:900;display:inline-block}.library-heading h1,.about-screen h1{letter-spacing:-.065em;margin:0 0 12px;font-size:clamp(42px,5vw,68px);font-weight:1000;line-height:1.05}.library-heading p{color:#667096;margin:0;font-size:20px}.library-doodle{filter:drop-shadow(0 14px #e0def2);font-size:100px;position:relative;transform:rotate(-12deg)}.library-doodle span{color:#ffba40;font-size:40px;position:absolute;top:-20px;right:-22px}.tier-section{margin-bottom:44px}.tier-heading{align-items:center;gap:16px;margin-bottom:17px;display:flex}.tier-heading h2{letter-spacing:-.04em;margin:0;font-size:28px}.tier-heading p{color:#777f9f;margin:0;font-size:15px}.tier-medal{background:#d6f4dc;border-radius:18px;place-items:center;width:55px;height:55px;font-size:30px;display:grid}.tier-1{background:#fff0be}.tier-2{background:#e8ddff}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.song-card{text-align:left;background:#fff;border:2px solid #e6e8f4;border-radius:22px;align-items:center;gap:18px;width:100%;min-height:100px;padding:15px 20px;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;box-shadow:0 7px #e6e8f4}.song-card:hover{border-color:var(--song-color);transform:translateY(-3px);box-shadow:0 10px #e6e8f4}.song-card:active{transform:translateY(5px);box-shadow:0 2px #e6e8f4}.song-emoji{background:var(--song-color);border-radius:20px;flex:none;place-items:center;width:65px;height:65px;font-size:35px;display:grid}.song-info{flex:1;min-width:0}.song-info strong{font-size:19px;line-height:1.2;display:block}.song-info small{color:#838aaa;font-size:13px;font-weight:800}.song-status{color:#6c5ccb;letter-spacing:-2px;white-space:nowrap;font-size:22px}.lesson-screen{max-width:1420px;padding-top:27px}.lesson-heading{align-items:center;gap:18px;display:flex}.back-button{color:#252d64;background:#fff;border:2px solid #e7e9f6;border-radius:16px;min-width:50px;height:50px;font-size:26px;font-weight:900}.lesson-name{flex:1;align-items:center;gap:12px;display:flex}.lesson-name>span{font-size:37px}.lesson-name p{color:#777ea1;margin:0;font-size:13px;font-weight:900}.lesson-name h1{letter-spacing:-.05em;margin:0;font-size:clamp(22px,3vw,37px);line-height:1}.stars{white-space:nowrap;letter-spacing:1px;font-size:30px}.star-on{color:#ffc94d;text-shadow:0 3px #e9a73a}.star-off{color:#cdd2e8}.progress-track{background:#e4e8f5;border-radius:100px;height:16px;margin-top:25px;overflow:hidden}.progress-track>div{background:linear-gradient(90deg,#79dcca,#4ac4ac);border-radius:100px;height:100%;transition:width .35s}.lesson-count{text-align:right;color:#737b9d;margin:6px 0 15px;font-size:14px;font-weight:800}.play-zone{background:#fff;border:2px solid #e7e8f6;border-radius:31px;padding:22px 20px 18px;overflow:hidden;box-shadow:0 10px #e7e8f6}.play-zone.success-flash{animation:.55s ease-out happy}.target-line{justify-content:center;align-items:center;display:flex;position:relative}.target-label{color:#737a9e;text-align:center;margin-bottom:6px;font-size:16px;font-weight:900;display:block}.target-note{border-radius:27px;place-items:center;width:86px;height:86px;margin:auto;font-size:44px;font-weight:1000;display:grid;box-shadow:0 8px #20296022}.feedback-face{font-size:65px;animation:.3s ease-out pop;position:absolute;top:5px;right:16%}.feedback-text{text-align:center;min-height:34px;margin:20px 0 18px;font-size:clamp(18px,2.4vw,25px);font-weight:900}.keyboard-scroll{scrollbar-color:#aeb3d4 transparent;width:100%;padding:3px 3px 12px;overflow-x:auto}.keyboard{background:#252d64;border-radius:20px;min-width:750px;max-width:1120px;height:clamp(220px,29vw,335px);margin:auto;padding:7px 7px 12px;display:flex;box-shadow:0 9px #171d49}.white-wrap{flex:1;min-width:0;position:relative}.white-key{color:#9399b0;background:#fff9eb;border:2px solid #252d64;border-radius:0 0 13px 13px;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;width:100%;height:100%;padding:0 0 15px;font-size:17px;font-weight:900;display:flex;position:relative}.white-key.target-key{background:var(--key-color);color:#202960;animation:1.4s ease-in-out infinite keyPulse}.key-dot{background:#202960;border-radius:50%;width:15px;height:15px;display:none}.target-key .key-dot{display:block}.black-key{z-index:2;color:#fff;background:#293161;border:3px solid #252d64;border-radius:0 0 10px 10px;justify-content:center;align-items:flex-end;width:58%;height:58%;padding-bottom:12px;font-size:14px;font-weight:900;display:flex;position:absolute;top:0;right:-29%;box-shadow:0 7px #171d49}.black-key.target-key{background:var(--key-color);color:#202960;animation:1.4s ease-in-out infinite keyPulse}.white-key:active,.black-key:active{filter:brightness(.9);transform:translateY(3px)}.keyboard-caption{color:#7b82a2;justify-content:center;gap:40px;margin-top:12px;font-size:13px;font-weight:800;display:flex}.lesson-controls{justify-content:center;gap:15px;margin-top:30px;display:flex}.control-button{color:#202960;background:#fff;border:2px solid #e2e5f3;border-radius:18px;justify-content:center;align-items:center;gap:9px;padding:14px 23px;font-size:17px;display:flex;box-shadow:0 6px #e2e5f3}.control-button span{font-size:23px}.control-button.selected{background:#fff0c5;border-color:#ffd976;box-shadow:0 6px #f5cf69}.control-button:active{transform:translateY(4px);box-shadow:0 2px #e2e5f3}.complete-screen{text-align:center;max-width:700px;margin:0 auto;padding:55px 25px}.complete-burst{color:#ffbf41;font-size:50px;animation:.6s pop}.complete-emoji{margin:4px;font-size:110px}.complete-screen h1{letter-spacing:-.07em;margin:0 0 10px;font-size:clamp(54px,8vw,90px);line-height:1}.complete-screen p{color:#6e7698;margin:0 0 15px;font-size:25px;font-weight:800}.stars-big{margin:15px 0 45px;font-size:72px;display:block}.complete-actions{flex-wrap:wrap;justify-content:center;gap:18px;display:flex}.secondary-button{color:#262e64;background:#fff;box-shadow:0 7px #dee1f0}.about-screen{max-width:800px}.about-screen>.back-button{margin-bottom:30px;padding:0 16px;font-size:18px}.about-screen>p{color:#636d91;font-size:20px;line-height:1.5}.about-card{background:#fff;border:2px solid #e5e7f4;border-radius:20px;gap:18px;margin:18px 0;padding:20px;display:flex}.about-card>span{font-size:32px}.about-card strong{font-size:20px}.about-card p{color:#6c7498;margin:5px 0 0;line-height:1.4}.version{color:#8e95af;margin-top:35px;font-size:14px;font-weight:800}@keyframes keyPulse{50%{filter:brightness(1.1);box-shadow:inset 0 0 0 5px #fff8}}@keyframes pop{0%{opacity:0;transform:scale(.6)rotate(-15deg)}70%{transform:scale(1.2)rotate(6deg)}to{opacity:1;transform:scale(1)}}@keyframes happy{40%{background:#ecfff8;box-shadow:0 10px #9ce6d1}}@media(max-width:800px){.welcome-screen{text-align:center;grid-template-columns:1fr;gap:40px;padding-top:32px}.welcome-art{width:min(78vw,430px);height:300px;min-height:0;margin:auto}.welcome-copy{margin:auto}.tiny-note{margin-left:auto;margin-right:auto}.song-grid{grid-template-columns:1fr}.library-doodle{display:none}.feedback-face{right:7%}.keyboard{margin-left:0}.lesson-controls{gap:8px}.control-button{padding:12px 13px;font-size:14px}.keyboard-caption{flex-wrap:wrap;gap:12px}}@media(max-width:500px){.topbar{height:70px;padding:0 14px}.brand{gap:7px;font-size:19px}.brand-mark{width:35px;height:35px;font-size:23px}.mic-indicator{padding:8px;font-size:0}.mic-indicator:first-letter{font-size:18px}.library-screen,.lesson-screen,.about-screen{padding-left:15px;padding-right:15px}.library-heading{margin-bottom:28px}.library-heading h1{font-size:42px}.lesson-heading{gap:8px}.lesson-name>span{font-size:27px}.lesson-name h1{font-size:21px}.lesson-heading .stars{font-size:19px}.play-zone{padding:16px 8px}.target-note{width:70px;height:70px;font-size:36px}.feedback-face{font-size:42px;right:3%}.keyboard-caption{font-size:11px}.control-button{flex-direction:column;flex:1;gap:2px;padding:10px 2px}.welcome-art{height:255px}}@media(prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}@media(max-height:900px){.lesson-screen{padding-top:18px;padding-bottom:28px}.lesson-heading .back-button{min-width:45px;height:45px}.lesson-name>span{font-size:30px}.progress-track{height:13px;margin-top:14px}.lesson-count{margin:4px 0 8px}.play-zone{padding-top:13px;padding-bottom:12px}.target-label{margin-bottom:4px}.target-note{border-radius:20px;width:65px;height:65px;font-size:35px}.feedback-face{font-size:50px}.feedback-text{margin:11px 0}.keyboard{height:clamp(190px,28vh,250px)}.lesson-controls{margin-top:20px}}.repeat-guide{color:#5b57a0;justify-content:center;align-items:center;gap:10px;margin:-6px 0 10px;font-weight:900;display:flex}.repeat-guide strong{color:#202960;font-size:26px;line-height:1}.repeat-dots{gap:5px;display:flex}.repeat-dots i{background:#d6d4ef;border-radius:50%;width:11px;height:11px}.repeat-dots i.done{background:#72dacb}.repeat-dots i.now{background:#ffcf56;box-shadow:0 0 0 3px #fff0bd}.lesson-controls{flex-wrap:wrap}@media(max-width:500px){.lesson-controls{grid-template-columns:1fr 1fr;display:grid}.control-button{min-height:70px}.repeat-guide{font-size:14px}}.staff-view{background:#f7f5ff;border:2px solid #e9e3ff;border-radius:18px;max-width:720px;margin:0 auto 16px;padding:8px 16px 3px}.staff-heading{color:#33316a;justify-content:space-between;align-items:baseline;gap:12px;padding:0 4px;display:flex}.staff-heading strong{font-size:15px}.staff-heading span{color:#73799c;font-size:12px;font-weight:800}.staff-view svg{width:100%;max-height:165px;display:block}.staff-line{stroke:#8e91b3;stroke-width:1.4px}.staff-clef{fill:#33316a;font-family:Apple Symbols,Noto Music,Segoe UI Symbol,serif;font-size:64px}.staff-current-bg{fill:#e9dcff;fill-opacity:.55}.staff-ledger{stroke:#555b89;stroke-width:2px}.staff-notehead{fill:#30396f}.staff-current .staff-notehead{fill:#f39467}.staff-played .staff-notehead{fill:#8acfc5}.staff-note-name{fill:#596184;font-family:ui-rounded,system-ui,sans-serif;font-size:15px;font-weight:900}.staff-current .staff-note-name{fill:#252d64}.staff-accidental{fill:#30396f;font-family:serif;font-size:21px}@media(max-width:500px){.staff-view{padding:7px 4px 0}.staff-heading{padding:0 8px}.staff-heading span{font-size:10px}}.staff-stem,.staff-flag{fill:none;stroke:#30396f;stroke-width:2.2px;stroke-linecap:round}.staff-current .staff-stem,.staff-current .staff-flag{stroke:#d9774d}.staff-played .staff-stem,.staff-played .staff-flag{stroke:#65aea4}.staff-notehead{stroke:#30396f;stroke-width:2px}.staff-current .staff-notehead{stroke:#d9774d}.staff-played .staff-notehead{stroke:#65aea4}.staff-notehead.staff-open{fill:#f7f5ff}.staff-dot{fill:#30396f}.staff-current .staff-dot{fill:#d9774d}.staff-played .staff-dot{fill:#65aea4}.staff-note-beats{fill:#747a9b;font-family:ui-rounded,system-ui,sans-serif;font-size:12px;font-weight:900}.staff-current .staff-note-beats{fill:#252d64}.rhythm-guide{background:#f5faff;border:2px solid #e3edf9;border-radius:17px;justify-content:center;align-items:center;gap:13px;max-width:720px;margin:-5px auto 15px;padding:9px 13px;display:flex}.rhythm-copy{flex-direction:column;min-width:112px;line-height:1.15;display:flex}.rhythm-copy span{color:#69789f;font-size:12px;font-weight:900}.rhythm-copy strong{color:#252d64;font-size:19px}.rhythm-track{background:#e2f4f0;border:2px solid #8acfc5;border-radius:100px;flex:none;height:25px;position:relative;overflow:hidden}.rhythm-fill{transform-origin:0;background:linear-gradient(90deg,#72dacb,#48c3ad);width:100%;height:100%}.rhythm-fill.rhythm-playing{animation:linear forwards rhythmSweep}.rhythm-tick{pointer-events:none;background:#fff;width:2px;position:absolute;top:0;bottom:0;box-shadow:0 0 0 1px #5baea5}.hear-part-button{color:#4a3b9b;white-space:nowrap;background:#e9e5ff;border:0;border-radius:11px;padding:9px 12px;font-size:13px;font-weight:900}.hear-part-button:hover{background:#ddd5ff}@keyframes rhythmSweep{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media(max-width:600px){.rhythm-guide{grid-template-columns:1fr auto;gap:8px 10px;padding:8px 10px;display:grid}.rhythm-copy{min-width:0}.rhythm-copy strong{font-size:16px}.rhythm-track{justify-self:end}.hear-part-button{grid-column:1/-1;justify-self:stretch}}.about-card>div{flex:1;min-width:0}.mic-recorder>p{margin:8px 0 12px}.recorder-actions{flex-wrap:wrap;gap:10px;margin:12px 0;display:flex}.record-button{color:#352b79;background:#e9e5ff;border:0;border-radius:13px;padding:11px 15px;font-size:15px;font-weight:900;text-decoration:none;display:inline-block}.record-button.recording{color:#8c3029;background:#ffdbd5}.save-button{color:#1e665a;background:#e2f4f0}.recorded-clip{margin-top:12px}.recorded-clip audio{width:min(100%,430px);display:block}.mic-recorder .recorder-error{color:#a63738;font-weight:800}.sample-credit{font-size:14px!important}.sample-credit a{color:#4a3b9b}@media(max-width:500px){.about-card{gap:10px;padding:16px}.record-button{text-align:center;width:100%}}.rhythm-guide{flex-wrap:wrap}.rhythm-fill{transform:scaleX(0)}.rhythm-fill.rhythm-playing{animation-fill-mode:forwards}.rhythm-tip{text-align:center;color:#6b7697;flex-basis:100%;font-size:12px;font-weight:800}.skip-preview-button{background:#e2f4f0;border-color:#b9e6dd;box-shadow:0 6px #b9e6dd}@media(max-width:600px){.rhythm-tip{grid-column:1/-1}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}