/*
 * The glass kit: the To Do app's Tahoe look (the tahoe-design skill's tokens) made safe for old TV browsers.
 * Every screen builds from these pieces; home.css and todo.css only place and size them.
 *
 * No CSS variables, grid or backdrop-filter (webOS 3 and 4, Tizen 3). Glass is faked: each still glass piece shows a
 * blurred copy of the wallpaper (frost-*.jpg, rendered once from the wave, 640 × 360, stretched to the stage) lined up
 * with its place on the stage by glass.js, under the token's tint, rim and shadow. Nothing here is ever blurred live.
 * Day is the default; body.night is the night look. Only transform and opacity may animate.
 *
 *   Wallpaper     .g-wall                      the blue wave, 1920 × 1080, behind everything
 *   Still glass   .g-sheet                     the main sheet (picks, the to-do list, settings)
 *                 .g-side                      its sidebar (inside a .g-sheet, no glass of its own)
 *                 .g-cc + .g-tile/.g-pill/.g-round   Control Center: deep blue glass, white text
 *                 .g-dock                      the Dock tray
 *   Icons         .g-app                       an app icon's finish (gloss, bevel, shadow) on its brand colour
 *   Over moving   .g-over                      tint only, for glass over art that changes (no frost)
 *                 .g-banner                    denser tint only, for what appears over anything (note banner, toast)
 *                 .g-deep                      Control Center's tint only, for a CC piece over anything (volume)
 *   Overlays      .g-panel, .g-label           small near-solid panels; .g-label is the one label pill (the Dock's and
 *                                              Control Center's focused name; with .g-cc, a group's name on the wave)
 *   Edge          .g-rim                       the Liquid Glass rim (on any piece above)
 *   Rows          .g-row (.cur, .focus)        sidebar and list rows; .g-sq the coloured icon square
 *   Focus         .g-ring.focus or .g-focus    no ring: the focused piece lifts and grows a little, with a deeper soft
 *                 .g-row.focus                 shadow and a lighter sheen (Apple TV); a row gets a soft light fill
 *   Type          .t-display .t-title .t-head .t-body .t-label .t-caption
 *   Text colours  .tc-1 .tc-2 .tc-3 .tc-accent .tc-red .tc-white
 */

