/* Television storefront.
   Designed for a 10-foot viewing distance and a D-pad: no hover affordances,
   no external assets, focus states thick enough to spot from the sofa.

   Compatibility floor is the WebView shipped with Fire OS 5 (Chromium 59), so
   this file avoids flexbox `gap` (Chromium 84+) and never puts `:focus-visible`
   in the same selector list as `:focus`, because an unknown pseudo-class
   invalidates the whole list and would leave old Fire Sticks with no visible
   selection at all. */

:root {
  --tv-bg: #07101f;
  --tv-surface: #101d33;
  --tv-border: #23395f;
  --tv-text: #f4f8ff;
  --tv-muted: #a9bcdc;
  --tv-focus: #ffd24a;
  --tv-ok: #5ce08b;
  --tv-warn: #ffc95c;
  --tv-bad: #ff8d7a;
  --accent-1: #3f7cff;
  --accent-2: #7a5cff;
  --accent-3: #00a9a5;
  --accent-4: #d4553f;
  --accent-5: #2f8f4f;
  --accent-6: #b6428f;
}

* {
  box-sizing: border-box;
}

html {
  background: #07101f;
}

body.tv {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #0a1526 0%, #07101f 60%);
  color: #f4f8ff;
  color: var(--tv-text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

/* Header and footer */

/* The band across the top follows ZeroFour by HTML5 UP (CC BY 3.0): slate
   surface over a fine texture, thin light rules, one steel-blue accent. The
   texture is theirs; the credit is in the footer, as the licence asks. */
.tv-header,
.tv-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
}

.tv-header {
  background-color: #1b2334;
  background-image: url("../img/texture-zerofour.png");
  background-repeat: repeat;
}

.tv-header > *,
.tv-footer > * {
  margin: 6px 0;
}

.tv-header {
  border-bottom: 2px solid var(--tv-border);
}

.tv-brand {
  display: inline-flex;
  align-items: center;
  font-size: 26px;
  font-weight: 700;
}

.tv-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-right: 16px;
  border-radius: 14px;
  background: var(--accent-1);
  font-size: 22px;
  font-weight: 800;
}

.tv-device {
  margin-left: 16px;
  padding: 8px 20px;
  border: 2px solid var(--tv-border);
  border-radius: 999px;
  color: var(--tv-muted);
  font-size: 19px;
}

.tv-footer {
  margin-top: 48px;
  border-top: 2px solid var(--tv-border);
  color: var(--tv-muted);
  font-size: 19px;
}

.tv-credit {
  font-size: 16px;
  opacity: 0.75;
}

.tv-credit a {
  color: var(--tv-muted);
}

/* Main column */

.tv-main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 48px 0;
}

/* Hero. The banner is a background image so the text stays real text: a
   television scales type, and burned-in words in a picture blur. */

.tv-hero {
  position: relative;
  margin: 0 0 36px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--tv-border);
  border-radius: 20px;
  background-color: #050c18;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* One rule per brand, so the file a page loads is decided here rather than in
   an attribute the content policy would refuse. */
.tv-hero-miglior {
  background-image: url("../img/hero-miglior.png");
}

.tv-hero-private {
  background-image: url("../img/hero-private.png");
}

.tv-hero-body {
  padding: 44px 48px;
  /* The banners are dark on the left by design, but a stray bright pixel must
     never win against the copy. */
  background: linear-gradient(90deg, rgba(5, 12, 24, 0.94) 0%, rgba(5, 12, 24, 0.72) 55%, rgba(5, 12, 24, 0.25) 100%);
}

.tv-hero-kicker {
  margin: 0 0 10px;
  color: #9dbcff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tv-title {
  margin: 0 0 12px;
  font-size: 46px;
  line-height: 1.1;
  font-weight: 800;
}

.tv-lead {
  margin: 0 0 24px;
  max-width: 46ch;
  color: var(--tv-muted);
  font-size: 24px;
}

