:root{--bg:#100b1c;--bg-panel:#ffffff0d;--bg-panel-strong:#ffffff17;--ink:#f4f1fb;--ink-dim:#f4f1fba6;--accent-voice:#ffb703;--accent-trumpet:#fb5607;--accent-violin:#8338ec;--accent-flute:#3a86ff;--accent-piano:#06d6a0;--accent:var(--accent-voice);--skin:#ffe3c4;--radius-lg:1.5rem;--radius-md:1rem;--radius-sm:.7rem;--panel-border:#ffffff1a;--panel-shadow:0 24px 60px -24px #000000a6, 0 1px 0 #ffffff0f inset}*{box-sizing:border-box}body{background:radial-gradient(60rem 40rem at 15% -10%, #ffb7031a, transparent), radial-gradient(50rem 40rem at 100% 10%, #8338ec33, transparent), radial-gradient(70rem 50rem at 50% 120%, #3a86ff1a, transparent), var(--bg);min-height:100vh;color:var(--ink);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5}.site-header{padding:1.25rem 1.5rem 0}.site-header nav a.brand{color:var(--ink);letter-spacing:.02em;align-items:center;font-size:1.1rem;font-weight:700;text-decoration:none;display:inline-flex}main{max-width:76rem;margin:0 auto;padding:1.5rem 1.5rem 3rem}@media (width>900px){main{padding:1rem 1.5rem 1.25rem}}h1.tagline{text-align:center;color:var(--ink-dim);max-width:40rem;margin:.5rem auto 2rem;font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:600}@media (width>900px){h1.tagline{margin:.3rem auto .9rem}}.stage{grid-template-columns:minmax(320px,38%) minmax(420px,1fr);justify-content:center;align-items:stretch;gap:1.5rem;display:grid}@media (width<=900px){.stage{grid-template-columns:1fr}}.control-column,.performance-column{background:linear-gradient(160deg, var(--bg-panel-strong), var(--bg-panel));backdrop-filter:blur(18px);border:1px solid var(--panel-border);border-radius:var(--radius-lg);box-shadow:var(--panel-shadow);flex-direction:column;min-width:0;padding:1.75rem 1.5rem;display:flex;position:relative}@media (width<=900px){.control-column,.performance-column{padding:1.5rem 1.1rem}}@media (width>900px){.control-column,.performance-column{padding:1.15rem 1.5rem}}.control-column{gap:1.5rem}@media (width>900px){.control-column{gap:1rem}}.performance-column{align-items:center;gap:0;overflow:hidden}.stage-column-heading{text-align:center;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.14em;margin:0 0 1rem;font-size:.78rem;font-weight:700}@media (width>900px){.stage-column-heading{margin:0 0 .6rem}}.control-grid{flex-direction:column;flex:1;gap:1.5rem;min-width:0;display:flex}.instrument-panel,.controller-panel{flex-direction:column;align-items:center;width:100%;min-width:0;display:flex}.controller-panel{flex:1;justify-content:center}.panel-heading{text-align:center;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.14em;margin:0 0 .85rem;font-size:.72rem;font-weight:700}@media (width>900px){.panel-heading{margin:0 0 .5rem}}.singer-section{justify-content:center;width:100%;min-width:0;padding-top:.5rem;display:flex;position:relative}@media (width>900px){.singer-section{padding-top:.25rem}}.singer-section:before{content:"";filter:blur(4px);pointer-events:none;z-index:0;background:radial-gradient(closest-side,#ffb70329,#0000 70%);height:14rem;position:absolute;inset:-1.5rem 0 auto}.flow-indicator{flex-direction:column;align-items:center;gap:.15rem;margin:.5rem 0 .75rem;display:flex}@media (width>900px){.flow-indicator{margin:.3rem 0 .4rem}}.flow-arrow{color:var(--accent);opacity:.55;font-size:1.3rem;line-height:1;animation:2.4s ease-in-out infinite flow-pulse}@media (width>900px){.flow-arrow{font-size:1.1rem}}.flow-arrow:nth-child(2){opacity:.35;animation-delay:.25s}@keyframes flow-pulse{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:.7;transform:translateY(4px)}}.crowd-section{justify-content:center;width:100%;min-width:0;display:flex}.character{z-index:1;filter:hue-rotate(var(--hue,0deg));position:relative}.character-player{width:min(46vw,280px);transition:filter .2s}@media (width>900px){.character-player{width:min(28vw,240px)}}.character-player.character-active{filter:hue-rotate(var(--hue,0deg)) drop-shadow(0 0 26px var(--character-accent,var(--accent)))}.character-crowd{width:100%;max-width:108px;transform:scale(var(--scale-jitter,1));transition:filter .2s}@media (width>900px){.character-crowd{max-width:96px}}.character-crowd.character-active{filter:hue-rotate(var(--hue,0deg)) drop-shadow(0 0 10px var(--character-accent,var(--accent)))}.character-svg{width:100%;height:auto;display:block;overflow:visible}.character-body{transform-origin:50px 130px;transform:translateY(var(--bob-y,0)) rotate(var(--tilt,0deg))}.character-idle .character-body{animation:4.2s ease-in-out infinite breathe}@keyframes breathe{0%,to{transform:translateY(var(--bob-y,0)) rotate(var(--tilt,0deg)) scale(1)}50%{transform:translateY(calc(var(--bob-y,0) - 1.5px)) rotate(var(--tilt,0deg)) scale(1.015)}}.character-torso{fill:var(--character-accent,var(--accent));opacity:.9}.character-face{fill:var(--skin)}.character-eye{fill:#2b2140;transition:transform .15s}.character-active .character-eye{transform:translateY(-.5px)}.character-mouth-wrap{transform-box:fill-box;transform-origin:50%;transform:scaleY(max(.16, var(--mouth-open,.16)))}.character-mouth{fill:#7a2b3a}.character-accessory-icon{filter:drop-shadow(0 2px 4px #00000059);font-size:1.4rem;position:absolute;bottom:-.35rem;right:12%}.character-voice{--character-accent:var(--accent-voice)}.character-trumpet{--character-accent:var(--accent-trumpet)}.character-violin{--character-accent:var(--accent-violin)}.character-flute{--character-accent:var(--accent-flute)}.character-piano{--character-accent:var(--accent-piano)}.pitch-stage{flex-direction:column;align-items:center;gap:.65rem;width:100%;display:flex}.pitch-stage-label{letter-spacing:.16em;color:var(--ink-dim);align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;display:inline-flex}.pitch-stage-label-high:before{content:"▲";color:var(--accent);opacity:.8;font-size:.6rem}.pitch-stage-label-low:after{content:"▼";color:var(--accent);opacity:.8;font-size:.6rem}@media (width<=900px){.pitch-stage{flex-direction:row-reverse;gap:.85rem}.pitch-stage-label-high:before{content:"▶"}.pitch-stage-label-low:after{content:"◀"}}.pitch-slider{background:linear-gradient(180deg, #ffffff0a, transparent 40%), var(--bg-panel-strong);border:1px solid var(--panel-border);touch-action:none;cursor:grab;outline-offset:4px;border-radius:999px;flex:1;width:clamp(4.5rem,9vw,6.5rem);min-height:clamp(200px,30vh,340px);position:relative;overflow:hidden;box-shadow:0 18px 40px -18px #0000008c,inset 0 1px #ffffff14}@media (width<=900px){.pitch-slider{flex:1;height:clamp(3.75rem,15vw,4.75rem);min-height:0}}.pitch-slider:focus-visible{outline:2px solid var(--accent)}.pitch-slider:before{content:"";pointer-events:none;opacity:.6;background-image:repeating-linear-gradient(#ffffff29 0 1px,#0000 1px 11.1111%);position:absolute;inset:.9rem 0}@media (width<=900px){.pitch-slider:before{background-image:repeating-linear-gradient(90deg,#ffffff29 0 1px,#0000 1px 11.1111%);inset:0 .9rem}}.pitch-slider-track{background:linear-gradient(to top, var(--accent) calc(var(--thumb-t,.5) * 100%), #ffffff0a calc(var(--thumb-t,.5) * 100%));opacity:.5;pointer-events:none;border-radius:999px;transition:opacity .15s;position:absolute;inset:.6rem}@media (width<=900px){.pitch-slider-track{background:linear-gradient(to right, var(--accent) calc(var(--thumb-t,.5) * 100%), #ffffff0a calc(var(--thumb-t,.5) * 100%))}}.pitch-slider-active .pitch-slider-track{opacity:.85}.pitch-slider-thumb{left:50%;bottom:calc(var(--thumb-t,.5) * 100%);background:radial-gradient(circle at 32% 28%, #ffffff8c, var(--accent) 65%);pointer-events:none;border-radius:50%;width:clamp(3.4rem,7vw,4.4rem);height:clamp(3.4rem,7vw,4.4rem);transition:box-shadow .15s;position:absolute;transform:translate(-50%,50%);box-shadow:0 4px 16px #00000073}@media (width<=900px){.pitch-slider-thumb{left:calc(var(--thumb-t,.5) * 100%);top:50%;bottom:auto;transform:translate(-50%,-50%)}}.pitch-slider-active .pitch-slider-thumb{box-shadow:0 0 0 10px #ffb7032e,0 4px 20px #00000080}.pitch-slider:active{cursor:grabbing}.pitch-hint{color:var(--ink-dim);text-align:center;margin:0;font-size:.8rem}.pitch-hint-horizontal{display:none}@media (width<=900px){.pitch-hint-vertical{display:none}.pitch-hint-horizontal{display:block}}.instrument-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;width:100%;display:grid}.instrument-button{background:var(--bg-panel);border:1px solid var(--panel-border);border-radius:var(--radius-md);color:var(--ink-dim);font:inherit;text-align:center;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;min-width:0;padding:.75rem .35rem;transition:transform .12s,background .15s,border-color .15s,color .15s,box-shadow .15s;display:flex}.instrument-button-icon-badge{background:color-mix(in srgb, var(--instrument-accent,var(--accent)) 18%, transparent);border-radius:50%;justify-content:center;align-items:center;width:clamp(2rem,6vw,2.6rem);height:clamp(2rem,6vw,2.6rem);transition:background .15s;display:flex}.instrument-button-icon{font-size:clamp(1.1rem,3.4vw,1.5rem);line-height:1}.instrument-button-label{overflow-wrap:break-word;font-size:clamp(.62rem,2vw,.78rem);font-weight:600}.instrument-button:hover{background:var(--bg-panel-strong);border-color:#ffffff40;transform:translateY(-2px)}.instrument-button:active{background:var(--bg-panel-strong);transform:translateY(0)scale(.97)}.instrument-button[aria-pressed=true]{background:color-mix(in srgb, var(--instrument-accent,var(--accent)) 14%, var(--bg-panel-strong));border-color:var(--instrument-accent,var(--accent));color:var(--ink);box-shadow:0 0 0 1px var(--instrument-accent,var(--accent))}.instrument-button[aria-pressed=true] .instrument-button-icon-badge{background:color-mix(in srgb, var(--instrument-accent,var(--accent)) 38%, transparent)}.crowd-grid{border-radius:var(--radius-lg);background:linear-gradient(#ffffff0a,#0000);border:1px solid #ffffff0f;grid-template-columns:repeat(3,minmax(0,1fr));place-content:center;place-items:end center;gap:1.4rem .9rem;width:100%;min-width:0;max-width:30rem;margin-top:.5rem;padding:1.1rem .75rem;display:grid}@media (width>900px){.crowd-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem 1rem;max-width:36rem;margin-top:.3rem;padding:.85rem .75rem}}@media (prefers-reduced-motion:reduce){.character-idle .character-body,.flow-arrow{animation:none}.instrument-button,.instrument-button-icon-badge,.character-player,.character-crowd,.pitch-slider-thumb,.pitch-slider-track{transition:none}}