@font-face{font-family:Round;src:url('../assets/kitty-round-mobile.woff2') format('woff2');font-display:swap}*{box-sizing:border-box}:root{font-family:Round,system-ui,sans-serif;color:#332a25;background:#f6c4b3;font-synthesis:none}body{margin:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px dashed #9675a0;outline-offset:3px}.app{width:min(100%,1600px);aspect-ratio:1586/992;position:relative;container-type:inline-size;isolation:isolate;overflow:hidden}.board{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.receipt{position:absolute;left:6.4%;top:8.3%;width:18.8%;transform:rotate(-4deg)}.receipt h2{font-size:1.85cqw;margin:0 0 .4cqw}.receipt p{font-size:1.1cqw;margin:.4cqw 0}.receipt span{font-size:.95cqw}.receipt small{display:block;font-size:.8cqw;color:#8f7060;margin-top:.6cqw}.progress{position:absolute;left:80.4%;top:9%;width:9.4%;text-align:center;font-size:1.65cqw}.sound{position:absolute;left:92.8%;top:4.8%;width:4.2%;height:6.6%;border:2px solid #493b33;background:#fff9ed;border-radius:40%;font-size:2.4cqw}.stages{position:absolute;left:30.2%;top:15.8%;width:47%;height:6.1%;display:flex;gap:1.3%}.stages span{width:32.5%;display:flex;justify-content:center;align-items:center;font-size:1.55cqw;border-radius:1.8cqw;transition:box-shadow .1s,background .1s}.stages span.active{background:#fff5bf55;box-shadow:0 0 0 .22cqw #c68058}.music{position:absolute;left:13%;top:27.3%;width:74%;height:27%}.score-title{display:flex;align-items:center;justify-content:space-between;font-size:1.45cqw;height:3cqw;color:#765747}.score-title button{border:1px solid #c2a183;border-radius:1cqw;background:#fff9ed;font-size:.8cqw;padding:.25cqw .7cqw}.score{position:absolute;top:4.15cqw;width:100%;height:10.2cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:.7cqw}.cell{border-radius:1cqw;position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column;transition:background .08s,box-shadow .08s}.cell svg{width:4.7cqw;height:6cqw;overflow:visible}.cell .syllable{font-size:1.4cqw;margin-top:.15cqw}.cell.active{background:#ffe0a6bb;box-shadow:inset 0 0 0 .18cqw #d9ac6b}.cell.rest.active{background:#dbe9c5bb;box-shadow:inset 0 0 0 .18cqw #9db47d}.cell.hit{background:#e2efc6aa}.cell.miss{background:#f9cfbf88}.cell .mark{position:absolute;right:.7cqw;top:.5cqw;font-size:1cqw;color:#76834d}.cell.miss .mark{color:#b97660}.beats{position:absolute;top:15.7cqw;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:.7cqw;text-align:center}.beat{justify-self:center;width:2.7cqw;height:2.7cqw;display:grid;place-items:center;border:1.3px dashed #c4a184;border-radius:50%;font-size:1.5cqw;color:#856451;background:#fff9ea99}.beat.active{background:#f89f8b;border-color:#d98571;color:#fff;box-shadow:0 0 0 .3cqw #f7b39b33}.status{position:absolute;left:48.5%;top:56.8%;width:23%;height:10%;text-align:center;display:grid;align-content:start;gap:.65cqw;pointer-events:none}.status strong{font-size:2.7cqw;color:#855e4b;line-height:1.15}.status span{font-size:1.05cqw;color:#9a7059;line-height:1.4}.drum{position:absolute;left:17.65%;top:55.45%;width:26.48%;height:33.27%;padding:0;border:0;background:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transform-origin:50% 72%}.drum svg{width:100%;height:100%;display:block;overflow:visible;pointer-events:none}.drum.struck{animation:drum-hit .19s ease-out}.impact{position:absolute;left:35%;top:10%;font-size:2.7cqw;color:#c47a42;text-shadow:0 2px #fff9e9;opacity:0;pointer-events:none}.drum.struck .impact{animation:impact .3s ease-out}.drum-tip{position:absolute;left:17%;top:89.8%;width:28%;font-size:1cqw;text-align:center;margin:0}.cat{position:absolute;left:74.4%;top:66.5%;width:20.18%;height:25.2%;overflow:visible;pointer-events:none;transform-origin:50% 90%}.cat.struck{animation:cat-hit .24s ease-out}.speech{position:absolute;left:76%;top:56.5%;width:17.2%;height:5.2%;margin:0;display:flex;justify-content:center;align-items:center;text-align:center;font-size:1.2cqw;line-height:1.25}.actions{position:absolute;left:50.1%;top:68.85%;width:19.1%;height:11.7%;display:flex;flex-direction:column;gap:.8cqw}.actions button{border:0;background:none;font-size:1.65cqw;min-height:3.25cqw;border-radius:2cqw;padding:0 .5cqw}.actions button:disabled{color:#a08776;cursor:default}.friends{position:absolute;left:49%;top:84.6%;width:23%;height:12%;display:grid;justify-items:center;align-content:start;gap:.3cqw}.friends>div{width:100%;display:flex;justify-content:center;gap:.4cqw}.friend{width:4.6cqw;height:4.8cqw;position:relative;filter:grayscale(1);opacity:.35}.friend.joined{filter:none;opacity:1}.friend svg{width:100%;height:100%}.friend.new{animation:join .6s ease-out}.friends>span{font-size:.95cqw;text-align:center}.burst{position:absolute;left:43%;top:50%;font-size:4cqw;color:#d8a548;opacity:0;pointer-events:none}.burst.show{animation:join 1s ease-out}.orientation{display:none}dialog{width:min(600px,calc(100% - 30px));background:#fff9ea;border:2px solid #685343;border-radius:22px;padding:30px;color:#554237}dialog::backdrop{background:#70554977}dialog h2{font-size:25px}dialog p{font-size:17px;line-height:1.8}dialog button{background:#f5ad98;border:1.5px solid #685343;border-radius:20px;padding:10px 25px;font-size:18px}dialog .close{position:absolute;right:8px;top:3px;border:0;background:none;font-size:28px;padding:0 10px}@keyframes drum-hit{0%{transform:scale(.97) translateY(2px)}45%{transform:scale(1.025)}100%{transform:none}}@keyframes impact{0%{opacity:1;transform:translateY(0) scale(.8)}100%{opacity:0;transform:translateY(-30px) scale(1.2)}}@keyframes cat-hit{40%{transform:rotate(-4deg) translateY(-5px)}}@keyframes join{0%{opacity:1;transform:scale(.8) translateY(10px)}40%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}@media(max-width:800px) and (orientation:portrait){.orientation{display:block;font-size:13px;padding:10px;margin:0;color:#8e6150}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.score{top:2.55cqw}.beats{top:13.45cqw}

select{font:inherit;color:inherit;background:#fff8e9;border:1px solid #bc9478;border-radius:.6cqw;padding:.25cqw .4cqw}select:focus-visible{outline:2px dashed #9675a0}select:disabled{opacity:.6}.lesson-label{display:block;font-size:.8cqw;margin-top:.5cqw}.lesson-label select{width:90%;display:block;font-size:.8cqw;margin-top:.2cqw}.music-options{position:absolute;left:43%;top:23.2%;width:44%;display:flex;justify-content:flex-end;align-items:center;gap:1cqw;font-size:.9cqw}.music-options select{font-size:.9cqw;max-width:16cqw}.music-options button{font:inherit;font-size:.95cqw;background:#fff0c8;border:1px solid #b89579;border-radius:1.2cqw;padding:.35cqw .8cqw}.cell.half-note{grid-column:span 2;background:#fffaf0;border:1.3px solid #e3cdb3;z-index:1}.cell.half-note.active{background:#ffe7b5}.cell.half-note.hit{background:#e2efc6}.cell.half-note.miss{background:#f9dfd3}.cell.continuation{display:none}.cell .length-hint{position:absolute;bottom:.45cqw;font-size:.75cqw;color:#a17c56}.cell.half-note .syllable{font-size:1.15cqw}.cell .sustain{position:absolute;left:12%;right:12%;bottom:.2cqw;height:.24cqw;border-radius:.3cqw;background:linear-gradient(to right,#d3a861 var(--sustain,0%),#ecddc2 var(--sustain,0%))}.friends.playing .friend.joined{animation:cat-hit .7s ease-in-out infinite alternate}.friends.playing .friend:nth-child(even){animation-delay:.2s}

.score{grid-template-columns:repeat(16,minmax(0,1fr));gap:.5cqw;background:#fffaf0;border-radius:1cqw}.cell{grid-column:span var(--span);border:1.3px solid #e3cdb3;background:#fffaf0;padding-bottom:1.4cqw;min-width:0}.cell svg{height:5cqw;width:auto;max-width:90%}.cell .syllable{font-size:1.1cqw}.cell .value-hint{position:absolute;bottom:.4cqw;font-size:.72cqw;color:#987653;text-align:center;white-space:nowrap}.cell.small-note .syllable,.cell.small-note .value-hint{display:none}.cell.small-note svg{width:90%;height:5cqw}.cell.long-note svg{width:5cqw}.cell.long-note.active{background:#ffe5ae}.cell.rest{background:#eef1df}.cell .sustain{bottom:.13cqw}.receipt p{font-size:.9cqw;line-height:1.3}.receipt small{font-size:.72cqw}.lesson-label{margin-top:.2cqw}.receipt{top:7.8%}.receipt h2{font-size:1.65cqw}.cell .mark{font-size:.8cqw;right:.3cqw;top:.2cqw}

.cell .lit ellipse{fill:#ce7d56;stroke:#ce7d56}.cell .lit path{stroke:#ce7d56}

.cell.awaiting{outline:.18cqw dashed #d79566;outline-offset:-.3cqw;background:#fff0cb}.app[data-phase=ready] .drum{filter:drop-shadow(0 0 .7cqw #e6ad6266)}

.music-options{left:40%;width:47%;gap:.65cqw}.music-options>span{font-size:.8cqw;color:#9b765a;max-width:15cqw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.learning-dialog{width:min(780px,calc(100% - 30px));background:#fff7e4}.learning-dialog>p{color:#94725d;margin-top:0}.learning-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.learning-modes button{border:2px solid #5f4a3a;border-radius:22px 17px 24px 18px;padding:22px 17px;text-align:left;background:#ffe4af;display:grid;gap:10px;box-shadow:inset 0 0 0 4px #ffffff66}.learning-modes button:nth-child(2){background:#f5d5df}.learning-modes button:nth-child(3){background:#e1edcd}.learning-modes button:nth-child(4){background:#e4dbf5}.learning-modes strong{font-size:23px}.learning-modes span{font-size:14px;line-height:1.5}.learning-modes small{font-size:13px;color:#80664f}.option-row{display:grid;grid-template-columns:100px 1fr;gap:15px;align-items:center;font-size:17px;margin:20px 0}.option-row select{font:inherit;font-size:16px;padding:8px;width:100%;background:#fffcf2;border:1px solid #bd9b80;border-radius:10px}.option-note{font-size:14px!important;color:#94765e}.hold-option{display:flex;gap:10px;align-items:center;font-size:17px;margin-top:25px}.hold-option input{width:20px;height:20px;accent-color:#b78c60}.cell.holding{box-shadow:inset 0 0 0 .18cqw #cd995c}.app[data-held=true] .drum{filter:drop-shadow(0 0 .8cqw #dda55f99)}.app[data-held=true] .drum svg{transform:scale(.98)}.cell.long-note .sustain:after{content:'';position:absolute;left:var(--release-mark,93%);top:-.2cqw;height:.7cqw;border-left:2px dashed #78965a}.cell.release-cue{background:#deebc8!important}.cell.release-cue .value-hint{color:#66824d}@media(max-width:600px){.learning-modes{grid-template-columns:1fr;gap:9px}.learning-modes button{padding:13px}.learning-modes strong{font-size:20px}.learning-dialog{max-height:90svh}.option-row{grid-template-columns:1fr;gap:5px}}

.cell{border:1.4px solid color-mix(in srgb,var(--note-tint,#c9b391) 55%,#bca58c);border-radius:1.1cqw 1.35cqw 1.2cqw 1.4cqw;background:color-mix(in srgb,var(--note-tint,#c9b391) 13%,#fffaf0);box-shadow:inset 0 0 0 .2cqw #fffdf655}.cell .syllable{color:#695141}.cell .lit ellipse,.cell .lit path{filter:brightness(.88)}

.cell .music-glyph{width:5.2cqw;height:6.6cqw}
.cell .music-glyph.beamed{width:min(88%,15cqw);height:6.6cqw}

.receipt p,.receipt span,.receipt small,.lesson-label,.lesson-label select,.score-title button,.cell .value-hint,.cell .mark,.status span,.drum-tip,.friends>span,.speech,.music-options>span,.music-options button,.learning-modes span,.learning-modes small,dialog p,.option-row,.option-row select,.hold-option,.orientation{font-weight:700;font-synthesis:weight;color:#70513e}
.receipt p{font-size:1.05cqw;line-height:1.35}.receipt span{font-size:1.05cqw}.receipt small{font-size:1cqw;margin-top:.35cqw}.lesson-label,.lesson-label select{font-size:1.05cqw}.lesson-label select{width:100%}
.score-title button{font-size:1.05cqw}.cell .value-hint{font-size:1.05cqw;line-height:1.15;white-space:normal;max-width:94%;bottom:.45cqw}.cell .mark{font-size:1cqw}.status span{font-size:1.25cqw;line-height:1.35}.drum-tip{font-size:1.2cqw}.friends>span{font-size:1.15cqw}.speech{font-size:1.35cqw;line-height:1.25}
.music-options>span{font-size:1.05cqw}.music-options button{font-size:1.1cqw}.learning-modes span{font-size:17px}.learning-modes small{font-size:16px}dialog p{font-size:19px}.option-note{font-size:17px!important}.option-row,.option-row select,.hold-option{font-size:19px}

.stages{inset:0;width:100%;height:100%;display:block;pointer-events:none}.stages span{position:absolute;top:15.8%;height:6.1%;width:auto}.stages span:nth-child(1){left:30.2%;width:14.5%}.stages span:nth-child(2){left:45.4%;width:15.4%}.stages span:nth-child(3){left:61.2%;width:15.8%}.stages span.active{box-shadow:none;background:none;font-weight:700;color:#704a36}.stages span.active:after{content:'';position:absolute;bottom:.4cqw;left:38%;width:24%;border-bottom:.2cqw solid #9d6c42;border-radius:50%}