:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#f2f5fd;--bg:#151b40;--bg-alt:#232a68;--percussion:42;--bass:264;--melody:190;--scratch:328}*{box-sizing:border-box}html,body{height:100%}body{overscroll-behavior:none;color:var(--ink);background:radial-gradient(120vmax 100vmax at 50% 15%, var(--bg-alt), transparent 70%), var(--bg);margin:0;font-family:system-ui,sans-serif;overflow:hidden}main{position:fixed;inset:0}.grid{z-index:2;grid-template-columns:repeat(var(--columns,8), 1fr);grid-template-rows:repeat(var(--rows,4), 1fr);touch-action:none;cursor:crosshair;display:grid;position:absolute;inset:0}.cell{font:inherit;color:inherit;cursor:inherit;-webkit-tap-highlight-color:transparent;background:0 0;border:0;margin:0;padding:0}.cell:focus-visible{outline:1px dashed color-mix(in oklab, var(--ink) 45%, transparent);outline-offset:-3px}.stage{z-index:1;pointer-events:none;will-change:transform;position:absolute;inset:0;overflow:visible}.backdrop,.bursts{position:absolute;inset:0}.backdrop{opacity:0;mix-blend-mode:screen;color:#5c85d6;background:radial-gradient(circle at var(--x,50%) var(--y,50%), color-mix(in oklab, currentcolor 55%, transparent) 0%, color-mix(in oklab, currentcolor 18%, transparent) 35%, transparent 65%)}.backdrop[data-family=percussion]{--hue:var(--percussion)}.backdrop[data-family=bass]{--hue:var(--bass)}.backdrop[data-family=melody]{--hue:var(--melody)}.backdrop[data-family=scratch]{--hue:var(--scratch)}.cursor-glow{aspect-ratio:1;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle,#c8d9ea24 0%,#0000 62%);border-radius:50%;width:16vmin;transition:opacity .45s;position:absolute;top:0;left:0}.fx{color:hsl(var(--hue,220) 30% 94%);mix-blend-mode:screen;will-change:transform, opacity;position:absolute;overflow:visible}.fx[data-family=percussion]{--hue:var(--percussion)}.fx[data-family=bass]{--hue:var(--bass)}.fx[data-family=melody]{--hue:var(--melody)}.fx[data-family=scratch]{--hue:var(--scratch)}.fx svg *,.fx>*{transform-box:fill-box;transform-origin:50%}.fx-core{aspect-ratio:1;background:radial-gradient(circle, currentcolor 0%, color-mix(in oklab, currentcolor 55%, transparent) 38%, transparent 68%);border-radius:50%;width:15vmin}.fx-swell{aspect-ratio:1;background:radial-gradient(circle, color-mix(in oklab, currentcolor 60%, transparent) 0%, color-mix(in oklab, currentcolor 20%, transparent) 52%, transparent 72%);border-radius:50%;width:30vmin}.fx-ring{aspect-ratio:1;border:.45vmin solid;border-radius:50%;width:17vmin}.fx-wash{aspect-ratio:1;background:radial-gradient(circle, color-mix(in oklab, currentcolor 30%, transparent) 0%, transparent 55%);border-radius:50%;width:120vmax}.fx-flare{aspect-ratio:1;border:.35vmin solid color-mix(in oklab, currentcolor 50%, transparent);border-radius:50%;width:100vmax}.fx-trail{aspect-ratio:1;background:radial-gradient(circle, color-mix(in oklab, currentcolor 42%, transparent) 0%, color-mix(in oklab, currentcolor 20%, transparent) 40%, transparent 72%);border-radius:50%;width:26vmin}.fx-mote{aspect-ratio:1;background:radial-gradient(circle,#d3e0ee80 0%,#0000 68%);border-radius:50%;width:2.4vmin}.fx-cross{aspect-ratio:1;background:linear-gradient(currentColor,currentColor) 50%/100% 7% no-repeat,linear-gradient(currentColor,currentColor) 50%/7% 100% no-repeat;width:24vmin}.fx-blinds{background:repeating-linear-gradient(90deg,currentColor 0 2px,#0000 2px 4.5vw);width:130vw;height:120vh}.fx-circle-plain{aspect-ratio:1;background:radial-gradient(circle,currentColor 0 96%,#0000 100%);border-radius:50%;width:14vmin}.fx-arc{aspect-ratio:1;width:30vmin}.fx-arc-line{fill:none;stroke:currentColor;stroke-width:3.5px;stroke-linecap:round}.fx-orbit{aspect-ratio:1;width:32vmin}.fx-orbit-dot{fill:currentColor}.fx-star{aspect-ratio:1;width:26vmin}.fx-star-main{fill:none;stroke:currentColor;stroke-width:3px;stroke-linejoin:round}.fx-star-spark{fill:currentColor}.fx-bars{aspect-ratio:240/100;width:42vmin}.fx-bars-line{fill:currentColor;transform-origin:50% 100%}.fx-ring3d{aspect-ratio:1;border:.55vmin solid;border-radius:50%;width:30vmin}.fx-frame{aspect-ratio:1;border:.45vmin solid;width:22vmin}.fx-burst{aspect-ratio:1;width:30vmin}.fx-burst-bit{fill:currentColor}body[data-scene=blocks] .fx-core,body[data-scene=blocks] .fx-swell,body[data-scene=blocks] .fx-trail,body[data-scene=blocks] .fx-wash,body[data-scene=blocks] .fx-mote{border-radius:3%}body[data-scene=blocks] .fx-ring,body[data-scene=blocks] .fx-flare,body[data-scene=blocks] .fx-ring3d,body[data-scene=blocks] .fx-circle-plain{border-radius:0}body[data-scene=blocks] .fx-core,body[data-scene=blocks] .fx-swell{background:linear-gradient(135deg, color-mix(in oklab, currentcolor 85%, transparent), color-mix(in oklab, currentcolor 12%, transparent))}body[data-scene=rings] .fx-core{border:.35vmin solid color-mix(in oklab, currentcolor 70%, transparent);background:radial-gradient(circle, color-mix(in oklab, currentcolor 28%, transparent) 0%, transparent 70%)}body[data-scene=rings] .fx-swell{border:.3vmin solid color-mix(in oklab, currentcolor 45%, transparent);background:radial-gradient(circle, color-mix(in oklab, currentcolor 20%, transparent) 0%, transparent 72%)}body[data-scene=rings] .fx-trail{border:.4vmin solid color-mix(in oklab, currentcolor 50%, transparent);background:0 0}body[data-scene=rings] .fx-wash{background:radial-gradient(circle, color-mix(in oklab, currentcolor 10%, transparent) 38%, color-mix(in oklab, currentcolor 26%, transparent) 52%, transparent 62%)}body[data-scene=rings] .fx-ring{border-width:.3vmin}body[data-scene=rings] .fx-circle-plain{opacity:.7}body[data-scene=rings] .fx-star-spark,body[data-scene=rings] .fx-burst-bit{fill:none;stroke:currentColor;stroke-width:2.5px}body[data-scene=pulse] .fx-ring,body[data-scene=pulse] .fx-ring3d,body[data-scene=pulse] .fx-frame{border-width:.7vmin}body[data-scene=pulse] .fx-arc-line,body[data-scene=pulse] .fx-star-main{stroke-width:5px}body[data-scene=pulse] .fx-core{background:radial-gradient(circle, color-mix(in oklab, currentcolor 92%, white) 0%, color-mix(in oklab, currentcolor 70%, transparent) 42%, transparent 70%)}.scenery{z-index:3;pointer-events:none;position:absolute;inset:0;overflow:hidden}.curtain{will-change:transform, opacity;display:block;position:absolute;inset:0}header{z-index:4;pointer-events:none;justify-content:space-between;align-items:baseline;gap:1rem;padding:clamp(.7rem,2vmin,1.4rem);display:flex;position:fixed;inset:0 0 auto}h1{letter-spacing:.2em;text-transform:uppercase;color:color-mix(in oklab, var(--ink) 55%, transparent);text-shadow:0 1px 12px #00000073;margin:0;font-size:clamp(.85rem,2.2vmin,1.15rem);font-weight:500}nav a{pointer-events:auto;color:color-mix(in oklab, var(--ink) 45%, transparent);text-shadow:0 1px 12px #00000073;font-size:.78rem;text-decoration:none}nav a:hover,nav a:focus-visible{color:var(--ink)}.invitation{z-index:4;text-align:center;pointer-events:none;color:color-mix(in oklab, var(--ink) 78%, transparent);text-transform:uppercase;letter-spacing:.16em;text-indent:.16em;text-shadow:0 1px 16px #0000008c;margin:0;padding:0 1.5rem;font-size:clamp(.95rem,2.7vmin,1.35rem);transition:opacity .9s .35s,transform .9s .35s;position:fixed;inset:50% 0 auto;transform:translateY(-50%)}body:not([data-started=true]) .invitation{transform:translateY(-30%)}body[data-played=true] .invitation{opacity:0;transition-delay:0s;transform:translateY(-70%)}.opening{z-index:5;text-align:center;background:radial-gradient(120vmax 100vmax at 50% 15%, var(--bg-alt), transparent 70%), var(--bg);flex-direction:column;justify-content:center;align-items:center;padding:2rem;transition:opacity .55s,transform .55s;display:flex;position:fixed;inset:0}.opening[hidden]{display:none}.opening-note{color:color-mix(in oklab, var(--ink) 55%, transparent);letter-spacing:.02em;margin:clamp(1.4rem,4vmin,2.4rem) 0 0;font-size:clamp(.85rem,2vmin,1rem)}.start{border:1px solid color-mix(in oklab, var(--ink) 55%, transparent);color:var(--ink);font:inherit;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;cursor:pointer;background:0 0;border-radius:0;padding:.85em 3.2em;font-size:clamp(.85rem,2vmin,1rem);transition:background-color .25s,border-color .25s,color .25s}.start:hover,.start:focus-visible{border-color:var(--ink);background:var(--ink);color:var(--bg)}body[data-started=true] .opening{opacity:0;pointer-events:none;transform:scale(1.04)}body:not([data-started=true]) header,body:not([data-started=true]) .invitation{opacity:0}body:not([data-started=true]) .grid{cursor:default}header,.invitation{transition:opacity .7s .25s}