:root{color:#f7f4ed;background:#15161c;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 18%,rgba(247,221,109,.14),transparent 28%),linear-gradient(135deg,#15161c,#242026 48%,#182426)}button,input{font:inherit}.app-shell{position:relative;isolation:isolate;min-height:100vh;display:grid;grid-template-rows:56px minmax(260px,1fr) 190px;padding:18px 28px 24px;gap:16px}.top-bar{display:flex;justify-content:space-between;align-items:center;gap:16px}.app-shell:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,rgba(255,248,193,.26),transparent 48%)}.app-shell.burst-screen-kick{animation:burst-shell-kick .22s cubic-bezier(.2,.9,.32,1)}.app-shell.burst-screen-kick:before{animation:burst-shell-flash .22s ease-out}.mode-control{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(247,244,237,.18);border-radius:8px;background:#0a0c1047}.mode-control__button{min-width:64px;height:34px;border:0;border-radius:6px;color:#f7f4edb8;background:transparent;cursor:pointer;font-weight:800}.mode-control__button[aria-pressed=true]{color:#15161c;background:#f2d35f}.volume-control{display:inline-flex;align-items:center;gap:10px;color:#f7f4edd1;font-size:14px}.volume-control input{width:180px;accent-color:#f2d35f}.character-stage{position:relative;height:100%;display:grid;place-items:center;isolation:isolate}.character-stage:before,.character-stage:after{content:"";position:absolute;top:14%;right:22%;bottom:18%;left:22%;z-index:0;pointer-events:none;opacity:0;transform:translateZ(0) scale(.72)}.character-wake{border:0;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center;gap:10px;position:relative;z-index:1}.character-wake:focus{outline:none}.character-wake:focus-visible .character{filter:drop-shadow(0 0 22px rgba(247,221,109,.48)) drop-shadow(0 26px 42px rgba(0,0,0,.38))}.character{width:min(46vw,560px);height:min(48vh,520px);object-fit:contain;filter:drop-shadow(0 26px 42px rgba(0,0,0,.38));transform-origin:50% 86%;transition:transform 90ms ease,filter 90ms ease}.character-status{min-height:24px;font-weight:700;color:#f7f4ede6}.reaction-low .character{transform:translateY(14px) scaleX(1.06) scaleY(.94) rotate(-2deg);filter:drop-shadow(0 18px 38px rgba(83,222,191,.34))}.reaction-mid .character{transform:translateY(-8px) scale(1.04) rotate(2deg);filter:drop-shadow(0 24px 42px rgba(242,211,95,.38))}.reaction-high .character{transform:translateY(-22px) scale(1.12) rotate(-4deg);filter:hue-rotate(30deg) saturate(1.45) drop-shadow(0 28px 52px rgba(255,113,190,.48))}.character-stage[data-intensity="2"] .character{scale:1.025}.reaction-burst:before,.reaction-burst:after,.reaction-burst-exit:before{top:8%;right:14%;bottom:12%;left:14%;border-radius:50%;will-change:opacity,transform}.reaction-burst-enter:before,.reaction-burst-rehit:before{border:5px solid rgba(255,248,193,.88);box-shadow:0 0 0 10px #65e8ff29,0 0 34px #ff71be85}.reaction-burst-enter:after,.reaction-burst-rehit:after{background:repeating-conic-gradient(from 8deg,rgba(255,248,193,.96) 0 3deg,transparent 3deg 24deg,rgba(101,232,255,.88) 24deg 27deg,transparent 27deg 45deg);mask:radial-gradient(circle,transparent 0 34%,#000 36% 62%,transparent 64%)}.reaction-burst-enter:before{animation:burst-impact-ring .26s cubic-bezier(.12,.82,.24,1)}.reaction-burst-enter:after{animation:burst-impact-rays .3s cubic-bezier(.12,.82,.24,1)}.reaction-burst-rehit:before{animation:burst-rehit-ring .18s ease-out}.reaction-burst-rehit:after{animation:burst-rehit-rays .2s ease-out}.reaction-motion-hop .character{animation:character-hop .22s cubic-bezier(.2,1.4,.34,1)}.reaction-motion-squish .character{animation:character-squish .21s ease-out}.reaction-motion-tilt-left .character{animation:character-tilt-left .23s ease-out}.reaction-motion-tilt-right .character{animation:character-tilt-right .23s ease-out}.reaction-motion-bob .character{animation:character-bob .24s ease-out}.reaction-burst-sustain .character{filter:hue-rotate(18deg) saturate(1.5) drop-shadow(0 0 16px rgba(255,255,244,.62)) drop-shadow(0 22px 48px rgba(255,113,190,.4));animation:burst-sustain-breathe 1.5s ease-in-out infinite}.reaction-burst-overdrive .character{filter:hue-rotate(22deg) saturate(1.72) drop-shadow(0 0 20px rgba(255,255,244,.72)) drop-shadow(0 0 28px rgba(101,232,255,.26)) drop-shadow(0 24px 52px rgba(255,113,190,.46))}.reaction-burst-enter .character{animation:burst-character-impact .28s cubic-bezier(.18,1.32,.32,1)}.reaction-burst-rehit .character{animation:burst-character-rehit .18s ease-out}.reaction-burst-exit:before{border:3px solid rgba(101,232,255,.44);animation:burst-exit-ring .16s ease-in}.reaction-burst-exit .character{animation:burst-character-settle .16s ease-out}@keyframes burst-impact-ring{0%{opacity:.96;transform:scale(.38,.2) rotate(-8deg)}55%{opacity:.82}to{opacity:0;transform:scale(1.42,1.08) rotate(5deg)}}@keyframes burst-impact-rays{0%{opacity:0;transform:scale(.44) rotate(-7deg)}24%{opacity:1}to{opacity:0;transform:scale(1.34) rotate(8deg)}}@keyframes burst-rehit-ring{0%{opacity:.78;transform:scale(.66,.46)}to{opacity:0;transform:scale(1.18,.92)}}@keyframes burst-rehit-rays{0%{opacity:.72;transform:scale(.72) rotate(-3deg)}to{opacity:0;transform:scale(1.12) rotate(5deg)}}@keyframes burst-character-impact{0%{translate:0 10px;scale:1.08 .84}48%{translate:0 -14px;scale:.94 1.16}72%{translate:0 2px;scale:1.06 .96}to{translate:0 0;scale:1}}@keyframes burst-character-rehit{0%{translate:0 3px;scale:1.04 .94}55%{translate:0 -7px;scale:.98 1.06}to{translate:0 0;scale:1}}@keyframes burst-sustain-breathe{0%,to{scale:1}50%{scale:1.035}}@keyframes burst-exit-ring{0%{opacity:.5;transform:scale(1.06)}to{opacity:0;transform:scale(.7)}}@keyframes burst-character-settle{0%{translate:0 -5px;scale:1.04 .96}to{translate:0 0;scale:1}}@keyframes burst-shell-kick{0%{transform:translateY(0)}24%{transform:translateY(3px) scale(1.003)}58%{transform:translateY(-2px)}to{transform:translateY(0)}}@keyframes burst-shell-flash{0%{opacity:0}18%{opacity:1}to{opacity:0}}@keyframes character-hop{0%{translate:0 0}45%{translate:0 -18px}to{translate:0 0}}@keyframes character-squish{0%{scale:1 1}45%{scale:1.08 .92}to{scale:1 1}}@keyframes character-tilt-left{0%{rotate:0deg;translate:0 0}45%{rotate:-7deg;translate:-8px -6px}to{rotate:0deg;translate:0 0}}@keyframes character-tilt-right{0%{rotate:0deg;translate:0 0}45%{rotate:7deg;translate:8px -6px}to{rotate:0deg;translate:0 0}}@keyframes character-bob{0%{translate:0 0}35%{translate:0 8px}70%{translate:0 -10px}to{translate:0 0}}@media(prefers-reduced-motion:reduce){.app-shell.burst-screen-kick,.app-shell.burst-screen-kick:before,.reaction-burst-enter:before,.reaction-burst-enter:after,.reaction-burst-rehit:before,.reaction-burst-rehit:after,.reaction-burst-exit:before{animation:none}.reaction-burst-enter .character,.reaction-burst-rehit .character,.reaction-burst-sustain .character,.reaction-burst-exit .character{animation:none}}.piano{position:relative;width:min(1120px,94vw);height:180px;margin:0 auto;display:grid;align-items:end}.piano,.piano-key{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.piano.is-disabled{opacity:.45;pointer-events:none}.piano-key{color:#15161c;border:1px solid rgba(21,22,28,.35);cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;padding:0 0 18px}.piano-key>*{pointer-events:none}.piano-key--white{height:170px;background:linear-gradient(#fffdf6,#d8d2c3);border-radius:0 0 7px 7px}.piano-key--black{position:absolute;top:0;left:calc(var(--black-left) * 100% / var(--white-count));width:calc(64% / var(--white-count));height:106px;z-index:2;background:linear-gradient(#22242e,#090a0d);color:#f7f4ed;border-radius:0 0 6px 6px;transform:translate(-50%)}.piano-key.is-pressed{transform:translateY(8px) scaleY(.98);filter:brightness(1.22) saturate(1.2)}.piano-key--black.is-pressed{transform:translate(-50%) translateY(7px) scaleY(.97)}.piano-key__key{font-weight:800;font-size:20px}.piano-key__note{opacity:.62;font-size:12px;line-height:1.1;white-space:nowrap}@media(max-width:640px){.app-shell{grid-template-rows:52px minmax(220px,1fr) 166px;padding:12px 10px 16px;gap:10px}.top-bar{gap:8px}.mode-control__button{min-width:54px;height:32px}.volume-control{gap:7px;font-size:12px}.volume-control input{width:110px}.character{width:min(62vw,360px);height:min(42vh,360px)}.piano{width:96vw;height:160px}.piano-key{gap:5px;padding-bottom:14px}.piano-key--white{height:150px}.piano-key--black{height:94px;width:calc(70% / var(--white-count))}.piano-key__key{font-size:15px}.piano-key__note{font-size:9px}}