@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{font-family:Manrope,system-ui,sans-serif;color:#f7f7f2;background:#090a09;font-synthesis:none;text-rendering:optimizeLegibility;--green: #b9ff66;--muted: #a7aaa4;--line: rgba(255, 255, 255, .12)}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{min-width:320px;background:#090a09}button,input{font:inherit}.page{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 84% 16%,rgba(185,255,102,.11),transparent 29rem),linear-gradient(145deg,#121410,#080908 52%,#0b0c0a)}.grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.ambient{position:absolute;border-radius:50%;filter:blur(90px);z-index:-1}.ambient-one{width:38vw;height:38vw;top:-25vw;right:-8vw;background:#6eff461f}.ambient-two{width:26vw;height:26vw;bottom:-20vw;left:20vw;background:#ceff6d14}.setup-page{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);align-items:center;padding:clamp(2rem,5vw,6.5rem);gap:5vw}.setup-panel{max-width:850px;z-index:1}.eyebrow{display:flex;align-items:center;gap:.7rem;color:var(--green);font:500 .72rem/1 DM Mono,monospace;letter-spacing:.13em;text-transform:uppercase}.music-mark{width:1.85rem;height:1.85rem;fill:currentColor;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.eyebrow .music-mark{width:1.25rem;height:1.25rem;fill:none}h1{margin:1.5rem 0 1.25rem;letter-spacing:-.065em;font-size:clamp(3.4rem,6.7vw,7.3rem);line-height:.91;font-weight:700}.setup-panel h1 span{color:var(--green)}.lede{max-width:650px;margin:0;color:var(--muted);font-size:clamp(1rem,1.35vw,1.35rem);line-height:1.65}.jam-form{margin-top:clamp(2.25rem,5vh,4.5rem);max-width:820px}.jam-form label{display:block;margin-bottom:.7rem;font:500 .72rem/1 DM Mono,monospace;color:#d7d9d4;letter-spacing:.1em;text-transform:uppercase}.input-row{display:grid;grid-template-columns:1fr auto;gap:.65rem;padding:.55rem;border:1px solid var(--line);border-radius:1rem;background:#ffffff0b;box-shadow:0 24px 70px #00000040}.input-row:focus-within{border-color:#b9ff66bf;box-shadow:0 0 0 4px #b9ff6617,0 24px 70px #00000040}.input-row input{width:100%;min-width:0;border:0;outline:0;padding:.9rem 1rem;color:#fff;background:transparent;font-size:clamp(.95rem,1vw,1.08rem)}.input-row input::placeholder{color:#6f726d}.input-row input[aria-invalid=true]{color:#ffb4a8}.input-row button{display:flex;align-items:center;gap:.8rem;border:0;border-radius:.7rem;padding:1rem 1.25rem;font-weight:800;color:#10110f;background:var(--green);cursor:pointer;transition:transform .2s ease,background-color .2s ease}.input-row button:hover{transform:translateY(-2px);background:#ccff8f}.input-row button:focus-visible,.error-panel a:focus-visible{outline:3px solid #fff;outline-offset:3px}.input-row button svg{width:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.form-hint,.form-error{min-height:1.2rem;margin:.8rem 0 0;font-size:.79rem}.form-hint{color:#737771}.form-error{color:#ff9f91;margin-top:-.25rem}.connection-wrap{max-width:820px;margin-top:clamp(1.8rem,4vh,3.2rem)}.connection-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;min-height:4.3rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:1rem;background:#ffffff09}.connection-dot{width:.65rem;height:.65rem;border-radius:50%;background:#747771;box-shadow:0 0 0 .35rem #ffffff0a}.connection-card.is-connected .connection-dot{background:var(--green);box-shadow:0 0 0 .35rem #b9ff661a}.connection-card strong,.connection-card small{display:block}.connection-card strong{margin-bottom:.22rem;color:#f2f3ee;font-size:.88rem}.connection-card small{color:#777b75;font-size:.72rem}.text-button{border:0;padding:.55rem .7rem;color:var(--green);background:transparent;font:600 .72rem DM Mono;cursor:pointer}.text-button:hover{color:#fff}.text-button:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:.3rem}.connection-unavailable{grid-template-columns:auto 1fr}.connection-message{min-height:1.2rem;margin:.55rem .25rem 0;color:#ffb3a6;font-size:.75rem}.jam-form{margin-top:clamp(1.3rem,3vh,2.2rem)}.setup-visual{position:relative;display:grid;place-items:center;min-height:min(72vh,850px)}.vinyl{position:relative;width:min(37vw,610px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,transparent 0 5px,rgba(255,255,255,.035) 6px 7px),radial-gradient(circle,#242622,#090a09 65%);box-shadow:-30px 45px 100px #000,inset 0 0 0 1px #ffffff1a;animation:spin 24s linear infinite}.vinyl:after{content:"";position:absolute;top:7%;right:7%;bottom:7%;left:7%;border:1px solid rgba(255,255,255,.06);border-radius:inherit}.vinyl-ring{width:39%;aspect-ratio:1;border-radius:50%;background:var(--green);box-shadow:0 0 65px #b9ff6629}.vinyl-label{position:absolute;color:#10110f;text-align:center;font:800 clamp(.8rem,1.4vw,1.25rem)/1 "Manrope";letter-spacing:-.04em}.vinyl-label span{display:block;margin-top:.4rem;font:500 .38em/1 DM Mono;letter-spacing:.12em}.sound-lines{position:absolute;right:0;bottom:7%;display:flex;align-items:flex-end;gap:.45rem;height:4rem}.sound-lines i{display:block;width:.28rem;border-radius:1rem;background:var(--green);animation:bounce 1.25s ease-in-out infinite alternate}.sound-lines i:nth-child(1),.sound-lines i:nth-child(7){height:25%}.sound-lines i:nth-child(2),.sound-lines i:nth-child(6){height:60%;animation-delay:-.3s}.sound-lines i:nth-child(3),.sound-lines i:nth-child(5){height:85%;animation-delay:-.7s}.sound-lines i:nth-child(4){height:45%;animation-delay:-.5s}.display-page{padding:clamp(1.5rem,3vw,3.75rem);display:grid}.join-layout{width:100%;min-height:calc(100svh - clamp(3rem,6vw,7.5rem));display:grid;grid-template-rows:auto 1fr auto;gap:clamp(1.25rem,2.5vh,2.5rem)}.display-header{display:flex;align-items:end;justify-content:space-between;gap:2rem}.display-header>div{min-width:0}.display-header h1{margin:1rem 0 0;font-size:clamp(2.8rem,5vw,6rem);white-space:nowrap}.display-header h1 em{color:var(--green);font-style:normal}.display-header>p{max-width:520px;margin:0 0 .35rem;color:#aeb1ab;font-size:clamp(.9rem,1.2vw,1.2rem);line-height:1.55}.live-pill{display:inline-flex;align-items:center;gap:.65rem;padding:.52rem .85rem;border:1px solid rgba(185,255,102,.28);border-radius:10rem;color:#dfffba;background:#b9ff6614;font:500 .72rem/1 DM Mono;letter-spacing:.08em;text-transform:uppercase}.live-pill span{width:.5rem;height:.5rem;border-radius:50%;background:var(--green);box-shadow:0 0 0 .3rem #b9ff661c;animation:pulse 2s ease-out infinite}.display-content{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);align-items:center;gap:clamp(2rem,5vw,6rem);min-height:0}.music-panel{min-width:0;padding:clamp(1rem,1.5vw,1.6rem);border:1px solid var(--line);border-radius:clamp(1.3rem,2vw,2rem);background:#ffffff09;box-shadow:0 35px 100px #00000038}.now-grid{display:grid;grid-template-columns:minmax(170px,.75fr) minmax(0,1.25fr);align-items:center;gap:clamp(1.3rem,2.8vw,3rem)}.now-artwork{display:block;width:100%;aspect-ratio:1;border-radius:clamp(1rem,1.5vw,1.5rem);object-fit:cover;box-shadow:0 25px 55px #00000059}.artwork-fallback{display:grid;place-items:center;color:#151713;background:linear-gradient(145deg,#ccff8e,#73bd45)}.artwork-fallback .music-mark{width:25%;height:25%;fill:none}.playing-label{display:flex;align-items:center;gap:.7rem;color:var(--green);font:500 .67rem DM Mono;letter-spacing:.12em;text-transform:uppercase}.playing-bars{display:flex;align-items:end;gap:2px;width:13px;height:13px}.playing-bars i{width:3px;border-radius:2px;background:var(--green);animation:meter .65s ease-in-out infinite alternate}.playing-bars i:nth-child(1){height:45%}.playing-bars i:nth-child(2){height:100%;animation-delay:-.3s}.playing-bars i:nth-child(3){height:70%;animation-delay:-.5s}.playing-bars.is-paused i{animation-play-state:paused;height:35%}.now-details h2{margin:clamp(1rem,2vh,1.8rem) 0 .5rem;overflow:hidden;color:#f8f9f4;font-size:clamp(1.8rem,3.2vw,4rem);line-height:1.02;letter-spacing:-.055em;text-overflow:ellipsis}.now-details>p{margin:0;overflow:hidden;color:#9fa39c;font-size:clamp(.85rem,1.1vw,1.1rem);text-overflow:ellipsis;white-space:nowrap}.progress-track{height:4px;margin-top:clamp(1.3rem,3vh,2.8rem);overflow:hidden;border-radius:1rem;background:#ffffff1f}.progress-track span{display:block;height:100%;border-radius:inherit;background:var(--green);transition:width .25s linear}.progress-times{display:flex;justify-content:space-between;margin-top:.55rem;color:#62665f;font:400 .62rem DM Mono}.music-empty{display:flex;align-items:center;gap:1rem;min-height:clamp(210px,24vw,390px);padding:2rem;border-radius:1.2rem;color:#7e827b;background:#ffffff06}.music-empty>.music-mark{flex:0 0 auto;width:2.8rem;height:2.8rem;fill:none;color:var(--green)}.music-empty strong,.music-empty span{display:block}.music-empty strong{margin-bottom:.4rem;color:#eef0e9;font-size:1rem}.music-empty span{max-width:390px;font-size:.78rem;line-height:1.5}.music-empty.is-loading .music-mark{animation:softPulse 1.5s ease-in-out infinite alternate}.queue-section{margin-top:clamp(1.2rem,2.5vh,2rem);padding-top:clamp(1rem,2vh,1.5rem);border-top:1px solid var(--line)}.queue-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.queue-title span{color:#eef0e9;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.queue-title small{color:#656962;font:400 .62rem DM Mono;text-transform:uppercase;letter-spacing:.09em}.queue-list{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.queue-item{display:grid;grid-template-columns:auto 2.8rem minmax(0,1fr);align-items:center;gap:.7rem;min-width:0;padding:.55rem;border-radius:.8rem;background:#ffffff09}.queue-number{color:#5c6059;font:400 .58rem DM Mono}.queue-artwork{width:2.8rem;aspect-ratio:1;border-radius:.45rem;object-fit:cover}.queue-artwork.artwork-fallback .music-mark{width:45%;height:45%}.queue-item div{min-width:0}.queue-item strong,.queue-item div span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-item strong{color:#e7e9e3;font-size:.75rem}.queue-item div span{margin-top:.25rem;color:#777b74;font-size:.64rem}.queue-empty{grid-column:1 / -1;margin:.4rem 0;color:#777b74;font-size:.75rem;line-height:1.5}.qr-stage{position:relative;display:grid;place-items:center;min-width:0}.qr-halo{position:absolute;width:90%;aspect-ratio:1;border-radius:50%;background:#b1ff562b;filter:blur(90px)}.qr-card{position:relative;width:min(34vw,570px);padding:clamp(1rem,1.5vw,1.5rem);border-radius:clamp(1.4rem,2vw,2.2rem);color:#121312;background:#f8f8f3;box-shadow:0 45px 120px #0000008c,0 0 0 1px #ffffff73;transform:rotate(1deg)}.qr-heading{display:flex;align-items:center;gap:.7rem;padding:0 .35rem .9rem}.qr-heading .music-mark{width:1.6rem;color:#141514}.qr-heading p{margin:0;font:800 clamp(.85rem,1.1vw,1.05rem)/1 "Manrope";letter-spacing:-.02em}#jam-qr{display:block;width:100%!important;height:auto!important;aspect-ratio:1;border-radius:.75rem}.qr-caption{margin:.9rem 0 .1rem;color:#555951;text-align:center;font:600 clamp(.72rem,.85vw,.9rem)/1.4 "DM Mono"}.display-footer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;min-width:0;padding-top:1rem;border-top:1px solid var(--line);color:#777b75}.display-footer span{font:500 .65rem DM Mono;letter-spacing:.12em;text-transform:uppercase}.display-footer p{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 clamp(.65rem,.8vw,.8rem) "DM Mono"}.error-page{display:grid;place-items:center;padding:2rem;text-align:center}.error-panel{max-width:720px}.error-icon{color:var(--green)}.error-icon .music-mark{width:3.5rem;height:3.5rem;fill:none}.eyebrow-text{margin:1.5rem 0 0;color:var(--green)!important;font:500 .7rem DM Mono;letter-spacing:.15em;text-transform:uppercase}.error-panel h1{font-size:clamp(3rem,6vw,6rem);margin:1.2rem 0}.error-panel p{color:var(--muted);font-size:1.05rem;line-height:1.6}.error-panel a{display:inline-block;margin-top:1rem;padding:1rem 1.35rem;border-radius:.75rem;color:#10110f;background:var(--green);font-weight:800;text-decoration:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{to{transform:scaleY(.42);opacity:.7}}@keyframes pulse{70%,to{box-shadow:0 0 0 .7rem #b9ff6600}}@keyframes meter{to{height:25%}}@keyframes softPulse{to{opacity:.35;transform:scale(.9)}}@media(max-width:900px){.setup-page{grid-template-columns:1fr}.setup-visual{display:none}.display-header{display:block;text-align:center}.display-header h1{white-space:normal}.display-header>p{margin:1rem auto 0}.display-content{grid-template-columns:1fr}.music-panel{order:2}.qr-stage{order:1}.qr-card{width:min(62vw,530px);transform:none}.display-footer{margin-top:1rem;text-align:left}}@media(max-width:560px){.setup-page,.display-page{padding:1.35rem}.setup-panel h1{font-size:clamp(3rem,14vw,4.6rem)}.connection-card{grid-template-columns:auto 1fr}.connection-card .text-button{grid-column:2;justify-self:start;padding:.2rem 0}.input-row{grid-template-columns:1fr}.input-row button{justify-content:center}.display-header h1{font-size:clamp(2.7rem,13vw,4.5rem)}.qr-card{width:min(88vw,450px)}.now-grid{grid-template-columns:1fr}.now-artwork{max-width:260px;margin:auto}.now-details{text-align:center}.playing-label{justify-content:center}.queue-list{grid-template-columns:1fr}.display-footer{grid-template-columns:1fr;gap:.5rem}.display-footer p{white-space:normal;overflow-wrap:anywhere}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}