/*
 * 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: #040a16 !important;
}

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;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 60%;
  perspective-origin: 50% 60%;
}

.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;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 60%;
  perspective-origin: 50% 60%;
}
#drawer {
  z-index: 2;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1200px;
  perspective: 1200px;
}
.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) translateZ(-80px) rotateX(4deg);
  transform: translateY(-560px) translateZ(-80px) rotateX(4deg);
}
#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; }

/* MARK: - Title and tabs */

#title {
  position: absolute;
  left: 76px;
  top: 110px;
  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);
}
.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. */

#cards {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.card {
  position: absolute;
  top: 262px;
  height: 442px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.26s cubic-bezier(0.18, 0.9, 0.26, 1.25);
  transition: transform 0.26s cubic-bezier(0.18, 0.9, 0.26, 1.25);
  will-change: transform;
}
.card .img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background-color: #DADADF;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: box-shadow 0.26s, -webkit-transform 0.26s;
  transition: box-shadow 0.26s, transform 0.26s;
}
.card .img::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.9), 0 0 25px rgba(255, 255, 255, 0.35);
  background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0) 70%);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  -webkit-transition: opacity 0.22s;
  transition: opacity 0.22s;
}
.card.focus {
  -webkit-transform: translate3d(0, -14px, 60px) scale(1.08) rotateX(-2deg);
  transform: translate3d(0, -14px, 60px) scale(1.08) rotateX(-2deg);
  z-index: 10;
}
.card.focus .img {
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.52), 0 12px 24px rgba(0, 0, 0, 0.25);
}
.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-transform: translateZ(25px);
  transform: translateZ(25px);
  -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;
  -webkit-transform: translateZ(18px);
  transform: translateZ(18px);
}
.night .card .img { background-color: #2C2C2E; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32); }
.night .card.focus .img { box-shadow: 0 35px 70px rgba(0, 0, 0, 0.75), 0 0 0 2.5px rgba(255, 255, 255, 0.95), 0 0 35px rgba(255, 255, 255, 0.3); }
.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.68), rgba(255, 255, 255, 0.38));
  background: linear-gradient(rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.38));
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18), inset 0 2px 2px rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  -webkit-transform: rotateX(14deg) translateZ(-8px);
  transform: rotateX(14deg) translateZ(-8px);
  -webkit-transform-origin: 50% 90%;
  transform-origin: 50% 90%;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15), box-shadow 0.35s;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15), box-shadow 0.35s;
}
.night #platter {
  background: -webkit-linear-gradient(top, rgba(34, 34, 38, 0.8), rgba(17, 17, 19, 0.68));
  background: linear-gradient(rgba(34, 34, 38, 0.8), rgba(17, 17, 19, 0.68));
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55), inset 0 2px 2px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

#tiles {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.tile {
  position: absolute;
  top: 854px;
  height: 126px;
  border-radius: 22px;
  color: #FFF;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: -webkit-transform 0.26s cubic-bezier(0.18, 0.9, 0.26, 1.25), box-shadow 0.26s;
  transition: transform 0.26s cubic-bezier(0.18, 0.9, 0.26, 1.25), box-shadow 0.26s;
  will-change: transform;
}
.tile img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 70%;
  max-height: 56%;
  -webkit-transform: translate(-50%, -50%) translateZ(24px);
  transform: translate(-50%, -50%) translateZ(24px);
  -webkit-transition: -webkit-transform 0.26s cubic-bezier(0.18, 0.9, 0.26, 1.25);
  transition: transform 0.26s cubic-bezier(0.18, 0.9, 0.26, 1.25);
  object-fit: contain;
}
.tile .word {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  top: 50%;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  -webkit-transform: translateY(-50%) translateZ(24px);
  transform: translateY(-50%) translateZ(24px);
  -webkit-transition: -webkit-transform 0.26s cubic-bezier(0.18, 0.9, 0.26, 1.25);
  transition: transform 0.26s cubic-bezier(0.18, 0.9, 0.26, 1.25);
  text-align: center;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #FFFFFF;
}
.tile::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 22px;
  background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0) 65%);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0) 65%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateZ(36px);
  transform: translateZ(36px);
  -webkit-transition: opacity 0.24s;
  transition: opacity 0.24s;
}
.tile.focus {
  -webkit-transform: translate3d(0, -18px, 60px) scale(1.22) rotateX(-2deg);
  transform: translate3d(0, -18px, 60px) scale(1.22) rotateX(-2deg);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.46), 0 0 0 2.5px #FFFFFF, 0 0 32px rgba(255, 255, 255, 0.5);
  z-index: 10;
}
.tile.focus img {
  -webkit-transform: translate(-50%, -50%) translateZ(36px) scale(1.08);
  transform: translate(-50%, -50%) translateZ(36px) scale(1.08);
}
.tile.focus .word {
  -webkit-transform: translateY(-50%) translateZ(36px) scale(1.06);
  transform: translateY(-50%) translateZ(36px) scale(1.06);
}
.tile.focus::after { opacity: 1; }
.night .tile { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38); }
.night .tile.focus { box-shadow: 0 32px 64px rgba(0, 0, 0, 0.72), 0 0 0 2.5px rgba(255, 255, 255, 0.95), 0 0 35px rgba(255, 255, 255, 0.35); }

