*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Inter,system-ui,sans-serif;color:#f5f1e8;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.page{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;background-color:#0b0b0c;background-image:var(--bg-image);background-size:cover;background-repeat:no-repeat;background-position:center;overflow-x:hidden;overflow-y:auto}.tv-screen{position:absolute;z-index:0;overflow:hidden;pointer-events:none;transition:opacity .4s ease}.tv-screen-transform{position:absolute;left:0;top:0;transform-origin:0 0}.tv-screen-video{position:absolute;opacity:0;transition:opacity .5s ease}.tv-screen-video.is-visible{opacity:1;animation:tv-flicker 6.5s infinite,tv-glitch 9s infinite}@keyframes tv-flicker{0%,91%,to{filter:brightness(1)}92%{filter:brightness(.85)}93%{filter:brightness(1.05)}95%{filter:brightness(.92)}96%{filter:brightness(1)}}@keyframes tv-glitch{0%,95%,to{transform:translate(0)}95.5%{transform:translate(-2.5%)}96%{transform:translate(2%)}96.7%{transform:translate(-1%,.5%)}97.2%{transform:translate(0)}}.tv-bar{position:absolute;background:#000;z-index:4}.tv-bar-top,.tv-bar-bottom{left:0;right:0;height:9%}.tv-bar-top{top:0}.tv-bar-bottom{bottom:0}.tv-side-bars{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;opacity:0;transition:opacity .5s ease}.tv-side-bars.is-visible{opacity:1}.tv-bar-left,.tv-bar-right{top:0;bottom:0;width:4.5%}.tv-bar-left{left:0}.tv-bar-right{right:0}#yt-mount{width:100%;height:100%;display:block;pointer-events:none}.tv-screen-dim{position:absolute;pointer-events:none;opacity:0;transition:opacity .5s ease;background:#000}.tv-screen-dim.is-visible{opacity:.3}.tv-screen-grain{position:absolute;pointer-events:none;opacity:0;transition:opacity .5s ease;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:90px 90px}.tv-screen-grain.is-visible{opacity:.16}.tv-screen-scanlines{position:absolute;z-index:3;pointer-events:none;opacity:0;transition:opacity .5s ease;background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,.35) 0px,rgba(0,0,0,.35) 1px,transparent 1px,transparent 3px);animation:tv-scan-drift 7s linear infinite}.tv-screen-scanlines.is-visible{opacity:.35}@keyframes tv-scan-drift{0%{background-position:0 0}to{background-position:0 12px}}.grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:140px 140px}.topbar{position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:flex-end;padding:24px 28px 0}.yt-link{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:#00000059;border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f5f1e8;transition:background .2s ease,color .2s ease,transform .15s ease}.yt-link:hover{background:red;border-color:red;color:#fff;transform:scale(1.06)}.stage{--cassette-w: clamp(280px, 40vw, 340px);position:relative;z-index:1;flex:1;width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:clamp(10px,2.5vh,18px);padding:16px 20px 40px 28px}.cassette{width:100%;max-width:var(--cassette-w);aspect-ratio:5 / 3;padding:12px;border-radius:14px;background:#161616;border:3px solid rgba(242,181,68,.55);box-shadow:0 16px 36px #00000080;position:relative}.cassette:before,.cassette:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#8a8a8a;top:10px}.cassette:before{left:10px}.cassette:after{right:10px}.cassette-label{height:100%;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;background:#f0dfb4}.cassette-stripes{display:flex;flex-direction:column;height:16px;flex-shrink:0}.cassette-stripes span{flex:1}.cassette-stripes span:nth-child(1){background:#e8734a}.cassette-stripes span:nth-child(2){background:#f2b544}.cassette-stripes span:nth-child(3){background:#14b8a6}.cassette-text-row{padding:6px 10px 4px}.pill-title{font-family:Bebas Neue,Inter,sans-serif;font-size:1rem;letter-spacing:.03em;font-weight:400;color:#3f1d0a;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pill-artist{margin-top:2px;font-size:.66rem;letter-spacing:.02em;color:#0f766e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cassette-window{--cassette-window-thumb: none;flex:1;display:flex;align-items:center;justify-content:center;gap:26px;margin:0 10px;border-radius:8px;background-color:#1c1c1c;background-image:linear-gradient(#0a0a0a9e,#0a0a0a9e),var(--cassette-window-thumb);background-size:cover;background-position:center;transition:background-image .3s ease}.reel{position:relative;flex-shrink:0;width:46px;height:46px;border-radius:50%;background:#d8c79a;border:2px solid #3a3226;display:flex;align-items:center;justify-content:center}.reel-hub{position:relative;width:20px;height:20px;border-radius:50%;background:#3a3226;display:flex;align-items:center;justify-content:center}.reel-hub:before{content:"";width:3px;height:8px;border-radius:1px;background:#d8c79a}.reel-hub.spin{animation:spin 2.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tape-strip{flex-shrink:0;height:4px;margin:8px 10px 0;border-radius:2px;background:#00000026;cursor:pointer;overflow:hidden}.tape-fill{height:100%;background:#0f766e;border-radius:2px;transition:width .15s linear}.cassette-band{flex-shrink:0;margin-top:8px;display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#14b8a6}.pill-time{font-size:.68rem;font-variant-numeric:tabular-nums;color:#072a26}.cassette-brand{font-family:Bebas Neue,Inter,sans-serif;font-size:.9rem;letter-spacing:.06em;color:#f0dfb4}.mini-player{display:none;flex-direction:column;gap:4px;width:100%;max-width:var(--cassette-w);padding:6px 10px;border-radius:9px;background:#161616;border:1.5px solid rgba(242,181,68,.5)}.mini-player-title{font-family:Bebas Neue,Inter,sans-serif;font-size:.76rem;letter-spacing:.03em;color:#f0dfb4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-player-strip{height:3px;border-radius:2px;background:#ffffff26;cursor:pointer;overflow:hidden}.mini-player-fill{height:100%;background:#14b8a6;border-radius:2px;transition:width .15s linear}.mini-player-time{display:flex;align-items:center;justify-content:space-between;font-size:.55rem;font-variant-numeric:tabular-nums;color:#f0dfb499}.tape-controls{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,16px);width:100%;max-width:var(--cassette-w)}.tape-btn{display:flex;align-items:center;justify-content:center;width:48px;height:40px;border-radius:10px;background:#e8734a;border:3px solid #f2b544;color:#161616;box-shadow:0 6px 14px #0006;transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}.tape-btn:hover{background:#f2895f;border-color:#fbd777;transform:translateY(-2px) scale(1.04);box-shadow:0 10px 20px #00000073}.tape-btn:active{transform:translateY(1px) scale(1)}.tape-btn-main{width:62px;height:50px;border-radius:13px;background:#14b8a6;border:3px solid #f2b544;color:#072a26}.tape-btn-main:hover{background:#22d3bd;border-color:#fbd777}@media (max-height: 480px),(max-width: 360px){.topbar{padding:12px 20px 0}.stage{--cassette-w: clamp(220px, 50vw, 300px);padding:10px 20px 16px 22px;gap:10px}.cassette{display:none}.mini-player{display:flex}}.rotate-hint{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:#161616;color:#f0dfb4}.rotate-hint-icon{color:#14b8a6;animation:rotate-hint-turn 1.8s ease-in-out infinite}@keyframes rotate-hint-turn{0%,15%{transform:rotate(0)}45%,60%{transform:rotate(90deg)}90%,to{transform:rotate(0)}}.rotate-hint-text{font-family:Bebas Neue,Inter,sans-serif;font-size:1.3rem;letter-spacing:.03em}.rotate-hint-subtext{font-size:.85rem;color:#f0dfb499}@media (orientation: portrait) and (max-width: 1024px) and (hover: none){.rotate-hint{display:flex}}