@import url("/tokens.css?v=fe10c788362cbf6b");
:root{color-scheme:light;--e-bg:#fff;--e-ink:#08213c;--e-muted:#536579;--e-line:#d7dfe8;--e-soft:#f3f5f8;--e-positive:#087443;--e-warning:#896000;--e-danger:#a13026;--e-accent:#f7b718}
:root[data-theme=dark]{color-scheme:dark;--e-bg:#081e35;--e-ink:#f4f7fb;--e-muted:#b6c6d9;--e-line:#294057;--e-soft:#102942;--e-positive:#7bdeb0;--e-warning:#f7cc69;--e-danger:#ffb5ae}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;height:100%;background:var(--e-bg);color:var(--e-ink)}body{font:14px/1.5 var(--bs-body)}main{height:100%;min-height:100%}button,input{font:inherit;touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}button,a,input{outline-offset:3px}*:focus-visible{outline:3px solid var(--e-warning)}a{color:inherit;text-underline-offset:3px}img,svg{display:block}svg{flex-shrink:0}p,h1{margin:0}button{min-height:44px}button svg{pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.player{display:flex;flex-direction:column;min-height:100%;width:100%;overflow:hidden;background:var(--e-bg);color:var(--e-ink);border:1px solid var(--e-line);border-radius:16px;position:relative}
.player-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--e-line);font-size:10px;line-height:1.5}.status{display:flex;align-items:center;gap:6px;color:var(--e-muted);font-size:10px;font-weight:650;min-width:0}.status:before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}.status[data-state=online]{color:var(--e-positive)}.status[data-state=degraded]{color:var(--e-warning)}.status[data-state=offline],.status[data-state=error]{color:var(--e-danger)}.test-label{white-space:nowrap;flex:none;color:var(--e-muted);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.player-content{padding:24px;display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;gap:20px}.player-track{display:flex;align-items:center;gap:16px;min-width:0}.cover{width:72px;height:72px;flex:none;display:grid;place-items:center;border-radius:12px;background:#04172d;border:1px solid #ffffff1c}.cover img{width:27px;height:38px}.track-copy{min-width:0;flex:1}.track-label{font-size:9px;line-height:1.5;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--e-muted);margin-bottom:6px}.track-title{font-family:var(--bs-display);font-size:18px;line-height:1.35;letter-spacing:-.025em;font-weight:800;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.track-artist{font-size:11px;color:var(--e-muted);margin-top:6px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.player-controls{display:flex;align-items:center;gap:13px;min-width:0}.play-button{display:grid;place-items:center;width:58px;height:58px;min-width:58px;border:0;border-radius:50%;background:var(--e-accent);color:#04172d;box-shadow:0 4px 16px #f7b71820}.play-button:hover:not(:disabled){background:#ffd15c}.play-button svg{width:25px;height:25px}.listen-copy{flex:1;min-width:0}.listen-copy strong{font-size:12px;font-weight:750;line-height:1.5;display:block}.listen-copy span{display:block;color:var(--e-muted);font-size:10px;margin-top:3px}.volume-control{display:flex;align-items:center;gap:5px}.volume-button{border:0;background:transparent;color:var(--e-muted);width:44px;height:44px;padding:0;display:grid;place-items:center;flex:none}.volume-control input{width:58px;height:44px;accent-color:var(--e-accent)}.player-message{font-size:11px;line-height:1.6;color:var(--e-muted);min-height:2em;overflow-wrap:anywhere}.player-message.error{color:var(--e-danger)}.wave{height:30px;display:flex;align-items:center;gap:4px;overflow:hidden;opacity:.7}.wave span{height:var(--height);min-width:2px;max-width:5px;flex:1;border-radius:3px;background:var(--e-line)}.wave span:nth-child(5n){background:var(--e-accent)}.player-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;font-size:10px;border-top:1px solid var(--e-line);background:var(--e-soft);color:var(--e-muted)}.player-footer a{display:inline-flex;align-items:center;gap:5px;min-height:28px;font-weight:650;text-decoration:none}.player-footer a:hover{text-decoration:underline}.model-art{display:none}
/* Compact: a horizontal card for sidebars and news columns. */
[data-variant=compact] .player-content{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:18px}.compact .player-track{min-width:0}[data-variant=compact] .cover{width:48px;height:48px;border-radius:9px}[data-variant=compact] .cover img{width:21px;height:29px}[data-variant=compact] .player-track{gap:11px}[data-variant=compact] .track-title{font-size:13px}[data-variant=compact] .track-label{font-size:8px;margin-bottom:4px}[data-variant=compact] .track-artist{font-size:10px;margin-top:4px}[data-variant=compact] .play-button{width:48px;height:48px;min-width:48px}[data-variant=compact] .listen-copy,[data-variant=compact] .volume-control,[data-variant=compact] .wave{display:none}[data-variant=compact] .player-message{grid-column:1/-1}[data-variant=compact] .player-footer{padding-block:7px}
/* Bar: a continuous horizontal rail with an accented left border. */
[data-variant=bar] .player{border-left:5px solid var(--e-accent);border-radius:4px 12px 12px 4px}[data-variant=bar] .player-content{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;padding:18px 22px}[data-variant=bar] .cover{display:none}[data-variant=bar] .track-title{font-size:16px}[data-variant=bar] .track-label{font-size:9px}[data-variant=bar] .player-controls{gap:10px}[data-variant=bar] .listen-copy{display:none}[data-variant=bar] .wave{display:none}[data-variant=bar] .player-message{grid-column:1/-1}[data-variant=bar] .player-head{padding-block:9px}[data-variant=bar] .player-footer{padding-block:6px}
/* Card: a centered brand cover, comfortable in a portal sidebar. */
[data-variant=card] .model-art{height:118px;flex:none;display:flex;align-items:center;justify-content:center;gap:16px;background:#04172d;position:relative;overflow:hidden;color:white}[data-variant=card] .model-art img{width:38px;height:53px;z-index:1}[data-variant=card] .art-wordmark{font-family:var(--bs-display);font-size:20px;font-weight:800;line-height:1.1;letter-spacing:-.04em;z-index:1}[data-variant=card] .art-wordmark strong{color:var(--e-accent);font-size:16px}[data-variant=card] .art-ring{position:absolute;right:-20px;top:-45px;width:220px;height:220px;border:1px solid #ffffff1a;border-radius:50%;box-shadow:0 0 0 35px #ffffff04,0 0 0 70px #ffffff03}[data-variant=card] .art-caption{display:none}[data-variant=card] .player-head{border:0}[data-variant=card] .player-content{align-items:center;text-align:center;gap:17px;padding:22px}[data-variant=card] .player-track{width:100%}[data-variant=card] .cover,[data-variant=card] .listen-copy,[data-variant=card] .wave{display:none}[data-variant=card] .player-controls{justify-content:center;position:relative;width:100%}[data-variant=card] .volume-control{position:absolute;right:0}[data-variant=card] .volume-control input{display:none}[data-variant=card] .track-title{font-size:18px}[data-variant=card] .player-message{min-height:2em}
/* Editorial: typography and a magazine-like vertical identity. */
[data-variant=editorial] .player{border-radius:0;border-top:4px solid var(--e-accent)}[data-variant=editorial] .player-head{border-bottom:0}[data-variant=editorial] .player-content{padding:24px;gap:24px}[data-variant=editorial] .player-track{align-items:flex-start;flex-direction:column;gap:18px}[data-variant=editorial] .cover{width:48px;height:48px;border-radius:0}[data-variant=editorial] .cover img{width:19px;height:27px}[data-variant=editorial] .track-label{font-size:10px;letter-spacing:.14em}[data-variant=editorial] .track-title{font-size:27px;letter-spacing:-.045em;line-height:1.2}[data-variant=editorial] .track-artist{margin-top:10px}[data-variant=editorial] .wave{display:none}[data-variant=editorial] .play-button{border-radius:6px;width:52px;height:52px;min-width:52px}[data-variant=editorial] .player-footer{background:transparent}
/* Mini: the smallest format, with a visible playback/error status. */
[data-variant=mini] .player{border-radius:18px 18px 14px 14px;border:0;background:var(--e-soft)}[data-variant=mini] .player-head{display:none}[data-variant=mini] .player-content{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding:18px 20px 10px}[data-variant=mini] .player-track{grid-column:2;grid-row:1}[data-variant=mini] .player-controls{grid-column:1;grid-row:1}[data-variant=mini] .cover,[data-variant=mini] .track-artist,[data-variant=mini] .listen-copy,[data-variant=mini] .volume-control,[data-variant=mini] .wave{display:none}[data-variant=mini] .track-title{font-size:12px}[data-variant=mini] .track-label{font-size:8px;margin-bottom:3px}[data-variant=mini] .play-button{width:48px;height:48px;min-width:48px}[data-variant=mini] .player-message{grid-column:1/-1;font-size:10px;text-align:center}[data-variant=mini] .player-footer{padding:3px 20px 9px;border:0;font-size:9px;background:transparent}
@media(max-width:420px){.player-content{padding:20px;gap:18px}.volume-control input{display:none}.cover{width:58px;height:58px}.track-title{font-size:16px}.listen-copy strong{font-size:11px}.listen-copy span{font-size:9px}.player-controls{gap:10px}[data-variant=compact] .player-content{padding:16px 14px}[data-variant=compact] .cover{display:none}[data-variant=bar] .player-content{grid-template-columns:minmax(0,1fr) auto;padding:18px 15px;gap:12px}[data-variant=bar] .volume-control{display:none}[data-variant=bar] .track-title{font-size:14px}[data-variant=editorial] .track-title{font-size:24px}[data-variant=editorial] .player-content{padding:22px}[data-variant=mini] .player-content{padding-inline:16px}[data-variant=mini] .player-footer{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