/* 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-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.22s cubic-bezier(0.18, 0.9, 0.26, 1.25), box-shadow 0.22s, background-color 0.14s;
  transition: transform 0.22s cubic-bezier(0.18, 0.9, 0.26, 1.25), box-shadow 0.22s, 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: translate3d(0, -10px, 45px) scale(1.12);
  transform: translate3d(0, -10px, 45px) scale(1.12);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.42), 0 0 0 2px #FFFFFF, 0 0 25px rgba(255, 255, 255, 0.4);
  z-index: 10;
}
.night .key { color: rgba(255, 255, 255, 0.95); }
.night .key.off { color: rgba(255, 255, 255, 0.42); }
.night .key.focus { color: #1C1C1E; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.7), 0 0 0 2px #FFFFFF, 0 0 25px rgba(255, 255, 255, 0.35); }

.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 .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 .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 .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: - 3D Directional Spatial Tilt Micro-Physics */
.tile.focus.tilt-r {
  -webkit-transform: translate3d(0, -18px, 60px) scale(1.22) rotateX(-2deg) rotateY(8deg) !important;
  transform: translate3d(0, -18px, 60px) scale(1.22) rotateX(-2deg) rotateY(8deg) !important;
}
.tile.focus.tilt-l {
  -webkit-transform: translate3d(0, -18px, 60px) scale(1.22) rotateX(-2deg) rotateY(-8deg) !important;
  transform: translate3d(0, -18px, 60px) scale(1.22) rotateX(-2deg) rotateY(-8deg) !important;
}
.tile.focus.tilt-u {
  -webkit-transform: translate3d(0, -22px, 65px) scale(1.22) rotateX(-7deg) !important;
  transform: translate3d(0, -22px, 65px) scale(1.22) rotateX(-7deg) !important;
}
.tile.focus.tilt-d {
  -webkit-transform: translate3d(0, -12px, 55px) scale(1.22) rotateX(4deg) !important;
  transform: translate3d(0, -12px, 55px) scale(1.22) rotateX(4deg) !important;
}

.card.focus.tilt-r {
  -webkit-transform: translate3d(0, -14px, 60px) scale(1.08) rotateX(-2deg) rotateY(7deg) !important;
  transform: translate3d(0, -14px, 60px) scale(1.08) rotateX(-2deg) rotateY(7deg) !important;
}
.card.focus.tilt-l {
  -webkit-transform: translate3d(0, -14px, 60px) scale(1.08) rotateX(-2deg) rotateY(-7deg) !important;
  transform: translate3d(0, -14px, 60px) scale(1.08) rotateX(-2deg) rotateY(-7deg) !important;
}
.card.focus.tilt-u {
  -webkit-transform: translate3d(0, -18px, 65px) scale(1.08) rotateX(-6deg) !important;
  transform: translate3d(0, -18px, 65px) scale(1.08) rotateX(-6deg) !important;
}
.card.focus.tilt-d {
  -webkit-transform: translate3d(0, -10px, 55px) scale(1.08) rotateX(4deg) !important;
  transform: translate3d(0, -10px, 55px) scale(1.08) rotateX(4deg) !important;
}


/* =========================================================================
 * VIKAS AK - 3D PORTFOLIO CYBERNETIC THEME (akvikas.github.io/3d-portfolio)
 * ========================================================================= */
:root {
  --bg: #040a16;
  --glass: rgba(14, 30, 58, 0.65);
  --line: rgba(77, 225, 255, 0.28);
  --cyan: #4de1ff;
  --cyan-glow: rgba(77, 225, 255, 0.6);
  --blue: #3b82f6;
  --text: #e8f2ff;
  --mute: #9bb2d3;
}

