:root {
  --calm-paper: #f3ead8;
  --calm-line: #3f3756;
  --calm-ink: #3f3756;
  --calm-line-w: 4.2;
  --calm-num: #5b5276;
  --calm-num-halo: rgba(243, 234, 216, 0.9);
  --calm-hint: rgba(170, 160, 220, 0.3);
  --calm-shadow: rgba(4, 6, 20, 0.45);
  --calm-glow: #fff8d8;
  --calm-firefly: #ffe28a;
  --calm-leaf: #9fcf8a;
  --calm-leaf-2: #e9b783;
  --calm-mark-bg: rgba(20, 24, 52, 0.78);
  --calm-mark-ink: #f6efe2;
  --calm-bg-a: #1a1f45;
  --calm-bg-b: #2b2350;

  --calm-dawn-1: #f6c6a8;
  --calm-dawn-2: #f2a7b0;
  --calm-dawn-3: #f7dc8f;
  --calm-dawn-4: #f0a875;
  --calm-dawn-5: #e48a9a;
  --calm-dawn-6: #fbeed6;
  --calm-dawn-7: #c9b3df;
  --calm-dawn-8: #b5cfa3;

  --calm-meadow-1: #a8d5a2;
  --calm-meadow-2: #78b98a;
  --calm-meadow-3: #d3e6a4;
  --calm-meadow-4: #f3df96;
  --calm-meadow-5: #a3cfe8;
  --calm-meadow-6: #ecb6c9;
  --calm-meadow-7: #c9a47e;
  --calm-meadow-8: #4f8d6c;

  --calm-dusk-1: #b9b6ea;
  --calm-dusk-2: #8d8fd3;
  --calm-dusk-3: #dcbbe8;
  --calm-dusk-4: #f2c4d6;
  --calm-dusk-5: #f6dcae;
  --calm-dusk-6: #7ea6cc;
  --calm-dusk-7: #5f5e9e;
  --calm-dusk-8: #ebe4f6;

  --calm-tide-1: #a2dbdc;
  --calm-tide-2: #67b0c6;
  --calm-tide-3: #cbe9e1;
  --calm-tide-4: #f4e3c3;
  --calm-tide-5: #f4b8a2;
  --calm-tide-6: #4d88ab;
  --calm-tide-7: #e0f1f6;
  --calm-tide-8: #a6c8a8;

  --calm-moss-1: #93ba8b;
  --calm-moss-2: #5f9165;
  --calm-moss-3: #bfd393;
  --calm-moss-4: #dcc892;
  --calm-moss-5: #ac8762;
  --calm-moss-6: #78886a;
  --calm-moss-7: #d4e4b9;
  --calm-moss-8: #406c50;

  --calm-ember-1: #f2a95e;
  --calm-ember-2: #e07f58;
  --calm-ember-3: #f7cb74;
  --calm-ember-4: #c7654c;
  --calm-ember-5: #bf8d5e;
  --calm-ember-6: #f6dbad;
  --calm-ember-7: #8e5c40;
  --calm-ember-8: #e6aa92;

  --calm-honey-1: #f8d47d;
  --calm-honey-2: #efb24f;
  --calm-honey-3: #fcebb7;
  --calm-honey-4: #e69f5d;
  --calm-honey-5: #d8c28e;
  --calm-honey-6: #c3d58e;
  --calm-honey-7: #c68b44;
  --calm-honey-8: #fff3d2;

  --calm-moon-1: #cbd5ec;
  --calm-moon-2: #9fb1d8;
  --calm-moon-3: #eaeef7;
  --calm-moon-4: #7c8dc0;
  --calm-moon-5: #f3e8c8;
  --calm-moon-6: #b9abd8;
  --calm-moon-7: #5d6aa0;
  --calm-moon-8: #e1d6ec;

  --calm-aurora-1: #93e1c6;
  --calm-aurora-2: #6cc4cc;
  --calm-aurora-3: #aca6ec;
  --calm-aurora-4: #e2a9e2;
  --calm-aurora-5: #f6cde9;
  --calm-aurora-6: #7db6ea;
  --calm-aurora-7: #cdf2dc;
  --calm-aurora-8: #6182d4;

  --calm-frost-1: #dbeff8;
  --calm-frost-2: #a9d4ec;
  --calm-frost-3: #f7fafc;
  --calm-frost-4: #b9c7e8;
  --calm-frost-5: #e8e0f3;
  --calm-frost-6: #93bcd4;
  --calm-frost-7: #d2e6e9;
  --calm-frost-8: #7a9bc6;
}

