:root{color:#4a2a21;background:#fff4d6;font-family:ui-rounded,Arial Rounded MT Bold,Hiragino Maru Gothic ProN,PingFang SC,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden}button{border:0;font:inherit;cursor:pointer;touch-action:manipulation}.shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,410px);background:radial-gradient(circle at 14% 12%,rgba(255,255,255,.7),transparent 18rem),linear-gradient(130deg,#fff3b2,#ffc0a5 48%,#97dcc5)}.stage{position:relative;min-height:100vh;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}#gameCanvas{width:100%;height:calc(100vh - 32px);min-height:420px;display:block;border:6px solid rgba(92,54,35,.18);border-radius:28px;box-shadow:0 24px 60px #5838202e;touch-action:none}.onboardingPanel{display:grid;gap:14px;color:#512b23}.onboardingPanel[hidden],.controlContent[hidden]{display:none}.controlContent{display:contents}.freeNotice{max-width:100%;padding:12px 14px 12px 16px;border-inline-start:5px solid #7aa85a;border-radius:12px;color:#4a2a21c2;background:#fffaec8a;font-size:clamp(.84rem,1.8vw,.95rem);line-height:1.45;font-weight:850}.onboardingHeader{max-width:36rem}.onboardingHeader p{margin:0 0 6px;color:#986032;font-size:clamp(.78rem,1.6vw,.92rem);font-weight:1000;letter-spacing:0}.onboardingHeader h2{margin:0;font-size:clamp(1.45rem,3.2vw,2.25rem);line-height:1;letter-spacing:0}.faqList{display:grid;gap:10px}.faqList details{border-radius:20px;background:#fffaece6;border:2px solid rgba(92,54,35,.12);box-shadow:0 10px 28px #4a2a211f}.faqList summary{min-height:48px;display:grid;align-items:center;padding:10px 13px;color:#5a3127;font-size:.88rem;font-weight:1000;cursor:pointer}.faqList p{margin:0;padding:0 13px 13px;color:#4a2a21b8;font-size:.82rem;line-height:1.55;font-weight:750}.startUseButton{inline-size:100%;min-height:56px;border-radius:20px;font-size:1.02rem;font-weight:1000}.hud{position:absolute;inset-block-start:max(28px,calc(env(safe-area-inset-top) + 18px));inset-inline:34px auto;z-index:3;display:flex;gap:12px;flex-wrap:wrap}.meter{min-width:92px;padding:10px 14px;border-radius:18px;background:#fffaeee0;border:2px solid rgba(93,57,36,.13);box-shadow:0 8px 24px #472d1f1f}.meter span,.smallLabel{display:block;font-size:.78rem;font-weight:800;color:#4a2a21a8}.meter strong{display:block;margin-block-start:2px;font-size:1.42rem;line-height:1}.hearts strong{color:#e84a5f;letter-spacing:1px}body[data-mode=performance] .meter strong{font-size:1.05rem}body[data-mode=performance] .hearts strong{color:#5a3127;letter-spacing:0}.statusBubble{position:absolute;z-index:3;left:50%;bottom:max(30px,calc(env(safe-area-inset-bottom) + 20px));transform:translate(-50%);max-width:min(560px,calc(100% - 48px));padding:13px 22px;border-radius:999px;color:#5a3127;background:#fffbebeb;border:2px solid rgba(92,54,35,.12);font-weight:900;text-align:center;box-shadow:0 14px 34px #4a2a2126}.stageIntroCard{position:absolute;z-index:4;inset-block-start:max(118px,calc(env(safe-area-inset-top) + 92px));inset-inline-start:50%;display:grid;justify-items:center;gap:12px;inline-size:min(500px,calc(100% - 56px));padding:18px 18px 20px;transform:translate(-50%) rotate(-1.5deg);pointer-events:none;color:#513027;background:linear-gradient(180deg,#fffdeff5,#fff2c5f0),radial-gradient(circle at 18% 14%,rgba(255,255,255,.9),transparent 9rem);border:3px solid rgba(92,54,35,.15);border-radius:24px;box-shadow:0 16px #7a4a272e,0 28px 58px #4a2a2133}.stageIntroCard[hidden]{display:none}.stageIntroCard:before,.stageIntroCard:after{position:absolute;inset-block-start:-12px;inline-size:78px;block-size:22px;content:"";border-radius:999px;background:#ffbd56db;box-shadow:0 4px #79442624}.stageIntroCard:before{inset-inline-start:36px;transform:rotate(-7deg)}.stageIntroCard:after{inset-inline-end:38px;transform:rotate(8deg)}.stageIntroCard p{margin:0;max-inline-size:17em;font-size:clamp(1.08rem,2.6vw,1.75rem);line-height:1.18;font-weight:1000;text-align:center;letter-spacing:0}.homeworkArt{position:relative;display:grid;grid-template-columns:repeat(3,58px);align-items:end;justify-content:center;gap:8px;min-block-size:78px}.artBubble{display:grid;place-items:center;inline-size:58px;block-size:58px;border:3px solid rgba(92,54,35,.12);border-radius:18px;background:#ffffffb3;box-shadow:0 8px #5c36231f;font-size:2rem}.artBook{transform:rotate(-8deg)}.artViolin{inline-size:68px;block-size:68px;border-radius:22px;background:#ffe18c;font-size:2.45rem;transform:translateY(-9px)}.artHanger{transform:rotate(8deg)}.hangerIcon{inline-size:42px;block-size:42px;fill:none;stroke:#5f3a2b;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.controlPanel{min-height:100vh;max-height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:15px;padding:max(28px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));background:#fff9e6b8;border-left:3px solid rgba(92,54,35,.13);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brandBlock{padding-block-start:10px}.eyebrow{margin:0 0 8px;color:#986032;font-size:.78rem;font-weight:1000;text-transform:uppercase;letter-spacing:0}h1{margin:0;color:#512b23;font-size:clamp(2rem,3.1vw,2.9rem);line-height:1.02;letter-spacing:0}h1 span{display:block;white-space:nowrap}.intro{max-width:27rem;margin:16px 0 0;color:#4a2a21bd;font-size:1.05rem;font-weight:700;line-height:1.6}.languageSwitch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.languageSwitch button{min-height:38px;border-radius:14px;color:#593228;background:#fff8dfc7;border:2px solid rgba(82,48,37,.1);font-size:.78rem;font-weight:1000}.languageSwitch button.isSelected{color:#fff9e8;background:#7b4bd8;border-color:transparent}.modeSwitch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:6px;border-radius:22px;background:#5230251a}.modeSwitch button{min-height:48px;border-radius:16px;color:#593228;background:transparent;font-weight:1000}.modeSwitch button.isSelected{color:#fff9e8;background:#5f7f35;box-shadow:0 6px #36511b}.actions{display:grid;gap:11px}.actions button{min-height:58px;border-radius:20px;font-weight:1000;font-size:1.03rem;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.actions button:active,.notePad button:active{transform:translateY(2px) scale(.99)}.actions button:disabled{cursor:default;filter:saturate(.86);opacity:.72;transform:none}.primary{color:#fff9e8;background:#7742c6;box-shadow:0 12px #4e2b84}.secondary{color:#523025;background:#fff8df;border:2px solid rgba(82,48,37,.14);box-shadow:0 8px #85542738}.practicePicker{display:grid;gap:9px}.songOnly,body[data-mode=performance] .practiceOnly{display:none}body[data-mode=performance] .songOnly{display:grid}body[data-mode=performance] .actions .songOnly{display:block}.sectionLabel{margin:0;color:#4a2a21b8;font-size:.86rem;font-weight:1000}.songPicker{gap:9px}.songGrid{display:grid;gap:9px}.songButton{min-height:64px;padding:10px 12px;border-radius:18px;color:#593228;background:#fff8dfdb;border:2px solid rgba(82,48,37,.12);box-shadow:0 6px #8554272e;text-align:start}.songButton b,.songButton span,.songButton i{display:block}.songButton b{font-size:1rem;line-height:1.15}.songButton span{margin-block-start:5px;color:#4a2a219e;font-size:.8rem;font-weight:900}.songButton i{margin-block-start:7px;color:#4a2a21b8;font-size:.72rem;font-style:normal;font-weight:1000}.songButton.isSelected{color:#fff9e8;background:#7b4bd8;box-shadow:0 6px #4e2b84}.songButton.isSelected span{color:#fff9e8c7}.songButton.isSelected i{color:#fff9e8e0}.segmentGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.segmentButton{min-height:48px;padding:8px;border-radius:18px;color:#593228;background:#fff8dfdb;border:2px solid rgba(82,48,37,.12);box-shadow:0 6px #8554272e;text-align:start}.segmentButton b,.segmentButton span{display:block}.segmentButton b{font-size:.82rem;line-height:1.15}.segmentButton span{margin-block-start:3px;color:#4a2a219e;font-size:.76rem;font-weight:900}.segmentButton.isSelected{color:#fff9e8;background:#5f7f35;box-shadow:0 6px #36511b}.segmentButton.isSelected span{color:#fff9e8c7}.notePad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.notePad button{min-height:82px;border-radius:20px;padding:10px 6px;color:#fffaf1;background:var(--note-color);box-shadow:0 9px color-mix(in srgb,var(--note-color),#482219 34%)}.notePad b,.notePad span{display:block}.notePad b{font-size:1.45rem;line-height:1}.notePad span{margin-block-start:6px;font-size:.68rem;font-weight:900}.audioCard{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px;border-radius:24px;background:#fffaebd1;border:2px solid rgba(82,48,37,.13)}.audioCard strong{display:block;margin-block-start:5px;font-size:1.24rem}.volumeTrack{grid-column:1 / -1;height:18px;overflow:hidden;border-radius:999px;background:#5230251f}.volumeTrack i{display:block;inline-size:0%;block-size:100%;border-radius:inherit;background:linear-gradient(90deg,#52b788,#f5a524,#e84a5f);transition:inline-size 90ms linear}.helper{margin:auto 0 0;padding:15px 0 0;border-top:2px dashed rgba(82,48,37,.16);color:#4a2a21b3;font-size:.95rem;line-height:1.55;font-weight:750}.notePad button.isActive{filter:brightness(1.12) saturate(1.2);outline:5px solid rgba(255,255,255,.86)}@media(max-width:860px){body{overflow:auto}.shell{min-height:100svh;grid-template-columns:1fr}.stage{min-height:58svh;padding:10px}#gameCanvas{height:58svh;min-height:380px;border-radius:22px}.onboardingHeader h2{font-size:clamp(1.45rem,7vw,2.1rem)}.faqList summary{min-height:44px;padding:9px 12px}.faqList p{padding:0 12px 11px}.controlPanel{min-height:auto;max-height:none;overflow:visible;border-left:0;border-top:3px solid rgba(92,54,35,.13);padding:18px 16px max(18px,env(safe-area-inset-bottom))}h1{font-size:clamp(2rem,9vw,2.85rem)}.intro{margin-block-start:10px}.hud{inset-inline-start:20px;inset-block-start:20px}.meter{min-width:80px;padding:8px 11px}.notePad{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.notePad button{min-height:92px;border-radius:24px;padding:12px}.notePad b{font-size:1.75rem}.notePad span{font-size:.84rem}.segmentGrid{grid-template-columns:1fr}.segmentButton{min-height:64px;padding:10px}.segmentButton b{font-size:.9rem}.segmentButton span{margin-block-start:5px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}