/*
 * The home screen on a 1920 × 1080 stage, in the To Do app's Tahoe look (the glass kit, glass.css): the blue wave
 * behind everything; the picks in one glass sheet (the clock and the tabs as its sidebar, the focused pick large, the
 * three picks under it); the top buttons as Control Center at the top right; the shelf apps as the Dock. ↓ on the Dock
 * opens the drawer (inputs, shortcuts, weather, prices). Day by default, body.night 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. Glass pieces are placed with left/top, never a resting transform
 * (glass.js lines their frost up from their offsets).
 */
@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: #9fb4d0;
}
body.night { background: #0a0f22; }

body {
  font-family: 'Inter', 'LG Smart UI', 'Helvetica Neue', Arial, sans-serif;
  color: rgba(0, 0, 0, 0.85);
  -webkit-font-smoothing: antialiased;
  cursor: default;
  font-optical-sizing: auto;
}

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 (the drawer, the sheets, the overlays). */
.sym {
  display: inline-block;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: currentColor;
}

/* Line icons from the sprite in index.html (the sidebar and Control Center). */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.ic { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* MARK: - Wallpaper: the wave (.g-wall), dimmed a little while the drawer is open. */

#sky .lift { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #FFF; opacity: 0; -webkit-transition: opacity 0.45s; transition: opacity 0.45s; }
.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 item (z-index) never shows over the drawer, a sheet or the screensaver. */
#home { z-index: 1; }
#drawer { z-index: 2; }
/* the sheets (#apps, #settings, #shelfedit, #langpick) are 3: see their section */
#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: - The sheet: the picks. Its sidebar has the clock and the tabs (as views), the pane the focused pick and the
   three picks. The sheet and every focus ring stay 54 px or more inside the screen's edges (the TV's safe area). */

#title { display: none; }

#sheet {
  position: absolute;
  left: 68px;
  top: 68px;
  width: 1230px;
  height: 784px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#side {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  padding: 30px 18px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#now { height: 64px; padding: 0 14px; white-space: nowrap; }
.no-picks #now { visibility: hidden; }   /* the pane has the big clock then */
#tabs { margin-top: 24px; }
#tabs .tab { margin-bottom: 6px; white-space: nowrap; }
#tabs .tab .label { overflow: hidden; text-overflow: ellipsis; }
#tabs .tab .g-sq svg.ic { width: 30px; height: 30px; stroke-width: 2; }

/* Crypto quotes: a quiet list at the foot of the sidebar. */
#quotes { position: absolute; left: 32px; right: 18px; bottom: 26px; font-size: 24px; font-weight: 500; line-height: 36px; white-space: nowrap; font-feature-settings: 'tnum'; }
#quotes .q { display: block; overflow: hidden; text-overflow: ellipsis; }
#quotes svg { width: 22px; height: 22px; vertical-align: -3px; margin-right: 12px; fill: currentColor; }

#pane { position: absolute; left: 280px; top: 0; right: 0; bottom: 0; }

/* The focused pick (else the first), large: its photo with the name, details and overview over it. */
#hero {
  position: absolute;
  left: 28px;
  top: 28px;
  width: 894px;
  height: 500px;
  border-radius: 26px;
  overflow: hidden;
  background-color: #1d2433;
  box-shadow: 0 10px 30px rgba(12, 36, 92, 0.20);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.night #hero { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40); }
#hero.on { opacity: 1; }
#hero .shot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center 22%; opacity: 0; -webkit-transition: opacity 0.7s; transition: opacity 0.7s; }
#hero .shot.on { opacity: 1; }
#hero .scrim {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background:
    -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.62) 38%, rgba(0, 0, 0, 0) 76%),
    -webkit-linear-gradient(left, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0) 80%);
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.62) 38%, rgba(0, 0, 0, 0) 76%),
    linear-gradient(to right, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0) 80%);
}
#hero .edge { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 26px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
#info { position: absolute; left: 44px; bottom: 38px; width: 780px; color: #FFF; }   /* 70 px clear of the right edge */
#info .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
#info .meta { margin-top: 10px; font-size: 27px; font-weight: 500; line-height: 36px; color: rgba(255, 255, 255, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#info .about {
  margin-top: 10px;
  max-height: 72px;
  overflow: hidden;
  font-size: 25px;
  line-height: 36px;
  color: rgba(255, 255, 255, 0.86);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* The three picks: focused, a pick lifts and grows, with a deeper shadow (pre-drawn on :before, fading in). */
#cards { position: absolute; left: 28px; top: 554px; width: 894px; height: 202px; -webkit-perspective: 1400px; perspective: 1400px; }
#cards .card {
  position: absolute;
  top: 0;
  width: 282px;
  height: 159px;
  border-radius: 18px;
  -webkit-transition: -webkit-transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
#cards .card .img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background-color: #1d2433;
  background-size: cover;
  background-position: center;
}
#cards .card .name { position: absolute; left: 4px; top: 168px; max-width: 274px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cards .card:before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 18px;
  box-shadow: 0 28px 44px rgba(6, 28, 92, 0.44), 0 8px 16px rgba(6, 28, 92, 0.26);
  opacity: 0; z-index: -1; pointer-events: none; -webkit-transition: opacity 0.2s; transition: opacity 0.2s;
}
.night #cards .card:before { box-shadow: 0 28px 44px rgba(0, 0, 0, 0.66), 0 8px 16px rgba(0, 0, 0, 0.44); }
#cards .card.focus:before { opacity: 1; }
/* 1.08: 11 px more on each side (the gap to the next pick is 24, the sheet's edge 28) and a name 9 px under it */
#cards .card.focus { -webkit-transform: translateY(-6px) scale(1.08); transform: translateY(-6px) scale(1.08); }
#cards .card.focus .name { color: rgba(0, 0, 0, 0.85); font-weight: 600; }
.night #cards .card.focus .name { color: rgba(255, 255, 255, 0.92); }

/* Without a TMDB key (or picks yet): the time and the date in the pane instead of the picks. */
#clock { position: absolute; left: 44px; top: 214px; display: none; white-space: nowrap; }
#clock .time { display: block; font-size: 176px; font-weight: 200; letter-spacing: -0.01em; line-height: 1; }
#clock .date { display: block; margin-top: 18px; font-size: 40px; font-weight: 500; line-height: 48px; }
.no-picks #clock { display: block; }
.no-picks #hero, .no-picks #cards { display: none; }

