/* The homepage's Expand levels (#gears-fx): the page kit (/home-page.css)
 * plus the Effort slider as the app's sidebar draws it — three dots on a
 * line running light rose to deep, the picked one bigger and lit. Played by
 * /home-levels.js. */
.lx { position: relative; width: 100%; }
.lx .pm { width: 100%; }
.lx .pm { min-height: 400px; }
.lx .pm-text { transition: color 0.4s; }

.lx-effort {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -4px 0 20px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--pm-face);
  box-shadow: inset 0 1px 0 var(--hairline), 0 8px 18px -12px rgba(80, 55, 20, 0.35);
  width: max-content;
  max-width: 100%;
}
.lx-effort-label { font-size: calc(12px / var(--tz, 1)); font-weight: 700; color: var(--fg-2); }
.lx-dial { position: relative; display: flex; align-items: center; justify-content: space-between; width: 116px; height: 22px; }
.lx-line {
  position: absolute;
  left: 8px; right: 8px; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #f5a0bf, #e66a9b 50%, #cc3a73);
  opacity: 0.55;
}
.lx-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 16px; height: 16px; }
.lx-dot i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px #fdf8ee;
  transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.3), box-shadow 0.35s;
}
.lx-dot[data-g="0"] { --c: #f5a0bf; }
@supports not (color: color-mix(in srgb, red, blue)) {
 .lx-dot[data-g="0"] { --c__r: 245; --c__g: 160; --c__b: 191; --c__a: 1; } }
.lx-dot[data-g="1"] { --c: #e66a9b; }
@supports not (color: color-mix(in srgb, red, blue)) {
 .lx-dot[data-g="1"] { --c__r: 230; --c__g: 106; --c__b: 155; --c__a: 1; } }
.lx-dot[data-g="2"] { --c: #cc3a73; }
@supports not (color: color-mix(in srgb, red, blue)) {
 .lx-dot[data-g="2"] { --c__r: 204; --c__g: 58; --c__b: 115; --c__a: 1; } }
.lx-dot.on i { transform: scale(1.65); box-shadow: 0 0 0 2px #fdf8ee, 0 0 12px var(--c); }
.lx-dot.is-press i { transform: scale(1.2); }
.lx-name { position: relative; display: inline-grid; min-width: 66px; font-size: calc(12.5px / var(--tz, 1)); font-weight: 700; }
.lx-n { grid-area: 1 / 1; opacity: 0; transform: translateY(5px); transition: opacity 0.3s, transform 0.3s; white-space: nowrap; }
/* The level names, light to deep rose — each 4.5:1 or more on the page. */
.lx-n[data-g="0"] { color: #b03d6e; }
.lx-n[data-g="1"] { color: #a8285a; }
.lx-n[data-g="2"] { color: #7a1a42; }
.lx-n.on { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .lx .pm { min-height: 470px; }
  .lx-effort { gap: 10px; padding: 7px 12px; }
  .lx-dial { width: 96px; }
}