@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--bg: #ece8e1;--fg: #2a2622;--accent: #2a2622;--mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden}body{font:400 12px/1.5 var(--mono);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;opacity:0;transition:opacity .8s ease}#stage:active{cursor:grabbing}body.ready #stage{opacity:1}.hud{position:fixed;inset:0;pointer-events:none;padding:max(20px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom))}.hud>div{position:absolute}.hud a,.hud button{pointer-events:auto}.tl{top:22px;left:24px}.tr{top:18px;right:24px}.br{bottom:22px;right:24px;opacity:.7;letter-spacing:.06em;text-transform:uppercase;font-size:11px}.title{font-weight:500;letter-spacing:.12em;font-size:12px}.hint{opacity:.5;margin-top:2px}.msg{left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;text-align:center;max-width:40ch}.msg.on{opacity:.8}.seg{display:inline-flex;border:1px solid color-mix(in srgb,var(--fg) 25%,transparent);border-radius:999px;padding:2px;background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.seg button{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg);background:none;border:0;padding:5px 12px;border-radius:999px;cursor:pointer;opacity:.6}.seg button.on{background:var(--fg);color:var(--bg);opacity:1}.seg button:disabled{opacity:.25;cursor:default}.tr{display:flex;gap:8px;align-items:center}button.sound{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg);cursor:pointer;border:1px solid color-mix(in srgb,var(--fg) 25%,transparent);border-radius:999px;padding:6px 13px;opacity:.75;background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}button.sound.on{background:var(--fg);color:var(--bg);opacity:1}button.sound[hidden]{display:none}video.film{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,100vh);height:min(100vw,100vh);object-fit:contain;display:none;background:var(--bg)}body.filming video.film{display:block}body.filming #stage{visibility:hidden}body.render .hud,body.render video.film{display:none}body.render #stage{transition:none;cursor:default}@media(max-width:600px){.tl{left:16px;top:16px}.tr{right:16px;top:12px}.br{right:16px}.hint{display:none}.title{font-size:11px;letter-spacing:.08em;max-width:52vw}}.hud{z-index:3;transition:opacity .9s ease .3s}body.gated .hud{opacity:0;pointer-events:none;transition:none}.hud select{pointer-events:auto}.begin-gate{position:fixed;inset:0;z-index:4;display:grid;place-items:center;color:var(--fg);background:radial-gradient(110% 85% at 50% 52%,color-mix(in srgb,var(--bg) 58%,transparent) 0%,color-mix(in srgb,var(--bg) 82%,transparent) 58%,var(--bg) 100%);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:opacity 1.2s ease .15s}.begin-gate.leaving{opacity:0;pointer-events:none}.begin-gate,.begin-drum,.hud button,.hud a{touch-action:manipulation}.begin-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;max-width:min(600px,92vw);animation:begin-rise 1.6s cubic-bezier(.2,.7,.2,1) both}@keyframes begin-rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.begin-kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;opacity:.55}.begin-kicker span{opacity:.6;margin:0 .3em}.begin-title{font:400 clamp(34px,7.5vw,68px)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin:.42em 0 clamp(36px,8vh,72px);padding-left:.16em}.begin-sentence{font-size:13px;line-height:1.65;opacity:.7;max-width:46ch;margin:0 0 clamp(30px,6.5vh,58px)}.begin-drum{position:relative;width:136px;height:136px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--fg);border:1px solid color-mix(in srgb,var(--fg) 50%,transparent);background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--bg) 40%,transparent) 70%);font:500 12px var(--mono);letter-spacing:.34em;text-transform:uppercase;padding:0 0 0 .34em;transition:border-color .5s,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}.begin-drum:hover:not(:disabled){border-color:var(--accent);transform:scale(1.04);box-shadow:0 0 42px color-mix(in srgb,var(--accent) 22%,transparent)}.begin-drum:active:not(:disabled){transform:scale(.97)}.begin-drum:focus-visible{outline:1px solid var(--accent);outline-offset:8px}.begin-drum .ring{position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--accent);opacity:0;pointer-events:none;animation:begin-ripple 4.2s cubic-bezier(.15,.55,.3,1) infinite}.begin-drum .ring:nth-child(2){animation-delay:1.4s}.begin-drum .ring:nth-child(3){animation-delay:2.8s}.begin-drum:hover .ring{animation-duration:2.6s}@keyframes begin-ripple{0%{transform:scale(1);opacity:.6}to{transform:scale(2.15);opacity:0}}.begin-drum:disabled{cursor:wait;border-color:color-mix(in srgb,var(--fg) 22%,transparent)}.begin-drum:disabled .ring{animation:none}.begin-drum:disabled .begin-label{opacity:.5;animation:begin-breathe 1.8s ease-in-out infinite}@keyframes begin-breathe{50%{opacity:.2}}.begin-gate.leaving .begin-drum .ring{animation:begin-burst 1.3s cubic-bezier(.08,.7,.2,1) forwards}.begin-gate.leaving .begin-drum .ring:nth-child(2){animation-delay:.12s}.begin-gate.leaving .begin-drum .ring:nth-child(3){animation-delay:.24s}@keyframes begin-burst{0%{inset:-1px;opacity:.9;transform:none}to{inset:-120vmax;opacity:0;transform:none}}.begin-tellings{margin-top:clamp(30px,6vh,50px);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px;max-width:560px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.begin-tellings .lbl{opacity:.4;margin-right:10px;letter-spacing:.24em}.begin-tellings button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--fg);background:none;border:0;padding:4px 9px;border-radius:999px;cursor:pointer;opacity:.45;transition:opacity .3s,box-shadow .3s}.begin-tellings button:hover{opacity:.9}.begin-tellings button.on{opacity:1;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent);color:var(--accent)}.begin-foot{position:absolute;left:24px;right:24px;bottom:max(20px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.5}.begin-note{display:inline-flex;align-items:center;gap:9px}.eq{display:inline-flex;align-items:flex-end;gap:2px;height:10px}.eq b{width:2px;height:100%;background:currentColor;animation:begin-eq 1.1s ease-in-out infinite;transform-origin:bottom}.eq b:nth-child(2){animation-delay:-.35s}.eq b:nth-child(3){animation-delay:-.7s}@keyframes begin-eq{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){.begin-drum .ring,.eq b,.begin-card{animation:none!important}}@media(max-width:900px){.tr{top:68px;right:16px;flex-wrap:wrap;max-width:calc(100vw - 32px)}.title{max-width:90vw}}@media(max-width:600px){.begin-foot{left:16px;right:16px}.begin-keys{display:none}.begin-drum{width:120px;height:120px}}@media(max-width:420px){.tr{gap:5px}.seg button{padding:5px 9px}}