/* MARK: - Control Center: To do and Whiteboard as pills, then round buttons; the focused round one's name under it. */

#buttons { position: absolute; left: 0; top: 0; }
#buttons .cc { position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; }
#buttons .cc.g-pill { width: 242px; }
/* 1.10 and 3 px up: a round button 5.6 px each way (right edge 1857.6); a pill 12.1 px to the side (right edge 1864.1, 55.9
   px inside the screen) and 8.6 px up (the top row's top 59.4) */
#buttons .cc.g-round.focus { -webkit-transform: translateY(-3px) scale(1.10); transform: translateY(-3px) scale(1.10); }
#buttons .cc.g-pill.focus { -webkit-transform: translateY(-3px) scale(1.10); transform: translateY(-3px) scale(1.10); }
#buttons .cc .g-disc svg.ic { width: 36px; height: 36px; stroke-width: 2; }
#buttons .cc .title { margin-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#buttons .cc.g-round svg.ic { width: 44px; height: 44px; stroke-width: 1.9; }

#ccTip, #tileLabel {
  position: absolute;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
}
#ccTip { text-align: left; }   /* placed by its pill's own width (home.js) */
#ccTip .g-label { display: inline-block; }   /* the kit's label pill, as the Dock's and the drawer's */
#ccTip.on, #tileLabel.on { opacity: 1; }

/* MARK: - The Dock: the shelf apps on a glass tray; focused, an icon rises and grows, its name above it. */

#platter { position: absolute; top: 888px; -webkit-box-sizing: border-box; box-sizing: border-box; }
#platter .more { position: absolute; width: 17px; height: 17px; color: rgba(0, 0, 0, 0.6); }
#platter .more.back { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.night #platter .more { color: rgba(255, 255, 255, 0.8); }

#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);
}
#tiles .tile {
  position: absolute;
  top: 902px;
  color: #FFF;
  -webkit-transition: -webkit-transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.3s;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.3s;
}
#tiles .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 */
#tiles .tile img.logo { width: 70%; height: 50%; max-width: none; max-height: none; object-fit: contain; }
/* an app's name when its logo can't be read: 28 or 24 px (home.js), up to two lines, centred; a word too long for the
   tile breaks at a soft hyphen (home.js) rather than shrinking */
#tiles .tile .word {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 50%;
  max-height: 2.3em;
  line-height: 1.15;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* 1.10 and 4 px up: the icon's top stays 4.6 px under the tray's top edge (888), 5.4 px more to each side (the tray's end
   padding is 22, the gap to the next icon 20); the name tip sits between the sheet and the tray */
#tiles .tile.focus { -webkit-transform: translateY(-4px) scale(1.10); transform: translateY(-4px) scale(1.10); }

/* the name tip: a 28 px pill at 856 to 884, 4 px under the sheet's bottom rim (852) and 4 px over the tray's (888) */
#tileLabel { top: 856px; width: 400px; line-height: 0; }
#tileLabel .g-label { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; height: 28px; padding: 0 18px; border-radius: 14px; font-size: 22px; line-height: 28px; vertical-align: top; }
.drawer-open #tileLabel { opacity: 0; }


/* MARK: - Drawer: Control Center pieces under the risen Dock (it rests at y 328-464 while open). A label pill over
   each group, the inputs and shortcuts as one row of tiles (icon disc over the name), the weather and the prices as
   modules. Its edges are the home sheet's and Control Center's (68 and 1852). Everything is scoped to #drawer, and
   stays 54 px or more inside the screen's edges, focus rings too. */

#drawer .g-cc { position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* While the drawer is open the wave is dimmed (#sky .lift: white .32 by day, black .42 at night), so its glass is too:
   each stop is the kit's Control Center tint laid over that dim, as one layer (glass.js still lines the frost up).
   By day only white .18 of the lift: the full .32 takes white text under 4.5:1 over the pale crest. The labels keep
   the kit's own tint, for the same reason. */
#drawer .g-cc { background-image: linear-gradient(150deg, rgba(54, 90, 172, 0.51), rgba(44, 78, 160, 0.56) 55%, rgba(51, 88, 171, 0.52)), url('frost-cc-day.jpg'); }
#drawer .head.g-cc { background-image: linear-gradient(150deg, rgba(0, 46, 150, 0.40), rgba(0, 40, 140, 0.46) 55%, rgba(0, 46, 150, 0.42)), url('frost-cc-day.jpg'); }
.night #drawer .g-cc { background-image: linear-gradient(150deg, rgba(25, 28, 39, 0.66), rgba(11, 12, 18, 0.59) 55%, rgba(20, 23, 33, 0.64)), url('frost-cc-night.jpg'); }
/* the risen Dock above it, at night: its tint over the same dim (only while the drawer is open; closed it's the kit's) */
.night.drawer-open #platter { background-image: linear-gradient(rgba(16, 17, 25, 0.65), rgba(16, 17, 25, 0.65)), url('frost-dock-night.jpg'); }

/* a group's label: the kit's label pill in Control Center's glass, on the wallpaper, so it reads over the crest; 20 px
   over the tiles, as every row gap here */
#drawer .head.g-cc { top: 480px; color: #fff; }
.night #drawer .head.g-cc { color: rgba(255, 255, 255, 0.72); }

/* a tile: the icon in a disc, the name under it; focused, it lifts and grows a little (.g-ring) */
#drawer .key { top: 544px; height: 156px; border-radius: 36px; text-align: center; }
/* 1.10 and 4 px up: 11.5 px to each side (at the left 56.5 px in), 11.8 px up (8.2 clear of the group's label) */
#drawer .key.focus { -webkit-transform: translateY(-4px) scale(1.10); transform: translateY(-4px) scale(1.10); }
/* by day the focused tile is light glass with navy text: an input that isn't there keeps its quieter glyph and hollow disc */
body:not(.night) #drawer .key.off.focus .label, body:not(.night) #drawer .key.off.focus .g-disc { color: rgba(10, 42, 102, 0.86); }
body:not(.night) #drawer .key.off.focus .g-disc { box-shadow: inset 0 0 0 2px rgba(10, 42, 102, 0.30); }
.night #drawer .key.off.focus .label, .night #drawer .key.off.focus .g-disc { color: rgba(255, 255, 255, 0.84); }
#drawer .key .g-disc { position: absolute; left: 50%; top: 22px; margin-left: -34px; }
#drawer .key .g-disc svg.ic { width: 36px; height: 36px; stroke-width: 2; }
#drawer .key .label { position: absolute; left: 12px; right: 12px; top: 104px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* an input that isn't there: dimmed, still in the row */
/* an input that isn't there: the disc goes hollow (an outline, no fill) and the name and glyph step back, still readable */
#drawer .key.off .label, #drawer .key.off .g-disc { color: rgba(255, 255, 255, 0.8); }
.night #drawer .key.off .label, .night #drawer .key.off .g-disc { color: rgba(255, 255, 255, 0.66); }
#drawer .key.off .g-disc, .night #drawer .key.off .g-disc { background: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.30); }

