:root{--bg-deep:#150c09;--bg-shop:#2b1712;--amber:#daba8b;--amber-dim:#c09867;--rust:#a75136;--wood:#4d362e;--shell:#241811;--tape-brown:#5f624d;--text-soft:#ecdfc7}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}html,body{overflow:hidden}body{color:var(--text-soft);background:#150a08;font-family:Inter,sans-serif;position:relative}.app{flex-direction:column;justify-content:flex-end;align-items:center;height:100vh;padding:70px 16px 28px;display:flex}.bg-tint{z-index:-1;background:#0a050473;position:fixed;inset:0}.brand{color:var(--amber);letter-spacing:1px;text-shadow:0 2px #0006;margin-bottom:4px;font-family:"Baloo 2",sans-serif;font-size:clamp(28px,6vw,44px);font-weight:800}.start-overlay{z-index:10;width:100%;height:100%;color:var(--text-soft);cursor:pointer;background:#0a0504b8;border:none;flex-direction:column;justify-content:center;align-items:center;gap:14px;font-family:Inter,sans-serif;font-size:15px;display:flex;position:fixed;inset:0}.start-overlay-icon{background:var(--rust);color:#fff5e6;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-size:22px;display:flex}.player-bar{-webkit-backdrop-filter:blur(18px);background:#241811d1;border:1px solid #daba8b29;border-radius:22px;width:min(640px,94vw);padding:14px 16px 12px;box-shadow:0 20px 45px #00000080,inset 0 1px #ffffff0d}.player-top{align-items:center;gap:12px;display:flex}.player-cover-wrap{flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;display:flex;position:relative}.player-cover-ring{border:2px dashed var(--tape-brown);opacity:.7;border-radius:50%;position:absolute;inset:0}.player-cover-wrap.spin .player-cover-ring{animation:6s linear infinite spin}.player-cover{background:var(--wood) center/cover no-repeat;border:2px solid var(--amber);border-radius:50%;width:42px;height:42px;box-shadow:0 2px 8px #0006}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.player-info{flex:1;min-width:0}.player-title{color:var(--text-soft);white-space:nowrap;text-overflow:ellipsis;font-family:"Baloo 2",sans-serif;font-size:14px;font-weight:700;line-height:1.3;overflow:hidden}.player-meta{color:var(--amber-dim);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:11px;overflow:hidden}.player-controls{flex-shrink:0;align-items:center;gap:8px;display:flex}.player-controls button{width:34px;height:34px;color:var(--amber);cursor:pointer;background:linear-gradient(#3a1c14,#2b1712);border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;font-size:12px;transition:transform 80ms,background .15s;display:flex}.player-controls button:hover{background:linear-gradient(#4a2418,#3a1c14)}.player-controls button:active{transform:scale(.92)}.player-controls button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.player-controls .play-btn{background:linear-gradient(180deg, var(--rust), #8a3f28);color:#fff5e6;width:42px;height:42px;font-size:15px}.player-controls .play-btn:hover{background:linear-gradient(180deg, #c05f3d, var(--rust))}.player-progress-row{align-items:center;gap:8px;margin-top:10px;display:flex}.player-progress-row span{color:var(--amber-dim);min-width:30px;font-family:Space Mono,monospace;font-size:10px}.progress-track{cursor:pointer;background:#ffffff26;border-radius:3px;flex:1;height:5px;position:relative}.progress-fill{background:var(--amber);border-radius:2px;width:0%;height:100%;position:relative}.progress-fill:after{content:"";background:var(--amber);border-radius:50%;width:12px;height:12px;position:absolute;top:50%;right:-6px;transform:translateY(-50%);box-shadow:0 1px 4px #00000080}.topbar{z-index:5;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px;display:flex;position:fixed;top:0;left:0;right:0}.pill-group{flex-wrap:wrap;gap:8px;display:flex}.pill{-webkit-backdrop-filter:blur(14px);color:var(--text-soft);background:#150c088c;border:1px solid #ffffff24;border-radius:999px;align-items:center;gap:7px;padding:7px 13px;font-size:12px;display:flex}.pill.link{cursor:pointer;text-decoration:none;transition:background .15s}.pill.link:hover{background:#281610bf}.pill .dot{background:#6ee787;border-radius:50%;flex-shrink:0;width:7px;height:7px;box-shadow:0 0 6px #6ee787}@media (height<=600px){.app{padding:60px 16px 14px}}@media (prefers-reduced-motion:reduce){.player-cover-wrap.spin .player-cover-ring{animation:none}}