.s-calm,
.s-calmpack {
  --cg-bg-a: var(--bedtime-bg, #141a3c);
  --cg-bg-b: var(--bedtime-bg-2, #2b2152);
  --cg-ink: var(--bedtime-ink, #f4ecdc);
  --cg-soft: var(--bedtime-soft, #cfc6e2);
  --cg-card: var(--bedtime-card, rgba(255, 255, 255, 0.07));
  --cg-card-2: rgba(255, 255, 255, 0.13);
  --cg-line: var(--bedtime-line, rgba(255, 255, 255, 0.16));
  --cg-accent: var(--bedtime-accent, #f2c879);
  --cg-accent-2: #e3a95c;
  --cg-on-accent: #2a2142;
  --cg-glow: rgba(242, 200, 121, 0.32);
  --cg-lock: rgba(10, 12, 32, 0.78);
  --cg-star: rgba(255, 246, 214, 0.55);
  --cg-r: 16px;
  --cg-r-s: 12px;
  --cg-sw: 30px;
  --cg-sw-gap: 6px;
  --cg-gap: var(--target-gap);
  --cg-dot: 7px;
  --cg-hero-art: 104px;
  --cg-sleep: 56px;
  --cg-bp: 32px;
  --cg-pdot: 10px;
  --cg-pdot-l: 14px;
  --cg-nudge-x: 4px;
  color: var(--cg-ink);
}

.lc .s-calm,
.lc .s-calmpack {
  --cg-sw: 48px;
  --cg-sw-gap: 8px;
  --cg-dot: 9px;
  --cg-hero-art: 112px;
  --cg-bp: 36px;
}

.full-screen.s-calm,
.reduce-motion .full-screen.s-calm {
  animation: none !important;
  padding: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 8%, var(--cg-star), transparent),
    radial-gradient(1px 1px at 72% 14%, var(--cg-star), transparent),
    radial-gradient(1.5px 1.5px at 88% 34%, var(--cg-star), transparent),
    radial-gradient(1px 1px at 30% 26%, var(--cg-star), transparent),
    radial-gradient(1px 1px at 54% 6%, var(--cg-star), transparent),
    linear-gradient(180deg, var(--cg-bg-a), var(--cg-bg-b));
}

.cg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: calc(var(--safe-top) + var(--sp-2)) calc(var(--safe-right) + var(--sp-3)) calc(var(--safe-bottom) + var(--sp-2)) calc(var(--safe-left) + var(--sp-3));
}

.cg-in {
  animation: cg-in var(--t-slow) var(--ease);
}

@keyframes cg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.cg-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.cg-glass,
.cg-tool {
  background: var(--cg-card);
  color: var(--cg-ink);
  box-shadow: inset 0 0 0 1px var(--cg-line);
}

.cg-tool.on,
.cg-ok {
  background: linear-gradient(180deg, var(--cg-accent), var(--cg-accent-2));
  color: var(--cg-on-accent);
  box-shadow: 0 2px 10px var(--cg-glow);
}

.cg-tool[disabled] {
  opacity: 0.36;
}

.cg-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-l);
}

.cg-title .i {
  color: var(--cg-accent);
}

.cg-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cg-head h1 {
  font-size: var(--fs-m);
}

.cg-head small,
.cg-sub {
  color: var(--cg-soft);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-m);
  line-height: var(--lh-tight);
}

.cg-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 calc(var(--sp-3) * -1);
  padding: var(--sp-1) var(--sp-3) var(--sp-5);
}

.cg-hero,
.cg-glow,
.cg-tray {
  border-radius: var(--cg-r);
  background: var(--cg-card);
  box-shadow: inset 0 0 0 1px var(--cg-line);
}

.cg-hero {
  display: grid;
  grid-template-columns: var(--cg-hero-art) minmax(0, 1fr) var(--cg-sleep);
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  flex: none;
}

.cg-hero-art {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--cg-r-s);
  overflow: hidden;
  background: var(--calm-paper);
  box-shadow: 0 6px 18px var(--calm-shadow);
}

.cg-thumb {
  display: block;
  width: 100%;
  height: 100%;
}

.cg-hero-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  min-width: 0;
}

