/*
 * Dark only, drawn on a 1920 × 1080 stage scaled to the screen, with Free My TV's measurements and glass.
 * No CSS variables, grid or backdrop-filter (webOS 3/4 and Tizen 3 don't have them); only transform and opacity animate.
 */
@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.ttf') format('truetype');
  font-weight: 100 900;
}

html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
/* No zoom, double-tap zoom, text selection or tap flash: on touch browsers (Android TV, TV Bro) they leave the
 * stage zoomed or highlighted. The lists are the only thing that scrolls, and they allow their own panning (.rows). */
html, body {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -ms-touch-action: none; touch-action: none;
}
body {
  font-family: 'Inter', 'LG Smart UI', 'Helvetica Neue', Arial, sans-serif;
  color: #F5F5F7;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}
/* Everything a tap or a click can act on. (iOS only sends click for elements that look clickable.) */
.row, .pad-ui .key, .chip, .retry, .hbtn, #confirm .btn, .dev, #osd .b { cursor: pointer; }
/* A pointer (mouse, LG's Magic Remote, TV Bro's cursor) lights what it's over; the remote's focus stays white.
 * Only where hovering exists, so a finger doesn't leave things lit after a tap. */
@media (hover: hover) {
  .row:hover:not(.focus) { background: rgba(255, 255, 255, 0.12); color: #F5F5F7; }
  .pad-ui .key:hover:not(.focus), .hbtn:hover:not(.focus), .retry:hover:not(.focus), #confirm .btn:hover:not(.focus), .dev:hover:not(.focus) { background: rgba(255, 255, 255, 0.18); }
  .chip:hover, #osd .b:hover { background: rgba(255, 255, 255, 0.2); }
}

#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden;
  -webkit-transform-origin: 0 0; transform-origin: 0 0;
  background: #0B0B0D;
}
.layer { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
#sky { background: -webkit-linear-gradient(top, #1C1C1E, #0B0B0D); background: linear-gradient(#1C1C1E, #0B0B0D); }

/* A layer that is off, or still fading out, takes no taps or clicks: a quick finger after a screen change must reach
 * the screen that is coming in, not the one on its way out. */
.screen { opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: opacity 0.3s, visibility 0s 0.3s; transition: opacity 0.3s, visibility 0s 0.3s; }
.screen.on { opacity: 1; visibility: visible; pointer-events: auto; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }

.brand { position: absolute; left: 76px; top: 52px; margin: 0; font-size: 76px; font-weight: 600; letter-spacing: 0.004em; line-height: 1; color: #F5F5F7; }
.brand.small { font-size: 44px; top: 48px; }

/* MARK: - Glass (Free My TV's night platter) */
.glass {
  border-radius: 34px;
  background: -webkit-linear-gradient(top, rgba(34, 34, 38, 0.72), rgba(17, 17, 19, 0.6));
  background: linear-gradient(rgba(34, 34, 38, 0.72), rgba(17, 17, 19, 0.6));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), inset 0 1.5px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* MARK: - Sign-in: a code and QR for the phone (left), user name and password (right); 2FA and PINs on a keypad */
.lg-card, .pf-box {
  position: absolute; left: 660px; top: 150px; width: 600px; height: 780px; box-sizing: border-box;
  border-radius: 34px;
  background: -webkit-linear-gradient(top, rgba(34, 34, 38, 0.72), rgba(17, 17, 19, 0.6));
  background: linear-gradient(rgba(34, 34, 38, 0.72), rgba(17, 17, 19, 0.6));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), inset 0 1.5px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.pad-ui .hint { position: absolute; left: 0; right: 0; top: 52px; text-align: center; font-size: 28px; color: rgba(245, 245, 247, 0.62); }
/* font-size 0 removes the gaps between inline-blocks; vertical-align top keeps filled and empty cells on one line. */
.pad-ui .code { position: absolute; left: 0; right: 0; top: 116px; height: 96px; text-align: center; white-space: nowrap; font-size: 0; }
.pad-ui .code span {
  position: relative; display: inline-block; vertical-align: top; width: 72px; height: 96px; margin: 0 6px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  font-size: 52px; font-weight: 600; line-height: 96px; text-align: center; color: #F5F5F7;
  -webkit-transition: background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, box-shadow 0.2s;
}
.pad-ui .code span.full { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16); }
.pad-ui .code span.pop { -webkit-animation: pin-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.3); animation: pin-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.pad-ui .code span.next { box-shadow: inset 0 0 0 3px rgba(245, 245, 247, 0.85); }
.pad-ui .code span.next:after {
  content: ''; position: absolute; left: 34px; top: 28px; width: 4px; height: 40px; border-radius: 2px; background: #F5F5F7;
  -webkit-animation: caret 1.1s step-end infinite; animation: caret 1.1s step-end infinite;
}
.pad-ui .code.bad { -webkit-animation: shake 0.5s; animation: shake 0.5s; }
.pad-ui .code.bad span { background: rgba(255, 69, 58, 0.12); box-shadow: inset 0 0 0 2px rgba(255, 69, 58, 0.85); }
.pad-ui .keypad { position: absolute; left: 114px; top: 262px; width: 372px; }
.pad-ui .key {
  float: left; width: 108px; height: 92px; margin: 0 16px 14px 0; border-radius: 22px;
  font-size: 40px; font-weight: 500; line-height: 92px; text-align: center; color: #F5F5F7;
  background: rgba(255, 255, 255, 0.06);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
}
.pad-ui .key:nth-child(3n) { margin-right: 0; }
.pad-ui .key.word { font-size: 26px; font-weight: 600; }
.pad-ui .key.focus { background: #FFF; color: #1D1D1F; -webkit-transform: scale(1.08); transform: scale(1.08); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4); }
.pad-ui .error { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font-size: 26px; color: #FF453A; min-height: 32px; }

@-webkit-keyframes pin-pop { 0% { -webkit-transform: scale(0.6); opacity: 0; } 100% { -webkit-transform: scale(1); opacity: 1; } }
@keyframes pin-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@-webkit-keyframes caret { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes caret { 0% { opacity: 1; } 50% { opacity: 0; } }
@-webkit-keyframes shake {
  0%, 100% { -webkit-transform: translateX(0); } 15% { -webkit-transform: translateX(-18px); } 30% { -webkit-transform: translateX(15px); }
  45% { -webkit-transform: translateX(-10px); } 60% { -webkit-transform: translateX(7px); } 75% { -webkit-transform: translateX(-3px); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); } 15% { transform: translateX(-18px); } 30% { transform: translateX(15px); }
  45% { transform: translateX(-10px); } 60% { transform: translateX(7px); } 75% { transform: translateX(-3px); }
}

/* MARK: - Guide: categories on the left, channels on the right */
#clock { position: absolute; right: 76px; top: 56px; font-size: 36px; font-weight: 500; color: rgba(245, 245, 247, 0.8); }
.column { position: absolute; top: 150px; height: 870px; }
.column.cats { left: 60px; width: 500px; }
.column.chans { left: 600px; width: 760px; }
/* The focused channel's programme, beside the list: now (time, title, how far along, description) and what follows. */
.gpanel {
  position: absolute; left: 1400px; top: 150px; width: 460px; height: 870px; box-sizing: border-box; padding: 34px 34px; border-radius: 30px; overflow: hidden;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); opacity: 0;
  -webkit-transition: opacity 0.2s; transition: opacity 0.2s;
}
.gpanel.on { opacity: 1; }
.gp-ch { font-size: 30px; font-weight: 700; line-height: 38px; max-height: 76px; overflow: hidden; }
.gp-n { margin-right: 14px; color: rgba(245, 245, 247, 0.45); font-weight: 600; }
.gp-now { margin-top: 34px; font-size: 22px; line-height: 30px; white-space: nowrap; }
.gp-tag { display: inline-block; padding: 0 12px; margin-right: 14px; border-radius: 8px; font-size: 18px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: rgba(255, 255, 255, 0.14); }
.gp-time { color: rgba(245, 245, 247, 0.6); font-weight: 500; -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; }
.gp-title { margin-top: 14px; font-size: 32px; font-weight: 600; line-height: 40px; max-height: 120px; overflow: hidden; }
.gp-prog { margin-top: 20px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.gp-prog div { height: 100%; border-radius: 3px; background: #F5F5F7; }
.gp-left { margin-top: 10px; font-size: 21px; line-height: 28px; color: rgba(245, 245, 247, 0.55); }
.gp-desc { margin-top: 20px; font-size: 22px; line-height: 32px; max-height: 192px; overflow: hidden; color: rgba(245, 245, 247, 0.7); }
.gp-nh { margin-top: 30px; margin-bottom: 6px; font-size: 18px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(245, 245, 247, 0.5); }
.gp-next { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 24px; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-next .tm { display: inline-block; width: 86px; color: rgba(245, 245, 247, 0.55); -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; }
.gp-empty { margin-top: 34px; font-size: 24px; line-height: 34px; color: rgba(245, 245, 247, 0.55); }
.gp-sk { height: 22px; margin-top: 22px; border-radius: 11px; background: rgba(255, 255, 255, 0.08); -webkit-animation: skel 1.4s ease-in-out infinite; animation: skel 1.4s ease-in-out infinite; }
.gp-sk.w1 { width: 40%; margin-top: 40px; } .gp-sk.w2 { width: 90%; height: 32px; } .gp-sk.w3 { width: 100%; height: 6px; } .gp-sk.w4 { width: 70%; }
.old .gp-sk { -webkit-animation: none; animation: none; }
.col-title { height: 56px; padding-left: 26px; font-size: 25px; font-weight: 600; color: rgba(255, 255, 255, 0.5); line-height: 56px; }
/* The lists scroll natively (finger, mouse wheel, Magic Remote wheel); only the rows in view are drawn, on a spacer
 * as tall as the whole list. No scrollbar: the focus and the finger are the scrollbar. */
.rows {
  position: relative; height: 814px; overflow-x: hidden; overflow-y: auto;
  -ms-touch-action: pan-y; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
  overflow-anchor: none;   /* rows come and go while scrolling: the browser must not "helpfully" shift the view */
}
.rows::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rows .spacer { width: 1px; }
.row {
  position: absolute; left: 0; right: 0; height: 74px; border-radius: 22px; padding: 0 26px;
  font-size: 30px; font-weight: 500; line-height: 74px; color: rgba(245, 245, 247, 0.72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
}
.row .cnt { color: rgba(245, 245, 247, 0.4); font-weight: 600; margin-right: 12px; }
.row.focus .cnt { color: rgba(29, 29, 31, 0.5); }
.column.dim .row.focus .cnt { color: rgba(245, 245, 247, 0.5); }
.row .n { display: inline-block; width: 90px; color: rgba(245, 245, 247, 0.4); font-weight: 600; }
.row .star { color: #FFD60A; margin-right: 10px; }
.row.focus .star { color: #B58A00; }
/* Now and next for the focused channel, at the right of the "Channels" title */
.col-title .epg { float: right; padding-right: 26px; max-width: 900px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: rgba(245, 245, 247, 0.55); }
.col-hint { margin-left: 18px; font-size: 21px; font-weight: 500; opacity: 0.75; }
.col-title .epg b { color: rgba(245, 245, 247, 0.85); font-weight: 600; }
.row.on { color: #F5F5F7; font-weight: 600; background: rgba(255, 255, 255, 0.08); }
.row.focus { background: #FFF; color: #1D1D1F; -webkit-transform: scale(1.03); transform: scale(1.03); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4); z-index: 2; }
.row.focus .n { color: rgba(29, 29, 31, 0.5); }
.column.dim .row.focus { background: rgba(255, 255, 255, 0.18); color: #F5F5F7; -webkit-transform: none; transform: none; box-shadow: none; }
.column.dim .row.focus .n { color: rgba(245, 245, 247, 0.5); }
/* The channel column while loading, after a failure (with Retry), or for an empty category. */
.list-state { position: absolute; left: 0; right: 0; top: 190px; text-align: center; }
.list-state .mini { position: relative; width: 220px; height: 180px; margin: 0 auto; }
.list-state .wave {
  position: absolute; left: 20px; top: 14px; width: 180px; height: 180px; border-radius: 50%;
  box-sizing: border-box; border: 3px solid rgba(245, 245, 247, 0.45); opacity: 0;
  -webkit-animation: wave 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; animation: wave 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.list-state .w2 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.list-state .tv { position: absolute; left: 44px; top: 40px; }
.list-state.wait .tv { -webkit-animation: bob 1.6s ease-in-out infinite alternate; animation: bob 1.6s ease-in-out infinite alternate; }
.list-state.fail .tv {
  top: 30px; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
  -webkit-animation: wobble 1.8s ease-in-out infinite alternate; animation: wobble 1.8s ease-in-out infinite alternate;
}
.list-state .d { opacity: 0.25; -webkit-animation: dot 1.2s ease-in-out infinite; animation: dot 1.2s ease-in-out infinite; }
.list-state .d2 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.list-state .d3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.list-state .spark { -webkit-animation: spark 1.4s step-end infinite; animation: spark 1.4s step-end infinite; }
.list-state .s2 { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; }
.list-state .noise { -webkit-animation: noise 0.3s step-end infinite; animation: noise 0.3s step-end infinite; }
.list-state .n2 { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
.list-state .msg { margin-top: 16px; font-size: 30px; line-height: 40px; color: rgba(245, 245, 247, 0.62); }
.list-state .note { margin: 10px auto 0; width: 900px; min-height: 36px; font-size: 25px; line-height: 36px; color: rgba(245, 245, 247, 0.4); }
.list-state.empty .msg { margin-top: 120px; }
.list-state .retry {
  display: inline-block; margin-top: 30px; height: 74px; padding: 0 40px 0 30px; border-radius: 37px;
  font-size: 30px; font-weight: 600; line-height: 74px; color: #F5F5F7;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
}
.list-state .retry.focus { background: #FFF; color: #1D1D1F; -webkit-transform: scale(1.06); transform: scale(1.06); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4); }
.list-state .retry svg { vertical-align: middle; margin: -4px 12px 0 0; }

/* MARK: - Header buttons: the device and sign out, pills in the guide's header (Up from the top row reaches them) */
#hbtns { position: absolute; right: 230px; top: 46px; white-space: nowrap; }
.hbtn {
  display: inline-block; height: 64px; margin-left: 16px; padding: 0 30px 0 24px; border-radius: 32px;
  font-size: 26px; font-weight: 600; line-height: 64px; color: rgba(245, 245, 247, 0.8); white-space: nowrap;
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
}
.hbtn.focus { background: #FFF; color: #1D1D1F; -webkit-transform: scale(1.06); transform: scale(1.06); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4); }
.hbtn svg { vertical-align: middle; margin: -4px 10px 0 0; }

/* MARK: - Top bar: the sections on every browsing screen */
#topnav { display: none; position: absolute; left: 0; top: 0; width: 1920px; height: 124px; padding: 25px 60px 25px 76px; box-sizing: border-box; z-index: 7; }
#topnav.on { display: flex; align-items: center; }
/* The sections as pills inside one big glass pill (Free My TV's night glass; no backdrop-filter on old TVs). */
#navtabs {
  position: relative; flex-shrink: 0; height: 58px; padding: 8px; border-radius: 37px; white-space: nowrap; font-size: 0;
  background: -webkit-linear-gradient(top, rgba(52, 52, 58, 0.78), rgba(22, 22, 26, 0.66));
  background: linear-gradient(rgba(52, 52, 58, 0.78), rgba(22, 22, 26, 0.66));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.navtab {
  display: inline-block; height: 58px; margin-right: 6px; padding: 0 28px; border-radius: 29px;
  font-size: 28px; font-weight: 600; line-height: 58px; color: rgba(245, 245, 247, 0.6); cursor: pointer;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.2s, color 0.2s; transition: transform 0.2s, background-color 0.2s, color 0.2s;
}
.navtab svg { vertical-align: middle; margin: -5px 10px 0 0; }
.navtab:last-child { margin-right: 0; }
.navtab.focus { -webkit-transform: scale(1.06); transform: scale(1.06); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
@media (hover: hover) { .navtab:hover:not(.focus) { background: rgba(255, 255, 255, 0.1); color: #F5F5F7; } }

/* MARK: - Home: a greeting, big section tiles, then shelves */
#home-body { position: absolute; left: 0; top: 120px; width: 1920px; bottom: 0; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; scrollbar-width: none; }
#home-body::-webkit-scrollbar { display: none; }
#home .hello { position: absolute; left: 80px; top: 30px; font-size: 56px; font-weight: 700; line-height: 64px; }
#home .hello-sub { position: absolute; left: 80px; top: 100px; font-size: 28px; line-height: 36px; color: rgba(245, 245, 247, 0.55); }
#home .hello-alert { position: absolute; left: 80px; top: 146px; max-width: 1400px; font-size: 26px; line-height: 34px; font-weight: 600; color: #FF453A; }
#home .hello-alert:empty { display: none; }
#home-rows { position: relative; margin: 170px 0 0 80px; padding-bottom: 60px; }
/* A shelf still loading: poster-sized placeholders that pulse in a wave (opacity only, cheap on old TVs). */
.skel { display: inline-block; vertical-align: top; width: 150px; margin-right: 30px; -webkit-animation: skel 1.4s ease-in-out infinite; animation: skel 1.4s ease-in-out infinite; }
.skel .sp { height: 225px; border-radius: 16px; background: rgba(255, 255, 255, 0.08); }
.skel .sl { width: 128px; height: 20px; margin-top: 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); }
.skel .sl.s2 { width: 84px; margin-top: 10px; }
.old .skel { -webkit-animation: none; animation: none; }
@-webkit-keyframes skel { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes skel { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.shelf { position: relative; overflow: hidden; margin-left: -20px; padding: 14px 0 14px 20px; }
.shelf .strip, .sgroup .strip {
  white-space: nowrap; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.shelf-title { font-size: 28px; font-weight: 600; line-height: 40px; margin: 4px 0 10px; color: rgba(245, 245, 247, 0.75); }
.shelf-hint { display: none; margin-left: 20px; font-size: 22px; font-weight: 500; opacity: 0.6; }
.shelf.hot .shelf-hint { display: inline; }
.tile {
  display: inline-block; vertical-align: top; position: relative; width: 300px; height: 176px; margin-right: 40px; border-radius: 30px; cursor: pointer;
  color: #F5F5F7; text-align: center;
  background: -webkit-linear-gradient(top, rgba(52, 52, 58, 0.8), rgba(28, 28, 32, 0.75)); background: linear-gradient(rgba(52, 52, 58, 0.8), rgba(28, 28, 32, 0.75));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), inset 0 1.5px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
}
.tile svg { margin-top: 26px; }
.tile .tl { position: absolute; left: 0; right: 0; bottom: 22px; font-size: 30px; font-weight: 600; line-height: 36px; }
.tile.focus { -webkit-transform: scale(1.08); transform: scale(1.08); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5); }
/* Equal side margins, five slightly wider shortcuts, and room for the focus scale. */
.shelf.tiles { margin-right: 60px; padding-right: 20px; }
.shelf.tiles .strip { display: flex; }
.shelf.tiles .tile { flex: 1; min-width: 0; }
.shelf.tiles .tile:last-child { margin-right: 0; }
.shelf .card, .sgroup .card { position: relative; display: inline-block; vertical-align: top; width: 150px; margin-right: 30px; }
.shelf .card .pic, .sgroup .card .pic { width: 150px; height: 225px; }
.ccard {
  display: inline-block; vertical-align: top; position: relative; width: 300px; height: 120px; margin-right: 40px; border-radius: 24px; cursor: pointer; overflow: hidden;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  -webkit-transition: -webkit-transform 0.25s, background-color 0.2s, color 0.2s; transition: transform 0.25s, background-color 0.2s, color 0.2s;
}
.ccard .cn { position: absolute; left: 24px; top: 18px; font-size: 24px; font-weight: 700; color: rgba(245, 245, 247, 0.45); }
.ccard .cname { position: absolute; left: 24px; right: 24px; top: 52px; font-size: 27px; font-weight: 600; line-height: 34px; max-height: 68px; overflow: hidden; white-space: normal; }
.ccard.focus { -webkit-transform: scale(1.06); transform: scale(1.06); }
.ccard.focus .cn { color: inherit; opacity: 0.6; }

/* MARK: - Poster cards: the picture or a drawn fallback, the title under it */
.card { position: absolute; width: 164px; cursor: pointer; }
.card .pic {
  position: relative; width: 164px; height: 246px; border-radius: 16px; overflow: hidden; background: #26262B;
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.2s; transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.2s;
}
.card .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.card .cap {
  margin-top: 12px; font-size: 22px; line-height: 28px; max-height: 56px; overflow: hidden; color: rgba(245, 245, 247, 0.72); white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.card.focus .pic { -webkit-transform: scale(1.07); transform: scale(1.07); }
.card.focus .cap { color: #F5F5F7; font-weight: 600; }
.fb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; color: rgba(255, 255, 255, 0.55); }
.fb svg { margin-top: 30%; }
.fb .fbt { position: absolute; left: 12px; right: 12px; bottom: 14px; font-size: 18px; font-weight: 600; line-height: 22px; max-height: 66px; overflow: hidden; color: rgba(255, 255, 255, 0.85); white-space: normal; }
.fb0 { background: -webkit-linear-gradient(top, #3B4C9B, #1A1F48); background: linear-gradient(#3B4C9B, #1A1F48); }
.fb1 { background: -webkit-linear-gradient(top, #7A3B9B, #2E1340); background: linear-gradient(#7A3B9B, #2E1340); }
.fb2 { background: -webkit-linear-gradient(top, #9B3B4C, #3D121A); background: linear-gradient(#9B3B4C, #3D121A); }
.fb3 { background: -webkit-linear-gradient(top, #2F7A55, #0F2E20); background: linear-gradient(#2F7A55, #0F2E20); }
.fb4 { background: -webkit-linear-gradient(top, #A06A2A, #3D260C); background: linear-gradient(#A06A2A, #3D260C); }
.fb5 { background: -webkit-linear-gradient(top, #2A7A93, #0E2D38); background: linear-gradient(#2A7A93, #0E2D38); }
.fb6 { background: -webkit-linear-gradient(top, #6B6F7C, #24262C); background: linear-gradient(#6B6F7C, #24262C); }
.fb7 { background: -webkit-linear-gradient(top, #93306E, #370F28); background: linear-gradient(#93306E, #370F28); }
.pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: rgba(0, 0, 0, 0.55); }
.pbar div { height: 100%; background: #F5F5F7; }

/* MARK: - Movies and series: categories left, a poster grid right (7 columns) */
.column.grid { left: 600px; width: 1280px; }
.rows.posters { padding-left: 14px; }
.rows.posters .card { margin-top: 14px; }

/* MARK: - A title's page */
#detail { background: #0B0B0D; }
#detail .bg { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background-size: cover; background-position: center top; opacity: 0.85; }
#detail .shade {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  background: -webkit-linear-gradient(left, rgba(11, 11, 13, 0.97) 0%, rgba(11, 11, 13, 0.88) 45%, rgba(11, 11, 13, 0.55) 100%);
  background: linear-gradient(90deg, rgba(11, 11, 13, 0.97) 0%, rgba(11, 11, 13, 0.88) 45%, rgba(11, 11, 13, 0.55) 100%);
}
#detail .pic { position: absolute; left: 100px; top: 140px; width: 360px; height: 540px; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); background: #26262B; }
#detail .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
#detail .info { position: absolute; left: 540px; right: 140px; top: 140px; }
#detail .title { font-size: 62px; font-weight: 700; line-height: 72px; max-height: 144px; overflow: hidden; }
#detail .meta { margin-top: 16px; font-size: 28px; line-height: 38px; color: rgba(245, 245, 247, 0.62); }
#detail .plot { margin-top: 22px; font-size: 28px; line-height: 42px; max-height: 210px; overflow: hidden; color: rgba(245, 245, 247, 0.85); }
#detail .credits { margin-top: 18px; font-size: 25px; line-height: 36px; color: rgba(245, 245, 247, 0.6); }
#detail .credits div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#detail .credits b { color: #F5F5F7; font-weight: 600; margin-right: 10px; }
#detail .btns { margin-top: 34px; white-space: nowrap; }
#detail .btn {
  display: inline-block; height: 80px; margin-right: 16px; padding: 0 36px 0 30px; border-radius: 40px; cursor: pointer;
  font-size: 28px; font-weight: 600; line-height: 80px; color: #F5F5F7; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s; transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
}
#detail .btn svg { vertical-align: middle; margin: -5px 12px 0 0; }
#detail .btn.danger { color: #FF7B70; }
#detail .btn.focus { -webkit-transform: scale(1.06); transform: scale(1.06); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
#detail.series .pic { width: 260px; height: 390px; top: 130px; }
#detail.series .info { left: 420px; top: 130px; }
#detail.series .title { max-height: 72px; }
#detail.series .plot { max-height: 126px; }
#detail.series .credits { max-height: 72px; overflow: hidden; }
#detail .seasons { display: none; position: absolute; left: 100px; right: 100px; top: 600px; white-space: nowrap; overflow: hidden; }
#detail .eps { display: none; position: absolute; left: 100px; right: 100px; top: 690px; bottom: 24px; overflow-y: auto; scrollbar-width: none; }
#detail .eps::-webkit-scrollbar { display: none; }
#detail.series .seasons, #detail.series .eps { display: block; }
.dseason {
  display: inline-block; height: 64px; margin-right: 14px; padding: 0 30px; border-radius: 32px; cursor: pointer;
  font-size: 26px; font-weight: 600; line-height: 64px; color: rgba(245, 245, 247, 0.8); background: rgba(255, 255, 255, 0.08);
}
.dseason.on { color: #F5F5F7; box-shadow: inset 0 0 0 2px rgba(245, 245, 247, 0.7); }
.dep {
  position: relative; min-height: 96px; margin-bottom: 12px; padding: 18px 30px 18px 84px; border-radius: 22px; cursor: pointer; overflow: hidden;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dep > svg { position: absolute; left: 30px; top: 22px; }
.dep .t { font-size: 29px; font-weight: 600; line-height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep .en { margin-right: 14px; opacity: 0.55; }
.dep .badge { display: inline-block; margin-left: 16px; padding: 0 14px; height: 32px; border-radius: 8px; font-size: 20px; line-height: 32px; vertical-align: 4px; background: rgba(255, 255, 255, 0.18); }
.dep .emeta { font-size: 22px; line-height: 30px; color: rgba(245, 245, 247, 0.55); }
.dep .eplot { font-size: 22px; line-height: 30px; color: rgba(245, 245, 247, 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep .pbar { height: 6px; }
.dep.focus .emeta, .dep.focus .eplot { color: inherit; opacity: 0.72; }
#detail.loading .title:after { content: ''; }

/* MARK: - Search */
#search .sbar { position: absolute; left: 80px; top: 150px; }
.sbox {
  position: relative; width: 1100px; height: 84px; border-radius: 42px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  -webkit-transition: background-color 0.2s, color 0.2s; transition: background-color 0.2s, color 0.2s;
}
.sbox #sicon svg { position: absolute; left: 30px; top: 28px; }
.sbox input {
  position: absolute; left: 78px; right: 30px; top: 0; height: 84px; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 32px; color: inherit; padding: 0;
}
.sbox input::-webkit-input-placeholder { color: rgba(245, 245, 247, 0.4); }
.sbox.focus input::-webkit-input-placeholder { color: rgba(29, 29, 31, 0.45); }
#search .chips { position: absolute; left: 80px; top: 262px; white-space: nowrap; }
.chip {
  display: inline-block; height: 60px; margin-right: 14px; padding: 0 28px; border-radius: 30px; cursor: pointer;
  font-size: 25px; font-weight: 600; line-height: 60px; color: rgba(245, 245, 247, 0.8); background: rgba(255, 255, 255, 0.08);
  -webkit-transition: -webkit-transform 0.2s, background-color 0.2s, color 0.2s; transition: transform 0.2s, background-color 0.2s, color 0.2s;
}
.chip.on { color: #F5F5F7; box-shadow: inset 0 0 0 2px rgba(245, 245, 247, 0.7); }
.chip.focus { -webkit-transform: scale(1.06); transform: scale(1.06); }
#sres { position: absolute; left: 60px; right: 0; top: 350px; bottom: 0; overflow: hidden; }
.sgroup { position: relative; overflow: hidden; margin: 0 0 16px 0; padding: 10px 0 10px 20px; }
.sgroup-title { font-size: 28px; font-weight: 600; line-height: 40px; margin-bottom: 10px; color: rgba(245, 245, 247, 0.75); }
.sgroup-title .cnt { color: rgba(245, 245, 247, 0.4); font-weight: 500; }
.sclear { margin-left: 30px; font-size: 22px; font-weight: 500; color: rgba(245, 245, 247, 0.5); cursor: pointer; }
.snote { margin: 20px 0; font-size: 27px; color: rgba(245, 245, 247, 0.55); }
.snote.small { font-size: 22px; }
#sres .snote { margin-left: 20px; }

/* MARK: - Settings: sections left, rows right */
#settings .smenu {
  position: absolute; left: 60px; top: 140px; width: 430px; bottom: 60px; border-radius: 30px; padding: 26px 18px; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.smenu .stitle { padding: 0 20px 18px; font-size: 40px; font-weight: 700; line-height: 50px; }
.smenu .it {
  height: 68px; margin-bottom: 6px; padding: 0 20px; border-radius: 20px; cursor: pointer; white-space: nowrap;
  font-size: 27px; font-weight: 500; line-height: 68px; color: rgba(245, 245, 247, 0.75);
}
.smenu .it svg { vertical-align: middle; margin: -5px 16px 0 0; }
.smenu .it.on { color: #F5F5F7; background: rgba(255, 255, 255, 0.1); }
/* The section's panel is a card like the menu, with room inside for a focused row or theme to grow. */
#settings .spanel {
  position: absolute; left: 530px; top: 140px; right: 60px; bottom: 60px; overflow: hidden; border-radius: 30px; padding: 26px 30px; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.spanel .sh { font-size: 40px; font-weight: 700; line-height: 50px; margin: 0 0 26px; }
/* Keep the section title fixed while longer settings lists scroll independently. */
.settings-scroll {
  position: absolute; left: 20px; right: 20px; top: 92px; bottom: 16px; box-sizing: border-box; padding: 10px;
  overflow-x: hidden; overflow-y: auto; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
.settings-scroll::-webkit-scrollbar { width: 6px; }
.settings-scroll::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(160,160,170,.5); }
.srow {
  position: relative; min-height: 90px; margin-bottom: 12px; padding: 0 30px; border-radius: 22px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.srow .l { font-size: 29px; font-weight: 500; line-height: 90px; padding-right: 560px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .v { position: absolute; right: 30px; top: 0; max-width: 540px; font-size: 27px; line-height: 90px; color: rgba(245, 245, 247, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .v { font-weight: 500; }
.srow .v svg { vertical-align: middle; margin-top: -4px; }
.srow .v .arr { opacity: 0.7; }
.srow .v .arr.al { margin-right: 12px; }
.srow .v .arr.ar { margin-left: 12px; }
.srow .v.small { font-size: 19px; line-height: 26px; top: 19px; white-space: normal; max-height: 52px; }
.srow .h { margin-top: -14px; padding-bottom: 20px; font-size: 23px; line-height: 32px; opacity: 0.75; white-space: normal; }
.srow.info { cursor: default; }
.srow.danger .l { color: #FF7B70; }
.srow.focus .v { color: inherit; opacity: 0.75; }
.themes { white-space: normal; font-size: 0; }   /* no gaps between the inline cards: four fit in a row */
.theme { display: inline-block; vertical-align: top; width: 290px; margin: 0 24px 26px 0; cursor: pointer; }
.theme .tp { position: relative; height: 160px; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.theme .tbar { position: absolute; left: 18px; top: 18px; width: 96px; height: 20px; border-radius: 10px; }
.theme .tl1 { position: absolute; left: 18px; right: 18px; top: 58px; height: 26px; border-radius: 9px; }
.theme .tl2 { position: absolute; left: 18px; right: 70px; top: 96px; height: 26px; border-radius: 9px; }
.theme .tdot { position: absolute; right: 18px; bottom: 18px; width: 24px; height: 24px; border-radius: 12px; }
.theme .tn { margin-top: 12px; font-size: 26px; font-weight: 600; line-height: 34px; color: rgba(245, 245, 247, 0.8); }
.theme .tn svg { vertical-align: middle; margin: -4px 8px 0 0; }
.theme.focus .tp { box-shadow: 0 0 0 5px #F5F5F7, 0 18px 40px rgba(0, 0, 0, 0.5); -webkit-transform: scale(1.04); transform: scale(1.04); }
.theme.focus .tn { color: #F5F5F7; }

/* MARK: - Subtitles panel, over the player */
#subs {
  display: none; position: absolute; right: 60px; top: 110px; width: 700px; z-index: 11; border-radius: 30px; overflow: hidden;
  background: -webkit-linear-gradient(top, rgba(40, 40, 44, 0.97), rgba(22, 22, 25, 0.97)); background: linear-gradient(rgba(40, 40, 44, 0.97), rgba(22, 22, 25, 0.97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
#subs.on { display: block; }
#subs .title { padding: 30px 34px 14px; font-size: 34px; font-weight: 700; color: #F5F5F7; }
#subs .list { max-height: 560px; overflow: hidden; padding: 0 16px 20px; }
#subs .it { height: 72px; padding: 0 22px; border-radius: 18px; font-size: 26px; line-height: 72px; color: rgba(245, 245, 247, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
#subs .it svg { vertical-align: middle; margin: -4px 10px 0 0; }
#subs .it.off { color: rgba(245, 245, 247, 0.5); white-space: normal; line-height: 34px; height: auto; padding: 18px 22px; cursor: default; }

/* MARK: - The bar while a movie or an episode plays: title, time, progress, and the controls with their keys */
#osd .prog { display: none; position: absolute; left: 44px; right: 44px; bottom: 26px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
#osd .prog .fill { width: 0; height: 100%; border-radius: 4px; background: #F5F5F7; }
#osd .time, #osd .rem { display: none; position: absolute; top: 132px; font-size: 24px; line-height: 32px; color: rgba(245, 245, 247, 0.7); }
#osd .time { left: 44px; }
#osd .rem { right: 44px; }
/* Movies and series, as on Apple TV: title, then the progress line across with the times under its ends, then the
   transport (−30, play, +30) small and centred, and Subtitles and Back on the right. */
#osd.vod { height: 300px; }
#osd.vod .prog, #osd.vod .time, #osd.vod .rem { display: block; }
#osd.vod .num { display: none; }
#osd.vod .name { left: 44px; top: 24px; right: 340px; font-size: 40px; line-height: 60px; }
#osd.vod .state { right: 44px; left: auto; top: 34px; line-height: 40px; font-size: 24px; }
#osd.vod .prog { top: 112px; bottom: auto; height: 8px; }
#osd .prog .fill { position: relative; }
#osd.vod .prog .fill:after { content: ''; position: absolute; right: -10px; top: -6px; width: 20px; height: 20px; border-radius: 10px; background: #F5F5F7; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
#osd.vod .btns { display: block; left: 44px; right: 44px; top: 176px; text-align: center; }
#osd .b.vb { position: relative; width: 72px; height: 72px; line-height: 72px; margin: 0 14px; border-radius: 36px; vertical-align: middle; }
#osd .b.vb svg { width: 32px; height: 32px; }
#osd .b.vb.main { width: 84px; height: 84px; line-height: 84px; border-radius: 42px; }
#osd .b.vb.main svg { width: 38px; height: 38px; }
#osd .b.vb.side { position: absolute; top: 6px; margin: 0; }
#osd .b.vb.s1 { right: 120px; }
#osd .b.vb.s2 { right: 0; }
#osd .b .k { position: absolute; left: -40px; right: -40px; top: 80px; line-height: 24px; font-size: 17px; font-weight: 600; color: rgba(245, 245, 247, 0.62); text-align: center; white-space: nowrap; }
#osd .b.vb.main .k { top: 88px; }
#osd .b .k svg { width: 16px; height: 16px; margin: -3px 2px 0 0; }
#stage.ptr #osd .state { right: 568px; }
#stage.ptr #osd .name { right: 900px; }
#stage.ptr #osd .epg { right: 900px; }
#stage.ptr #osd.vod .name { right: 340px; }
#stage.ptr #osd.vod .state { right: 44px; }

/* MARK: - Device: "what are you on?", four cards (first run, and from the guide's header) */
#device .dev-title { position: absolute; left: 0; right: 0; top: 232px; text-align: center; font-size: 54px; font-weight: 600; line-height: 64px; }
#device .dev-sub { position: absolute; left: 0; right: 0; top: 308px; text-align: center; font-size: 28px; line-height: 40px; color: rgba(245, 245, 247, 0.62); }
#device-cards { position: absolute; left: 180px; top: 400px; width: 1560px; white-space: nowrap; font-size: 0; }
#device .dev {
  display: inline-block; vertical-align: top; width: 360px; height: 400px; margin-right: 40px; border-radius: 34px; text-align: center;
  color: rgba(245, 245, 247, 0.85);
  background: -webkit-linear-gradient(top, rgba(34, 34, 38, 0.72), rgba(17, 17, 19, 0.6));
  background: linear-gradient(rgba(34, 34, 38, 0.72), rgba(17, 17, 19, 0.6));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), inset 0 1.5px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
}
#device .dev:last-child { margin-right: 0; }
#device .dev svg { margin-top: 56px; }
#device .dev-name { margin-top: 24px; font-size: 36px; font-weight: 600; line-height: 44px; }
#device .dev-how { margin-top: 8px; font-size: 24px; line-height: 32px; opacity: 0.6; }
#device .dev.focus { background: #FFF; color: #1D1D1F; -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
#device .dev-hint { position: absolute; left: 0; right: 0; top: 870px; text-align: center; font-size: 24px; line-height: 32px; color: rgba(245, 245, 247, 0.4); }

/* Phone: the same stage on a small screen, so what gets touched grows */
.m-phone .row { height: 100px; line-height: 100px; font-size: 38px; }
.m-phone .row .n { width: 110px; }

.m-phone #hbtns { -webkit-transform: scale(1.35); transform: scale(1.35); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; }
.m-phone #veil .chip { height: 84px; padding: 0 40px 0 30px; font-size: 32px; line-height: 84px; }
.m-phone .list-state .retry { height: 96px; font-size: 36px; line-height: 96px; }
.m-phone #confirm .btn { width: 340px; height: 104px; font-size: 36px; line-height: 104px; }
.m-phone #confirm .box.wide .btn { width: 300px; }
.m-phone #osd .b { width: 110px; height: 110px; line-height: 110px; border-radius: 55px; }
.m-phone #osd .b svg { width: 44px; height: 44px; }
.m-phone #osd .b.vb { width: 84px; height: 84px; line-height: 84px; border-radius: 42px; }
.m-phone #osd .b.vb.main { width: 96px; height: 96px; line-height: 96px; border-radius: 48px; }
.m-phone #osd .b.vb.s1 { right: 132px; }
#stage.m-phone.ptr #osd .state { right: 566px; }
#stage.m-phone.ptr #osd .name { right: 900px; }

/* Old engines (Chromium ≤ 56: LG webOS 4, Samsung 2017-2018): no focus transitions, no scaling, no soft shadows and
 * no crossfades. Measured on a low-end LG by webos-iptv-player: half the main-thread work. */
.old .row, .old .pad-ui .key, .old .hbtn, .old .dev, .old #confirm .btn, .old .list-state .retry, .old .screen, .old #veil, .old #osd, .old #confirm, .old #confirm .box, .old .pad-ui .code span {
  -webkit-transition: none !important; transition: none !important;
}
.old .row.focus, .old .pad-ui .key.focus, .old .hbtn.focus, .old .dev.focus, .old #confirm .btn.focus, .old .list-state .retry.focus {
  -webkit-transform: none !important; transform: none !important; box-shadow: none !important;
}
.old .pad-ui .code span.pop { -webkit-animation: none; animation: none; }

/* Outside the stage, in screen pixels: a phone or tablet held upright gets a nudge to turn (never a block). */
#rotate {
  display: none; position: fixed; left: 50%; top: 12px; z-index: 20; padding: 10px 18px; border-radius: 20px;
  background: rgba(245, 245, 247, 0.94); color: #1D1D1F; font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px; font-weight: 500; line-height: 20px; white-space: nowrap;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
#rotate.on { display: block; }

#confirm {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 10; background: rgba(0, 0, 0, 0.62);
  opacity: 0; visibility: hidden; -webkit-transition: opacity 0.25s, visibility 0s 0.25s; transition: opacity 0.25s, visibility 0s 0.25s;
}
#confirm { pointer-events: none; }
#confirm.on { opacity: 1; visibility: visible; pointer-events: auto; -webkit-transition: opacity 0.25s; transition: opacity 0.25s; }
#confirm .box {
  position: absolute; left: 560px; top: 320px; width: 800px; height: 440px; border-radius: 34px; text-align: center;
  background: -webkit-linear-gradient(top, rgba(48, 48, 52, 0.98), rgba(28, 28, 30, 0.98));
  background: linear-gradient(rgba(48, 48, 52, 0.98), rgba(28, 28, 30, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1.5px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  -webkit-transform: scale(0.94); transform: scale(0.94);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2); transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
#confirm.on .box { -webkit-transform: scale(1); transform: scale(1); }
#confirm .box.wide { left: 430px; width: 1060px; }
#confirm .title { position: absolute; left: 0; right: 0; top: 76px; font-size: 46px; font-weight: 600; line-height: 56px; }
#confirm .text { position: absolute; left: 80px; right: 80px; top: 152px; font-size: 28px; line-height: 40px; color: rgba(245, 245, 247, 0.62); }
#confirm .btns { position: absolute; left: 0; right: 0; top: 290px; white-space: nowrap; }
#confirm .btn {
  display: inline-block; width: 300px; height: 84px; margin: 0 12px; border-radius: 42px;
  font-size: 30px; font-weight: 600; line-height: 84px; color: #F5F5F7; background: rgba(255, 255, 255, 0.08);
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.2s, color 0.2s;
}
#confirm .btn.danger { color: #FF453A; }
#confirm .btn.focus { background: #FFF; color: #1D1D1F; -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4); }
#confirm .btn.danger.focus { background: #FF453A; color: #FFF; }

/* MARK: - Player */
#player { background: #000; }
#video { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: #000; object-fit: contain; }
#osd {
  position: absolute; left: 60px; bottom: 60px; width: 1800px; height: 150px; border-radius: 34px; padding: 0 44px;
  box-sizing: border-box;
  background: -webkit-linear-gradient(top, rgba(34, 34, 38, 0.82), rgba(17, 17, 19, 0.72));
  background: linear-gradient(rgba(34, 34, 38, 0.82), rgba(17, 17, 19, 0.72));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 1.5px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s, visibility 0s 0.3s; transition: opacity 0.3s, visibility 0s 0.3s;
}
#osd { pointer-events: none; }
#osd.on { opacity: 1; visibility: visible; pointer-events: auto; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
#osd { z-index: 9; }   /* above the veil, so typed channel numbers show on the loader and the error screen */
/* Buttons on the bar (back to the guide, channel down, channel up) once a finger or a pointer is in use. */
#osd .btns { display: none; position: absolute; right: 44px; top: 33px; white-space: nowrap; }
#stage.ptr #osd .btns { display: block; }
#stage.ptr #osd .state { right: 468px; }
#stage.ptr #osd .name { right: 800px; }
#osd .b {
  display: inline-block; width: 84px; height: 84px; margin-left: 16px; border-radius: 42px; text-align: center; line-height: 84px;
  color: #F5F5F7; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
#osd .b svg { vertical-align: middle; width: 36px; height: 36px; }
#osd .num { position: absolute; left: 44px; top: 36px; font-size: 64px; font-weight: 700; color: rgba(245, 245, 247, 0.5); line-height: 78px; }
#osd .name { position: absolute; left: 200px; top: 32px; right: 400px; font-size: 44px; font-weight: 600; line-height: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#osd .state { position: absolute; right: 44px; top: 36px; font-size: 28px; color: rgba(245, 245, 247, 0.62); line-height: 78px; }
/* Live bar with a programme: "NOW" + title + times, then how far along, the time left and what's next. */
#osd .epg { position: absolute; left: 200px; right: 400px; top: 96px; color: rgba(245, 245, 247, 0.55); }
#osd .e-now { font-size: 28px; line-height: 38px; color: #F5F5F7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#osd .e-tag { display: inline-block; padding: 0 12px; height: 28px; margin-right: 14px; border-radius: 8px; vertical-align: 3px; font-size: 17px; font-weight: 700; line-height: 28px; letter-spacing: 1px; text-transform: uppercase; background: rgba(255, 255, 255, 0.16); }
#osd .e-t { font-weight: 600; }
#osd .e-hr { margin-left: 16px; font-size: 24px; color: rgba(245, 245, 247, 0.55); -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; }
#osd .e-sub { margin-top: 12px; font-size: 22px; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#osd .e-pb { display: inline-block; width: 220px; height: 6px; margin: -3px 14px 0 0; border-radius: 3px; vertical-align: middle; overflow: hidden; background: rgba(255, 255, 255, 0.18); }
#osd .e-pb span { display: block; height: 100%; background: #F5F5F7; }
#osd .e-next { margin-left: 30px; }
#osd .e-next b { color: rgba(245, 245, 247, 0.85); font-weight: 600; }
#osd.has-epg { height: 200px; }
#osd.has-epg .name { top: 22px; line-height: 70px; }
#osd.has-epg .num { top: 18px; }
#osd.has-epg .state { top: 18px; }
#stage.ptr #osd .epg { right: 800px; }
#osd .state.bad { color: #FF453A; }
/* Live: a red dot with a ring pulsing out of it, like a broadcast's "on air" light. */
#osd .state.live { padding-left: 34px; color: #F5F5F7; font-weight: 600; }
#osd .state.live:before, #osd .state.live:after {
  content: ''; position: absolute; left: 0; top: 30px; width: 18px; height: 18px; border-radius: 50%; background: #FF453A;
}
#osd .state.live:after {
  opacity: 0;
  -webkit-animation: live-ring 1.8s ease-out infinite; animation: live-ring 1.8s ease-out infinite;
}
@-webkit-keyframes live-ring { 0% { -webkit-transform: scale(1); opacity: 0.6; } 100% { -webkit-transform: scale(2.6); opacity: 0; } }
@keyframes live-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } }

/* MARK: - Veil: the full-screen loader (connecting, loading a channel) and the "channel unavailable" screen.
 * The art is display:none unless its mode is on, so its animations don't run in the background on a slow TV. */
#veil {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 8;
  background: -webkit-linear-gradient(top, rgba(28, 28, 30, 0.97), rgba(11, 11, 13, 0.98));
  background: linear-gradient(rgba(28, 28, 30, 0.97), rgba(11, 11, 13, 0.98));
  opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s, visibility 0s 0.3s; transition: opacity 0.3s, visibility 0s 0.3s;
}
#veil { pointer-events: none; }
#veil.on { opacity: 1; visibility: visible; pointer-events: auto; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
#veil.dark { background: #000; }
#veil .art { display: none; position: absolute; left: 780px; top: 220px; width: 360px; height: 320px; }
#veil.wait .art-wait, #veil.fail .art-fail { display: block; }
#veil-title, #veil-sub, #veil-detail, #veil-hints { position: absolute; left: 160px; right: 160px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#veil-title { top: 590px; font-size: 48px; font-weight: 600; line-height: 60px; color: #F5F5F7; }
#veil-sub { top: 664px; font-size: 32px; line-height: 44px; color: rgba(245, 245, 247, 0.62); }
#veil-detail { top: 724px; font-size: 22px; line-height: 30px; color: rgba(245, 245, 247, 0.32); }
#veil-hints { display: none; top: 796px; height: 70px; }
#veil.fail #veil-hints { display: block; }
#stage.ptr #veil.wait.dark #veil-hints { display: block; }   /* while a channel loads, a finger or pointer needs a way out */
#veil .chip {
  display: inline-block; height: 64px; margin: 0 10px; padding: 0 30px 0 22px; border-radius: 32px;
  font-size: 26px; font-weight: 500; line-height: 64px; color: rgba(245, 245, 247, 0.85);
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
#veil .chip svg { vertical-align: middle; margin: -4px 12px 0 0; }
#veil .chip svg + svg { margin-left: -6px; }

/* Waiting: a TV sending out signal waves, three dots breathing on its screen. */
.art-wait .wave {
  position: absolute; left: 40px; top: 20px; width: 280px; height: 280px; border-radius: 50%;
  box-sizing: border-box; border: 3px solid rgba(245, 245, 247, 0.55); opacity: 0;
  -webkit-animation: wave 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; animation: wave 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.art-wait .w2 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.art-wait .w3 { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; }
.art-wait .tv {
  position: absolute; left: 70px; top: 52px;
  -webkit-animation: bob 1.6s ease-in-out infinite alternate; animation: bob 1.6s ease-in-out infinite alternate;
}
.art-wait .d { opacity: 0.25; -webkit-animation: dot 1.2s ease-in-out infinite; animation: dot 1.2s ease-in-out infinite; }
.art-wait .d2 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.art-wait .d3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }

/* Unavailable: a dizzy TV rocking on its feet, sparks off its bent antenna, static on the screen. */
.art-fail .float {
  position: absolute; left: 70px; top: 36px; width: 220px; height: 200px;
  -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
  -webkit-animation: wobble 1.8s ease-in-out infinite alternate; animation: wobble 1.8s ease-in-out infinite alternate;
}
.art-fail .shadow {
  position: absolute; left: 100px; top: 236px; width: 160px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  -webkit-animation: shadow 1.8s ease-in-out infinite alternate; animation: shadow 1.8s ease-in-out infinite alternate;
}
.art-fail .spark { -webkit-animation: spark 1.4s step-end infinite; animation: spark 1.4s step-end infinite; }
.art-fail .s2 { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; }
.art-fail .noise { -webkit-animation: noise 0.3s step-end infinite; animation: noise 0.3s step-end infinite; }
.art-fail .n2 { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }

@-webkit-keyframes wave { 0% { -webkit-transform: scale(0.45); opacity: 0.8; } 100% { -webkit-transform: scale(1.25); opacity: 0; } }
@keyframes wave { 0% { transform: scale(0.45); opacity: 0.8; } 100% { transform: scale(1.25); opacity: 0; } }
@-webkit-keyframes bob { 0% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(-10px); } }
@keyframes bob { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
@-webkit-keyframes dot { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@keyframes dot { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@-webkit-keyframes wobble { 0% { -webkit-transform: translateY(0) rotate(-4deg); } 100% { -webkit-transform: translateY(-12px) rotate(4deg); } }
@keyframes wobble { 0% { transform: translateY(0) rotate(-4deg); } 100% { transform: translateY(-12px) rotate(4deg); } }
@-webkit-keyframes shadow { 0% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.8); opacity: 0.55; } }
@keyframes shadow { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.55; } }
@-webkit-keyframes spark { 0% { opacity: 1; } 12% { opacity: 0; } 24% { opacity: 1; } 36% { opacity: 0; } 70% { opacity: 1; } }
@keyframes spark { 0% { opacity: 1; } 12% { opacity: 0; } 24% { opacity: 1; } 36% { opacity: 0; } 70% { opacity: 1; } }
@-webkit-keyframes noise { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes noise { 0% { opacity: 1; } 50% { opacity: 0; } }

/* MARK: - Toast */
#toast {
  position: absolute; left: 50%; top: 130px; padding: 0 36px; height: 72px; border-radius: 36px; pointer-events: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  background: rgba(245, 245, 247, 0.94); color: #1D1D1F; font-size: 28px; font-weight: 500; line-height: 72px; white-space: nowrap;
  opacity: 0; -webkit-transition: opacity 0.25s; transition: opacity 0.25s; z-index: 9;
}
#toast.on { opacity: 1; }

/* MARK: - Motion
   The lists redraw on every key, so a focused element is a new element and a transition alone would never play: the
   focus "pops" in with an animation that starts at the resting size and ends at the rule's own scale (no `to`
   keyframe). The home tiles' icons, and the bar's, add a small gesture of their own. Transform and opacity only;
   none of it in essential mode (old TVs). */
@-webkit-keyframes focus-pop { from { -webkit-transform: scale(1); } }
@keyframes focus-pop { from { transform: scale(1); } }
.tile.focus, .card.focus .pic, .ccard.focus, .navtab.focus, #detail .btn.focus, .theme.focus .tp, .dseason.focus, .chip.focus {
  -webkit-animation: focus-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.45); animation: focus-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.45);
}
.tile svg, .navtab svg, .smenu .it svg { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
.tile.focus svg { -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-delay: 0.08s; animation-delay: 0.08s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
.tile.focus.ti-live svg { -webkit-animation-name: icon-tune; animation-name: icon-tune; -webkit-transform-origin: 50% 90%; transform-origin: 50% 90%; }
.tile.focus.ti-movie svg { -webkit-animation-name: icon-roll; animation-name: icon-roll; }
.tile.focus.ti-series svg { -webkit-animation-name: icon-hop; animation-name: icon-hop; }
.tile.focus.ti-search svg, .navtab.focus .i-search { -webkit-animation-name: icon-seek; animation-name: icon-seek; }
.tile.focus.ti-settings svg, .navtab.focus .i-gear { -webkit-animation-name: icon-turn; animation-name: icon-turn; }
.navtab.focus svg { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
.smenu .it.focus svg { -webkit-animation: icon-pulse 0.45s ease-out; animation: icon-pulse 0.45s ease-out; }
@-webkit-keyframes icon-tune { 0% { -webkit-transform: rotate(0); } 25% { -webkit-transform: rotate(-9deg); } 50% { -webkit-transform: rotate(7deg); } 75% { -webkit-transform: rotate(-3deg); } 100% { -webkit-transform: rotate(0); } }
@keyframes icon-tune { 0% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
@-webkit-keyframes icon-roll { 0% { -webkit-transform: translateX(0) rotate(0); } 35% { -webkit-transform: translateX(-8px) rotate(-10deg); } 70% { -webkit-transform: translateX(5px) rotate(6deg); } 100% { -webkit-transform: translateX(0) rotate(0); } }
@keyframes icon-roll { 0% { transform: translateX(0) rotate(0); } 35% { transform: translateX(-8px) rotate(-10deg); } 70% { transform: translateX(5px) rotate(6deg); } 100% { transform: translateX(0) rotate(0); } }
@-webkit-keyframes icon-hop { 0% { -webkit-transform: translateY(0); } 30% { -webkit-transform: translateY(-12px); } 55% { -webkit-transform: translateY(0); } 75% { -webkit-transform: translateY(-5px); } 100% { -webkit-transform: translateY(0); } }
@keyframes icon-hop { 0% { transform: translateY(0); } 30% { transform: translateY(-12px); } 55% { transform: translateY(0); } 75% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
@-webkit-keyframes icon-seek { 0% { -webkit-transform: translate(0, 0) rotate(0); } 30% { -webkit-transform: translate(-7px, -5px) rotate(-12deg); } 65% { -webkit-transform: translate(6px, -3px) rotate(8deg); } 100% { -webkit-transform: translate(0, 0) rotate(0); } }
@keyframes icon-seek { 0% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(-7px, -5px) rotate(-12deg); } 65% { transform: translate(6px, -3px) rotate(8deg); } 100% { transform: translate(0, 0) rotate(0); } }
@-webkit-keyframes icon-turn { from { -webkit-transform: rotate(-120deg); } to { -webkit-transform: rotate(0); } }
@keyframes icon-turn { from { transform: rotate(-120deg); } to { transform: rotate(0); } }
@-webkit-keyframes icon-pulse { 0% { -webkit-transform: scale(1); } 45% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } }
@keyframes icon-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
.old .tile.focus, .old .card.focus .pic, .old .ccard.focus, .old .navtab.focus, .old #detail .btn.focus, .old .theme.focus .tp, .old .dseason.focus, .old .chip.focus,
.old .tile.focus svg, .old .navtab.focus svg, .old .smenu .it.focus svg { -webkit-animation: none; animation: none; }

/* MARK: - Live TV with on-screen buttons (touch, mouse): the buttons get their own centred row under the channel, as
   in the movie bar, so they never cover the channel's name, its programme or its state ("● Live", "Reconnecting…"). */
#stage.ptr #osd:not(.vod) { height: 250px; }
#stage.ptr #osd:not(.vod) .btns { left: 44px; right: 44px; top: 142px; text-align: center; }
#stage.ptr #osd:not(.vod) .b { margin: 0 10px; }
#stage.ptr #osd:not(.vod) .state { right: 44px; }
#stage.ptr #osd:not(.vod) .name, #stage.ptr #osd:not(.vod) .epg { right: 400px; }
#stage.m-phone.ptr #osd:not(.vod) { height: 286px; }
#stage.ptr #osd.has-epg:not(.vod) { height: 296px; }
#stage.ptr #osd.has-epg:not(.vod) .btns { top: 192px; }
#stage.m-phone.ptr #osd.has-epg:not(.vod) { height: 330px; }

/* MARK: - Clock, date and weather. Home: big, top right, like a lock screen; elsewhere: small, in the bar. */
/* Time and weather: a glass capsule like the menu's, same height and line, at the bar's right end. Time is the
   strongest thing in it (semibold, tabular digits), the weather secondary, a hairline between them. */
#navclock {
  position: relative; flex-shrink: 0; margin-left: 16px; height: 58px; padding: 8px 30px; border-radius: 37px; white-space: nowrap;
  font-size: 30px; line-height: 58px; color: #F5F5F7;
  background: -webkit-linear-gradient(top, rgba(52, 52, 58, 0.78), rgba(22, 22, 26, 0.66));
  background: linear-gradient(rgba(52, 52, 58, 0.78), rgba(22, 22, 26, 0.66));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
/* The "?" beside the menu: the same glass, a circle as tall as the menu. */
#navhelp {
  position: relative; flex-shrink: 0; margin: 0 16px; width: 74px; height: 74px; border-radius: 37px; text-align: center; cursor: pointer;
  font-size: 34px; font-weight: 700; line-height: 74px; color: rgba(245, 245, 247, 0.8);
  background: -webkit-linear-gradient(top, rgba(52, 52, 58, 0.78), rgba(22, 22, 26, 0.66));
  background: linear-gradient(rgba(52, 52, 58, 0.78), rgba(22, 22, 26, 0.66));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s;
}
#navlist {
  position: relative; flex: 0 1 auto; margin-right: 20px; height: 74px; border-radius: 37px; text-align: center; cursor: pointer;
  font-size: 34px; font-weight: 700; line-height: 74px; color: rgba(245, 245, 247, 0.8);
  background: -webkit-linear-gradient(top, rgba(52, 52, 58, 0.78), rgba(22, 22, 26, 0.66));
  background: linear-gradient(rgba(52, 52, 58, 0.78), rgba(22, 22, 26, 0.66));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s;
}
#navlist { width: auto; min-width: 100px; padding: 0 22px; font-size: 24px; font-weight: 600; letter-spacing: 0; white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
#navlist:empty { display: none; }
#navlist.focus { -webkit-transform: scale(1.06); transform: scale(1.06); -webkit-animation: focus-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.45); animation: focus-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.45); }
@media (hover: hover) { #navlist:hover:not(.focus) { color: #F5F5F7; background: rgba(255, 255, 255, 0.16); } }

#navhelp.focus { -webkit-transform: scale(1.08); transform: scale(1.08); -webkit-animation: focus-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.45); animation: focus-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.45); }
@media (hover: hover) { #navhelp:hover:not(.focus) { color: #F5F5F7; background: rgba(255, 255, 255, 0.16); } }
/* The active profile doubles as a direct switcher. Its photo/initial stays
   recognizable inside the glass focus ring, including on old TV browsers. */
#navprofile {
  position: relative; flex-shrink: 0; width: 74px; height: 74px; margin: 0 0 0 auto; padding: 7px;
  box-sizing: border-box; border: 0; border-radius: 37px; color: #FFF; font: inherit; cursor: pointer;
  background: -webkit-linear-gradient(top, rgba(52, 52, 58, .78), rgba(22, 22, 26, .66));
  background: linear-gradient(rgba(52, 52, 58, .78), rgba(22, 22, 26, .66));
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-transition: -webkit-transform .2s; transition: transform .2s;
}
#navprofile[hidden] { display: none; }
#navprofile-avatar { display: block; width: 60px; height: 60px; border-radius: 30px; overflow: hidden; font-size: 27px; font-weight: 600; line-height: 60px; text-align: center; color: #FFF; }
#navprofile-avatar img { display: block; width: 100%; height: 100%; }
#navprofile:focus { outline: none; }
#navprofile.focus { -webkit-transform: scale(1.08); transform: scale(1.08); box-shadow: 0 0 0 3px #0A84FF, 0 8px 22px rgba(0,0,0,.35); }
@media (hover: hover) { #navprofile:hover:not(.focus) { box-shadow: 0 0 0 2px #91C8FF, 0 8px 22px rgba(0,0,0,.35); } }
@media (prefers-reduced-motion: reduce) { #navprofile { -webkit-transition: none; transition: none; } }
/* Help: the controls for the device in use, two columns of "gesture — what it does". */
#help {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 10; background: rgba(0, 0, 0, 0.66);
  opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: opacity 0.25s, visibility 0s 0.25s; transition: opacity 0.25s, visibility 0s 0.25s;
}
#help.on { opacity: 1; visibility: visible; pointer-events: auto; -webkit-transition: opacity 0.25s; transition: opacity 0.25s; }
#help .hbox {
  position: absolute; left: 160px; top: 90px; width: 1600px; height: 900px; box-sizing: border-box; padding: 50px 60px; border-radius: 34px;
  background: -webkit-linear-gradient(top, rgba(48, 48, 52, 0.98), rgba(28, 28, 30, 0.98)); background: linear-gradient(rgba(48, 48, 52, 0.98), rgba(28, 28, 30, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1.5px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
#help .htitle { font-size: 46px; font-weight: 700; line-height: 56px; }
#help .hsub { margin-top: 8px; font-size: 24px; line-height: 32px; color: rgba(245, 245, 247, 0.6); }
#help .hbody { position: absolute; left: 60px; right: 60px; top: 170px; bottom: 140px; overflow-y: auto; scrollbar-width: none; }
#help .hbody::-webkit-scrollbar { display: none; }
#help .hcol { float: left; width: 50%; box-sizing: border-box; padding-right: 50px; }
#help .hsec { margin-bottom: 30px; }
#help .hst { margin-bottom: 8px; font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(245, 245, 247, 0.5); }
#help .hrow { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 24px; line-height: 34px; }
#help .hk { display: inline-block; vertical-align: top; width: 300px; margin-right: 20px; font-weight: 600; color: #F5F5F7; }
#help .hd { display: inline-block; vertical-align: top; width: 360px; color: rgba(245, 245, 247, 0.72); }
#help .hfoot { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; }
#help .btn { display: inline-block; width: 300px; height: 76px; border-radius: 38px; font-size: 28px; font-weight: 600; line-height: 76px; cursor: pointer; background: #FFF; color: #1D1D1F; }
#navclock .hm { font-weight: 600; letter-spacing: 0.5px; -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; }
#navclock .wx { font-weight: 500; color: rgba(245, 245, 247, 0.72); }
#navclock .wxi { width: 36px; height: 36px; vertical-align: middle; margin: -6px 8px 0 0; }
#navclock .sep { display: inline-block; width: 1.5px; height: 26px; margin: 0 22px; vertical-align: middle; margin-top: -4px; background: rgba(255, 255, 255, 0.18); }
/* City search inside Settings */
.sbox.city { width: auto; margin-bottom: 22px; }
.sbox.city .sic svg { position: absolute; left: 30px; top: 28px; }
#cityres .srow .l { padding-right: 0; }

/* The × on removable cards and rows (recent channels, "Continue watching"): only with a pointer, on hover. */
.rm { display: none; position: absolute; right: 10px; top: 10px; z-index: 3; width: 44px; height: 44px; border-radius: 22px; text-align: center; line-height: 44px; cursor: pointer;
  color: #FFF; background: rgba(0, 0, 0, 0.62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.rm svg { width: 22px; height: 22px; vertical-align: middle; margin-top: -4px; }
.row .rm { top: 15px; right: 16px; }
.ccard .rm { top: 38px; right: 14px; }
@media (hover: hover) {
  #stage.ptr .card:hover .rm, #stage.ptr .ccard:hover .rm, #stage.ptr .row:hover .rm { display: block; }
  .rm:hover { background: #FF453A; box-shadow: none; }
}
#help .hbox:after { content: ''; position: absolute; left: 60px; right: 60px; bottom: 140px; height: 70px; pointer-events: none;
  background: -webkit-linear-gradient(top, rgba(28, 28, 30, 0), rgba(28, 28, 30, 0.98)); background: linear-gradient(rgba(28, 28, 30, 0), rgba(28, 28, 30, 0.98)); }

/* MARK: - Sign-in screen */
.lg-title { position: absolute; left: 0; right: 0; top: 88px; text-align: center; font-size: 48px; font-weight: 700; line-height: 60px; }
.lg-card { top: 190px; width: 680px; height: 780px; }
.lg-phone { left: 250px; text-align: center; }
.lg-form, .lg-tfa { left: 990px; display: none; }
.lg-form.on, .lg-tfa.on { display: block; }
.lg-h { margin-top: 44px; padding: 0 50px; font-size: 32px; font-weight: 700; line-height: 40px; text-align: left; }
.lg-phone .lg-h { text-align: center; }
.lg-qr { width: 300px; height: 300px; margin: 30px auto 0; border-radius: 24px; overflow: hidden; background: #FFF; }
.lg-qr svg { display: block; }
.lg-steps { margin: 28px 0 0; padding: 0 50px 0 86px; text-align: left; font-size: 23px; line-height: 33px; color: rgba(245, 245, 247, 0.72); }
.lg-steps li { margin-bottom: 6px; }
.lg-steps b { color: #F5F5F7; font-weight: 600; }
.lg-code { margin-top: 6px; font-size: 60px; font-weight: 700; line-height: 72px; letter-spacing: 6px; -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; }
.lg-note { margin-top: 8px; padding: 0 50px; font-size: 20px; line-height: 28px; color: rgba(245, 245, 247, 0.5); }
.lg-l { display: block; padding: 0 50px; margin-top: 34px; font-size: 24px; line-height: 32px; color: rgba(245, 245, 247, 0.6); }
.lg-in {
  display: block; box-sizing: border-box; width: 580px; height: 84px; margin: 10px 50px 0; padding: 0 26px; border: 0; outline: none; border-radius: 22px;
  font-family: inherit; font-size: 32px; color: #F5F5F7; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.lg-in.focus, .lg-in:focus { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 4px #F5F5F7; }
.lg-btn {
  height: 84px; margin: 44px 50px 0; border-radius: 42px; text-align: center; font-size: 30px; font-weight: 600; line-height: 84px; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s;
}
.lg-btn.focus { -webkit-transform: scale(1.04); transform: scale(1.04); -webkit-animation: focus-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.45); animation: focus-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.45); }
.lg-form .error { margin: 24px 50px 0; text-align: center; font-size: 24px; line-height: 32px; color: #FF453A; min-height: 32px; }
.lg-tfa .hint { top: 104px; padding: 0 40px; }
.lg-tfa .code { top: 170px; }
.lg-tfa .keypad { top: 296px; left: 154px; }
.lg-tfa .error { bottom: 22px; }
@media (hover: hover) { .lg-btn:hover:not(.focus), .pf-btn:hover:not(.focus) { background: rgba(255, 255, 255, 0.2); } }

/* MARK: - Who's watching? */
.pf-title { position: absolute; left: 0; right: 0; top: 210px; text-align: center; font-size: 56px; font-weight: 700; line-height: 68px; }
.pf-row { position: absolute; left: 0; right: 0; top: 360px; text-align: center; font-size: 0; white-space: nowrap; }
.pf { display: inline-block; vertical-align: top; width: 260px; margin: 0 30px; text-align: center; cursor: pointer; }
.pf-av {
  position: relative; width: 220px; height: 220px; margin: 0 auto; border-radius: 48px; overflow: hidden;
  font-size: 100px; font-weight: 700; line-height: 220px; color: #FFF; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2); transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.pf.add .pf-av { background: rgba(255, 255, 255, 0.08); color: rgba(245, 245, 247, 0.7); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.12); }
.pf.add .pf-av svg { vertical-align: middle; margin-top: -10px; }
.pf.focus .pf-av { -webkit-transform: scale(1.08); transform: scale(1.08); box-shadow: 0 0 0 6px #F5F5F7, 0 20px 44px rgba(0, 0, 0, 0.5);
  -webkit-animation: focus-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.45); animation: focus-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.45); }
.pf-n { margin-top: 26px; font-size: 32px; font-weight: 600; line-height: 40px; color: rgba(245, 245, 247, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf.focus .pf-n { color: #F5F5F7; }
.pf-tags { height: 34px; margin-top: 8px; font-size: 20px; line-height: 30px; color: rgba(245, 245, 247, 0.6); }
.pf-tags span { display: inline-block; margin: 0 5px; vertical-align: middle; }
.pf-tags .kid { padding: 0 12px; border-radius: 8px; font-weight: 600; background: rgba(255, 255, 255, 0.14); }
.pf-ed { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); line-height: 220px; }
.pf-ed svg { width: 64px; height: 64px; vertical-align: middle; }
.pf-actions { position: absolute; left: 0; right: 0; top: 760px; text-align: center; }
.pf-btn {
  display: inline-block; height: 72px; padding: 0 40px; margin: 0 12px; border-radius: 36px; cursor: pointer;
  font-size: 28px; font-weight: 600; line-height: 72px; color: #F5F5F7; background: rgba(255, 255, 255, 0.1);
  -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s;
}
.pf-btn.focus { -webkit-transform: scale(1.05); transform: scale(1.05); }
.pf-btn.danger { color: #FF453A; }
.pf-btn.danger.focus { background: #FF453A !important; color: #FFF !important; }
.pf-modal { display: none; position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 5; background: rgba(0, 0, 0, 0.66); }
.pf-modal.on { display: block; }
.pf-box { background: -webkit-linear-gradient(top, rgba(48, 48, 52, 0.98), rgba(28, 28, 30, 0.98)); background: linear-gradient(rgba(48, 48, 52, 0.98), rgba(28, 28, 30, 0.98)); }
.pf-box.edit { left: 560px; top: 100px; width: 800px; height: 880px; padding-top: 44px; }
.pf-box.edit .lg-in { width: 700px; }
.pe-title { padding: 0 50px; font-size: 40px; font-weight: 700; line-height: 50px; }
.pe-colors { padding: 0 50px; margin-top: 14px; font-size: 0; }
.pe-c { display: inline-block; width: 64px; height: 64px; margin-right: 20px; border-radius: 32px; cursor: pointer; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; }
.pe-c.sel { box-shadow: 0 0 0 4px #1C1C1E, 0 0 0 8px #F5F5F7; }
.pe-c.focus { -webkit-transform: scale(1.2); transform: scale(1.2); }
.pe-kids { margin: 34px 50px 0; padding: 20px 24px; border-radius: 22px; font-size: 26px; line-height: 36px; cursor: pointer; background: rgba(255, 255, 255, 0.06); }
.pe-kids.focus { box-shadow: inset 0 0 0 4px #F5F5F7; }
.pe-tg { position: relative; display: inline-block; width: 64px; height: 36px; margin-right: 18px; border-radius: 18px; vertical-align: middle; margin-top: -4px; background: rgba(255, 255, 255, 0.2); -webkit-transition: background-color 0.2s; transition: background-color 0.2s; }
.pe-tg span { position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 14px; background: #FFF; -webkit-transition: left 0.2s; transition: left 0.2s; }
.pe-tg.on { background: #30D158; }
.pe-tg.on span { left: 32px; }
.lg-in.pe-pin { width: 300px; letter-spacing: 14px; }
.pe-btns { margin: 44px 50px 0; }
.pe-btns .pf-btn { margin: 0 16px 0 0; }

/* Profile avatars: a picture on the tile instead of the initial, and the picker row in the editor */
.pf-av img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.pe-avatars { padding: 0 50px; margin-top: 14px; font-size: 0; white-space: nowrap; }
.pe-a { display: inline-block; width: 72px; height: 72px; margin-right: 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.1); color: #F5F5F7; font-size: 30px; font-weight: 700; line-height: 72px; text-align: center; vertical-align: top; cursor: pointer; overflow: hidden; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; }
.pe-a img { display: block; width: 100%; height: 100%; }
.pe-a.sel { box-shadow: 0 0 0 4px #1C1C1E, 0 0 0 8px #F5F5F7; }
.pe-a.focus { -webkit-transform: scale(1.18); transform: scale(1.18); }
.pe-a img, .pf-av img { pointer-events: none; }   /* the click lands on the cell, which carries data-act */