/* the modules: the weather, the prices */
#drawer .module { top: 720px; height: 284px; border-radius: 36px; overflow: hidden; }
#drawer .module .head { position: absolute; left: 32px; top: 34px; white-space: nowrap; }
#drawer .module .side, #drawer #weather .range, #drawer #weather .hour .t, #drawer #weather .hour .low, #drawer #weather .sun,
#drawer #prices .coin svg { color: rgba(255, 255, 255, 0.9); fill: rgba(255, 255, 255, 0.9); }
.night #drawer .module .side, .night #drawer #weather .range, .night #drawer #weather .hour .t, .night #drawer #weather .hour .low,
.night #drawer #weather .sun, .night #drawer #prices .coin svg { color: rgba(255, 255, 255, 0.72); fill: rgba(255, 255, 255, 0.72); }
#drawer .module .side { position: absolute; right: 32px; top: 37px; font-size: 24px; font-weight: 500; line-height: 30px; white-space: nowrap; }

#drawer #weather .now { position: absolute; left: 32px; top: 76px; height: 96px; white-space: nowrap; }
#drawer #weather .now .sym { width: 56px; height: 56px; vertical-align: 12px; margin-right: 18px; }
#drawer #weather .now .temp { font-size: 96px; font-weight: 300; line-height: 96px; letter-spacing: -0.02em; }
#drawer #weather .cond { position: absolute; left: 32px; top: 176px; font-size: 28px; font-weight: 600; line-height: 34px; white-space: nowrap; }
#drawer #weather .head + .cond { top: 90px; font-weight: 500; }   /* no weather data */
#drawer #weather .range { position: absolute; left: 32px; top: 214px; font-size: 24px; font-weight: 500; line-height: 30px; white-space: nowrap; }
#drawer #weather .split { position: absolute; left: 382px; top: 28px; bottom: 28px; width: 2px; background: rgba(255, 255, 255, 0.18); }
.night #drawer #weather .split { background: rgba(255, 255, 255, 0.12); }
#drawer #weather .hours { position: absolute; left: 414px; right: 32px; top: 70px; height: 132px; }
#drawer #weather .hour { position: absolute; top: 0; text-align: center; }
#drawer #weather .hour .t { font-size: 24px; font-weight: 500; line-height: 30px; }
#drawer #weather .hour .sym { display: block; width: 32px; height: 32px; margin: 14px auto 12px; }
#drawer #weather .hour .d { font-size: 28px; font-weight: 600; line-height: 34px; }
#drawer #weather .hour .low { margin-left: 8px; font-size: 24px; font-weight: 500; }
#drawer #weather .sun { position: absolute; left: 414px; top: 214px;   /* on the H/L line */ font-size: 24px; font-weight: 500; line-height: 30px; white-space: nowrap; }
#drawer #weather .sun .sym { width: 24px; height: 24px; vertical-align: -4px; margin-right: 10px; }
#drawer #weather .sun span { margin-right: 36px; }

#drawer #prices .coin { position: absolute; left: 32px; right: 32px; height: 40px; font-size: 26px; font-weight: 500; line-height: 40px; white-space: nowrap; }
#drawer #prices .coin svg { position: absolute; left: 0; top: 7px; width: 26px; height: 26px; }
/* the name stops short of the price's column, with an ellipsis */
#drawer #prices .coin .n { position: absolute; left: 44px; right: 356px; top: 0; overflow: hidden; text-overflow: ellipsis; }
#drawer #prices .coin .p { position: absolute; right: 132px; top: 0; width: 208px; text-align: right; font-weight: 600; }
/* the day's change: a tinted chip with its sign, so the colour isn't the only cue */
#drawer #prices .coin .c { position: absolute; right: 0; top: 3px; width: 116px; height: 34px; line-height: 34px; border-radius: 17px; text-align: center; font-size: 22px; font-weight: 600; }
#drawer #prices .up { color: #fff; background: rgba(16, 110, 44, 0.62); }
#drawer #prices .down { color: #fff; background: rgba(170, 20, 20, 0.58); }
.night #drawer #prices .up { color: #8ae9a3; background: rgba(48, 209, 88, 0.18); }
.night #drawer #prices .down { color: #ffaaa4; background: rgba(255, 69, 58, 0.18); }

/* MARK: - Sheets: All Apps, Home Settings, the shelf editor and the language picker, each the tahoe-design skill's
   Edit Controls sheet: one glass sheet (.dlg, the kit's .g-sheet) over the dimmed screen, its title at the top, a
   list that scrolls under a hairline, and the hint in a footer. home.js gives each its one size: the row sheets lie
   exactly over the home sheet (68, 68, 1230 × 784), All Apps over it and Control Center (68 to 1852), two rows of
   icons tall. Every line of a row sheet is 80 px (a row, or a section head with the gap above its group), so the view
   always ends 16 px under its first line and over its last. Scoped by id. */

/* the layer is the dim over the screen: navy .14 by day, black .42 at night (the drawer's night dim) */
#apps, #settings, #shelfedit, #langpick {
  z-index: 3;
  background: rgba(12, 30, 70, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* while it fades out, the pointer goes to what's under it, not to its rows */
  -webkit-transition: opacity 0.24s, visibility 0s 0.3s;
  transition: opacity 0.24s, visibility 0s 0.3s;
}
.night #apps, .night #settings, .night #shelfedit, .night #langpick { background: rgba(0, 0, 0, 0.42); }
#apps.open, #settings.open, #shelfedit.open, #langpick.open {
  opacity: 1; visibility: visible; pointer-events: auto; -webkit-transition-delay: 0s; transition-delay: 0s;
}

