:root{color-scheme:dark;--void:#06080b;--steel-lit:#78848f;--steel-mid:#39424d;--steel-dark:#171d24;--rim:#ffffff29;--ember:255 186 112;--ink:#8b97a5;--ink-bright:#dbe3ea;--tone:var(--ember);--tone-core:255 228 190;--tone-edge:255 124 40;--amp:0;--vel:.5;--pos:0}*{box-sizing:border-box}body{background:radial-gradient(ellipse 105% 80% at 50% 46%, #1b222c 0%, #0b0e13 55%, var(--void) 100%), var(--void);min-height:100dvh;color:var(--ink);grid-template-rows:auto 1fr auto;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5;display:grid}.masthead,.colophon{letter-spacing:.26em;text-transform:uppercase;flex-wrap:wrap;align-items:baseline;gap:.9rem;padding:clamp(1rem,3vmin,1.75rem) clamp(1rem,4vmin,2.5rem);font-size:.72rem;display:flex}.colophon{justify-content:flex-end}h1{font-size:inherit;letter-spacing:inherit;color:var(--ink-bright);margin:0;font-weight:500}.scale{color:var(--ink);margin-left:.7rem;font-weight:400}.scale:before{content:"·";margin-right:.7rem}.colophon a{color:var(--ink);border-bottom:1px solid #7b87944d;padding-bottom:.15em;text-decoration:none;transition:color .18s}.colophon a:hover,.colophon a:focus-visible{color:var(--ink-bright)}.stage{place-items:center;min-height:0;padding:clamp(.5rem,2vmin,1rem);display:grid;overflow:clip}.shell{--pan:min(90vw, 76vh, 52rem);width:var(--pan);aspect-ratio:1;touch-action:none;background: repeating-radial-gradient(circle at 50% 50%, #ffffff09 0 1px, #00000008 1px 2px, #0000 2px 7px),  radial-gradient(circle at 31% 20%, #ffffff5c 0%, #ffffff14 13%, #fff0 29%),  radial-gradient(circle at 70% 95%, #96b6d633 0%, #0000 25%),  radial-gradient(circle at 50% 50%, #0000 58%, #00000038 82%, #00000073 100%),  radial-gradient(circle at 34% 25%, #909ca8 0%, var(--steel-lit) 12%, #5a646f 33%, var(--steel-mid) 58%, #232a33 82%, var(--steel-dark) 100%);box-shadow: inset calc(var(--pan) * -.045) calc(var(--pan) * -.06) calc(var(--pan) * .15) #000000ad,  inset calc(var(--pan) * .025) calc(var(--pan) * .03) calc(var(--pan) * .08) #ffffff1a, inset 0 2px 1px #ffffff38, 0 0 0 1px #000000c7,  0 calc(var(--pan) * .06) calc(var(--pan) * .14) #000000c7;border-radius:50%;position:relative}.shell:before{content:"";box-shadow:inset calc(var(--pan) * -.02) calc(var(--pan) * -.028) calc(var(--pan) * .022) calc(var(--pan) * -.019) #cee4fa61;pointer-events:none;border-radius:50%;position:absolute;inset:0}.shell:after{content:"";border:1px solid var(--rim);pointer-events:none;border-radius:50%;position:absolute;inset:2.4%}.tune{pointer-events:none;position:absolute;inset:0}.tune svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.tune-groove,.tune-sheen,.tune-rail,.tune-fill,.tune-hit{fill:none;stroke-linecap:round}.tune-groove{stroke:#0000009e;stroke-width:2.4px}.tune-sheen{stroke:#ffffff38;stroke-width:.8px;transform:translate(.25px,-.35px)}.tune-rail{stroke:rgb(var(--ember) / 16%);stroke-width:1.6px}.tune-fill{stroke:rgb(var(--ember) / calc(.55 + var(--morph,0) * .45));stroke-width:2.1px;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--morph,0) * 100);filter:drop-shadow(0 0 calc(1px + var(--morph,0) * 2.5px) rgb(var(--ember) / calc(var(--morph,0) * .85)));transition:stroke-dashoffset 60ms linear}.tune-thumb{pointer-events:none;fill:rgb(var(--ember) / 55%);filter:drop-shadow(0 0 2px rgb(var(--ember) / 45%));transition:fill .16s,filter .16s}.shell:has(.tune-hit:hover) .tune-thumb,.shell:has(.tune-input:focus-visible) .tune-thumb,.shell.tuning .tune-thumb{fill:rgb(var(--ember) / 95%);filter:drop-shadow(0 0 4px rgb(var(--ember) / 85%))}.tune-label{letter-spacing:.22em;text-transform:uppercase;color:rgb(var(--ember) / 85%);text-shadow:0 1px 2px #000c;opacity:0;white-space:nowrap;font-size:.6rem;transition:opacity .2s;position:absolute;top:90%;left:50%;transform:translate(-50%,-50%)}body[data-played] .shell:has(.tune-hit:hover) .tune-label,body[data-played] .shell:has(.tune-input:focus-visible) .tune-label,body[data-played] .shell.tuning .tune-label{opacity:1}.tune-hit{stroke:#0000;stroke-width:9px;pointer-events:stroke;cursor:grab;touch-action:none}.tune-hit:active{cursor:grabbing}.tune-input{opacity:0;pointer-events:none;appearance:none;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}.tune-input:focus-visible~.tune .tune-hit{stroke:rgb(var(--ember) / 22%)}.tune-input:focus-visible~.tune .tune-fill{filter:drop-shadow(0 0 3px rgb(var(--ember) / 90%))}.field{--dish:calc(var(--pan,30rem) * var(--sizen,.28));left:var(--fx,50%);top:var(--fy,50%);width:var(--dish);aspect-ratio:1;color:inherit;font:inherit;cursor:pointer;touch-action:none;user-select:none;-webkit-tap-highlight-color:#0000;transform:translate(-50%, -50%) scale(calc(1 - var(--amp) * .014));filter:drop-shadow(0 0 calc(var(--dish) * var(--amp) * .75) rgb(var(--tone) / calc(var(--amp) * .45)));background:0 0;border:0;border-radius:50%;margin:0;padding:0;position:absolute}.field:focus-visible{outline:2px solid rgb(var(--ember) / 90%);outline-offset:clamp(3px, .9vmin, 7px)}.face{filter:brightness(calc(.82 + var(--lit,.5) * .36));box-shadow: inset calc(var(--dish) * .09) calc(var(--dish) * .115) calc(var(--dish) * .2) calc(var(--dish) * -.02) #000000bd,  inset calc(var(--dish) * .2) calc(var(--dish) * .26) calc(var(--dish) * .42) calc(var(--dish) * -.2) #00000094,  inset calc(var(--dish) * -.075) calc(var(--dish) * -.095) calc(var(--dish) * .17) calc(var(--dish) * -.03) #d6e6f561,  inset calc(var(--dish) * -.05) calc(var(--dish) * -.07) calc(var(--dish) * (.1 + var(--amp) * .34)) calc(var(--dish) * -.02) rgb(var(--tone) / calc(var(--amp) * .7)),  inset 0 0 0 1px #00000057;background:repeating-radial-gradient(circle,#ffffff06 0 1px,#00000006 1px 2px,#0000 2px 6px),radial-gradient(circle at 69% 76%,#cadcee6b 0%,#fff0 54%),radial-gradient(circle at 26% 20%,#0000008f 0%,#0000 58%),radial-gradient(circle,#232a33 0%,#333b46 56%,#4a5462 100%);border-radius:50%;position:absolute;inset:0}.face:after{content:"";background:radial-gradient(circle at 58% 64%, rgb(var(--tone-core) / 88%) 0%, rgb(var(--tone) / 80%) 22%, rgb(var(--tone-edge) / 46%) 46%, #0000 68%);opacity:var(--amp);mix-blend-mode:screen;pointer-events:none;border-radius:50%;position:absolute;inset:0}.field[data-source=memory]{--tone:150 205 255;--tone-core:205 226 255;--tone-edge:90 140 255;transition:filter .22s ease-out}.field[data-source=memory] .face{transition:box-shadow .24s ease-out}.field[data-source=memory] .face:after{transition:opacity .28s ease-out}.field[data-source=memory] .face:before{content:"";opacity:var(--amp);mix-blend-mode:screen;pointer-events:none;background:conic-gradient(#cde2ff00 0%,#cde2ff57 6%,#cde2ff00 18%);border-radius:50%;animation:2.4s linear infinite memory-sweep;position:absolute;inset:0}@keyframes memory-sweep{to{transform:rotate(360deg)}}.stamp{z-index:2;font-size:max(.44rem, calc(var(--dish) * .185));letter-spacing:.18em;text-indent:.18em;color:#dbe3ea75;text-shadow:0 1px #000000b3;pointer-events:none;white-space:nowrap;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cue{z-index:2;font-size:max(.38rem, calc(var(--dish) * .14));letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--ember) / 62%);text-shadow:0 1px 2px #000c;opacity:0;pointer-events:none;transition:opacity .26s;position:absolute;bottom:13%;left:50%;transform:translate(-50%)}body[data-keys] .cue{opacity:1}.field:before{content:"";z-index:1;border:max(1px, calc(var(--dish) * .028)) solid rgb(var(--ember) / 70%);box-shadow:0 0 calc(var(--dish) * .2) rgb(var(--ember) / 26%);opacity:0;pointer-events:none;border-radius:50%;position:absolute;inset:7%}body:not([data-played]) .field:before{animation:4s cubic-bezier(.25,.6,.35,1) infinite invite;animation-delay:calc(var(--seq,0) * .11s)}body:not([data-played]) .face:after{animation:4s ease-in-out infinite waiting;animation-delay:calc(var(--seq,0) * .11s)}@keyframes invite{0%{opacity:0;transform:scale(1.04)}18%{opacity:.75}66%,to{opacity:0;transform:scale(.26)}}@keyframes waiting{0%,to{opacity:0}20%{opacity:.15}70%{opacity:0}}.about{width:min(90vw,42rem);margin:0 auto;padding:clamp(1rem,4vmin,2rem) 0 clamp(2rem,6vmin,4rem);font-size:.95rem;line-height:1.7}.about p{margin:0 0 1.4em}.about dl{gap:1.3em;margin:0;display:grid}.about dt{letter-spacing:.24em;text-transform:uppercase;color:var(--ink-bright);margin:0 0 .3em;font-size:.72rem}.about dd{color:var(--ink);margin:0}.about kbd{background:var(--steel-dark);color:var(--ink-bright);font:inherit;border:1px solid #ffffff29;border-radius:.3em;margin:0 .05em;padding:.05em .45em;font-size:.85em;display:inline-block}.ripple{aspect-ratio:1;border:1px solid rgb(var(--ember) / 85%);width:100%;box-shadow:0 0 1.2rem rgb(var(--ember) / 35%), inset 0 0 1.2rem rgb(var(--ember) / 18%);pointer-events:none;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.12)}@media (prefers-reduced-motion:reduce){body:not([data-played]) .field:before{opacity:.55;animation:none;transform:scale(.72)}body:not([data-played]) .face:after{opacity:.16;animation:none}.field{transform:translate(-50%,-50%)}.field[data-source=memory] .face:before{animation:none}}.answering{color:#8b97a59e;letter-spacing:.02em;text-transform:none;opacity:0;pointer-events:none;flex-basis:100%;max-width:42ch;margin:.15rem 0 0;font-size:.74rem;line-height:1.55}body[data-answered] .answering{animation:16s forwards answering}@keyframes answering{0%{opacity:0}5%{opacity:1}78%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){body[data-answered] .answering{opacity:1;animation:none}}