:root{--hue:50;--pitch:1;--breath:0;--idle-pulse:0;--bg-1:#241a12;--bg-2:#150f0a;--bg-3:#070504;--ink:#cbbeae;--glow-sat:88%;--glow-l:38%;--glow-alpha:.4;--glow-alpha-breath:.6;--glow-blur:16px;--glow-blur-breath:56px;--pearl-1:#faf8f5;--pearl-2:#e2dcd5;--pearl-3:#bdb2a8;--brass-ring:#c6992f;--brass-ring-dark:#4f3117;--valve-well:#160d08;--tray-bg:#f1eae40d;--tray-inset:#ffffff0f;--tray-shadow-a:.55;--focus-sat:88%;--focus-l:68%;--ripple-sat:88%;--ripple-l:66%}@media (prefers-color-scheme:light){:root{--bg-1:#f8f0e2;--bg-2:#efe2c9;--bg-3:#e2cfa8;--ink:#72573b;--glow-sat:75%;--glow-l:26%;--glow-alpha:.3;--glow-alpha-breath:.42;--glow-blur:4px;--glow-blur-breath:14px;--pearl-1:#fdfdfc;--pearl-2:#e9e6e2;--pearl-3:#c8c1bc;--brass-ring:#b18225;--brass-ring-dark:#633e21;--valve-well:#4c3424;--tray-bg:#81573114;--tray-inset:#ffffff8c;--tray-shadow-a:.22;--focus-sat:68%;--focus-l:36%;--ripple-sat:68%;--ripple-l:40%}}*{box-sizing:border-box}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html,body{height:100%}body{background:var(--bg-3);background:radial-gradient(ellipse at 50% 38%, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);color:var(--ink);justify-content:center;align-items:center;margin:0;font-family:system-ui,sans-serif;display:flex;overflow:hidden}main{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.stage{flex-direction:column;align-items:center;gap:1.75rem;padding:2rem;display:flex;position:relative}.instrument-shadow{background:radial-gradient(ellipse, hsl(var(--hue) 70% 8% / .6), transparent 72%);filter:blur(6px);pointer-events:none;width:min(46vw,260px);height:2.5rem;position:absolute;bottom:.5rem;left:50%;transform:translate(-50%)}.bell-button{cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;background:0 0;border:none;justify-content:center;align-items:center;width:min(66vw,360px);height:min(66vw,360px);padding:0;display:flex;position:relative}.bell-art{width:min(58vw,320px);display:block;position:relative}.bell-art img{width:100%;height:auto;filter:hue-rotate(calc((var(--hue) - 48) * 1deg)) drop-shadow(0 0 calc(var(--glow-blur) + var(--breath) * var(--glow-blur-breath)) hsl(var(--hue) var(--glow-sat) calc(var(--glow-l) + var(--pitch) * 12% + var(--idle-pulse) * 6%) / calc(var(--glow-alpha) + var(--breath) * var(--glow-alpha-breath))));display:block}.bell-shine{mix-blend-mode:overlay;pointer-events:none;background:linear-gradient(115deg,#0000 42%,#ffffff8c 50%,#0000 58%) 130% 0/260% 260%;animation:5s ease-in-out infinite bell-shine-sweep;position:absolute;inset:0;-webkit-mask-image:url(./trumpet-CJj1tZSq.png);mask-image:url(./trumpet-CJj1tZSq.png);-webkit-mask-size:100% 100%;mask-size:100% 100%}@keyframes bell-shine-sweep{0%,15%{background-position:130% 0}55%,to{background-position:-30% 0}}.bell-scale{transform-origin:50%;transform:scale(calc(1 + var(--breath) * .06 + var(--idle-pulse) * .015));transition:transform 60ms linear}.bell-button:focus-visible{outline:3px solid hsl(var(--hue) var(--focus-sat) var(--focus-l));outline-offset:10px;border-radius:50%}#ripples{pointer-events:none;width:min(66vw,360px);height:min(66vw,360px);position:absolute;top:0;left:0}.valve-tray{background:var(--tray-bg);box-shadow:0 24px 48px -26px hsl(var(--hue) 60% 20% / var(--tray-shadow-a)), inset 0 1px 0 var(--tray-inset);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:2rem;padding:.9rem 1.1rem}.valves{gap:.85rem;display:flex}.valve{--pressed:0;background:radial-gradient(circle at 32% 24%, #fffffff2 0%, #fff0 40%), conic-gradient(from 210deg, #f1e4e9, #e5ebf0, #f3f1e7, #f1e4e9), radial-gradient(circle at 50% 55%, var(--pearl-1) 0%, var(--pearl-2) 62%, var(--pearl-3) 100%);width:3.6rem;height:3.6rem;box-shadow:0 0 0 3px var(--brass-ring), 0 0 0 4.5px var(--brass-ring-dark), inset 0 2px 2px #ffffffbf, inset 0 calc(-3px - var(--pressed) * 3px) 7px color-mix(in srgb, var(--valve-well) calc(35% + var(--pressed) * 30%), transparent), 0 calc(5px - var(--pressed) * 4px) 10px -4px #180c0699, 0 calc(2px - var(--pressed) * 2px) calc(5px + var(--pressed) * 22px) hsl(var(--hue) 75% 55% / calc(.12 + var(--pressed) * .6));cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transform:translateY(calc(var(--pressed) * 4px)) scale(calc(1 - var(--pressed) * .055));border:none;border-radius:50%;transition:transform 90ms,box-shadow 90ms;position:relative}.valve:focus-visible{outline:3px solid hsl(var(--hue) var(--focus-sat) var(--focus-l));outline-offset:4px}.valve-cap{color:hsl(28 18% 32%/calc(.6 + var(--pressed) * .25));text-shadow:0 1px #ffffffb3,0 -1px 1px #3424194d;pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font:700 .95rem/1 system-ui,sans-serif;display:flex;position:absolute;inset:0}@media (width>=640px){.valve{width:4.2rem;height:4.2rem}.valve-cap{font-size:1.1rem}}.hint-captions{flex-direction:column;gap:.3rem;display:flex}.hint-caption{letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--ink);opacity:.75;margin:0;font-size:.68rem}.input-badges{opacity:.55;flex-wrap:wrap;justify-content:center;gap:1.1rem;margin:0;display:flex}.badge{color:var(--ink);letter-spacing:.03em;align-items:center;gap:.32rem;font-size:.62rem;display:inline-flex}.badge svg{stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;fill:none;width:15px;height:15px}@media (width>=640px){.badge{font-size:.7rem}.badge svg{width:17px;height:17px}}