.cg-eyebrow {
  color: var(--cg-accent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.cg-hero-name {
  font-family: var(--font-display);
  font-size: var(--fs-l);
  line-height: var(--lh-tight);
}

.cg-cta {
  margin-top: var(--sp-1);
  background: linear-gradient(180deg, var(--cg-accent), var(--cg-accent-2));
  color: var(--cg-on-accent);
  box-shadow: 0 4px 14px var(--cg-glow);
}

.cg-sleep {
  align-self: end;
  width: var(--cg-sleep);
}

.cg-sleep-cv {
  display: block;
  width: var(--cg-sleep);
  height: calc(var(--cg-sleep) * 1.15);
}

.cg-glow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  flex: none;
}

.cg-min {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.cg-min-txt,
.cg-week {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cg-min-txt b {
  font-size: var(--fs-s);
}

.cg-min-txt small,
.cg-week small {
  color: var(--cg-soft);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-m);
}

.cg-week {
  align-items: flex-end;
  text-align: right;
}

.cg-ring .track {
  stroke: var(--cg-line);
}

.cg-ring .fill {
  stroke: var(--cg-accent);
}

.cg-ring-ic {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--cg-accent);
}

.cg-dots {
  display: inline-flex;
  gap: var(--cg-dot);
}

.cg-dots i {
  width: var(--cg-dot);
  height: var(--cg-dot);
  border-radius: 50%;
  background: var(--cg-line);
}

.cg-dots i.on {
  background: var(--cg-accent);
  box-shadow: 0 0 8px var(--cg-glow);
}

.cg-seg {
  flex: none;
  flex-wrap: nowrap;
}

.cg-seg > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  background: var(--cg-card);
  color: var(--cg-ink);
  box-shadow: inset 0 0 0 1px var(--cg-line);
}

.cg-seg > button.on,
.cg-seg > button[aria-selected='true'] {
  background: linear-gradient(180deg, var(--cg-accent), var(--cg-accent-2));
  color: var(--cg-on-accent);
  box-shadow: none;
}

.cg-pack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cg-pack-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
}

.cg-pack-head h3,
.cg-h3 {
  font-size: var(--fs-m);
  margin: 0;
}

.cg-pack-head small {
  color: var(--cg-soft);
  font-size: var(--fs-2xs);
}

.cg-sp {
  flex: 1;
}

.cg-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--cg-card-2);
  color: var(--cg-accent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-b);
}

.cg-unlock {
  background: var(--cg-card-2);
  color: var(--cg-ink);
  box-shadow: inset 0 0 0 1px var(--cg-accent);
}

.cg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.cg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-1) var(--sp-1) var(--sp-2);
  border-radius: var(--cg-r-s);
  background: var(--cg-card);
  box-shadow: inset 0 0 0 1px var(--cg-line);
  color: var(--cg-ink);
  text-align: center;
  transition: transform var(--t-fast) var(--ease-spring);
}

.cg-card:active {
  transform: scale(var(--press-s));
}

.cg-card .cg-thumb {
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--cg-r-s) - 4px);
  background: var(--calm-paper);
}

.cg-card.locked .cg-thumb {
  opacity: 0.42;
  filter: grayscale(0.5);
}

.cg-card-name {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-b);
  line-height: var(--lh-tight);
}

.cg-lock,
.cg-pr,
.cg-done-dot {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-b);
  line-height: var(--lh-tight);
}

.cg-lock {
  left: var(--sp-2);
  right: var(--sp-2);
  top: var(--sp-2);
  justify-content: center;
  padding: 2px var(--sp-1);
  background: var(--cg-lock);
  color: var(--cg-ink);
  text-align: center;
}

.cg-pr,
.cg-done-dot {
  top: var(--sp-2);
  right: var(--sp-2);
  padding: 2px 6px;
  background: var(--cg-accent);
  color: var(--cg-on-accent);
}

.cg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--cg-soft);
}

.cg-empty b {
  color: var(--cg-ink);
}

.cg-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--cg-r);
  overflow: hidden;
}

.cg-cv,
.cg-show-cv {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.cg-cv {
  touch-action: none;
}

.cg-tools {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  flex: none;
}

.cg-tray {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2);
  flex: none;
}

.cg-sws {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cg-sw-gap);
}

.cg-sw {
  width: var(--cg-sw);
  height: var(--cg-sw);
  min-width: var(--cg-sw);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sw);
  color: var(--calm-line);
  font-size: var(--fs-2xs);
  box-shadow: inset 0 0 0 1.5px var(--cg-line);
  transition: transform var(--t-fast) var(--ease-spring);
}

.cg-sw.on {
  box-shadow: 0 0 0 2px var(--cg-bg-b), 0 0 0 4px var(--cg-ink);
}

.cg-sw.clear,
.cg-sw[disabled] {
  opacity: 0.3;
}

.cg-nudge {
  animation: cg-nudge var(--t-slow) var(--ease);
}

@keyframes cg-nudge {
  25% {
    transform: translateX(calc(var(--cg-nudge-x) * -1));
  }
  75% {
    transform: translateX(var(--cg-nudge-x));
  }
}

.cg-palbtn,
.cg-palname {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target);
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  color: var(--cg-ink);
}

.cg-palbtn {
  background: var(--cg-card-2);
}

