:root {
  --bt-paper: #ffffff;
  --bt-art: 96px;
  --bt-art-r: var(--r-xl);
  --bt-stub-gap: var(--sp-3);
  --bt-hint-gap: var(--sp-2);
  --bt-hint-moon: var(--gold-2);
  --bt-hint-max: 300px;
  --cm-art: 56px;
  --cm-art-r: var(--r-l);
  --cm-play: 52px;
  --cm-now-a: #3a2b4f;
  --cm-now-b: #1e1a2e;
  --cm-now-ink: #f6ecdf;
  --cm-now-soft: #d8c8b4;
  --cm-now-glow: rgba(255, 214, 150, 0.18);
  --cm-ic: 36px;
  --cm-ic-r: var(--r-s);
  --cm-ic-bg: var(--accent-soft);
  --cm-ic-ink: var(--accent-ink);
  --cm-name-w: 7.5rem;
  --cm-range-h: var(--target);
  --cm-range-min: 6rem;
  --cm-track-h: 8px;
  --cm-thumb: 24px;
  --cm-thumb-ring: 3px;
  --cm-preset-h: 52px;
}

.lc {
  --cm-art: 64px;
  --cm-play: 56px;
  --cm-ic: 44px;
  --cm-preset-h: 64px;
  --cm-name-w: 8.5rem;
  --cm-track-h: 10px;
  --cm-thumb: 32px;
}

.bedtime {
  --bedtime-bg: #15110f;
  --bedtime-bg-2: #2a211c;
  --bedtime-ink: #efe0cb;
  --bedtime-soft: #d0bca2;
  --bedtime-card: rgba(255, 220, 180, 0.06);
  --bedtime-line: rgba(255, 220, 180, 0.12);
  --bedtime-accent: #e2a668;
  --bg: #15110f;
  --surface: #211a16;
  --surface-2: #2a211c;
  --surface-3: #352a23;
  --surface-sunk: #1a1411;
  --line: rgba(255, 220, 180, 0.1);
  --line-strong: #8f7b66;
  --ink: #efe0cb;
  --ink-soft: #d0bca2;
  --ink-faint: #b09c83;
  --accent: #9c5f2a;
  --accent-2: #8a5223;
  --accent-hi: #e2a668;
  --accent-soft: #3b2b1e;
  --accent-ink: #f0bb80;
  --on-accent: #fff5ea;
  --pop: #9b5b72;
  --pop-2: #8a4d63;
  --pop-hi: #e3a3b8;
  --pop-soft: #3c242c;
  --pop-ink: #eeaabf;
  --on-pop: #fff5ea;
  --leaf: #8fa65f;
  --gem: #5a7980;
  --gem-2: #4c676d;
  --gem-hi: #a9c3c7;
  --gem-ink: #b6cdd0;
  --on-gem: #ffffff;
  --gold: #d6a24c;
  --gold-2: #b58436;
  --gold-hi: #f0cb87;
  --gold-ink: #efc777;
  --on-gold: #1a120c;
  --premium-1: #7d5f9c;
  --premium-2: #654a82;
  --on-premium: #ffffff;
  --good: #7f9a52;
  --good-ink: #bcd38f;
  --good-soft: #2b3020;
  --warn: #c98d3c;
  --warn-ink: #f0c27a;
  --warn-soft: #3d2e1b;
  --danger: #b4523e;
  --danger-2: #96412f;
  --danger-ink: #f3a08e;
  --danger-soft: #3f2420;
  --on-danger: #ffffff;
  --info: #8a7aa8;
  --info-ink: #cbbfe3;
  --info-soft: #2b2533;
  --focus: #f0c27a;
  --focus-halo: rgba(240, 194, 122, 0.3);
  --veil: rgba(8, 5, 3, 0.72);
  --hud-glass: rgba(33, 26, 22, 0.93);
  --hud-glass-strong: rgba(33, 26, 22, 0.96);
  --hud-glass-ink: #efe0cb;
  --hud-glass-line: rgba(255, 220, 180, 0.12);
  --hud-tile: rgba(255, 230, 200, 0.08);
  --hud-tile-line: rgba(255, 220, 180, 0.12);
  --hud-label-bg: var(--surface);
  --toast-bg: rgba(42, 33, 28, 0.96);
  --toast-ink: #efe0cb;
  --bubble-bg: #2a211c;
  --bubble-ink: #efe0cb;
  --skel-a: #2a211c;
  --skel-b: #352a23;
  --hero-1: var(--surface-3);
  --hero-2: var(--surface-2);
  --hero-3: var(--surface);
  --on-hero: var(--ink);
  --hero-glass: rgba(255, 240, 220, 0.08);
  --hero-shine: rgba(255, 240, 220, 0.1);
  --hero-ring: var(--gold-2);
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.24);
  --elev-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 18px rgba(0, 0, 0, 0.32);
  --elev-3: 0 4px 10px rgba(0, 0, 0, 0.34), 0 14px 32px rgba(0, 0, 0, 0.4);
  --elev-4: 0 8px 18px rgba(0, 0, 0, 0.4), 0 28px 56px rgba(0, 0, 0, 0.5);
  --hi-inset: inset 0 1px 0 rgba(255, 240, 220, 0.07);
  --lo-inset: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
  --clay: var(--hi-inset), var(--lo-inset), var(--elev-2);
  --clay-press: inset 0 2px 4px rgba(0, 0, 0, 0.4), var(--elev-1);
  --btn-shine: inset 0 2px 0 rgba(255, 240, 220, 0.18), inset 0 -4px 0 rgba(0, 0, 0, 0.22);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.6);
  --glow-accent: 0 0 0 4px rgba(156, 95, 42, 0.32);
  --t-fast: 0.22s;
  --t-med: 0.48s;
  --t-slow: 0.8s;
  --bt-hint-moon: var(--gold-hi);
  --cm-ic-bg: var(--surface-3);
  --cm-ic-ink: var(--accent-ink);
  --grip-ink: var(--line-strong);
  --pm-ic-bg: var(--accent-soft);
  --pm-ic-ink: var(--accent-ink);
  --pm-chip-bg: var(--hud-glass);
  --pm-chip-ink: var(--hud-glass-ink);
  --pm-chip-line: var(--hud-glass-line);
  --wx-fx-ic: var(--ink-soft);
  --wx-rain-bg: var(--info-soft);
  --wx-heat-bg: var(--warn-soft);
  --wx-cold: var(--info);
  --wx-cold-bg: var(--info-soft);
  --wx-sun: var(--gold-2);
  --wx-sun-bg: var(--warn-soft);
  --wx-grey: var(--ink-soft);
  --wx-grey-bg: var(--surface-3);
  --wx-wind: var(--accent);
  --wx-wind-bg: var(--accent-soft);
  --wx-storm-bg: var(--surface-3);
  --bt-scene-tint: #ffb36b;
  --bt-scene-tint-a: 0.55;
  --bt-scene-dark: #0b0705;
  --bt-scene-dark-a: 0.32;
}

