:root{--bg:#0e0d0c;--fg:#f2efe9;--muted:#9a958c;--accent:#e8b04a;--card:#1d1d1d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{min-height:100vh;color:var(--fg);background:radial-gradient(ellipse 90% 60% at 50% 45%, #2a2420 0%, var(--bg) 70%);margin:0;overflow-x:hidden}header{z-index:2;padding:14px 16px 0;position:relative}h1{letter-spacing:.02em;margin:0 0 10px;font-size:1.3rem}form{flex-wrap:wrap;align-items:center;gap:8px;display:flex}input:not([type=checkbox]){background:var(--card);color:var(--fg);border:1px solid #333;border-radius:6px;flex:260px;padding:8px}button{background:var(--accent);color:#111;cursor:pointer;border:0;border-radius:6px;padding:8px 14px;font-weight:600}button:disabled{opacity:.4;cursor:default}.refresh{color:var(--muted);font-size:.85rem}#status{color:var(--muted);min-height:1.2em;margin:8px 0 0;font-size:.9rem}#scene{flex-direction:column;align-items:center;padding:0 16px 32px;display:flex}#carousel-host{width:100%}#caption{text-align:center;width:min(100%,1000px);margin:2px 0 18px}#caption strong{-webkit-line-clamp:2;text-wrap:balance;-webkit-box-orient:vertical;font-size:clamp(1.5rem,3.4vh,2.5rem);font-weight:800;line-height:1.15;display:-webkit-box;overflow:hidden}#caption span{color:#c9c3b8;margin-top:4px;font-size:clamp(1.1rem,2.3vh,1.6rem);display:block}body.spinning #caption{opacity:.45}.carousel{--size:260px;width:100%;height:clamp(300px,100vh - 330px,860px);perspective:calc(var(--size) * 5);perspective-origin:50% 40%;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;outline:none;position:relative;overflow:hidden}.carousel.dragging{cursor:grabbing}.carousel:focus-visible{border-radius:12px;box-shadow:inset 0 0 0 2px #e8b04a55}.carousel.empty:after{content:"Charge une playlist pour remplir le bac à vinyles";color:var(--muted);place-items:center;display:grid;position:absolute;inset:0}.carousel-stage{transform-style:preserve-3d;position:absolute;top:45%;left:50%}.slot{width:var(--size);height:var(--size);left:calc(var(--size) / -2);top:calc(var(--size) / -2);transform-style:preserve-3d;will-change:transform, opacity;position:absolute}.sleeve{width:100%;height:100%;transform-style:preserve-3d;-webkit-box-reflect:below 6px linear-gradient(transparent 62%, #ffffff26);transition:transform .5s cubic-bezier(.2,.8,.2,1);position:relative}.face,.back{backface-visibility:hidden;background:hsl(var(--hue,30) 35% 22%);border-radius:3px;position:absolute;inset:0;overflow:hidden;box-shadow:0 18px 40px #000b,inset 0 0 0 1px #ffffff14}.back{background:linear-gradient(135deg,#2b2622,#171412);transform:rotateY(180deg)}.face img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .25s;display:block;position:absolute;inset:0}.face img.cur{transition:opacity .6s}.face img.prev{transition:none}.face img.ready{opacity:1}.face img.instant{transition:none}.ph{color:hsl(var(--hue,30) 60% 88%);font-size:calc(var(--size) * .075);background:radial-gradient(circle at 78% 26%, hsl(calc(var(--hue,30) + 40) 70% 60% / .55) 0 18%, transparent 18.5%), radial-gradient(circle at 78% 26%, transparent 0 24%, hsl(var(--hue,30) 60% 70% / .18) 24.5% 26%, transparent 26.5%), linear-gradient(160deg, hsl(var(--hue,30) 45% 34%), hsl(calc(var(--hue,30) + 25) 50% 16%));flex-direction:column;justify-content:flex-end;gap:.35em;padding:9%;line-height:1.05;display:flex;position:absolute;inset:0;overflow:hidden}.ph b{text-transform:uppercase;letter-spacing:.02em;-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:1.25em;font-weight:800;display:-webkit-box;overflow:hidden}.ph i{opacity:.8;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.85em;font-style:normal;display:-webkit-box;overflow:hidden}.face:after{content:"";pointer-events:none;background:linear-gradient(115deg,#ffffff1f 0%,#0000 35% 70%,#0000002e 100%);position:absolute;inset:0}.carousel.fast .face{filter:blur(1px)}.disc{background:radial-gradient(circle, #111 0 2.2%, transparent 2.4%), radial-gradient(circle, var(--accent) 0 17%, transparent 17.5%), repeating-radial-gradient(circle, #151515 0 1px, #1f1f1f 1.6px 2.4px), #111;visibility:hidden;border-radius:50%;transition:transform .9s cubic-bezier(.2,.8,.2,1) .15s;position:absolute;inset:3%;transform:translateZ(-2px);box-shadow:0 0 0 1px #000,0 10px 30px #000a}.disc .label{background:conic-gradient(from 20deg,#ffffff10,#0000 20%,#ffffff12 45%,#0000 65%,#ffffff10);border-radius:50%;position:absolute;inset:0}.slot.chosen .disc{visibility:visible;transform:translateZ(-2px)translate(34%)rotate(40deg)}.slot.chosen .sleeve{transform:translateY(-5%)translateZ(70px)}.slot.chosen .face{box-shadow:0 26px 60px #000c, 0 0 0 2px var(--accent), 0 0 50px #e8b04a44}.carousel.has-chosen .slot:not(.chosen){filter:brightness(.55);transition:filter .4s}.slot.center:not(.chosen) .face{box-shadow:0 22px 50px #000c,inset 0 0 0 1px #fff2}.now-panel{text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0005;border:1px solid #ffffff14;border-radius:14px;max-width:520px;margin-top:22px;padding:18px 22px}.now-panel.in{animation:.5s cubic-bezier(.2,.8,.2,1) both rise}.now-panel .eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.14em;margin:0;font-size:.75rem}.now-panel h2{margin:6px 0 2px;font-size:1.4rem}.now-panel .artist{color:var(--muted);margin:0 0 12px}.now-panel .yt{color:var(--accent);font-weight:600;text-decoration:none}.now-panel .yt:hover{text-decoration:underline}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}@media (width<=600px){.carousel{height:clamp(260px,48vh,420px)}#caption strong{min-height:2.3em}}@media (prefers-reduced-motion:reduce){.sleeve,.disc{transition:none}.now-panel.in{animation:none}}.search{z-index:5;width:min(520px,100%);margin:6px auto 0;position:relative}.search input{width:100%;color:var(--fg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0006;border:1px solid #ffffff1f;border-radius:999px;padding:10px 14px;font-size:.95rem}.search input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #e8b04a33}.search input:disabled{opacity:.4}.search ul{background:#181513f2;border:1px solid #ffffff1a;border-radius:14px;max-height:min(60vh,420px);margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow-y:auto;box-shadow:0 18px 50px #000c}.search li{cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:6px 8px;display:flex}.search li.active,.search li[data-i]:hover{background:#e8b04a26}.search li img{object-fit:cover;background:#2a2420;border-radius:3px;flex:none;width:40px;height:40px}.search li span{flex-direction:column;min-width:0;display:flex}.search li strong,.search li small{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.search li small{color:var(--muted)}.search li.none{color:var(--muted);cursor:default;justify-content:center}body.stream .search{display:none}.pick{--edge:5px;background:var(--deck-color,#3e0f0b);background-image:linear-gradient(#ffffff2e,#fff0 38%,#00000052);border:0;border-radius:13px;padding:8px;transition:transform .15s,filter .2s;box-shadow:0 0 0 1.5px #d9d9d9,0 0 0 2.5px #5c5c5c,inset 0 1px 1px #ffffffa0,0 14px 30px #000b}.pick .pick-key{background:var(--deck-key,#1c1c1c);color:var(--deck-key-ink,#efe6d6);box-shadow:0 var(--edge) 0 color-mix(in srgb, var(--deck-key,#1c1c1c) 55%, #000), 0 calc(var(--edge) + 3px) 7px #000a, inset 0 1px 0 #fff3;transform:translateY(calc(var(--edge) * -1));margin-top:var(--edge);letter-spacing:.14em;text-transform:uppercase;background-image:linear-gradient(#ffffff26,#ffffff05 45%,#0003);border-radius:6px;align-items:center;gap:12px;padding:13px 26px;font-size:clamp(1rem,1.5vw,1.25rem);font-weight:800;transition:transform 90ms,box-shadow 90ms;display:flex}.pick .pick-led{background:var(--deck-led,#e8b04a);width:10px;height:10px;box-shadow:0 0 9px 1px var(--deck-led,#e8b04a), inset 0 1px 1px #fff8;border-radius:50%;flex:none}.pick:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-1px)}.pick:not(:disabled):active .pick-key,body.spinning .pick .pick-key{box-shadow:0 1px 0 color-mix(in srgb, var(--deck-key,#1c1c1c) 55%, #000), 0 2px 3px #000a, inset 0 1px 0 #ffffff1f;transform:translateY(-1px)}.pick:focus-visible{outline:2px solid var(--deck-led,#e8b04a);outline-offset:5px}body.spinning .pick:disabled{opacity:1}body.spinning .pick .pick-led{animation:.45s steps(2,jump-none) infinite alternate pick-led}@keyframes pick-led{0%{opacity:1}to{opacity:.2}}body[data-deck=valise] .pick,body[data-deck=teck] .pick{background-image:repeating-linear-gradient(91deg,#0000 0 5px,#ffffff12 9px,#00000030 14px,#0000 21px),linear-gradient(#ffffff26,#fff0 38%,#00000052)}body[data-deck=noir] .pick{background-image:repeating-linear-gradient(45deg,#ffffff06 0 1px,#0000 1px 3px),linear-gradient(#ffffff1c,#00000040)}body[data-deck=blanc] .pick{background-image:linear-gradient(#ffffff80,#fff0 45%,#00000026)}body[data-deck=alu] .pick{background-image:repeating-linear-gradient(90deg,#ffffff24 0 1px,#00000014 2px 3px),linear-gradient(#ffffff40,#00000030)}body[data-deck=neon] .pick,body[data-deck=retro] .pick{box-shadow:0 0 0 1.5px var(--deck-color), 0 0 12px color-mix(in srgb, var(--deck-color) 55%, #0000), inset 0 0 8px color-mix(in srgb, var(--deck-color) 28%, #0000);background:#05060d}body[data-deck=neon] .pick .pick-key{color:var(--deck-color);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--deck-color) 60%, #0000);text-shadow:0 0 8px color-mix(in srgb, var(--deck-color) 70%, #0000);background:0 0}body[data-deck=neon] .pick .pick-led{background:var(--deck-color);box-shadow:0 0 9px 1px var(--deck-color)}body[data-deck=retro] .pick{background:#071a6e}body[data-deck=retro] .pick .pick-key{color:#061a5c;background:#16c7c0;box-shadow:0 3px #ff8a1f}body[data-deck=retro] .pick .pick-led{background:#ff8a1f;box-shadow:0 0 9px 1px #ff8a1f}header{justify-content:space-between;align-items:center;gap:12px;padding-bottom:4px;display:flex}header h1{margin:0}.menu-btn{background:#ffffff10;border:1px solid #ffffff1f;border-radius:10px;flex:none;place-content:center;gap:5px;width:42px;height:42px;padding:0;display:grid}.menu-btn span{background:var(--fg);border-radius:2px;width:18px;height:2px;transition:transform .25s,opacity .25s;display:block}.menu-btn:hover{background:#ffffff1c}body.menu-open .menu-btn span:first-child{transform:translateY(7px)rotate(45deg)}body.menu-open .menu-btn span:nth-child(2){opacity:0}body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.menu-backdrop{opacity:0;pointer-events:none;z-index:50;background:#0008;transition:opacity .25s;position:fixed;inset:0}.menu{z-index:51;background:#171412;border-left:1px solid #ffffff14;width:min(400px,100vw);padding:16px 20px 32px;transition:transform .3s cubic-bezier(.2,.8,.2,1);position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(105%);box-shadow:-20px 0 60px #000a}body.menu-open .menu{transform:none}body.menu-open .menu-backdrop{opacity:1;pointer-events:auto}.menu-head{justify-content:space-between;align-items:center;padding-bottom:8px;display:flex}.menu-head h2{margin:0;font-size:1.15rem}.menu-close{color:var(--fg);background:0 0;padding:6px 10px;font-size:1.1rem}.menu section{border-top:1px solid #ffffff12;flex-direction:column;gap:10px;padding:14px 0;display:flex}.menu h3{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0;font-size:.75rem}.menu form{flex-direction:column;align-items:stretch}.menu form input:not([type=checkbox]){flex:none}.menu #status{margin:0}.menu .row{flex-direction:column;gap:6px;font-size:.9rem;display:flex}.menu .check{align-items:center;gap:8px;font-size:.9rem;display:flex}.menu select{background:var(--card);color:var(--fg);border:1px solid #333;border-radius:6px;padding:7px}.menu input[type=range]{accent-color:var(--accent)}.menu output{color:var(--accent);font-weight:700}.menu .ghost{color:var(--fg);cursor:pointer;text-align:center;background:0 0;border:1px solid #ffffff2a;border-radius:6px;padding:7px 12px;font-size:.9rem;font-weight:500;text-decoration:none}.menu .ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.menu .hint{color:var(--muted);margin:0;font-size:.85rem}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{background:var(--c);cursor:pointer;border:2px solid #fff2;border-radius:50%;width:30px;height:30px;padding:0;box-shadow:inset 0 0 0 2px #0004}.swatch.on{border-color:var(--accent);box-shadow:0 0 0 2px #171412, 0 0 0 4px var(--accent)}.swatch.custom{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);position:relative}.swatch.custom.on{background:var(--c)}.swatch.custom input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.logo-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.logo-preview{background:#2a2420 50%/contain no-repeat;border:1px solid #fff2;border-radius:50%;flex:none;width:44px;height:44px}.logo-preview.empty{background-image:radial-gradient(circle,#fff2 0 2px,#0000 3px)}.menu .file{position:relative}.stream-row{gap:6px;display:flex}.stream-row input{background:var(--card);min-width:0;color:var(--muted);border:1px solid #333;border-radius:6px;flex:1;padding:7px;font-size:.8rem}.keys{grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:.88rem;display:grid}.keys dt{white-space:nowrap}.keys dd{color:var(--muted);margin:0}kbd{min-width:1.6em;font:inherit;text-align:center;background:#ffffff0d;border:1px solid #ffffff30;border-radius:4px;padding:1px 6px;font-size:.8rem;display:inline-block}body.stream .menu-btn{display:none}.deck-overlay{--u:8px;z-index:20;perspective-origin:50%;transition:perspective-origin .7s cubic-bezier(.3,.7,.2,1);position:fixed;inset:0;overflow:hidden}.deck-backdrop{opacity:0;background:radial-gradient(80% 70% at 50% 55%,#1c1714ee,#070606f5);transition:opacity .6s;position:absolute;inset:0}.deck-overlay.in .deck-backdrop{opacity:1}.deck-overlay[hidden]{display:none}.deck-world,.deck{width:0;height:0;transform-style:preserve-3d;position:absolute;top:50%;left:50%}.deck>*{transform-style:preserve-3d;position:absolute}.deck .cyl i{transform-origin:top;backface-visibility:hidden;position:absolute;top:0}.floor-shadow{border-radius:calc(var(--u) * 6);filter:blur(calc(var(--u) * 1.5));background:radial-gradient(closest-side,#000d,#0006 60%,#0000)}.deck-overlay{--body:#3e0f0b;--ink:#e9c79acc;--lid-a:#a0581c66;--lid-b:#6b3410a6;--lid-edge:#f0b77355;--tex:repeating-radial-gradient(ellipse 180% 60% at 30% 120%, #0000 0 calc(var(--u) * .7), #ffffff0f calc(var(--u) * 1.5), #00000030 calc(var(--u) * 2.3), #ffffff0a calc(var(--u) * 3.4))}.deck-overlay[data-style=teck]{--tex:repeating-linear-gradient(91deg, #0000 0 calc(var(--u) * .5), #ffffff12 calc(var(--u) * 1), #00000026 calc(var(--u) * 1.7), #0000 calc(var(--u) * 2.6))}.deck-overlay[data-style=noir]{--ink:#d8d8d8aa;--lid-a:#4a4a4a55;--lid-b:#151515a0;--lid-edge:#ffffff30;--tex:repeating-linear-gradient(45deg, #ffffff04 0 1px, transparent 1px 3px)}.deck-overlay[data-style=blanc]{--ink:#3a3530cc;--lid-a:#ffffff38;--lid-b:#cfd3d655;--lid-edge:#fff6;--tex:linear-gradient(transparent, transparent)}.deck-overlay[data-style=alu]{--ink:#2a2d31cc;--lid-a:#8a8f9555;--lid-b:#3e434999;--lid-edge:#fff4;--tex:repeating-linear-gradient(90deg, #ffffff1c 0 1px, #00000012 2px 3px)}.plinth{border-radius:calc(var(--u) * 1.2);background:radial-gradient(ellipse 60% 50% at 22% 18%, #fff2, transparent 60%), radial-gradient(ellipse 120% 18% at 40% 30%, #ffffff0c, transparent 70%), var(--tex), var(--body);box-shadow:inset 0 0 0 calc(var(--u) * .2) #ffffff18, inset 0 0 calc(var(--u) * 4) #0000004d;transition:background-color .4s}.trim{inset:calc(var(--u) * .9);border-radius:calc(var(--u) * .8);box-shadow:inset 0 0 0 calc(var(--u) * .15) #0005, 0 0 0 calc(var(--u) * .1) #ffffff10;position:absolute}.pface{backface-visibility:hidden}.pface.front{transform-origin:top;padding:0 calc(var(--u) * 4);border-radius:0 0 calc(var(--u) * 1.2) calc(var(--u) * 1.2);background:linear-gradient(#ffffff26, transparent 14%, transparent 85%, #0006), linear-gradient(#0000002a, #0000002a), var(--tex), var(--body);justify-content:space-between;align-items:center;display:flex}.spk{width:calc(var(--u) * 21);height:calc(var(--u) * 7.2);background:radial-gradient(circle, #2a2a2a 0 calc(var(--u) * .18), transparent calc(var(--u) * .22)) 0 0 / calc(var(--u) * .7) calc(var(--u) * .7), radial-gradient(ellipse at 50% 35%, #1b1b1b, #050505);box-shadow:inset 0 calc(var(--u) * .5) calc(var(--u) * 1) #000, 0 0 0 calc(var(--u) * .35) #0008, 0 calc(var(--u) * .2) 0 calc(var(--u) * .4) #ffffff14;border-radius:50%}.volume{--vol:.8;align-items:center;gap:calc(var(--u) * 1.2);display:flex;position:relative}.vol-mute{all:unset;cursor:pointer;font-size:calc(var(--u) * 2.4);filter:grayscale(.3);width:calc(var(--u) * 3.2);text-align:center;padding:calc(var(--u) * .3);border-radius:calc(var(--u) * .5);flex:none;line-height:1}.vol-mute:hover{background:#ffffff14}.vol{width:calc(var(--u) * 8.4);height:calc(var(--u) * 8.4);cursor:ns-resize;touch-action:none;background:radial-gradient(circle, #0a0a0a 0 60%, transparent 61%), conic-gradient(from -135deg, #2f8bff calc(var(--vol) * 270deg), #12243f 0 270deg, transparent 0);box-shadow:0 0 0 calc(var(--u) * .25) #050505, inset 0 0 calc(var(--u) * .5) #000;border-radius:50%;outline:none;place-items:center;transition:filter .4s;display:grid;position:relative}.deck-overlay.playing .vol{filter:drop-shadow(0 0 calc(var(--u) * .9) #2f8bffaa)}.vol:focus-visible{box-shadow:0 0 0 calc(var(--u) * .25) var(--accent)}.vol-knob{background:repeating-conic-gradient(#ffffff12 0 5deg, transparent 5deg 10deg), radial-gradient(circle at 40% 30%, #3e3e3e, #0c0c0c 70%);width:66%;height:66%;box-shadow:0 calc(var(--u) * .3) calc(var(--u) * .5) #000, inset 0 0 0 calc(var(--u) * .15) #ffffff14;transform:rotate(calc(-135deg + var(--vol) * 270deg));border-radius:50%;position:relative}.volume.turning .vol-knob{box-shadow:0 calc(var(--u) * .3) calc(var(--u) * .5) #000, inset 0 0 0 calc(var(--u) * .2) #2f8bff}.vol-knob i{width:calc(var(--u) * .5);height:32%;margin-left:calc(var(--u) * -.25);background:#e9dccb;border-radius:99px;position:absolute;top:8%;left:50%}.vol-val{pointer-events:none;font:800 calc(var(--u) * 2) / 1 system-ui, sans-serif;color:#fff;text-shadow:0 0 calc(var(--u) * .6) #2f8bff;opacity:0;place-items:center;transition:opacity .2s;display:grid;position:absolute;inset:0}.volume:hover .vol-val,.volume.show-val .vol-val,.volume.turning .vol-val{opacity:1}.volume:hover .vol-knob i,.volume.show-val .vol-knob i{opacity:.25}.volume input.vol-fader{appearance:none;width:calc(var(--u) * 11);height:calc(var(--u) * 1.4);cursor:pointer;background:linear-gradient(90deg, #2f8bff calc(var(--vol) * 100%), #12243f 0);box-shadow:inset 0 calc(var(--u) * .2) calc(var(--u) * .3) #000a;border:0;border-radius:99px;flex:none;margin:0;padding:0}.vol-fader::-webkit-slider-thumb{-webkit-appearance:none;width:calc(var(--u) * 2.2);height:calc(var(--u) * 2.6);border-radius:calc(var(--u) * .4);box-shadow:0 calc(var(--u) * .3) calc(var(--u) * .4) #000;background:linear-gradient(#5a5a5a,#1a1a1a)}.vol-fader::-moz-range-thumb{width:calc(var(--u) * 2.2);height:calc(var(--u) * 2.6);border-radius:calc(var(--u) * .4);background:linear-gradient(#5a5a5a,#1a1a1a);border:0}.pface.left{transform-origin:0;background:linear-gradient(90deg, #000000a0, #00000070), var(--body)}.pface.right{transform-origin:100%;background:linear-gradient(90deg, #000000b0, #0008), var(--body)}.brand{text-align:right;font:700 calc(var(--u) * 1.3) / 1.25 system-ui, sans-serif;letter-spacing:.3em;color:var(--ink);white-space:nowrap;text-shadow:0 1px #0008;position:absolute;top:6%;right:4%}.speed{gap:calc(var(--u) * .5) calc(var(--u) * .9);width:21%;height:11%;transform-style:preserve-3d;grid-template-rows:auto 1fr;grid-template-columns:repeat(3,1fr);display:grid;position:absolute;top:45%;left:77%}.speed-title{text-align:center;font:800 calc(var(--u) * 1.2) / 1 system-ui, sans-serif;letter-spacing:.2em;color:var(--ink);grid-column:1/-1}.speed button{all:unset;cursor:pointer;font:800 calc(var(--u) * 2.4) / 1 system-ui, sans-serif;border-radius:calc(var(--u) * .5);color:#f4ead9;box-shadow:inset 0 calc(var(--u) * .15) 0 #ffffff26, 0 calc(var(--u) * .8) 0 #070707, 0 calc(var(--u) * 1.4) calc(var(--u) * 1) #000b;transform:translateZ(calc(var(--u) * .5));background:linear-gradient(#3b3b3b,#1b1b1b 70%,#121212);place-items:center;transition:transform 80ms,background .2s,color .2s;display:grid}.speed button:hover{background:linear-gradient(#4a4a4a,#222 70%,#161616)}.speed button:focus-visible{outline:calc(var(--u) * .25) solid var(--accent)}.speed button.on{color:#2a1500;transform:translateZ(calc(var(--u) * .15));box-shadow:inset 0 calc(var(--u) * .15) 0 #ffffff40, 0 calc(var(--u) * .3) 0 #070707, 0 calc(var(--u) * .5) calc(var(--u) * .6) #000b;background:linear-gradient(#f0bd5a,#c98f2a 75%,#a87220)}.brand.logo{width:calc(var(--u) * 16);height:calc(var(--u) * 9);top:4%;right:3%}.brand.logo img{object-fit:contain;object-position:right center;width:100%;height:100%;filter:drop-shadow(0 calc(var(--u) * .2) calc(var(--u) * .2) #0008);display:block}.cue-lever{width:calc(var(--u) * 1.2);height:calc(var(--u) * 6);border-radius:calc(var(--u) * .6);box-shadow:calc(var(--u) * .6) calc(var(--u) * .6) calc(var(--u) * .8) #000a;transform:translateZ(calc(var(--u) * 1.5)) rotate(-18deg);background:linear-gradient(90deg,#111,#444,#111);position:absolute;top:24%;left:95%}.hinge{transform-origin:top;border-radius:calc(var(--u) * .4);background:linear-gradient(90deg,#1a1a1a,#555,#1a1a1a)}.platter{background:repeating-conic-gradient(from 0deg, #ffffff06 0 1deg, transparent 1deg 3deg), conic-gradient(from 10deg, #2c2c2c, #111 15%, #333 30%, #121212 50%, #2e2e2e 70%, #101010 85%, #2c2c2c);border-radius:50%}.platter .mat{box-shadow:inset 0 0 calc(var(--u) * 1) #000;background:radial-gradient(circle,#262626,#161616 70%,#0d0d0d);border-radius:50%;position:absolute;inset:3.5%}.spindle{box-shadow:0 0 calc(var(--u) * .4) #000;background:radial-gradient(circle at 35% 35%,#fff,#aaa 55%,#444);border-radius:50%}.arm-base{box-shadow:inset 0 0 0 calc(var(--u) * .8) #ffffff0d;background:radial-gradient(circle at 38% 32%,#4a4a4a,#161616 55%,#050505);border-radius:50%}.arm,.arm-shadow,.arm-rest{width:0;height:0}.arm>div,.arm-shadow>div{transform-style:preserve-3d;position:absolute}.arm,.arm-shadow{transition:transform 1.1s cubic-bezier(.45,0,.2,1)}.arm-rod{background:linear-gradient(90deg,#6e6e6e,#fafafa 45%,#bdbdbd 60%,#707070);border-radius:99px}.headshell{border-radius:calc(var(--u) * .5) calc(var(--u) * .5) calc(var(--u) * .9) calc(var(--u) * .9);box-shadow:inset 0 0 0 calc(var(--u) * .15) #fff2;background:linear-gradient(90deg,#1d1d1d,#4a4a4a 50%,#1d1d1d)}.cartridge{transform-origin:top;border-radius:0 0 calc(var(--u) * .3) calc(var(--u) * .3);background:linear-gradient(90deg,#b5121b,#e8333c 50%,#8f0d14)}.counterweight{border-radius:calc(var(--u) * 1);background:linear-gradient(90deg,#050505,#3a3a3a 40%,#1a1a1a 60%,#050505)}.arm-shadow>div{opacity:.55;filter:blur(calc(var(--u) * .5));background:#000;border-radius:99px;transition:opacity .6s,filter .6s}.arm-shadow.lifted>div{opacity:.3;filter:blur(calc(var(--u) * 1.1))}.vinyl{transform-style:preserve-3d;will-change:transform;position:absolute}.vinyl-spin{animation:vinyl-spin var(--turn,1.8s) linear infinite;box-shadow:0 0 0 1px #000, 0 calc(var(--u) * 1.5) calc(var(--u) * 3) #000c;border-radius:50%;animation-play-state:paused;position:absolute;inset:0}.deck-overlay.playing .vinyl-spin,.deck-overlay.cueing .vinyl-spin{animation-play-state:running}.grooves{background:radial-gradient(circle,#0000 0 34%,#0000 34%,#ffffff0a 34.5%,#0000 36% 96%,#ffffff12 97%,#0000 98%),repeating-radial-gradient(circle,#111 0 .25%,#1c1c1c .4% .65%),#111;border-radius:50%;position:absolute;inset:0}.vinyl-label{inset:calc((100% - var(--label-d,34%)) / 2);background:radial-gradient(circle, #111 0 9%, var(--accent) 9.5%);border-radius:50%;position:absolute;overflow:hidden}.vinyl-label canvas{width:100%;height:100%;display:block}.sheen{pointer-events:none;animation:vinyl-spin var(--turn,1.8s) linear infinite reverse;animation-play-state:inherit;background:conic-gradient(from 30deg,#ffffff1c,#0000 12% 38%,#ffffff16 50%,#0000 62% 88%,#ffffff1c);border-radius:50%;position:absolute;inset:0}@keyframes vinyl-spin{to{transform:rotate(360deg)}}.lid{transform-origin:bottom;padding:calc(var(--u) * 2.2);gap:calc(var(--u) * 1.2);border-radius:calc(var(--u) * 1.4);background:linear-gradient(125deg, #ffffff2e 0%, #ffffff08 22%, transparent 40%, transparent 75%, #ffffff12 90%, transparent), linear-gradient(var(--lid-a), var(--lid-b));border:calc(var(--u) * .25) solid var(--lid-edge);box-shadow:inset 0 0 calc(var(--u) * 3) #2a10024d;transform-style:preserve-3d;flex-direction:column-reverse;transition:transform .85s cubic-bezier(.5,0,.2,1);display:flex}.lid>.screen,.lid>.bar{transition:opacity .5s .4s;transform:translateZ(1px)}.lid.closed>.screen,.lid.closed>.bar{opacity:0;transition-delay:0s}.lid-back{display:none}.lid-edge{--d:calc(var(--u) * 8.5);background:linear-gradient(#b8702e4d,#8a4a1a66);border:1px solid #f0b77333;position:absolute}.lid-edge.top{height:var(--d);transform-origin:top;top:0;left:0;right:0;transform:rotateX(90deg)}.lid-edge.bottom{height:var(--d);transform-origin:bottom;bottom:0;left:0;right:0;transform:rotateX(-90deg)}.lid-edge.left{width:var(--d);transform-origin:0;top:0;bottom:0;left:0;transform:rotateY(-90deg)}.lid-edge.right{width:var(--d);transform-origin:100%;top:0;bottom:0;right:0;transform:rotateY(90deg)}.bar{color:#fff4e6;text-shadow:0 1px 2px #000a}.bar .now span{color:#f3dcc0cc}.screen{aspect-ratio:16/9;border-radius:calc(var(--u) * .8);width:100%;box-shadow:inset 0 0 0 1px #000, 0 0 0 calc(var(--u) * .3) #0a0a0a;background:#000;flex:none;position:relative;overflow:hidden}.yt-host,.yt-host>*,.yt-host iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.poster{object-fit:contain;pointer-events:none;background:radial-gradient(circle,#2a2420,#000);width:100%;height:100%;transition:opacity .4s;position:absolute;inset:0}.deck-overlay.started .screen:not(.son) .poster{opacity:0}.screen-msg{text-align:center;color:var(--fg);font-size:max(13px, calc(var(--u) * 2));background:#000c;place-content:center;gap:8px;padding:8%;display:grid;position:absolute;inset:0}.screen-msg[hidden]{display:none}.screen-msg a{color:var(--accent)}.bar{flex:none;align-items:center;min-height:0;display:flex}.now{flex:1;min-width:0;line-height:1.15}.now strong,.now span{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.now strong{font-size:max(13px, calc(var(--u) * 2.6))}.now span{color:var(--muted);font-size:max(11px, calc(var(--u) * 2))}.keys{gap:calc(var(--u) * 1.1);transform-style:preserve-3d;grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.key{all:unset;box-sizing:border-box;cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--u) * .5);border-radius:calc(var(--u) * .5) calc(var(--u) * .5) calc(var(--u) * .3) calc(var(--u) * .3);color:#f4ead9;min-width:0;box-shadow:inset 0 calc(var(--u) * .15) 0 #ffffff26, 0 calc(var(--u) * .9) 0 #070707, 0 calc(var(--u) * 1.6) calc(var(--u) * 1.2) #000b;transform:translateZ(calc(var(--u) * .5));background:linear-gradient(#3b3b3b,#1b1b1b 70%,#121212);flex-direction:column;text-decoration:none;transition:transform 80ms,box-shadow 80ms,background .2s;display:flex;position:relative;overflow:hidden}.key b{font:700 calc(var(--u) * 4) / 1 system-ui, sans-serif}.key small{font:800 calc(var(--u) * 1.05) / 1 system-ui, sans-serif;letter-spacing:0;text-overflow:clip;opacity:.75;white-space:nowrap;max-width:100%;overflow:hidden}.key:hover{background:linear-gradient(#4a4a4a,#222 70%,#161616)}.key:active{transform:translateZ(calc(var(--u) * .15));box-shadow:inset 0 calc(var(--u) * .15) 0 #ffffff1a, 0 calc(var(--u) * .3) 0 #070707, 0 calc(var(--u) * .5) calc(var(--u) * .6) #000b}.key:focus-visible{outline:calc(var(--u) * .25) solid var(--accent);outline-offset:calc(var(--u) * .2)}.key.play.on{color:#2a1500;background:linear-gradient(#f0bd5a,#c98f2a 75%,#a87220)}.key-led{top:calc(var(--u) * .9);right:calc(var(--u) * .9);width:calc(var(--u) * 1.1);height:calc(var(--u) * 1.1);background:#262626;border-radius:50%;position:absolute}.key.auto.on .key-led{box-shadow:0 0 calc(var(--u) * .9) #2f8bff;background:#2f8bff}.deck-world{transition:transform .7s cubic-bezier(.3,.7,.2,1)}.deck-overlay.mini{pointer-events:none}.deck-overlay.mini .deck-world{pointer-events:auto;cursor:zoom-in}.deck-overlay.mini .deck-backdrop{opacity:0}.deck-overlay.mini iframe{pointer-events:none}@media (prefers-reduced-motion:reduce){.arm{transition:none}.vinyl-spin,.sheen{animation:none}}body.stream{background:0 0}body.stream header,body.stream .deck-backdrop{display:none}body.stream #scene>:not(#stage-host){transition:opacity .5s}body.stream.deck-open #scene>:not(#stage-host){opacity:0}.disc .vinyl-skin{border-radius:50%;position:absolute;inset:0;overflow:hidden}.disc .vinyl-skin .sheen{animation:none}.mini-bar{pointer-events:auto;background:#15110fe6;border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:6px;padding:4px 8px;display:none;position:absolute;box-shadow:0 8px 24px #000a}.deck-overlay.mini .mini-bar{display:flex}.mini-bar button{min-width:34px;height:32px;color:var(--fg);background:#ffffff14;border:1px solid #ffffff1f;border-radius:7px;padding:0 8px;font-size:16px;line-height:1}.mini-bar button:hover{background:#ffffff26}.mini-bar [data-act=play]{background:var(--accent);color:#111}.mini-vol{cursor:pointer;flex:1;align-items:center;gap:6px;min-width:70px;display:flex}.mini-vol span{text-align:center;flex:none;width:22px;font-size:16px}.mini-bar .mini-vol input{appearance:none;cursor:pointer;background:linear-gradient(90deg, #2f8bff calc(var(--vol,.8) * 100%), #12243f 0);border:0;border-radius:99px;flex:1;min-width:0;height:8px;margin:0;padding:0}.mini-bar .mini-vol input::-webkit-slider-thumb{-webkit-appearance:none;background:#e9dccb;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #000}.mini-bar .mini-vol input::-moz-range-thumb{background:#e9dccb;border:0;border-radius:50%;width:16px;height:16px}.deck-overlay.mini .keys,.deck-overlay.mini .volume{pointer-events:none}.deck-overlay.mini .lid-edge,.deck-overlay.mini .pface.left,.deck-overlay.mini .pface.right,.deck-overlay.mini .hinge{visibility:hidden}.mini-bar button.label{letter-spacing:.04em;font:700 13px/1 system-ui,sans-serif}.deck-overlay .yt-host iframe:fullscreen{pointer-events:auto}.deck-overlay.prep{pointer-events:none}.deck-overlay.prep .deck{visibility:hidden}.deck-overlay.landed:not(.mini) .vinyl{cursor:grab}.deck-overlay.scratching .vinyl{cursor:grabbing}.deck-overlay.scratching .vinyl-spin{animation-play-state:paused!important}.bar .fmt{margin-left:calc(var(--u) * 1.5);padding:calc(var(--u) * .5) calc(var(--u) * 1);color:#f3dcc0;white-space:nowrap;font:700 max(11px, calc(var(--u) * 1.6)) / 1 system-ui, sans-serif;background:#0006;border-radius:99px;flex:none}.bar .fmt:empty{display:none}.sleeve.preparing .face{animation:1s ease-in-out infinite alternate sleeve-wait}@keyframes sleeve-wait{to{box-shadow:0 26px 60px #000c, 0 0 0 2px var(--accent), 0 0 70px #e8b04a88}}.deck-overlay.gl{--u:10px;overflow:hidden}.deck-overlay.gl .gl-host,.deck-overlay.gl .css-host{position:absolute;inset:0}.deck-overlay.gl .gl-host canvas{display:block}.deck-overlay.gl .gl-host,.deck-overlay.gl .gl-host canvas,.deck-overlay.gl .css-host,.deck-overlay.gl .css-host>div,.deck-overlay.gl .css-host>div>div{pointer-events:none}.deck-overlay.gl .css-host .ui{pointer-events:auto}.deck-overlay.gl.prep{pointer-events:none}.deck-overlay.gl.prep .gl-host{visibility:hidden}.gl-lid{box-sizing:border-box;color:#fff4e6;background:#050505;flex-direction:column;justify-content:center;gap:14px;width:1000px;height:789px;padding:0;display:flex}.gl-lid .bar{text-shadow:0 1px 2px #000a;align-items:center;gap:16px;display:flex}.gl-lid .now strong{font-size:30px}.gl-lid .now span{color:#f3dcc0cc;font-size:22px}.gl-lid .bar .fmt{margin:0;padding:6px 12px;font-size:18px}.gl-lid .screen{width:1000px}.gl-keys{grid-template-rows:58px 1fr;gap:10px;width:230px;height:250px;display:grid}.deck-overlay.gl .gl-keys .speed,.deck-overlay.gl .gl-keys .keys{width:auto;height:auto;position:static;transform:none}.gl-brand{text-align:right;letter-spacing:.3em;width:200px;color:var(--ink);text-shadow:0 1px #0008;font:700 13px/1.25 system-ui,sans-serif}.gl-brand.logo img{object-fit:contain;object-position:right center;width:100%;height:80px}.deck-overlay.gl .gl-vol{gap:8px;width:170px}.deck-overlay.gl .gl-vol .vol-mute{width:32px;font-size:24px}.deck-overlay.gl .gl-vol input.vol-fader{width:120px;height:12px}.deck-overlay.gl.mini{pointer-events:auto}.deck-overlay.gl.mini .gl-host,.deck-overlay.gl.mini .css-host{bottom:48px}.deck-overlay.gl.mini .mini-bar{height:40px;animation:.3s .5s both gl-bar-in;bottom:0;left:0;right:0}@keyframes gl-bar-in{0%{opacity:0}}.deck-overlay.gl .ui,.deck-overlay.gl .ui *{transform-style:flat}.deck-overlay.gl .gl-keys .key,.deck-overlay.gl .gl-keys .speed button{transform:none}.deck-overlay.gl .gl-keys .key:active{transform:translateY(2px)}.vol-bubble{z-index:3;pointer-events:none;color:#fff;opacity:0;background:#000d;border:1px solid #2f8bff88;border-radius:8px;padding:7px 13px;font:800 18px/1 system-ui,sans-serif;transition:opacity .15s;position:fixed;transform:translate(-50%,calc(-100% - 46px));box-shadow:0 4px 16px #0009}.vol-bubble.show{opacity:1}.deck-overlay.gl.mini .vol-bubble{display:none}.deck-overlay.gl.customizing .gl-host,.deck-overlay.gl.customizing .css-host{right:auto}.deck-overlay.gl[data-style=retro] .deck-backdrop{background:linear-gradient(#030a4a,#0a1c9c 55%,#04103f)}.deck-overlay.gl.customizing .deck-backdrop{opacity:1;background:radial-gradient(70% 70% at 38%,#2a2320,#0a0807)}.deck-config{width:min(360px,42vw);color:var(--fg);visibility:hidden;background:#15110fee;border-left:1px solid #ffffff1a;flex-direction:column;font-size:14px;transition:transform .45s cubic-bezier(.3,.7,.2,1);display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%)}.deck-overlay.gl.customizing .deck-config{visibility:visible;transform:none}.deck-config header,.deck-config footer{justify-content:space-between;align-items:center;gap:8px;padding:14px 16px;display:flex}.deck-config h2{margin:0;font-size:18px}.deck-config h3{margin:0 0 4px;font-size:20px}.deck-config h4{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px;font-size:12px;font-weight:700}.cfg-done{background:var(--accent);color:#111}.cfg-parts{border-bottom:1px solid #ffffff14;flex-wrap:wrap;gap:6px;padding:0 16px 12px;display:flex}.cfg-parts button,.cfg-step,.cfg-reset,.cfg-btn{color:var(--fg);cursor:pointer;background:#ffffff10;border:1px solid #ffffff1c;border-radius:8px;padding:7px 11px;font-size:13px;font-weight:600}.cfg-parts button:hover,.cfg-step:hover,.cfg-reset:hover,.cfg-btn:hover{background:#ffffff20}.cfg-parts button.on{background:var(--accent);color:#111;border-color:#0000}.cfg-body{flex:1;padding:16px;overflow-y:auto}.cfg-hint{color:var(--muted);margin:0}.cfg-opts{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;display:grid}.cfg-opt{text-align:left;color:var(--fg);cursor:pointer;background:#ffffff0c;border:1px solid #ffffff1a;border-radius:9px;align-items:center;gap:9px;padding:8px 10px;font-size:13px;font-weight:600;display:flex}.cfg-opt:hover{background:#ffffff1a}.cfg-opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.cfg-opt i{background:var(--c);border-radius:50%;flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 1px #fff3}.cfg-colors{flex-wrap:wrap;gap:8px;display:flex}.cfg-dot{background:var(--c);cursor:pointer;border:2px solid #ffffff2a;border-radius:50%;width:32px;height:32px;padding:0;position:relative;overflow:hidden}.cfg-dot.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.cfg-dot.custom{background:conic-gradient(#f44,#fd4,#4f6,#4cf,#84f,#f44)}.cfg-dot.custom input{opacity:0;cursor:pointer;flex:none;width:auto;padding:0;position:absolute;inset:-6px}.cfg-logo-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;display:flex}.cfg-logo-preview{background:#ffffff0c 50%/contain no-repeat;border:1px dashed #fff3;border-radius:8px;width:64px;height:64px}.cfg-logo-err{color:#ff8a7a;min-height:1em}.cfg-btn:disabled{opacity:.4;cursor:default}.deck-config footer{border-top:1px solid #ffffff14}@media (prefers-reduced-motion:reduce){.deck-config{transition:none}}.deck-overlay.gl.customizing .css-host .ui,.deck-overlay.gl.customizing iframe{pointer-events:none}.deck-overlay.gl .poster:not([src]){display:none}.deck-overlay.gl.leaving,.deck-overlay.gl.leaving .ui,.deck-overlay.gl.leaving iframe{pointer-events:none}.deck-overlay.gl.leaving .mini-bar{opacity:0;transition:opacity .2s;animation:none}