: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{min-height:100dvh}button{-webkit-user-select:none;user-select:none}.app{box-sizing:border-box;flex-direction:column;align-items:center;min-height:100dvh;padding:24px 16px 40px;display:flex}.app__header{text-align:center;margin-bottom:12px}.app__title{color:#ff6b6b;letter-spacing:.02em;margin:0;font-size:32px;font-weight:800}.app__subtitle{color:#7a6a56;margin:4px 0 0;font-size:15px}.app__main{flex-direction:column;gap:28px;width:100%;max-width:480px;margin-top:16px;display:flex}.tap-section{flex-direction:column;align-items:center;gap:10px;display:flex}.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:30px}.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:160px;height:160px}.tap-button__label{font-size:32px}}.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:16px 20px 12px;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}.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}.app__footer{margin-top:24px;font-size:11px}.app__footer a{color:#b6a992}.rhythm-track{width:100%;padding:24px 0 8px;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}.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__circle{width:56px;height:56px;font-size:22px}}.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}