/* ============================================================
   SWEET.TV case — rebuilt screens (fictional content) and demos.
   Product palette from the UI kit:
   mobile  #182936 bg · #15394c primary · #20bec6 secondary · #d8271c record · #f6bf48 warning
   tv      #141414 bg · #202020 element · #2affff focus · #20bec6 primary
   ============================================================ */
.prose {
  --m-bg: #182936; --m-primary: #15394c; --m-accent: #20bec6; --m-rec: #d8271c; --m-warn: #f6bf48; --m-line: rgba(32, 56, 74, .54);
  --tv-bg: #141414; --tv-el: #202020; --tv-focus: #2affff; --tv-dim: rgba(255, 255, 255, .5); --tv-mid: rgba(255, 255, 255, .7);
}
.case-cover--art { background: #0e1b26; }
.case-cover--art .cover { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; }
.case-cover--art figcaption { color: rgba(255, 255, 255, .6); }

.prose .try { font: 400 12px/16px var(--font-mono); color: var(--color-text-tertiary); margin-top: 12px; }
/* Hints are grey; only the leading «Попробуйте» carries the accent */
.try-lead { color: var(--color-text-brand); }
.prose strong { color: var(--color-text-primary); font-weight: 600; }

/* ============ Fictional "film stills": pure CSS scenes ============ */
.scene { position: absolute; inset: 0; overflow: hidden; isolation: isolate; transition: opacity .35s ease; }
.scene::before, .scene::after { content: ""; position: absolute; }
/* Dusk with a lone figure */
.scene--dusk {
  background:
    radial-gradient(circle at 62% 74%, #ffd18a 0 4%, rgba(255, 170, 90, .55) 9%, transparent 28%),
    linear-gradient(180deg, #160f33 0%, #3f2160 34%, #b4486a 58%, #f08a54 70%, #2a1424 70.5%, #120a14 100%);
}
.scene--dusk::before { left: 30%; bottom: 29.5%; width: 3.2%; height: 12%; border-radius: 40% 40% 10% 10%; background: #120a14; }
.scene--dusk::after { left: 30.6%; bottom: 41%; width: 2%; aspect-ratio: 1; border-radius: 50%; background: #120a14; }
/* Neon city at night */
.scene--neon {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 40, 160, .55), transparent 40%),
    radial-gradient(ellipse at 85% 20%, rgba(40, 230, 255, .45), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 7%, rgba(255, 255, 255, .05) 7% 7.6%),
    linear-gradient(180deg, #0b0820 0%, #1b0f3a 55%, #07060f 100%);
}
.scene--neon::before {
  left: 0; right: 0; bottom: 0; height: 46%;
  background:
    repeating-linear-gradient(90deg, #0a0816 0 9%, #120d26 9% 15%, #0d0a1d 15% 22%),
    linear-gradient(#0a0816, #0a0816);
  clip-path: polygon(0 40%, 8% 40%, 8% 10%, 16% 10%, 16% 55%, 24% 55%, 24% 0, 31% 0, 31% 35%, 42% 35%, 42% 20%, 50% 20%, 50% 60%, 60% 60%, 60% 5%, 68% 5%, 68% 45%, 78% 45%, 78% 25%, 88% 25%, 88% 50%, 100% 50%, 100% 100%, 0 100%);
}
.scene--neon::after {
  left: 0; right: 0; bottom: 0; height: 46%;
  background: radial-gradient(circle, rgba(255, 210, 120, .9) 0 1.2px, transparent 1.6px) 0 0 / 14px 12px;
  clip-path: inherit; opacity: .55;
  clip-path: polygon(8% 14%, 16% 14%, 16% 100%, 8% 100%, 24% 4%, 31% 4%, 31% 100%, 24% 100%, 60% 9%, 68% 9%, 68% 100%, 60% 100%);
}
/* Ocean under the moon */
.scene--ocean {
  background:
    radial-gradient(circle at 74% 26%, #f4f1e6 0 3.5%, rgba(244, 241, 230, .25) 6%, transparent 18%),
    linear-gradient(180deg, #071624 0%, #0d2f45 52%, #0a3d4f 52.4%, #04202c 100%);
}
.scene--ocean::before {
  left: 66%; width: 16%; top: 54%; bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(244, 241, 230, .55) 0 2px, transparent 2px 9px);
  mask: linear-gradient(transparent, #000 20%, transparent); -webkit-mask: linear-gradient(transparent, #000 20%, transparent);
}
.scene--ocean::after { left: 18%; bottom: 40%; width: 10%; height: 6%; background: #041520; clip-path: polygon(0 100%, 12% 30%, 30% 30%, 38% 0, 46% 30%, 100% 30%, 88% 100%); }
/* Forest in fog */
.scene--fog {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(220, 235, 225, .5), transparent 55%),
    linear-gradient(180deg, #2b3d36 0%, #5d7468 45%, #a9b8ad 70%, #3b4a42 100%);
}
.scene--fog::before {
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 8%, rgba(20, 30, 26, .55) 8% 9.5%, transparent 9.5% 17%, rgba(20, 30, 26, .35) 17% 18%);
  mask: linear-gradient(#000 30%, transparent 85%); -webkit-mask: linear-gradient(#000 30%, transparent 85%);
}
/* Desert road */
.scene--desert {
  background:
    radial-gradient(circle at 28% 34%, #fff3cf 0 5%, rgba(255, 220, 150, .3) 12%, transparent 30%),
    linear-gradient(180deg, #f2b46a 0%, #e48a4f 45%, #b8563a 60%, #6e2f22 100%);
}
.scene--desert::before { left: 0; right: 0; bottom: 0; height: 42%; background: #5a2519; clip-path: polygon(0 30%, 25% 5%, 52% 28%, 78% 0, 100% 22%, 100% 100%, 0 100%); }
.scene--desert::after { left: 47%; width: 6%; bottom: 0; height: 40%; background: linear-gradient(#e9b77a, #f6d9a8); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); opacity: .8; }
/* Arctic station */
.scene--lab { background: radial-gradient(60% 50% at 60% 35%, #ff4fd8 0%, transparent 60%), linear-gradient(180deg, #2a0b3d, #120420 70%, #07020d); }
.scene--lab::before { left: 15%; right: 15%; bottom: 18%; height: 12%; background: repeating-linear-gradient(90deg, #ff7ae6 0 6px, transparent 6px 22px); opacity: .5; }
.scene--meadow { background: linear-gradient(180deg, #f7c9d8 0%, #c9d9f2 40%, #8ccf3d 62%, #4f8a1f 100%); }
.scene--meadow::before { left: 40%; bottom: 22%; width: 16%; height: 34%; border-radius: 50% 50% 40% 40%; background: #e9e6e0; }
.scene--ice {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 255, 210, .35), transparent 50%),
    linear-gradient(180deg, #06121f 0%, #123a52 50%, #cfe4ec 50.5%, #8fb3c4 100%);
}
.scene--ice::before { left: 56%; bottom: 47%; width: 14%; height: 9%; background: #0c1c28; clip-path: polygon(0 100%, 0 40%, 30% 40%, 30% 0, 45% 0, 45% 40%, 100% 40%, 100% 100%); }
.scene--ice::after { left: 61%; bottom: 52%; width: 1.4%; height: 1.4%; background: #ffcf6a; box-shadow: 0 0 8px 3px rgba(255, 207, 106, .7); border-radius: 50%; }

/* ============ Phone (360×640 design, scaled in JS) ============ */
.fig--device { padding-bottom: 20px; }
.device-row { display: flex; gap: 32px; align-items: flex-start; }
/* A modern narrow phone (~9:19.5) in a plain frame, the same bezel as the TV */
.phone-box { flex: none; width: 288px; height: 624px; }
.phone {
  position: relative; width: 360px; height: 780px; transform-origin: top left; transform: scale(.8);
  border-radius: 36px; overflow: hidden; background: var(--m-bg); color: #fff;
  font-family: "Roboto", system-ui, sans-serif; box-shadow: 0 0 0 6px #050505, 0 16px 36px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column;
}
/* Punch-hole camera instead of a notch */
.phone::before { content: ""; position: absolute; left: 50%; top: 9px; z-index: 5; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #050505; }
.ph-status { height: 30px; flex: none; display: flex; justify-content: flex-end; align-items: center; padding: 0 22px; font-size: 13px; background: #0e1c27; }
.ph-player { position: relative; height: 190px; flex: none; background: #000; }
.ph-mark { position: absolute; right: 14px; top: 12px; font: 700 11px/1 var(--font-sans); padding: 3px 4px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 3px; color: rgba(255, 255, 255, .8); }
.ph-audio { position: absolute; left: 14px; top: 10px; display: flex; gap: 4px; align-items: center; font-size: 12px; }
.ph-audio svg, .ph-ico svg { width: 15px; height: 15px; }
.ph-pause { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 30px; height: 30px; color: #fff; }
.ph-pause svg { width: 100%; height: 100%; }
.ph-bar { position: absolute; left: 14px; right: 14px; bottom: 10px; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; font-size: 11px; }
.ph-time b { font-weight: 500; }
.ph-time.is-record b { color: #ff6a5f; }
.ph-ico { display: flex; gap: 16px; }
.ph-track { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.ph-fill { position: relative; display: block; height: 100%; width: 18%; border-radius: 2px; background: var(--m-accent); transition: width .5s ease; }
.ph-fill::after { content: ""; position: absolute; right: -6px; top: -4.5px; width: 12px; height: 12px; border-radius: 50%; background: var(--m-accent); }
.ph-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 16px; flex: none; }
.ph-tabs button {
  height: 38px; border-radius: 4px; background: var(--m-primary); color: #fff; font: 500 14px/1 "Roboto", system-ui, sans-serif;
  transition: background-color .2s, color .2s;
}
.ph-tabs button[aria-selected="true"] { background: var(--m-accent); }
.ph-list { flex: 1; overflow-y: auto; scrollbar-width: none; }
.ph-list::-webkit-scrollbar { display: none; }
.ph-ch, .ph-pr {
  display: grid; width: 100%; text-align: left; color: #fff; border-bottom: 1px solid var(--m-line); cursor: pointer;
  transition: background-color .2s;
}
.ph-ch { grid-template-columns: 44px 1fr 24px; gap: 12px; align-items: center; padding: 10px 16px; }
.ph-ch:hover, .ph-pr:hover { background: rgba(32, 190, 198, .08); }
.ph-ch.is-on { background: #1d4a5c; }
.ph-ch.is-on .ph-name { color: var(--m-accent); }
.ph-name { font: 500 14px/18px "Roboto", system-ui, sans-serif; }
.ph-sub { font: 400 12px/16px "Roboto", system-ui, sans-serif; color: rgba(255, 255, 255, .7); }
.ph-sub.is-tariff { color: var(--m-warn); }
.ph-ch svg { width: 20px; height: 20px; color: rgba(255, 255, 255, .8); }
.ph-pr { grid-template-columns: 1fr; gap: 4px; padding: 10px 16px 12px; }
.ph-pr-time { font: 400 12px/16px "Roboto", system-ui, sans-serif; color: rgba(255, 255, 255, .75); display: flex; gap: 8px; }
.ph-pr-title { font: 500 15px/20px "Roboto", system-ui, sans-serif; }
.ph-badge { font-size: 11px; font-weight: 500; }
.ph-badge::before { content: "● "; font-size: 8px; vertical-align: 2px; }
.ph-badge.rec { color: #ff4a3d; }
.ph-badge.live { color: var(--m-accent); }
.ph-pr.is-live { background: rgba(21, 57, 76, .7); }
.ph-pr.is-live .ph-pr-title { color: var(--m-accent); }
.ph-pr.is-live .ph-pr-title::after { content: ""; display: block; height: 2px; margin-top: 4px; background: linear-gradient(90deg, var(--m-accent) var(--p, 45%), rgba(255, 255, 255, .25) var(--p, 45%)); }
.ph-pr.is-playing { background: rgba(216, 39, 28, .14); }
.ph-pr.is-playing .ph-pr-title::before { content: "▶ "; color: #ff6a5f; font-size: 12px; }
.ph-pr.is-future .ph-pr-time, .ph-pr.is-future .ph-pr-title { opacity: .6; }
.ph-pr.is-future { grid-template-columns: 1fr 20px; }
.ph-pr.is-future .ph-pr-time, .ph-pr.is-future .ph-pr-title { grid-column: 1; }
.ph-pr .bell { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 18px; height: 18px; color: rgba(255, 255, 255, .45); transition: color .2s, transform .2s; }
.ph-pr.is-reminded .bell { color: var(--m-warn); fill: var(--m-warn); }
.ph-pr.is-reminded .ph-pr-title { opacity: .9; }
.ph-badge.bell-on { color: var(--m-warn); }
.ph-pr:focus-visible { outline: 2px solid var(--m-accent); outline-offset: -2px; }
.ph-nav { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); background: #102230; padding: 8px 0 10px; border-top: 1px solid var(--m-line); }
.ph-nav span { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 500 10px/1 "Roboto", system-ui, sans-serif; color: rgba(255, 255, 255, .85); }
.ph-nav span.is-on { color: var(--m-accent); }
.ph-nav svg { width: 20px; height: 20px; }

/* Channel avatars: round, like channel pictures on video platforms */
.avatar { position: relative; flex: none; display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.avatar[style*="background-image"]::before, .avatar[style*="background-image"]::after { display: none; }
.avatar::before, .avatar::after { content: ""; position: absolute; }

/* Footage from open movies, when clips.json is present */
.scene-media { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }

.device-notes { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.device-notes .t-label-mono { color: var(--color-text-tertiary); }
.device-notes ul { margin: 0; padding-left: 18px; color: var(--color-text-secondary); display: flex; flex-direction: column; gap: 6px; }
.prose .device-notes p { font-size: 12px; line-height: 16px; }
.device-notes--tv { margin-top: 32px; }
.device-notes--tv + .tv-wrap { margin-top: 16px; }

/* ============ TV (960×540 design, scaled in JS) ============ */
.tv-wrap { display: flex; gap: 16px; align-items: center; margin-top: 32px; }
.tv-box { flex: 1; min-width: 0; position: relative; }
.tv {
  position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: top left;
  background: var(--tv-bg); color: #fff; overflow: hidden; border-radius: 6px;
  font-family: "IBM Plex Sans", system-ui, sans-serif; box-shadow: 0 0 0 6px #050505, 0 16px 36px rgba(0, 0, 0, .3);
}
.tv:focus { outline: none; }
.tv:focus-visible { box-shadow: 0 0 0 6px #050505, 0 0 0 9px var(--tv-focus); }
.tv-video { left: 36%; }
.tv-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--tv-bg) 36%, rgba(20, 20, 20, .75) 48%, transparent 66%), linear-gradient(0deg, rgba(20, 20, 20, .92) 0%, rgba(20, 20, 20, .4) 34%, transparent 50%), linear-gradient(180deg, rgba(20, 20, 20, .8), transparent 18%); }
.tv-top { position: absolute; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; gap: 40px; padding: 0 28px; z-index: 2; }
.tv-logo { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 13px; background: #fff; color: #141414; font: 700 14px/1 var(--font-sans); letter-spacing: .5px; }
.tv-top nav { display: flex; gap: 30px; font: 500 15px/1 var(--font-sans); text-transform: uppercase; color: var(--tv-mid); }
.tv-top nav .is-on { color: var(--tv-focus); }
.tv-icons { margin-left: auto; display: flex; gap: 22px; }
.tv-icons svg { width: 18px; height: 18px; }
.tv-view { position: absolute; inset: 52px 0 0; }
.tv-cat { position: absolute; left: 36px; top: 8px; width: 380px; display: flex; justify-content: space-between; align-items: center; color: var(--tv-mid); font: 500 16px/1 var(--font-sans); text-transform: uppercase; }
.tv-cat span { color: var(--tv-focus); }
.tv-cat svg { width: 18px; height: 18px; }
.tv-channels { position: absolute; left: 0; top: 42px; width: 420px; margin: 0; padding: 0; list-style: none; }
.tv-ch { position: relative; display: grid; grid-template-columns: 34px 44px 1fr 20px; align-items: center; gap: 14px; height: 54px; padding: 0 10px 0 4px; margin: 3px 6px 3px 0; border-radius: 6px; font: 500 20px/1 var(--font-sans); color: var(--tv-mid); }
.tv-ch .n { text-align: right; font-size: 15px; color: var(--tv-dim); }
.tv-ch .avatar { width: 40px; height: 40px; }
.tv-ch svg { width: 18px; height: 18px; opacity: 0; }
.tv-ch.is-on-air { color: #fff; }
.tv-ch.is-focus {
  color: var(--tv-focus); background: linear-gradient(90deg, rgba(32, 190, 198, .45), rgba(32, 190, 198, .08));
  box-shadow: inset 0 0 0 2px var(--tv-focus);
}
.tv-ch.is-focus .n { color: var(--tv-focus); }
.tv-ch.is-focus svg { opacity: 1; }
.tv-ch.is-focus .name::before { content: "▸ "; font-size: 14px; }
.tv-full { position: absolute; right: 26px; top: 196px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); display: grid; place-items: center; }
.tv-full svg { width: 16px; height: 16px; }
.tv-programs { position: absolute; left: 480px; right: 26px; top: 252px; margin: 0; padding: 0; list-style: none; }
.tv-pr { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; margin: 0 -12px; border-radius: 6px; font: 500 16px/1 var(--font-sans); color: var(--tv-mid); }
.tv-pr .t { font-variant-numeric: tabular-nums; }
.tv-pr .st-badge { margin-left: auto; font-size: 12px; color: var(--tv-mid); }
.tv-pr .st-badge.live { color: var(--tv-focus); }
.tv-pr.is-live { color: var(--tv-focus); }
.tv-pr.is-live::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: linear-gradient(90deg, #fff var(--p, 40%), rgba(255, 255, 255, .25) var(--p, 40%)); }
.tv-pr.is-future { color: var(--tv-dim); }
.tv-pr.is-all { margin-top: 8px; color: #fff; }
.tv-pr.is-all svg { width: 20px; height: 20px; }
.tv-pr.is-focus { box-shadow: inset 0 0 0 2px var(--tv-focus); background: rgba(32, 190, 198, .22); color: #fff; }
.tv-rec-flag { position: absolute; right: 26px; top: 64px; padding: 4px 10px; border-radius: 4px; background: rgba(0, 0, 0, .6); font: 500 12px/1.2 var(--font-mono); z-index: 2; }

.tv-epg { background: var(--tv-bg); inset: 0; z-index: 3; padding: 0; }
.tv-epg-title { position: absolute; left: 20px; top: 14px; display: flex; align-items: center; gap: 16px; font: 500 16px/1 var(--font-sans); text-transform: uppercase; }
.tv-epg-title b { color: var(--tv-focus); font-weight: 500; }
.tv-epg-title svg { width: 18px; height: 18px; }
.tv-epg-days { position: absolute; left: 20px; top: 76px; display: flex; flex-direction: column; gap: 90px; font: 500 16px/1 var(--font-sans); color: var(--tv-dim); }
.tv-epg-days .is-on { color: var(--tv-focus); }
.tv-epg-list { position: absolute; left: 120px; right: 26px; top: 60px; margin: 0; padding: 0; list-style: none; }
.tv-epg-list .tv-pr { margin: 0; }
.tv-epg-list .tv-pr.is-past { color: var(--tv-mid); }

/* Remote */
.remote { flex: none; display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(4, 34px); gap: 4px; padding: 12px; border-radius: 24px; background: #1c1917; }
.remote button { display: grid; place-items: center; border-radius: 50%; background: #292524; color: #fafaf9; transition: background-color .15s, transform .1s; }
.remote button:hover { background: #44403c; }
.remote button:active, .remote button.is-pressed { transform: scale(.9); background: var(--accent-600); }
.remote svg { width: 16px; height: 16px; }
.remote [data-key="ArrowUp"] { grid-column: 2; grid-row: 1; }
.remote [data-key="ArrowLeft"] { grid-column: 1; grid-row: 2; }
.remote .ok { grid-column: 2; grid-row: 2; font: 600 11px/1 var(--font-sans); background: #44403c; }
.remote [data-key="ArrowRight"] { grid-column: 3; grid-row: 2; }
.remote [data-key="ArrowDown"] { grid-column: 2; grid-row: 3; }
.remote .back { grid-column: 3; grid-row: 4; }

/* ============ Autoplay demo ============ */
.ap-controls, .loc-controls, .rd-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 16px; }
.ap-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--color-bg-canvas); border: 1px solid var(--color-border-default); }
.ap-seg button { padding: 6px 12px; border-radius: 6px; font: 500 12px/16px var(--font-sans); letter-spacing: .5px; color: var(--color-text-secondary); }
.ap-seg button[aria-checked="true"] { background: var(--accent-600); color: #fff; }
.tv--ap { position: absolute; }
.ap-shelf-title { position: absolute; left: 36px; top: 300px; font: 600 20px/1 var(--font-sans); color: #fff; }
.prose .ap-shelf-title { font: 600 20px/1 var(--font-sans); color: #fff; }
.ap-shelf { position: absolute; left: 36px; right: 0; top: 330px; display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.ap-card { position: relative; flex: none; width: 140px; height: 196px; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.ap-card:hover, .ap-card:focus-visible { transform: scale(1.06); box-shadow: 0 0 0 3px var(--tv-focus); outline: none; }
.ap-card .scene { transition: none; }
.ap-poster-title { position: absolute; left: 10px; right: 10px; bottom: 12px; font: 700 13px/1.15 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.ap-poster-title small { display: block; margin-top: 4px; font: 500 9px/1 var(--font-mono); letter-spacing: .6px; opacity: .8; }
.ap-hero-row { position: absolute; left: 36px; top: 80px; right: 36px; }
.ap-open { position: absolute; inset: 0; z-index: 4; background: var(--tv-bg); }
.ap-bg { inset: 0; }
.ap-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 20, 20, .92) 0%, rgba(20, 20, 20, .6) 42%, transparent 70%); transition: opacity .4s; }
.ap-info { position: absolute; left: 48px; top: 110px; width: 380px; display: flex; flex-direction: column; gap: 14px; transition: opacity .4s; }
.prose .ap-info p { color: rgba(255, 255, 255, .78); }
.ap-genre { font: 500 12px/1 var(--font-mono) !important; letter-spacing: 1px; text-transform: uppercase; }
.ap-title { margin: 0; font: 700 40px/1.05 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.ap-desc { font: 400 15px/22px var(--font-sans) !important; }
.ap-btns { display: flex; gap: 12px; margin-top: 8px; }
.ap-btn { padding: 12px 20px; border-radius: 6px; background: rgba(255, 255, 255, .12); font: 600 14px/1 var(--font-sans); color: #fff; }
.ap-btn.is-focus { background: var(--tv-focus); color: #141414; }
.ap-playing { position: absolute; left: 48px; right: 48px; bottom: 36px; display: none; flex-direction: column; gap: 12px; }
.ap-live { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font-mono); color: #fff; }
.ap-live svg { width: 14px; height: 14px; color: var(--tv-focus); }
.ap-progress { height: 3px; background: rgba(255, 255, 255, .25); border-radius: 2px; }
.ap-progress span { display: block; height: 100%; background: var(--tv-focus); border-radius: 2px; transform: scaleX(0); transform-origin: left; }
.ap-open.is-auto .ap-playing { display: flex; }
.ap-open.is-auto .ap-progress span { animation: ap-progress 9s linear forwards; }
.ap-open.is-auto .ap-info, .ap-open.is-auto .ap-shade { opacity: 0; }
.ap-open.is-auto .ap-bg { animation: ken 9s ease-out forwards; }
@keyframes ap-progress { to { transform: scaleX(1); } }
@keyframes ken { to { transform: scale(1.08); } }
.ap-close { position: absolute; right: 24px; top: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; z-index: 2; }
.ap-close svg { width: 18px; height: 18px; }
.ap-close:hover { background: rgba(0, 0, 0, .8); }

/* ============ Readability ============ */
.rd-range { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text-secondary); }
.rd-range input[type="range"] { width: 140px; accent-color: var(--accent-600); }
.rd-range select { font: inherit; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--color-border-default); background: var(--color-bg-canvas); color: var(--color-text-primary); }
.rd-screen { width: 100%; height: 220px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; box-shadow: 0 0 0 4px #050505; }
.rd-zoom { display: flex; flex-direction: column; gap: 8px; width: 260px; transform: scale(var(--s, 1)); filter: blur(var(--b, 0px)); transition: transform .3s, filter .3s; }
.rd-row { padding: 9px 14px; border-radius: 6px; font: 500 18px/1 var(--font-sans); }
.rd-before { background: linear-gradient(135deg, #3b1d4a, #1a3a52 45%, #4d2b1f); }
.rd-before .rd-row { color: rgba(255, 255, 255, .55); background: linear-gradient(90deg, rgba(255, 125, 125, .18), rgba(215, 32, 142, .1)); }
.rd-before .rd-row.is-focus { color: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.rd-after { background: #141414; }
.rd-after .rd-row { color: rgba(255, 255, 255, .78); background: #202020; }
.rd-after .rd-row.is-focus { color: #2affff; background: rgba(32, 190, 198, .25); box-shadow: inset 0 0 0 3px #2affff; }
.rd-cols[data-vision="deutan"] .rd-screen { filter: url(#cvd-deutan); }
.rd-cols[data-vision="protan"] .rd-screen { filter: url(#cvd-protan); }
.rd-cols[data-vision="achroma"] .rd-screen { filter: grayscale(1); }

/* ============ UI kit ============ */
.kit { display: grid; grid-template-columns: 210px 1fr; gap: 32px; align-items: start; }
.kit-colors { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
/* The styles list, drawn like the panel in the design tool */
.kit-styles { padding: 14px 0 10px; border-radius: 10px; background: #2c2c2c; color: #fff; font: 400 13px/1 var(--font-sans); }
.prose .kit-styles p { margin: 0; color: #fff; }
.prose .kit-styles .ks-head { display: flex; justify-content: space-between; padding: 0 16px 14px; font: 600 14px/1 var(--font-sans); }
.ks-head span { font-weight: 300; font-size: 20px; line-height: 12px; }
.prose .kit-styles .ks-sec { padding: 12px 16px 8px; font: 500 12px/1 var(--font-sans); color: rgba(255, 255, 255, .6); }
.kit-styles ul { list-style: none; margin: 0; padding: 0; }
.kit-styles li { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.kit-styles li i { width: 12px; height: 12px; flex: none; }
.kit-styles li i::before { content: "›"; display: block; font: 400 14px/12px var(--font-sans); color: rgba(255, 255, 255, .5); text-align: center; }
.kit-styles li.is-effect i { border: 1.2px solid #fff; border-radius: 2px; box-shadow: 0 2px 0 rgba(255, 255, 255, .45); }
.kit-styles li.is-effect i::before { content: none; }
.kit .t-label-mono { color: var(--color-text-tertiary); margin-bottom: 12px; }
.prose .kit p { font: 500 12px/16px var(--font-mono); }
.swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.swatches li { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; font: 500 13px/18px var(--font-sans); color: var(--color-text-primary); }
.swatches span { width: 32px; height: 32px; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.swatches code { font: 400 11px/16px var(--font-mono); color: var(--color-text-tertiary); }

/* ============ Localization ============ */
.loc-rules { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-secondary); cursor: pointer; }
.loc-rules input { accent-color: var(--accent-600); }
.loc {
  position: relative; width: 300px; max-width: 100%; min-height: 650px; margin: 6px auto; padding: 0 14px 22px; border-radius: 36px; overflow: hidden;
  background: #182936; color: #fff; display: flex; flex-direction: column; gap: 14px; font-family: "Roboto", system-ui, sans-serif;
  box-shadow: 0 0 0 6px #050505, 0 16px 36px rgba(0, 0, 0, .3);
}
.loc::before { content: ""; position: absolute; left: 50%; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #050505; }
/* Home indicator */
.loc::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 104px; height: 4px; margin-left: -52px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.loc-status { display: flex; justify-content: flex-end; align-items: center; height: 30px; margin: 0 -14px -4px; padding: 0 22px; font-size: 13px; background: #0e1c27; }
.loc .loc-nav { margin-top: auto; }
.loc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.loc-tabs span, .loc-btn { display: block; padding: 10px 8px; border-radius: 4px; background: #15394c; text-align: center; font-size: 13px; font-weight: 500; white-space: nowrap; }
.loc-tabs .is-on { background: #20bec6; }
.loc-row { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid rgba(32, 56, 74, .9); }
.loc-badge { font-size: 11px; color: #ff4a3d; white-space: nowrap; }
.loc-title { font-size: 15px; font-weight: 500; white-space: nowrap; }
.loc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.loc-btn { background: #20bec6; }
.loc-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px #20bec6; }
.loc-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding-top: 10px; border-top: 1px solid rgba(32, 56, 74, .9); }
.loc-nav span { font-size: 10px; text-align: center; white-space: nowrap; color: rgba(255, 255, 255, .85); }
.loc-nav .is-on { color: #20bec6; }
.loc [data-t] { min-width: 0; overflow: hidden; }
.loc .is-overflow { box-shadow: inset 0 0 0 1.5px #ff4a3d; border-radius: 4px; color: #ffb4ae; }
.loc.is-ruled .loc-tabs span, .loc.is-ruled .loc-btn { white-space: normal; line-height: 1.15; display: grid; place-items: center; }
.loc.is-ruled .loc-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.loc.is-ruled .loc-nav span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc.is-ruled .is-overflow { box-shadow: none; color: inherit; }
.prose .loc-report { margin-top: 14px; text-align: center; font: 400 12px/16px var(--font-mono); color: var(--color-text-tertiary); }
.prose .loc-report.is-bad { color: #dc2626; }
.prose .loc-report.is-ok { color: var(--color-status-success-text); }

/* Matrix */
.matrix { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 0 24px 28px; }
.mx-axis { position: absolute; color: var(--color-text-tertiary); }
.mx-y { left: -6px; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left top; white-space: nowrap; }
.mx-x { right: 0; bottom: 0; }
.mx-cell { min-height: 90px; padding: 12px; border-radius: 8px; border: 1px solid var(--color-border-default); background: var(--color-bg-canvas); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mx-cell .t-label-mono { color: var(--color-text-tertiary); }
.prose .mx-cell .t-label-mono { font: 500 11px/16px var(--font-mono); }
.mx-chip { padding: 4px 10px; border-radius: 999px; font: 500 12px/16px var(--font-sans); letter-spacing: .5px; border: 1px solid var(--color-border-default); }
.mx-chip.is-hot { background: var(--color-status-brand-bg); color: var(--color-status-brand-text); border-color: var(--color-status-brand-border); }

.team-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font: 400 16px/26px var(--font-sans); color: var(--color-text-secondary); }

/* Responsive */
@media (max-width: 720px) {
  .device-row { flex-direction: column; align-items: center; }
  .tv-wrap { flex-direction: column; align-items: stretch; }
  .tv-wrap .tv-box { flex: none; width: 100%; }
  .remote { align-self: center; }
  .remote { grid-template-columns: repeat(6, 34px); grid-template-rows: 34px; grid-auto-rows: 34px; }
  .remote button { grid-column: auto !important; grid-row: auto !important; }
  .kit { grid-template-columns: 1fr; }
}

/* ============ Programme: days, reminders, archive ============ */
.ph-mark { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border: 0; border-radius: 14px; background: rgba(0, 0, 0, .45); font: 500 11px/1 "Roboto", system-ui, sans-serif; color: #fff; z-index: 2; }
.prose figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ph-mark .avatar { width: 20px; height: 20px; }
.ph-player > *:not(.scene) { z-index: 2; }
.ph-golive { position: absolute; right: 14px; top: 42px; padding: 5px 10px; border-radius: 12px; background: var(--m-accent); color: #0b1a22; font: 500 11px/1 "Roboto", system-ui, sans-serif; cursor: pointer; }
.ph-golive:hover { filter: brightness(1.1); }
.ph-track { position: relative; }
.ph-track.is-seekable { cursor: pointer; }
.ph-track.is-seekable::before { content: ""; position: absolute; inset: -8px 0; }
.ph-time.is-record + .ph-ico + .ph-track .ph-fill, .ph-track.is-seekable .ph-fill { background: #ff4a3d; }
.ph-track.is-seekable .ph-fill::after { background: #ff4a3d; }
.ph-days { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--m-bg); border-bottom: 1px solid var(--m-line); }
.ph-days button { padding: 8px 4px 7px; font: 500 13px/16px "Roboto", system-ui, sans-serif; color: rgba(255, 255, 255, .6); border-bottom: 2px solid transparent; cursor: pointer; }
.ph-days small { display: block; font-size: 10px; line-height: 12px; opacity: .8; }
.ph-days button[aria-selected="true"] { color: var(--m-accent); border-bottom-color: var(--m-accent); }
.ph-toast { position: absolute; left: 16px; right: 16px; bottom: 64px; z-index: 3; padding: 10px 12px; border-radius: 8px; background: #f2f5f7; color: #102230; font: 500 12px/16px "Roboto", system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); animation: toast-in .25s ease; }
.phone { position: relative; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

.tv-pr-head { position: absolute; left: 480px; right: 26px; top: 214px; display: flex; align-items: baseline; gap: 10px; margin: 0; font: 600 18px/1 var(--font-sans); color: #fff; }
.prose .tv-pr-head { font: 600 18px/1 var(--font-sans); color: #fff; }
.tv-pr-head span { font: 400 13px/1 var(--font-mono); color: var(--tv-dim); }
.tv-pr-head em { margin-left: auto; font: 500 12px/1 var(--font-mono); font-style: normal; color: var(--tv-focus); }
.tv-pr .title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tv-pr .st-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.tv-pr .st-badge.bell-on { color: #f6bf48; }
.tv-pr .bell { width: 14px; height: 14px; }
.tv-pr.is-playing .title::before { content: "▶ "; color: #ff6a5f; font-size: 12px; }
.tv-epg-title { right: 26px; }
.tv-epg-ch { margin-left: auto; display: flex; align-items: center; gap: 10px; text-transform: none; color: #fff; }
.tv-epg-ch .avatar { width: 28px; height: 28px; }
.tv-epg-days { top: 64px; gap: 6px; margin: 0; padding: 0; list-style: none; width: 92px; }
.tv-epg-days li { padding: 8px 10px; border-radius: 6px; display: flex; flex-direction: column; gap: 4px; }
.tv-epg-days b { font-weight: 500; font-size: 15px; }
.tv-epg-days span { font-size: 12px; }
.tv-epg-days .is-focus { box-shadow: inset 0 0 0 2px var(--tv-focus); background: rgba(32, 190, 198, .22); color: #fff; }
.tv-epg-hint { position: absolute; left: 20px; bottom: 14px; margin: 0; font: 400 12px/1 var(--font-mono); color: var(--tv-dim); }
.prose .tv-epg-hint { font: 400 12px/1 var(--font-mono); color: var(--tv-dim); }
.tv-epg-list { top: 64px; }
.tv-toast { position: absolute; right: 26px; bottom: 26px; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border-radius: 8px; background: #f2f5f7; color: #141414; font: 500 15px/1.2 var(--font-sans); box-shadow: 0 8px 28px rgba(0, 0, 0, .5); animation: toast-in .25s ease; }
.prose .tv-toast { font: 500 15px/1.2 var(--font-sans); color: #141414; }
.tv-toast .bell { width: 18px; height: 18px; color: #b07d00; }

/* Catalog: featured still and readable poster titles */
.ap-feature { inset: 0 0 auto; height: 330px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); opacity: .85; }
.ap-feature::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(20, 20, 20, .85), transparent 60%); }
.ap-feature-text { position: absolute; left: 36px; top: 150px; display: flex; flex-direction: column; gap: 10px; }
.prose .ap-feature-text p { margin: 0; color: rgba(255, 255, 255, .78); }
.prose .ap-feature-title { font: 700 40px/1 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.tv--ap .tv-top { z-index: 2; }
.ap-card::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.ap-poster-title { z-index: 1; }

/* ============ Live ↔ record, genres, paywall (after the product review) ============ */
/* Phone player: «● Эфир» white, «● Запись дата «передача»» red, one line */
.ph-pause { cursor: pointer; z-index: 2; }
.ph-time { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-state { margin: 0 2px 0 4px; font-weight: 500; }
.ph-state.is-rec { color: #ff4a3d; }
.ph-track { cursor: pointer; }
.ph-track::before { content: ""; position: absolute; inset: -8px 0; }
.ph-track.is-record .ph-fill, .ph-track.is-record .ph-fill::after { background: #ff4a3d; }
.phone.is-locked .ph-bar, .phone.is-locked .ph-pause, .phone.is-locked .ph-golive { display: none; }

/* Paywall: the channel is outside the viewer's subscription */
.ph-paywall, .tv-paywall {
  position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; text-align: center; background: rgba(12, 26, 38, .8); color: #fff;
}
.ph-paywall { inset: 0; }
.prose .ph-paywall .pw-title { margin: 0; font: 600 14px/18px "Roboto", system-ui, sans-serif; color: #fff; }
.prose .ph-paywall .pw-text { margin: 0; font: 400 11px/15px "Roboto", system-ui, sans-serif; color: rgba(255, 255, 255, .85); }
.pw-btn { padding: 7px 22px; border-radius: 999px; background: var(--m-accent); color: #fff; font: 500 12px/1 "Roboto", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; }
.pw-btn:hover { filter: brightness(1.08); }

/* Days: 14 days of archive scroll sideways */
.ph-days { display: flex; overflow-x: auto; scrollbar-width: none; }
.ph-days::-webkit-scrollbar { display: none; }
.ph-days button { flex: 0 0 31%; }

/* «Жанры»: genres of channels, then the channels of a genre */
.ph-genre, .ph-genre-back {
  width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 16px; align-items: center; padding: 14px 20px;
  background: var(--m-bg); border-bottom: 2px solid #20384a; text-align: left; cursor: pointer;
  font: 500 16px/20px "Roboto", system-ui, sans-serif; color: #fff;
}
.ph-genre svg, .ph-genre-back svg { width: 28px; height: 28px; }
.ph-genre small, .ph-genre-back small { font: 400 12px/1 "Roboto", system-ui, sans-serif; color: rgba(255, 255, 255, .55); }
.ph-genre:hover { background: #1b3242; }
.ph-genre.is-on { background: #15394c; color: var(--m-accent); }
.ph-genre-back { background: #15394c; color: var(--m-accent); }
.ph-genre-back small::before { content: "‹ "; }
.ph-ch { grid-template-columns: 44px 1fr; }
.ph-sub .lock { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }

/* Smart TV: channels, the side column with full screen / shows / programme */
.tv-ch .chev { width: 18px; height: 18px; opacity: 0; }
.tv-ch.is-focus .chev { opacity: 1; }
.tv-ch .lock { width: 16px; height: 16px; color: var(--m-warn); }
.tv-ch { grid-template-columns: 34px 44px 1fr auto 20px; }
.tv-ch.is-selected { color: #fff; background: rgba(255, 255, 255, .08); }
.tv-full { cursor: pointer; color: #fff; z-index: 2; top: 186px; }
.tv-full.is-focus { background: var(--m-accent); border-color: var(--m-accent); }
.tv-full .key-green { position: absolute; right: -3px; top: -3px; }
.key-green, .key-yellow { display: inline-block; width: 10px; height: 10px; border-radius: 1px; background: #3ccf4e; }
.key-yellow { background: #f6bf48; }
.tv-full-tip {
  position: absolute; right: 84px; top: 156px; z-index: 3; width: 300px; margin: 0; padding: 14px 18px; border-radius: 10px;
  border: 2px solid var(--tv-focus); background: rgba(8, 22, 26, .92); font: 400 16px/1.35 var(--font-sans); color: #fff;
}
.prose .tv-full-tip { font: 400 16px/1.35 var(--font-sans); color: #fff; }
.tv-full-tip .key-green { width: 14px; height: 14px; vertical-align: -1px; margin: 0 2px; }
.tv-key-ico { position: relative; display: inline-flex; }
.tv-key-ico .key-yellow { position: absolute; right: -5px; top: -5px; width: 8px; height: 8px; }
.tv-programs { top: 250px; }
.tv-rec-flag b { color: #ff4a3d; font-weight: 500; }
.tv.is-locked .tv-rec-flag { display: none; }
/* Embedded in place of the video, above the shows; «Подключить» takes the remote focus */
.tv-paywall { left: 470px; right: 26px; top: 66px; bottom: auto; height: 168px; gap: 10px; padding: 16px 24px; border-radius: 10px; background: rgba(12, 26, 38, .88); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.prose .tv-paywall .pw-title { margin: 0; font: 600 19px/1.25 var(--font-sans); color: #fff; }
.prose .tv-paywall .pw-text { margin: 0; max-width: 340px; font: 400 13px/1.35 var(--font-sans); color: rgba(255, 255, 255, .85); }
.tv-paywall .pw-btn { padding: 9px 28px; font-size: 13px; transition: box-shadow .15s, background-color .15s; }
.tv-paywall .pw-btn.is-focus { background: #2affff; color: #0b1a22; box-shadow: 0 0 0 3px rgba(42, 255, 255, .35); }
.tv.is-locked .tv-full, .tv.is-locked .tv-full-tip { display: none; }
.tv[data-view="epg"] .tv-paywall, .tv[data-view="full"] .tv-paywall { display: none; }

/* The live video sits in the top-right corner, like the picture in the film card:
   two overlays cover the rest and slide off (transform only) when it goes full screen */
.tv-video { left: 0; }
.tv-fade { position: absolute; z-index: 1; pointer-events: none; will-change: transform, opacity; transition: transform .5s cubic-bezier(.3, .7, .3, 1), opacity .3s ease; }
.tv-fade--x { left: 0; top: 0; bottom: 0; width: 60%; background: linear-gradient(90deg, var(--tv-bg) 0%, var(--tv-bg) 66%, rgba(20, 20, 20, .55) 83%, transparent 100%); }
.tv-fade--y { left: 0; right: 0; bottom: 0; height: 68%; background: linear-gradient(0deg, var(--tv-bg) 0%, var(--tv-bg) 52%, rgba(20, 20, 20, .5) 78%, transparent 100%); }
.tv-shade { background: linear-gradient(180deg, rgba(20, 20, 20, .8), transparent 18%); }
.tv[data-view="full"] .tv-fade { opacity: 0; transition: transform 1.1s cubic-bezier(.65, 0, .25, 1), opacity .6s ease .9s; }
.tv[data-view="full"] .tv-fade--x { transform: translateX(-100%); }
.tv[data-view="full"] .tv-fade--y { transform: translateY(100%); }
.tv[data-view="full"] .tv-shade { background: linear-gradient(0deg, rgba(20, 20, 20, .9), transparent 42%), linear-gradient(160deg, rgba(20, 20, 20, .55), transparent 40%); }
.tv[data-view="full"] .tv-top, .tv[data-view="full"] .tv-view, .tv[data-view="full"] .tv-rec-flag { display: none; }

/* Full-screen player (Figma: SmartTV · Lokalise, 151:9017): channel with three shows, time, badge, track, controls */
.tv-fs { position: absolute; inset: 0; z-index: 2; animation: fs-in .4s ease .7s backwards; }
@keyframes fs-in { from { opacity: 0; } }
.tv-fs .fs-info { position: absolute; left: 32px; top: 22px; width: 330px; padding: 10px 14px 12px; border-radius: 4px; background: rgba(48, 48, 48, .72); display: flex; flex-direction: column; gap: 7px; }
.prose .tv-fs p { margin: 0; color: #fff; }
.prose .tv-fs .fs-ch { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; font: 500 16px/1 var(--font-sans); }
.tv-fs .fs-ch .avatar { width: 34px; height: 34px; }
.prose .tv-fs .fs-pr { display: flex; gap: 8px; font: 500 13px/1.2 var(--font-sans); color: var(--tv-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prose .tv-fs .fs-pr.is-now { color: var(--tv-focus); }
.tv-fs .fs-bottom { position: absolute; left: 32px; right: 32px; bottom: 16px; display: flex; flex-direction: column; gap: 9px; }
.prose .tv-fs .fs-line { display: flex; align-items: baseline; gap: 14px; font: 500 14px/1 var(--font-sans); white-space: nowrap; overflow: hidden; }
.tv-fs .fs-time { font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; }
.tv-fs .fs-state { font-size: 12px; color: var(--tv-focus); }
.tv-fs .fs-state.is-rec { color: #ff4a3d; }
.tv-fs .fs-what { overflow: hidden; text-overflow: ellipsis; }
.tv-fs .fs-track { display: block; height: 2px; background: rgba(255, 255, 255, .3); }
.tv-fs .fs-track i { display: block; height: 100%; background: #fff; transition: width .9s linear; }
.tv-fs .fs-ctrls { display: flex; justify-content: space-between; padding-bottom: 18px; }
.tv-fs .fs-ctrls > div { display: flex; gap: 16px; }
.fs-btn { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, .9); color: #fff; cursor: pointer; }
.fs-btn svg { width: 15px; height: 15px; }
.fs-btn .key-green, .fs-btn .key-yellow { position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; }
.fs-btn.is-focus { background: var(--m-accent); box-shadow: none; }
.fs-btn:hover { background: rgba(32, 190, 198, .4); }
.fs-label { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font: 500 11px/1.2 var(--font-sans); white-space: nowrap; color: #fff; opacity: 0; pointer-events: none; }
.fs-btn.is-focus .fs-label { opacity: 1; }
.tv-fs.is-fav [data-fs="fav"] svg { fill: currentColor; }

/* Full programme: one list through the days, the date next to each day's first show */
.tv-epg-list { top: 96px; left: 150px; }
.tv-epg-list .tv-pr { height: 46px; font-size: 18px; }
.tv-epg-list .tv-pr.is-focus { background: #173a3e; }
.tv-epg-days { left: 24px; top: 96px; width: 120px; gap: 0; }
.tv-epg-days li { height: 46px; padding: 0; justify-content: center; font: 500 17px/1 var(--font-sans); color: var(--tv-dim); }
.tv-epg-days li.is-today { color: var(--tv-focus); }
.tv-epg-arrow { position: absolute; left: 40px; width: 26px; height: 26px; color: var(--tv-mid); }
.tv-epg-arrow.up { top: 62px; }
.tv-epg-arrow.down { bottom: 10px; }
.tv-epg-arrow.is-off { opacity: .2; }

/* Remote: colour buttons */
.remote .color { width: 18px; height: 18px; place-self: center; border-radius: 3px; }
.remote .green { grid-column: 1; grid-row: 4; background: #3ccf4e; }
.remote .yellow { grid-column: 2; grid-row: 4; background: #f6bf48; }
.remote .green:hover { background: #4fe060; }
.remote .yellow:hover { background: #ffd060; }
.scene[data-frame="1"] .scene-media { transform: scale(1.45); transform-origin: 20% 40%; }
/* Mirrored crop: the origin must stay within 41–59% horizontally, or the flipped video leaves part of the frame uncovered */
.scene[data-frame="2"] .scene-media { transform: scale(-1.45, 1.45); transform-origin: 55% 60%; }

/* ============ Autoplay: the picture in the top-right corner reveals to full screen ============ */
/* The picture is always full size; in the card two overlays cover everything but the top-right corner.
   They slide off with transform (no layout, composited) and dissolve once the picture fills the screen. */
.ap-stage { position: absolute; inset: 0; overflow: hidden; }
.ap-fade { position: absolute; z-index: 2; will-change: transform, opacity; transition: transform .3s ease, opacity .3s ease; }
.ap-fade--x { left: 0; top: 0; bottom: 0; width: 68%; background: linear-gradient(90deg, var(--tv-bg) 0%, var(--tv-bg) 50%, rgba(20, 20, 20, .55) 73%, transparent 100%); }
.ap-fade--y { left: 0; right: 0; bottom: 0; height: 67%; background: linear-gradient(0deg, var(--tv-bg) 0%, var(--tv-bg) 39%, rgba(20, 20, 20, .45) 67%, transparent 100%); }
.ap-open.is-auto .ap-fade { opacity: 0; transition: transform 1.1s cubic-bezier(.65, 0, .25, 1), opacity .6s ease .9s; }
.ap-open.is-auto .ap-fade--x { transform: translateX(-74%); }
.ap-open.is-auto .ap-fade--y { transform: translateY(58%); }
.ap-open.is-auto .ap-info { opacity: 0; pointer-events: none; }
.ap-info { z-index: 2; }
.ap-btn { cursor: pointer; }
.ap-btn:focus { outline: none; }
.ap-btn.is-focus, .ap-btn:hover { background: var(--tv-focus); color: #141414; }
.prose .ap-countdown { margin: 4px 0 0; font: 500 12px/1.4 var(--font-mono); color: var(--tv-focus); }
.ap-playing { z-index: 2; }
/* Shelf: posters without titles under them, «Бесплатно» in yellow */
.ap-card { width: 124px; height: auto; overflow: visible; }
.ap-card:hover, .ap-card:focus-visible { transform: none; box-shadow: none; }
.ap-card::after { display: none; }
.ap-poster { position: relative; height: 176px; border-radius: 8px; overflow: hidden; transition: box-shadow .15s; }
.ap-poster::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.ap-card:hover .ap-poster, .ap-card.is-focus .ap-poster { box-shadow: 0 0 0 3px var(--tv-focus); }
.ap-shelf { transition: transform .3s cubic-bezier(.3, .7, .3, 1); will-change: transform; }
.tv--ap:focus { outline: none; }
.tv--ap:focus-visible { box-shadow: 0 0 0 6px #050505, 0 0 0 9px var(--tv-focus); }
.tv-wrap--ap { margin-top: 0; }
.ap-free { display: block; margin-top: 6px; font: 500 13px/1 var(--font-sans); color: #f6bf48; }

/* ============ Readability: «было» — gradient pill over a video still ============ */
.rd-row { display: flex; align-items: center; gap: 10px; }
.rd-row b { width: 18px; font-weight: 500; font-size: 13px; text-align: right; opacity: .6; }
.rd-row i { margin-left: auto; font-style: normal; opacity: 0; }
.rd-row.is-focus i { opacity: 1; }
.rd-before { background: linear-gradient(90deg, #141414 35%, rgba(20, 20, 20, .35)), url("../assets/video/neon.jpg") center / cover, #141414; }
.rd-before .rd-row { background: none; color: rgba(255, 255, 255, .6); }
.rd-before .rd-row.is-focus {
  color: #2affff; border-radius: 6px 24px 24px 6px;
  background: linear-gradient(90deg, rgba(32, 190, 198, .55), rgba(32, 190, 198, .06) 85%);
  box-shadow: inset 0 0 0 1.5px rgba(42, 255, 255, .45), 0 0 14px rgba(42, 255, 255, .25);
}
.rd-after .rd-row.is-focus { color: #2affff; }

/* ============ Localization: tariff, posters, «Развернуть» ============ */
.loc-row { position: relative; }
.loc-more { align-self: flex-start; padding: 0; font: 500 11px/1.4 "Roboto", system-ui, sans-serif; color: #20bec6; cursor: pointer; }
.loc-tariff { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 6px; background: #15394c; }
.loc-tariff-name { font-size: 13px; font-weight: 500; white-space: nowrap; }
.loc-chev { flex: none; width: 16px; height: 16px; color: rgba(255, 255, 255, .6); }
.loc-posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.loc-poster { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.loc-poster .scene { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 4px; }
.loc-film { font-size: 11px; white-space: nowrap; color: rgba(255, 255, 255, .85); }
.loc.is-ruled .loc-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.loc.is-ruled .loc-row.is-open .loc-title { white-space: normal; }
.loc.is-ruled .loc-tariff-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.loc.is-ruled .loc-film { display: none; }
.loc.is-ruled .loc-btn { min-width: 0; }

/* Poster titles: beat .prose p (colour and size) */
.prose .ap-poster-title { margin: 0; font: 700 13px/1.15 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
/* Edge buttons: keep their labels inside the screen */
.fs-ctrls > div:first-child .fs-btn:first-child .fs-label { left: 0; transform: none; }
.fs-ctrls > div:last-child .fs-btn:last-child .fs-label { left: auto; right: 0; transform: none; }
/* Lists sit above the corner overlays */
.tv-view { z-index: 2; }
.tv-epg { z-index: 3; }

/* ============ UI kit: one base palette, separate text styles per platform ============ */
.kit2 { display: flex; flex-direction: column; gap: 28px; }
.kit2 .t-label-mono { color: var(--color-text-tertiary); margin-bottom: 12px; }
.prose .kit2 p { margin: 0; }
.kit-shared { padding: 16px; border-radius: 10px; background: var(--color-bg-canvas); border: 1px solid var(--color-border-default); }
.swatches--row { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
.swatches--row li { flex: 1 1 180px; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; }
.swatches--row li span { grid-row: 1 / 4; }
.swatches li small { display: block; font: 400 11px/14px var(--font-sans); color: var(--color-text-tertiary); }
.swatches--row li code { grid-column: 2; }
.swatches li[style*="#ffffff"] span { box-shadow: inset 0 0 0 1px var(--color-border-default); }
.kit-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.prose .kit2 .kit-sub { margin: 18px 0 10px; font: 500 12px/16px var(--font-sans); color: var(--color-text-secondary); }
.prose .kit2 .t-label-mono + .kit-sub { margin-top: 0; }
.type-specimens { list-style: none; margin: 0; padding: 14px 16px; border-radius: 8px; display: flex; flex-direction: column; gap: 10px; color: #fff; }
.type-specimens--mobile { background: #182936; }
.type-specimens--tv { background: #141414; font-family: "Avenir Next Cyr", "Avenir Next", "Nunito Sans", "IBM Plex Sans", system-ui, sans-serif; }
.type-specimens li { display: flex; flex-direction: column; gap: 3px; }
.type-specimens code { font: 400 10px/14px var(--font-mono); color: rgba(255, 255, 255, .55); }
.prose .kit2 .kit-note { margin-top: 8px; font: 400 11px/15px var(--font-sans); color: var(--color-text-tertiary); }
/* Remote colour keys: three stripes in one swatch */
.swatches .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0; background: none; box-shadow: none; overflow: hidden; }
.swatches .keys i { display: block; border-radius: 3px; }
@media (max-width: 720px) { .kit-platforms { grid-template-columns: 1fr; } }
.swatches--row li { gap: 2px 12px; align-content: center; }
.swatches--row li span { align-self: center; }

/* Both platforms share one row grid: titles, notes, type boxes and colour lists line up */
.kit-platforms { grid-template-rows: repeat(6, auto); row-gap: 0; }
.kit-platforms > .kit-col { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; }
.kit-platforms .type-specimens { height: 100%; box-sizing: border-box; justify-content: space-between; }
.prose .kit2 .kit-note { margin: 0 0 12px; }
.prose .kit2 .t-label-mono { margin-bottom: 4px; }
@media (max-width: 720px) { .kit-platforms { grid-template-rows: none; } .kit-platforms > .kit-col { display: flex; flex-direction: column; grid-row: auto; } .kit-platforms > .kit-col + .kit-col { margin-top: 28px; } }
.swatch-keys .nowrap { font-style: normal; white-space: nowrap; }

/* ============ Key figure: phone and TV side by side at full width ============ */
.tv-scroll { flex: 1; min-width: 0; }
/* Until the screen is scaled to its box, it scrolls inside the demo instead of widening the page */
.tv-scroll:not(.is-fit) { overflow-x: auto; }
.tv-scroll:not(.is-fit) .tv-box { width: 960px; height: 540px; }
@media (min-width: 1101px) {
  .fig--device.fig--wide { display: grid; grid-template-columns: 288px minmax(0, 1fr); column-gap: 56px; align-items: start; padding-bottom: 0; }
  .fig--device.fig--wide .device-row { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; gap: 20px; }
  .fig--device.fig--wide .device-notes--tv { grid-column: 2; grid-row: 1; margin-top: 0; }
  .fig--device.fig--wide .tv-wrap { grid-column: 2; grid-row: 2; margin-top: 20px; }
  .fig--device.fig--wide > figcaption { grid-column: 1 / -1; grid-row: 3; }
  /* Case template: the figure stays in the text column (the contents menu owns the left one),
     so phone and TV stack — phone with its notes beside it, the TV with the remote at full column width */
  .v2 .fig--device.fig--wide { display: block; padding-bottom: 20px; }
  .v2 .fig--device.fig--wide .device-row { flex-direction: row; gap: 32px; }
  .v2 .fig--device.fig--wide .device-notes--tv { margin-top: 40px; }
  .v2 .fig--device.fig--wide .tv-wrap { margin-top: 16px; }
}

/* ============ Phone: the whole TV screen fits the column as a preview; «На весь экран» opens it large ============
   Panning a native-size screen showed only a fragment of it; scaled to the column the text is too small to read,
   so the full-screen view (landscape where the phone allows) is where the demo is actually used */
.tv-expand, .tv-expand-hint { display: none; }
@media (max-width: 720px) {
  .tv-expand { display: inline-flex; align-self: center; }
  .device-notes ul { font-size: 14px; line-height: 20px; }
  .prose .device-notes p, .prose .try { font-size: 13px; line-height: 18px; }
}

/* Narrow phones: cells may get narrower than the longest chip; chips wrap instead of pushing the matrix off screen */
.mx-cell { min-width: 0; }
.mx-chip { max-width: 100%; overflow-wrap: anywhere; }
/* Phone: captions, labels and token names read at 12px at least; text inside the phone and TV mock-ups keeps its size */
@media (max-width: 720px) {
  .swatches code, .swatches li small, .type-specimens code, .prose .kit2 .kit-note, .prose .mx-cell .t-label-mono, .fs-label { font-size: 12px; line-height: 16px; }
}
/* Full-screen TV demo: screen and remote on a dark stage; side by side in landscape, stacked in portrait */
.tv-wrap.is-expanded {
  position: fixed; inset: 0; z-index: 100; margin: 0; padding: 56px max(12px, env(safe-area-inset-right)) 16px max(12px, env(safe-area-inset-left));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #0c0a09;
}
.tv-wrap.is-expanded .tv-scroll { flex: none; width: 100%; }
.tv-wrap.is-expanded .tv-box { width: 100%; }
.tv-wrap.is-expanded .tv-expand { display: inline-flex; position: absolute; top: 12px; right: max(12px, env(safe-area-inset-right)); color: #fafaf9; border-color: #57534e; background: transparent; }
.tv-wrap.is-expanded .tv-expand-hint { display: block; margin: 0; color: #a8a29e; text-align: center; font-size: 12px; }
@media (orientation: landscape) {
  .tv-wrap.is-expanded { flex-direction: row; padding-top: 12px; }
  .tv-wrap.is-expanded .tv-scroll { width: min(calc(100% - 160px), calc((100vh - 28px) * 16 / 9)); }
  .tv-wrap.is-expanded .tv-expand-hint { display: none; }
}
.tv-expand-open { overflow: hidden; }
/* A transformed ancestor (the scroll reveal) would pin the fixed stage to itself instead of the screen */
.tv-expand-open .reveal:has(.is-expanded) { transform: none !important; opacity: 1 !important; transition: none; }

/* «6 платформ» in the context section: the result-metric form of the other cases, in the text column */
.prose .case-result { margin: 32px 0; }