/* the glass: placed with left/top (glass.js lines its frost up there); it opens from a little smaller (transform only,
   so the frost is right once it rests). Its tint is the kit's sheet tint laid over the layer's dim, as one layer:
   by day (232, 238, 249, .56) over navy .14, at night (22, 24, 34, .46) over black .42. */
#apps .dlg, #settings .dlg, #shelfedit .dlg, #langpick .dlg {
  position: absolute;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  background-image: linear-gradient(rgba(210, 217, 231, 0.62), rgba(210, 217, 231, 0.62)), url('frost-sheet-day.jpg');
  -webkit-transform: scale(0.96); transform: scale(0.96);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.night #apps .dlg, .night #settings .dlg, .night #shelfedit .dlg, .night #langpick .dlg {
  background-image: linear-gradient(rgba(16, 17, 25, 0.65), rgba(16, 17, 25, 0.65)), url('frost-sheet-night.jpg');
}
#apps.open .dlg, #settings.open .dlg, #shelfedit.open .dlg, #langpick.open .dlg { -webkit-transform: none; transform: none; }

/* title, the hairline under it, the scrolling view, the footer with its hairline */
#apps .head, #settings .head, #shelfedit .head, #langpick .head {
  position: absolute; left: 48px; right: 48px; top: 24px;   /* on the groups' edge */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#apps .hsep, #settings .hsep, #shelfedit .hsep, #langpick .hsep { position: absolute; left: 48px; right: 48px; top: 100px; }
#apps .view, #settings .view, #shelfedit .view, #langpick .view { position: absolute; left: 0; right: 0; top: 101px; overflow: hidden; }
#apps .list, #settings .list, #shelfedit .list, #langpick .list {
  position: absolute; left: 0; right: 0; top: 0;
  -webkit-transition: -webkit-transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1); transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);
}
/* the footer as the starter's: 12 px under its hairline, then the hint, then as much as the sides (48) */
#settings .foot, #shelfedit .foot, #langpick .foot { position: absolute; left: 48px; right: 48px; bottom: 0; height: 91px; }
#settings .foot .txt, #shelfedit .foot .txt, #langpick .foot .txt {
  position: absolute; left: 0; right: 0; top: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- rows (Settings, Shelf, Language): grouped like System Settings, label left, value right ---------- */
#settings .list, #shelfedit .list, #langpick .list { padding: 16px 48px; }
#settings .grp, #shelfedit .grp, #langpick .grp { position: relative; }
/* a group's section head (the starter's: plain, secondary, semibold), lined up with the rows' text; 80 px like a row,
   the space over it the gap between the groups */
#settings .ghead, #shelfedit .ghead {
  height: 80px; padding: 38px 28px 0; -webkit-box-sizing: border-box; box-sizing: border-box;
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#settings .ghead.out, #shelfedit .ghead.out { visibility: hidden; }
/* Each row paints its own piece of the group's box, so the list can show whole rows only (home.js hides the rest,
   .out) and the first and last rows in view round off like a group's ends (.vtop, .vbot): nothing is ever sliced. */
#settings .g-row, #shelfedit .g-row, #langpick .g-row {
  height: 80px; padding: 0 28px; white-space: nowrap;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.42);
}
.night #settings .g-row, .night #shelfedit .g-row, .night #langpick .g-row { background: rgba(255, 255, 255, 0.06); }
#settings .g-row.first, #settings .g-row.vtop, #shelfedit .g-row.first, #shelfedit .g-row.vtop, #langpick .g-row.first, #langpick .g-row.vtop {
  border-top-left-radius: 26px; border-top-right-radius: 26px;
}
#settings .g-row.last, #settings .g-row.vbot, #shelfedit .g-row.last, #shelfedit .g-row.vbot, #langpick .g-row.last, #langpick .g-row.vbot {
  border-bottom-left-radius: 26px; border-bottom-right-radius: 26px;
}
#settings .g-row.out, #shelfedit .g-row.out, #langpick .g-row.out { visibility: hidden; }
/* focused: a soft light capsule, 8 px inside the group's sides and 6 px inside its rows, no scale, so it never leaves
   the group or covers the next row (the row's own fill stays, the capsule lies over it) */
#settings .g-row.focus, #shelfedit .g-row.focus, #langpick .g-row.focus { -webkit-transform: none; transform: none; box-shadow: none; background: rgba(255, 255, 255, 0.42); }
.night #settings .g-row.focus, .night #shelfedit .g-row.focus, .night #langpick .g-row.focus { background: rgba(255, 255, 255, 0.06); }
#settings .g-row.focus:after, #shelfedit .g-row.focus:after, #langpick .g-row.focus:after {
  content: ''; position: absolute; left: 8px; right: 8px; top: 6px; bottom: 6px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 3px 12px rgba(12, 36, 92, 0.16);
}
.night #settings .g-row.focus:after, .night #shelfedit .g-row.focus:after, .night #langpick .g-row.focus:after {
  background: rgba(255, 255, 255, 0.15); box-shadow: none;
}
#settings .g-row > *, #shelfedit .g-row > *, #langpick .g-row > * { position: relative; z-index: 1; }
#settings .g-row .name, #shelfedit .g-row .name, #langpick .g-row .name { -webkit-flex: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* hairlines between the rows of a group start under the name, like Notification Center groups (none beside the focus) */
#settings .g-row + .g-row:before, #shelfedit .g-row + .g-row:before, #langpick .g-row + .g-row:before {
  content: ''; position: absolute; left: 94px; right: 28px; top: 0; height: 1px; background: rgba(60, 60, 67, 0.16);
}
#langpick .g-row + .g-row:before { left: 28px; }
.night #settings .g-row + .g-row:before, .night #shelfedit .g-row + .g-row:before, .night #langpick .g-row + .g-row:before { background: rgba(255, 255, 255, 0.12); }
#settings .g-row.focus:before, #settings .g-row.focus + .g-row:before, #shelfedit .g-row.focus:before, #shelfedit .g-row.focus + .g-row:before,
#langpick .g-row.focus:before, #langpick .g-row.focus + .g-row:before,
#settings .g-row.vtop:before, #shelfedit .g-row.vtop:before, #langpick .g-row.vtop:before { display: none; }
#settings .g-sq svg.ic { width: 30px; height: 30px; stroke-width: 2; }
#settings .g-sq svg.coin { width: 30px; height: 30px; fill: currentColor; }

