: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-width:960px;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{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:flex-end;align-items:center}.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-wake{border:0;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center;gap:10px}.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))}.reaction-burst .character{animation:burst-shake .18s steps(2,end)}@keyframes burst-shake{0%{translate:0 0}25%{translate:-12px 8px}50%{translate:10px -6px}75%{translate:-8px -4px}to{translate:0 0}}.piano{position:relative;width:min(920px,94vw);height:180px;margin:0 auto;display:grid;grid-template-columns:repeat(8,1fr);align-items:end}.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;-webkit-user-select:none;user-select:none}.piano-key--white{height:170px;background:linear-gradient(#fffdf6,#d8d2c3);border-radius:0 0 7px 7px}.piano-key--black{position:absolute;top:0;width:8%;height:106px;z-index:2;background:linear-gradient(#22242e,#090a0d);color:#f7f4ed;border-radius:0 0 6px 6px;transform:translate(-50%)}.piano-key--black:nth-of-type(2){left:12.5%}.piano-key--black:nth-of-type(4){left:25%}.piano-key--black:nth-of-type(7){left:50%}.piano-key--black:nth-of-type(9){left:62.5%}.piano-key--black:nth-of-type(11){left:75%}.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}