.bedtime-deep {
  --bt-scene-tint-a: 0.7;
  --bt-scene-dark-a: 0.58;
}

.bedtime *,
.bedtime *::before,
.bedtime *::after {
  animation-iteration-count: 1 !important;
}

.bedtime #scene,
.bedtime #hud {
  transition: opacity var(--t-slow) var(--ease);
}

.bt-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-hint-gap);
  max-width: 100%;
}

.bt-go {
  min-width: 0;
}

.bt-go > .glass {
  max-width: var(--bt-hint-max);
}

.bt-go .i {
  color: var(--bt-hint-moon);
}

.bt-skip > .glass {
  padding: 2px var(--sp-2);
}

.bt-tree {
  display: block;
  width: var(--bt-art);
  height: var(--bt-art);
  flex: none;
}

.bt-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bt-stub-gap);
  text-align: center;
}

.bt-stub .bt-tree {
  border-radius: var(--bt-art-r);
  background: radial-gradient(circle at 50% 35%, var(--surface-3), var(--surface-sunk));
  box-shadow: var(--clay);
}

.bt-lead {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-s);
  line-height: var(--lh);
}

.cm-now {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-m);
  border-radius: var(--r-l);
  color: var(--cm-now-ink);
  background: radial-gradient(circle at 85% 0%, var(--cm-now-glow), transparent 60%), linear-gradient(135deg, var(--cm-now-a), var(--cm-now-b));
  box-shadow: var(--clay);
}

.cm-art {
  width: var(--cm-art);
  height: var(--cm-art);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--cm-art-r);
  background: var(--hero-glass);
}

.cm-np {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cm-np small {
  color: var(--cm-now-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
}

.cm-np b {
  font-family: var(--font-display);
  font-size: var(--fs-l);
  line-height: var(--lh-tight);
}

.cm-play {
  width: var(--cm-play);
  height: var(--cm-play);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--clay);
  transition: transform var(--t-fast) var(--ease);
}

.cm-play:active,
.cm-preset:active {
  transform: scale(var(--press));
}

.cm-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m);
  background: var(--warn-soft);
  color: var(--ink);
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
}

.cm-note span {
  flex: 1;
  min-width: var(--cm-range-min);
}

.cm-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-s);
}

.cm-preset {
  min-height: var(--cm-preset-h);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink);
  font-weight: var(--fw-x);
  font-size: var(--fs-s);
  line-height: var(--lh-tight);
  text-align: left;
  box-shadow: var(--clay);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast);
}

.cm-preset .i {
  color: var(--accent-ink);
  flex: none;
}

.cm-preset.on {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: var(--btn-shine), var(--elev-1);
}

.cm-preset.on .i {
  color: var(--on-accent);
}

.cm-layer {
  gap: var(--sp-2);
  padding-block: var(--sp-1);
}

.cm-ic {
  width: var(--cm-ic);
  height: var(--cm-ic);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--cm-ic-r);
  background: var(--cm-ic-bg);
  color: var(--cm-ic-ink);
}

.cm-name {
  flex: 0 1 var(--cm-name-w);
  min-width: 0;
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
  line-height: var(--lh-tight);
}

.cm-range {
  --v: 50%;
  flex: 1;
  min-width: var(--cm-range-min);
  height: var(--cm-range-h);
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.cm-range::-webkit-slider-runnable-track {
  height: var(--cm-track-h);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent-hi), var(--accent)) 0 / var(--v) 100% no-repeat, var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
}

.cm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--cm-thumb);
  height: var(--cm-thumb);
  margin-top: calc((var(--cm-track-h) - var(--cm-thumb)) / 2);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: 0 0 0 var(--cm-thumb-ring) var(--accent), var(--elev-2);
}

.cm-foot {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  text-align: center;
}

.bt-bg {
  flex-wrap: wrap;
}

.bt-bg .grow {
  min-width: var(--row-text-min);
}