/* ---------- wallpaper ---------- */
.g-wall {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  background: #9fb4d0 url('wall-day.jpg') no-repeat 0 0;
  background-size: 1920px 1080px;
}
.night .g-wall { background-color: #0a0f22; background-image: url('wall-night.jpg'); }

/* ---------- still glass: tint over the frosted wallpaper (glass.js lines the second layer up) ---------- */
.g-sheet, .g-cc, .g-dock {
  background-repeat: no-repeat;
  background-size: 100% 100%, 1920px 1080px;
  background-position: 0 0, 0 0;
}

/* the sheet: the main content */
.g-sheet {
  border-radius: 40px;
  overflow: hidden;
  background-color: rgba(214, 226, 244, 0.94);          /* until the frost is in */
  background-image: linear-gradient(rgba(232, 238, 249, 0.56), rgba(232, 238, 249, 0.56)), url('frost-sheet-day.jpg');
  box-shadow: 0 30px 72px rgba(12, 36, 92, 0.24), 0 3px 12px rgba(12, 36, 92, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: rgba(0, 0, 0, 0.85);
}
.night .g-sheet {
  background-color: rgba(22, 24, 34, 0.9);
  background-image: linear-gradient(rgba(22, 24, 34, 0.46), rgba(22, 24, 34, 0.46)), url('frost-sheet-night.jpg');
  box-shadow: 0 30px 72px rgba(0, 0, 0, 0.45), 0 3px 12px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
}

/* its sidebar: views or filters only */
.g-side {
  background: rgba(250, 251, 253, 0.62);
  border-right: 1px solid rgba(60, 60, 67, 0.16);
}
.night .g-side { background: rgba(36, 38, 48, 0.50); border-right-color: rgba(255, 255, 255, 0.12); }

/* Control Center: deep blue glass with a dimmed frost, so white text passes over the bright crest */
.g-cc {
  background-color: rgba(18, 62, 156, 0.86);
  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');
  box-shadow: 0 10px 28px rgba(8, 40, 120, 0.18), inset 0 0 20px rgba(255, 255, 255, 0.14);
  color: #fff;
}
.night .g-cc {
  background-color: rgba(40, 44, 62, 0.9);
  background-image: linear-gradient(150deg, rgba(40, 44, 62, 0.42), rgba(22, 24, 36, 0.30) 55%, rgba(34, 38, 56, 0.38)), url('frost-cc-night.jpg');
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.94);
}
/* its shapes: a tile (weather, prices, inputs), a pill (icon disc + title) and a round button (icon only) */
.g-tile { border-radius: 36px; padding: 24px 28px; }
.g-pill {
  height: 112px; padding: 0 14px;
  border-radius: 56px;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
}
.g-round {
  width: 112px; height: 112px;
  border-radius: 50%;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
}
/* the disc that holds a pill's icon */
.g-disc {
  width: 68px; height: 68px; -webkit-flex: none; flex: none;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.night .g-disc { background: rgba(255, 255, 255, 0.11); }
/* an "on" toggle: white disc, system-blue glyph */
.g-disc.on { background: rgba(255, 255, 255, 0.97); color: #1a78f2; }
.night .g-disc.on { background: rgba(255, 255, 255, 0.92); color: #0a84ff; }

/* the Dock tray */
.g-dock {
  height: 136px; padding: 14px;
  border-radius: 46px;
  background-color: rgba(226, 234, 246, 0.86);
  background-image: linear-gradient(rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.26)), url('frost-dock-day.jpg');
  box-shadow: 0 14px 40px rgba(10, 30, 80, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.night .g-dock {
  background-color: rgba(26, 28, 40, 0.9);
  background-image: linear-gradient(rgba(26, 28, 40, 0.40), rgba(26, 28, 40, 0.40)), url('frost-dock-night.jpg');
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.g-dock-sep { width: 1px; height: 84px; margin: 0 16px; background: rgba(0, 0, 0, 0.16); -webkit-flex: none; flex: none; }
.night .g-dock-sep { background: rgba(255, 255, 255, 0.16); }

/* ---------- glass over moving art (the picks): tint only, no frost to line up ---------- */
.g-over {
  background: rgba(236, 241, 250, 0.80);
  box-shadow: 0 10px 30px rgba(12, 36, 92, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.30);
  color: rgba(0, 0, 0, 0.85);
}
.night .g-over {
  background: rgba(22, 24, 34, 0.74);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- glass that appears over anything (no frost: what's behind changes) ---------- */
/* a banner or toast: near solid, so it reads as one even surface whatever edges run behind it (nothing blurs them).
   .tc-1 and .tc-2 pass 4.5:1 on it. Add .g-rim. */
.g-banner {
  background: rgba(235, 240, 249, 0.97);
  box-shadow: 0 18px 48px rgba(12, 36, 92, 0.26), 0 3px 10px rgba(12, 36, 92, 0.12);
  color: rgba(0, 0, 0, 0.85);
}
.night .g-banner {
  background: rgba(52, 54, 66, 0.99);   /* the panels' grey; dense enough that a white hero behind it doesn't show a step */
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.92);
}
/* Control Center's deep glass as a tint only, for a Control Center piece over anything (the volume slider).
   White text and glyphs pass 4.5:1 on it over white. Add .g-rim for Control Center's rim. */
.g-deep {
  background: rgba(4, 56, 158, 0.92);
  background: -webkit-linear-gradient(-60deg, rgba(6, 60, 162, 0.92), rgba(2, 52, 150, 0.93) 55%, rgba(6, 60, 162, 0.92));
  background: linear-gradient(150deg, rgba(6, 60, 162, 0.92), rgba(2, 52, 150, 0.93) 55%, rgba(6, 60, 162, 0.92));
  box-shadow: 0 14px 36px rgba(8, 40, 120, 0.30), inset 0 0 20px rgba(255, 255, 255, 0.14);
  color: #fff;
}
.night .g-deep {
  background: rgba(10, 36, 126, 0.92);   /* as Control Center looks at night: the wave's blue through its frost */
  background: -webkit-linear-gradient(-60deg, rgba(12, 40, 134, 0.92), rgba(8, 30, 112, 0.92) 55%, rgba(12, 40, 134, 0.92));
  background: linear-gradient(150deg, rgba(12, 40, 134, 0.92), rgba(8, 30, 112, 0.92) 55%, rgba(12, 40, 134, 0.92));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), inset 0 0 20px rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.94);
}

/* ---------- overlays: banner, toast, volume, the focused item's name ---------- */
/* near solid: they appear over anything, and fade with opacity only */
.g-panel, .g-label {
  background-color: rgba(246, 248, 252, 0.95);
  box-shadow: 0 6px 18px rgba(8, 40, 120, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.85);
}
.night .g-panel, .night .g-label {
  background-color: rgba(52, 54, 66, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
}
.g-panel { border-radius: 28px; padding: 20px 28px; }
/* the one label pill: 44 px, a capsule */
.g-label {
  height: 44px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  padding: 6px 20px;
  border-radius: 22px;
  font-size: 26px; font-weight: 600; line-height: 32px;
  white-space: nowrap;
}
/* in Control Center's glass, for a label straight on the wave (white passes over its bright crest) */
.g-cc.g-label {
  background-color: rgba(18, 62, 156, 0.86);
  box-shadow: 0 10px 28px rgba(8, 40, 120, 0.18), inset 0 0 20px rgba(255, 255, 255, 0.14);
  color: #fff;
}
.night .g-cc.g-label {
  background-color: rgba(40, 44, 62, 0.9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.94);
}

/* ---------- the Liquid Glass rim: bright top-left and bottom-right, dim sides ---------- */
/* An engine without -webkit-mask-composite (none of the TVs tested lacks it) gets a plain hairline rim instead: the
   gradient ring is drawn only where the mask can cut its middle out, or it would cover the whole piece. */
.g-rim { position: relative; }
.g-rim:after {
  content: '';
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  border-radius: inherit;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 3;
}
.night .g-rim:after { border-color: rgba(255, 255, 255, 0.16); }
.g-cc.g-rim:after, .g-deep.g-rim:after { border-width: 2px; border-color: rgba(255, 255, 255, 0.55); }
.night .g-cc.g-rim:after, .night .g-deep.g-rim:after { border-color: rgba(255, 255, 255, 0.22); }
@supports (-webkit-mask-composite: xor) {
  .g-rim:after {
    border: 0;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.28) 28%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.28) 72%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
  }
  .night .g-rim:after { background: linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 28%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.08) 72%, rgba(255, 255, 255, 0.34) 100%); }
  /* Control Center's rim is brighter and a little thicker */
  .g-cc.g-rim:after, .g-deep.g-rim:after {
    border: 0;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 26%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.35) 74%, rgba(255, 255, 255, 0.9) 100%);
  }
  .night .g-cc.g-rim:after, .night .g-deep.g-rim:after { background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.12) 26%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.12) 74%, rgba(255, 255, 255, 0.4) 100%); }
}