/* the value: secondary text with ‹ › for a value the arrows cycle, › for a row that opens a list */
#settings .val, #shelfedit .val, #langpick .val {
  -webkit-flex: none; flex: none; margin-left: 24px;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  font-weight: 500;
}
/* on the focused row at night, brighter than .tc-2's .64, for 4.5:1 on the focus fill */
.night #settings .g-row.focus .val { color: rgba(255, 255, 255, 0.78); }
#settings .val svg.ic { width: 28px; height: 28px; stroke-width: 2.4; }
#settings .val svg.ic:first-child:not(:last-child) { margin-right: 10px; }   /* ‹ before a value */
#settings .val span + svg.ic { margin-left: 10px; }
/* the › glyph sits in the left of its box: pulled right so it ends where the switches do */
#settings .val svg.ic:last-child { margin-right: -9px; }
/* a disabled row (a coin while the Quotes widget is off) steps back; the focus fill stays at full strength */
#settings .g-row.dim .g-sq, #settings .g-row.dim .name, #settings .g-row.dim .val { opacity: 0.55; }
#settings .g-row.dim.focus .g-sq, #settings .g-row.dim.focus .name, #settings .g-row.dim.focus .val { opacity: 0.82; }   /* on the fill it keeps 4.5:1 */

/* on and off: a switch, system blue when on (the fill carries it, not text colour); drawn at rest, nothing animates */
#settings .sw, #shelfedit .sw {
  position: relative; width: 80px; height: 46px; border-radius: 23px;
  background: rgba(60, 60, 67, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.night #settings .sw, .night #shelfedit .sw { background: rgba(255, 255, 255, 0.18); box-shadow: none; }
#settings .sw.on, #shelfedit .sw.on { background: #007aff; }
.night #settings .sw.on, .night #shelfedit .sw.on { background: #0a84ff; }
#settings .sw .knob, #shelfedit .sw .knob {
  position: absolute; left: 3px; top: 3px; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.24), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
#settings .sw.on .knob, #shelfedit .sw.on .knob { left: 37px; }

/* the shelf editor: the app's icon in front (the size of Home Settings' squares, so the names line up), its place on
   the Dock in a blue disc, then its switch */
#shelfedit .mini { position: relative; width: 48px; height: 48px; margin-right: 18px; -webkit-flex: none; flex: none; border-radius: 13px; color: #fff; }
#shelfedit .mini img { position: absolute; left: 50%; top: 50%; max-width: 76%; max-height: 62%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#shelfedit .mini img.logo { width: 70%; height: 50%; max-width: none; max-height: none; object-fit: contain; }
#shelfedit .mini .word { position: absolute; left: 0; right: 0; top: 0; line-height: 48px; text-align: center; font-size: 26px; font-weight: 700; }
#shelfedit .ord, #langpick .tick {
  width: 44px; height: 44px; margin-right: 22px; border-radius: 50%;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  background: #007aff; color: #fff;
  font-size: 24px; font-weight: 700; line-height: 30px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.night #langpick .tick { background: #0a84ff; }
/* the place number: a deeper blue than the accent, so white 24 px figures pass 4.5:1 (6.5:1) */
#shelfedit .ord { background: #0056cc; }
#langpick .tick { margin-right: 0; }
#langpick .tick svg.ic { width: 28px; height: 28px; stroke-width: 3; }

/* ---------- All Apps: the Dock's app icons (the kit's .g-app finish), seven to a row, each with its name ---------- */
#apps .list { padding: 0; }
#apps .app { position: absolute; width: 230px; height: 220px; }
#apps .app.out { visibility: hidden; }   /* a row of icons that would not fit whole: home.js scrolls by rows */
#apps .icon {
  position: absolute; left: 45px; top: 0; width: 140px; height: 140px;
  border-radius: 32px;   /* the Dock's 25 at 108 px, scaled */
  color: #fff;
  -webkit-transition: -webkit-transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
#apps .icon img { position: absolute; left: 50%; top: 50%; max-width: 76%; max-height: 62%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#apps .icon img.logo { width: 70%; height: 50%; max-width: none; max-height: none; object-fit: contain; }
#apps .icon .word {
  position: absolute; left: 3%; right: 3%; top: 50%; max-height: 2.3em; line-height: 1.15;
  text-align: center; font-weight: 700; letter-spacing: -0.02em; overflow: hidden;
  word-wrap: break-word; overflow-wrap: break-word;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
/* focused: the icon rises and grows, as on the Dock (1.10, 6 px up: 13 px above its row, in the list's 16 px padding;
   its name stays above the shadow) */
#apps .icon.g-focus { -webkit-transform: translateY(-6px) scale(1.10); transform: translateY(-6px) scale(1.10); }
/* the name: up to two lines, so a long one keeps its meaning; focused, it keeps its weight (nothing reflows) */
#apps .app .name {
  position: absolute; z-index: 6; left: 8px; right: 8px; top: 160px; max-height: 60px; overflow: hidden; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  #apps .dlg, #settings .dlg, #shelfedit .dlg, #langpick .dlg,
  #apps .list, #settings .list, #shelfedit .list, #langpick .list, #apps .icon { -webkit-transition: none; transition: none; }
  #apps .dlg, #settings .dlg, #shelfedit .dlg, #langpick .dlg { -webkit-transform: none; transform: none; }
}

/* MARK: - Screensaver: the macOS lock screen. The picks' photos full
   screen, slowly drifting, each new one fading in over the last; over them, centred near the top with no card, the date
   and the large time in translucent glass (the photo, frosted, inside the digits, a grey-white tint, a faint light top
   edge), and the show's name small at the bottom centre. A soft scrim keeps them readable over any photo. Without
   photos, the wave. */

/* it fades in with its first photo in 0.6 s, and goes in 0.32 s on a key (the overlays' curve) */
#saver {
  background: #9fb4d0; opacity: 0; visibility: hidden;
  -webkit-transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.32s;
  transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.32s;
}
.night #saver { background: #0a0f22; }
#saver.on { opacity: 1; visibility: visible; -webkit-transition-duration: 0.6s, 0s; transition-duration: 0.6s, 0s; -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 ease-in-out, -webkit-transform 24s linear; transition: opacity 2.4s ease-in-out, transform 24s linear; }
#saver .photo.on { opacity: 1; }
#saver .photo.top { z-index: 1; }
/* The veils: each photo's own (they drift and fade with it), full width, never flat, fading out right below the
   time and right above the name. home.js sets each one's strength (opacity) for its photo, often 0, and its colour:
   near black under light glass, near white (.light) under dark glass. Shapes as VEIL_TOP and VEIL_FOOT in home.js. */
