:root{--black: #070707;--bone: #efe7d8;--bone-dim: rgba(239, 231, 216, .55);--ember: #e9a23b;--rule: rgba(239, 231, 216, .18);--display: "Bebas Neue", "Oswald", Impact, sans-serif;--serif: "Source Serif 4", Georgia, "Times New Roman", serif;color:var(--bone);background:var(--black);font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body{margin:0;width:100%;min-width:0}body{overflow:hidden}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.stage{position:relative;height:100svh;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) clamp(18px,3vw,44px) calc(18px + env(safe-area-inset-bottom))}.slate{display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);transition:opacity .6s ease}.slate-rule{width:38px;height:1px;background:var(--rule)}.film{position:relative;flex:1;min-height:0;margin:14px 0;display:grid;place-items:center;overflow:hidden}video{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform-origin:50% 40%;transition:transform 20s linear}.stage.idle video{animation:push 22s ease-out forwards}@keyframes push{0%{transform:scale(1)}to{transform:scale(1.06)}}.film:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(7,7,7,.55) 100%);transition:opacity .8s ease}.stage.playing .film:after{opacity:0}.cue{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding-top:16%;color:var(--bone);transition:opacity .5s ease,visibility .5s ease}.ring{width:92px;height:92px;border:1px solid rgba(239,231,216,.7);border-radius:50%;display:grid;place-items:center;position:relative;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s ease,background .3s ease}.ring:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:50%;border:1px solid rgba(239,231,216,.5);animation:halo 3.2s ease-out infinite}@keyframes halo{0%{transform:scale(1);opacity:.8}70%,to{transform:scale(1.7);opacity:0}}.ring svg{margin-left:3px}.cue:hover .ring,.cue:focus-visible .ring{transform:scale(1.08);border-color:var(--ember);background:#07070759}.cue:focus-visible{outline:none}.cue-label{font-family:var(--display);font-size:15px;letter-spacing:.28em;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.8)}.stage.playing .cue{opacity:0;visibility:hidden;pointer-events:none}.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#efe7d81f;opacity:0;transition:opacity .4s ease}.progress i{display:block;height:100%;width:0;background:var(--ember)}.stage.playing .progress{opacity:1}.credits{display:grid;grid-template-columns:1fr auto;grid-template-areas:"line actions" "note actions";align-items:end;column-gap:32px;row-gap:10px;padding-top:18px;border-top:1px solid var(--rule);transition:opacity .6s ease,transform .6s ease}.stage.playing .credits,.stage.playing .slate{opacity:0}.stage.playing .credits{transform:translateY(6px);pointer-events:none}.line{grid-area:line;margin:0;font-family:var(--display);font-size:clamp(30px,4.6vw,64px);line-height:.92;letter-spacing:.01em;text-transform:uppercase}.line .hit{color:var(--ember)}.note{grid-area:note;margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.5vw,20px);color:var(--bone-dim);min-height:1.4em}.note b{font-weight:400;color:var(--ember)}.actions{grid-area:actions;display:flex;gap:10px}.act{font-family:var(--display);font-size:16px;letter-spacing:.2em;text-transform:uppercase;padding:13px 20px 11px;min-height:44px;border:1px solid var(--rule);transition:border-color .2s ease,color .2s ease,background .2s ease}.act:hover,.act:focus-visible{border-color:var(--ember);color:var(--ember);outline:none}.act.primary{border-color:var(--ember);background:var(--ember);color:var(--black)}.act.primary:hover,.act.primary:focus-visible{background:#f2b14f;border-color:#f2b14f;color:var(--black)}.grain{position:fixed;top:-100%;right:-100%;bottom:-100%;left:-100%;z-index:10;pointer-events:none;opacity:.085;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.1s steps(6) infinite}@keyframes grain{0%{transform:translate(0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}to{transform:translate(0)}}@media(max-width:700px){.stage{padding-left:16px;padding-right:16px}.slate{font-size:12px;letter-spacing:.18em}.film{flex:0 0 auto;margin:12px -16px 0}video{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover}.cue{padding-top:30%}.ring{width:74px;height:74px}.cue-label{font-size:13px;letter-spacing:.22em}.credits{flex:1;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;grid-template-areas:"line" "note" "actions";align-items:start;row-gap:10px;padding-top:18px;border-top:0}.line{font-size:clamp(44px,15vw,72px);line-height:.88}.line span{display:block}.note{font-size:15px}.actions{align-self:end}.act{flex:1;text-align:center;font-size:15px;padding:12px 10px 10px}}@media(prefers-reduced-motion:reduce){.stage.idle video{animation:none}.ring:before{animation:none;opacity:0}.grain{animation:none}.slate,.credits,.cue,.film:after,.progress{transition:none}}