:root{color-scheme:dark;--bg:#080913;--ink:#f4f5ef;--muted:#a4a8be;--line:#2b2d42;--acid:#eaff64}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--acid);outline-offset:3px}button{min-height:48px;border:1px solid var(--line);border-radius:100px;background:#141522;transition:background .15s}button:hover{background:#24263a}a{color:inherit;text-decoration:none}.instrument{max-width:1500px;margin:auto;padding:24px 4vw max(16px,env(safe-area-inset-bottom));min-height:100svh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:750;letter-spacing:1.7px;min-height:44px}.logo{display:grid;place-items:center;background:var(--acid);color:#101311;width:34px;height:34px;border-radius:9px;font-size:29px;letter-spacing:-3px;padding-right:3px}.edition,.eyebrow,.stage-label,.coordinates{font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.5px}.edition{color:var(--muted)}.heading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:28px 0 20px}.eyebrow{color:var(--acid);margin:0 0 10px}h1{font-size:clamp(38px,4.5vw,68px);letter-spacing:-2.5px;line-height:.98;margin:0;font-weight:550}h1 br{display:none}h1 em{font-weight:400;font-family:Georgia,serif;margin-left:.18em}.sound{padding:0 21px;font-size:14px;white-space:nowrap;flex-shrink:0}.sound>span:first-child{font-size:22px;vertical-align:-1px;margin-right:5px}.sound[aria-pressed=true]{color:#080913;background:var(--acid);border-color:var(--acid)}.stage{isolation:isolate;position:relative;flex:1;min-height:340px;height:53svh;max-height:720px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#13152b 0,#080913 68%)}canvas{width:100%;height:100%;position:absolute;inset:0;display:block;touch-action:none}.stage-label{position:absolute;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;color:#b5bad0;pointer-events:none}.stage-label span:first-child{color:var(--acid)}.invitation,.paused{pointer-events:none;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;text-shadow:0 2px 16px #080913;background:radial-gradient(ellipse,#08091385,transparent 58%)}.invitation strong,.paused strong{font:italic 32px/1.2 Georgia,serif;letter-spacing:-.5px}.invitation>span:last-child,.paused>span{font-size:14px;color:#d2d4e1}.gesture{font-size:38px;color:#eaff64;line-height:1.2}.invitation{transition:opacity .5s}.invitation.gone{opacity:0}.paused{background:#08091380}.paused[hidden]{display:none}.coordinates{position:absolute;bottom:18px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none;color:#9296ac;font-size:10px}.controls{display:flex;justify-content:space-between;gap:16px;align-items:center;padding-top:20px}.palettes,.utilities{display:flex;gap:8px}.palette{display:flex;align-items:center;justify-content:center;gap:9px;padding:0 18px;font-size:14px}.palette.selected{border-color:#747a9b;background:#26283b}.swatch{width:14px;height:14px;display:block;border-radius:50%;flex-shrink:0}.aurora{background:linear-gradient(135deg,#50fbe7,#e17fff)}.ember{background:linear-gradient(135deg,#ffcf66,#ff4a67)}.prism{background:linear-gradient(135deg,#827aff,#86f6ff)}.utilities button{font-size:14px;padding:0 18px;background:transparent}.utilities button[aria-pressed=true]{border-color:var(--acid);color:var(--acid)}footer{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:13px;padding-top:12px}footer p{margin:0}#status{color:#c4c8b6;text-align:right}@media(min-width:1100px){.heading{margin-top:32px}.stage{min-height:400px}}@media(max-width:680px){.instrument{padding:12px 16px max(14px,env(safe-area-inset-bottom))}.edition{font-size:10px;letter-spacing:1px}.heading{margin:22px 0 18px}h1{font-size:42px;letter-spacing:-2px}h1 br{display:block}h1 em{margin:0}.eyebrow{font-size:9px;letter-spacing:1.3px;margin-bottom:9px}.sound{padding:0 14px}.stage{min-height:300px;height:44svh;border-radius:17px}.stage-label{top:16px;left:16px;right:16px;font-size:10px;letter-spacing:1px}.coordinates{left:16px;right:16px;font-size:9px}.controls{flex-direction:column;align-items:stretch;padding-top:14px;gap:10px}.palettes,.utilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.palette,.utilities button{padding:0 8px;font-size:14px}.utilities button{min-height:44px}.invitation strong{font-size:27px}.invitation>span:last-child{font-size:13px}footer{flex-direction:column;gap:4px;text-align:center;padding-top:10px;font-size:12px}#status{text-align:center}.stage{flex:auto}}@media(max-width:350px){.instrument{padding-left:12px;padding-right:12px}h1{font-size:36px}.sound{padding:0 11px;font-size:13px}.stage{height:43svh;min-height:260px}.brand{font-size:10px}.edition{font-size:9px}.palette{gap:6px}.invitation strong{font-size:24px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-height:550px) and (orientation:landscape){.heading{margin:12px 0}h1{font-size:32px}h1 br{display:none}.stage{min-height:280px}}
.heading{flex-wrap:wrap}footer{font-size:14px}.invitation>span:last-child{font-size:14px}.coordinates{font-size:12px;letter-spacing:.7px}@media(max-width:680px){footer{font-size:14px}.coordinates{font-size:12px}}
.audio-status{margin:0 0 14px;font-size:14px;color:#d5eed9}.audio-help{font-size:14px;color:var(--muted);margin-top:10px}.audio-help summary{min-height:44px;display:flex;align-items:center;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.audio-help p{margin:0 0 10px;max-width:620px}.audio-status[hidden],.audio-help[hidden]{display:none}