html, body {
  background: radial-gradient(1200px 600px at 75% -10%, #0b2150 0%, transparent 60%) no-repeat, #040a16 !important;
  color: #e8f2ff !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

#stage {
  background: radial-gradient(1200px 600px at 75% -10%, #0b2150 0%, transparent 60%) no-repeat, #040a16;
}

#sky { background: transparent !important; }
#sky .day, #sky .night, #sky .veil, #sky .lift { background: transparent !important; }

/* Cybernetic HUD Frame from akvikas.github.io */
.hud-frame {
  position: absolute;
  top: 24px;
  left: 28px;
  right: 28px;
  bottom: 24px;
  pointer-events: none;
  z-index: 5;
}
.hud-frame .c {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #4de1ff;
  border-style: solid;
  opacity: 0.65;
}
.hud-frame .tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.hud-frame .tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.hud-frame .bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.hud-frame .br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.hud-frame .lb {
  position: absolute;
  left: 28px;
  top: 2px;
  font: 600 13px ui-monospace, Menlo, Consolas, monospace;
  color: #4de1ff;
  letter-spacing: 0.16em;
  opacity: 0.85;
}
.hud-frame .rb {
  position: absolute;
  right: 28px;
  top: 2px;
  font: 600 13px ui-monospace, Menlo, Consolas, monospace;
  color: #4de1ff;
  letter-spacing: 0.16em;
  opacity: 0.85;
}

/* Header & Title */
#title {
  top: 110px !important;
  color: #e8f2ff !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 0 30px rgba(77, 225, 255, 0.45) !important;
}

/* Hide empty tabs in no-picks mode to avoid visual clutter */
.no-picks #tabs {
  display: none !important;
}

.tab {
  font-family: ui-monospace, Menlo, Consolas, monospace !important;
  font-size: 15px !important;
  border: 1px solid rgba(77, 225, 255, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(14, 30, 58, 0.6) !important;
  color: #9bb2d3 !important;
  padding: 6px 14px !important;
  transition: all 0.2s ease !important;
}
.tab.focus, .tab.on {
  border-color: #4de1ff !important;
  color: #4de1ff !important;
  background: rgba(14, 30, 58, 0.85) !important;
  box-shadow: 0 0 20px rgba(77, 225, 255, 0.4) !important;
}

/* Cybernetic HUD Clock */
#clock {
  color: #e8f2ff !important;
  text-shadow: 0 0 45px rgba(77, 225, 255, 0.35) !important;
}
#clock .time {
  font-weight: 200 !important;
  color: #e8f2ff !important;
}
#clock .date {
  color: #4de1ff !important;
  font-family: ui-monospace, Menlo, Consolas, monospace !important;
  letter-spacing: 0.1em !important;
  font-size: 34px !important;
  text-shadow: 0 0 22px rgba(77, 225, 255, 0.6) !important;
}

/* 3D Cyber Platter Shelf */
#platter {
  background: linear-gradient(180deg, rgba(14, 30, 58, 0.76), rgba(6, 14, 30, 0.86)) !important;
  border: 1.5px solid rgba(77, 225, 255, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 4, 15, 0.85), 0 0 35px rgba(77, 225, 255, 0.18), inset 0 2px 3px rgba(77, 225, 255, 0.45) !important;
  border-radius: 40px !important;
}

/* 3D App Tiles with overflow clipping to prevent text bleed */
.tile {
  border-radius: 20px !important;
  border: 1px solid rgba(77, 225, 255, 0.25) !important;
  overflow: hidden !important; /* CRITICAL: Fixes SmartThings text overlap */
  box-shadow: 0 8px 24px rgba(0, 4, 15, 0.6) !important;
}
.tile.focus {
  border: 2.5px solid #4de1ff !important;
  box-shadow: 0 0 40px rgba(77, 225, 255, 0.8), 0 25px 60px rgba(0, 4, 15, 0.95), inset 0 0 20px rgba(77, 225, 255, 0.3) !important;
}

/* Buttons and Drawer Glass */
.round {
  background: rgba(14, 30, 58, 0.65) !important;
  border: 1px solid rgba(77, 225, 255, 0.3) !important;
  color: #4de1ff !important;
}
.round.focus {
  border-color: #4de1ff !important;
  box-shadow: 0 0 25px rgba(77, 225, 255, 0.7) !important;
  background: rgba(77, 225, 255, 0.25) !important;
}

.key.glass {
  background: rgba(14, 30, 58, 0.75) !important;
  border: 1px solid rgba(77, 225, 255, 0.28) !important;
  color: #e8f2ff !important;
}
.key.focus {
  border-color: #4de1ff !important;
  box-shadow: 0 0 30px rgba(77, 225, 255, 0.65) !important;
  background: rgba(77, 225, 255, 0.25) !important;
  color: #4de1ff !important;
}

/* Hero 3D Orbit Sphere from https://akvikas.github.io/3d-portfolio */
#heroOrbWrap {
  position: absolute;
  left: 1140px;
  top: 140px;
  width: 660px;
  height: 640px;
  pointer-events: none;
  z-index: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

#heroOrbCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.drawer-open #heroOrbWrap,
.sheet.open ~ #heroOrbWrap {
  opacity: 0.15;
}