.cg-palname {
  color: var(--cg-soft);
}

.cg-pdots {
  display: inline-flex;
  padding-left: 3px;
}

.cg-pdots i {
  width: var(--cg-pdot);
  height: var(--cg-pdot);
  margin-left: -3px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: 0 0 0 1.5px var(--cg-bg-b);
}

.cg-brushes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--cg-gap);
  width: 100%;
}

.cg-brush {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: var(--target);
  min-width: 0;
  padding: 6px 2px;
  border-radius: var(--cg-r-s);
  color: var(--cg-ink);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-b);
  line-height: var(--lh-tight);
}

.cg-brush.on {
  background: var(--cg-card-2);
  box-shadow: inset 0 0 0 1.5px var(--cg-accent);
}

.cg-bp {
  width: var(--cg-bp);
  height: var(--cg-bp);
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px var(--cg-line);
}

.cg-bp-soft {
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--sw) 40%, white), var(--sw) 58%, color-mix(in srgb, var(--sw) 84%, black));
}

.cg-bp-water {
  background: radial-gradient(circle at 30% 34%, color-mix(in srgb, var(--sw) 55%, white) 0 18%, transparent 46%), radial-gradient(circle at 70% 68%, color-mix(in srgb, var(--sw) 80%, black) 0 10%, transparent 40%), color-mix(in srgb, var(--sw) 82%, white);
  box-shadow: inset 0 0 6px color-mix(in srgb, var(--sw) 55%, black);
}

.cg-bp-dots {
  background: radial-gradient(circle, var(--sw) 0 30%, transparent 34%) 0 0 / 9px 9px, color-mix(in srgb, var(--sw) 45%, white);
}

.cg-bp-leafy {
  background: radial-gradient(ellipse 5px 2.5px at 30% 35%, color-mix(in srgb, var(--sw) 70%, black) 60%, transparent 70%), radial-gradient(ellipse 5px 2.5px at 66% 62%, color-mix(in srgb, var(--sw) 50%, white) 60%, transparent 70%), radial-gradient(ellipse 5px 2.5px at 62% 24%, color-mix(in srgb, var(--sw) 70%, black) 60%, transparent 70%), var(--sw);
}

.cg-pals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cg-gap);
  width: 100%;
}

.cg-pal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: var(--target);
  min-width: 0;
  padding: 6px var(--sp-2);
  border-radius: var(--cg-r-s);
  background: var(--cg-card);
  color: var(--cg-ink);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-b);
  text-align: left;
}

.cg-pal.on {
  box-shadow: inset 0 0 0 1.5px var(--cg-accent);
}

.cg-pal .cg-pdots i {
  width: var(--cg-pdot-l);
  height: var(--cg-pdot-l);
}

.cg-pal.locked .cg-pdots {
  opacity: 0.4;
}

.cg-pname {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: var(--lh-tight);
}

.cg-show {
  position: relative;
  flex: 1;
  min-height: 0;
}

.cg-acts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  flex: none;
}

.cg .btn.cg-act {
  min-height: var(--btn-h-s);
  padding: 0 var(--sp-3);
  font-size: var(--fs-s);
  background: var(--cg-card);
  color: var(--cg-ink);
  box-shadow: inset 0 0 0 1px var(--cg-line);
}

.cg .btn.cg-act.cg-cta {
  margin: 0;
  background: linear-gradient(180deg, var(--cg-accent), var(--cg-accent-2));
  color: var(--cg-on-accent);
}

.cg-wide {
  grid-column: 1 / -1;
}

.modal.s-calmpack {
  background: linear-gradient(180deg, var(--cg-bg-a), var(--cg-bg-b));
  box-shadow: 0 0 0 1px var(--cg-line), var(--elev-4);
}

.cg-pk {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  text-align: center;
}

.cg-pk h3 {
  font-size: var(--fs-xl);
}

.cg-pk-sub,
.cg-pk-text,
.cg-pk-short,
.cg-pk-grove {
  color: var(--cg-soft);
  font-size: var(--fs-xs);
}

.cg-pk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.cg-pk-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cg-pk-cell .cg-thumb {
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xs);
  background: var(--calm-paper);
}

.cg-pk-cell small {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-b);
  line-height: var(--lh-tight);
}

.cg-pk-btns {
  display: flex;
  gap: var(--sp-2);
}

.cg-buy {
  flex: 1;
}

.cg-pk-own,
.cg-pk-grove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
}

.cg-pk-own {
  color: var(--cg-accent);
  font-weight: var(--fw-b);
}

.cg-pk .btn.ghost {
  background: var(--cg-card);
  color: var(--cg-ink);
  box-shadow: inset 0 0 0 1px var(--cg-line);
}