*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0b0906;--bg2: #131008;--fg: #c9b89a;--fg-dim: #8a7a62;--fg-mute: #5a4e3a;--border: #2a2418;--accent: #a08060;--font: "IBM Plex Mono", "Courier New", monospace}html,body{background:var(--bg);color:var(--fg);font-family:var(--font);min-height:100vh;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;align-items:center;min-height:100vh}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 38%,#2a1e0e22 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 50% 38%,#3a2a1210 0%,transparent 60%);z-index:0}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");opacity:.035;z-index:0}.fp-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.25rem clamp(1rem,5vw,2.5rem);border-bottom:1px solid var(--border);position:relative;z-index:1}.fp-wordmark{font-size:clamp(10px,2.5vw,13px);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--fg)}.fp-drop-tag{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute)}.fp-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(2rem,6vw,4rem) 1.25rem;width:100%;position:relative;z-index:1}.fp-record-wrap{position:relative;width:clamp(260px,75vw,420px);height:clamp(260px,75vw,420px);cursor:pointer;margin-bottom:clamp(1.5rem,4vw,2.5rem);flex-shrink:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.fp-record-wrap:before{content:"";position:absolute;top:-18%;right:-18%;bottom:-18%;left:-18%;border-radius:50%;background:radial-gradient(ellipse at center,#3a2a1218 0%,transparent 70%);pointer-events:none;z-index:0}.fp-record-wrap svg{width:100%;height:100%;overflow:visible;position:relative;z-index:1}.fp-vinyl-group{transform-origin:140px 140px}.fp-vinyl-group.spinning{animation:fp-spin 2.8s linear infinite}@keyframes fp-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fp-meta{display:flex;align-items:center;gap:1.5rem;margin-bottom:clamp(.75rem,2vw,1.25rem);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute)}.fp-meta-divider{width:1px;height:10px;background:var(--border);flex-shrink:0}.fp-track-info{text-align:center;width:100%;max-width:clamp(260px,75vw,340px);margin-bottom:clamp(1rem,3vw,1.5rem)}.fp-track-title{font-size:clamp(13px,3.5vw,16px);font-weight:700;color:#d4c4a6;letter-spacing:.02em;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fp-track-artist{font-size:clamp(9px,2.2vw,11px);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim)}.fp-track-artist a{color:var(--accent);text-decoration:none;border-bottom:1px solid #4a3020;padding-bottom:1px;transition:color .2s}.fp-track-artist a:hover{color:#d4a070}.fp-progress-wrap{width:clamp(220px,68vw,290px);margin-bottom:clamp(1rem,3vw,1.5rem)}.fp-progress-bg{width:100%;height:2px;background:var(--bg2);border-radius:1px;cursor:pointer;position:relative}.fp-progress-fill{height:2px;border-radius:1px;width:0%;transition:width .4s linear;pointer-events:none;background:var(--accent)}.fp-time-row{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;color:var(--fg-mute);margin-top:5px}.fp-controls{display:flex;align-items:center;gap:clamp(20px,6vw,36px);margin-bottom:1rem}.fp-btn{background:none;border:none;cursor:pointer;color:var(--fg-dim);display:flex;align-items:center;justify-content:center;transition:color .18s;padding:8px;-webkit-tap-highlight-color:transparent}.fp-btn:hover{color:var(--fg)}.fp-btn-play{width:clamp(44px,11vw,52px);height:clamp(44px,11vw,52px);border-radius:50%;border:1px solid var(--border);background:var(--bg2);color:var(--fg)}.fp-btn-play:hover{border-color:var(--fg-dim);background:#1a1408}.fp-like-wrap{display:flex;align-items:center;gap:7px;margin-top:.25rem}.fp-btn-like{background:none;border:none;cursor:pointer;color:var(--fg-mute);display:flex;align-items:center;gap:6px;font-family:var(--font);font-size:9px;letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--fg-mute);border-radius:2px;transition:color .18s,border-color .18s;-webkit-tap-highlight-color:transparent}.fp-btn-like:hover{color:var(--fg-dim);border-color:var(--fg-dim)}.fp-btn-like.liked{color:var(--accent);border-color:var(--accent)}.fp-like-count{font-size:9px;letter-spacing:.15em;color:var(--fg-mute);min-width:16px}.fp-counter{font-size:9px;letter-spacing:.22em;color:var(--fg-mute);margin-top:1.25rem;display:flex;align-items:center;gap:8px}.fp-counter-dot{width:4px;height:4px;border-radius:50%;background:var(--fg-mute);display:inline-block}.fp-tracklist{width:100%;max-width:clamp(260px,75vw,340px);margin-top:clamp(1.5rem,4vw,2.5rem);border-top:1px solid var(--border);padding-top:1rem}.fp-tracklist-label{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:.75rem}.fp-tracklist-item{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:color .15s;-webkit-tap-highlight-color:transparent}.fp-tracklist-item:last-child{border-bottom:none}.fp-tracklist-item:hover .fp-tl-title,.fp-tracklist-item:hover .fp-tl-artist{color:var(--fg)}.fp-tracklist-item.active .fp-tl-num{color:var(--accent)}.fp-tracklist-item.active .fp-tl-title{color:var(--fg)}.fp-tl-num{font-size:9px;letter-spacing:.1em;color:var(--fg-mute);min-width:18px;flex-shrink:0}.fp-tl-title{font-size:11px;color:var(--fg-dim);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}.fp-tl-artist{font-size:9px;letter-spacing:.12em;color:var(--fg-mute);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;transition:color .15s;flex-shrink:0}.fp-tl-dur{font-size:9px;color:var(--fg-mute);flex-shrink:0;min-width:28px;text-align:right}.fp-footer{width:100%;text-align:center;padding:1.5rem;border-top:1px solid var(--border);font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-mute);position:relative;z-index:1}.fp-state{font-size:11px;letter-spacing:.2em;color:var(--fg-mute);text-align:center;padding:4rem 1rem;line-height:2}.fp-error{color:#7a3020}