.tv-hero-code {
  display: inline-block;
  margin: 0;
  padding: 12px 24px;
  border: 2px solid var(--tv-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.tv-hero-code span {
  color: var(--tv-muted);
  font-size: 19px;
}

.tv-hero-code strong {
  margin-left: 12px;
  color: var(--tv-focus);
  font-size: 30px;
  letter-spacing: 0.08em;
}

.tv-alert {
  margin: 0 0 32px;
  padding: 24px 28px;
  border: 2px solid var(--tv-warn);
  border-left-width: 12px;
  border-radius: 12px;
  background: rgba(255, 201, 92, 0.1);
  font-size: 22px;
}

.tv-alert strong {
  display: block;
  margin-bottom: 6px;
  font-size: 24px;
}

/* Application rows: one per line, tall enough to aim at with a remote. */

.tv-apps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tv-app {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 24px 28px;
  border: 2px solid var(--tv-border);
  border-left: 12px solid var(--accent-1);
  border-radius: 16px;
  background: var(--tv-surface);
}

.tv-app.accent-1 { border-left-color: var(--accent-1); }
.tv-app.accent-2 { border-left-color: var(--accent-2); }
.tv-app.accent-3 { border-left-color: var(--accent-3); }
.tv-app.accent-4 { border-left-color: var(--accent-4); }
.tv-app.accent-5 { border-left-color: var(--accent-5); }
.tv-app.accent-6 { border-left-color: var(--accent-6); }

.tv-tile,
.tv-icon {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  margin-right: 28px;
  border-radius: 20px;
}

.tv-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  font-size: 34px;
  font-weight: 800;
}

/* Icons come from the APK, so their padding and aspect vary: contain them
   inside a fixed square instead of letting rows change height. */
.tv-icon {
  display: block;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.07);
}

.accent-1 .tv-tile { background: var(--accent-1); }
.accent-2 .tv-tile { background: var(--accent-2); }
.accent-3 .tv-tile { background: var(--accent-3); }
.accent-4 .tv-tile { background: var(--accent-4); }
.accent-5 .tv-tile { background: var(--accent-5); }
.accent-6 .tv-tile { background: var(--accent-6); }

.tv-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.tv-info > * {
  margin-bottom: 6px;
}

.tv-info > *:last-child {
  margin-bottom: 0;
}

.tv-name {
  font-size: 30px;
  font-weight: 700;
}

.tv-meta,
.tv-code {
  color: var(--tv-muted);
  font-size: 19px;
}

/* Reads as a label, not as part of the name: the customer should see at a
   glance why this app is listed among the others. */
.tv-note {
  align-self: flex-start;
  padding: 4px 12px;
  border: 2px solid var(--tv-ok);
  border-radius: 999px;
  color: var(--tv-ok);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.tv-compat {
  font-size: 20px;
  font-weight: 700;
}

.tv-compat.state-ok { color: var(--tv-ok); }
.tv-compat.state-unknown { color: var(--tv-muted); }
.tv-compat.state-too_old,
.tv-compat.state-blocked_os { color: var(--tv-bad); }

.tv-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-width: 220px;
  margin-left: 28px;
}

.tv-actions > * {
  margin-bottom: 12px;
}

.tv-actions > *:last-child {
  margin-bottom: 0;
}

/* Buttons. Focus is the only interaction state that exists on a remote. */

.tv-install,
.tv-details {
  display: block;
  padding: 18px 24px;
  border: 3px solid transparent;
  border-radius: 12px;
  /* The faint texture on a button is ZeroFour's: it keeps a large flat colour
     from looking like a blank rectangle on a television. */
  background-image: url("../img/texture-button.png");
  background-repeat: repeat;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.tv-install {
  background: var(--tv-ok);
  color: #05230f;
}

/* A protected app leads to its page, not to a file: a different colour says so
   before the customer reads the label. Steel blue, from ZeroFour. */
.tv-install-pin {
  background-color: #4091bf;
  color: #ffffff;
}

.tv-install.disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--tv-muted);
  font-weight: 700;
}

.tv-details {
  border-color: var(--tv-border);
  background: transparent;
  color: var(--tv-text);
  font-size: 20px;
  font-weight: 700;
}

/* Kept as two separate rules on purpose: see the compatibility note above.
   The row the focused button belongs to lifts as well, so from the sofa you see
   which application you are on, not just which button. */
a:focus {
  outline: 6px solid var(--tv-focus);
  outline-offset: 4px;
  border-color: var(--tv-focus);
}

a:focus-visible {
  outline: 6px solid var(--tv-focus);
  outline-offset: 4px;
  border-color: var(--tv-focus);
}

.tv-app:focus-within {
  border-color: var(--tv-focus);
  background: #16253f;
}

/* Help page */

.tv-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tv-steps li {
  margin-bottom: 20px;
  padding: 24px 28px;
  border: 2px solid var(--tv-border);
  border-radius: 16px;
  background: var(--tv-surface);
}

.tv-step-title {
  display: block;
  margin-bottom: 8px;
  font-size: 26px;
  font-weight: 700;
}

.tv-step-body {
  display: block;
  color: var(--tv-muted);
  font-size: 21px;
}

.tv-help-link {
  margin: 32px 0 0;
  font-size: 21px;
}

.tv-help-link a {
  color: var(--tv-focus);
  font-weight: 700;
}

/* Narrow screens: phones and the smallest WebView viewports. */

@media (max-width: 780px) {
  .tv-header,
  .tv-footer,
  .tv-main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .tv-hero-body {
    padding: 26px 22px;
    /* On a narrow screen the picture is behind the words, not beside them. */
    background: rgba(5, 12, 24, 0.9);
  }

  .tv-title {
    font-size: 34px;
  }

  .tv-hero-kicker {
    font-size: 16px;
  }

  .tv-lead {
    font-size: 20px;
  }

  .tv-hero-code strong {
    font-size: 26px;
  }

  .tv-app {
    flex-wrap: wrap;
  }

  .tv-tile,
  .tv-icon {
    width: 72px;
    height: 72px;
    margin-right: 18px;
  }

  .tv-tile {
    font-size: 26px;
  }

  .tv-actions {
    flex-direction: row;
    width: 100%;
    min-width: 0;
    margin-top: 18px;
    margin-left: 0;
  }

  .tv-actions > * {
    flex: 1 1 0;
    margin-right: 12px;
    margin-bottom: 0;
  }

  .tv-actions > *:last-child {
    margin-right: 0;
  }
}

/* Large televisions: 1080p and above, seen from three metres. Everything grows
   one step, and the hero gets room to breathe. */

@media (min-width: 1400px) {
  .tv-main {
    max-width: 1400px;
  }

  .tv-hero-body {
    padding: 60px 64px;
  }

  .tv-title {
    font-size: 58px;
  }

  .tv-lead {
    font-size: 27px;
  }

  .tv-name {
    font-size: 34px;
  }

  .tv-tile,
  .tv-icon {
    width: 120px;
    height: 120px;
  }

  .tv-install {
    font-size: 26px;
  }

  .tv-actions {
    min-width: 260px;
  }
}

