*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif}body{overflow:hidden}button{-webkit-tap-highlight-color:transparent;font:inherit;color:inherit;cursor:pointer}button:focus-visible,[role=slider]:focus-visible{outline:2px solid #888;outline-offset:6px}header{position:absolute;right:29px;top:25px;z-index:3;max-width:70%;text-align:right;pointer-events:none}h1{font-size:12px;font-weight:600;line-height:1.4;text-transform:uppercase;margin:0}#stage{position:absolute;top:13%;height:55%;width:100%;touch-action:pan-y;cursor:grab;overflow:hidden}#stage:active{cursor:grabbing}#collection{height:100%;position:relative}.record{position:absolute;left:50%;top:50%;width:clamp(190px,17vw,260px);aspect-ratio:1;border:0;border-radius:50%;padding:0;background:none;will-change:transform;outline-offset:8px;touch-action:pan-y}.disc{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;background:var(--bg);color:var(--fg);box-shadow:0 1px 3px #0003,inset 0 0 0 5px #181818;pointer-events:none}.disc.is-spinning{animation:spin 12s linear infinite}.disc:after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 3px #151515,inset 0 0 0 5px #ffffff25,inset 0 0 0 7px #1117;pointer-events:none}.disc:before{content:'';z-index:2;position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:white;box-shadow:0 0 0 2px #1113}.disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}.placeholder{display:flex;height:100%;align-items:center;justify-content:center;font-size:clamp(55px,6vw,86px);font-weight:400;letter-spacing:-.08em}.grooves{position:absolute;inset:7%;border:1px solid #ffffff17;border-radius:50%;box-shadow:0 0 0 7px #00000008,inset 0 0 0 6px #ffffff08;pointer-events:none}footer{position:absolute;bottom:23px;left:50%;transform:translateX(-50%)}.controller{width:170px;height:170px;border-radius:50%;background:#222;display:flex;align-items:center;justify-content:space-between;padding:0 5px;position:relative;touch-action:none}.controller button{width:36px;height:52px;border:0;background:transparent;padding:7px;display:flex;align-items:center;justify-content:center;z-index:2}.controller svg{width:22px;fill:#ccc}.controller button:hover svg{fill:white}#stick{position:absolute;width:66px;height:66px;left:52px;top:52px;border-radius:50%;border:1px solid #070707;background:#363636;cursor:grab;touch-action:none;z-index:3;transition:background .15s}#stick:active{cursor:grabbing;background:#414141}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:600px){header{right:22px;top:24px}#stage{top:15%;height:48%}.record{width:210px}.controller{width:146px;height:146px}#stick{width:58px;height:58px;left:44px;top:44px}.controller button{width:32px}footer{bottom:max(25px,env(safe-area-inset-bottom))}}@media(max-height:520px){#stage{top:7%;height:58%}.record{width:155px}.controller{width:110px;height:110px}#stick{width:46px;height:46px;left:32px;top:32px}.controller button{width:27px;padding:4px}footer{bottom:12px}}@media(prefers-reduced-motion:reduce){.disc.is-spinning{animation:none}}


[hidden]{display:none!important}
#info-page{position:absolute;inset:0;display:grid;place-items:center;padding:90px 22px 140px;text-align:center}
.info-content{font-family:Arial,Helvetica,sans-serif;font-size:clamp(13px,1.4vw,17px);font-weight:600;line-height:1.6;text-transform:uppercase;letter-spacing:.015em;max-width:90vw}
.info-content p{margin:12px 0;overflow-wrap:anywhere}
#event-place{color:inherit;text-decoration:none}
#event-place[href]{cursor:pointer;transition:opacity .15s ease}
#event-place[href]:hover{opacity:.6}
#event-place[href]:focus-visible{outline:2px solid currentColor;outline-offset:4px}
#event-countdown{font-variant-numeric:tabular-nums;white-space:nowrap}
footer{z-index:5}
#menu-toggle{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:4;width:auto;min-width:70px;height:32px;padding:0 10px;border:0;background:transparent;color:#d2d2d2;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;line-height:1}
#menu-toggle[aria-expanded=true]{font-size:28px;font-weight:400}
#menu-toggle:hover{color:#fff}
#site-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4px;width:min(255px,calc(100vw - 40px));height:44px;padding:5px;background:#222;border-radius:7px}
#site-menu button{width:100%;height:100%;border:0;border-radius:5px;background:transparent;color:#f5f5f5;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.015em}
#site-menu button[aria-current=page]{background:#fff;color:#222}
#site-menu button:not([aria-current=page]):hover{background:#3b3b3b}
.controller button:disabled{cursor:default;opacity:.5}
.record-entry{width:100%;height:100%;animation:recordEnter .85s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--enter-delay,0ms)}
.controller{cursor:grab;animation:wheelEnter .8s cubic-bezier(.16,1,.3,1) .25s both}
.controller:active{cursor:grabbing}
.wheel-halo{position:absolute;z-index:1;left:50%;top:12%;width:32px;height:32px;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffffff20 0%,#ffffff0f 34%,transparent 72%);box-shadow:0 0 9px #ffffff12;transition:opacity .13s ease}
.controller.has-wheel-halo .wheel-halo{opacity:1}
@media(max-width:600px){.wheel-halo{width:28px;height:28px}}
@media(max-height:520px){.wheel-halo{width:23px;height:23px}}
@keyframes recordEnter{from{opacity:0;transform:translate3d(var(--enter-x,0px),42px,0) scale(.78) rotate(var(--enter-rotate,0deg))}to{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0)}}
@keyframes wheelEnter{from{opacity:0;transform:translateY(88px) scale(.76)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.record-entry,.controller{animation:none}}
@media(max-width:600px){#info-page{padding-bottom:110px}.info-content{font-size:13px}}

/* The invitation uses the same typography as track titles, in lowercase. */
.music-request{position:fixed;z-index:6;min-height:44px;padding:8px 0;border:0;background:transparent;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:600;line-height:1.4;text-transform:none;text-align:center;overflow-wrap:anywhere;white-space:normal;touch-action:manipulation;transition:opacity .15s}
.music-request:hover{opacity:.65}
.music-request:focus-visible{outline:2px solid #888;outline-offset:4px;border-radius:3px}
@media(prefers-reduced-motion:reduce){.music-request{transition:none}}

.request-dialog{position:fixed;inset:0;width:min(340px,calc(100vw - 40px));max-height:calc(100dvh - 40px);margin:auto;padding:30px 24px 24px;border:0;border-radius:0;background:#fff;color:#111;overflow:auto;font-family:Arial,Helvetica,sans-serif}
.request-dialog::backdrop{background:rgba(255,255,255,.88)}
.request-dialog h2,.request-dialog p{font-size:12px;font-weight:600;line-height:1.5;text-transform:none}
.request-dialog h2{margin:0 30px 28px 0}
.request-dialog label{display:block;font-size:12px;font-weight:600;margin:20px 0 4px}
.request-dialog input{display:block;width:100%;min-height:44px;padding:8px 0;border:0;border-bottom:1px solid #bbb;border-radius:0;background:transparent;color:#111;font:16px Arial,Helvetica,sans-serif;outline-offset:4px}
.request-dialog input:focus{outline:none;border-bottom-color:#111}
.request-dialog input::placeholder{color:#888;font-size:12px}
.request-dialog button{border:0;background:transparent;font-size:12px;font-weight:600;min-height:44px;cursor:pointer;padding:8px 0}
.request-dialog button:hover{opacity:.6}
.request-dialog button:disabled{opacity:.5;cursor:wait}
.request-dialog .request-close{position:absolute;right:12px;top:8px;width:44px;font-size:24px;font-weight:400}
.request-dialog .request-send{display:block;margin:14px 0 0 auto}
#request-error{color:#8c2929;margin:12px 0 0;font-weight:400}
#request-error:empty{display:none}
#request-success{padding:32px 0 10px;text-align:center}
#request-success p{margin:0 0 18px}
