:root{--text: #fff;--muted: rgba(255, 255, 255, .65);--line: rgba(255, 255, 255, .16);--panel: rgba(12, 12, 16, .5);--yellow: #ffc93c;--green: #1db954}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased}html,body{height:100%}body{min-height:100vh;min-height:100dvh;background:#12121a;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden;-webkit-tap-highlight-color:transparent}.scene{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat}.scene:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0a0a0e73,#0a0a0e1a 35%,#0a0a0ebf)}.header{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:18px 22px;padding-top:max(18px,env(safe-area-inset-top));padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));font-size:12.5px;color:var(--muted)}.meta{display:flex;align-items:center;gap:9px;min-width:0;font-variant-numeric:tabular-nums}.sawari{display:flex;align-items:center;gap:6px;color:var(--yellow);font-weight:600}.dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #ffc93c73}70%{box-shadow:0 0 0 7px #ffc93c00}to{box-shadow:0 0 #ffc93c00}}.sep{opacity:.4}.header-right{display:flex;align-items:center;gap:8px}.playlist-select{font-family:inherit;line-height:normal;vertical-align:middle;background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:11.5px;font-weight:600;padding:7px 12px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none}.spotify-link{display:inline-flex;align-items:center;gap:7px;color:var(--text);text-decoration:none;font-size:12.5px;font-weight:600;background:var(--panel);border:1px solid var(--line);padding:7px 13px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .15s,background .15s}.spotify-link:hover{border-color:#1db95499;background:#1db95429}.spotify-icon{width:14px;height:14px;fill:var(--green)}.widget{position:fixed;z-index:3;left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));max-width:460px;margin:0 auto}.yt-mount{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.playlist-select{display:block;margin-bottom:10px;background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none}.playlist-select:focus-visible{outline:2px solid rgba(29,185,84,.6);outline-offset:1px}.player{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:10px 16px 10px 10px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 50px #00000073}.disc-wrap{position:relative;width:56px;height:56px;flex:none}.disc{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#232430;box-shadow:0 2px 10px #0006;animation:spin 6s linear infinite;animation-play-state:paused}.disc.is-spinning{animation-play-state:running}.disc img{width:100%;height:100%;object-fit:cover}.disc-hole{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:#000000b3;border:2px solid rgba(255,255,255,.4);transform:translate(-50%,-50%);pointer-events:none}@keyframes spin{to{transform:rotate(360deg)}}.track-info{flex:1;min-width:0}.track-title{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}.seek{display:flex;align-items:center;height:10px;cursor:pointer}.seek-track{width:100%;height:3px;border-radius:999px;background:#fff3;overflow:hidden}.seek-fill{height:100%;background:var(--text);border-radius:999px}.seek-time{margin-top:3px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.controls{display:flex;align-items:center;gap:2px;flex:none}.controls button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--text);cursor:pointer;touch-action:manipulation;transition:background .15s,transform .1s}.controls button:hover:not(:disabled){background:#ffffff1f}.controls button:active:not(:disabled){transform:scale(.92)}.controls button:disabled{opacity:.35;cursor:default}.controls .play-btn{width:36px;height:36px;background:var(--text);color:#12121a}.controls .play-btn:hover:not(:disabled){background:var(--text);transform:scale(1.05)}@media (pointer: coarse){.controls button{width:38px;height:38px}.controls .play-btn{width:44px;height:44px}.seek{height:16px}}@media (max-width: 600px){.header{font-size:12px}.player{gap:12px;padding:9px 14px 9px 9px}}@media (max-width: 480px){.widget{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}.header{padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));row-gap:8px}.disc-wrap{width:48px;height:48px}.player{gap:10px;padding:8px 12px 8px 8px}.track-title{font-size:13px}}@media (max-width: 360px){.spotify-link span,.spotify-link{font-size:11.5px;padding:6px 10px}.meta{font-size:11.5px;gap:6px}.disc-wrap{width:42px;height:42px}.track-title{font-size:12.5px}.track-artist{font-size:11px}}@media (max-height: 420px){.header{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:10px}.widget{bottom:max(10px,env(safe-area-inset-bottom))}.disc-wrap{width:44px;height:44px}.player{padding:6px 12px 6px 6px}}@media (prefers-reduced-motion: reduce){.dot,.disc{animation:none}}