#saver .veil { position: absolute; left: 0; top: 0; width: 1920px; height: 760px; opacity: 0;
  background: linear-gradient(180deg, rgba(6, 6, 6, 1) 0px, rgba(6, 6, 6, 0.97) 120px, rgba(6, 6, 6, 0.9) 200px, rgba(6, 6, 6, 0.78) 280px, rgba(6, 6, 6, 0.6) 360px, rgba(6, 6, 6, 0.42) 440px, rgba(6, 6, 6, 0.26) 520px, rgba(6, 6, 6, 0.13) 600px, rgba(6, 6, 6, 0.05) 680px, rgba(6, 6, 6, 0) 760px); }
#saver .veil.light { background: linear-gradient(180deg, rgba(246, 246, 246, 1) 0px, rgba(246, 246, 246, 0.97) 120px, rgba(246, 246, 246, 0.9) 200px, rgba(246, 246, 246, 0.78) 280px, rgba(246, 246, 246, 0.6) 360px, rgba(246, 246, 246, 0.42) 440px, rgba(246, 246, 246, 0.26) 520px, rgba(246, 246, 246, 0.13) 600px, rgba(246, 246, 246, 0.05) 680px, rgba(246, 246, 246, 0) 760px); }
#saver .veil.foot { top: 540px; height: 540px;
  background: linear-gradient(0deg, rgba(6, 6, 6, 1) 0px, rgba(6, 6, 6, 0.97) 60px, rgba(6, 6, 6, 0.88) 120px, rgba(6, 6, 6, 0.74) 180px, rgba(6, 6, 6, 0.56) 240px, rgba(6, 6, 6, 0.38) 300px, rgba(6, 6, 6, 0.22) 360px, rgba(6, 6, 6, 0.1) 420px, rgba(6, 6, 6, 0.03) 480px, rgba(6, 6, 6, 0) 540px); }
#saver .veil.foot.light { background: linear-gradient(0deg, rgba(246, 246, 246, 1) 0px, rgba(246, 246, 246, 0.97) 60px, rgba(246, 246, 246, 0.88) 120px, rgba(246, 246, 246, 0.74) 180px, rgba(246, 246, 246, 0.56) 240px, rgba(246, 246, 246, 0.38) 300px, rgba(246, 246, 246, 0.22) 360px, rgba(246, 246, 246, 0.1) 420px, rgba(246, 246, 246, 0.03) 480px, rgba(246, 246, 246, 0) 540px); }
/* the date and time: 800 × 200 at the top centre (x 560, y 80), sized from a lock screen: date centre at 10.7%
   of the height, digits 10% of it, 2% between */
#saver .clock { position: absolute; left: 560px; top: 80px; width: 800px; height: 200px; z-index: 3; }
#saver .clock div, #saver .clock svg { position: absolute; left: 0; top: 0; width: 800px; height: 200px; overflow: visible; }
#saver .clock text { font-family: 'Inter', 'LG Smart UI', 'Helvetica Neue', Arial, sans-serif; text-anchor: middle; }
/* one neutral material, day and night: light smoky glass over a dark area, dark smoky glass (.dark) over a bright one */
#saver .date { font-size: 30px; font-weight: 600; letter-spacing: 0.8px; fill: rgba(236, 236, 236, 0.74); }
#saver .glass.dark .date { fill: rgba(22, 22, 22, 0.8); }
/* the time: heavy digits, corners rounded by a round-joined stroke of the same paint (600: webOS 3 and 4's Chromium
   takes only hundreds) */
#saver .face .edge text, #saver .glass .tint text, #saver .glass text[fill] { font-size: 138px; font-weight: 600; letter-spacing: 7px; stroke-width: 6px; stroke-linejoin: round; }
/* the light top edge: the digits again, 1.5 px higher, behind the glass */
#saver .face .edge { opacity: 0.8; }
#saver .face .edge text { fill: #fff; stroke: #fff; }
/* the glass: the photo frosted (until a photo, the wave's colour); one layer per photo, cross-fading with it */
#saver .glass { opacity: 0; -webkit-transition: opacity 2.4s ease-in-out; transition: opacity 2.4s ease-in-out; }
#saver .glass.on { opacity: 1; }
#saver .glass.top { z-index: 1; }
#saver .glass rect { fill: #6a6a6a; }
/* the tint over it: smoky grey, .85, so the photo shows through a little (light: about 136 to 174; dark: about 48 to
   86), as a group so fill and stroke don't add up */
#saver .glass .tint { opacity: 0.85; }
#saver .glass .tint text { fill: #a0a0a0; stroke: #a0a0a0; }
#saver .glass.dark .tint text { fill: #383838; stroke: #383838; }
/* the show's name: small, low and centred; two, taking turns with the photos, so nothing moves when it changes */
#saver .title {
  position: absolute; left: 0; top: 962px; width: 1920px; z-index: 3;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 28px; font-weight: 600; line-height: 36px;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  -webkit-transition: opacity 1.2s ease-in-out; transition: opacity 1.2s ease-in-out;   /* in turns: out, then in (home.js) */
}
#saver .title.on { opacity: 1; }
#saver .title.dark { color: rgba(18, 18, 18, 0.9); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.25); }

/* MARK: - Toast: a glass banner at the top, centred on the sheet's pane (what just happened), as wide as its text */

#toast {
  position: absolute;
  left: 392px;   /* over the picks, 16 px inside the hero's edges (376 to 1270): no edge of it runs along the banner's */
  top: 68px;
  width: 862px;
  text-align: center;
  opacity: 0;
  -webkit-transform: translateY(-14px) scale(0.96);
  transform: translateY(-14px) scale(0.96);
  -webkit-transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), -webkit-transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);   /* hiding: 0.2 s; showing: 0.32 s (.on) */
  transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 50;
  pointer-events: none;
}
#toast.on { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition-duration: 0.32s; transition-duration: 0.32s; }
#toast .msg {
  display: inline-block;
  max-width: 862px;
  text-wrap: pretty;   /* newer engines: no word left on its own line */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 36px;
  border-radius: 38px;
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  text-align: left;
}

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

