:root{--c-do: #FF6B6B;--c-do-soft: #FFB4B4;--c-do-deep: #C24545;--c-re: #FFA94D;--c-re-soft: #FFD4A8;--c-re-deep: #C77A26;--c-mi: #FFD43B;--c-mi-soft: #FFE99A;--c-mi-deep: #C49E1B;--c-fa: #51CF66;--c-fa-soft: #B0E8B6;--c-fa-deep: #2EA043;--c-sol: #4DABF7;--c-sol-soft: #B0D6F8;--c-sol-deep: #2980D8;--c-la: #845EF7;--c-la-soft: #C4B0FA;--c-la-deep: #5A3CC4;--c-si: #F783AC;--c-si-soft: #FBB8D0;--c-si-deep: #C75888;--c-do-high: #FFB4B4;--c-do-high-soft: #FFE0E0;--c-do-high-deep: #D17878;--c-bg: #FFF7DA;--c-bg-deep: #FFEBA0;--c-surface: #FFFFFF;--c-surface-soft: #FFFBF0;--c-ink: #2B2B2B;--c-ink-soft: #6B6B6B;--c-ink-mute: #A3A3A3;--c-stroke: rgba(0, 0, 0, .06);--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-7: 32px;--r-sm: 8px;--r-md: 14px;--r-lg: 20px;--r-xl: 26px;--r-pill: 999px;--elev-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06);--elev-2: 0 2px 4px rgba(0,0,0,.08), 0 6px 14px rgba(0,0,0,.08);--elev-3: 0 4px 10px rgba(0,0,0,.12), 0 14px 30px rgba(0,0,0,.14);--elev-pop: 0 18px 50px rgba(0,0,0,.22);--ease-out: cubic-bezier(.2, .7, .4, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-snap: cubic-bezier(.34, 1.7, .64, 1);--dur-1: .12s;--dur-2: .22s;--dur-3: .36s;--dur-4: .6s;--font-display: "SF Pro Rounded", ui-rounded, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif}*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;user-drag:none}html,body,#root{margin:0;padding:0;height:100%;width:100%;overflow:hidden;background:radial-gradient(ellipse at top,rgba(255,235,160,.7) 0%,transparent 55%),radial-gradient(ellipse at bottom,rgba(255,200,130,.4) 0%,transparent 55%),var(--c-bg);color:var(--c-ink);font-family:var(--font-display);font-size:17px;line-height:1.4;letter-spacing:.01em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;touch-action:manipulation;overscroll-behavior:none}button{font-family:inherit;border:none;cursor:pointer;touch-action:manipulation;color:inherit}.app{position:relative;height:100vh;height:100dvh;width:100vw;display:flex;flex-direction:column;transition:background .6s ease}.app.scene-forest-dawn{background:linear-gradient(180deg,#ffb4d6,#ffe066,#b0e8b6)}.app.scene-forest-day{background:linear-gradient(180deg,#b0d6f8,#ffe066 70%,#51cf66)}.app.scene-forest-dusk{background:linear-gradient(180deg,#2b2b5b,#845ef7 25%,#ff8c42 60%,#ffd43b)}.app.scene-pond{background:linear-gradient(180deg,#b0d6f8,#4dabf7 60%,#2980d8)}.app.scene-big-tree{background:linear-gradient(180deg,#b0e8b6,#51cf66,#2ea043 80%,#1f5e2a)}.app.scene-meadow{background:linear-gradient(180deg,#b0d6f8,#ffe066,#b0e8b6)}.app.scene-rain-soft{background:linear-gradient(180deg,#d8e3f5,#a8b8d6,#7a8aae)}.app.scene-rain-heavy{background:linear-gradient(180deg,#5a6982,#3a4a64 60%,#1f2a40)}.app.scene-after-rain{background:linear-gradient(180deg,#ffe9a8,#b0d6f8 60%,#51cf66)}.app.scene-rainbow{background:linear-gradient(180deg,#ff6b6b,#ffa94d 16%,#ffd43b,#51cf66 50%,#4dabf7 66%,#845ef7,#f783ac)}.app.scene-night-sky{background:radial-gradient(ellipse at top,#4a4f80,#1a1d3a 70%)}.app.scene-night-stage{background:radial-gradient(circle at center,#4a4f80,#1a1d3a 60%)}.app.scene-moonlight-stage{background:radial-gradient(circle at top,#ffe066,#845ef7 30%,#1a1d3a 80%)}.app.scene-party{background:linear-gradient(180deg,#ffb4d6,#ffd43b,#ff8c42)}.app.scene-farm-dawn{background:linear-gradient(180deg,#ffd4a8,#ffe066,#ffb4b4)}.app.scene-farm-pond{background:linear-gradient(180deg,#b0e8b6,#b0d6f8,#4dabf7)}.app.scene-farm-day{background:linear-gradient(180deg,#b0d6f8,#ffe066 60%,#b0e8b6)}.app.scene-coral{background:linear-gradient(180deg,#ffb4b4,#f783ac,#ffa94d)}.app.scene-ocean-shallow{background:linear-gradient(180deg,#b0e8b6,#4dabf7 60%,#2980d8)}.app.scene-ocean-deep{background:linear-gradient(180deg,#4dabf7,#2980d8 30%,#1a1d3a)}.app.scene-launch-pad{background:linear-gradient(180deg,#ff8c42,#ffd43b 30%,#845ef7 70%,#2b2b5b)}.app.scene-rocket-flight{background:linear-gradient(180deg,#2980d8,#845ef7,#2b2b5b)}.app.scene-meteor-shower{background:linear-gradient(180deg,#2b2b5b,#845ef7 30%,#ff6b6b 70%,#ffd43b)}.hud{position:absolute;top:var(--sp-3);left:var(--sp-3);right:var(--sp-3);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);z-index:6;pointer-events:none}.hud>*{pointer-events:auto}.hud-cluster{display:flex;align-items:center;gap:var(--sp-2)}.status-pill{background:#ffffffb3;backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);color:var(--c-ink);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);font-size:14px;font-weight:700;letter-spacing:.02em;border:1px solid rgba(255,255,255,.7);box-shadow:var(--elev-1);display:inline-flex;align-items:center;gap:var(--sp-2);font-variant-numeric:tabular-nums}.status-pill .dim{color:var(--c-ink-mute);font-weight:500}.status-pill.rec{background:linear-gradient(180deg,#ff8585,#e94545);color:#fff;border-color:#fff6;animation:status-blink 1.1s ease-in-out infinite}@keyframes status-blink{0%,to{box-shadow:var(--elev-1),0 0 #e9454580}50%{box-shadow:var(--elev-1),0 0 0 12px #e9454500}}.gear-btn{width:52px;height:52px;border-radius:50%;background:#ffffffc7;backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.7);box-shadow:var(--elev-2);padding:0;display:inline-flex;align-items:center;justify-content:center;transition:transform var(--dur-1) var(--ease-out)}.gear-btn:active{background:#fffffff2;transform:scale(.94)}.gear-icon{font-size:24px;line-height:1}.fs-corner-btn{width:52px;height:52px;border-radius:50%;background:#ffffffc7;backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.7);box-shadow:var(--elev-2);padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--c-ink-soft);transition:transform var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}.fs-corner-btn:active{background:#fffffff2;transform:scale(.94)}.fs-corner-btn.exit{width:44px;height:44px;background:#2b2b2b8c;color:#ffffffe6;border-color:#fff3}.fs-corner-btn.exit:active{background:#2b2b2bbf}.home-btn{width:52px;height:52px;border-radius:50%;background:#ffffffc7;backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.7);box-shadow:var(--elev-2);padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--c-ink-soft);transition:transform var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}.home-btn:active{background:#fffffff2;transform:scale(.94)}.hud.hud-home{justify-content:flex-end}.piano-stage{flex:1 1 auto;position:relative;display:flex;align-items:stretch;padding:var(--sp-4);padding-top:76px;min-height:0}.mascot{position:fixed;top:clamp(8px,1.6vh,16px);left:50%;transform:translate(-50%);width:92px;height:76px;text-align:center;pointer-events:none;z-index:5}.mascot-halo{position:absolute;top:-2px;left:50%;margin-left:-36px;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,#fff0b4e0,#ffe08c8c,#ffe08c00 70%);filter:blur(2px);animation:mascot-halo-pulse 4s ease-in-out infinite}@keyframes mascot-halo-pulse{0%,to{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}.mascot-body-wrap{position:relative;display:inline-block;margin-top:6px}.mascot-body{display:inline-block;font-size:50px;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.28));transform-origin:50% 80%}.mood-idle .mascot-body{animation:mascot-breathe 3s ease-in-out infinite}.mood-listening .mascot-body{animation:mascot-listen .7s ease-in-out}.mood-waiting .mascot-body{animation:mascot-tilt 2.4s ease-in-out infinite}.mood-cheering .mascot-body{animation:mascot-cheer .6s var(--ease-spring) infinite}@keyframes mascot-breathe{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.05) rotate(0)}}@keyframes mascot-listen{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-8px) rotate(-5deg)}60%{transform:translateY(-4px) rotate(5deg)}to{transform:translateY(0) rotate(0)}}@keyframes mascot-tilt{0%,to{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}@keyframes mascot-cheer{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.mascot-note{position:absolute;top:18px;font-size:18px;font-weight:800;color:#ffa94d;text-shadow:0 1px 2px rgba(0,0,0,.18);pointer-events:none;animation:mascot-note-rise 1.2s ease-out forwards}.mascot-note.n1{left:-4px;animation-delay:0s}.mascot-note.n2{right:-4px;animation-delay:.25s}@keyframes mascot-note-rise{0%{transform:translateY(6px) scale(.6);opacity:0}20%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-32px) scale(.85);opacity:0}}.mascot-bubble{position:absolute;top:-4px;right:-8px;min-width:26px;height:26px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--c-ink);background:#fff;border:2px solid var(--c-stroke);border-radius:999px;box-shadow:var(--elev-1);animation:bubble-pop .22s var(--ease-spring)}@keyframes bubble-pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.timbre-picker{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-4) max(4vw,16px);padding-top:76px;min-height:0;flex-wrap:wrap}.timbre-card{--accent: var(--c-mi);flex:1 1 200px;max-width:280px;min-height:28vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-4);border-radius:var(--r-xl);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,#fff),color-mix(in srgb,var(--accent) 48%,#fff));border:3px solid color-mix(in srgb,var(--accent) 65%,#fff);box-shadow:0 6px color-mix(in srgb,var(--accent) 60%,#000 0%),0 12px 24px color-mix(in srgb,var(--accent) 30%,transparent);transition:transform var(--dur-1) var(--ease-out)}.timbre-card:active{transform:scale(.96) translateY(2px);box-shadow:0 2px color-mix(in srgb,var(--accent) 60%,#000 0%),0 4px 8px color-mix(in srgb,var(--accent) 30%,transparent)}.timbre-card-emoji{font-size:clamp(56px,12vh,110px);line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18))}.timbre-card-name{font-size:22px;font-weight:800;color:var(--c-ink)}.timbre-card-hint{font-size:12px;font-weight:600;color:var(--c-ink-mute);letter-spacing:.02em}.piano{position:relative;flex:1 1 auto;display:flex;gap:var(--sp-2)}.key{position:relative;flex:1 1 0;border-radius:var(--r-lg);background:linear-gradient(180deg,color-mix(in srgb,var(--key-color, #fff) 65%,#fff 35%) 0%,var(--key-color, #fff) 55%,color-mix(in srgb,var(--key-color, #fff) 88%,#000 12%) 100%);box-shadow:inset 0 2px 1px #ffffff8c,inset 0 -3px 2px #0000001a,0 5px color-mix(in srgb,var(--key-color, #fff) 70%,#000 30%),0 12px 22px -6px #0003;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:var(--sp-4);overflow:hidden;transition:transform 60ms var(--ease-out),box-shadow 60ms var(--ease-out),filter 60ms var(--ease-out)}.key .label{font-size:clamp(16px,3vh,28px);font-weight:800;color:#0000009e;text-shadow:0 1px 0 rgba(255,255,255,.55);letter-spacing:.08em;font-variant-numeric:tabular-nums}.key .animal{width:56%;max-width:110px;margin-bottom:var(--sp-2);filter:drop-shadow(0 3px 4px rgba(0,0,0,.22));pointer-events:none;transition:transform var(--dur-2) var(--ease-snap)}.key:after{content:"";position:absolute;bottom:32%;left:50%;width:70%;height:70%;transform:translate(-50%);background:radial-gradient(circle,#ffffff8c,#fff0 60%);pointer-events:none;opacity:.65}.key.pressed{transform:translateY(5px);filter:brightness(1.1) saturate(1.15);box-shadow:inset 0 2px 1px #fff6,inset 0 -2px 1px #0000001a,0 0 color-mix(in srgb,var(--key-color, #fff) 70%,#000 30%),0 4px 12px -3px #00000038}.key.pressed .animal{animation:animal-bounce var(--dur-3) var(--ease-snap)}.key .icon-emoji{line-height:1;font-size:clamp(40px,9vh,80px);margin-bottom:var(--sp-2);filter:drop-shadow(0 3px 4px rgba(0,0,0,.22));pointer-events:none;transition:transform var(--dur-2) var(--ease-snap)}.key .icon-emoji.size-big{font-size:clamp(48px,11vh,96px)}.key .icon-emoji.size-small{font-size:clamp(34px,7vh,64px)}.key.pressed .icon-emoji{animation:animal-bounce var(--dur-3) var(--ease-snap)}.key.icon-override .label{font-size:clamp(11px,1.6vh,14px);letter-spacing:.04em;text-transform:none}@keyframes animal-bounce{0%{transform:scale(1)}45%{transform:scale(1.28) rotate(-4deg)}to{transform:scale(1)}}.key.hint{animation:pulse 1.05s ease-in-out infinite;outline:4px dashed rgba(255,255,255,.85);outline-offset:-10px}@keyframes pulse{0%,to{box-shadow:inset 0 2px 1px #ffffff8c,inset 0 -3px 2px #0000001a,0 5px color-mix(in srgb,var(--key-color, #fff) 70%,#000 30%),0 12px 22px -6px #0003,0 0 #ff8c42b3}50%{box-shadow:inset 0 2px 1px #ffffff8c,inset 0 -3px 2px #0000001a,0 5px color-mix(in srgb,var(--key-color, #fff) 70%,#000 30%),0 12px 22px -6px #0003,0 0 0 16px #ff8c4200}}.pitch-mark{position:absolute;font-size:clamp(16px,2.4vh,24px);opacity:.28;pointer-events:none;filter:saturate(.55);z-index:1}.pitch-mark.low{bottom:var(--sp-1);left:var(--sp-2)}.pitch-mark.high{top:var(--sp-1);right:var(--sp-2)}.anchor-star{position:absolute;top:6px;left:50%;transform:translate(-50%);font-size:clamp(22px,4vh,34px);font-weight:900;background:linear-gradient(180deg,#fff6b0,#ffc54d,#ff8c42);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px #fff;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));animation:anchor-glow 2.4s ease-in-out infinite;pointer-events:none;z-index:2;line-height:1}@keyframes anchor-glow{0%,to{transform:translate(-50%) scale(1) rotate(-4deg)}50%{transform:translate(-50%) scale(1.18) rotate(8deg)}}.black-keys{position:absolute;inset:var(--sp-4) var(--sp-4) auto var(--sp-4);height:58%;pointer-events:none}.key.black{position:absolute;width:8%;height:100%;background:linear-gradient(180deg,#4a4a4a,#2b2b2b,#181818);color:#fff;border-radius:var(--r-md);box-shadow:inset 0 1px #ffffff2e,inset 0 -2px #0009,0 4px #000,0 8px 14px #00000059;pointer-events:auto;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--sp-3);font-size:13px;font-weight:700;color:#ffffffb3}.key.black:after{display:none}.key.black.pressed{transform:translateY(3px);filter:brightness(1.35)}.particles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:visible;z-index:3}.particle{position:absolute;bottom:60%;border-radius:50%;opacity:0;animation-name:particle-float;animation-timing-function:var(--ease-out);animation-iteration-count:1;animation-fill-mode:forwards;will-change:transform,opacity;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}@keyframes particle-float{0%{transform:translateZ(0) scale(.4);opacity:0}20%{opacity:1}to{transform:translate3d(var(--drift, 0),-180px,0) scale(1.1);opacity:0}}.rec-controls{display:flex;gap:var(--sp-2)}.rec-btn{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;background:var(--c-surface);color:var(--c-do);border:1px solid var(--c-stroke);box-shadow:var(--elev-1);transition:transform var(--dur-1) var(--ease-out)}.rec-btn:active{transform:scale(.92)}.rec-btn.recording{background:linear-gradient(180deg,#ff8585,#e94545);color:#fff;animation:blink 1s linear infinite;border-color:#ffffff80}.rec-btn.play{color:var(--c-fa-deep)}.rec-btn:disabled{opacity:.35}@keyframes blink{0%,to{box-shadow:var(--elev-1),0 0 #ff6b6b99}50%{box-shadow:var(--elev-1),0 0 0 12px #ff6b6b00}}.record-stage{position:fixed;top:clamp(72px,10vh,96px);left:50%;transform:translate(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--sp-2) var(--sp-4) var(--sp-3);background:#ffffffe0;backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);border-radius:var(--r-xl);border:1.5px solid rgba(255,255,255,.7);box-shadow:var(--elev-2);animation:card-pop var(--dur-3) var(--ease-spring)}.record-stage-label{font-size:14px;font-weight:800;color:var(--c-ink);letter-spacing:.04em}.record-stage .rec-btn{width:60px;height:60px;font-size:26px}.record-stage-status{font-size:12px;font-weight:700;color:var(--c-ink-soft);letter-spacing:.02em}.orientation-gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:linear-gradient(135deg,var(--c-mi) 0%,var(--c-re) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sp-6)}.orientation-gate .icon{font-size:88px;animation:rotate 2.4s ease-in-out infinite;margin-bottom:var(--sp-4)}.orientation-gate h2{margin:0 0 var(--sp-2);color:#fff;font-size:28px;font-weight:800}.orientation-gate p{margin:0;color:#ffffffeb;font-size:17px}@keyframes rotate{0%,30%{transform:rotate(0)}60%,to{transform:rotate(90deg)}}.fs-prompt-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;background:#2b2b2b8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:var(--sp-4);animation:backdrop-fade var(--dur-2) var(--ease-out)}@keyframes backdrop-fade{0%{opacity:0}to{opacity:1}}.fs-prompt-card{background:linear-gradient(180deg,var(--c-surface-soft) 0%,var(--c-surface) 100%);border-radius:var(--r-xl);padding:var(--sp-6) var(--sp-6) var(--sp-5);max-width:420px;width:100%;text-align:center;box-shadow:var(--elev-pop);animation:card-pop var(--dur-3) var(--ease-spring);border:1px solid var(--c-stroke)}@keyframes card-pop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.fs-emoji{font-size:48px;line-height:1;margin-bottom:var(--sp-2)}.fs-prompt-card h2{margin:0 0 var(--sp-2);font-size:22px;font-weight:800;color:var(--c-ink)}.fs-tip{margin:0 0 var(--sp-4);font-size:16px;color:var(--c-ink-soft);line-height:1.55}.fs-steps{text-align:left;margin:0 0 var(--sp-4);padding-left:var(--sp-5);font-size:15px;color:var(--c-ink-soft);line-height:1.7}.fs-steps b{color:var(--c-ink)}.fs-btn{display:block;width:100%;padding:var(--sp-4) var(--sp-5);margin-top:var(--sp-3);border-radius:var(--r-md);font-size:17px;font-weight:800;border:none;transition:transform var(--dur-1) var(--ease-out)}.fs-btn:active{transform:scale(.97)}.fs-btn.primary{background:linear-gradient(180deg,#ffb347,#ff8c42);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.15);box-shadow:0 4px #d96a26,0 8px 18px #ff8c4252}.fs-btn.ghost{background:transparent;color:var(--c-ink-mute);font-weight:600;font-size:15px;margin-top:var(--sp-1)}.level-success .fs-btn.ghost{background:#ffffff2e;color:#fffffff2;border:1.5px solid rgba(255,255,255,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-weight:700;font-size:16px;text-shadow:0 1px 0 rgba(0,0,0,.18)}.level-success .fs-btn.ghost:active{background:#ffffff47}.first-touch{position:absolute;bottom:var(--sp-6);transform:translate(-50%);z-index:7;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);animation:ft-fade .4s var(--ease-out)}@keyframes ft-fade{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.first-touch-finger{font-size:60px;animation:ft-bounce 1s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}@keyframes ft-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}.first-touch-tip{background:var(--c-ink);color:#fff;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);font-size:15px;font-weight:700;white-space:nowrap;box-shadow:var(--elev-2)}.settings-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;background:#2b2b2b73;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--sp-4);animation:backdrop-fade var(--dur-2) var(--ease-out)}.settings-card{position:relative;background:linear-gradient(180deg,var(--c-surface-soft) 0%,var(--c-surface) 100%);border-radius:var(--r-xl);padding:var(--sp-5) var(--sp-6) var(--sp-6);width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:var(--elev-pop);border:1px solid var(--c-stroke);animation:card-pop var(--dur-3) var(--ease-spring)}.settings-close{position:absolute;top:var(--sp-3);right:var(--sp-3);width:40px;height:40px;border-radius:50%;background:#f3f3f3;color:var(--c-ink-soft);font-size:22px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}.settings-close:active{transform:scale(.9);background:#e8e8e8}.settings-card-mini{width:auto;min-width:280px;max-width:680px}.settings-title{margin:0 0 var(--sp-4);font-size:18px;font-weight:800;color:var(--c-ink);letter-spacing:.04em}.settings-row{display:flex;flex-direction:column;gap:var(--sp-2)}.settings-row-label{font-size:13px;font-weight:700;color:var(--c-ink-soft);letter-spacing:.04em}.settings-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.big-pill{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:linear-gradient(180deg,#fffbe6,#fff1c9);font-size:16px;font-weight:700;color:var(--c-ink-soft);border:1.5px solid #FFE9A8;box-shadow:0 2px #0000000a;transition:transform var(--dur-1) var(--ease-out)}.big-pill:active{transform:scale(.96)}.big-pill.active{background:linear-gradient(180deg,#ffb347,#ff8c42);color:#fff;border-color:#fff9;text-shadow:0 1px 0 rgba(0,0,0,.15);box-shadow:0 3px #d96a26,0 6px 14px #ff8c4247}.big-pill.disabled,.big-pill:disabled{background:#0000000a;color:#00000052;border-color:#0000000f;box-shadow:none;cursor:not-allowed;filter:saturate(.3)}.big-pill:disabled:active{transform:none}.mode-home{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-5);padding-top:70px;background:radial-gradient(ellipse at top,rgba(255,235,160,.85) 0%,transparent 55%),radial-gradient(ellipse at bottom,rgba(255,200,130,.5) 0%,transparent 55%),var(--c-bg);overflow-y:auto;animation:backdrop-fade var(--dur-2) var(--ease-out)}.mode-home-header{flex:0 0 auto;text-align:center;margin-bottom:var(--sp-4)}.mode-home-title{font-size:clamp(22px,4.5vh,32px);font-weight:800;color:var(--c-ink);letter-spacing:.04em;text-shadow:0 1px 0 rgba(255,255,255,.6)}.mode-home-sub{font-size:clamp(14px,2.4vh,17px);font-weight:600;color:var(--c-ink-soft);margin-top:2px}.mode-home-grid{flex:1 1 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--sp-3);width:100%;max-width:880px;align-content:center;min-height:0}.home-mode-card{--accent: var(--c-do);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:var(--sp-3) var(--sp-2);border-radius:var(--r-xl);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,#fff),color-mix(in srgb,var(--accent) 38%,#fff));border:2.5px solid color-mix(in srgb,var(--accent) 50%,#fff);box-shadow:0 4px color-mix(in srgb,var(--accent) 60%,#000 0%),0 10px 24px color-mix(in srgb,var(--accent) 30%,transparent);transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease-out);text-align:center;min-height:0}.home-mode-card:active{transform:scale(.95) translateY(2px);box-shadow:0 1px color-mix(in srgb,var(--accent) 60%,#000 0%),0 4px 10px color-mix(in srgb,var(--accent) 30%,transparent)}.home-mode-card.last{box-shadow:0 4px color-mix(in srgb,var(--accent) 60%,#000 0%),0 10px 24px color-mix(in srgb,var(--accent) 30%,transparent),0 0 0 4px #ffffff8c}.home-mode-emoji{font-size:clamp(56px,11vh,96px);line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));animation:home-emoji-idle 3s ease-in-out infinite}.home-mode-card:hover .home-mode-emoji,.home-mode-card.last .home-mode-emoji{animation:home-emoji-bounce 1.8s ease-in-out infinite}@keyframes home-emoji-idle{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes home-emoji-bounce{0%,to{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.1) rotate(4deg)}}.home-mode-name{font-size:clamp(13px,2vh,17px);font-weight:800;color:var(--c-ink);letter-spacing:.02em}.home-mode-sub{font-size:clamp(10px,1.5vh,12px);font-weight:500;color:var(--c-ink-soft);line-height:1.25;opacity:.85}.home-mode-tag{position:absolute;top:-10px;right:-8px;background:linear-gradient(180deg,#51cf66,#2ea043);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:var(--r-pill);border:2px solid #fff;box-shadow:var(--elev-1);white-space:nowrap}@media (max-height: 380px){.mode-home{padding:var(--sp-3);padding-top:56px}.mode-home-header{margin-bottom:var(--sp-2)}.mode-home-grid{gap:var(--sp-2)}.home-mode-card{padding:6px;gap:2px;border-width:2px;border-radius:var(--r-lg)}.home-mode-emoji{font-size:44px}.home-mode-name{font-size:13px}.home-mode-sub{display:none}.home-mode-tag{font-size:10px;padding:2px 7px;top:-8px;right:-6px}}.mode-carousel-wrap{position:relative;margin:0 calc(-1 * var(--sp-6))}.mode-carousel{display:flex;gap:var(--sp-3);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-inline:50%;padding:var(--sp-3) 50%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.mode-carousel::-webkit-scrollbar{display:none}.mode-carousel-wrap:before,.mode-carousel-wrap:after{content:"";position:absolute;top:0;bottom:0;width:var(--sp-6);pointer-events:none;z-index:2}.mode-carousel-wrap:before{left:0;background:linear-gradient(to right,var(--c-surface) 0%,transparent 100%)}.mode-carousel-wrap:after{right:0;background:linear-gradient(to left,var(--c-surface) 0%,transparent 100%)}.mode-card{--accent: var(--c-do);flex:0 0 168px;scroll-snap-align:center;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);padding:var(--sp-4) var(--sp-3);border-radius:var(--r-lg);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,#fff),color-mix(in srgb,var(--accent) 26%,#fff));border:2px solid color-mix(in srgb,var(--accent) 35%,#fff);box-shadow:var(--elev-1);text-align:center;transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out);filter:saturate(.85);opacity:.85}.mode-card:active{transform:scale(.97)}.mode-card.active{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,#fff),color-mix(in srgb,var(--accent) 55%,#fff));border-color:var(--accent);box-shadow:0 4px color-mix(in srgb,var(--accent) 65%,#000 0%),0 10px 22px color-mix(in srgb,var(--accent) 30%,transparent);transform:scale(1.06);filter:saturate(1.1);opacity:1}.mode-card-emoji{font-size:64px;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18))}.mode-card.active .mode-card-emoji{animation:mode-card-bounce 1.6s ease-in-out infinite}@keyframes mode-card-bounce{0%,to{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.08) rotate(4deg)}}.mode-card-name{font-size:15px;font-weight:800;color:var(--c-ink);letter-spacing:.02em}.mode-card-sub{font-size:11px;font-weight:500;color:var(--c-ink-mute);line-height:1.25;min-height:1.4em}@media (max-height: 380px){.mode-card-sub{display:none}.mode-card-emoji{font-size:52px}}.mode-card-badge{position:absolute;top:-10px;right:-8px;background:linear-gradient(180deg,#51cf66,#2ea043);color:#fff;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:800;letter-spacing:.04em;border:2px solid #fff;box-shadow:var(--elev-2);white-space:nowrap;animation:badge-pop var(--dur-3) var(--ease-snap)}.mode-carousel-hint{text-align:center;font-size:11px;color:var(--c-ink-mute);letter-spacing:.16em;margin-top:var(--sp-2);-webkit-user-select:none;user-select:none}.medal-cabinet{width:100%}.medal-cabinet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}.medal-cabinet-title{font-size:14px;font-weight:800;color:var(--c-ink);letter-spacing:.02em}.medal-cabinet-count{font-size:12px;font-weight:800;color:#c76e1f;background:#fff3e0;padding:2px 10px;border-radius:var(--r-pill);letter-spacing:.06em}.medal-cabinet-strip{display:flex;gap:var(--sp-1);padding:var(--sp-2);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:var(--r-md)}.medal-cabinet-strip::-webkit-scrollbar{display:none}.medal-cabinet-icon{flex:0 0 auto;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;background:#ffffff8c;border-radius:50%;box-shadow:0 1px 2px #0000000f;transition:transform var(--dur-1) var(--ease-out);scroll-snap-align:start}.medal-cabinet-icon:active{transform:scale(1.18)}.medal-cabinet-icon.locked{background:#f0f0f0;filter:saturate(0);font-size:16px;color:var(--c-ink-mute);box-shadow:none}.medal-cabinet-settings{margin-top:var(--sp-5)}.medal-cabinet-settings .medal-cabinet-strip{flex-wrap:wrap;overflow:visible;background:linear-gradient(180deg,#fffbe6,#fff6cc);border:1px solid #F0D782}.home-mode-card.medal-card{--accent: #F0C870;background:linear-gradient(180deg,#fff8e1,#ffe066)}.home-mode-card.medal-card .home-mode-emoji{filter:drop-shadow(0 3px 6px rgba(199,110,31,.35))}.home-mode-card.medal-card .home-mode-sub{font-weight:800;color:#c76e1f;letter-spacing:.06em}.medals-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--c-surface-soft) 0%,var(--c-surface) 100%);padding:calc(var(--sp-5) + 44px) var(--sp-3) var(--sp-3);overflow:hidden;animation:card-pop var(--dur-3) var(--ease-spring)}.medals-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:var(--sp-2);padding:var(--sp-3) var(--sp-2);overflow-y:auto;scrollbar-width:thin;align-content:start}.medal-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);padding:var(--sp-3) var(--sp-2);border-radius:var(--r-lg);transition:transform var(--dur-1) var(--ease-out)}.medal-tile.unlocked{background:linear-gradient(180deg,#fff8e1,#ffeaa8);border:2px solid #F0C870;box-shadow:0 3px #c99340,0 6px 12px #c76e1f2e}.medal-tile.locked{background:#ececec;border:2px solid #d0d0d0;box-shadow:0 2px #b8b8b8;filter:saturate(.2)}.medal-tile:active{transform:scale(.95) translateY(2px)}.medal-tile.locked:active{transform:scale(.97)}.medal-tile-emoji{font-size:40px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}.medal-tile.locked .medal-tile-emoji{font-size:28px;filter:none}.medal-tile-name{font-size:12px;font-weight:800;color:var(--c-ink);text-align:center;line-height:1.2;letter-spacing:.02em}.medal-tile.locked .medal-tile-name{color:#888}.medal-detail-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;background:#00000073;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--sp-4);animation:backdrop-fade var(--dur-2) var(--ease-out)}.medal-detail-card{position:relative;width:100%;max-width:380px;padding:var(--sp-6) var(--sp-5) var(--sp-5);border-radius:var(--r-xl);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2);box-shadow:var(--elev-pop);animation:card-pop var(--dur-3) var(--ease-spring)}.medal-detail-card.unlocked{background:linear-gradient(180deg,#fffbe6,#ffe066);border:3px solid #F0C870}.medal-detail-card.locked{background:linear-gradient(180deg,#f4f4f4,#dcdcdc);border:3px solid #c0c0c0}.medal-detail-close{position:absolute;top:10px;right:12px;width:32px;height:32px;border-radius:50%;background:#00000014;color:var(--c-ink-soft);font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-1) var(--ease-out)}.medal-detail-close:active{transform:scale(.92)}.medal-detail-emoji{font-size:96px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));margin-bottom:var(--sp-1)}.medal-detail-card.locked .medal-detail-emoji{font-size:72px;opacity:.55}.medal-detail-name{font-size:24px;font-weight:800;color:var(--c-ink);letter-spacing:.02em}.medal-detail-card.locked .medal-detail-name{color:#777}.medal-detail-desc{font-size:15px;color:var(--c-ink-soft);line-height:1.5;margin:var(--sp-1) 0 var(--sp-3)}.medal-detail-status{font-size:14px;font-weight:800;padding:6px 18px;border-radius:var(--r-pill);letter-spacing:.04em}.medal-detail-status.on{color:#fff;background:var(--c-fa);box-shadow:0 2px 6px #51cf6666}.medal-detail-status.off{color:#777;background:#0000000f}.medal-count{font-size:11px;color:#c76e1f;font-weight:700;background:#fff3e0;padding:2px var(--sp-2);border-radius:var(--r-pill);margin-left:var(--sp-2);letter-spacing:.08em}.medal-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--sp-3)}.medal{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:var(--sp-3) var(--sp-1);border-radius:var(--r-md);background:linear-gradient(180deg,#fff6cc,#ffe9a8);border:1px solid #F0D782;box-shadow:var(--elev-1);transition:transform var(--dur-2) var(--ease-spring)}.medal-icon{font-size:32px;line-height:1}.medal-name{font-size:12px;font-weight:700;color:var(--c-ink-soft);text-align:center;line-height:1.2}.medal.locked{background:#f4f4f4;border-color:#e6e6e6;filter:saturate(0);box-shadow:none}.medal.locked .medal-name{color:var(--c-ink-mute)}.medal-toast{position:fixed;top:var(--sp-4);left:50%;transform:translate(-50%);z-index:92;background:linear-gradient(180deg,#ffd43b,#ff8c42);color:#fff;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);display:flex;align-items:center;gap:var(--sp-3);box-shadow:var(--elev-3);animation:medal-slide .4s var(--ease-spring);max-width:90vw;border:1px solid rgba(255,255,255,.4)}@keyframes medal-slide{0%{transform:translate(-50%,-120%);opacity:0}to{transform:translate(-50%);opacity:1}}.medal-toast-icon{font-size:40px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));animation:medal-spin 1.6s ease-in-out infinite}@keyframes medal-spin{0%,to{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.12)}}.medal-toast-eyebrow{font-size:11px;letter-spacing:.16em;opacity:.88;font-weight:700;text-transform:uppercase}.medal-toast-name{font-size:18px;font-weight:800;margin-top:2px;text-shadow:0 1px 0 rgba(0,0,0,.12)}.reward{position:fixed;top:0;right:0;bottom:0;left:0;z-index:95;pointer-events:auto;background:radial-gradient(circle at center,#fff4c88c,#2b2b2b66 70%);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:backdrop-fade var(--dur-2) var(--ease-out)}.reward-close{position:absolute;top:var(--sp-4);right:var(--sp-4);width:48px;height:48px;border-radius:50%;background:#ffffffeb;color:var(--c-ink-soft);font-size:28px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:var(--elev-2);z-index:5;border:none;padding:0}.reward-close:active{transform:scale(.9);background:#fff}.reward-hero{font-size:clamp(120px,38vh,240px);line-height:1;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));animation:reward-pop .6s var(--ease-snap),reward-wiggle 1.4s .6s ease-in-out infinite;z-index:2}@keyframes reward-pop{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.25) rotate(10deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes reward-wiggle{0%,to{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.08) rotate(6deg)}}.reward-burst{position:absolute;width:60vh;height:60vh;max-width:90vw;max-height:90vw;z-index:1;animation:reward-spin 8s linear infinite}@keyframes reward-spin{to{transform:rotate(360deg)}}.reward-ray{position:absolute;top:50%;left:50%;width:8px;height:50%;margin-left:-4px;background:linear-gradient(to top,#ffd43b00,#ffd43bd9);transform-origin:center top;border-radius:8px;filter:blur(.5px)}.reward-confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:3}.reward-piece{position:absolute;top:-24px;border-radius:3px;animation-name:reward-fall;animation-timing-function:cubic-bezier(.3,.5,.6,1);animation-iteration-count:1;animation-fill-mode:forwards;will-change:transform}@keyframes reward-fall{0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:0}10%{opacity:1}to{transform:translate3d(var(--drift, 0),110vh,0) rotate(calc(var(--rot, 360deg) * 4));opacity:1}}.beat-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:4;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;width:min(80vw,720px)}.beat-track{position:relative;width:100%;height:64px;border-radius:var(--r-pill);background:#2b2b2b8c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 2px 6px #0000004d;overflow:visible}.beat-track-rail{position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:var(--r-pill);background:linear-gradient(90deg,#ffffff14,#ffffff05)}.beat-track-zone{position:absolute;top:8px;bottom:8px;border-radius:var(--r-pill);background:linear-gradient(90deg,color-mix(in srgb,var(--c-fa) 30%,transparent),color-mix(in srgb,var(--c-fa) 70%,transparent));box-shadow:0 0 16px color-mix(in srgb,var(--c-fa) 50%,transparent)}.beat-track-zone.soft{background:linear-gradient(90deg,color-mix(in srgb,var(--c-fa) 40%,transparent) 0%,transparent 100%);box-shadow:none;opacity:.45}.beat-track-trigger{position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-size:36px;line-height:1;filter:drop-shadow(0 0 12px rgba(255,212,59,.7));animation:beat-pulse .5s var(--ease-out)}.beat-track-trigger.hit{animation:beat-hit .35s var(--ease-snap)}.beat-track-marker{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);font-size:44px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));pointer-events:none}.beat-overlay.mood-happy .beat-track-marker{animation:beat-hit .35s var(--ease-snap)}.beat-overlay.mood-oops .beat-track-marker{animation:beat-miss .3s ease-out}.beat-paws{display:flex;gap:4px;background:#2b2b2bc7;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill)}.beat-paw{font-size:16px;filter:grayscale(1) opacity(.35);transition:filter .22s var(--ease-out),transform .22s var(--ease-out)}.beat-paw.on{filter:none;transform:scale(1.15)}@keyframes beat-pulse{0%{transform:scale(.8);opacity:.6}40%{transform:scale(1.18);opacity:1}to{transform:scale(1);opacity:1}}@keyframes beat-hit{0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,212,59,0))}50%{transform:scale(1.4) rotate(-8deg);filter:drop-shadow(0 0 22px rgba(255,212,59,1))}to{transform:scale(1);filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}}@keyframes beat-miss{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.adv-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--c-surface-soft) 0%,var(--c-surface) 100%);padding:calc(var(--sp-5) + 44px) var(--sp-3) var(--sp-3);overflow:hidden;animation:card-pop var(--dur-3) var(--ease-spring);--accent: var(--c-re)}.adv-h2{margin:0 0 var(--sp-2);font-size:22px;font-weight:800;color:var(--c-ink);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--sp-2)}.adv-sub{margin:0 0 var(--sp-5);font-size:14px;color:var(--c-ink-mute);text-align:center}.adv-back{position:absolute;top:var(--sp-3);left:var(--sp-3);width:40px;height:40px;border-radius:50%;background:#f3f3f3;color:var(--c-ink-soft);font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}.adv-back:active{transform:scale(.92);background:#e8e8e8}.adv-close{position:absolute;top:var(--sp-3);right:var(--sp-3);width:40px;height:40px;border-radius:50%;background:#f3f3f3;color:var(--c-ink-soft);font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out);z-index:2}.adv-close:active{transform:scale(.92);background:#e8e8e8}.status-pill.clickable{cursor:pointer;border:none;font:inherit;letter-spacing:inherit;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}.status-pill.clickable:after{content:"▾";margin-left:6px;font-size:.85em;opacity:.6}.status-pill.clickable:active{transform:scale(.96)}.hud-song-group{display:inline-flex;align-items:center;gap:var(--sp-2)}.preview-btn:after{content:none}.preview-btn.active{background:linear-gradient(180deg,#ffb4b4,#ff6b6b);color:#fff;border-color:#ffffff80;box-shadow:0 2px 8px #ff6b6b66;animation:blink 1.2s linear infinite}.song-stat-badge{font-weight:800;font-size:16px;color:var(--c-fa);background:#51cf6626;padding:2px 8px;border-radius:var(--r-pill);margin:0 2px}.song-h2-stats{font-size:13px;font-weight:600;color:var(--c-ink-mute);margin-left:var(--sp-3);letter-spacing:.02em}.song-pages{flex:1 1 auto;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--sp-3))}.song-pages::-webkit-scrollbar{display:none}.song-page{flex:0 0 100%;min-width:100%;scroll-snap-align:start;display:flex;flex-direction:column;padding:var(--sp-2) 0;overflow:hidden}.song-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(var(--cols, 6),minmax(100px,1fr));grid-template-rows:repeat(2,1fr);grid-auto-flow:row;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}.song-grid::-webkit-scrollbar{display:none}.song-grid>.song-grid-card{scroll-snap-align:start}.song-grid-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:var(--sp-3) var(--sp-2);min-height:100px;border-radius:var(--r-lg);background:linear-gradient(180deg,color-mix(in srgb,var(--c-mi) 18%,#fff),color-mix(in srgb,var(--c-mi) 38%,#fff));border:2px solid color-mix(in srgb,var(--c-mi) 60%,#fff);box-shadow:0 3px color-mix(in srgb,var(--c-mi) 60%,#000 0%),0 6px 12px color-mix(in srgb,var(--c-mi) 30%,transparent);transition:transform var(--dur-1) var(--ease-out)}.song-grid-card:active{transform:scale(.96) translateY(2px)}.song-grid-card.active{outline:3px solid var(--c-fa);outline-offset:-3px}.song-grid-card.done .song-grid-emoji{filter:drop-shadow(0 0 6px rgba(81,207,102,.55))}.song-grid-emoji{font-size:clamp(32px,6vh,42px);line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}.song-grid-name{font-size:12px;font-weight:800;color:var(--c-ink);text-align:center;line-height:1.2;letter-spacing:.02em}.song-grid-badge{position:absolute;top:4px;right:4px;font-size:9px;font-weight:800;background:var(--c-fa);color:#fff;padding:1px 6px;border-radius:var(--r-pill);letter-spacing:.04em}.song-grid-layout-tag{position:absolute;top:4px;left:4px;font-size:9px;font-weight:800;background:var(--c-la);color:#fff;padding:1px 6px;border-radius:var(--r-pill);letter-spacing:.04em}.song-grid-card.advanced{background:linear-gradient(180deg,color-mix(in srgb,var(--c-la) 18%,#fff),color-mix(in srgb,var(--c-la) 38%,#fff));border-color:color-mix(in srgb,var(--c-la) 60%,#fff);box-shadow:0 3px color-mix(in srgb,var(--c-la) 60%,#000 0%),0 6px 12px color-mix(in srgb,var(--c-la) 30%,transparent)}.song-grid-orig-tag{position:absolute;top:4px;left:4px;font-size:9px;font-weight:800;background:var(--c-sol);color:#fff;padding:1px 6px;border-radius:var(--r-pill);letter-spacing:.04em}.orig-key-tag{display:inline-block;margin:0 6px;padding:1px 6px;font-size:10px;font-weight:800;background:var(--c-sol);color:#fff;border-radius:var(--r-pill);letter-spacing:.04em}.song-page-dots{display:flex;justify-content:center;align-items:center;gap:var(--sp-3);padding:var(--sp-1) 0}.page-dot{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:var(--r-pill);background:#0000000f;border:2px solid transparent;font-size:14px;filter:grayscale(.6) opacity(.6);transition:transform var(--dur-2) var(--ease-spring),filter var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}.page-dot.active{filter:none;background:#51cf662e;border-color:var(--c-mi);transform:scale(1.08);box-shadow:0 2px 8px #51cf6659}.page-dot-emoji{font-size:18px;line-height:1}.page-dot-count{font-size:12px;font-weight:800;color:var(--c-ink-soft);letter-spacing:.02em}.page-dot.active .page-dot-count{color:var(--c-fa-deep, var(--c-fa))}.adv-panel .level-stones{margin-top:auto;margin-bottom:auto}.theme-rail,.chapter-rail{display:flex;align-items:center;flex:1;min-height:0;gap:var(--sp-3);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:max(8vw,24px);padding:var(--sp-3) max(6vw,20px) var(--sp-4);margin:0 calc(-1 * var(--sp-3));-webkit-overflow-scrolling:touch;scrollbar-width:none}.theme-rail::-webkit-scrollbar,.chapter-rail::-webkit-scrollbar{display:none}.theme-card,.chapter-card-rail{flex:0 0 min(64vw,220px);scroll-snap-align:center}.theme-card{--theme-tone: var(--c-fa);position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-5) var(--sp-4) var(--sp-4);min-height:220px;border-radius:var(--r-xl);background:linear-gradient(180deg,color-mix(in srgb,var(--theme-tone) 22%,#fff),color-mix(in srgb,var(--theme-tone) 45%,#fff));border:2px solid color-mix(in srgb,var(--theme-tone) 60%,#fff);box-shadow:0 5px color-mix(in srgb,var(--theme-tone) 55%,#000 0%),0 10px 24px color-mix(in srgb,var(--theme-tone) 30%,transparent);transition:transform var(--dur-1) var(--ease-out)}.theme-card:active{transform:scale(.97)}.theme-card-emoji{font-size:64px;line-height:1;filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}.theme-card-title{font-size:19px;font-weight:800;color:var(--c-ink);text-align:center}.theme-card-sub{font-size:12px;color:var(--c-ink-mute);text-align:center;line-height:1.3}.theme-card-progress{display:flex;gap:6px;margin-top:var(--sp-1);flex-wrap:wrap;justify-content:center}.theme-chip{font-size:18px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffffff8c;filter:grayscale(.6) opacity(.55);transition:filter var(--dur-1) var(--ease-out)}.theme-chip.on{filter:none;background:#ffffffeb;box-shadow:0 2px 4px #0000001a}.theme-card-count{position:absolute;top:10px;right:12px;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--c-ink-soft);background:#ffffffb3;padding:3px 8px;border-radius:var(--r-pill)}.theme-card.done{box-shadow:0 5px color-mix(in srgb,var(--theme-tone) 55%,#000 0%),0 0 0 3px color-mix(in srgb,var(--theme-tone) 60%,transparent),0 10px 28px color-mix(in srgb,var(--theme-tone) 40%,transparent)}.theme-card.done:after{content:"✓";position:absolute;top:10px;left:12px;width:24px;height:24px;border-radius:50%;background:var(--c-fa);color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:var(--elev-1)}.theme-head-emoji{font-size:26px;margin-right:4px}.rail-hint{text-align:center;font-size:12px;color:var(--c-ink-mute);letter-spacing:.12em;margin-top:var(--sp-1);opacity:.7}.chapter-card-rail{min-height:200px;padding:var(--sp-4)}.chapter-card-rail .chapter-cover{font-size:64px}.chapter-card-rail .chapter-title{font-size:18px;text-align:center}.chapter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-3)}.chapter-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-4);border-radius:var(--r-lg);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,#fff),color-mix(in srgb,var(--accent) 38%,#fff));border:2px solid color-mix(in srgb,var(--accent) 60%,#fff);box-shadow:0 4px color-mix(in srgb,var(--accent) 60%,#000 0%),0 8px 18px color-mix(in srgb,var(--accent) 30%,transparent);transition:transform var(--dur-1) var(--ease-out);--accent: #FFA94D}.chapter-card:active{transform:scale(.96)}.chapter-cover{font-size:56px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.15))}.chapter-cover.small{font-size:28px}.chapter-title{font-size:17px;font-weight:800;color:var(--c-ink)}.chapter-progress{display:flex;gap:6px}.chapter-progress .pip,.progress-pip{width:8px;height:8px;border-radius:50%;background:#0000001f}.chapter-progress .pip.on,.progress-pip.on{background:var(--accent, var(--c-re));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent, var(--c-re)) 30%,transparent)}.chapter-card.done:after{content:"✓";position:absolute;top:8px;right:10px;background:var(--c-fa);color:#fff;font-size:14px;font-weight:800;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--elev-1)}.chapter-card.locked{background:linear-gradient(180deg,#ececec,#d8d8d8);border-color:#c2c2c2;box-shadow:0 2px #b0b0b0,0 4px 10px #00000014;filter:saturate(.15);opacity:.85;cursor:not-allowed}.chapter-card.locked .chapter-cover{font-size:40px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}.chapter-card.locked .chapter-title{color:#777}.chapter-card.locked:active{transform:none}.chapter-requires{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);background:var(--c-ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 10px;border-radius:var(--r-pill);white-space:nowrap;box-shadow:var(--elev-1);pointer-events:none}.level-stones{display:flex;justify-content:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-3)}.level-stone{width:150px;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-3);border-radius:var(--r-lg);background:linear-gradient(180deg,#fffbe6,#ffe9a8);border:2px solid #F0D782;box-shadow:var(--elev-2);transition:transform var(--dur-1) var(--ease-out)}.level-stone:active:not(:disabled){transform:scale(.95)}.level-stone.cleared{background:linear-gradient(180deg,#b0e8b6,#51cf66);border-color:#2ea043}.level-stone.locked{background:#f0f0f0;border-color:#d8d8d8;filter:saturate(0);cursor:not-allowed}.level-num{width:28px;height:28px;border-radius:50%;background:#ffffffb3;color:var(--c-ink);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}.level-stone.cleared .level-num{background:#fff;color:#2ea043}.level-hero{font-size:38px;line-height:1}.level-title{font-size:14px;font-weight:700;color:var(--c-ink-soft);text-align:center}.preview-app{position:relative;height:100vh;height:100dvh;width:100vw;display:flex;flex-direction:column;background:#1f2530;color:#e8edf6;font-family:var(--font-display)}.preview-header{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-3);padding:8px 14px;background:#2b3242;border-bottom:1px solid rgba(255,255,255,.08)}.preview-title{font-size:16px;font-weight:800;letter-spacing:.04em}.preview-tagline{font-size:12px;color:#9aa6c0}.preview-header-actions{margin-left:auto;display:flex;gap:var(--sp-2)}.preview-header-actions button{background:#ffffff14;color:#e8edf6;border:1px solid rgba(255,255,255,.12);padding:5px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer}.preview-header-actions button:hover{background:#ffffff26}.preview-header-actions button:active{transform:scale(.96)}.preview-main{flex:1 1 auto;display:flex;min-height:0}.preview-editor{flex:0 0 38%;min-width:320px;max-width:540px;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.08)}.preview-editor-toolbar{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-3);padding:8px 12px;background:#232a38}.preview-apply{background:linear-gradient(180deg,#51cf66,#2ea043);color:#fff;border:none;padding:6px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:800;cursor:pointer;letter-spacing:.04em}.preview-apply:active{transform:scale(.96)}.preview-error{font-size:12px;color:#ff8585;font-family:ui-monospace,SF Mono,Menlo,monospace}.preview-textarea{flex:1 1 auto;width:100%;background:#161a23;color:#d6e0f5;border:none;padding:12px 14px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12.5px;line-height:1.55;resize:none;outline:none;-webkit-user-select:text;user-select:text}.preview-help{flex:0 0 auto;background:#1c222d;border-top:1px solid rgba(255,255,255,.06);padding:8px 12px;font-size:12px}.preview-help summary{cursor:pointer;color:#9aa6c0;font-weight:600;padding:4px 0}.preview-help pre{margin:6px 0 0;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11.5px;line-height:1.5;color:#b0bcd6;white-space:pre-wrap}.preview-stage-wrap{flex:1 1 auto;position:relative;min-width:0;display:flex;flex-direction:column}.preview-empty{margin:auto;color:#9aa6c0;font-size:14px}.preview-stage{position:relative;flex:1 1 auto;display:flex;flex-direction:column;background:var(--c-bg);transition:background .6s ease;overflow:hidden}.preview-stage.scene-forest-dawn{background:linear-gradient(180deg,#ffb4d6,#ffe066,#b0e8b6)}.preview-stage.scene-forest-day{background:linear-gradient(180deg,#b0d6f8,#ffe066 70%,#51cf66)}.preview-stage.scene-forest-dusk{background:linear-gradient(180deg,#2b2b5b,#845ef7 25%,#ff8c42 60%,#ffd43b)}.preview-stage.scene-pond{background:linear-gradient(180deg,#b0d6f8,#4dabf7 60%,#2980d8)}.preview-stage.scene-big-tree{background:linear-gradient(180deg,#b0e8b6,#51cf66,#2ea043 80%,#1f5e2a)}.preview-stage.scene-meadow{background:linear-gradient(180deg,#b0d6f8,#ffe066,#b0e8b6)}.preview-stage.scene-rain-soft{background:linear-gradient(180deg,#d8e3f5,#a8b8d6,#7a8aae)}.preview-stage.scene-rain-heavy{background:linear-gradient(180deg,#5a6982,#3a4a64 60%,#1f2a40)}.preview-stage.scene-after-rain{background:linear-gradient(180deg,#ffe9a8,#b0d6f8 60%,#51cf66)}.preview-stage.scene-rainbow{background:linear-gradient(180deg,#ff6b6b,#ffa94d 16%,#ffd43b,#51cf66 50%,#4dabf7 66%,#845ef7,#f783ac)}.preview-stage.scene-night-sky{background:radial-gradient(ellipse at top,#4a4f80,#1a1d3a 70%)}.preview-stage.scene-night-stage{background:radial-gradient(circle at center,#4a4f80,#1a1d3a 60%)}.preview-stage.scene-moonlight-stage{background:radial-gradient(circle at top,#ffe066,#845ef7 30%,#1a1d3a 80%)}.preview-stage.scene-party{background:linear-gradient(180deg,#ffb4d6,#ffd43b,#ff8c42)}.preview-stage.scene-farm-dawn{background:linear-gradient(180deg,#ffd4a8,#ffe066,#ffb4b4)}.preview-stage.scene-farm-pond{background:linear-gradient(180deg,#b0e8b6,#b0d6f8,#4dabf7)}.preview-stage.scene-farm-day{background:linear-gradient(180deg,#b0d6f8,#ffe066 60%,#b0e8b6)}.preview-stage.scene-coral{background:linear-gradient(180deg,#ffb4b4,#f783ac,#ffa94d)}.preview-stage.scene-ocean-shallow{background:linear-gradient(180deg,#b0e8b6,#4dabf7 60%,#2980d8)}.preview-stage.scene-ocean-deep{background:linear-gradient(180deg,#4dabf7,#2980d8 30%,#1a1d3a)}.preview-stage.scene-launch-pad{background:linear-gradient(180deg,#ff8c42,#ffd43b 30%,#845ef7 70%,#2b2b5b)}.preview-stage.scene-rocket-flight{background:linear-gradient(180deg,#2980d8,#845ef7,#2b2b5b)}.preview-stage.scene-meteor-shower{background:linear-gradient(180deg,#2b2b5b,#845ef7 30%,#ff6b6b 70%,#ffd43b)}.preview-prompt-bar{position:absolute;top:12px;left:12px;right:12px;z-index:5;display:flex;align-items:center;gap:var(--sp-3);padding:6px 12px;background:#fffffff2;-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-pill);box-shadow:var(--elev-2)}.preview-prompt-hero{font-size:28px;line-height:1}.preview-prompt-text{flex:1 1 auto;font-size:13px;font-weight:600;color:var(--c-ink);line-height:1.4}.preview-status{position:absolute;bottom:12px;left:12px;z-index:5;display:inline-flex;align-items:center;gap:var(--sp-3);padding:4px 10px;background:#2b2b2bc7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-family:ui-monospace,SF Mono,Menlo,monospace;border-radius:var(--r-pill)}.preview-status-label{font-weight:800;letter-spacing:.04em}.preview-status-meta{color:#ffffffb3}.preview-status-meta b{color:#ffd43b;font-variant-numeric:tabular-nums}@media (max-width: 720px){.preview-main{flex-direction:column}.preview-editor{flex:0 0 40%;max-width:none;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}}.scene-particles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:1}.scene-particle{position:absolute;display:inline-block;will-change:transform,opacity}.scene-particles-bubbles .scene-particle{bottom:-30px;color:#b4dcfacc;text-shadow:0 0 6px rgba(255,255,255,.6);animation-name:bubble-rise;animation-iteration-count:infinite;animation-timing-function:ease-in}@keyframes bubble-rise{0%{transform:translate(0) scale(.6);opacity:0}15%{opacity:.85;transform:translateY(-10vh) scale(1)}to{transform:translate(var(--drift, 0),-120vh) scale(1.05);opacity:0}}.scene-particles-sparkles .scene-particle{filter:drop-shadow(0 0 4px rgba(255,224,102,.9));animation-name:sparkle-twinkle;animation-iteration-count:infinite;animation-timing-function:ease-in-out}@keyframes sparkle-twinkle{0%,to{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(40deg)}}.scene-particles-leaves .scene-particle{top:-40px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));animation-name:leaf-fall;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,.05,.55,.95)}@keyframes leaf-fall{0%{transform:translate(0) rotate(0);opacity:0}10%{opacity:1}to{transform:translate(var(--drift, 0),120vh) rotate(calc(var(--rot, 360deg) + 540deg));opacity:0}}.story-dialog{position:absolute;top:80px;left:50%;transform:translate(-50%);z-index:7;display:flex;align-items:flex-start;gap:var(--sp-3);padding:0 var(--sp-4);width:min(580px,92vw);pointer-events:none;animation:dialog-pop var(--dur-3) var(--ease-spring),dialog-fade-out .5s ease-in 5s forwards}@keyframes dialog-pop{0%{transform:translate(-50%,-16px) scale(.85);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}@keyframes dialog-fade-out{to{opacity:0;transform:translate(-50%,-8px)}}.story-dialog-hero{flex:0 0 auto;font-size:56px;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));animation:hero-idle 1.6s ease-in-out infinite;pointer-events:auto}.story-dialog-bubble{position:relative;flex:1 1 auto;background:#fffffff5;backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);border:2px solid rgba(255,255,255,.85);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);box-shadow:var(--elev-3);display:flex;align-items:center;gap:var(--sp-3);pointer-events:auto}.story-dialog-bubble:before{content:"";position:absolute;left:-10px;top:22px;width:18px;height:18px;background:#fffffff5;border-left:2px solid rgba(255,255,255,.85);border-bottom:2px solid rgba(255,255,255,.85);transform:rotate(45deg);border-bottom-left-radius:4px}.story-dialog-text{flex:1 1 auto;font-size:14px;font-weight:600;color:var(--c-ink);line-height:1.45}.story-dialog-actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--sp-1)}.story-dialog-close{width:28px;height:28px;border-radius:50%;background:#f3f3f3;color:var(--c-ink-soft);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center}.story-dialog-close:active{transform:scale(.9);background:#e8e8e8}@media (max-height: 380px){.story-dialog{top:60px;padding:0 var(--sp-2)}.story-dialog-hero{font-size:40px}.story-dialog-bubble{padding:6px 10px}.story-dialog-text{font-size:12px}}.level-pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:4px 10px 4px 4px;border-radius:var(--r-pill);background:#ffffffd9;backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.7);box-shadow:var(--elev-2);animation:card-pop var(--dur-2) var(--ease-spring);max-width:calc(100vw - 140px)}.level-pill-back{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:#f3f3f3;color:var(--c-ink-soft);font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}.level-pill-back:active{transform:scale(.9);background:#e8e8e8}.level-pill-hero-stack{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:0 var(--sp-1)}.level-pill-hero{font-size:26px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));animation:hero-idle 1.8s ease-in-out infinite;display:inline-block}@keyframes hero-idle{0%,to{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-2px)}}.level-pill-badge{position:absolute;top:-8px;right:-10px;background:linear-gradient(180deg,#ff8c42,#e85a1a);color:#fff;font-size:11px;font-weight:800;padding:1px 7px;border-radius:var(--r-pill);border:2px solid #fff;box-shadow:var(--elev-1);font-variant-numeric:tabular-nums;letter-spacing:.04em;animation:badge-pop var(--dur-3) var(--ease-snap)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.level-pill-dots{display:inline-flex;align-items:center;gap:3px;flex-wrap:nowrap;max-width:110px;overflow:hidden}.level-pill-dots .progress-pip{width:6px;height:6px}.level-pill-counter{font-size:14px;font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;padding:0 4px}.level-pill-counter .dim{color:var(--c-ink-mute);font-weight:500;margin-left:1px}.level-progress{flex:0 0 auto;display:flex;gap:4px;flex-wrap:wrap;max-width:140px;justify-content:flex-end}.speak-btn{display:inline-flex;align-items:center;gap:6px;background:#4dabf724;color:#2980d8;border:1px solid rgba(77,171,247,.25);border-radius:var(--r-pill);padding:6px 14px;font-size:14px;font-weight:700;transition:transform var(--dur-1) var(--ease-out)}.speak-btn:active{transform:scale(.94)}.adv-intro-card .speak-btn{margin:0 auto var(--sp-4)}.speak-btn.small{padding:4px;width:32px;height:32px;justify-content:center;font-size:16px}.speak-btn.small.inverted{background:#fff6;color:#fff;border-color:#ffffff80}.adv-intro-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:88;background:linear-gradient(135deg,#ffd43b,#ff8c42 60%,#845ef7);display:flex;align-items:center;justify-content:center;padding:var(--sp-4);animation:backdrop-fade var(--dur-2) var(--ease-out)}.adv-intro-card{background:linear-gradient(180deg,var(--c-surface-soft) 0%,var(--c-surface) 100%);border-radius:var(--r-xl);padding:var(--sp-6);max-width:460px;width:100%;text-align:center;box-shadow:var(--elev-pop);border:1px solid var(--c-stroke);animation:card-pop var(--dur-3) var(--ease-spring)}.adv-intro-emoji{font-size:64px;line-height:1;margin-bottom:var(--sp-3);animation:hero-idle 2s ease-in-out infinite}.adv-intro-card h2{margin:0 0 var(--sp-3);font-size:24px;font-weight:800;color:var(--c-ink)}.adv-intro-text{margin-bottom:var(--sp-5);color:var(--c-ink-soft);line-height:1.7;font-size:15px}.adv-intro-text p{margin:0 0 var(--sp-1)}.level-success{position:fixed;top:0;right:0;bottom:0;left:0;z-index:96;background:radial-gradient(circle at center,#fff4c8a6,#2b2b2b80 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);padding:var(--sp-4);animation:backdrop-fade var(--dur-2) var(--ease-out)}.success-stage{position:relative;width:60vh;max-width:90vw;height:36vh;display:flex;align-items:center;justify-content:center}.success-hero{font-size:clamp(96px,22vh,180px);line-height:1;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}.success-line{background:#2b2b2bc7;color:#fff;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-lg);font-size:17px;font-weight:700;text-align:center;max-width:540px;box-shadow:var(--elev-2);border:1px solid rgba(255,255,255,.18);animation:card-pop var(--dur-3) var(--ease-spring) .3s both;display:inline-flex;align-items:center;gap:var(--sp-2)}.success-actions{display:flex;flex-direction:row;align-items:stretch;gap:var(--sp-3);width:min(440px,95vw);animation:card-pop var(--dur-3) var(--ease-spring) .5s both}.compose-replay{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);background:linear-gradient(180deg,color-mix(in srgb,var(--c-mi) 30%,#fff),color-mix(in srgb,var(--c-mi) 55%,#fff));border:2px solid color-mix(in srgb,var(--c-mi) 70%,#fff);color:var(--c-ink);font-size:18px;font-weight:800;box-shadow:0 4px color-mix(in srgb,var(--c-mi) 60%,#000 0%),0 8px 18px color-mix(in srgb,var(--c-mi) 30%,transparent);animation:card-pop var(--dur-3) var(--ease-spring) .4s both;transition:transform var(--dur-1) var(--ease-out)}.compose-replay:active{transform:scale(.96) translateY(2px)}.compose-replay small{font-size:12px;font-weight:700;opacity:.7;margin-left:var(--sp-1)}.success-actions .fs-btn{margin-top:0}.success-actions .fs-btn.primary{flex:1 1 auto}.success-actions .replay-btn{flex:0 0 56px;width:56px;height:56px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.success-actions .replay-btn svg{display:block}.success-actions .replay-btn:active{transform:scale(.92)}.fs-btn.primary.big{padding:var(--sp-4) var(--sp-5);font-size:19px;animation:btn-attract 1.4s ease-in-out infinite}@keyframes btn-attract{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.chapter-banner{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:linear-gradient(135deg,#ffd43b,#ff8c42,#845ef7);color:#fff;box-shadow:var(--elev-3);border:2px solid rgba(255,255,255,.5);max-width:460px;width:min(460px,90vw);animation:card-pop var(--dur-3) var(--ease-spring) .7s both}.chapter-banner-cover{font-size:44px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));animation:hero-idle 2s ease-in-out infinite}.chapter-banner-text{flex:1 1 auto}.chapter-banner-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.85}.chapter-banner-title{font-size:20px;font-weight:800;margin-top:2px;text-shadow:0 2px 0 rgba(0,0,0,.15)}.chapter-banner-trophy{font-size:36px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));animation:medal-spin 1.4s ease-in-out infinite}.anim-cheer .success-hero{animation:success-pop .6s var(--ease-snap),success-wiggle 1.6s .6s ease-in-out infinite}.anim-cheer:before,.anim-cheer:after{content:"⭐";position:absolute;font-size:36px;animation:sparkle 2s ease-in-out infinite}.anim-cheer:before{top:10%;left:18%;animation-delay:.2s}.anim-cheer:after{top:20%;right:16%;animation-delay:.7s}@keyframes sparkle{0%,to{opacity:0;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}.anim-hop .success-hero{animation:success-hop .7s ease-in-out infinite}@keyframes success-hop{0%,to{transform:translateY(0)}35%{transform:translateY(-50px)}60%{transform:translateY(-10px)}}.anim-spin .success-hero{animation:success-spin 1.2s linear infinite}@keyframes success-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(360deg) scale(1.1)}to{transform:rotate(720deg) scale(1)}}.parade-row{display:flex;gap:var(--sp-5)}.parade-emoji{font-size:clamp(64px,16vh,120px);line-height:1;animation:parade-march 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * .2s);filter:drop-shadow(0 6px 10px rgba(0,0,0,.22))}@keyframes parade-march{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-18px) rotate(6deg)}}.ensemble{position:relative;width:100%;height:100%}.ensemble-emoji{position:absolute;font-size:clamp(48px,9vh,78px);line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));opacity:0;animation:ensemble-pop .5s var(--ease-snap) forwards,ensemble-bounce 2s ease-in-out .6s infinite;animation-delay:calc(var(--i) * .12s),calc(.6s + var(--i) * .05s)}.ensemble-emoji:nth-child(1){left:6%;top:18%}.ensemble-emoji:nth-child(2){left:26%;top:8%}.ensemble-emoji:nth-child(3){left:46%;top:18%}.ensemble-emoji:nth-child(4){left:66%;top:8%}.ensemble-emoji:nth-child(5){left:86%;top:18%}.ensemble-emoji:nth-child(6){left:16%;top:60%}.ensemble-emoji:nth-child(7){left:46%;top:70%}.ensemble-emoji:nth-child(8){left:76%;top:60%}@keyframes ensemble-pop{0%{opacity:0;transform:scale(0) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes ensemble-bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.06)}}.anim-arc-rainbow .success-hero{animation:hero-along-arc 2s ease-in-out infinite;position:relative;z-index:2}@keyframes hero-along-arc{0%{transform:translate(-180px) translateY(40px) scale(.85)}50%{transform:translate(0) translateY(-40px) scale(1.05)}to{transform:translate(180px) translateY(40px) scale(.85)}}.success-rainbow{position:absolute;bottom:18%;left:50%;width:80%;height:50%;transform:translate(-50%);border:16px solid transparent;border-top-color:#ff6b6b;border-left-color:#ffa94d;border-right-color:#ffd43b;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:inset 0 -16px #51cf66,inset 0 -32px #4dabf7,inset 0 -48px #845ef7;z-index:1;animation:rainbow-draw .8s ease-out}@keyframes rainbow-draw{0%{clip-path:polygon(50% 100%,50% 100%,50% 100%,50% 100%)}to{clip-path:polygon(0 100%,0 0,100% 0,100% 100%)}}@keyframes success-pop{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.25) rotate(10deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes success-wiggle{0%,to{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.08) rotate(6deg)}}@media (max-height: 380px){.piano-stage{padding:var(--sp-2);padding-top:64px}.gear-btn{width:44px;height:44px}.gear-icon{font-size:20px}.status-pill{padding:6px 12px;font-size:13px}.anchor-star{font-size:18px;top:4px}.first-touch-finger{font-size:50px}.key{padding-bottom:var(--sp-3)}.level-pill{padding:3px 8px 3px 3px;gap:6px}.level-pill-back{width:28px;height:28px;font-size:16px}.level-pill-hero{font-size:22px}.level-pill-badge{font-size:10px;padding:0 6px}.chapter-cover{font-size:44px}.level-hero{font-size:30px}}