:root{font-family:system-ui,-apple-system,Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif;color:#65524c;background:#f7ebee;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:300px}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}.app{width:min(100%,680px);min-height:100dvh;margin:0 auto;background:#f7ebee;padding-bottom:max(22px,env(safe-area-inset-bottom))}.header{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 15px}.header h1{font-size:18px;margin:0;font-weight:750}.iconbtn{border:0;background:#fffaf5;color:#95657a;border-radius:15px;width:42px;height:42px;font-size:27px}.headspacer{width:42px}.settings{padding:0 15px 30px;display:grid;gap:13px}.panel,.sheetpanel,.durationpanel,.keypanel{background:#fffaf5;border-radius:20px;padding:17px;box-shadow:0 2px 12px #8d65700b}.panel h2,.durationpanel h2{font-size:15px;margin:0 0 13px}.checkline{display:flex;align-items:center;gap:12px;min-height:46px;border-top:1px solid #f1e4e5;font-size:15px;cursor:pointer}.checkline:first-of-type{border-top:0}.checkbutton{width:100%;padding:11px 2px;border:0;background:transparent;text-align:left;color:#65524c}.checkbutton.checked .checklabel{font-weight:700}.heart-toggle{width:28px;height:26px;display:inline-flex;align-items:center;justify-content:center;flex:none}.heart-toggle svg{width:100%;height:100%}.heart-toggle path{fill:none;stroke:#b97790;stroke-width:3;transition:fill .14s ease,stroke .14s ease}.heart-toggle.on path{fill:#b97790;stroke:#b97790}.settingicon{width:26px;display:inline-flex;align-items:center;justify-content:center;flex:none;color:#8f6173;font-size:22px;line-height:1}.settingicon.music{font-size:26px}.checklabel{flex:1}.checkbutton:focus-visible{outline:2px solid #a85d77;outline-offset:3px;border-radius:12px}input[type=checkbox]{width:15px;height:15px;accent-color:#be7892;flex:none}input[type=range]{width:100%;accent-color:#ba7890;margin:8px 0}.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.seg button{border:1px solid #ead6db;background:#fff;border-radius:11px;padding:12px 5px;color:#65524c}.seg button.selected{background:#c78da3;border-color:#c78da3;color:#fff;font-weight:700}.labelrow,.rangeends,.previewbar,.sheethead,.keyhead,.playstats{display:flex;align-items:center;justify-content:space-between}.labelrow h2{margin:0}.labelrow strong{color:#aa5979}.rangeends,.previewbar,.sheethead,.keyhead{font-size:12px;color:#8a736d}.previewbox{background:#f7f0eb;padding:10px;border-radius:13px;margin-top:10px}.previewbar button{color:#a85d77;background:transparent;border:0;padding:5px}.previewsvg{width:100%;display:block;overflow:hidden}.previewmoving{animation:moveleft linear infinite}@keyframes moveleft{0%{transform:translate(0)}to{transform:translate(-400px)}}.stepper{display:flex;align-items:center;gap:10px;margin-top:8px}.stepper span{margin-right:auto}.stepper button{background:#f7ebee;border:none;border-radius:9px;width:34px;height:34px;color:#9c5870}.stepper b{font-size:13px;min-width:65px;text-align:center}.primary{background:#b97790;border:0;border-radius:15px;color:#fff;padding:15px;font-weight:700;font-size:16px}.primary.start{width:100%}.error{color:#ae3454;text-align:center;font-size:13px}.home{padding:20px 16px}.hero{position:relative;text-align:center;padding:30px 0 35px}.heroheart{font-size:25px;position:absolute;right:20%;top:20px;color:#d19caf}.heroicon{width:90px;height:90px;background:#fffaf5;margin:0 auto 17px;border-radius:27px;display:grid;place-items:center;font-size:53px;color:#b97790;box-shadow:0 6px 22px #b57d8a22}.hero h1{margin:0;font-size:28px;color:#855b6a}.hero p{color:#957f80;font-size:13px;margin-top:8px}.homecards{display:grid;gap:12px}.homecard{background:#fffaf5;border:0;border-radius:19px;display:flex;align-items:center;text-align:left;padding:18px 14px;gap:13px;color:#65524c;box-shadow:0 3px 12px #9567770d}.cardicon{font-size:26px;color:#bf7893;background:#f8e6eb;display:grid;place-items:center;width:52px;height:52px;border-radius:15px}.homecard span:nth-child(2){display:grid;gap:5px;flex:1}.homecard strong{font-size:16px}.homecard small{font-size:12px;color:#99807d}.homecard b{font-size:26px;color:#bd8b9c}.statpanel{display:flex;justify-content:space-around;background:#fffaf5;border-radius:18px;padding:18px 12px;margin-top:22px;font-size:13px}.statpanel b{font-size:19px;color:#b36f89;margin-left:6px}.footerhint{text-align:center;color:#a48b91;font-size:11px;margin-top:26px}.playbody{padding:0 12px;display:grid;gap:11px}.playstats{font-size:12px;color:#95747f;padding:0 3px}.sheetpanel{padding:10px 8px 3px;overflow:hidden}.sheethead{padding:3px 10px 5px}.staff{width:100%;display:block;max-height:290px}.feedback{font-size:14px;color:#826e67;min-height:28px;text-align:center;padding:3px}.feedback.good{color:#b46484;font-weight:750}.feedback.oops{color:#b05c64}.heartparticle{animation:popheart .85s ease-out both}@keyframes popheart{0%{opacity:0;transform:translateY(7px) scale(.55)}30%{opacity:1}to{opacity:0;transform:translateY(-17px) scale(1.24)}}.keypanel{padding:12px 0 14px}.keyhead{padding:0 14px 10px}.tinycheck{display:flex;align-items:center;gap:5px}.tinycheck input{width:15px;height:15px}.keyboardscroll{overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x;padding-bottom:4px;scrollbar-color:#dec2c9 transparent}.keyboard{position:relative;height:158px;user-select:none;-webkit-user-select:none}.whitekey,.blackkey{position:absolute;top:0;touch-action:pan-x}.whitekey{height:153px;border:1px solid #b9a8a5;border-radius:0 0 7px 7px;background:#fffdf9;color:#977e76;padding:0 0 8px;display:flex;align-items:end;justify-content:center;font-size:11px}.whitekey:active{background:#e8a9be}.whitekey.keyhint{background:#f8d6e2}.blackkey{height:94px;z-index:2;background:#514744;border:1px solid #3b3231;border-radius:0 0 6px 6px}.blackkey:active{background:#ad667f}.blackkey.keyhintblack{background:#a9607a}.durationpanel{padding:14px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.choice{border:1px solid #ead5d9;background:#fff8f8;border-radius:11px;padding:12px 5px;color:#765e63;font-size:13px}.choice.chosen{background:#d9a3b6;color:#fff;border-color:#d9a3b6}.muted{color:#99827e;font-size:12px}.center{text-align:center}.pauseoverlay{position:fixed;inset:0;z-index:10;background:#402b32ae;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;color:#fff}.pauseoverlay h2{font-size:23px}.textbutton{color:#fff;background:transparent;border:0;padding:9px}@media(min-width:600px){.home{padding:30px 35px}.settings{padding:0 30px 30px}.playbody{padding:0 24px}.keyboard{height:180px}.whitekey{height:175px}.blackkey{height:106px}}.whitekey.keyselected{background:#e8abc0;border-color:#bb6f8b}.blackkey.keyselected{background:#cc819e;border-color:#a65f7b}.mistake-cross{pointer-events:none;transform-box:fill-box;transform-origin:center;animation:mistake-cross-pop .8s ease-out forwards}@keyframes mistake-cross-pop{0%{opacity:0;scale:.55}18%{opacity:1;scale:1.12}38%{scale:1}72%{opacity:1}to{opacity:0;scale:1.12}}@media(prefers-reduced-motion:reduce){.mistake-cross{animation:mistake-cross-static .8s linear forwards}@keyframes mistake-cross-static{0%,75%{opacity:1}to{opacity:0}}}.soundtoolbar{display:flex;align-items:center;justify-content:flex-start;padding:3px 5px}.soundtoolbar button{font-size:14px;padding:12px 16px;min-width:158px}.placement-staff{position:relative;touch-action:manipulation}.placement-overlay{position:absolute;inset:0;width:100%;height:100%;touch-action:manipulation;user-select:none;-webkit-user-select:none}.placecontrols{background:#fffaf5;border-radius:20px;padding:15px;display:grid;gap:12px}.placecontrols-title{font-size:14px;color:#725d58}.accidentalseg{grid-template-columns:repeat(4,minmax(0,1fr))}.accidentalseg button{padding:11px 4px}.text-reset{border:0;background:transparent;color:#ac6782;padding:10px}.placement-overlay:focus{outline:2px solid #c78da3}.placement-timer{background:#f4dbe4;height:7px;border-radius:9px;overflow:hidden}.placement-timer>div{height:100%;background:#c9869f;transition:width .08s linear}.sheethead.compact{padding:2px 10px 7px}.placement-target{cursor:pointer}.placement-target:hover ellipse{stroke:#b86886;stroke-width:1.8}.placement-target:focus-visible{outline:none}.placement-target:focus-visible ellipse{stroke:#b86886;stroke-width:2.2}.placement-target.disabled{pointer-events:none;opacity:.55}.heart-home{display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vh,60px) 16px;min-height:100dvh}.heart-home-buttons{width:min(100%,440px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(8px,3vw,24px);row-gap:clamp(2px,2vh,18px);justify-items:center;align-items:center}.heart-home-button{position:relative;width:100%;max-width:202px;aspect-ratio:200 / 184;padding:0;border:0;background:transparent;color:#fffaf5;display:grid;place-items:center;isolation:isolate;cursor:pointer;-webkit-tap-highlight-color:transparent}.heart-home-button.heart-top{grid-column:1 / -1}.heart-home-button svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 7px #91536525)}.heart-home-button svg path{fill:#b97790;stroke:#a96b85;stroke-width:1.1;transition:fill .14s ease}.heart-home-button span{position:relative;z-index:1;font-weight:750;font-size:clamp(13px,3.5vw,17px);white-space:nowrap;transform:translateY(-3px);pointer-events:none}.heart-home-button:active svg path{fill:#a76681}.heart-home-button:focus-visible{outline:3px solid #86526c;outline-offset:4px;border-radius:24px}@media(hover:hover){.heart-home-button:hover svg path{fill:#a96d87}}@media(min-width:600px){.heart-home{padding:40px 28px}}.heart-home-button svg,.heart-start-button svg{filter:drop-shadow(0 3px 0 #925c73) drop-shadow(0 10px 9px #70435937) drop-shadow(0 2px 3px #70435928)}.heart-home-button svg path,.heart-start-button svg path{fill:#bb7d96;stroke:#aa6c86;stroke-width:1.1;transition:fill .14s ease,filter .14s ease}.heart-home-button:active svg,.heart-start-button:active:not(:disabled) svg{filter:drop-shadow(0 1px 0 #925c73) drop-shadow(0 4px 4px #70435928);transform:translateY(2px)}@media(hover:hover){.heart-home-button:hover svg path,.heart-start-button:hover:not(:disabled) svg path{fill:#c38aa1}}.settings{padding-bottom:calc(178px + env(safe-area-inset-bottom,0px))}.settings-start-dock{position:fixed;bottom:0;left:50%;transform:translate(-50%);z-index:5;width:min(100%,680px);height:calc(163px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,#f7ebee00,#f7ebeedc 27%,#f7ebee 67%);pointer-events:none}.heart-start-button{position:relative;display:grid;place-items:center;isolation:isolate;width:148px;height:136px;flex:none;border:0;padding:0;background:transparent;color:#fffaf5;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}.heart-start-button svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.heart-start-button span{position:relative;z-index:1;font-weight:750;font-size:17px;transform:translateY(-4px);pointer-events:none}.heart-start-button:disabled{opacity:.45;cursor:not-allowed}.heart-start-button:focus-visible{outline:3px solid #86526c;outline-offset:3px;border-radius:24px}@media(max-height:560px){.settings-start-dock{height:calc(120px + env(safe-area-inset-bottom,0px))}.heart-start-button{width:115px;height:106px}.heart-start-button span{font-size:14px}.settings{padding-bottom:calc(137px + env(safe-area-inset-bottom,0px))}}.global-navigation{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:max(12px,calc((100vw - 680px)/2 + 12px));z-index:20;display:flex;gap:8px}.global-nav-button{width:44px;height:44px;display:grid;place-items:center;border:1px solid #e4cad2;border-radius:14px;color:#95657a;background:#fffaf5;box-shadow:0 2px 7px #8d657014}.global-nav-button svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linejoin:round;stroke-linecap:round}.global-nav-button:focus-visible,.gear-close:focus-visible{outline:2px solid #a85d77;outline-offset:3px}.header{padding-right:118px;justify-content:space-between;gap:8px;padding-top:env(safe-area-inset-top,0px);height:calc(64px + env(safe-area-inset-top,0px))}.header h1{font-size:17px}.play-pause{width:38px;height:38px;font-size:20px;flex-shrink:0}.heart-home{padding-top:calc(70px + env(safe-area-inset-top,0px))}.gear-backdrop{position:fixed;inset:0;z-index:30;background:#3a273879;display:flex;align-items:center;justify-content:center;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px))}.gear-panel{width:min(100%,560px);max-height:100%;overflow:auto;overscroll-behavior:contain;background:#f7ebee;padding:14px;border-radius:22px;box-shadow:0 18px 45px #4a26354a;display:grid;gap:13px}.gear-heading{display:flex;align-items:center;justify-content:space-between;padding:3px 4px}.gear-heading h2{font-size:19px;margin:0}.gear-close{width:42px;height:42px;border:none;border-radius:13px;color:#95657a;background:#fffaf5;font-size:26px}.gear-panel .panel{box-shadow:none}.playbody{grid-template-columns:minmax(0,1fr);min-width:0}.playbody>.sheetpanel,.playbody>.keypanel,.playbody>.durationpanel,.playbody>.placecontrols{min-width:0;max-width:100%}.keypanel{overflow:hidden}.keyboardscroll{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden}.play{position:relative;padding-top:calc(90px + env(safe-area-inset-top,0px))}.playbody{position:relative}.play .keypanel{padding-top:7px}.combo-area{position:absolute;z-index:4;top:-56px;right:8px;width:88px;height:52px;display:grid;place-items:center;color:#b97790;pointer-events:none}.combo-count{font-size:28px;font-weight:800;line-height:1;text-align:center;position:relative;z-index:1;animation:combo-bump .35s ease-out}.combo-count small{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;margin-top:3px}.combo-hearts{position:absolute;inset:0;display:grid;place-items:center}.combo-hearts span{position:absolute;font-size:14px;color:#d88eac;opacity:0;animation:combo-heart-burst .7s ease-out forwards;transform:rotate(var(--angle)) translateY(0)}@keyframes combo-bump{0%{transform:scale(.8)}50%{transform:scale(1.23)}to{transform:scale(1)}}@keyframes combo-heart-burst{0%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.4)}24%{opacity:1}to{opacity:0;transform:rotate(var(--angle)) translateY(-44px) scale(1.15)}}@media(prefers-reduced-motion:reduce){.combo-count,.combo-hearts span{animation:none}}.keyboardscroll{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}.keyboardscroll::-webkit-scrollbar{display:none}.keyboard-wrap{min-width:0;max-width:100%;overflow:hidden}.keyboard-scroll-control{height:42px;padding:5px 18px 2px;display:flex;align-items:center;justify-content:center;touch-action:pan-y}.keyboard-heart-scroll{width:100%;height:36px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:none}.keyboard-heart-scroll::-webkit-slider-runnable-track{height:7px;background:#ecd2db;border-radius:10px}.keyboard-heart-scroll::-moz-range-track{height:7px;background:#ecd2db;border-radius:10px}.keyboard-heart-scroll::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:29px;margin-top:-11px;background:#b97790;clip-path:polygon(50% 97%,7% 52%,0% 30%,6% 10%,23% 0%,40% 5%,50% 18%,60% 5%,77% 0%,94% 10%,100% 30%,93% 52%);filter:drop-shadow(0 2px 1px #86516855)}.keyboard-heart-scroll::-moz-range-thumb{width:30px;height:29px;border:0;border-radius:0;background:#b97790;clip-path:polygon(50% 97%,7% 52%,0% 30%,6% 10%,23% 0%,40% 5%,50% 18%,60% 5%,77% 0%,94% 10%,100% 30%,93% 52%)}.keyboard-heart-scroll:focus-visible{outline:2px solid #a85d77;outline-offset:2px;border-radius:8px}.whitekey span{pointer-events:none;font-weight:650}.combo-area{position:fixed;top:calc(75px + env(safe-area-inset-top,0px));right:max(13px,calc((100vw - 680px)/2 + 13px));z-index:8}.landscape-hint{display:none}@media(orientation:portrait)and (max-width:700px){.landscape-hint{display:block;text-align:center;color:#95657a;font-size:12px;margin:-14px 0 12px}.play{padding-top:calc(114px + env(safe-area-inset-top,0px))}.combo-area{top:calc(67px + env(safe-area-inset-top,0px));right:120px;width:72px}}@media(orientation:landscape)and (max-height:650px){.app.play{width:min(100%,1150px);max-width:none;padding-top:calc(64px + env(safe-area-inset-top,0px))}.playbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;align-items:start;padding:0 12px}.playbody>.sheetpanel{grid-column:1;grid-row:1 / span 2}.playbody>.keypanel{grid-column:2;grid-row:1}.playbody>.durationpanel,.playbody>.placecontrols{grid-column:2}.playbody>.soundtoolbar,.playbody>.placement-timer,.playbody>.feedback{grid-column:1}.staff{max-height:min(68vh,290px)}.keyboard{height:135px}.whitekey{height:130px}.blackkey{height:81px}.combo-area{top:calc(69px + env(safe-area-inset-top,0px));right:18px;width:70px}.global-navigation{right:12px}}.keyboard-scroll-control{min-height:76px;height:clamp(76px,14vh,120px);padding:0 12px;touch-action:none}.keyboard-heart-scroll{display:block;width:100%;height:100%;min-height:76px;margin:0;touch-action:none;cursor:ew-resize}.keyboard-heart-scroll::-webkit-slider-thumb{margin-top:-11px}@media(orientation:landscape)and (max-height:650px){.keyboard-scroll-control{height:76px;min-height:76px}.keyboard-heart-scroll{min-height:76px}}.keyboard-scroll-control{align-items:flex-start;justify-content:center;cursor:ew-resize;user-select:none;-webkit-user-select:none}.keyboard-heart-scroll{height:42px;min-height:42px;flex:none;pointer-events:none}.play .combo-area{position:fixed;top:calc(76px + env(safe-area-inset-top,0px));left:50%;right:auto;transform:translate(-50%);width:88px;z-index:8}@media(orientation:landscape)and (max-height:650px){.play .combo-area{top:calc(66px + env(safe-area-inset-top,0px))}}@media(orientation:portrait){.app.play{display:flex;flex-direction:column;min-height:100dvh}.app.play>.playbody{width:100%;flex:0 0 auto;margin-block:auto}}.keyboard-wrap.hold-input .whitekey,.keyboard-wrap.hold-input .blackkey,.rest-hold,.placement-overlay.duration-hold,.placement-overlay.duration-hold .placement-target{touch-action:none}