:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#111313;color:#f7f1e8}*{box-sizing:border-box}body{--energy: 0;--flux: 0;--impact: 0;min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at 18% 20%,rgba(255,90,95,calc(.12 + var(--energy) * .42 + var(--impact) * .36)),transparent 30rem),radial-gradient(circle at 82% 18%,rgba(0,206,201,calc(.1 + var(--energy) * .34 + var(--flux) * .22)),transparent 26rem),linear-gradient(135deg,#171a1a,#101111 55%,#1e1615);filter:saturate(calc(1 + var(--impact) * .35)) contrast(calc(1 + var(--flux) * .12))}button{font:inherit}.actions{position:relative;z-index:30;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,24rem);gap:clamp(2rem,6vw,5rem);align-items:center;width:min(72rem,calc(100vw - 2rem));min-height:100vh;margin:0 auto;padding:3rem 0}.panel{display:grid;gap:1.5rem;justify-items:start;transform:scale(calc(1 + var(--impact) * .012));transform-origin:left center;transition:transform 90ms ease-out}.eyebrow{margin:0;color:#7ee2d6;font-size:.86rem;font-weight:700;text-transform:uppercase}h1{max-width:12ch;margin:0;font-size:clamp(3rem,8vw,6.5rem);line-height:.92;letter-spacing:0;text-shadow:0 0 calc(.25rem + var(--impact) * 1.1rem) rgba(255,90,95,calc(.12 + var(--impact) * .34)),0 0 calc(.2rem + var(--flux) * .9rem) rgba(126,226,214,calc(.08 + var(--flux) * .24))}.subtitle{max-width:28ch;margin:0;color:#f7f1e8b3;font-size:1rem;line-height:1.5}.beat-button{min-width:8rem;min-height:3.25rem;border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:.9rem 1.4rem;background:#f7f1e8;color:#151515;font-weight:800;cursor:pointer;transform-origin:center;box-shadow:0 0 0 calc(var(--impact) * .45rem) rgba(255,90,95,calc(var(--impact) * .24)),0 calc(var(--impact) * .8rem) calc(1.2rem + var(--impact) * 2.6rem) rgba(255,90,95,calc(.08 + var(--impact) * .24));transition:box-shadow 90ms ease,background 90ms ease,transform 90ms ease-out}.debug-toggle{min-width:6.5rem;min-height:3.25rem;border:1px solid rgba(247,241,232,.24);border-radius:999px;padding:.9rem 1.2rem;background:#f7f1e814;color:#f7f1e8;font-weight:800;cursor:pointer}.debug-toggle[aria-pressed=true]{border-color:#7ee2d6c7;color:#7ee2d6}.beat-button.is-beating{box-shadow:0 0 0 .85rem #ff5a5f42,0 1rem 3.4rem #ff5a5f5c;background:#fff}.meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:end;min-height:24rem;filter:drop-shadow(0 0 calc(var(--impact) * 2.8rem) rgba(255,90,95,calc(var(--impact) * .42)));transform:translateY(calc(var(--impact) * -.35rem)) scale(calc(1 + var(--impact) * .018));transform-origin:bottom center;transition:transform 90ms ease-out,filter 90ms ease-out}.meter{display:grid;grid-template-rows:1fr auto;gap:.9rem;min-width:0;height:24rem}.bar{--level: 0;align-self:end;min-height:.5rem;height:calc(8% + var(--level) * 92%);border-radius:.45rem;background:linear-gradient(180deg,#f7f1e8,#ff5a5f);box-shadow:0 1rem 3.4rem #ff5a5f52,0 0 calc(var(--impact) * 2.5rem) rgba(255,90,95,calc(var(--impact) * .46));transition:height 90ms ease-out}.bar-mid{background:linear-gradient(180deg,#f7f1e8,#7ee2d6);box-shadow:0 1rem 3.4rem #7ee2d647,0 0 calc(var(--flux) * 2.4rem) rgba(126,226,214,calc(var(--flux) * .36))}.bar-treble{background:linear-gradient(180deg,#f7f1e8,#ffd166);box-shadow:0 1rem 3.4rem #ffd1663d,0 0 calc(var(--flux) * 2.2rem) rgba(255,209,102,calc(var(--flux) * .32))}body.is-beating .demo{animation:beat-snap .16s ease-out}@keyframes beat-snap{0%{transform:scale(1.006)}to{transform:scale(1)}}.meter span{overflow-wrap:anywhere;color:#f7f1e8b8;font-size:.9rem;font-weight:700;text-align:center}.audio-debug{position:fixed;right:1rem;top:1rem;z-index:20;width:min(48rem,calc(100vw - 2rem));height:min(17rem,42vh);border:1px solid rgba(247,241,232,.16);border-radius:.75rem;overflow:hidden;background:#0a0c0eb8;box-shadow:0 1rem 3rem #00000057;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none}.audio-debug.is-hidden{display:none}.audio-debug-canvas{display:block;width:100%;height:100%}@media (max-width: 760px){.demo{grid-template-columns:1fr;align-content:center}h1{max-width:10ch;font-size:clamp(2.8rem,18vw,4.75rem)}.meters,.meter{min-height:15rem;height:15rem}.audio-debug{right:.75rem;top:.75rem;width:calc(100vw - 1.5rem);height:16rem}}