/* Sonement for Apple TV — screen replica in tvOS points (1920 × 1080),
 * measured from reference/app-screens/2026-09-23/tv/*.png (@2x) and
 * spec/tv-app-spec-2026-09-23.md. The stage scales as one unit (--tv-k). */
.tv{ position:absolute; inset:0; overflow:hidden; background:#000; color:#fff; outline:none; --tv-k:.3;
  --ff:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  font-family:var(--ff); -webkit-font-smoothing:antialiased; user-select:none; -webkit-user-select:none; line-height:1.2; letter-spacing:normal; text-align:left; text-transform:none; }
.tv, .tv *{ box-sizing:border-box; }
.tv :where(section, h1, h2, p){ margin:0; padding:0; max-width:none; }
.tv :where(button){ font:inherit; color:inherit; border:0; background:none; padding:0; margin:0; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; }
.tv :where(svg){ display:block; flex:none; }
.tv [hidden]{ display:none !important; }
.tv-stage{ position:absolute; left:50%; top:50%; width:1920px; height:1080px; margin:-540px 0 0 -960px; transform:scale(var(--tv-k)); overflow:hidden; }

/* Ambient canvas: mesh gradient, the current art blurred at 28%, vignette. */
.tv-bg{ position:absolute; inset:0; background:
  radial-gradient(90% 80% at 12% 8%, rgb(12,17,26) 0%, rgba(8,11,17,.6) 45%, transparent 75%),
  linear-gradient(160deg, rgb(12,17,26) 0%, rgb(6,8,12) 40%, rgb(3,4,6) 75%, #000 100%); }
.tv-bg-art{ position:absolute; left:-11%; top:-11%; width:122%; height:122%; background:center/cover no-repeat; filter:blur(150px) saturate(.78); opacity:.28; transition:opacity .5s ease; }
.tv-bg-vig{ position:absolute; inset:0; background:radial-gradient(circle at 34% 26%, transparent 5%, rgba(0,0,0,.16) 40%, rgba(0,0,0,.68) 92%); }

/* Glass controls (.buttonStyle(.glass)) — resting translucent platter,
 * focused: light fill, dark text, lifted. */
.tv-g{ position:relative; background:rgba(255,255,255,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.15), background-color .18s ease, color .18s ease, box-shadow .22s ease; }
.tv-g.is-f{ background:rgba(236,236,238,.96); color:#111; transform:scale(1.04); box-shadow:0 18px 40px -10px rgba(0,0,0,.55); z-index:2; }
.tv-g.prom{ background:#fff; color:#000; }
.tv-g.prom.is-f{ background:#fff; }
.tv-g.is-p{ transform:scale(.97); transition-duration:.08s; }
.tv-g[disabled]{ opacity:.5; }
.tv .tvpill{ height:64px; border-radius:32px; padding:0 31px; display:inline-flex; align-items:center; gap:14px; font-size:29px; font-weight:500; white-space:nowrap; }
.tv .tvpill svg{ width:30px; height:30px; }

/* ---- tab bar ---- */
.tv-tbar{ position:absolute; left:50%; top:46px; transform:translateX(-50%); z-index:5; height:67px; padding:4px 5px; border-radius:34px; display:flex; gap:0;
  background:rgba(255,255,255,.075); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px); transition:opacity .25s ease; }
.tv-tb{ height:59px; border-radius:30px; padding:0 34px 0 31px; display:flex; align-items:center; gap:13px; font-size:26px; font-weight:600; color:#fff; white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, transform .22s cubic-bezier(.2,.9,.3,1.2); }
.tv-tb .ic svg{ width:34px; height:34px; }
.tv-tb.sel{ background:rgba(255,255,255,.15); }
.tv-tb.is-f{ background:#fff; color:#000; --tv-cut:#fff; transform:scale(1.03); }
.tv.covered .tv-tbar{ opacity:0; pointer-events:none; }

/* ---- screens ---- */
.tv-screens{ position:absolute; inset:0; }
.tv-scr{ position:absolute; inset:0; visibility:hidden; }
.tv-scr.on{ visibility:visible; animation:tv-fade .28s ease; }
.tv-scroll{ overflow-y:auto; overflow-x:hidden; scrollbar-width:none; overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image:linear-gradient(transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
.tv-scroll::-webkit-scrollbar, .tv-shelf::-webkit-scrollbar{ display:none; }
.tv-page{ padding:0 160px 120px; }
.tv h1{ font-size:68px; font-weight:700; line-height:82px; letter-spacing:.2px; }
.tv h2{ font-size:57px; font-weight:700; line-height:68px; }
.tv.covered .tv-screens{ opacity:0; transition:opacity .25s ease; }

/* ---- Now Playing ---- */
.tvnp-art{ position:absolute; left:174px; top:248px; width:680px; height:680px; border-radius:22px; overflow:hidden; background:#1e2024; box-shadow:0 24px 50px rgba(0,0,0,.55); }
.tvnp-art i{ position:absolute; inset:0; background:center/cover no-repeat; }
.tvnp-art i.in{ animation:tv-fade .25s ease-out; }
.tvnp-art.empty::after{ content:"♪"; position:absolute; inset:0; display:grid; place-items:center; font-size:150px; color:rgba(255,255,255,.55); }
@keyframes tv-fade{ from{ opacity:0 } }
.tvnp-rail{ position:absolute; left:926px; top:0; width:820px; height:1080px; }
.tvnp-title, .tvnp-sub{ position:absolute; left:0; width:820px; }
.tvnp-title{ top:196px; font-size:56px; font-weight:700; }
.tvnp-title.none{ color:rgba(255,255,255,.65); }
.tvnp-sub{ top:283px; font-size:36px; font-weight:500; color:rgba(255,255,255,.65); }
.mq{ position:relative; overflow:hidden; white-space:nowrap; line-height:1.3; }
.mq span{ display:inline-block; }
.mq.run{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.tvnp-next{ position:absolute; left:0; top:355px; width:680px; height:92px; padding:10px; border-radius:20px; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.075); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); transition:background-color .18s ease, color .18s ease; }
.tvnp-next .th{ width:72px; height:72px; border-radius:10px; flex:none; background:#2a2c30 center/cover; }
.tvnp-next .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tvnp-next b{ font-size:27px; font-weight:600; line-height:1.1; }
.tvnp-next .tx span{ font-size:29px; font-weight:500; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tvnp-next .cv svg{ width:18px; height:18px; margin-right:6px; }
.tvnp-next.is-f{ background:#fff; color:#000; }
.tvnp-seek{ position:absolute; left:0; top:470px; width:820px; height:76px; padding:0 22px; display:flex; align-items:center; gap:20px; font-size:29px; font-weight:500; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.65); }
.tvnp-seek > span:first-child{ width:92px; } .tvnp-seek > span:last-child{ width:104px; text-align:right; }
.tvnp-seek .tr, .tvnp-vol .tr{ flex:1; position:relative; height:9px; border-radius:5px; background:rgba(255,255,255,.18); overflow:hidden; cursor:pointer; }
.tvnp-seek .tr i, .tvnp-vol .tr i{ position:absolute; left:0; top:0; bottom:0; border-radius:inherit; background:#fff; transition:width .3s linear; }
.tvnp-tp{ position:absolute; left:0; top:0; width:820px; height:1080px; pointer-events:none; transition:opacity .2s; }
.tvnp-tp.off{ opacity:.45; }
.tp{ position:absolute; pointer-events:auto; display:grid; place-items:center; border-radius:16px; color:#fff; background:rgba(255,255,255,.025);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), background-color .15s ease, color .15s ease, box-shadow .2s ease; }
.tp.sm{ width:68px; height:68px; top:580px; } .tp.sm svg{ width:32px; height:32px; }
.tp.md{ width:80px; height:80px; top:574px; } .tp.md svg{ width:46px; height:32px; }
.tp[data-shuffle]{ left:0; } .tp[data-skip="-1"]{ left:98px; } .tp[data-skip="1"]{ left:402px; } .tp[data-repeat]{ left:514px; }
.tp.sm:not(.on){ color:rgba(255,255,255,.45); }
.tp.on{ background:rgba(255,255,255,.92); color:#000; border-radius:50%; }
.tp.dim{ color:rgba(255,255,255,.45); background:none; }
.tp.pp{ left:250px; top:574px; width:80px; height:80px; border-radius:50%; background:#fff; color:#000; box-shadow:0 10px 30px -8px rgba(0,0,0,.5); }
.tp.pp svg{ width:38px; height:38px; }
.tp.is-f{ background:rgba(255,255,255,.95); color:#000; transform:scale(1.12); box-shadow:0 16px 36px -10px rgba(0,0,0,.6); z-index:2; }
.tp.pp.is-f{ transform:scale(1.14); }
.tp.is-p{ transform:scale(.94); transition-duration:.08s; }
.tvnp-grp{ position:absolute; left:0; top:684px; width:820px; display:flex; justify-content:space-between; }
.tvnp-grp .tvpill{ padding:0 54px 0 56px; gap:16px; font-weight:600; }
.tvnp-grp .tvpill svg{ width:36px; height:32px; }
.tvnp-vh{ position:absolute; left:0; top:770px; font-size:30px; font-weight:700; line-height:40px; }
.tvnp-vol{ position:absolute; left:0; top:816px; width:820px; height:72px; display:flex; align-items:center; gap:18px; }
.tvnp-vol .tr{ height:10px; }
.tvnp-vol .vn{ width:72px; text-align:center; font-size:29px; font-weight:500; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.65); }
.tvnp-vol .stp{ width:116px; height:51px; border-radius:26px; display:flex; align-items:center; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); color:rgba(255,255,255,.65);
  transition:transform .16s ease-out, background-color .16s ease-out, color .16s ease-out; }
.tvnp-vol .stp span{ flex:1; height:100%; display:grid; place-items:center; cursor:pointer; }
.tvnp-vol .stp svg{ width:24px; height:24px; }
.tvnp-vol .stp em{ width:1px; height:26px; background:rgba(255,255,255,.18); }
.tvnp-vol.is-f .stp{ background:#fff; color:rgba(0,0,0,.72); box-shadow:none; transform:scale(1.06); }
.tvnp-vol.is-f .stp em{ background:rgba(0,0,0,.16); }
.tvnp-vst{ position:absolute; left:0; top:913px; }

/* ---- mini-player chip ---- */
.tv-chip{ position:absolute; right:161px; bottom:115px; z-index:6; width:378px; height:123px; border-radius:62px; padding:0 30px 0 45px; display:flex; align-items:center; gap:14px;
  opacity:0; transform:scale(.94); pointer-events:none; transition:opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1.1), background-color .18s, color .18s; }
.tv-chip.show{ opacity:1; transform:none; pointer-events:auto; }
.tv-chip.show.is-f{ transform:scale(1.04); }
.tv-chip .art{ width:44px; height:44px; border-radius:10px; background:#333 center/cover; flex:none; }
.tv-chip .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tv-chip b{ font-size:31px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.tv-chip small{ font-size:31px; color:rgba(255,255,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.tv-chip.is-f small{ color:rgba(0,0,0,.7); }
.tv-chip .gl{ color:rgba(255,255,255,.65); } .tv-chip.is-f .gl{ color:rgba(0,0,0,.7); }
.tv-chip .gl svg{ width:26px; height:30px; }

/* waveform (.symbolEffect(.variableColor.iterative)) */
.live svg rect{ animation:tv-wv 1.2s ease-in-out infinite; }
.live svg .b2{ animation-delay:.15s } .live svg .b3{ animation-delay:.3s } .live svg .b4{ animation-delay:.45s } .live svg .b5{ animation-delay:.6s } .live svg .b6{ animation-delay:.75s }
@keyframes tv-wv{ 0%,100%{ opacity:.35 } 30%{ opacity:1 } }

/* ---- Rooms ---- */
.tv-scr[data-s="1"] .tv-page{ padding-top:236px; }
.rm-head{ display:flex; align-items:center; gap:61px; height:82px; margin-bottom:31px; }
.rm-head .sp{ flex:1; margin-left:-61px; }
.rm-head .tvpill{ padding:0 31px 0 33px; }
.rm-head .tvpill svg{ width:32px; height:32px; }
.rm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; }
.rc, .sv-row, .g-row, .se-row{ background:rgba(255,255,255,.215); }
.rc{ position:relative; min-height:185px; border-radius:16px; padding:34px 40px 34px 49px; display:flex; align-items:center; gap:20px; }
.rc.three{ min-height:210px; }
.rc .art{ width:116px; height:116px; border-radius:10px; flex:none; background:#2b2d31 center/cover; display:grid; place-items:center; font-size:44px; font-weight:600; color:rgba(255,255,255,.55); }
.rc .art.prod{ background:rgba(255,255,255,.08); padding:20px; }
.rc .art.prod img{ max-width:100%; max-height:100%; object-fit:contain; }
.rc .art.ph{ background:hsl(80 40% 30%); }
.rc .ck{ position:absolute; left:55px; margin-top:-86px; width:22px; height:22px; }
.rc .ck svg{ width:22px; height:22px; }
.rc .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.rc b{ font-size:48px; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc .l2, .rc .l3{ font-size:31px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc .l2{ color:rgba(255,255,255,.65); } .rc .l3, .rc .l2.off{ color:rgba(255,255,255,.5); }
.rc.is-f{ transform:scale(1.025); }
.rc.is-f .l2{ color:rgba(0,0,0,.7); } .rc.is-f .l3, .rc.is-f .l2.off{ color:rgba(0,0,0,.55); }
.rc .wv{ color:rgba(255,255,255,.65); } .rc .wv svg{ width:48px; height:44px; }
.rc.is-f .wv{ color:rgba(0,0,0,.6); }

/* ---- Music ---- */
.tv-chips{ position:absolute; left:160px; top:178px; z-index:3; display:flex; gap:24px; }
.tv-chips .tvpill{ padding:0 30px; gap:0; }
.tv-chips .tvpill svg{ width:30px; height:30px; margin-left:62px; }
.tv-music{ position:absolute; inset:0; }
.tv-music > .tv-scroll{ position:absolute; inset:262px 0 0; padding:63px 160px 140px; }
.mu-home h1{ margin-bottom:31px; }
.mu-lib h2{ margin-bottom:24px; }
.mu-libchips{ display:flex; gap:24px; }
.mu-shelf{ margin-top:49px; }
.mu-sh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:50px; }
.tv-shelf{ display:flex; gap:40px; overflow-x:auto; overflow-y:visible; padding:24px 160px 34px; margin:-24px -160px -34px; scrollbar-width:none; }
.tv-tile{ position:relative; width:280px; flex:none; display:flex; flex-direction:column; gap:12px; }
.tv-tile .art{ position:relative; width:280px; height:280px; border-radius:14px; background:#26282c center/cover; transition:transform .16s cubic-bezier(.3,.7,.3,1), box-shadow .16s ease; }
.tv-tile .art::after{ content:""; position:absolute; inset:-12px; border-radius:24px; border:4px solid rgba(255,255,255,.95); opacity:0; transition:opacity .16s ease; }
.tv-tile .tt{ font-size:40px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:transform .16s cubic-bezier(.3,.7,.3,1); }
.tv-tile .ts{ font-size:31px; color:rgba(255,255,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:-8px; }
.tv-tile.is-f{ z-index:2; }
.tv-tile.is-f .art{ transform:scale(1.045); box-shadow:0 12px 20px rgba(0,0,0,.55); }
.tv-tile.is-f .art::after{ opacity:1; }
.tv-tile.is-f .tt{ transform:translateY(8px); }
.tv-tile.is-p .art{ opacity:.82; }
.mu-page{ animation:tv-arrive .22s cubic-bezier(.23,1,.32,1); transform-origin:28% 22%; }
@keyframes tv-arrive{ from{ opacity:.9; transform:translateX(14px) scale(.992); } }
.mu-back{ margin-bottom:24px; } .mu-back .tvpill{ width:64px; padding:0; justify-content:center; } .mu-back svg{ width:26px; height:26px; }
.mu-page h1{ margin-bottom:40px; }
.mu-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:44px 40px; }
.mu-grid .tv-tile, .mu-grid .tv-tile .art{ width:100%; } .mu-grid .tv-tile .art{ height:auto; aspect-ratio:1; }
.mu-note{ font-size:36px; color:rgba(255,255,255,.65); max-width:1200px; margin:24px 0 40px; line-height:1.3; }

/* ---- Search ---- */
.se-top{ position:absolute; left:0; right:0; top:136px; z-index:3; }
.se-field{ position:relative; margin-left:104px; height:110px; display:flex; align-items:center; gap:38px; font-size:56px; font-weight:700; }
.se-field svg{ width:56px; height:56px; color:rgba(255,255,255,.7); }
.se-field .ph{ color:rgba(255,255,255,.35); }
.se-field .q::after{ content:""; display:inline-block; width:4px; height:56px; margin-left:6px; vertical-align:-8px; background:#fff; animation:tv-caret 1s steps(1) infinite; }
.se-field .q:empty::after{ display:none; }
@keyframes tv-caret{ 50%{ opacity:0 } }
.se-keys{ position:relative; margin:12px 84px 0; display:flex; align-items:center; justify-content:space-between; padding:0 32px 40px; border-bottom:1px solid rgba(255,255,255,.12); }
.se-keys .k{ min-width:38px; height:58px; display:grid; place-items:center; border-radius:10px; font-size:44px; color:rgba(255,255,255,.72); transition:transform .15s cubic-bezier(.2,.9,.3,1.3), background-color .12s, color .12s; }
.se-keys .k.w{ min-width:0; height:38px; padding:0 16px; font-size:19px; font-weight:500; background:rgba(255,255,255,.6); color:#1c1d20; border-radius:6px; }
.se-keys .k.del{ background:none; } .se-keys .k.del svg{ width:44px; height:34px; color:rgba(255,255,255,.72); }
.se-keys .k.is-f{ background:#fff; color:#000; transform:scale(1.35); z-index:2; box-shadow:0 8px 20px rgba(0,0,0,.4); }
.se-keys .k.del.is-f svg{ color:#000; }
.se-keys .k.is-p{ transform:scale(1.15); }
.tv-scr[data-s="3"]{ overflow:hidden; }
.se-body{ position:absolute; inset:380px 0 0; overflow-y:auto; scrollbar-width:none; padding-top:148px; }
.se-body::-webkit-scrollbar{ display:none; }
.se-lede{ font-size:48px; color:rgba(255,255,255,.65); margin-top:22px !important; }
.se-prompt{ text-align:center; font-size:31px; color:rgba(255,255,255,.5); margin-top:112px !important; }
.se-count{ font-size:31px; color:rgba(255,255,255,.5); margin:30px 0 10px !important; }
.se-empty{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:60px; }
.se-empty svg{ width:64px; height:64px; color:rgba(255,255,255,.65); margin-bottom:14px; }
.se-empty b{ font-size:34px; } .se-empty span{ font-size:26px; color:rgba(255,255,255,.65); }
.se-sec{ margin-top:30px; } .se-sec h2{ margin-bottom:16px; }
.se-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.se-row{ display:flex; align-items:center; gap:20px; padding:18px 24px; border-radius:16px; min-width:0; }
.se-row .art{ width:96px; height:96px; border-radius:10px; flex:none; background:#2b2d31 center/cover; }
.se-row .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.se-row b{ font-size:48px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.se-row .tx span, .se-row .bd{ font-size:31px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.se-row .tx span{ color:rgba(255,255,255,.65); } .se-row .bd{ color:rgba(255,255,255,.5); flex:none; }
.se-row .pc svg{ width:44px; height:44px; color:rgba(255,255,255,.65); }
.se-row.ref{ opacity:.75; }
.se-row.is-f .tx span, .se-row.is-f .pc svg{ color:rgba(0,0,0,.7); } .se-row.is-f .bd{ color:rgba(0,0,0,.55); }

/* ---- Services ---- */
.tv-scr[data-s="4"] .tv-page{ padding-top:179px; }
.sv-lede{ font-size:48px; color:rgba(255,255,255,.65); margin:24px 0 30px !important; }
.sv-pair.is-f{ transform:scale(1.008); }
.sv-pair{ width:100%; height:164px; border-radius:16px; display:flex; align-items:center; gap:10px; padding:0 40px; }
.sv-pair svg{ width:92px; height:66px; }
.sv-pair .tx{ display:flex; flex-direction:column; gap:6px; }
.sv-pair b{ font-size:48px; font-weight:500; }
.sv-pair .tx span{ font-size:31px; color:rgba(255,255,255,.5); }
.sv-pair.is-f .tx span{ color:rgba(0,0,0,.5); }
.sv h2{ margin:34px 0 20px; color:rgba(255,255,255,.72); }
.sv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 22px; }
.sv-row{ height:164px; border-radius:16px; display:flex; align-items:center; gap:20px; padding:0 54px; }
.sv-row .ic{ width:64px; height:64px; border-radius:10px; flex:none; display:grid; place-items:center; font-size:32px; font-weight:600; color:#fff; }
.sv-row .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sv-row b{ font-size:48px; font-weight:500; } .sv-row .tx span{ font-size:31px; color:rgba(255,255,255,.5); }
.sv-row .tr svg{ width:40px; height:40px; color:rgba(255,255,255,.65); }
.sv-row.is-f{ transform:scale(1.025); } .sv-row.is-f .tx span{ color:rgba(0,0,0,.55); } .sv-row.is-f .tr svg{ color:rgba(0,0,0,.6); }

/* ---- full-screen covers ---- */
.tv-cover{ position:absolute; inset:0; z-index:8; visibility:hidden; }
.tv-cover.on{ visibility:visible; animation:tv-cover-in .35s cubic-bezier(.2,.9,.3,1); }
@keyframes tv-cover-in{ from{ opacity:0; transform:scale(1.02); } }
.tv-cover > div{ position:absolute; inset:0; padding:0 160px 100px; }
.cv-head{ display:flex; align-items:center; gap:57px; }
.cv-head .sp{ flex:1; margin-left:-57px; }
.cv-head .tvpill{ height:72px; border-radius:36px; padding:0 33px; }
.cv-head .tvpill.wide svg{ width:34px; height:34px; }
.cv-q{ padding-top:180px !important; }
.cv-q .cv-head{ margin-bottom:37px; }
.cv-q .q-shelf{ gap:24px; padding:12px 160px 40px; margin:0 -160px; }
.cv-q .tv-tile{ width:220px; }
.cv-q .tv-tile .art{ width:220px; height:220px; box-shadow:0 8px 16px rgba(0,0,0,.4); }
.cv-q .tv-tile .tt{ font-size:31px; }
.cv-q .tv-tile .ts{ margin-top:-4px; color:rgba(255,255,255,.5); }
.cv-q h2{ margin:0 0 20px; }
.nowb{ position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; font-size:20px; font-weight:700; background:rgba(40,40,44,.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.nowb svg{ width:20px; height:18px; }
.cv-empty{ font-size:31px; color:rgba(255,255,255,.5); padding:80px 0; }
.cv-g{ padding-top:150px !important; }
.cv-g h1{ font-size:62px; line-height:72px; }
.cv-g > p{ font-size:44px; color:rgba(255,255,255,.65); margin:20px 0 22px !important; }
.cv-g .party{ height:92px; border-radius:46px; padding:0 60px; font-size:44px; gap:20px; margin-left:-4px; }
.cv-g .party svg{ width:62px; height:56px; }
.g-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 22px; margin-top:20px; }
.g-row{ height:134px; border-radius:16px; display:flex; align-items:center; gap:26px; padding:0 58px; font-size:56px; }
.g-row b{ font-weight:500; }
.g-row .rd{ width:58px; height:58px; border-radius:50%; border:4px solid rgba(255,255,255,.62); flex:none; transition:background-color .15s, border-color .15s; }
.g-row.on .rd{ background:#fff; border-color:#fff; }
.g-row.anc b{ color:rgba(255,255,255,.55); } .g-row .an{ font-size:44px; color:rgba(255,255,255,.55); }
.g-row.is-f .rd{ border-color:rgba(0,0,0,.55); } .g-row.is-f.on .rd{ background:#111; border-color:#111; }
.g-row.is-f.anc b, .g-row.is-f .an{ color:rgba(0,0,0,.5); }
.g-actions{ display:flex; justify-content:flex-end; gap:30px; margin-top:40px; }
.cv-v{ background:#000; padding-top:150px !important; }
.cv-v h1{ font-size:62px; line-height:72px; }
.cv-v .mute{ margin:30px 0 26px; height:66px; padding:0 31px 0 30px; }
.cv-v .mute.on{ background:#fff; color:#000; }
.v-row{ display:flex; align-items:center; height:66px; margin-bottom:26px; }
.v-row .n{ width:384px; font-size:29px; }
.v-row .tr{ width:500px; height:9px; border-radius:5px; background:transparent; position:relative; overflow:hidden; }
.v-row .tr i{ position:absolute; left:0; top:0; bottom:0; border-radius:inherit; background:#ddd; }
.v-row .vn{ width:40px; text-align:right; font-size:31px; font-variant-numeric:tabular-nums; margin-right:40px; }
.v-row .circ{ width:90px; height:66px; border-radius:33px; display:grid; place-items:center; margin-right:24px; }
.v-row .circ svg{ width:32px; height:32px; }
.cv-v h2{ margin-top:10px; }
.cv-v .st{ font-size:29px; color:rgba(255,255,255,.65); margin:22px 0 26px !important; }
.st-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px 0; justify-items:center; }
.st-grid .tvpill{ height:66px; padding:0 31px; }
.st-grid .tvpill.sel{ background:#fff; color:#000; }

@media (prefers-reduced-motion: reduce){
  .tv *, .tv *::after{ transition:none !important; animation:none !important; }
}