/* MARK: - Volume: a Control Center slider at the top, centred on the sheet's pane, as wide as two CC pills: the track, a white fill that
   grows from the left (moved with transform, never resized), the speaker in its knob. It slides in when the TV's
   volume changes and fades after two seconds. Tint-only glass (.g-deep): it shows over anything. */

#volume {
  position: absolute;
  left: 523px;   /* centred on the sheet's pane (376 to 1270): clear of the clock and Control Center */
  top: 68px;
  width: 600px;
  height: 112px;
  border-radius: 56px;
  opacity: 0;
  -webkit-transform: translateY(-14px) scale(0.96);
  transform: translateY(-14px) scale(0.96);
  -webkit-transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), -webkit-transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);   /* as the toast */
  transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 40;
  pointer-events: none;
}
#volume.on { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition-duration: 0.32s; transition-duration: 0.32s; }
#volume .track {
  position: absolute; left: 22px; top: 22px; width: 556px; height: 68px;
  border-radius: 34px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.night #volume .track { background: rgba(255, 255, 255, 0.11); }
#volume .fill {
  position: absolute; left: 0; top: 0; width: 556px; height: 68px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.97);
  -webkit-transition: -webkit-transform 0.12s; transition: transform 0.12s;
}
.night #volume .fill { background: rgba(255, 255, 255, 0.92); }
/* the speaker in the knob, system blue on white (as an "on" disc); muted, a cross instead of the waves */
#volume .ic { position: absolute; left: 14px; top: 14px; width: 40px; height: 40px; stroke-width: 2; color: #1a78f2; }
.night #volume .ic { color: #0a84ff; }
#volume .mute, #volume.muted .wave { display: none; }
#volume.muted .mute { display: inline; }

/* MARK: - Feel (round 1): a spring on focus, a bump at an edge, a small arrival in the direction of travel, and the
   zoom into what opens. `translate` (Chrome 104+) adds to each element's own transform, so these work on any focused
   item whatever its scale; older TVs skip them. */

@supports (transition-timing-function: linear(0, 1)) {
  #cards .card, #tiles .tile, #buttons .cc, #tabs .tab {
    transition-timing-function: linear(0.000, 0.071, 0.229, 0.415, 0.593, 0.742, 0.858, 0.939, 0.992, 1.022, 1.035, 1.038, 1.035, 1.029, 1.021, 1.015, 1.009, 1.005, 1.002, 1.000, 0.999, 0.999, 0.999, 0.999, 1);
    transition-duration: 0.42s;
  }
}

@keyframes bump-right { 0% { translate: 0 0; } 30% { translate: 14px 0; } 60% { translate: -4px 0; } 100% { translate: 0 0; } }
@keyframes bump-left { 0% { translate: 0 0; } 30% { translate: -14px 0; } 60% { translate: 4px 0; } 100% { translate: 0 0; } }
@keyframes bump-up { 0% { translate: 0 0; } 30% { translate: 0 -12px; } 60% { translate: 0 4px; } 100% { translate: 0 0; } }
@keyframes bump-down { 0% { translate: 0 0; } 30% { translate: 0 12px; } 60% { translate: 0 -4px; } 100% { translate: 0 0; } }
.bump-right { animation: bump-right 0.36s ease-out; }
.bump-left { animation: bump-left 0.36s ease-out; }
.bump-up { animation: bump-up 0.36s ease-out; }
.bump-down { animation: bump-down 0.36s ease-out; }

/* Arriving after a press to the right, the item slides in from a little to its left, and so on. */
@keyframes arrive-right { from { translate: -10px 0; } to { translate: 0 0; } }
@keyframes arrive-left { from { translate: 10px 0; } to { translate: 0 0; } }
@keyframes arrive-up { from { translate: 0 10px; } to { translate: 0 0; } }
@keyframes arrive-down { from { translate: 0 -10px; } to { translate: 0 0; } }
.arrive-right { animation: arrive-right 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.arrive-left { animation: arrive-left 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.arrive-up { animation: arrive-up 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.arrive-down { animation: arrive-down 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1); }

.zoom {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  z-index: 45;
  background-size: cover;
  background-position: center;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.zoom.go {
  -webkit-transition: -webkit-transform 0.36s cubic-bezier(0.3, 0.8, 0.2, 1);
  transition: transform 0.36s cubic-bezier(0.3, 0.8, 0.2, 1);
}

/* MARK: - Depth: the app's logo is a layer that floats above its icon and a glare that follows the pointer.
   `translate` and `scale` (Chrome 104+) add to each element's own transform; older TVs keep the flat look. */

/* The top layer: on focus the logo (or the app's name) rises and grows a little more than its tile. */
#tiles .tile img, #tiles .tile .word {
  transition: translate 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.1), scale 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
#tiles .tile.focus img, #tiles .tile.focus .word { translate: 0 -4px; scale: 1.07; }
#tiles .tile.focus img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }

/* Arriving, the top layer lags a moment behind its tile, the way layers drift apart on Apple TV. */
@keyframes lag-right { from { translate: -9px -4px; } to { translate: 0 -4px; } }
@keyframes lag-left { from { translate: 9px -4px; } to { translate: 0 -4px; } }
@keyframes lag-up { from { translate: 0 4px; } to { translate: 0 -4px; } }
@keyframes lag-down { from { translate: 0 -12px; } to { translate: 0 -4px; } }
.arrive-right img, .arrive-right .word { animation: lag-right 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); }
.arrive-left img, .arrive-left .word { animation: lag-left 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); }
.arrive-up img, .arrive-up .word { animation: lag-up 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); }
.arrive-down img, .arrive-down .word { animation: lag-down 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); }

/* Glare: a soft spot of light on the focused item, upper left by default, following the pointer when there is one. */
.glare {
  position: absolute;
  left: -30%;
  top: -55%;
  width: 110%;
  height: 110%;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s, -webkit-transform 0.2s ease-out;
  transition: opacity 0.25s, transform 0.2s ease-out;
}
#tiles .tile.focus .glare { opacity: 0; }   /* an app icon keeps its colours: no wash over the logo */
#cards .card.focus .glare { opacity: 0.55; }