/* ---------- shadows for things on glass (art, app icons) ---------- */
.g-lift { box-shadow: 0 8px 22px rgba(12, 36, 92, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.night .g-lift { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }

/* ---------- app icons (the Dock): the brand colour under a top gloss, an inset highlight and bevel, a tight shadow ---------- */
/* needs a position of its own (absolute or relative) for the gloss; its logo or name sits above the gloss */
.g-app {
  border-radius: 25px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 5px 12px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.12);
}
.g-app:before {
  content: '';
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background: radial-gradient(130% 72% at 50% -10%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

/* ---------- rows: a sidebar view or a list row ---------- */
.g-row {
  position: relative;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  height: 72px; padding: 0 14px;
  border-radius: 18px;
  font-size: 28px; font-weight: 500; line-height: 36px;
  -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s;
}
.g-row.cur { background: rgba(0, 0, 0, 0.075); font-weight: 600; }
.night .g-row.cur { background: rgba(255, 255, 255, 0.10); }
/* a focused row: a soft light fill on the glass, like a macOS menu selection; no ring, no growing (a wide row's
   contents would slide sideways) */
.g-row.focus {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 3px 14px rgba(12, 36, 92, 0.16);
  -webkit-transform: none; transform: none;
}
.night .g-row.focus { background: rgba(255, 255, 255, 0.20); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.26); }
/* secondary text on the night fill needs to be brighter to keep 4.5:1 */
.night .g-row.focus .tc-2 { color: rgba(255, 255, 255, 0.80); }

/* the coloured icon square in front of a row (white glyph by day; a coloured glyph on glass by night) */
.g-sq {
  width: 48px; height: 48px; -webkit-flex: none; flex: none;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  border-radius: 13px;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.18);
}
.g-row .g-sq { margin-right: 18px; }
.g-sq--blue { background: linear-gradient(#3897ff, #007aff); }
.g-sq--red { background: linear-gradient(#ff665e, #ff3b30); }
.g-sq--indigo { background: linear-gradient(#7d7bdf, #5856d6); }
.g-sq--orange { background: linear-gradient(#ffad33, #ff9500); }
.g-sq--green { background: linear-gradient(#5dd27a, #34c759); }
.g-sq--teal { background: linear-gradient(#59c0d2, #30b0c7); }
.g-sq--pink { background: linear-gradient(#ff5c7a, #ff2d55); }
.g-sq--grey { background: linear-gradient(#8e8e93, #6e6e73); }
.night .g-sq { background: rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.night .g-sq--blue { color: #0a84ff; }
.night .g-sq--red { color: #ff453a; }
.night .g-sq--indigo { color: #8e8cff; }
.night .g-sq--orange { color: #ff9f0a; }
.night .g-sq--green { color: #30d158; }
.night .g-sq--teal { color: #40c8e0; }
.night .g-sq--pink { color: #ff4f74; }
.night .g-sq--grey { color: #98989d; }

/* ---------- focus (the remote): no ring. The focused piece lifts and grows a little, with a deeper soft shadow and a
   lighter fill; the others stay as they are. Each piece sets its own lift (scale about 1.10, a few px up) where it
   knows its neighbours and the 54 px safe area. Only transform and opacity animate: the shadow and the fill of a
   Control Center piece are pre-drawn on its :before, whose opacity fades in; an app icon (overflow hidden) takes its
   shadow at once. ---------- */
.g-ring { z-index: 0; }
.g-ring.focus, .g-focus { z-index: 5; }
.g-ring.g-app.focus, .g-focus.g-app { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 26px 40px rgba(6, 24, 80, 0.42), 0 8px 14px rgba(6, 24, 80, 0.24); }
.night .g-ring.g-app.focus, .night .g-focus.g-app { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 26px 40px rgba(0, 0, 0, 0.62), 0 8px 14px rgba(0, 0, 0, 0.4); }
/* an app icon keeps its own colours (no wash over its logo or name): the lift, the growth, the shadow and a thin light
   edge along the top mark the focus */
/* Control Center pieces: the shadow and a lighter fill, one layer under the content, fading in. By day the fill is light
   glass and the text turns deep navy (the dark blue glass hardly changed); at night it is a faint lift under white text. */
.g-cc.g-ring:before {
  content: '';
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(rgba(246, 249, 255, 0.94), rgba(232, 240, 252, 0.94));
  box-shadow: 0 26px 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 .g-cc.g-ring:before { background: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)); box-shadow: 0 26px 44px rgba(0, 0, 0, 0.62), 0 8px 16px rgba(0, 0, 0, 0.42); }
.g-cc.g-ring.focus:before { opacity: 1; }
.g-cc.g-ring.focus { color: #0a2a66; }
.night .g-cc.g-ring.focus { color: rgba(255, 255, 255, 0.94); }
.g-cc.g-ring.focus .g-disc { background: rgba(10, 42, 102, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.g-cc.g-ring.focus .g-disc.on { background: #1a78f2; color: #fff; }
.night .g-cc.g-ring.focus .g-disc { background: rgba(255, 255, 255, 0.11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.night .g-cc.g-ring.focus .g-disc.on { background: rgba(255, 255, 255, 0.92); color: #0a84ff; }
/* the usual lift for a Control Center piece */
.g-cc.g-ring { -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; }
.g-cc.g-ring.focus { -webkit-transform: translateY(-3px) scale(1.10); transform: translateY(-3px) scale(1.10); }

/* ---------- type: Inter (home.css loads it), sizes from the picked home screen ---------- */
.t-display { font-size: 68px; font-weight: 700; line-height: 76px; letter-spacing: -0.02em; }   /* a pick's name */
.t-title { font-size: 46px; font-weight: 600; line-height: 60px; letter-spacing: -0.01em; }     /* the clock, a sheet's title */
.t-head { font-size: 28px; font-weight: 600; line-height: 36px; }                                /* section heads, rows */
.t-body { font-size: 25px; font-weight: 400; line-height: 36px; }                                /* a synopsis, a note */
.t-label { font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.01em; }     /* pill titles, buttons */
.t-caption { font-size: 24px; font-weight: 500; line-height: 30px; }                             /* names under art, meta */
.t-num { -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; }

/* ---------- text colours: each passes 4.5:1 on its glass at the bright crest ---------- */
.tc-1 { color: rgba(0, 0, 0, 0.85); }
.tc-2 { color: rgba(0, 0, 0, 0.66); }
.tc-3 { color: rgba(0, 0, 0, 0.30); }            /* placeholders and disabled only */
.tc-accent { color: #003080; }                   /* small system-blue text, deepened: 5:1 on the sheet at its darkest (the saturated wave) */
.tc-red { color: #6a130e; }                      /* 5:1 there too */
.tc-white { color: #fff; }                       /* on Control Center and over art */
.night .tc-1 { color: rgba(255, 255, 255, 0.92); }
.night .tc-2 { color: rgba(255, 255, 255, 0.64); }
.night .tc-3 { color: rgba(255, 255, 255, 0.34); }
.night .tc-accent { color: #47a3ff; }
.night .tc-red { color: #ff847d; }
.night .tc-white { color: rgba(255, 255, 255, 0.94); }
/* separators and the selected fill, for lists inside a sheet */
.g-sep { height: 1px; background: rgba(60, 60, 67, 0.16); }
.night .g-sep { background: rgba(255, 255, 255, 0.12); }

/* ---------- accessibility fallbacks: the same layout, solid glass and no movement ---------- */
@media (prefers-reduced-transparency: reduce) {
  .g-sheet, .g-dock, .g-over, .g-banner { background: rgba(246, 246, 248, 0.97) !important; }
  .g-side { background: #ececf0; }
  .g-cc, .g-deep { background: #1e4aa8 !important; }
  .night .g-sheet, .night .g-dock, .night .g-over, .night .g-banner { background: rgba(40, 40, 44, 0.97) !important; }
  .night .g-side { background: #303036; }
  .night .g-cc, .night .g-deep { background: rgba(48, 48, 56, 0.96) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .g-row, .g-cc.g-ring, .g-cc.g-ring:before { -webkit-transition: none; transition: none; }
  /* no growing or lifting: only the shadow and the brightness change */
  .g-ring.focus, .g-focus { -webkit-transform: none !important; transform: none !important; }
}