:root { color-scheme: dark; font-family: Inter, "Segoe UI", Arial, sans-serif; background: #050a13; color: #f7f9ff; }
* { box-sizing: border-box; }
html, body, #stage { width: 100%; height: 100%; margin: 0; overflow: hidden; }
#stage { position: fixed; inset: 0; z-index: 3; background: #000; }
.media-load-progress { position:fixed; z-index:20; left:50%; bottom:7vh; width:min(520px,86vw); transform:translateX(-50%); display:grid; gap:10px; padding:14px 18px; border:1px solid #ffffff38; border-radius:12px; background:#0b1424e8; color:#fff; box-shadow:0 14px 45px #0008; font:500 14px/1.4 system-ui,sans-serif; }
.media-load-progress[hidden] { display:none; }
.media-load-progress strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-load-progress > div { display:grid; grid-template-columns:minmax(0,1fr) 52px; align-items:center; gap:12px; }
.media-load-progress progress { width:100%; height:8px; accent-color:#ef2340; }
.media-load-progress span { text-align:right; font-variant-numeric:tabular-nums; font-size:12px; color:#dbe5f2; }
.fullscreen-button { position: fixed; z-index: 30; right: clamp(22px, 3vw, 58px); top: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 13px 17px; border: 1px solid rgba(130,161,207,.52); border-radius: 11px; color: #fff; background: rgba(7,15,29,.68); font: 700 14px/1 Inter,Arial,sans-serif; cursor: pointer; backdrop-filter: blur(12px); }.fullscreen-button:hover,.fullscreen-button:focus { border-color:#ef2448; background:#ec173c; outline:2px solid rgba(255,255,255,.5); outline-offset:2px; }.fullscreen-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.audio-button { position:fixed; z-index:30; left:clamp(16px,2vw,34px); bottom:clamp(16px,2vw,34px); width:46px; height:46px; display:grid; place-items:center; padding:0; border:1px solid rgba(130,161,207,.65); border-radius:12px; color:#fff; background:rgba(7,15,29,.88); cursor:pointer; backdrop-filter:blur(12px); transition:background .16s,border-color .16s,transform .16s; }.audio-button[hidden] { display:none; }.audio-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.audio-button.is-muted { border-color:rgba(255,190,90,.72); color:#ffd27a; }.audio-muted-mark { display:none; }.audio-button.is-muted .audio-waves { display:none; }.audio-button.is-muted .audio-muted-mark { display:block; }.audio-button.needs-gesture { border-color:#25c68a; color:#79f0c1; background:rgba(4,80,56,.9); box-shadow:0 0 0 3px rgba(37,198,138,.2); }.audio-button:hover,.audio-button:focus-visible { border-color:#ed1941; color:#fff; background:#a91030; outline:2px solid rgba(255,255,255,.72); outline-offset:2px; transform:translateY(-1px); }
body.playing .audio-button { opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .18s,transform .18s; } body.playing.controls-visible .audio-button,body.playing .audio-button.needs-gesture,body.playing .audio-button:focus-visible { opacity:.92; pointer-events:auto; transform:none; }
.runtime-download-button { position:fixed; z-index:30; right:clamp(22px,3vw,58px); top:78px; padding:10px 13px; border:1px solid rgba(252,53,82,.72); border-radius:9px; color:#fff; background:rgba(83,12,28,.73); font:700 12px/1 Inter,Arial,sans-serif; text-decoration:none; backdrop-filter:blur(12px); }.runtime-download-button:hover,.runtime-download-button:focus { background:#e8183d; outline:2px solid rgba(255,255,255,.5); outline-offset:2px; }
.runtime-download-dialog { width:min(680px,calc(100vw - 32px)); max-height:min(80vh,720px); padding:22px; border:1px solid rgba(130,161,207,.55); border-radius:16px; color:#f7f9ff; background:#0b1424; box-shadow:0 24px 70px #0009; }.runtime-download-dialog::backdrop { background:rgba(1,5,12,.76); backdrop-filter:blur(5px); }.runtime-download-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; }.runtime-download-dialog header span { color:#ff4968; font-size:11px; font-weight:800; letter-spacing:.14em; }.runtime-download-dialog h2 { margin:5px 0; font-size:23px; }.runtime-download-dialog p { color:#aebbd0; }.runtime-download-dialog header button { width:40px; height:40px; border:1px solid #394a64; border-radius:9px; color:#fff; background:#17243a; font-size:24px; cursor:pointer; }.runtime-download-list { display:grid; gap:10px; max-height:55vh; overflow:auto; }.runtime-download-list article { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; border:1px solid #263750; border-radius:10px; background:#101c2f; }.runtime-download-list article.is-compatible { border-color:#ed294d; }.runtime-download-list article strong,.runtime-download-list article small { display:block; }.runtime-download-list article small { margin-top:6px; color:#aab8cc; line-height:1.5; }.runtime-download-list article a { flex:none; padding:10px 13px; border:1px solid #ed294d; border-radius:8px; color:#fff; background:#b91434; text-decoration:none; font-size:12px; font-weight:800; }.runtime-download-list article a:hover,.runtime-download-list article a:focus-visible { background:#ed1941; outline:2px solid #fff; outline-offset:2px; }
.pairing { position:fixed; z-index:5; inset:0; min-height:0; height:100%; overflow:hidden; padding:86px clamp(30px,4.3vw,82px) 56px; background:radial-gradient(ellipse 60% 95% at 49% -10%,rgba(36,80,136,.68),transparent 55%),radial-gradient(ellipse 42% 50% at 80% 48%,rgba(151,10,35,.4),transparent 66%),linear-gradient(115deg,#050a12 0%,#081322 46%,#050913 100%); isolation:isolate; }.pairing::before { position:absolute; z-index:-1; inset:0; content:""; opacity:.72; background-image:radial-gradient(rgba(173,192,224,.45) 1px,transparent 1.5px),linear-gradient(145deg,transparent 57%,rgba(93,138,196,.14) 57.1%,transparent 57.4%),linear-gradient(35deg,transparent 73%,rgba(232,34,62,.2) 73.1%,transparent 73.5%); background-size:21px 21px,100% 100%,100% 100%; background-position:-11px 78px,0,0; mask-image:linear-gradient(90deg,#000 0 14%,transparent 34% 68%,#000 87%); }.pairing::after { position:absolute; z-index:-1; width:980px; height:980px; left:-410px; bottom:-670px; border:3px solid rgba(230,27,59,.8); border-radius:50%; content:""; box-shadow:0 0 95px rgba(225,25,62,.25); }
.player-brand { position:absolute; top:29px; left:clamp(30px,3.1vw,58px); display:inline-flex; align-items:center; gap:11px; letter-spacing:.08em; }.player-brand img { width:39px; height:39px; border-radius:9px; }.player-brand strong { font-size:27px; letter-spacing:.02em; }.player-brand span { margin-left:4px; color:#aab8ce; font-size:11px; font-weight:800; letter-spacing:.27em; }
.pairing-layout { width:min(1510px,100%); min-height:min(635px,calc(100vh - 164px)); margin:0 auto; display:grid; grid-template-columns:minmax(280px,.93fr) minmax(430px,530px) minmax(300px,.96fr); align-items:center; gap:clamp(38px,5vw,96px); }.intro-panel { padding-top:7px; }.eyebrow { margin:0; color:#f3294c; font-size:13px; font-weight:800; letter-spacing:.16em; }.intro-panel h1 { max-width:445px; margin:17px 0 13px; font-size:clamp(34px,3vw,51px); line-height:1.13; letter-spacing:-.025em; }.intro-panel h1 em { color:#ee2045; font-style:normal; }.intro-copy { max-width:435px; margin:0; color:#b6c0d1; font-size:16px; line-height:1.55; }.feature-list { display:grid; gap:28px; margin-top:40px; }.feature-list article { display:grid; grid-template-columns:64px 1fr; align-items:center; gap:19px; }.feature-icon { width:64px; height:62px; display:grid; place-items:center; border:1px solid rgba(234,44,72,.34); border-radius:13px; color:#ff4b68; background:linear-gradient(135deg,rgba(128,15,37,.7),rgba(49,8,20,.5)); box-shadow:inset 0 1px rgba(255,255,255,.08); }.feature-icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.feature-list strong { font-size:17px; }.feature-list p { margin:6px 0 0; color:#a9b5c8; font-size:15px; }
.pair-card { align-self:center; padding:25px 30px 27px; border:1px solid rgba(106,143,194,.54); border-radius:22px; text-align:center; background:linear-gradient(145deg,rgba(23,42,70,.89),rgba(11,18,32,.95) 58%,rgba(12,17,29,.9)); box-shadow:0 30px 65px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.055); }.pair-mark { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 15px; border-radius:10px; background:#ed1941; box-shadow:0 0 24px rgba(243,26,64,.68); }.pair-mark img { width:100%; height:100%; border-radius:10px; }.pair-card h2 { margin:7px 0 4px; font-size:23px; letter-spacing:-.01em; }.pair-card > p:not(.eyebrow):not(.code-label):not(.hint):not(.device-details) { min-height:21px; margin:0 0 13px; color:#b5c0d2; font-size:14px; }.qr-frame { position:relative; width:184px; height:184px; display:grid; place-items:center; margin:0 auto 8px; padding:12px; border-radius:15px; background:#fff; box-shadow:0 12px 24px rgba(0,0,0,.3); }.qr-frame::before,.qr-frame::after { position:absolute; width:24px; height:24px; content:""; border-color:#ec2147; border-style:solid; }.qr-frame::before { top:-10px; left:-10px; border-width:3px 0 0 3px; border-radius:10px 0 0; }.qr-frame::after { right:-10px; bottom:-10px; border-width:0 3px 3px 0; border-radius:0 0 10px; }.qr { width:100%; height:100%; }.code-label { margin:10px 0 5px; color:#bbc7dc; font-size:10px; font-weight:800; letter-spacing:.18em; }.pair-code { display:block; margin:0 0 13px; font:800 clamp(35px,3vw,46px)/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.14em; color:#fff; }.device-id { min-height:43px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; border:1px solid rgba(102,135,184,.42); border-radius:11px; background:rgba(11,24,45,.78); color:#c0cbdb; font-size:12px; text-align:left; }.device-id code { max-width:49%; color:#e4ebf8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:inherit; font-size:12px; }.device-details { min-height:18px; margin:8px 0 0; color:#b9c6d9; font-size:11px; }.hint { margin:12px 0 0; color:#aab6c8; font-size:11px; line-height:1.45; }
.showcase-panel { position:relative; min-height:530px; }.screen-scene { position:absolute; z-index:1; top:15px; right:12px; width:min(100%,412px); aspect-ratio:1.18; overflow:hidden; border:9px solid #030811; border-radius:4px; background:#1d365a; box-shadow:11px 11px 0 rgba(0,0,0,.35),0 22px 46px rgba(0,0,0,.45); }.screen-sky { position:absolute; inset:0; background:linear-gradient(150deg,#375a8d 0%,#7c93c7 36%,#ed8391 56%,#2a2e5e 100%); }.mountain { position:absolute; bottom:-13%; width:76%; height:68%; background:linear-gradient(148deg,#f4cada 0 19%,#6b759d 20% 41%,#253751 42%); clip-path:polygon(2% 100%,53% 0,100% 100%); }.mountain-a { left:-8%; }.mountain-b { right:-22%; bottom:-5%; width:86%; height:78%; filter:brightness(.7); }.now-playing,.playlist-card { position:absolute; z-index:2; right:-7px; width:min(305px,79%); border:1px solid rgba(121,151,194,.55); border-radius:13px; background:linear-gradient(145deg,rgba(22,35,57,.96),rgba(8,15,28,.96)); box-shadow:0 15px 32px rgba(0,0,0,.4); }.now-playing { top:244px; min-height:118px; padding:18px 15px; font-size:12px; }.live-dot { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#ff294a; vertical-align:1px; }.now-thumb { position:absolute; top:47px; left:16px; width:70px; height:48px; border-radius:5px; background:linear-gradient(150deg,#e58690,#4e70a2 42%,#202a54); }.now-meta { margin:35px 0 0 85px; }.now-meta span { display:block; width:65%; height:8px; border-radius:6px; background:rgba(255,255,255,.12); }.now-meta i { display:block; margin:8px 0 5px; color:#9eabc0; font-size:10px; text-align:right; font-style:normal; }.now-meta b { display:block; height:6px; border-radius:5px; background:linear-gradient(90deg,#ef1c42 38%,rgba(255,255,255,.16) 38%); }.playlist-card { top:372px; padding:17px 14px 12px; }.playlist-card > strong { font-size:12px; }.playlist-row { height:52px; display:grid; grid-template-columns:55px 1fr auto; align-items:center; gap:8px; color:#d6ddeb; font-size:10px; }.playlist-row i { height:36px; border-radius:5px; background:linear-gradient(140deg,#d68794,#647ca6 52%,#2a3157); }.playlist-row b { color:#a1adbf; font-size:9px; font-weight:500; }.playlist-row.active { margin:6px -4px 0; padding:0 4px; border:1px solid rgba(238,39,69,.55); border-radius:7px; }.pairing-footer { position:absolute; bottom:22px; left:0; right:0; color:#aab8cc; text-align:center; font-size:11px; font-weight:800; letter-spacing:.16em; }.pairing-footer span { margin-left:9px; font-weight:500; letter-spacing:.07em; }
.layer { position:absolute; overflow:hidden; }.layer > img,.layer > video,.layer > iframe { width:100%; height:100%; display:block; object-fit:contain; }.layer > iframe { border:0; background:#fff; }.layer > video { background:#000; }.text-layer { display:flex; align-items:center; white-space:pre-wrap; }.ticker-layer { display:flex; align-items:center; width:100%; height:100%; overflow:hidden; background:var(--ticker-bg,#000); color:var(--ticker-color,#fff); font-family:var(--ticker-font,Arial,sans-serif); }.ticker-layer.is-transparent { background:transparent; }.ticker-layer span { flex:0 0 max-content; padding-inline:7%; font-size:clamp(18px,var(--ticker-size,42px),220px); font-weight:900; line-height:1.12; text-shadow:0 2px 18px #0006; white-space:nowrap; animation:tickerScroll var(--ticker-speed,18s) linear var(--ticker-iterations,infinite) var(--ticker-direction,normal); animation-fill-mode:var(--ticker-fill,none); background:var(--ticker-gradient,none); background-clip:text; -webkit-background-clip:text; }.ticker-layer.has-gradient span { color:transparent; -webkit-text-fill-color:transparent; }.ticker-layer.is-static span { animation:none; transform:none; } @keyframes tickerScroll { from { transform:translateX(100%); } to { transform:translateX(-100%); } } .pair-code.device-code { max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:clamp(16px,2vw,24px); letter-spacing:.06em; } body.playing .pairing,body.playing .runtime-download-button { display:none; } body.playing .fullscreen-button { opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .18s,transform .18s; } body.playing.controls-visible .fullscreen-button,body.playing .fullscreen-button:focus-visible { opacity:.88; pointer-events:auto; transform:none; } :fullscreen .fullscreen-button { display:none !important; }
.screen-empty { position:absolute; inset:0; display:grid; place-items:center; color:#b8c5d9; background:linear-gradient(135deg,#15253f,#0a1221); font-size:14px; line-height:1.5; text-align:center; }.showcase-preview { width:100%; height:100%; display:grid; place-items:center; object-fit:cover; color:#c9d5e7; background:#101b2e; font-size:14px; font-weight:800; letter-spacing:.12em; }.now-meta { margin:18px 0 0; }.now-meta #showcaseTitle { width:100%; height:auto; overflow:hidden; border-radius:0; background:none; color:#e3eaf5; font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.now-meta i { text-align:left; }.showcase-rows > p { margin:15px 0 10px; color:#aab8cd; font-size:10px; line-height:1.5; }.media-kind { width:36px; height:36px; display:grid; place-items:center; border-radius:5px; color:#ff5570; background:linear-gradient(140deg,#4a1524,#182744); font-size:15px; font-weight:800; }.playlist-row { grid-template-columns:36px minmax(0,1fr) auto; }.playlist-row > span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1190px) { .pairing { padding-top:82px; }.pairing-layout { grid-template-columns:minmax(250px,.8fr) minmax(410px,500px); gap:45px; }.showcase-panel { display:none; } }
@media (min-width:1200px) and (min-height:700px) {
  .pairing { padding:7.5vh 4vw 5vh; }
  .pairing-layout { width:92vw; max-width:none; min-height:84vh; grid-template-columns:29% 38% 29%; gap:2%; }
  .intro-panel h1 { max-width:100%; font-size:clamp(38px,2.65vw,76px); }
  .intro-copy { max-width:100%; font-size:clamp(16px,.9vw,25px); }
  .feature-list { gap:2.5vh; margin-top:5vh; }
  .feature-list article { grid-template-columns:clamp(54px,3.4vw,92px) 1fr; gap:1vw; }
  .feature-icon { width:clamp(54px,3.4vw,92px); height:clamp(54px,3.4vw,92px); }
  .feature-icon svg { width:48%; height:48%; }
  .feature-list strong { font-size:clamp(16px,.95vw,27px); }
  .feature-list p { font-size:clamp(14px,.8vw,23px); }
  .pair-card { width:100%; padding:clamp(20px,2.2vh,48px) clamp(20px,2vw,48px); }
  .pair-mark { width:clamp(48px,3.3vw,88px); height:clamp(48px,3.3vw,88px); }
  .pair-mark svg { width:80%; }
  .pair-card h2 { font-size:clamp(20px,1.35vw,38px); }
  .pair-card > p:not(.eyebrow):not(.code-label):not(.hint):not(.device-details) { font-size:clamp(13px,.8vw,23px); }
  .qr-frame { width:clamp(160px,19vh,360px); height:clamp(160px,19vh,360px); padding:clamp(10px,.8vw,22px); }
  .pair-code { font-size:clamp(35px,2.5vw,68px); }
  .device-id { min-height:clamp(43px,4vh,78px); padding:1vh 1vw; font-size:clamp(12px,.72vw,20px); }
  .device-id code { font-size:clamp(12px,.72vw,20px); }
  .device-details,.hint { font-size:clamp(11px,.66vw,18px); }
  .showcase-panel { min-height:76vh; }
  .screen-scene { top:2%; right:0; width:100%; }
  .now-playing,.playlist-card { right:0; width:86%; }
  .now-playing { top:45%; min-height:0; padding:2.2vh 1.2vw; font-size:clamp(12px,.7vw,20px); }
  .playlist-card { top:69%; padding:1.6vh 1vw 1.2vh; }
  .playlist-card > strong { font-size:clamp(12px,.7vw,20px); }
  .playlist-row { height:clamp(44px,5vh,92px); grid-template-columns:clamp(38px,2vw,64px) minmax(0,1fr) auto; gap:.6vw; font-size:clamp(10px,.58vw,17px); }
  .playlist-row i { height:75%; }
  .playlist-row b { font-size:clamp(9px,.52vw,15px); }
  .pairing-footer { bottom:2vh; font-size:clamp(11px,.65vw,18px); }
}
@media (max-width:760px) { .pairing { min-height:100%; height:auto; overflow:auto; padding:90px 20px 70px; }.player-brand { left:20px; }.player-brand strong { font-size:23px; }.player-brand span { font-size:9px; }.fullscreen-button { right:18px; top:20px; padding:10px; }.fullscreen-button span { display:none; }.runtime-download-button { right:18px; top:66px; }.pairing-layout { min-height:auto; grid-template-columns:1fr; gap:30px; }.intro-panel { text-align:center; }.intro-panel h1,.intro-copy { margin-left:auto; margin-right:auto; }.feature-list { display:none; }.pair-card { width:min(100%,460px); justify-self:center; padding:24px 21px; }.pairing-footer { bottom:18px; } }