:root {
  color-scheme:dark;
  font-family:-apple-system,"SF Pro Display",BlinkMacSystemFont,"Segoe UI",sans-serif;
  --red:#e3242f;
  --text:#f6f6f7;
  --muted:rgba(255,255,255,.49);
  background:#080809;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:radial-gradient(ellipse at 90% -15%,#48202220,transparent 55%),radial-gradient(ellipse at 5% 100%,#27313e16,transparent 55%),#080809; }
a,button { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
::selection { background:var(--red); color:white; }
.page { width:min(1400px,calc(100% - 64px),calc((100svh - 188px) * 16 / 9)); margin:0 auto; }
.glass { background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 70%); border:1px solid rgba(255,255,255,.11); box-shadow:inset 0 1px 0 rgba(255,255,255,.085),0 12px 32px #00000016; -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3); }
.masthead { display:flex; align-items:center; justify-content:space-between; height:94px; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:12px; color:inherit; text-decoration:none; border-radius:15px; }
.brand-icon { width:50px; height:50px; border-radius:0; padding:0; display:grid; place-items:center; }
.brand-icon img { display:block; width:50px; height:50px; object-fit:contain; filter:drop-shadow(0 3px 7px #e3242f28); }
.brand-name { display:block; line-height:1.2; }
.brand-name strong { display:block; font-size:15px; font-weight:560; letter-spacing:-.2px; }
.brand-name>span { display:block; margin-top:4px; color:rgba(255,255,255,.58); font-size:12px; font-weight:400; text-align:left; }
.clock { display:flex; align-items:center; gap:9px; height:38px; padding:0 14px; border-radius:30px; font-size:12px; }
.clock-city { color:rgba(255,255,255,.55); }
.clock time { font-variant-numeric:tabular-nums; font-weight:500; min-width:33px; }
.clock-dot { width:5px; height:5px; background:var(--red); border-radius:50%; box-shadow:0 0 10px #e3242f33; }
main { padding-bottom:22px; }
.player-card { margin:0; }
.video-frame { position:relative; width:100%; aspect-ratio:16 / 9; background:#030304; overflow:hidden; border-radius:12px; box-shadow:0 0 0 1px #ffffff07,0 24px 70px #0000002b; }
video { display:block; width:100%; height:100%; object-fit:contain; background:#030304; }
.standby { position:absolute; inset:0 0 50px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:23px; color:#a3a3ab; font-size:12px; font-weight:400; pointer-events:none; background:radial-gradient(ellipse at center,#1a101320,transparent 60%); }
.standby[hidden] { display:none; }
.standby img { width:68px; height:68px; object-fit:contain; border-radius:20px; box-shadow:0 8px 60px #e3242f0e; }
.player-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 19px; min-height:72px; margin-top:12px; border-radius:18px; }
.playback-status { display:flex; align-items:center; min-width:0; gap:11px; }
.playback-status strong { display:block; font-size:12px; font-weight:550; letter-spacing:.02em; }
.playback-status div>span { display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.4; }
.status-dot { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:#8e8e96; }
.status-dot[data-state="playing"] { background:var(--red); box-shadow:0 0 0 4px #e3242f0d; }
.status-dot[data-state="connecting"],.status-dot[data-state="buffering"] { background:#b9a283; }
.status-dot[data-state="error"] { background:#c07b7e; }
.actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:36px; padding:9px 12px; border:1px solid transparent; border-radius:11px; color:#f3f3f5; font-size:10px; font-weight:500; line-height:1; white-space:nowrap; cursor:pointer; transition:background .18s,border-color .18s,transform .18s; }
.button svg { display:block; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.button-primary { background:linear-gradient(160deg,#f1f1f11a,#ffffff0c); border-color:#ffffff1c; box-shadow:inset 0 1px 0 #ffffff10; }
.button-primary:hover { background:#ffffff20; border-color:#ffffff30; }
.button-quiet { background:transparent; color:#b3b3bc; }
.button-quiet:hover { background:#ffffff09; color:white; }
.button:active { transform:scale(.97); }
.button:focus-visible,.brand:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.button[disabled] { opacity:.42; cursor:default; }
.button[disabled]:active { transform:none; }
.sound-on { display:none; }
#sound-button[aria-pressed="true"] .sound-on { display:block; }
#sound-button[aria-pressed="true"] .sound-off { display:none; }
.notice { color:#ddbb95; font-size:13px; padding:16px; border:1px solid #765d3c; border-radius:12px; }
.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; }
@media (max-width:700px) {
  .page { width:calc(100% - 24px); }
  .masthead { height:88px; padding:0 3px; }
  .brand { gap:10px; }
  .brand-icon { width:44px; height:44px; border-radius:0; padding:0; }
  .brand-icon img { width:44px; height:44px; }
  .brand-name strong { font-size:14px; }
  .brand-name>span { font-size:11px; }
  .clock { height:35px; padding:0 12px; font-size:11px; gap:7px; }
  .video-frame { border-radius:9px; }
  .player-toolbar { flex-direction:column; align-items:stretch; gap:14px; margin-top:10px; padding:16px; border-radius:16px; }
  .playback-status strong { font-size:12px; }
  .playback-status div>span { font-size:11px; }
  .actions { gap:9px; }
  .button { flex:1; min-height:40px; font-size:11px; padding:10px 9px; }
  .button-quiet { border-color:#ffffff10; }
  .standby { inset:0 0 30px; gap:12px; font-size:11px; }
  .standby img { width:47px; height:47px; border-radius:14px; }
}
@media (max-height:600px) and (min-width:701px) { .page { width:min(1060px,calc(100% - 40px)); } .masthead { height:76px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }