/*
 * The home screen on a 1920 × 1080 stage, with the Android app's measurements (HomeView): the title and tabs at the top
 * left, icon-only glass buttons at the top right, three picks, and the glass shelf at the bottom; ↓ on the shelf opens
 * the drawer (inputs, shortcuts, weather, prices). Light by day, dark from sunset to sunrise.
 * No CSS variables, grid or backdrop-filter: older LG TVs (webOS 3 and 4) don't have them, and blur is too heavy for
 * their GPUs. 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: #F5F5F7;
}

body {
  font-family: 'Inter', 'LG Smart UI', 'Helvetica Neue', Arial, sans-serif;
  color: #1D1D1F;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; outline: none; }

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.layer { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }

/* Symbols: Material Symbols as white PNGs, tinted by the background color. */
.sym {
  display: inline-block;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: currentColor;
}

/* MARK: - Background: the first pick's photo, very blurred and almost white (almost black at night). */

#sky { background: #EBEBEF; }
#sky .grad { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: opacity 2s; transition: opacity 2s; }
#sky .day { background: -webkit-linear-gradient(top, #F5F5F7, #E2E2E7); background: linear-gradient(#F5F5F7, #E2E2E7); }
#sky .night { background: -webkit-linear-gradient(top, #1C1C1E, #0B0B0D); background: linear-gradient(#1C1C1E, #0B0B0D); opacity: 0; }
#sky canvas { position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; opacity: 0; -webkit-transition: opacity 0.8s; transition: opacity 0.8s; }
#sky canvas.on { opacity: 1; }
#sky .veil { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(245, 245, 247, 0.74); -webkit-transition: background-color 2s; transition: background-color 2s; }
#sky .lift { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #FFF; opacity: 0; -webkit-transition: opacity 0.45s, background-color 2s; transition: opacity 0.45s, background-color 2s; }
.night #sky .day { opacity: 0; }
.night #sky .night { opacity: 1; }
.night #sky .veil { background: rgba(11, 11, 13, 0.78); }
.night #sky .lift { background: #000; }
.drawer-open #sky .lift { opacity: 0.32; }
.night.drawer-open #sky .lift { opacity: 0.42; }

/* MARK: - Moving parts: the top fades and everything rises when the drawer opens. */

/* Each part is its own stack, so a focused tile (z-index) never shows over the drawer, a sheet or the screensaver. */
#home { z-index: 1; }
#drawer { z-index: 2; }
.sheet { z-index: 3; }
#saver { z-index: 4; }

#home, #drawer {
  -webkit-transition: -webkit-transform 0.38s cubic-bezier(0.32, 0.72, 0.2, 1), opacity 0.28s;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0.2, 1), opacity 0.28s;
}
.drawer-open #home { -webkit-transform: translateY(-560px); transform: translateY(-560px); }
#top { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
.drawer-open #top { opacity: 0; }
#drawer { -webkit-transform: translateY(560px); transform: translateY(560px); opacity: 0; }
.drawer-open #drawer { -webkit-transform: none; transform: none; opacity: 1; }
/* Closed, it still spans the screen below the shelf: only its keys take the pointer, and only when it's open. */
#drawer { pointer-events: none; }
.drawer-open #drawer .key { pointer-events: auto; }

/* MARK: - Title and tabs */

#title {
  position: absolute;
  left: 76px;
  top: 52px;
  margin: 0;
  font-size: 76px;
  font-weight: 600;
  letter-spacing: 0.004em;
  line-height: 1;
  white-space: nowrap;
  color: #1D1D1F;
  -webkit-transition: color 2s;
  transition: color 2s;
}

#tabs { position: absolute; left: 54px; top: 158px; height: 68px; white-space: nowrap; }
.tab {
  position: relative;
  display: inline-block;
  height: 68px;
  padding: 0 26px;
  margin-right: 4px;
  border-radius: 34px;
  font-size: 30px;
  font-weight: 500;
  line-height: 68px;
  color: #6E6E73;
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.17s, box-shadow 0.2s, color 0.17s;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.17s, box-shadow 0.2s, color 0.17s;
}
.tab.on { font-weight: 600; color: #1D1D1F; }
.tab.focus {
  background: #FFF;
  color: #1D1D1F;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22);
}
.tab .badge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: 13px;
  background: #FF3B30;
  color: #FFF;
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
.night #title, .night .tab.on { color: #F5F5F7; }
.night .tab { color: rgba(245, 245, 247, 0.62); }
.night .tab.focus { color: #1D1D1F; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4); }

/* Crypto quotes at the right end of the tab row: a quiet detail. */
#quotes {
  position: absolute;
  right: 80px;
  top: 178px;
  height: 28px;
  font-size: 21px;
  line-height: 28px;
  color: #8E8E93;
  white-space: nowrap;
  -webkit-transition: opacity 0.17s;
  transition: opacity 0.17s;
  font-feature-settings: 'tnum';
}
#quotes .q { display: inline-block; margin-left: 24px; }
#quotes svg { width: 15px; height: 15px; vertical-align: -1px; margin-right: 6px; fill: rgba(142, 142, 147, 0.7); }
#quotes.hide { opacity: 0; }
.night #quotes { color: rgba(245, 245, 247, 0.62); }
.night #quotes svg { fill: rgba(245, 245, 247, 0.55); }

/* Live TV, HDMI Inputs and Settings: glass circles; the focused one turns white, with its name below. */
.round {
  position: absolute;
  top: 69px;
  width: 68px;
  height: 68px;
  border-radius: 34px;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5));
  background: linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5));
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  color: #1D1D1F;
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.2s, background-color 0.17s;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.2s, background-color 0.17s;
}
.round .sym { position: absolute; left: 20px; top: 20px; width: 28px; height: 28px; }
.round.focus { background: #FFF; -webkit-transform: scale(1.1); transform: scale(1.1); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24); }
.round .tip {
  position: absolute;
  top: 88px;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  text-align: center;
  font-size: 23px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  -webkit-transition: opacity 0.14s;
  transition: opacity 0.14s;
}
.round.last .tip { left: auto; right: -10px; margin-left: 0; text-align: right; }
.round.focus .tip { opacity: 1; }
.night .round {
  background: -webkit-linear-gradient(top, rgba(40, 40, 44, 0.8), rgba(17, 17, 19, 0.62));
  background: linear-gradient(rgba(40, 40, 44, 0.8), rgba(17, 17, 19, 0.62));
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}
.night .round.focus { background: #FFF; color: #1D1D1F; }
.night .round.focus .tip { color: #F5F5F7; }

/* MARK: - Picks: a wide card and two tall ones; focused, a card grows 5%, rises and its edge lights up. */

.card {
  position: absolute;
  top: 262px;
  height: 442px;
  -webkit-transition: -webkit-transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.card .img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background-color: #DADADF;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  -webkit-transition: box-shadow 0.22s;
  transition: box-shadow 0.22s;
}
.card .img::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.85);
  background: -webkit-linear-gradient(-60deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  -webkit-transition: opacity 0.17s;
  transition: opacity 0.17s;
}
.card.focus { -webkit-transform: translateY(-6px) scale(1.05); transform: translateY(-6px) scale(1.05); z-index: 2; }
.card.focus .img { box-shadow: 0 24px 46px rgba(0, 0, 0, 0.34); }
.card.focus .img::after { opacity: 1; }
.card .name {
  position: absolute;
  left: 0;
  top: 464px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 31px;
  font-weight: 600;
  letter-spacing: 0.012em;
  color: #1D1D1F;
  -webkit-transition: color 2s;
  transition: color 2s;
}
.card .meta {
  position: absolute;
  left: 0;
  top: 506px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 25px;
  font-weight: 500;
  color: #6E6E73;
}
.night .card .img { background-color: #2C2C2E; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32); }
.night .card .name { color: #F5F5F7; }
.night .card .meta { color: rgba(245, 245, 247, 0.62); }

/* Without a TMDB key (or picks yet): the date and the time instead of the cards. */
#clock {
  position: absolute;
  left: 76px;
  top: 300px;
  font-size: 176px;
  font-weight: 200;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #1D1D1F;
  display: none;
}
#clock .date { display: block; font-size: 40px; font-weight: 500; letter-spacing: 0; margin-top: 18px; color: #6E6E73; }
.no-picks #clock { display: block; }
.night #clock { color: #F5F5F7; }
.night #clock .date { color: rgba(245, 245, 247, 0.62); }

/* MARK: - Shelf: the glass bar with the apps, each in its brand color; focused, a tile grows 20% and rises. */

#platter {
  position: absolute;
  top: 814px;
  height: 206px;
  border-radius: 62px;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.4));
  background: linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.4));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12), inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.night #platter {
  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);
}
/* The shelf has the focus: a rim just outside the glass (dark by day: white wouldn't show on it). */
#platter::before {
  content: '';
  position: absolute;
  left: -9px;
  top: -9px;
  right: -9px;
  bottom: -9px;
  border-radius: 71px;
  border: 3px solid rgba(58, 58, 60, 0.45);
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.night #platter::before { border-color: rgba(255, 255, 255, 0.8); }
#platter.on::before { opacity: 1; }

#tiles {
  position: absolute;
  left: 0;
  top: 0;
  -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);
}

.tile {
  position: absolute;
  top: 854px;
  height: 126px;
  border-radius: 22px;
  overflow: hidden;
  color: #FFF;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.2s, opacity 0.3s;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.2s, opacity 0.3s;
}
.tile img { position: absolute; left: 50%; top: 50%; max-width: 76%; max-height: 62%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
/* a logo lifted off the TV's icon (home.js): as large as the tile allows */
.tile img.logo { width: 70%; height: 50%; max-width: none; max-height: none; object-fit: contain; }
.tile .word {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  margin-top: -20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 50%;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  opacity: 0;
  -webkit-transition: opacity 0.17s;
  transition: opacity 0.17s;
}
.tile.focus { -webkit-transform: scale(1.2); transform: scale(1.2); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34); z-index: 2; }
.tile.focus::after { opacity: 1; }
/* Which one has the focus, at a glance: while the shelf has it, a shade on the other tiles and a light rim on it (as on
   the focused card). Above the logo; only the opacity animates. */
.tile::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.34);
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.night .tile::before { background: rgba(0, 0, 0, 0.48); }
#tiles.on .tile::before { opacity: 1; }
#tiles.on .tile.focus::before { background: none; box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.85); }
.night .tile { box-shadow: 0 4px 22px rgba(0, 0, 0, 0.3); }
.night .tile.focus { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); }
.more { position: absolute; width: 17px; height: 17px; color: rgba(0, 0, 0, 0.6); }
.more.back { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.night .more { color: rgba(255, 255, 255, 0.8); }

/* MARK: - Drawer: inputs and shortcuts, weather, prices */

.row-title { position: absolute; top: 494px; font-size: 25px; font-weight: 600; color: #6E6E73; white-space: nowrap; }
.night .row-title { color: rgba(255, 255, 255, 0.7); }

.glass {
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.66));
  background: linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.66));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.night .glass {
  background: -webkit-linear-gradient(top, rgba(38, 38, 42, 0.78), rgba(17, 17, 19, 0.64));
  background: linear-gradient(rgba(38, 38, 42, 0.78), rgba(17, 17, 19, 0.64));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1.5px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.key {
  position: absolute;
  top: 540px;
  height: 126px;
  border-radius: 20px;
  text-align: center;
  color: #1D1D1F;
  -webkit-transition: -webkit-transform 0.19s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.19s, background-color 0.14s;
  transition: transform 0.19s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.19s, background-color 0.14s;
}
.key .sym { position: absolute; left: 50%; top: 33px; width: 34px; height: 34px; margin-left: -17px; }
.key .label { position: absolute; left: 8px; right: 8px; top: 82px; font-size: 23px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key.off { color: #8E8E93; }
.key.focus { background: #F5F5F7; color: #1C1C1E; -webkit-transform: scale(1.07); transform: scale(1.07); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42); z-index: 2; }
.night .key { color: rgba(255, 255, 255, 0.95); }
.night .key.off { color: rgba(255, 255, 255, 0.42); }
.night .key.focus { color: #1C1C1E; }

.panel { position: absolute; top: 708px; height: 300px; border-radius: 30px; overflow: hidden; color: #1D1D1F; }
.night .panel { color: #F5F5F7; }
.panel .head { position: absolute; left: 34px; top: 30px; font-size: 25px; font-weight: 600; color: #6E6E73; white-space: nowrap; }
.panel .side { position: absolute; right: 34px; top: 33px; font-size: 21px; font-weight: 500; color: #8E8E93; white-space: nowrap; }
.night .panel .head { color: rgba(255, 255, 255, 0.7); }
.night .panel .side { color: rgba(255, 255, 255, 0.6); }

#weather .now { position: absolute; left: 34px; top: 82px; height: 100px; white-space: nowrap; }
#weather .now .sym { width: 56px; height: 56px; vertical-align: 12px; margin-right: 18px; }
#weather .now .temp { font-size: 100px; font-weight: 300; line-height: 100px; font-feature-settings: 'tnum'; }
#weather .cond { position: absolute; left: 34px; top: 192px; font-size: 29px; font-weight: 500; white-space: nowrap; }
#weather .range { position: absolute; left: 34px; top: 236px; font-size: 23px; font-weight: 500; color: #6E6E73; white-space: nowrap; font-feature-settings: 'tnum'; }
#weather .split { position: absolute; left: 391px; top: 34px; bottom: 34px; width: 2px; background: rgba(0, 0, 0, 0.1); }
#weather .hours { position: absolute; left: 422px; right: 30px; top: 74px; height: 140px; }
#weather .hour { position: absolute; top: 0; text-align: center; font-feature-settings: 'tnum'; }
#weather .hour .t { font-size: 22px; font-weight: 500; color: #6E6E73; }
#weather .hour .sym { display: block; width: 30px; height: 30px; margin: 22px auto 18px; }
#weather .hour .d { font-size: 26px; font-weight: 500; }
#weather .hour .low { margin-left: 6px; font-size: 22px; color: #6E6E73; }
#weather .sun { position: absolute; left: 422px; top: 236px; font-size: 23px; font-weight: 500; color: #6E6E73; white-space: nowrap; }
#weather .sun .sym { width: 22px; height: 22px; vertical-align: -3px; margin-right: 10px; }
#weather .sun span { margin-right: 36px; }
.night #weather .range, .night #weather .hour .t, .night #weather .hour .low, .night #weather .sun { color: rgba(255, 255, 255, 0.68); }
.night #weather .split { background: rgba(255, 255, 255, 0.14); }

#prices .coin { position: absolute; left: 34px; right: 34px; height: 40px; font-size: 29px; font-weight: 500; white-space: nowrap; }
#prices .coin svg { position: absolute; left: 2px; top: 6px; width: 26px; height: 26px; fill: #6E6E73; }
#prices .coin .n { position: absolute; left: 50px; top: 0; }
#prices .coin .p { position: absolute; right: 128px; top: 1px; font-size: 26px; font-feature-settings: 'tnum'; }
#prices .coin .c { position: absolute; right: 0; top: 2px; width: 108px; height: 34px; line-height: 34px; border-radius: 17px; text-align: center; font-size: 21px; font-weight: 600; font-feature-settings: 'tnum'; }
#prices .up { color: #248A3D; background: rgba(36, 138, 61, 0.2); }
#prices .down { color: #D70015; background: rgba(215, 0, 21, 0.2); }
.night #prices .coin svg { fill: rgba(255, 255, 255, 0.8); }
.night #prices .up { color: #30D158; background: rgba(48, 209, 88, 0.2); }
.night #prices .down { color: #FF453A; background: rgba(255, 69, 58, 0.2); }

/* MARK: - Sheets over the home screen: All Apps, Settings, Shelf */

.sheet {
  background: rgba(0, 0, 0, 0.66);
  color: #FFF;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* while it fades out, the pointer goes to what's under it, not to its rows */
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
  -webkit-transition: opacity 0.24s, -webkit-transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s 0.3s;
  transition: opacity 0.24s, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s 0.3s;
}
.sheet.open { opacity: 1; visibility: visible; pointer-events: auto; -webkit-transform: none; transform: none; -webkit-transition-delay: 0s; transition-delay: 0s; }
.sheet h2 { position: absolute; left: 0; right: 0; top: 84px; margin: 0; text-align: center; font-size: 40px; font-weight: 600; }

#apps .grid { position: absolute; left: 0; top: 0; width: 1920px; -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
.cell { position: absolute; width: 300px; height: 169px; }
.cell .face {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 169px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  -webkit-transition: -webkit-transform 0.19s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.19s;
  transition: transform 0.19s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.19s;
}
.cell .face img { position: absolute; left: 50%; top: 50%; max-width: 70%; max-height: 60%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.cell .face img.logo { width: 64%; height: 46%; max-width: none; max-height: none; object-fit: contain; }
.cell .face .word { position: absolute; left: 6%; right: 6%; top: 50%; margin-top: -22px; height: 44px; line-height: 44px; text-align: center; font-size: 32px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #FFF; }
.cell .label { position: absolute; left: 0; right: 0; top: 186px; text-align: center; font-size: 24px; font-weight: 500; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell.focus .face { -webkit-transform: scale(1.08); transform: scale(1.08); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.4); }
.cell.focus .label { color: #FFF; }

#settings .box, #shelfedit .box, #langpick .box {
  position: absolute;
  left: 560px;
  top: 150px;
  width: 800px;
  border-radius: 40px;
  padding: 30px 30px 26px;
  box-sizing: border-box;
  background: -webkit-linear-gradient(top, rgba(34, 36, 44, 0.96), rgba(18, 20, 26, 0.97));
  background: linear-gradient(rgba(34, 36, 44, 0.96), rgba(18, 20, 26, 0.97));
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.box .title { font-size: 38px; font-weight: 700; padding: 6px 18px 18px; letter-spacing: -0.01em; }
.box .title .sym { width: 36px; height: 36px; vertical-align: -5px; margin-right: 14px; color: rgba(255, 255, 255, 0.85); }
.box .list { position: relative; overflow: hidden; }
.box .rows { -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1); transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1); }
.box .row { position: relative; height: 70px; margin-bottom: 8px; border-radius: 20px; font-size: 30px; font-weight: 600; line-height: 70px; padding: 0 24px; white-space: nowrap; -webkit-transition: background-color 0.13s; transition: background-color 0.13s; }
.box .row.focus { background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.box .row .value { position: absolute; right: 24px; top: 0; color: rgba(255, 255, 255, 0.92); font-weight: 500; }
.box .row .value .chev { color: rgba(255, 255, 255, 0.35); margin: 0 10px; }
.box .row .value .sym { width: 26px; height: 26px; vertical-align: -3px; }
.box .row.dim { color: rgba(255, 255, 255, 0.4); }
.box .hint { padding: 14px 18px 0; font-size: 22px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.toggle { position: absolute; right: 24px; top: 13px; width: 78px; height: 44px; border-radius: 22px; background: #3A3D45; -webkit-transition: background-color 0.14s; transition: background-color 0.14s; }
.toggle::after { content: ''; position: absolute; left: 4px; top: 4px; width: 36px; height: 36px; border-radius: 18px; background: #FFF; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); -webkit-transition: -webkit-transform 0.14s; transition: transform 0.14s; }
.toggle.on { background: #3FD69B; }
.toggle.on::after { -webkit-transform: translateX(34px); transform: translateX(34px); }

/* MARK: - Screensaver: the picks' photos, slowly moving, and a clock */

#saver { background: #000; opacity: 0; visibility: hidden; -webkit-transition: opacity 1.2s, visibility 0s 1.2s; transition: opacity 1.2s, visibility 0s 1.2s; }
#saver.on { opacity: 1; visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s; }
#saver .photo { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background-size: cover; background-position: center; opacity: 0; -webkit-transition: opacity 2.4s, -webkit-transform 24s linear; transition: opacity 2.4s, transform 24s linear; }
#saver .photo.on { opacity: 1; }
#saver .shade { position: absolute; left: 0; right: 0; bottom: 0; height: 520px; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55)); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55)); }
#saver .clock {
  position: absolute;
  left: 80px;
  bottom: 90px;
  padding: 26px 46px 30px;
  border-radius: 46px;
  color: #FFF;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1));
  background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}
#saver .clock .time { font-size: 150px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-feature-settings: 'tnum'; }
#saver .clock .date { margin-top: 10px; font-size: 34px; font-weight: 500; color: rgba(255, 255, 255, 0.82); }
#saver .clock .title { margin-top: 18px; font-size: 26px; font-weight: 500; color: rgba(255, 255, 255, 0.65); }

/* MARK: - Toast */

#toast {
  position: absolute;
  left: 50%;
  top: 64px;
  max-width: 820px;
  -webkit-transform: translate(-50%, -16px);
  transform: translate(-50%, -16px);
  padding: 18px 30px;
  border-radius: 32px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(17, 17, 19, 0.86);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  opacity: 0;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}
#toast.on { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

/* The Magic Remote's pointer: no text selection, no outlines. */
* { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* MARK: - Sports cards (sports=true): drawn in HTML inside the card (wide 1040 × 442, tall 320 × 442). */

.card .img.sp { background-color: #14161B; color: #FFF; }
.sp > div { position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp .sp-crest { position: absolute; -o-object-fit: contain; object-fit: contain; }
.sp-match {
  background: -webkit-linear-gradient(left, #5A1E1E, #14161B 50%, #1E2A44);
  background: linear-gradient(90deg, #5A1E1E, #14161B 50%, #1E2A44);
}
.sp-label { font-size: 23px; font-weight: 500; color: rgba(255, 255, 255, 0.72); line-height: 32px; }
.sp-label.center, .sp-head.center, .sp .sp-team, .sp .sp-big, .sp .sp-mid, .sp .sp-small, .sp .sp-empty, .sp .sp-more { text-align: center; }
.sp-team { font-size: 31px; font-weight: 600; }
.sp-big { font-size: 92px; font-weight: 500; line-height: 120px; letter-spacing: -0.01em; }
.sp-big.score { font-size: 108px; font-weight: 600; }
.sp-mid { font-size: 56px; font-weight: 500; line-height: 80px; }
.sp-mid.score { font-size: 64px; font-weight: 600; }
.sp-small { font-size: 27px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.sp-small.tall { font-size: 21px; }
.sp-goals, .sp-cards { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-goals { font-size: 24px; font-weight: 500; }
.sp-cards { font-size: 21px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.sp-card-item { margin: 0 8px; }
.sp-card { display: inline-block; width: 9px; height: 13px; margin-right: 6px; border-radius: 2px; background: #F5C518; vertical-align: -1px; }
.sp-pill {
  padding: 0 14px;
  height: 34px;
  line-height: 34px;
  border-radius: 17px;
  background: #FF3B30;
  font-size: 21px;
  font-weight: 600;
  color: #FFF;
}
.sp-pill.small { height: 30px; line-height: 30px; font-size: 18px; border-radius: 15px; }
.sp-board {
  background: -webkit-linear-gradient(left, #0E2219, #111827);
  background: linear-gradient(90deg, #0E2219, #111827);
}
.sp-head { font-size: 21px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); }
.sp-head.date { text-align: right; letter-spacing: 0; font-weight: 500; }
.sp-empty { font-size: 28px; font-weight: 500; color: rgba(255, 255, 255, 0.7); white-space: normal !important; }
.sp-row { overflow: visible !important; }
.sp-row.line { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.sp-row > div { position: absolute; top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-time { font-size: 24px; font-weight: 600; }
.sp-time.live { color: #FF3B30; }
.sp-time.done { color: rgba(255, 255, 255, 0.45); }
.sp-name { font-size: 25px; font-weight: 500; }
.sp-score { font-size: 26px; font-weight: 600; text-align: center; }
.sp-league { font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.45); }
.sp-more { font-size: 22px; font-weight: 500; color: rgba(255, 255, 255, 0.45); line-height: 40px; }
.sp-f1 {
  background: -webkit-linear-gradient(-60deg, #17171F, #0B0B10);
  background: linear-gradient(150deg, #17171F, #0B0B10);
}
.sp-stripe {
  top: -40px;
  width: 12px;
  height: 540px;
  background: #E10600;
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
  right: 40px;
}
.sp-f1.wide .sp-stripe { width: 24px; right: 150px; }
.sp-stripe.s1 { right: 18px; opacity: 0.6; }
.sp-stripe.s2 { right: -4px; opacity: 0.3; }
.sp-f1.wide .sp-stripe.s1 { right: 105px; }
.sp-f1.wide .sp-stripe.s2 { right: 60px; }
.sp-red { font-size: 19px; font-weight: 600; letter-spacing: 0.08em; color: #E10600; }
.sp-f1.wide .sp-red { font-size: 21px; }
.sp-gp { font-size: 30px; font-weight: 600; line-height: 38px; }
.sp-f1.wide .sp-gp { font-size: 44px; line-height: 54px; }
.sp-f1 .sp-gp.big { font-size: 60px; line-height: 76px; }
.sp-place { font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.7); line-height: 28px; }
.sp-f1.wide .sp-place { font-size: 24px; line-height: 32px; }
.sp-session { font-size: 26px; font-weight: 600; line-height: 34px; }
.sp-session.tall { font-size: 21px; line-height: 28px; }
.sp-when { font-size: 24px; font-weight: 500; color: rgba(255, 255, 255, 0.72); line-height: 34px; }
.sp-when.tall { font-size: 18px; line-height: 24px; }
.sp-when.live { color: #FF3B30; font-weight: 600; }
.sp-session.done, .sp-when.done { color: rgba(255, 255, 255, 0.4); }
.sp-clock { font-size: 72px; font-weight: 500; line-height: 96px; }
.sp-clock.big { font-size: 116px; line-height: 140px; }
.sp-pos { font-size: 56px; font-weight: 600; line-height: 80px; }
.sp-pos.p0 { color: #E8C547; }
.sp-pos.p1 { color: #C9CED6; }
.sp-pos.p2 { color: #CD8B4E; }
.sp-driver { font-size: 28px; font-weight: 600; line-height: 38px; }
.sp-f1.wide .sp-driver { font-size: 36px; }
.sp-teamname { font-size: 19px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.sp-f1.wide .sp-teamname { font-size: 23px; }

/* Markets: shares and bonds, the dollars and the country risk. */
.sp-mk {
  background: -webkit-linear-gradient(left, #0B1F33, #14161B, #101826);
  background: linear-gradient(90deg, #0B1F33, #14161B, #101826);
}
.sp-qname { font-size: 27px; font-weight: 600; }
.sp-qname.small { font-size: 21px; }
.sp-qprice { font-size: 27px; font-weight: 500; font-feature-settings: 'tnum'; }
.sp-change {
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  font-size: 22px;
  font-weight: 600;
  font-feature-settings: 'tnum';
}
.sp-change.small { height: 26px; line-height: 26px; padding: 0 9px; border-radius: 13px; font-size: 16px; }
.sp-change.up { color: #30D158; background: rgba(48, 209, 88, 0.18); }
.sp-change.down { color: #FF453A; background: rgba(255, 69, 58, 0.18); }
.sp-dname { font-size: 28px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.sp-dname.small { font-size: 21px; }
.sp-dvalue { font-size: 40px; font-weight: 600; font-feature-settings: 'tnum'; }
.sp-dvalue.small { font-size: 32px; line-height: 40px; }
.sp-risk { font-size: 150px; font-weight: 600; line-height: 170px; letter-spacing: -0.02em; }
.sp-risk.small { font-size: 104px; line-height: 124px; }
.sp-riskchange { font-size: 30px; font-weight: 600; }
.sp-riskchange.up { color: #30D158; }
.sp-riskchange.down { color: #FF453A; }
.sp-risk.tiny { font-size: 76px; line-height: 90px; }
.sp-riskchange.small { font-size: 22px; }
.sp-dvalue.up { color: #30D158; }
.sp-dvalue.down { color: #FF453A; }
.sp-vline { width: 1px; background: rgba(255, 255, 255, 0.08); }

/* MARK: - Ticker: along the bottom on the Markets tab, sliding as a market screen. */

#ticker {
  position: absolute;
  left: 0;
  top: 1032px;
  width: 1920px;
  height: 48px;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  font-size: 23px;
  line-height: 48px;
  white-space: nowrap;
  font-feature-settings: 'tnum';
  color: #1D1D1F;
}
#ticker.on { opacity: 1; }
#ticker .strip {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: slide 60s linear infinite;
  animation: slide 60s linear infinite;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
#ticker.on .strip { -webkit-animation-play-state: running; animation-play-state: running; }
#ticker .half { display: inline-block; }
#ticker .item span { margin-right: 14px; }
#ticker .label { font-weight: 500; color: #6E6E73; }
#ticker .value { font-weight: 600; }
#ticker .change { font-weight: 600; font-size: 21px; color: #6E6E73; }
#ticker .change.up { color: #1FA347; }
#ticker .change.down { color: #E5352B; }
#ticker .dot { margin: 0 20px; color: rgba(110, 110, 115, 0.5); }
.night #ticker { color: #F5F5F7; }
.night #ticker .label, .night #ticker .change { color: rgba(245, 245, 247, 0.62); }
.night #ticker .change.up { color: #30D158; }
.night #ticker .change.down { color: #FF453A; }
@-webkit-keyframes slide { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-50%); } }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* The settings' search box (the Markets tab's shares, on a computer). */
.box input.search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 70px;
  margin: 0 0 14px;
  padding: 0 24px;
  border: 0;
  border-radius: 20px;
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  color: #FFF;
  font: inherit;
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
}
.box input.search::placeholder { color: rgba(255, 255, 255, 0.4); text-transform: none; font-weight: 500; }
.sp-mk.dense .sp-qname, .sp-mk.dense .sp-qprice { font-size: 22px; }
.sp-mk.dense .sp-league { font-size: 17px; }

/* A match's details (the web page: a click on a match): the score, where and who referees, the lineups or the squads. */
#match .box {
  position: absolute;
  left: 110px;
  top: 50px;
  width: 1700px;
  height: 980px;
  border-radius: 40px;
  padding: 30px 50px;
  box-sizing: border-box;
  overflow: hidden;
  background: -webkit-linear-gradient(top, rgba(30, 34, 42, 0.97), rgba(14, 16, 21, 0.98));
  background: linear-gradient(rgba(30, 34, 42, 0.97), rgba(14, 16, 21, 0.98));
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.md-head { position: relative; height: 130px; }
.md-side { position: absolute; top: 0; width: 640px; height: 130px; }
.md-side.home { left: 0; text-align: left; }
.md-side.away { right: 0; text-align: right; }
.md-crest { width: 110px; height: 110px; object-fit: contain; vertical-align: middle; margin-top: 10px; }
.md-team { display: inline-block; vertical-align: middle; margin: 10px 26px 0; max-width: 480px; font-size: 46px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-mid { position: absolute; left: 50%; top: 0; width: 320px; margin-left: -160px; text-align: center; }
.md-score { font-size: 84px; font-weight: 700; line-height: 100px; letter-spacing: -0.02em; }
.md-state { font-size: 24px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.md-state.live { color: #FF5A5F; }
.md-where { margin: 14px 0 18px; text-align: center; font-size: 25px; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
.md-where span { margin: 0 18px; white-space: nowrap; }
.md-where .md-league { color: rgba(255, 255, 255, 0.5); }
.md-body { position: relative; }
.md-note { margin-top: 160px; text-align: center; font-size: 32px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.md-note.small { margin: 0 0 16px; font-size: 23px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }

.md-pitch {
  position: relative;
  width: 1600px;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, #1F6B3A 0, #1F6B3A 100px, #237541 100px, #237541 200px);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.md-line { position: absolute; border: 3px solid rgba(255, 255, 255, 0.35); box-sizing: border-box; }
.md-line.half { left: 798px; top: 0; width: 0; height: 500px; border-width: 0 0 0 3px; }
.md-line.circle { left: 720px; top: 170px; width: 160px; height: 160px; border-radius: 50%; }
.md-line.area { top: 110px; width: 230px; height: 280px; }
.md-line.area.left { left: -3px; }
.md-line.area.right { right: -3px; }
.md-formation { position: absolute; top: 14px; font-size: 24px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.md-formation.left { left: 24px; }
.md-formation.right { right: 24px; }
.md-player { position: absolute; height: 60px; text-align: center; }
.md-num { position: relative; }
.md-balls { position: absolute; left: 30px; top: -14px; font-size: 18px; line-height: 1; white-space: nowrap; }
.md-card { position: absolute; right: 34px; top: -12px; width: 12px; height: 17px; border-radius: 2px; background: #F5C518; }
.md-card.red, .sp-card.red { background: #E53935; }
.md-num { display: inline-block; width: 40px; height: 40px; border-radius: 20px; line-height: 40px; font-size: 20px; font-weight: 700; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); }
.md-player.home .md-num { background: #FFF; color: #12151B; }
.md-player.away .md-num { background: #12151B; color: #FFF; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.7); }
.md-name { font-size: 19px; font-weight: 600; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }

.md-bench, .md-squads { margin-top: 20px; }
.md-col { display: inline-block; vertical-align: top; width: 780px; }
.md-col + .md-col { margin-left: 40px; }
.md-coach { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.md-subs { font-size: 21px; font-weight: 500; line-height: 30px; color: rgba(255, 255, 255, 0.7); }
.md-squads { margin-top: 0; }
.md-squadhead { font-size: 30px; font-weight: 700; margin-bottom: 10px; }
.md-squadhead img { width: 40px; height: 40px; object-fit: contain; vertical-align: -9px; margin-right: 14px; }
.md-groups { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 30px; column-gap: 30px; }
.md-group { -webkit-column-break-inside: avoid; break-inside: avoid; margin-bottom: 12px; }
.md-pos { font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45); margin-bottom: 2px; }
.md-sq { font-size: 21px; font-weight: 500; line-height: 29px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-sqn { display: inline-block; width: 38px; color: rgba(255, 255, 255, 0.5); font-weight: 600; }

/* NBA and Rugby: a team's record under its name; a narrow board's longer times ("sáb 10:30"). */
.sp-note { font-size: 22px; font-weight: 500; color: rgba(255, 255, 255, 0.55); text-align: center; }
.sp-time.small { font-size: 17px; }

/* An NBA game's sheet: the box score (number, name and position, minutes, points, rebounds, assists) and the injured. */
.md-box { margin-top: 4px; }
.md-brow { height: 30px; line-height: 30px; font-size: 21px; font-weight: 500; white-space: nowrap; }
.md-brow span { display: inline-block; vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
.md-brow.head { font-size: 17px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45); }
.md-brow .c0 { width: 44px; color: rgba(255, 255, 255, 0.5); font-weight: 600; }
.md-brow .c1 { width: 424px; }
.md-brow .c2, .md-brow .c3, .md-brow .c4, .md-brow .c5 { width: 76px; text-align: right; }
.md-brow .strong { font-weight: 700; }
.md-box .md-pos { margin-top: 10px; }
.md-ppos { font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.md-coach.small { font-size: 21px; font-weight: 600; color: rgba(255, 255, 255, 0.7); margin: -4px 0 10px; }
.md-sq.hurt { color: rgba(255, 255, 255, 0.55); }
.md-hurt { margin-left: 10px; font-size: 15px; font-weight: 700; text-transform: uppercase; color: #FF6B6B; }

/* The Weather tab: now (the big temperature and the details beside it), the next hours, the next days. */
.sp-sym { position: absolute; background-color: #FFF; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.sp-wtemp { font-size: 150px; font-weight: 500; line-height: 190px; letter-spacing: -0.03em; }
.sp-wtemp.center { text-align: center; font-size: 96px; line-height: 110px; }
.sp-wcond { font-size: 38px; font-weight: 600; }
.sp-wrow { height: 48px; line-height: 48px; font-size: 24px; }
.sp-wrow.line { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sp-wrow .k { position: absolute; left: 0; color: rgba(255, 255, 255, 0.6); font-weight: 500; }
.sp-wrow .v { position: absolute; right: 0; font-weight: 600; }
.sp-wlabel { font-size: 23px; font-weight: 600; line-height: 44px; white-space: nowrap; }
.sp-wval { font-size: 25px; font-weight: 600; line-height: 44px; text-align: right; white-space: nowrap; }
.sp-wval .low { color: rgba(255, 255, 255, 0.5); font-weight: 500; }
.sp-rain { font-size: 18px; font-weight: 700; line-height: 44px; color: #7CC4FF; text-align: center; }

/* The NBA's standings: East and West side by side, a line under the playoffs (6th) and the play-in (10th). */
.sp-srow { position: absolute; font-size: 16px; font-weight: 600; white-space: nowrap; }
.sp-srow.cut { border-top: 1px dashed rgba(255, 255, 255, 0.3); }
.sp-srow span, .sp-srow img { display: inline-block; vertical-align: middle; }
.sp-srow .n { width: 22px; text-align: right; margin-right: 6px; color: rgba(255, 255, 255, 0.45); font-weight: 500; }
.sp-srow img { width: 18px; height: 18px; object-fit: contain; margin-right: 5px; }
.sp-srow .a { width: 42px; }
.sp-srow .r { position: absolute; right: 0; color: rgba(255, 255, 255, 0.75); font-weight: 500; }

/* The ATP's top 10: position, flag, name, points, the move since the last ranking. */
.sp-rrow { position: absolute; font-size: 19px; font-weight: 600; white-space: nowrap; }
.sp-rrow.line { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.sp-rrow span, .sp-rrow img { display: inline-block; vertical-align: middle; }
.sp-rrow .n { width: 26px; text-align: right; margin-right: 8px; color: rgba(255, 255, 255, 0.45); font-weight: 500; }
.sp-rrow img { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; margin-right: 8px; }
.sp-rrow .a { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.sp-rrow .p { position: absolute; right: 0; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.sp-rrow .m { position: absolute; right: 70px; font-size: 13px; font-weight: 700; }
.sp-rrow .m.up { color: #34C759; }
.sp-rrow .m.down { color: #FF453A; }

/* The Tasks tab: the code to link the TV, the lists (a dot in the color of who it's for), and a list opened. */
.td-wday { position: absolute; text-align: center; font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.td-day { position: absolute; text-align: center; font-size: 21px; font-weight: 500; }
.td-day.end { color: rgba(255, 255, 255, 0.6); }
.td-day.past { color: rgba(255, 255, 255, 0.35); }
.td-day.today span { display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 20px; background: #FF3B30; color: #FFF; font-weight: 700; }
.td-day { overflow: visible; }
.td-mark { position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 3px; background: #FF7A55; }
.td-day.today .td-mark { background: #FFF; bottom: 1px; }
.td-due { color: rgba(255, 255, 255, 0.75); }
.td-due.today { color: #FF7A55; }
.td-due.late { color: #FF5A50; }
.td-scan { font-size: 21px; line-height: 28px; white-space: normal !important; }
.td-qr { position: absolute; background: #FFF; border-radius: 18px; padding: 14px; box-sizing: border-box; }
.td-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.td-big { font-size: 40px; font-weight: 700; line-height: 48px; white-space: normal !important; }
.td-step { font-size: 25px; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
.td-step.center, .td-code.center { text-align: center; }
.td-code { font-size: 30px; font-weight: 700; letter-spacing: 0.12em; }
.td-row { position: absolute; font-size: 26px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.td-row.tall { font-size: 21px; }
.td-row.line { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.td-dot { display: inline-block; width: 12px; height: 12px; border-radius: 6px; margin-right: 14px; vertical-align: 2px; }
.td-row.tall .td-dot { width: 9px; height: 9px; margin-right: 10px; vertical-align: 1px; }
.td-text { display: inline-block; max-width: 760px; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.td-row.tall .td-text { max-width: 260px; }
.td-who { position: absolute; right: 0; font-size: 21px; color: rgba(255, 255, 255, 0.55); }

#todo .box {
  position: absolute;
  left: 410px;
  top: 80px;
  width: 1100px;
  height: 920px;
  border-radius: 40px;
  padding: 36px 46px;
  box-sizing: border-box;
  background: -webkit-linear-gradient(top, rgba(34, 36, 44, 0.97), rgba(18, 20, 26, 0.98));
  background: linear-gradient(rgba(34, 36, 44, 0.97), rgba(18, 20, 26, 0.98));
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.td-house { font-size: 22px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.td-tabs { margin: 12px 0 22px; white-space: nowrap; overflow: hidden; }
.td-tab { display: inline-block; margin-right: 12px; padding: 8px 20px; border-radius: 26px; font-size: 26px; font-weight: 600; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); }
.td-tab.on { color: #12151B; background: #FFF; }
.td-none { margin-top: 160px; text-align: center; font-size: 30px; font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.td-item { position: relative; height: 70px; line-height: 70px; margin-bottom: 4px; padding: 0 22px; border-radius: 18px; font-size: 29px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.td-item.focus { background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.td-check { display: inline-block; width: 34px; height: 34px; line-height: 34px; border-radius: 17px; margin-right: 20px; vertical-align: middle; text-align: center; font-size: 20px; color: #FFF; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55); }
.td-item.done .td-check { background: #FF7A55; box-shadow: none; }
.td-label { display: inline-block; max-width: 700px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.td-item.done .td-label { color: rgba(255, 255, 255, 0.4); text-decoration: line-through; }
.td-side { position: absolute; right: 22px; top: 0; font-size: 22px; font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.td-hint { position: absolute; left: 46px; bottom: 30px; font-size: 22px; font-weight: 500; color: rgba(255, 255, 255, 0.45); }

/* All the day's matches (a click or OK on the board of the Football tab) */
#matches .box {
  position: absolute;
  left: 260px;
  top: 70px;
  width: 1400px;
  height: 940px;
  border-radius: 40px;
  padding: 36px 40px 80px;
  box-sizing: border-box;
  background: -webkit-linear-gradient(top, rgba(14, 34, 25, 0.97), rgba(17, 24, 39, 0.98));
  background: linear-gradient(rgba(14, 34, 25, 0.97), rgba(17, 24, 39, 0.98));
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ml-head { position: relative; height: 40px; padding: 0 22px; font-size: 22px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); }
.ml-count { position: absolute; right: 22px; letter-spacing: 0; font-weight: 500; }
.ml-list { position: relative; height: 744px; margin-top: 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.ml-list::-webkit-scrollbar { width: 6px; }
.ml-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 3px; }
.ml-row { position: relative; min-height: 92px; padding: 0 22px; border-radius: 18px; white-space: nowrap; cursor: pointer; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07); }
.ml-row.focus { background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.ml-row > span, .ml-row > img { display: inline-block; vertical-align: middle; line-height: 92px; }
.ml-time { width: 140px; font-size: 26px; font-weight: 600; }
.ml-time.live { color: #FF4D5E; }
.ml-time.done { color: rgba(255, 255, 255, 0.45); }
.ml-name { width: 340px; overflow: hidden; text-overflow: ellipsis; font-size: 30px; font-weight: 500; }
.ml-name.home { text-align: right; }
.ml-crest { width: 54px; height: 54px; margin: 0 16px; -o-object-fit: contain; object-fit: contain; }
.ml-score { width: 96px; text-align: center; font-size: 32px; font-weight: 600; }
.ml-league { width: 170px; overflow: hidden; text-overflow: ellipsis; text-align: right; font-size: 21px; font-weight: 500; color: rgba(255, 255, 255, 0.45); }
.ml-goals { margin: -24px 0 0 140px; padding-bottom: 12px; font-size: 20px; color: rgba(255, 255, 255, 0.7); }
.ml-goals > span { display: inline-block; vertical-align: top; }
.ml-goals .ml-name { font-size: 20px; line-height: 26px; white-space: normal; }
.ml-gap { display: inline-block; width: 268px; }
#matches .td-hint { left: 62px; }