:root{color-scheme:dark;--bg:#16141a;--surface:#201d25;--line:#36313e;--ink:#f4effa;--muted:#a69cad;--accent:#c4a0ed;--green:#a9dab5}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif}body{min-height:100svh}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}a{color:inherit}button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}[hidden]{display:none!important}.skip-link{position:absolute;top:-80px;left:20px;padding:14px;background:var(--accent);color:var(--bg);z-index:20}.skip-link:focus{top:10px}.site-header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:17px 40px;border-bottom:1px solid var(--line);gap:18px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand>svg{width:35px;height:35px;fill:none;stroke:var(--accent);stroke-width:1.4}.brand>span{display:flex;gap:13px;align-items:baseline;font-weight:700;letter-spacing:-.9px;font-size:27px}.brand small{font-weight:400;letter-spacing:.02em;font-size:10px;color:var(--muted)}.site-header nav{display:flex;align-items:center;gap:8px}.icon-button,.header-button{border:1px solid transparent;color:var(--ink);background:transparent;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;padding:10px;gap:9px}.header-button{border-color:var(--line);padding-inline:17px;font-size:12px}.icon-button:hover,.header-button:hover{background:#ffffff09;border-color:#68606f}#dj-main{min-height:calc(100svh - 86px);display:flex;flex-direction:column;padding:0 40px;outline:none;max-width:1900px;margin:auto}.room-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:66px;font-size:12px}.room-bar>div{display:flex;align-items:center;gap:9px;min-width:0}.live-dot{width:6px;height:6px;background:#796f82;border-radius:50%;flex:none}.live-dot.connected{background:var(--green);box-shadow:0 0 12px #a9dab54d}#room-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.role-label{font:9px/1.5 ui-monospace,monospace;color:var(--muted);letter-spacing:.09em;flex:none}.deck{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:50px;flex:1;min-height:500px}.turntable{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding-bottom:20px}.record-stage{width:min(100%,570px);height:min(42vw,380px);min-height:270px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}.record-shadow{width:70%;aspect-ratio:1;position:absolute;background:#000;border-radius:50%;filter:blur(30px);opacity:.55;transform:translateY(30px);z-index:-1}.orbit{position:absolute;border:1px solid #9f83bd15;border-radius:50%;width:88%;aspect-ratio:1;z-index:-2}.orbit-two{width:100%;border-color:#9f83bd0b}.vinyl{position:relative;aspect-ratio:1;width:min(76%,360px);border-radius:50%;background:radial-gradient(circle at 50% 50%,#131016 0 30%,#18151b 30.5%,#09090b 95%);border:2px solid #38313e;box-shadow:0 0 0 6px #0e0c1055,0 20px 45px #0005;will-change:transform}.grooves{position:absolute;inset:7px;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 2px,#d5bded0c 2px 3px,transparent 3px 4px)}.vinyl-shine{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -20deg,transparent 0deg,#efe4ff0c 35deg,transparent 75deg,transparent 160deg,#efe4ff09 215deg,transparent 255deg)}.record-label{position:absolute;inset:33%;border-radius:50%;overflow:hidden;background:var(--accent);box-shadow:0 0 0 2px #000,0 0 0 7px #17111d}.record-label img{width:100%;height:100%;object-fit:cover;position:absolute;opacity:.9}.label-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#362141;text-align:center}.label-fallback span{font-weight:800;font-size:clamp(25px,4vw,47px);letter-spacing:-2px}.label-fallback small{font:6px/1.8 ui-monospace,monospace;letter-spacing:.25em;margin-top:7px}.spindle{position:absolute;top:50%;left:50%;width:10px;height:10px;background:#131016;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #cabdd3}.tonearm{position:absolute;width:25%;height:89%;top:1%;right:2%;filter:drop-shadow(0 8px 5px #0008);transform-origin:70% 10%;transform:rotate(-17deg);transition:transform .9s cubic-bezier(.22,.7,.3,1)}body[data-playing=true] .tonearm{transform:rotate(2deg)}.now-playing{text-align:center;width:100%;max-width:650px;margin-top:20px}.kicker{color:var(--accent);font:9px/1.6 ui-monospace,monospace;letter-spacing:.15em;margin:0 0 10px}.now-playing h1{font-weight:500;letter-spacing:-1.6px;font-size:clamp(26px,3vw,40px);line-height:1.15;margin:0;overflow-wrap:anywhere}.now-playing>p:not(.kicker){font-size:13px;color:var(--muted);line-height:1.5;margin:12px 0 0}.now-playing .connection-note{font-size:10px!important;opacity:.8;margin-top:9px!important}.transport{display:flex;align-items:center;gap:12px;margin-top:24px}.primary-button,.play-button,.secondary-button{min-height:46px;padding:12px 18px;border:1px solid var(--line);border-radius:12px;font-size:12px;font-weight:550;display:inline-flex;gap:10px;align-items:center;justify-content:center;text-decoration:none}.primary-button,.play-button{background:var(--accent);color:#25192c;border-color:var(--accent)}.primary-button:hover,.play-button:hover{background:#d3b3f3}.secondary-button{background:transparent;color:var(--ink)}.secondary-button:hover{background:#ffffff09;border-color:#6c5d79}.play-button{min-width:125px}.play-button svg{fill:currentColor;stroke:none}.queue-panel{background:linear-gradient(165deg,#292330aa,#211e2566);border:1px solid var(--line);border-radius:22px;display:flex;flex-direction:column;padding:23px;max-height:calc(100svh - 205px);min-height:465px;align-self:center;overflow:hidden}.queue-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--line)}.queue-heading h2{font-size:16px;font-weight:500;letter-spacing:-.3px;margin:0}.queue-heading>span{font:10px/1.2 ui-monospace,monospace;color:var(--muted);background:#43384d;border-radius:6px;padding:5px 8px}#welcome{padding-top:26px}#welcome>p:first-child{font-size:26px;letter-spacing:-.7px;margin:0 0 35px;color:#e1d5eb}label{font-size:11px;color:var(--muted);display:block;margin:0 0 10px}input{min-height:48px;max-width:100%;width:100%;background:#16141ab3;color:var(--ink);border:1px solid #4c4256;border-radius:10px;padding:13px;font-size:12px}input::placeholder{color:#908497}#create-form>.primary-button{width:100%;margin-top:13px;justify-content:space-between}.small-note{font-size:11px!important;color:var(--muted)!important;line-height:1.7!important}#welcome .small-note{margin-top:18px;font-size:10px!important}.queue-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px 4px}.queue-empty svg{width:48px;height:48px;fill:none;stroke:#7b698b;stroke-width:1;margin-bottom:15px}.queue-empty p{font-size:12px;margin:0 0 9px}.queue-empty>span{font-size:10px;color:var(--muted);line-height:1.6}.queue-list{list-style:none;padding:0;margin:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#584661 transparent;flex:1}.queue-item{display:flex;align-items:center;gap:13px;padding:16px 0;border-bottom:1px solid #36313e80;min-width:0}.queue-number{font:9px ui-monospace,monospace;color:#91819b;width:10px;flex:none}.small-record{height:52px;width:52px;flex:none;border-radius:50%;background:repeating-radial-gradient(#111 0 3px,#242029 3px 4px);display:grid;place-items:center;border:1px solid #63546e;box-shadow:2px 3px 6px #0003;position:relative;overflow:hidden}.small-record img{width:65%;height:65%;object-fit:cover;border-radius:50%}.small-record:after{content:'';position:absolute;top:50%;left:50%;width:3px;height:3px;background:#000;border:1px solid #e4d6ec;border-radius:50%;transform:translate(-50%,-50%)}.song-copy{min-width:0;flex:1}.song-copy strong{font-size:11px;font-weight:500;line-height:1.6;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-copy>span{font-size:10px;color:var(--muted);display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.duration{font:9px/1.5 ui-monospace,monospace;color:#a297ac;flex:none}.queue-bottom{padding-top:20px}.add-button{width:100%}.queue-bottom p{font-size:9px;color:var(--muted);text-align:center;margin:12px 0 0;line-height:1.5}.room-footer{min-height:68px;display:flex;align-items:center;gap:18px;font-size:10px;color:var(--muted)}#room-status{flex:1;line-height:1.5;overflow-wrap:anywhere}.text-button{border:0;background:transparent;color:var(--muted);font-size:10px;padding:10px 0;min-height:44px}.text-button:hover{color:var(--ink)}.dj-dialog{width:min(560px,calc(100% - 28px));max-height:calc(100svh - 32px);color:var(--ink);background:#211c28;border:1px solid #50425e;border-radius:22px;padding:26px;box-shadow:0 25px 100px #0008;scrollbar-width:thin}.dj-dialog::backdrop{background:#0c0910bf;backdrop-filter:blur(9px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.dialog-heading h2{font-size:23px;font-weight:500;letter-spacing:-.7px;margin:0}.dialog-heading .icon-button{font-size:26px;color:var(--muted)}.dj-dialog>p,.dj-dialog details p{font-size:12px;line-height:1.8;color:#c1b5cb}.dj-dialog .primary-button{margin-top:16px}.search-row{display:flex;gap:8px}.search-row .primary-button{margin:0;flex:none;min-width:48px}.search-row input{min-width:0}.search-results{padding:0;list-style:none}.search-results li{display:flex;gap:14px;align-items:center;min-width:0;border-bottom:1px solid var(--line);padding:13px 0}.search-results .song-copy strong{font-size:12px;white-space:normal}.search-results .add-result{min-width:44px;min-height:44px;border:1px solid #59466c;background:#3c2c4b;color:#d8b6fa;border-radius:50%;font-size:24px;flex:none}.search-results .add-result:hover{background:#52376b}.search-results .add-result:disabled{opacity:.65}.search-results .small-record{width:56px;height:56px}.setup-steps{padding-left:20px;font-size:12px;color:#c1b5cb;line-height:1.8}.setup-steps li{padding:9px 0 9px 5px}.setup-steps code{font-size:11px;background:#362c40;border-radius:4px;padding:4px 6px;white-space:nowrap}.compact{max-width:440px}.confirm-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:25px}.confirm-actions .primary-button{margin:0}.danger-button{min-height:44px;border:1px solid #715458;border-radius:10px;padding:12px;margin-top:23px;background:transparent;color:#e5adb6;font-size:11px}details{border-top:1px solid var(--line);margin-top:20px;padding-top:9px}summary{cursor:pointer;font-size:11px;min-height:44px;padding-block:13px}.noscript{text-align:center;padding:15px}.tools-install-control{border-color:var(--line)!important;color:var(--ink)!important;background:transparent!important;border-radius:12px!important}.tools-install-control:hover{background:#ffffff09!important}.tools-pwa-dialog{color-scheme:light}
@media(min-width:1500px){.deck{grid-template-columns:minmax(0,1fr) 430px;gap:70px}.record-stage{width:700px;height:460px}.vinyl{width:430px}.queue-panel{min-height:570px}.site-header,#dj-main{padding-inline:65px}}
@media(max-width:1000px){.deck{gap:20px;grid-template-columns:minmax(0,1fr) 320px}.site-header,#dj-main{padding-inline:25px}.queue-panel{padding:20px}.record-stage{height:310px;min-height:250px}.vinyl{width:80%}.tonearm{right:-3%}.now-playing h1{font-size:29px}}
@media(max-width:760px){.site-header{height:72px;padding:12px 17px}.brand small{display:none}.brand>span{font-size:23px}.brand>svg{width:30px;height:30px}.site-header nav{gap:4px}.header-button{padding:10px}.header-button>span{display:none}#dj-main{padding:0 19px;min-height:calc(100svh - 72px)}.room-bar{min-height:56px;gap:12px;font-size:10px}.role-label{font-size:8px;letter-spacing:.05em}.deck{display:flex;flex-direction:column;gap:15px;min-height:0}.record-stage{width:300px;height:240px;min-height:240px}.vinyl{width:218px}.orbit{width:255px}.orbit-two{width:288px}.tonearm{right:2%;height:230px;width:80px}.turntable{padding:5px 0 0}.now-playing{margin-top:17px}.now-playing h1{font-size:27px;letter-spacing:-1px}.now-playing>p:not(.kicker){font-size:11px;margin-top:8px}.kicker{font-size:8px}.transport{margin-top:17px;gap:8px}.play-button,.secondary-button{min-height:44px;font-size:11px}.queue-panel{align-self:stretch;min-height:250px;max-height:none;padding:18px;border-radius:19px}.queue-heading{padding-bottom:15px}.queue-heading h2{font-size:14px}.queue-list{max-height:280px}.queue-item{padding:12px 0}.queue-empty{padding:23px 0}.queue-empty svg{display:none}.queue-bottom{padding-top:15px}.room-footer{flex-wrap:wrap;gap:0 17px;padding:12px 0;min-height:58px}#room-status{flex-basis:100%}#welcome{padding-top:18px}#welcome>p:first-child{font-size:21px;margin:0 0 22px}.dj-dialog{padding:20px}.dialog-heading h2{font-size:21px}.search-results{margin-bottom:0}.search-results .small-record{width:45px;height:45px}.search-results li{gap:10px}.search-results .song-copy strong{font-size:11px}.record-label .label-fallback span{font-size:32px}}
@media(max-width:350px){.site-header{padding-inline:12px}.site-header nav{gap:0}.brand{gap:7px}.brand>svg{width:25px;height:25px}.brand>span{font-size:21px}#dj-main{padding-inline:15px}.record-stage{width:270px;height:220px;min-height:220px}.vinyl{width:202px}.orbit{width:238px}.orbit-two{width:266px}.tonearm{height:210px}.role-label{max-width:126px;text-align:right}.search-results .duration{display:none}.dj-dialog{padding:17px}.dialog-heading h2{font-size:20px}}
@media(max-height:800px) and (min-width:761px){.deck{min-height:0}.record-stage{height:280px;min-height:250px;width:450px;max-width:100%}.vinyl{width:270px;max-width:76%}.tonearm{right:1%;width:23%}.turntable{padding-bottom:12px}.now-playing{margin-top:12px}.now-playing h1{font-size:28px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.now-playing>p:not(.kicker){margin-top:8px;font-size:11px}.transport{margin-top:16px}.queue-panel{min-height:425px}.room-bar{min-height:58px}.room-footer{min-height:58px}.site-header{height:76px}#dj-main{min-height:calc(100svh - 76px)}}
/* The rotated tonearm stays inside narrow viewports, not over the page edge. */
@media(max-width:760px){.tonearm{right:14%}}
@media(max-width:350px){.tonearm{right:18%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.vinyl{will-change:auto}}