@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg-dark:#0a0a0a;--text-primary:#fffffff2;--text-secondary:#ffffff8c;--pill-bg:#ffffff0f;--pill-border:#ffffff14;--pill-hover:#ffffff1f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text-primary);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.4}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{background-color:var(--bg-dark);transition:background 1.2s ease-in-out}#root{width:100%;height:100%}.player-screen{-webkit-user-select:none;user-select:none;flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.record-stage{flex:auto;justify-content:flex-start;align-items:center;min-height:0;padding-top:2vh;display:flex;position:relative;overflow:visible}.track-info{flex:none;padding:0 2rem}.track-title{letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis;margin-bottom:.3rem;font-size:1.6rem;font-weight:700;line-height:1.2;overflow:hidden}.track-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:1rem;font-weight:400;overflow:hidden}.transport-bar{padding:1.5rem 2rem 2.5rem;padding-bottom:max(2.5rem, env(safe-area-inset-bottom,2.5rem));flex:none;justify-content:space-between;align-items:flex-end;display:flex}.hardware-control{flex-direction:column;align-items:center;gap:.75rem;display:flex}.hardware-btn{appearance:none;cursor:pointer;-webkit-tap-highlight-color:transparent;background:linear-gradient(#252525,#151515);border:2px solid #0f0f0f;border-radius:24px;outline:none;justify-content:center;align-items:center;width:80px;height:40px;transition:all .1s;display:flex;position:relative;box-shadow:0 4px 10px #000c,inset 0 1px 1px #ffffff14}.hardware-btn.small{width:64px;height:32px}.hardware-btn:active:not(:disabled){background:#111;transform:translateY(2px);box-shadow:0 1px 2px #000c,inset 0 2px 5px #000000e6}.hardware-btn:disabled{opacity:.5;cursor:not-allowed}.hardware-label{letter-spacing:.1em;color:var(--text-secondary);text-transform:uppercase;justify-content:center;align-items:center;font-size:.65rem;font-weight:600;display:flex}.transport-right{align-items:flex-end;gap:1.5rem;display:flex}.vinyl-container{flex-shrink:0;width:110vw;max-width:800px;height:110vw;max-height:800px;margin-left:-20vw;position:relative}.vinyl-shadow{filter:blur(20px);pointer-events:none;background:radial-gradient(circle,#0009 40%,#0000004d 60%,#0000 75%);border-radius:50%;position:absolute;inset:-4%}.vinyl-disc{border-radius:50%;position:absolute;inset:0;overflow:hidden}.tonearm-root{z-index:20;touch-action:none;cursor:grab;position:absolute;top:6vh;right:-30px}.tonearm-base{background:#151515;border:1px solid #ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;display:flex;position:relative;box-shadow:inset 0 4px 8px #ffffff0d,0 8px 16px #0009}.tonearm-base:before{content:"";pointer-events:none;background:0 0;border:1px solid #ffffff05;border-radius:50%;width:170px;height:170px;position:absolute;box-shadow:inset 0 0 10px #00000080}.tonearm-counterweight{z-index:2;background:linear-gradient(#2a2a2a,#0f0f0f);border:1px solid #333;border-radius:4px;width:44px;height:38px;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 4px 8px #000c}.tonearm-base-inner{z-index:3;background:radial-gradient(circle at 30% 30%,#333,#0a0a0a);border:1px solid #222;border-radius:50%;width:50px;height:50px;box-shadow:0 2px 6px #000c}.tonearm-arm{z-index:4;background:linear-gradient(90deg,#777 0%,#e6e6e6 30%,#fff 50%,#a6a6a6 70%,#555 100%);border-radius:6px;width:12px;position:absolute;top:60px;left:50%;transform:translate(-50%);box-shadow:-2px 4px 10px #0009,inset 1px 0 2px #fffc}.tonearm-head{transform-origin:top;background:linear-gradient(to bottom right,#252525,#0f0f0f);border:1px solid #ffffff1a;border-radius:4px;width:26px;height:45px;position:absolute;bottom:-24px;left:50%;transform:translate(-50%)rotate(25deg);box-shadow:-4px 6px 12px #000000b3}.tonearm-needle{background:#bbb;border-radius:2px;width:4px;height:10px;position:absolute;bottom:4px;left:6px}.auth-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;height:100%;padding:2rem;display:flex}.auth-screen h2{font-size:1.4rem;font-weight:600}.auth-screen p{color:var(--text-secondary);max-width:300px}.auth-screen code{background:#ffffff14;border-radius:4px;padding:.15em .4em;font-size:.85em}@media (width>=768px){.vinyl-container{width:90vmin;height:90vmin;margin-left:-20vmin}}.turntable-2d-container{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.vinyl-shadow{filter:blur(20px);opacity:.5;background:#000;border-radius:50%;width:95%;height:95%;position:absolute;transform:translateY(5%)}.vinyl-disc{border-radius:50%;width:90%;height:90%;position:relative;overflow:hidden;box-shadow:inset 0 0 10px #000c}.spinning{animation:1.8s linear infinite spin}.paused{animation:1.8s linear infinite paused spin}.spinning-label{animation:1.8s linear infinite spin-label}.paused-label{animation:1.8s linear infinite paused spin-label}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-label{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.vinyl-layer{border-radius:50%;width:100%;height:100%;position:absolute;top:0;left:0}.lighting-overlay{mix-blend-mode:hard-light;opacity:.9;background-position:50%;background-repeat:no-repeat;background-size:contain}.vinyl-center-label{border-radius:50%;justify-content:center;align-items:center;width:35%;height:35%;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 0 5px #00000080}.album-art{object-fit:cover;opacity:.9;width:100%;height:100%}.spindle-hole{background:#111;border-radius:50%;width:10px;height:10px;position:absolute;box-shadow:inset 0 2px 4px #000c}