/* Stratus app-showcase palette. Keep the established remote-friendly rows. */
.tv-header{background-image:none;background-color:#0c1930;border-bottom:1px solid #243858;padding-left:5%;padding-right:5%}.tv-main{width:90%;max-width:1400px;padding:38px 0 0}.tv-footer{padding-left:5%;padding-right:5%}.tv-hero{background-image:none;border:1px solid #284164;border-radius:24px;background:radial-gradient(ellipse at 95% 0%,#214784 0%,#122442 45%,#0d1c32 80%)}.tv-hero-private{background:radial-gradient(ellipse at 95% 0%,#17574e 0%,#122f32 45%,#0d1c32 80%)}.tv-hero-body{background:none;padding:42px 46px}.tv-hero-kicker{color:#92b9ff;font-size:17px}.tv-title{font-weight:700;letter-spacing:-1.5px}.tv-hero-code{border-radius:12px;border-width:1px}.tv-app{border-left-width:2px;border-radius:18px;background:#112139;padding:25px 30px}.tv-app.accent-1,.tv-app.accent-2,.tv-app.accent-3,.tv-app.accent-4,.tv-app.accent-5,.tv-app.accent-6{border-left-color:#23395f}.tv-app:focus-within{background:#1b3556;border-color:#ffd24a}.tv-install,.tv-details{background-image:none;min-height:72px;border-radius:10px}.tv-install-pin{background:#316edf}.tv-info{overflow-wrap:break-word}.tv-mark{background:linear-gradient(135deg,#5e98fb,#2457d1)}.tv-device{border-width:1px}.tv-note{border-width:1px;border-radius:6px}.tv-code{letter-spacing:1px}.tv-apps{margin-top:30px}
@media(max-width:780px){.tv-hero-body{padding:28px 24px}.tv-app{padding:22px 18px}.tv-info{flex-basis:calc(100% - 90px)}.tv-name{font-size:25px}.tv-actions{flex-direction:column}.tv-actions>*{margin:0 0 12px}.tv-actions>*:last-child{margin-bottom:0}.tv-hero-code span,.tv-hero-code strong{display:block;margin-left:0}.tv-brand{font-size:23px}.tv-device{margin-left:0;margin-right:12px}.tv-title{font-size:36px}}
/* Showcase revision: the TV code is a distinct, readable part of the hero. */
.tv-brand{text-decoration:none;color:#f4f8ff}.tv-hero-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-column-gap:38px;grid-row-gap:0;padding:42px}.tv-hero-kicker{grid-column:1;grid-row:1}.tv-title{grid-column:1;grid-row:2;font-size:48px;max-width:760px}.tv-lead{grid-column:1;grid-row:3;font-size:23px;margin-bottom:0}.tv-hero-code{grid-column:2;grid-row:1 / span 3;align-self:center;padding:26px 18px;text-align:center;border:1px solid #49658e;background:#142c4e}.tv-hero-code span{display:block;font-size:17px}.tv-hero-code strong{display:block;margin:10px 0 0;font-size:39px;letter-spacing:3px}.tv-app{padding:26px 30px;box-shadow:0 5px 16px rgba(0,0,0,.07)}.tv-code{align-self:flex-start;background:#1a304e;border:1px solid #304b70;border-radius:6px;padding:3px 10px;margin-top:5px;color:#c5d9f7;font-size:17px}.tv-name{letter-spacing:-.6px}.tv-icon{padding:5px;background:#f4f7fc;border-radius:22px}.tv-install{background:#67dfb4;color:#073828}.tv-install-pin{background:#3b79e5;color:#fff}.tv-details{background:#142843;border-color:#334f76}.tv-steps li{border-radius:18px;background:linear-gradient(120deg,#132742,#102037)}
@media(min-width:1400px){.tv-title{font-size:54px}.tv-hero-body{padding:48px}.tv-hero-code strong{font-size:42px}}
@media(max-width:900px){.tv-hero-body{grid-template-columns:1fr;padding:30px}.tv-hero-code{grid-column:1;grid-row:4;margin-top:24px;justify-self:start;padding:16px 24px}.tv-hero-code span{font-size:16px}.tv-hero-code strong{font-size:32px;margin-top:5px}.tv-title{font-size:38px}.tv-lead{font-size:21px}.tv-code{font-size:16px;letter-spacing:.3px}}
@media(max-width:520px){.tv-hero-body{padding:26px 22px}.tv-title{font-size:34px}.tv-lead{font-size:19px}.tv-hero-kicker{font-size:14px}.tv-name{font-size:23px}.tv-code{font-size:15px}.tv-brand{font-size:20px}.tv-header{padding-top:18px;padding-bottom:18px}.tv-icon{width:68px;height:68px;margin-right:16px}.tv-info{flex-basis:calc(100% - 84px)}}

/* Official supplied logo, displayed through two windows without modifying the image. */
.brand-lockup,.public-brand>.brand-lockup{display:inline-flex;align-items:center;width:auto;height:auto;padding:7px 9px;background:#fff;border-radius:10px;margin:0;box-shadow:none;letter-spacing:normal;line-height:1;flex-shrink:0}
.logo-symbol,.logo-wordmark{display:block;position:relative;overflow:hidden;flex-shrink:0}
.logo-symbol{width:44px;height:40px;margin-right:10px}
.logo-wordmark{width:224px;height:47px}
.brand-lockup .logo-symbol img{position:absolute;width:112px;height:112px;max-width:none;left:-34px;top:-22px}
.brand-lockup .logo-wordmark img{position:absolute;width:260px;height:260px;max-width:none;left:-20px;top:-145px}
.tv-brand .brand-lockup{vertical-align:middle}
@media(max-width:600px){
 .brand-lockup,.public-brand>.brand-lockup{padding:5px 6px}
 .logo-symbol{width:36px;height:32px;margin-right:8px}
 .logo-wordmark{width:180px;height:38px}
 .brand-lockup .logo-symbol img{width:90px;height:90px;left:-27px;top:-18px}
 .brand-lockup .logo-wordmark img{width:208px;height:208px;left:-16px;top:-116px}
}
/* Responsive neon showcase, shared by the full catalog and TV storefront. */
body.showcase{background:#040b16;background-image:radial-gradient(ellipse at 50% 0%,rgba(0,132,202,.14),transparent 55%);color:#edf7ff;font-family:"Segoe UI",Arial,sans-serif;line-height:1.5}.showcase .public-band,.showcase .tv-header{background:#06101e;border-color:#193247}.showcase .public-header nav a,.showcase .tv-device{color:#b8d1e5}.showcase .public-header nav .nav-tv{background:#0a263c;border-color:#254d67;color:#6eeaff}.showcase .public-brand{color:#fff}.showcase .public-main,.showcase .tv-main{width:94%;max-width:1500px;margin:0 auto;padding:0}.showcase .tv-header{padding:20px 3%;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.showcase .tv-device{font-size:14px}.showcase .public-footer,.showcase .tv-footer{border-color:#1b344a;color:#a8bdd3;margin-top:48px}.showcase .public-footer a,.showcase .tv-footer a{color:#c1d9eb}
.showcase-heading{text-align:center;padding:36px 12px 28px}.showcase-eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#79dfea;margin:0 0 8px}.showcase-heading h1{font-size:48px;letter-spacing:-1.8px;line-height:1.15;color:#edf7ff;margin:0 0 14px}.showcase-heading h1 em{font-style:normal;color:#0fd9ee}.showcase-heading>p:last-of-type{font-size:18px;letter-spacing:.2px;color:#bfd0e3;margin:0 0 18px}.showcase-tags{display:flex;justify-content:center;flex-wrap:wrap}.showcase-tags>span,.showcase-tags>a{padding:8px 16px;border:1px solid #234057;border-radius:24px;margin:4px 6px;color:#bfe4f4;font-size:14px;text-decoration:none;background:#091727}
.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:24px}.showcase-card{--glow:#2bd9ff;--rgb:43,217,255;--shade:#1565fa;position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"copy scene" "bottom bottom" "status status";grid-gap:0 14px;padding:28px 28px 18px;border:1px solid rgba(var(--rgb),.42);border-radius:24px;background:radial-gradient(ellipse at 85% 30%,rgba(var(--rgb),.16),transparent 63%),linear-gradient(135deg,#091625,#030912);box-shadow:inset 0 1px 0 rgba(var(--rgb),.10);min-width:0;overflow:hidden}.showcase-card.glow-2,.showcase-card.app-migliorprime{--glow:#ffd36a;--rgb:255,192,55;--shade:#c4790a}.showcase-card.glow-3,.showcase-card.app-migliorgo{--glow:#32f5b0;--rgb:22,233,149;--shade:#008c61}.showcase-card.glow-4,.showcase-card.app-migliorxc{--glow:#c383ff;--rgb:166,83,255;--shade:#7825e0}.showcase-card.glow-5{--glow:#ff90c9;--rgb:247,81,165;--shade:#ab2171}.showcase-card.glow-6{--glow:#85a9ff;--rgb:98,144,255;--shade:#3540d2}.showcase-card.app-migliorplus{--glow:#2bd9ff;--rgb:43,217,255;--shade:#1565fa}
.showcase-copy{grid-area:copy;min-width:0;z-index:2}.showcase-category{display:inline-block;padding:5px 10px;background:rgba(var(--rgb),.10);border:1px solid rgba(var(--rgb),.24);border-radius:20px;color:var(--glow);font-size:10px;font-weight:700;letter-spacing:.8px}.showcase-card h2{font-size:30px;line-height:1.15;letter-spacing:-.8px;margin:17px 0 12px;overflow-wrap:break-word}.showcase-card .tv-name{display:block;font-size:inherit;color:#f1f8ff;font-weight:800;line-height:inherit}.showcase-note{color:#c1e0ed;font-size:17px;line-height:1.4;margin:0 0 22px}.showcase-facts{margin:0 0 16px;display:flex;flex-wrap:wrap}.showcase-facts>div{margin:0 24px 8px 0}.showcase-facts dt{font-size:12px;color:#a9bed3}.showcase-facts dd{font-size:16px;color:#fff;margin:4px 0 0;font-weight:600}.showcase-card .tv-code{display:block;color:var(--glow);font-size:14px;letter-spacing:.5px;font-weight:600;margin:0}.showcase-scene{grid-area:scene;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:242px;min-width:0}.showcase-icon{position:relative;z-index:2;padding:12px;border:1px solid var(--glow);border-radius:28px;background:linear-gradient(140deg,rgba(var(--rgb),.26),#07111f);box-shadow:0 0 26px rgba(var(--rgb),.27),inset 0 0 12px rgba(var(--rgb),.15);transform:perspective(700px) rotateY(-9deg)}.showcase-icon img{display:block;width:145px;height:145px;max-width:100%;object-fit:contain;background:#fff;border-radius:18px}.showcase-icon>span{display:flex;align-items:center;justify-content:center;width:145px;height:145px;color:var(--glow);font-size:48px;font-weight:800}.showcase-pedestal{width:94%;max-width:235px;height:38px;border-radius:50%;border:2px solid var(--glow);background:linear-gradient(180deg,rgba(var(--rgb),.25),#091324 55%);margin-top:-3px;box-shadow:0 7px 0 #061021,0 9px 0 var(--shade),0 14px 28px rgba(var(--rgb),.23);z-index:1}.showcase-rays{position:absolute;left:0;right:0;top:10%;height:78%;border:1px solid rgba(var(--rgb),.22);border-radius:30%;transform:rotate(-18deg);box-shadow:0 0 30px rgba(var(--rgb),.07)}
.showcase-bottom{grid-area:bottom;display:flex;align-items:center;justify-content:space-between;margin-top:24px}.showcase-device{display:flex;align-items:center;font-size:15px;color:#d6e9f5;margin-right:12px}.showcase-device>span{font-size:32px;color:var(--glow);margin-right:10px}.showcase-device small{display:block;font-size:11px;color:#abc2d8;margin-top:4px}.showcase-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end}.showcase-install{display:flex;align-items:center;justify-content:center;min-width:200px;min-height:60px;background:linear-gradient(110deg,var(--glow),var(--shade));color:#03101c!important;font-size:21px;font-weight:800;border:1px solid var(--glow);border-radius:32px;text-decoration:none;padding:12px 22px;box-shadow:0 5px 22px rgba(var(--rgb),.22);text-shadow:0 1px 0 rgba(255,255,255,.15)}.showcase-install>span{margin:0 12px;font-size:24px}.showcase-details{color:#cde5f4!important;text-decoration:underline;font-size:15px;margin:10px 0 10px 16px;min-height:44px;display:flex;align-items:center}.showcase-details span{margin-left:8px}.showcase-status{grid-area:status;text-align:right;color:#b8cfde;font-size:12px;margin:12px 0 0}.showcase-status>span{color:var(--glow);font-size:11px;margin-right:6px}.showcase-install.disabled{background:#243245;color:#b2c3d5!important;border-color:#45546a;box-shadow:none}.showcase-card:focus-within{border-color:#ffd24a;box-shadow:0 0 0 2px #ffd24a}.showcase a:focus{outline:4px solid #ffd24a;outline-offset:4px}.showcase-support{text-align:center;margin:40px auto 0;padding:28px 18px;border-top:1px solid #1c354c}.showcase-support strong{font-size:24px;color:#f0f8ff}.showcase-support p{font-size:17px;color:#b4c9dc;margin:12px 0}.showcase-support a{color:#7ceaff;font-size:17px}.showcase .tv-alert{margin:0 0 24px}
@media(min-width:1500px){.showcase-card h2{font-size:36px}.showcase-icon img,.showcase-icon>span{width:170px;height:170px}.showcase-scene{min-height:265px}}
@media(max-width:1150px){.showcase-card{padding:22px 20px 16px;grid-gap:0 10px}.showcase-card h2{font-size:25px}.showcase-icon img,.showcase-icon>span{width:118px;height:118px}.showcase-icon{padding:9px;border-radius:22px}.showcase-note{font-size:16px}.showcase-scene{min-height:230px}.showcase-bottom{display:block}.showcase-device{margin:0 0 14px}.showcase-actions{justify-content:space-between}.showcase-install{flex:1}.showcase-status{text-align:left}}
@media(max-width:900px){.showcase-grid{grid-template-columns:1fr;max-width:740px;margin:0 auto}.showcase-heading h1{font-size:38px}.showcase-card h2{font-size:32px}.showcase-icon img,.showcase-icon>span{width:160px;height:160px}.showcase-bottom{display:flex}.showcase-device{margin-bottom:0}.showcase-install{min-width:185px}.showcase-heading{padding-top:27px}}
@media(max-width:520px){.showcase .tv-header{display:block;padding:15px 4%}.showcase .tv-device{display:block;margin:14px 0 0;font-size:12px}.showcase .public-main,.showcase .tv-main{width:92%}.showcase-heading{padding:27px 0 23px}.showcase-heading h1{font-size:33px;letter-spacing:-1px}.showcase-heading>p:last-of-type{font-size:16px}.showcase-tags>span,.showcase-tags>a{font-size:12px;padding:7px 11px;margin:4px}.showcase-card{padding:22px 18px 17px;border-radius:20px;grid-template-columns:1.1fr .9fr;grid-gap:0 8px}.showcase-card h2{font-size:25px;margin:13px 0 10px}.showcase-category{font-size:8px;padding:5px 7px;letter-spacing:.2px}.showcase-note{font-size:15px;margin-bottom:18px}.showcase-facts>div{margin-right:14px}.showcase-facts dd{font-size:14px}.showcase-card .tv-code{font-size:12px}.showcase-icon img,.showcase-icon>span{width:100px;height:100px}.showcase-icon{padding:8px;border-radius:20px}.showcase-icon img{border-radius:12px}.showcase-scene{min-height:200px}.showcase-pedestal{height:28px;width:105%}.showcase-bottom{display:block;margin-top:20px}.showcase-device{margin:0 0 14px;font-size:14px}.showcase-device small{font-size:12px}.showcase-install{min-width:0;min-height:62px;font-size:21px;padding:12px 10px}.showcase-details{font-size:14px;margin-left:15px}.showcase-status{font-size:12px;line-height:1.6}.showcase-grid{grid-gap:18px}}
@media(max-width:350px){.showcase-card{grid-template-columns:1fr}.showcase-copy{grid-column:1;grid-row:1}.showcase-scene{grid-column:1;grid-row:2;min-height:195px}.showcase-bottom{grid-column:1;grid-row:3}.showcase-status{grid-column:1;grid-row:4}.showcase-card h2{font-size:29px}.showcase-icon img{width:128px;height:128px}.showcase-pedestal{width:200px}.showcase-rays{left:20%;right:20%}.showcase-facts{margin-bottom:8px}}
.showcase.remote-mode .showcase-grid,.showcase.on-tv .showcase-grid{grid-template-columns:1fr;max-width:1200px;margin:0 auto}.showcase.remote-mode .showcase-card,.showcase.on-tv .showcase-card{padding:32px 40px}.showcase.remote-mode .showcase-card h2,.showcase.on-tv .showcase-card h2{font-size:40px}.showcase.remote-mode .showcase-note,.showcase.on-tv .showcase-note{font-size:22px}.showcase.remote-mode .showcase-facts dd,.showcase.on-tv .showcase-facts dd{font-size:22px}.showcase.remote-mode .showcase-card .tv-code,.showcase.on-tv .showcase-card .tv-code{font-size:22px}.showcase.remote-mode .showcase-install,.showcase.on-tv .showcase-install{min-height:76px;min-width:290px;font-size:28px}.showcase.remote-mode .showcase-details,.showcase.on-tv .showcase-details{min-height:72px;font-size:22px;margin-left:28px}.showcase.remote-mode .showcase-status,.showcase.on-tv .showcase-status{font-size:18px}.showcase.remote-mode .showcase-icon img,.showcase.on-tv .showcase-icon img{width:200px;height:200px}

@media(max-width:350px){.showcase-card{grid-template-areas:"copy" "scene" "bottom" "status"}}
/* Large paired actions and unmistakable remote-control focus. */
.showcase .showcase-actions{display:grid;grid-template-columns:1.2fr 1fr;grid-gap:12px;width:100%;margin-top:12px}.showcase .showcase-bottom{display:block}.showcase .showcase-device{margin-bottom:14px}.showcase .showcase-install,.showcase .showcase-details{min-width:0;min-height:72px;margin:0;padding:16px 18px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:750;line-height:1.25;text-decoration:none}.showcase .showcase-details{border:2px solid var(--glow);background:linear-gradient(135deg,rgba(var(--rgb),.18),#101d30);color:#eff8ff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}.showcase .showcase-details>span{margin-left:12px}.showcase .showcase-install:focus,.showcase .showcase-details:focus{background:#ffda49!important;color:#07101b!important;border-color:#ffef9a;outline:5px solid #fff3b4;outline-offset:3px;box-shadow:0 0 0 9px #092038,0 0 26px rgba(255,218,73,.5)}.showcase .showcase-card:focus-within{border-color:#ffda49}.showcase.remote-mode .showcase-actions,.showcase.on-tv .showcase-actions{max-width:700px;margin-left:auto}.showcase.remote-mode .showcase-details,.showcase.on-tv .showcase-details,.showcase.remote-mode .showcase-install,.showcase.on-tv .showcase-install{min-height:80px;font-size:26px;margin:0;min-width:0}.showcase.remote-mode .tv-header a,.on-tv .public-header a,.on-tv .public-footer a,.showcase.remote-mode .tv-footer a,.showcase.remote-mode .showcase-tags a,.showcase.on-tv .showcase-tags a,.showcase.remote-mode .showcase-support a,.showcase.on-tv .showcase-support a{display:inline-flex;align-items:center;min-height:64px;padding:10px 16px}.showcase.remote-mode a:focus,.on-tv a:focus,.on-tv button:focus{outline:5px solid #ffe363;outline-offset:4px}.remote-mode .showcase-details:focus,.on-tv .showcase-details:focus{outline-color:#fff3b4}
@media(max-width:520px){.showcase .showcase-actions{grid-gap:10px;grid-template-columns:1fr 1fr}.showcase .showcase-install,.showcase .showcase-details{font-size:18px;padding:14px 8px;min-height:68px}.showcase .showcase-install>span{margin:0 6px}.showcase .showcase-details>span{margin-left:7px}}

/* Remote navigation: vertical escape from PIN field. */
/* Locally hosted device and browser logos, navigable with D-pad and OK. */
.platforms{margin:0 0 28px;padding:20px 18px;border:1px solid #244059;border-radius:20px;background:linear-gradient(120deg,#0d1e32,#081221)}.platforms-title{color:#b4cde2;font-size:14px;margin:0 0 14px;text-align:center}.platforms-grid{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-gap:8px}.platforms-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:100px;padding:12px 5px;border:1px solid transparent;border-radius:14px;color:#e5f3ff;text-decoration:none;font-size:12px;line-height:1.4;text-align:center;background:#0d1b2d}.platforms-grid img{display:block;object-fit:contain;width:36px;height:36px;margin-bottom:12px;flex-shrink:0}.platforms-grid a:focus{background:#183855;border-color:#ffe263;outline:4px solid #ffe263;outline-offset:2px;color:#fff}.showcase-device>img{width:32px;height:32px;object-fit:contain;margin-right:12px}.platform-help{margin:28px 0 40px;color:#dbeaf7}.platform-help>h1{font-size:38px}.platform-help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:18px}.platform-help-grid article{padding:24px;border:1px solid #29435d;border-radius:16px;background:#0d1c2e;scroll-margin-top:20px}.platform-help-grid h2{font-size:24px;margin:0 0 12px;color:#7fe3f4}.platform-help-grid p{font-size:18px;line-height:1.6;margin:0 0 12px;color:#bdd0e4}.platform-help a{color:#83e9ff;display:inline-block;padding:12px 0;min-height:48px}.showcase.remote-mode .platforms-grid,.showcase.on-tv .platforms-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.showcase.remote-mode .platforms-grid a,.showcase.on-tv .platforms-grid a{min-height:112px;font-size:18px}.showcase.remote-mode .platforms-grid img,.showcase.on-tv .platforms-grid img{width:42px;height:42px}
@media(max-width:1150px){.platforms-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:700px){.platforms{padding:15px 12px}.platforms-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.platform-help-grid{grid-template-columns:1fr}.platform-help>h1{font-size:30px}}
@media(max-width:420px){.platforms-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.platforms-grid a{font-size:11px;min-height:95px}.platforms-grid img{width:33px;height:33px}}


/* The three current Android destinations, in the requested order. */
.showcase .platforms-grid,.showcase.remote-mode .platforms-grid,.showcase.on-tv .platforms-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin:0 auto}.platforms-grid a{font-size:17px;min-height:110px}.platforms-grid img{width:42px;height:42px}.app-devices{display:flex;flex-wrap:wrap;align-items:center;margin:14px 0 8px}.app-devices>span{display:flex;align-items:center;color:#d9ecf9;font-size:14px;margin:0 22px 12px 0}.app-devices img{width:30px;height:30px;object-fit:contain;margin-right:8px}.app-requirements{font-size:14px;color:#adc8df;margin:0 0 15px}.remote-mode .app-devices>span,.on-tv .app-devices>span{font-size:22px}.remote-mode .app-requirements,.on-tv .app-requirements{font-size:19px}@media(max-width:480px){.platforms-grid a{font-size:13px}.app-devices>span{font-size:12px;margin-right:12px}.app-devices img{width:25px;height:25px;margin-right:6px}}

.extra-access{display:grid;grid-template-columns:1fr 1fr;grid-gap:18px;margin:0 0 28px}.extra-access article{background:#0d1d30;border:1px solid #29475f;padding:24px;border-radius:20px;min-width:0}.extra-access img{object-fit:contain;float:right;margin-left:14px}.extra-access h2{color:#e5f5ff;font-size:24px;margin:0 0 12px}.extra-access p{color:#bed5e9;font-size:17px}.extra-access a{display:flex;align-items:center;min-height:68px;padding:14px 18px;border:1px solid #4a8b9e;background:#113446;color:#8deeff;border-radius:13px;text-decoration:none;font-size:18px;font-weight:700}.extra-access a:focus{outline:4px solid #ffdf66;outline-offset:4px;background:#ffe16a;color:#081624}@media(max-width:700px){.extra-access{grid-template-columns:1fr}.extra-access h2{font-size:22px}}

.dmca-contact{flex-basis:100%;grid-column:1/-1;width:100%;max-width:100%;font-size:14px;line-height:1.7;overflow-wrap:anywhere;margin:20px 0 0}.dmca-contact a{display:inline!important;min-height:0!important;padding:0!important;overflow-wrap:anywhere}.public-footer{flex-wrap:wrap}