*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select,input,summary{font:inherit;color:inherit}button,select,summary{cursor:pointer}button{border:0;touch-action:manipulation}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}button:active{transform:scale(.96)}button:disabled{opacity:.25;cursor:default}[hidden]{display:none!important}dialog{max-width:calc(100vw - 40px);width:360px;padding:26px;border:0;border-radius:16px;color:inherit;background:var(--paper);box-shadow:0 20px 80px #0003}dialog::backdrop{background:#17232266}dialog h2{font-size:20px;margin:0 0 16px}dialog p{font-size:13px;line-height:1.6;opacity:.65}dialog>div{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}dialog button{padding:12px 18px;border-radius:8px;background:transparent}dialog #confirm{background:var(--ink);color:var(--paper)}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

:root{--paper:#f6f4ee;--ink:#333b3b;color:var(--ink);background:var(--paper)}#app{width:100%;height:100dvh;position:relative;display:grid;grid-template-rows:64px minmax(90px,1fr) auto 70px minmax(150px,32dvh) 50px;padding:env(safe-area-inset-top) max(24px,calc((100vw - 960px)/2)) env(safe-area-inset-bottom);overflow:hidden;background:radial-gradient(ellipse at 70% 0,#fff9e8,transparent 70%),var(--paper)}header{display:flex;align-items:center;justify-content:space-between;gap:15px}h1{font-size:16px;font-weight:550;letter-spacing:-.5px;margin:0}header button{background:none;font-size:13px;min-height:44px;padding:10px 0 10px 15px}.song-heading{align-self:center;text-align:center}.tag{font-size:10px;letter-spacing:2px;color:#8a9289}.song-heading h2{font-size:clamp(26px,4vw,42px);letter-spacing:-1.2px;font-weight:500;margin:12px 0 18px}.modes{display:flex;align-items:center;justify-content:center;gap:24px}.modes button{position:relative;font-size:12px;color:#969c95;padding:10px 0;background:none;min-height:38px}.modes .selected{color:#3d5148}.modes .selected:after{content:'';position:absolute;bottom:3px;left:0;right:0;height:1px;background:currentColor}.score{width:100%;max-width:670px;margin:auto;overflow:hidden}.score-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#7c887d;gap:12px}#count{font-variant-numeric:tabular-nums;font-size:11px;white-space:nowrap;opacity:.7}#sequence{display:flex;align-items:center;gap:14px;min-height:90px;padding:16px 5px;overflow:hidden;mask-image:linear-gradient(to right,#000 92%,transparent)}.note{flex:0 0 38px;height:54px;display:grid;place-items:center;font-size:33px;font-weight:400;color:#b4bbb0;position:relative}.note.done{color:#d2d5cb}.note.active{color:#846537;transform:scale(1.12)}.note.active:after,.note.demo:after{content:'';position:absolute;bottom:0;width:18px;height:3px;border-radius:3px;background:#c5a467}.note.demo{color:#9b80b5}.note.demo:after{background:#b096c6}.track{height:2px;background:#dce1d540;overflow:hidden}#progress{height:100%;background:#96ae98;transition:width .15s}.player-controls{display:flex;align-items:center;justify-content:center;gap:20px;align-self:center}.player-controls button{padding:10px 0;background:none;font-size:12px;min-height:44px}.play-icon{font-size:10px;margin-right:8px;color:#7b8e77}select{border:0;background:none;font-size:11px;min-height:40px}#reset{font-size:25px;width:44px}.piano-body{min-height:0;align-self:stretch;position:relative}.keys{display:flex;width:100%;height:100%;position:relative;gap:2px;border-top:5px solid #56655f}.key{flex:1;min-width:0;position:relative;background:linear-gradient(90deg,#eeeee8,#fffef9 30%,#f8f8f1);border:1px solid #d6dacf;border-top:0;border-bottom:5px solid #d6dacf;border-radius:0 0 7px 7px;display:flex;align-items:flex-end;justify-content:center;padding:0 0 22px;font-size:25px;color:#627066;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .1s}.key.next{background:linear-gradient(#fff8dc,#f7e8b2);border-bottom-color:#d4c18d;color:#8e713d}.key.pressed{background:#d8cde8;border-bottom-width:2px;color:#755d91;padding-bottom:19px}.black{position:absolute;top:0;width:7.5%;height:56%;background:linear-gradient(90deg,#303b37,#4f5b54 40%,#303b37);border-bottom:5px solid #24302b;border-radius:0 0 5px 5px;box-shadow:1px 3px 3px #192a2630;pointer-events:none;z-index:2}footer{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#95a18f;gap:12px}#save-state{font-size:10px}.celebrate{position:absolute;z-index:5;left:0;right:0;top:64px;height:calc(68dvh - 140px);min-height:190px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--paper);text-align:center;padding:20px}.celebrate h2{font-size:clamp(21px,3vw,32px);font-weight:500;margin:0 0 12px;letter-spacing:-.8px}.celebrate p{font-size:14px;color:#8c9b84;margin:0 0 22px}.celebrate>div{display:flex;gap:24px}.celebrate button{background:none;font-size:13px;padding:12px 0;border-bottom:1px solid #8f9e88}.celebrate #replay{color:#929e8a;border-color:transparent}.dialog-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px}.dialog-top h2{margin:0}#close-dialog{font-size:28px;padding:0;width:44px;height:44px}#song-list{display:block;margin:0}dialog{width:420px;max-height:90dvh;overflow-y:auto}.song-row{display:flex;align-items:center;width:100%;gap:18px;text-align:left;background:none;border-bottom:1px solid #dfe4d8;padding:17px 0;border-radius:0}.song-row .number{font-size:11px;color:#a0aa96}.song-row strong{flex:1;font-weight:500;font-size:15px}.song-row .check{color:#829875}.spark{position:absolute;z-index:3;pointer-events:none;font-size:20px;color:#a991bd;animation:float .9s ease-out forwards}@keyframes float{to{transform:translateY(-90px) rotate(25deg);opacity:0}}@media(max-width:500px){#app{padding-right:18px;padding-left:18px;grid-template-rows:58px minmax(110px,1fr) auto 64px minmax(180px,34dvh) 46px}.score-top{font-size:11px}#sequence{gap:9px;min-height:82px}.note{flex-basis:32px;font-size:29px;height:48px}.key{font-size:21px;padding-bottom:18px}.key.pressed{padding-bottom:15px}.song-heading h2{font-size:29px}.celebrate{top:58px;height:calc(66dvh - 122px)}footer{font-size:9px;flex-wrap:wrap;gap:0;padding-top:5px;align-content:center}footer span{width:100%;text-align:center}}@media(max-height:650px){#app{grid-template-rows:48px minmax(85px,1fr) auto 48px minmax(150px,30dvh) 32px}.song-heading h2{font-size:25px;margin:5px 0}.tag{font-size:9px}.modes button{padding:8px 0}.note{height:38px;font-size:26px}#sequence{min-height:60px;padding:8px 4px}.celebrate{top:48px;height:calc(70dvh - 115px)}}@media(orientation:landscape) and (max-height:500px){#app{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:42px minmax(70px,1fr) auto 48px;padding:4px 22px 16px;column-gap:30px}header{grid-column:1/3}.song-heading{grid-column:1;grid-row:2}.song-heading h2{font-size:24px;margin:5px 0}.tag{display:none}.score{grid-column:1;grid-row:3}.player-controls{grid-column:1;grid-row:4;gap:12px}.piano-body{grid-column:2;grid-row:2/5;margin-top:16px}.keys{min-height:170px}footer{display:none}.score-top{font-size:10px}.note{flex-basis:26px;font-size:24px;height:38px}#sequence{min-height:62px;gap:8px}.celebrate{left:15px;right:calc(55% + 8px);top:50px;height:calc(100dvh - 68px);padding:15px;min-height:0}.celebrate h2{font-size:20px}.celebrate>div{gap:18px}.celebrate button{font-size:11px}}


#app[data-mode="free"] .tag,#app[data-mode="free"] #listen,#app[data-mode="free"] #tempo,#app[data-mode="free"] #reset{visibility:hidden}