*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#eeeae3;color:#353b39;font-family:ui-rounded,'Arial Rounded MT Bold',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,select{font:inherit;color:inherit;cursor:pointer;border:0}button{touch-action:manipulation}button:focus-visible,select:focus-visible{outline:3px solid #a08ec1;outline-offset:3px}button:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}[hidden]{display:none!important}#app{max-width:740px;margin:auto;min-height:100dvh;position:relative;padding:32px 38px 20px;background:radial-gradient(ellipse at 75% 10%,#fff9e7 0,transparent 40%),#f8f5f0;overflow:hidden}header{display:flex;gap:12px;align-items:center}.mark{display:grid;place-items:center;width:44px;height:44px;background:#ded5f0;border-radius:14px;font-size:28px}.brand{flex:1}.brand>span{font-size:9px;letter-spacing:1.65px;color:#92958b}h1{font-size:18px;margin:5px 0 0;letter-spacing:-.7px}.round{background:transparent;border:1px solid #dedfd7;width:40px;height:40px;border-radius:50%;font-size:23px}.song-heading{text-align:center;margin:36px 0 20px}.tag{font-size:10px;font-weight:700;letter-spacing:2px;color:#999389}.song-heading h2{font-size:32px;font-weight:650;margin:10px 0;letter-spacing:-1.5px}.song-heading p{font-size:12px;color:#9a9c92;margin:10px 0}.modes{display:flex;width:218px;padding:4px;margin:auto;border-radius:30px;background:#eae8e1;gap:4px}.modes button{flex:1;background:transparent;border-radius:30px;padding:9px 0;font-size:11px;color:#93938b}.modes .selected{background:#fffdf8;box-shadow:0 2px 5px #36321c0b;color:#51544c;font-weight:650}.score{margin-top:27px;padding:20px 18px 17px;border-radius:22px;background:#fffefb;border:1px solid #e9e6df;box-shadow:0 7px 22px #47370f04}.score-top{display:flex;justify-content:space-between;font-size:11px;color:#929488}.score-top>span:first-child{color:#646b5f}#sequence{display:flex;gap:8px;overflow:hidden;align-items:center;min-height:83px;padding:10px 1px}.note{flex:0 0 37px;height:46px;display:grid;place-items:center;font-size:25px;color:#b7bcb0;border-radius:12px;font-weight:400;transition:background .15s}.note.done{color:#cfd5c5}.note.active{background:#f9d872;color:#51432a;box-shadow:0 4px 12px #ebbb4433;transform:scale(1.07)}.note.demo{background:#dfd5f0}.note.break{margin-right:9px}.track{height:3px;background:#efeee8;border-radius:4px;overflow:hidden}#progress{height:100%;background:#b2bc9c;transition:width .15s}.player-controls{display:flex;align-items:center;justify-content:center;gap:11px;margin:21px 0 23px}.player-controls #listen{font-size:12px;background:none;padding:10px 6px}.play-icon{font-size:10px;margin-right:8px;color:#919880}select{font-size:10px;border-radius:10px;background:#ebe9e2;padding:7px}.player-controls .round{height:31px;width:31px;font-size:21px;margin-left:10px}.piano-body{border-radius:21px;background:#b9bba9;padding:7px 7px 10px;box-shadow:0 10px 0 #c4c5b7,0 21px 40px #4a553b26;position:relative}.piano-lip{display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 12px;color:#f6f5e9;font-size:8px;letter-spacing:2px}.piano-lip i{height:3px;width:40px;border-radius:5px;background:#a1a38e}.keys{height:244px;display:flex;gap:2px;position:relative}.key{flex:1;min-width:0;position:relative;background:linear-gradient(90deg,#f5f4ee,#fffef9 40%,#f4f3ee);border:1px solid #deded4;border-bottom:7px solid #d8d8d1;border-radius:0 0 10px 10px;box-shadow:0 2px 4px #3a3d3e25;display:flex;align-items:flex-end;justify-content:center;padding:0 0 16px;font-size:23px;transition:background .1s,color .1s;touch-action:none;user-select:none;-webkit-user-select:none}.key.next{background:linear-gradient(90deg,#fbf1c3,#fff3c7);color:#897631;border-bottom-color:#e6d797}.key.pressed{background:#dfd2f1;border-bottom-width:3px;padding-bottom:12px;box-shadow:inset 0 2px 12px #76648338;color:#6a507e}.black{position:absolute;top:0;width:7.5%;height:60%;background:linear-gradient(90deg,#3b4240,#505550 40%,#313935);border:1px solid #252d26;border-bottom:6px solid #272f2a;border-radius:0 0 6px 6px;box-shadow:1px 4px 5px #101e2238;pointer-events:none;z-index:2}footer{text-align:center;color:#a0a397;font-size:10px;line-height:20px;margin-top:28px}footer span{display:block}#save-state{font-size:9px;color:#879779}dialog{width:min(90vw,450px);border:1px solid #e0dfd5;border-radius:26px;background:#f9f7f2;padding:25px;color:inherit;box-shadow:0 20px 90px #2226}dialog::backdrop{background:#34362f60;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-top h2{font-size:21px}.dialog-top+p{font-size:12px;color:#92978b}.song-row{display:flex;text-align:left;width:100%;align-items:center;padding:15px 10px;gap:17px;border-bottom:1px solid #e6e5dd;background:transparent}.song-row .number{color:#a5a492;font-size:11px}.song-row strong{font-size:14px;flex:1;font-weight:500}.song-row .check{color:#8c9d75}.celebrate{position:absolute;z-index:5;inset:auto 26px 32px;background:#fcfaf3f7;backdrop-filter:blur(12px);border:1px solid #dedfcf;border-radius:25px;text-align:center;padding:23px;box-shadow:0 15px 80px #525f4238}.finish-icon{font-size:34px;color:#cfad4f}.celebrate h2{font-size:19px;letter-spacing:-1px}.celebrate p{color:#969682;font-size:12px}.celebrate button{border-radius:30px;background:#aeb89b;padding:12px 23px;font-size:12px;color:white}.celebrate .plain{background:none;color:#868c7b;display:block;margin:6px auto 0}.spark{position:absolute;z-index:3;pointer-events:none;color:#b8a1d5;font-size:20px;animation:float 900ms ease-out forwards}@keyframes float{to{transform:translateY(-90px) rotate(30deg);opacity:0}}@media(min-width:741px){#app{margin:25px auto;min-height:0;border:1px solid #e4e1d8;border-radius:30px;box-shadow:0 25px 80px #70685512}.keys{height:260px}}@media(max-width:500px){#app{padding:23px 18px 15px}.song-heading{margin:27px 0 18px}.song-heading h2{font-size:28px}.score{margin-top:22px;padding:17px 14px}.note{flex-basis:31px;font-size:23px;gap:5px}.keys{height:clamp(190px,31dvh,290px)}.player-controls{margin:17px 0 19px}.piano-body{margin:0 -3px}.key{font-size:20px}.brand>span{font-size:8px;letter-spacing:1.1px}}@media(max-height:680px){#app{padding-top:14px}.song-heading{margin:14px 0 12px}.song-heading h2{font-size:24px}.score{margin-top:14px;padding:12px}.note{height:37px}#sequence{min-height:63px}.keys{height:175px}.player-controls{margin:10px 0}footer{margin-top:20px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(orientation:landscape) and (max-height:550px){#app{display:grid;grid-template-columns:.85fr 1.15fr;grid-template-rows:40px 51px 32px auto 30px;column-gap:24px;padding:14px 22px;max-width:1040px;min-height:100dvh;margin:0 auto;border:0;border-radius:0}header{grid-column:1/3;grid-row:1}.song-heading{grid-column:1;grid-row:2;margin:6px 0}.song-heading h2{font-size:21px;margin:3px 0}.song-heading p{display:none}.song-heading .tag{font-size:8px}.modes{grid-column:1;grid-row:3;width:195px;align-self:center}.modes button{padding:6px}.score{grid-column:1;grid-row:4;align-self:center;margin:6px 0;padding:10px}.score-top{font-size:9px}#sequence{min-height:55px;gap:5px}.note{flex-basis:28px;font-size:20px;height:35px}.player-controls{grid-column:1;grid-row:5;margin:0;font-size:10px}.piano-body{grid-column:2;grid-row:2/6;align-self:end;margin-bottom:8px}.piano-lip{height:28px}.keys{height:calc(100dvh - 125px);min-height:160px}footer{display:none}.celebrate{inset:auto 25% 24px;padding:13px}.celebrate h2{margin:5px 0}.finish-icon{font-size:23px}}