/* A sweep of light across a pick as it takes the focus. */
#cards .card .shine {
  position: absolute;
  left: -60%;
  top: 0;
  width: 60%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
  opacity: 0;
}
@-webkit-keyframes sweep { 0% { opacity: 1; -webkit-transform: translateX(0) skewX(-20deg); } 100% { opacity: 1; -webkit-transform: translateX(380%) skewX(-20deg); } }
@keyframes sweep { 0% { opacity: 1; transform: translateX(0) skewX(-20deg); } 100% { opacity: 1; transform: translateX(380%) skewX(-20deg); } }
#cards .card.focus .shine { -webkit-animation: sweep 0.9s ease-out 0.12s 1 both; animation: sweep 0.9s ease-out 0.12s 1 both; }

/* The hero's text comes in as one, a beat apart. */
@keyframes rise { from { opacity: 0; translate: 22px 0; } to { opacity: 1; translate: 0 0; } }
#info.enter .name { animation: rise 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
#info.enter .meta { animation: rise 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) 0.06s both; }
#info.enter .about { animation: rise 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) 0.12s both; }

/* MARK: - Whiteboard: drawn on a computer (whiteboard/server.py), as a Control Center module under Control Center
   when there's drawing: CC glass (.g-cc, frost placed by board.js when shown) framing the drawing. */

#board {
  position: absolute;
  left: 1350px;
  top: 342px;
  width: 502px;
  height: 295px;
  border-radius: 36px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.96);
  transform: scale(0.96);
  -webkit-transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), -webkit-transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.2s;   /* as the top overlays */
  transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.2s;
}
#board.on { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; -webkit-transition-duration: 0.32s, 0.32s, 0s; transition-duration: 0.32s, 0.32s, 0s; -webkit-transition-delay: 0s; transition-delay: 0s; }
/* the drawing, 16:9, inset 14 px: its corners nest inside the module's (36 - 14) */
#board canvas {
  position: absolute; left: 14px; top: 14px; width: 474px; height: 267px;
  border-radius: 22px;
  background: #FFF;   /* board.js paints the paper: white by day, a soft grey at night */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}

/* MARK: - A note from the phone: the skill's banner (what just happened, at the top, in glass), over everything but
   the screensaver. Tint-only glass (.g-banner): it drops in over anything. OK or Back dismisses it. */

#note {
  position: absolute;
  left: 392px;   /* over the picks, 16 px inside the hero's edges (376 to 1270): no edge of it runs along the banner's */
  top: 68px;
  width: 862px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 24px 36px 28px 24px;
  border-radius: 40px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: flex-start; align-items: flex-start;
  z-index: 45;
  opacity: 0;
  -webkit-transform: translateY(-14px) scale(0.96);
  transform: translateY(-14px) scale(0.96);
  visibility: hidden;
  -webkit-transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), -webkit-transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.2s;   /* as the toast */
  transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.2s;
  pointer-events: none;
}
#note.on { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; -webkit-transition-duration: 0.32s, 0.32s, 0s; transition-duration: 0.32s, 0.32s, 0s; -webkit-transition-delay: 0s; transition-delay: 0s; }
/* the app badge: a phone on a system-blue square, as a banner's app icon */
#note .badge {
  -webkit-flex: none; flex: none;
  width: 76px; height: 76px; margin-right: 24px;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  border-radius: 20px;
  color: #fff;
  background: #007aff;
  background: -webkit-linear-gradient(top, #3897ff, #007aff);
  background: linear-gradient(#3897ff, #007aff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.night #note .badge { background: #0a84ff; background: -webkit-linear-gradient(top, #3d9bff, #0a84ff); background: linear-gradient(#3d9bff, #0a84ff); }
#note .badge .ic { width: 44px; height: 44px; stroke-width: 1.7; }
#note .body { -webkit-flex: 1; flex: 1; min-width: 0; }
#note .from { font-size: 26px; font-weight: 600; line-height: 32px; color: rgba(0, 0, 0, 0.66); }
.night #note .from { color: rgba(255, 255, 255, 0.66); }
#note .text { margin-top: 6px; font-size: 38px; font-weight: 600; line-height: 48px; letter-spacing: -0.01em; word-wrap: break-word; overflow-wrap: break-word; text-wrap: pretty; }

/* MARK: - Polish (round 4), against Apple's tvOS guidelines: a squish under OK on whatever is focused (click feedback),
   the smallest labels up toward tvOS's 25-29 pt floor for reading from the sofa, and the motion that's only decoration
   switched off when the system asks for less of it. */

@keyframes press { 0% { scale: 1; } 40% { scale: 0.94; } 100% { scale: 1; } }
.press { animation: press 0.24s cubic-bezier(0.3, 0.7, 0.4, 1); }

@media (prefers-reduced-motion: reduce) {
  /* the overlays, the sheets and the screensaver still show and hide, with a 150 ms fade only (the standard's); the
     screensaver's photos stay still */
  #volume, #note, #toast, #board, #volume.on, #note.on, #toast.on, #board.on { -webkit-transform: none; transform: none; }
  #volume, #toast, #volume.on, #toast.on { -webkit-transition: opacity 0.15s; transition: opacity 0.15s; }
  #note, #board, #saver { -webkit-transition: opacity 0.15s, visibility 0s 0.15s; transition: opacity 0.15s, visibility 0s 0.15s; }
  #note.on, #board.on, #saver.on { -webkit-transition: opacity 0.15s, visibility 0s; transition: opacity 0.15s, visibility 0s; }
  #apps, #settings, #shelfedit, #langpick { -webkit-transition: opacity 0.15s, visibility 0s 0.15s; transition: opacity 0.15s, visibility 0s 0.15s; }
  #apps.open, #settings.open, #shelfedit.open, #langpick.open { -webkit-transition: opacity 0.15s, visibility 0s; transition: opacity 0.15s, visibility 0s; }
  #volume .fill { -webkit-transition: none; transition: none; }
  #saver .photo { -webkit-transition: opacity 2.4s ease-in-out; transition: opacity 2.4s ease-in-out; }
  #info.enter .name, #info.enter .meta, #info.enter .about { animation: none; }
  /* a focused app's logo stays level too: only the shadow and the brightness change */
  #tiles .tile.focus img, #tiles .tile.focus .word { translate: none; scale: none; }
  .bump-right, .bump-left, .bump-up, .bump-down, .arrive-right, .arrive-left, .arrive-up, .arrive-down, .press,
  .arrive-right img, .arrive-left img, .arrive-right .word, .arrive-left .word { animation: none; }
}