:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Hiragino Maru Gothic ProN,"Rounded Mplus 1c",system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{color:#3a2f22;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;background:#fff7e8;margin:0;padding:0}body{flex-direction:column;min-height:100dvh;display:flex}#root{flex-direction:column;flex:1;display:flex}button{-webkit-user-select:none;user-select:none}.app{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.app__header{box-sizing:border-box;width:100%;padding-top:env(safe-area-inset-top,0px);background:#ff6b6b;flex:none}.app__header-inner{box-sizing:border-box;justify-content:space-between;align-items:center;gap:8px;width:100%;max-width:480px;margin:0 auto;padding:10px 16px;display:flex}.app__body{box-sizing:border-box;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:0;padding:10px 16px;display:flex}.settings-toggle{color:#ff6b6b;cursor:pointer;background:#fff;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;width:34px;height:34px;font-family:inherit;font-size:17px;display:flex;box-shadow:0 2px #00000026}.settings-toggle:active{transform:translateY(1px);box-shadow:0 1px #00000026}.settings-overlay{box-sizing:border-box;z-index:10;background:#3a2f2273;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.settings-panel{background:#fff7e8;border-radius:20px;flex-direction:column;gap:16px;width:100%;max-width:340px;padding:20px;animation:.2s ease-out settings-pop;display:flex;box-shadow:0 10px #0000001a}@keyframes settings-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.settings-panel__header{justify-content:space-between;align-items:center;display:flex}.settings-panel__title{color:#ff6b6b;margin:0;font-size:18px;font-weight:800}.settings-panel__close,.settings-panel__back{color:#fff;cursor:pointer;background:#b6a992;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;width:30px;height:30px;font-family:inherit;font-size:14px;display:flex}.settings-panel__spacer{flex:none;width:30px;height:30px;display:block}.menu-list{flex-direction:column;gap:10px;display:flex}.menu-list__item{color:#7a6a56;text-align:left;cursor:pointer;background:#fff;border:none;border-radius:14px;padding:14px 16px;font-family:inherit;font-size:16px;font-weight:700;box-shadow:0 2px #00000014}.menu-list__item:active{transform:translateY(1px)}.play-mode-toggle{color:#fff;cursor:pointer;background:#4ecdc4;border:none;border-radius:999px;flex:none;padding:6px 16px;font-family:inherit;font-size:13px;font-weight:700;box-shadow:0 2px #33a29a}.play-mode-toggle:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px #33a29a}.play-mode-toggle:disabled{color:#b6a992;cursor:default;background:#e6ddce;box-shadow:0 2px #cfc4ae}.toggle-row{justify-content:center;gap:10px;display:flex}.input-mode-toggle{color:#fff;cursor:pointer;background:#ffb347;border:none;border-radius:999px;align-self:center;padding:6px 18px;font-family:inherit;font-size:13px;font-weight:700;box-shadow:0 2px #d98f2e}.input-mode-toggle:active{transform:translateY(1px);box-shadow:0 1px #d98f2e}.input-mode-toggle--off{background:#b6a992;box-shadow:0 2px #93876f}.input-mode-toggle--off:active{box-shadow:0 1px #93876f}.app__header-left{align-items:center;gap:8px;min-width:0;display:flex}.app__title{color:#fff;letter-spacing:.02em;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:20px;font-weight:800;overflow:hidden}.app__main{flex-direction:column;gap:10px;width:100%;max-width:480px;margin-top:4px;display:flex}.tap-section{flex-direction:column;align-items:center;gap:6px;display:flex}.tap-circle-wrap{position:relative}.sparkle-burst{pointer-events:none;position:absolute;inset:0}.sparkle-burst__spark{opacity:0;width:14px;height:14px;animation:.7s ease-out both sparkle-pop;animation-delay:var(--delay);border-radius:50%;margin:-7px 0 0 -7px;position:absolute;top:50%;left:50%}.sparkle-burst__spark:nth-child(3n+1){background:#fff7e8;box-shadow:0 0 10px 3px #fff7e8e6}.sparkle-burst__spark:nth-child(3n+2){background:#ffd76b;box-shadow:0 0 10px 3px #ffd76be6}.sparkle-burst__spark:nth-child(3n+3){background:#7fe8de;box-shadow:0 0 10px 3px #7fe8dee6}.sparkle-burst__ring{opacity:0;border:3px solid #ffe9a8;border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;animation:.6s ease-out both sparkle-ring;position:absolute;inset:50%}@keyframes sparkle-ring{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(3.2)}}@keyframes sparkle-pop{0%{opacity:0;transform:rotate(var(--angle)) translateY(-40px) scale(.4)}35%{opacity:1;transform:rotate(var(--angle)) translateY(-88px) scale(1.2)}to{opacity:0;transform:rotate(var(--angle)) translateY(-108px) scale(.5)}}@media (width<=420px){@keyframes sparkle-pop{0%{opacity:0;transform:rotate(var(--angle)) translateY(-30px) scale(.4)}35%{opacity:1;transform:rotate(var(--angle)) translateY(-68px) scale(1.15)}to{opacity:0;transform:rotate(var(--angle)) translateY(-84px) scale(.5)}}}.tap-button{cursor:pointer;background:#ff6b6b;border:none;border-radius:50%;justify-content:center;align-items:center;width:200px;height:200px;font-family:inherit;display:flex;position:relative;overflow:hidden;box-shadow:0 8px #d94f4f}.tap-button__label{z-index:1;letter-spacing:.05em;color:#fff;font-size:40px;font-weight:800;position:relative}.tap-button:active:not(:disabled){transform:translateY(6px);box-shadow:0 2px #d94f4f}.tap-button:disabled{cursor:default;background:#e6ddce;box-shadow:0 8px #cfc4ae}.tap-button:disabled .tap-button__label{color:#cbbfa9}.tap-button__flash{border-radius:50%;animation:.4s ease-out forwards tap-flash;position:absolute;inset:0}.tap-button__flash--perfect{background:#4ecdc4d9}.tap-button__flash--good{background:#ffb347d9}.tap-button__flash--miss{background:#9aa0b4d9}@keyframes tap-flash{0%{opacity:1}to{opacity:0}}.tap-feedback{min-height:18px}.tap-feedback__text{font-size:22px;font-weight:800;animation:.4s ease-out tap-feedback-pop;display:inline-block}.tap-feedback__text--perfect{color:#33a29a}.tap-feedback__text--good{color:#d98f2e}.tap-feedback__text--miss{color:#6b6f85}@keyframes tap-feedback-pop{0%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.tap-tally{color:#7a6a56;gap:16px;font-size:13px;display:flex}.tap-tally__item{align-items:center;gap:6px;display:flex}.tap-tally__dot{border-radius:50%;width:10px;height:10px}.tap-tally__item--perfect .tap-tally__dot{background:#4ecdc4}.tap-tally__item--good .tap-tally__dot{background:#ffb347}.tap-tally__item--miss .tap-tally__dot{background:#9aa0b4}@media (width<=420px){.tap-button{width:112px;height:112px}.tap-button__label{font-size:22px}}.clap-indicator{box-sizing:border-box;background:#b9c4d0;border-radius:50%;justify-content:center;align-items:center;width:200px;height:200px;padding:0 20px;display:flex;position:relative;overflow:hidden;box-shadow:0 8px #97a3b3}.clap-indicator__label{z-index:1;color:#fff;text-align:center;white-space:pre-line;font-size:17px;font-weight:700;line-height:1.4;position:relative}.clap-indicator--listening{background:#4ecdc4;animation:1.4s ease-in-out infinite clap-listen-pulse}@keyframes clap-listen-pulse{0%,to{box-shadow:0 8px #33a29a,0 0 #4ecdc480}50%{box-shadow:0 8px #33a29a,0 0 0 14px #4ecdc400}}.clap-indicator__flash{border-radius:50%;animation:.4s ease-out forwards tap-flash;position:absolute;inset:0}.clap-indicator__flash--perfect{background:#4ecdc4d9}.clap-indicator__flash--good{background:#ffb347d9}.clap-indicator__flash--miss{background:#9aa0b4d9}@media (width<=420px){.clap-indicator{width:112px;height:112px}.clap-indicator__label{font-size:12px}}.countdown{color:#fff;background:#ffb347;border-radius:50%;justify-content:center;align-items:center;width:200px;height:200px;font-size:90px;font-weight:800;animation:.5s ease-out countdown-pop;display:flex;box-shadow:0 8px #d98f2e}.countdown--ready{text-align:center;box-sizing:border-box;background:#4ecdc4;padding:0 12px;font-size:32px;box-shadow:0 8px #33a29a}@keyframes countdown-pop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@media (width<=420px){.countdown{width:112px;height:112px;font-size:48px}.countdown--ready{font-size:22px}}.timed-result{flex-direction:column;align-items:center;gap:12px;padding:12px 0;display:flex}.timed-result__label{color:#7a6a56;margin:0;font-size:16px;font-weight:700}.timed-result__score{color:#ff6b6b;margin:0;font-size:64px;font-weight:800;line-height:1}.timed-result__score span{margin-left:4px;font-size:26px;font-weight:700}.timed-result__retry{color:#fff;cursor:pointer;background:#4ecdc4;border:none;border-radius:999px;margin-top:4px;padding:10px 28px;font-family:inherit;font-size:16px;font-weight:700;box-shadow:0 3px #33a29a}.timed-result__retry:active{transform:translateY(2px);box-shadow:0 1px #33a29a}.mode-select{gap:12px;display:flex}.mode-select__button{color:#7a6a56;cursor:pointer;background:#fff;border:none;border-radius:14px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px;font-family:inherit;display:flex;box-shadow:0 2px #00000014}.mode-select__button--active{color:#fff;background:#4ecdc4;transform:translateY(-1px);box-shadow:0 3px #33a29a}.mode-select__label{font-size:15px;font-weight:700}.mode-select__hint{opacity:.85;font-size:10px}.bpm-control{background:#fff;border-radius:18px;padding:10px 14px 8px;box-shadow:0 2px #00000014}.bpm-control__label{text-align:center;color:#7a6a56;margin-bottom:8px;font-size:15px;font-weight:700;display:block}.bpm-control__value{color:#ff6b6b;font-size:22px}.bpm-control__row{align-items:center;gap:10px;display:flex}.bpm-control__slider{accent-color:#ff6b6b;flex:1;width:100%;height:28px}.bpm-control__step{color:#fff;cursor:pointer;background:#ffb347;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;width:40px;height:40px;font-family:inherit;font-size:16px;display:flex;box-shadow:0 3px #d98f2e}.bpm-control__step:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #d98f2e}.bpm-control__step:disabled{cursor:default;background:#e6ddce;box-shadow:0 3px #cfc4ae}.bpm-control__range{color:#b6a992;justify-content:space-between;margin-top:4px;font-size:12px;display:flex}.game-bpm-readout{text-align:center;color:#7a6a56;margin:0;font-size:15px;font-weight:700}.game-bpm-readout strong{color:#ff6b6b;font-size:20px}.game-remaining{text-align:center;color:#7a6a56;margin:0 0 4px;font-size:16px;font-weight:700}.game-remaining strong{color:#ff6b6b;font-size:28px}.play-button{color:#fff;cursor:pointer;background:#ff6b6b;border:none;border-radius:50%;justify-content:center;align-self:center;align-items:center;width:88px;height:88px;font-family:inherit;font-size:30px;display:flex;box-shadow:0 4px #d94f4f}.play-button span{transform:translate(2px)}.play-button:active{transform:translateY(3px);box-shadow:0 1px #d94f4f}.play-button--stop{background:#7a6a56;box-shadow:0 4px #5a4d3d}.play-button--stop span{transform:none}.play-button--text{border-radius:999px;width:auto;min-width:180px;height:64px;padding:0 32px}.play-button--text span{font-size:22px;font-weight:800;transform:none}@media (width<=420px){.play-button{width:68px;height:68px;font-size:24px}.play-button--text{min-width:150px;height:52px;padding:0 24px}.play-button--text span{font-size:18px}}.app__footer{margin-top:2px;font-size:10px}.app__footer a{color:#b6a992}.clap-hands{flex-direction:column;align-items:center;gap:2px;display:flex}.clap-hands__frame{justify-content:center;align-items:center;width:172px;height:130px;display:flex;position:relative;overflow:visible}.clap-hands__img{object-fit:contain;object-position:center bottom;width:100%;height:100%;animation:.22s ease-out clap-hands-pop;display:block;position:absolute;bottom:0;left:0}@keyframes clap-hands-pop{0%{opacity:.7;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.clap-hands__caption{color:#d98f2e;letter-spacing:.05em;margin:0;font-size:15px;font-weight:800}@media (width<=420px){.clap-hands__frame{width:145px;height:110px}.clap-hands__caption{font-size:14px}}.rhythm-track{width:100%;padding:12px 0 4px;position:relative}.rhythm-track__line{background:linear-gradient(#6fe0d4,#33a29a);border-radius:3px;width:6px;height:100%;margin-left:-3px;transition:none;position:absolute;top:0;left:12.5%;box-shadow:0 0 10px #4ecdc499}.rhythm-track__circles{width:100%;display:flex}.rhythm-track__cell{flex:1 1 0;justify-content:center;align-items:center;display:flex;position:relative}.rhythm-track__cell .sparkle-burst__spark{animation-name:rhythm-sparkle-pop}@keyframes rhythm-sparkle-pop{0%{opacity:0;transform:rotate(var(--angle)) translateY(-16px) scale(.4)}35%{opacity:1;transform:rotate(var(--angle)) translateY(-40px) scale(1.1)}to{opacity:0;transform:rotate(var(--angle)) translateY(-50px) scale(.5)}}.rhythm-track__circle{--note-color:#b9c4d0;color:#fff;background:var(--note-color);border-radius:50%;justify-content:center;align-items:center;width:76px;height:76px;font-size:28px;font-weight:700;transition:transform .15s,background-color .15s;display:flex;position:relative;box-shadow:inset 0 -4px #0000001f}.rhythm-track__circle--clap{--note-color:#ff6b6b;box-shadow:inset 0 -4px #00000026,0 0 0 6px #ff6b6b2e}.rhythm-track__circle--active{animation:.25s ease-out rhythm-pulse}@keyframes rhythm-pulse{0%{transform:scale(1.35)}to{transform:scale(1)}}@media (width<=420px){.rhythm-track{padding:6px 0 4px}.rhythm-track__circle{width:62px;height:62px;font-size:23px}}.tempo-search{background:#fff;border-radius:18px;padding:16px 20px;box-shadow:0 2px #00000014}.tempo-search__label{text-align:center;color:#7a6a56;margin-bottom:10px;font-size:15px;font-weight:700;display:block}.tempo-search__row{gap:8px;display:flex}.tempo-search__input{color:#3a2f22;background:#fff7e8;border:2px solid #f0e6d2;border-radius:999px;flex:1;min-width:0;padding:10px 14px;font-family:inherit;font-size:15px}.tempo-search__input:focus{border-color:#ffb347;outline:none}.tempo-search__button{color:#fff;cursor:pointer;background:#4ecdc4;border:none;border-radius:999px;flex:none;padding:0 18px;font-family:inherit;font-size:15px;font-weight:700;box-shadow:0 3px #33a29a}.tempo-search__button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #33a29a}.tempo-search__button:disabled{cursor:default;background:#e6ddce;box-shadow:0 3px #cfc4ae}.tempo-search__error{color:#d94f4f;text-align:center;margin:10px 0 0;font-size:13px}.tempo-search__results{flex-direction:column;gap:6px;margin:10px 0 0;padding:0;list-style:none;display:flex}.tempo-search__result{cursor:pointer;text-align:left;background:#fff7e8;border:none;border-radius:14px;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:10px 14px;font-family:inherit;display:flex}.tempo-search__result:active{background:#ffecc7}.tempo-search__result-text{flex-direction:column;min-width:0;display:flex}.tempo-search__result-title{color:#3a2f22;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;overflow:hidden}.tempo-search__result-artist{color:#b6a992;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.tempo-search__result-bpm{color:#ff6b6b;flex:none;font-size:14px;font-weight:800}