:root {
  --kcm-canvas: var(--wt-page-bg, #f7f4ee);
  --kcm-surface: var(--wt-surface, #fffdf9);
  --kcm-ink: var(--wt-ink, #26302b);
  --kcm-soft: var(--wt-ink-soft, #475048);
  --kcm-quiet: var(--wt-ink-quiet, #5f6a60);
  --kcm-rule: var(--wt-rule, #d8d2c6);
  --kcm-rule-strong: var(--wt-field-border, #767d73);
  --kcm-green: var(--wt-link, #2c5f4e);
  --kcm-green-deep: var(--wt-link-hover, #1f4638);
  --kcm-action: var(--wt-btn-bg);
  --kcm-action-hover: var(--wt-btn-bg-hover);
  --kcm-action-ink: var(--wt-btn-ink);
  --kcm-sage: var(--wt-panel-bg, #e8f0e8);
  --kcm-clay: #9b4f31;
  --kcm-focus: #176e57;
  --kcm-danger: #7a1f1a;
  --kcm-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-mode="batman"] {
  --kcm-canvas: var(--wt-page-bg, #161a18);
  --kcm-surface: var(--wt-surface, #1e2522);
  --kcm-ink: var(--wt-ink, #ece7dc);
  --kcm-soft: var(--wt-ink-soft, #c2cabb);
  --kcm-quiet: var(--wt-ink-quiet, #a5b0a4);
  --kcm-rule: var(--wt-rule, #445047);
  --kcm-rule-strong: var(--wt-field-border, #89958c);
  --kcm-green: var(--wt-link, #8fd0b4);
  --kcm-green-deep: var(--wt-link-hover, #b9e7d1);
  --kcm-sage: var(--wt-panel-bg, #25342d);
  --kcm-clay: #e1ac8c;
  --kcm-focus: #8fd0b4;
  --kcm-danger: #ffb2aa;
}

.kcm-app,
.kcm-app *,
.kcm-app *::before,
.kcm-app *::after { box-sizing: border-box; }
.kcm-app :where(button, input, textarea, select) { font: inherit; }
.kcm-app {
  min-width: 0;
  background: var(--kcm-canvas);
  color: var(--kcm-ink);
  font: 400 1rem/1.55 var(--kcm-font);
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}
html[data-mode="batman"] .kcm-app { color-scheme: dark; }
body.watchtower-body.kcm-page { background: var(--kcm-canvas); }
.kcm-app :is(h1, h2, h3, h4) { color: var(--kcm-ink); }
.kcm-app a { color: var(--kcm-green); }
.kcm-app :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--kcm-focus);
  outline-offset: 3px;
}

.kcm-skip {
  position: fixed;
  z-index: 40;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  border-radius: 4px;
  background: var(--kcm-ink);
  color: var(--kcm-surface) !important;
  padding: 10px 14px;
  font-weight: 700;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1);
}
.kcm-skip:focus { transform: translateY(0); }

.kcm-help {
  display: flex;
  justify-content: center;
  gap: 6px 18px;
  min-height: 36px;
  padding: 7px 16px;
}
.kcm-help a { font-weight: 800; }

/* Match the full-page Music/Posters frame without granting Manifest styles
   ownership of the global header, footer, or controls. */
body.watchtower-body.kcm-page .wt-shell--musicwide {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.kcm-page .wt-shell--musicwide > .wt-masthead {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.kcm-app {
  width: 100%;
  min-height: 74vh;
  border-top: 1px solid var(--kcm-rule);
  background: var(--kcm-canvas);
}
.kcm-product-topbar { display: none; }
.kcm-layout { display: flex; width: 100%; align-items: stretch; }
.kcm-rail {
  position: sticky;
  z-index: 20;
  top: 0;
  flex: 0 0 260px;
  width: 260px;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--kcm-rule);
  background: var(--kcm-surface);
  padding: 52px 14px 28px;
  transition: width 280ms cubic-bezier(.32,.72,0,1), flex-basis 280ms cubic-bezier(.32,.72,0,1), padding 280ms cubic-bezier(.32,.72,0,1);
}
.kcm-rail__close { display: none; }
.kcm-rail-toggle {
  position: absolute;
  top: 10px;
  right: 14px;
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--kcm-rule-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--kcm-soft);
  cursor: pointer;
}
.kcm-rail-toggle:hover { border-color: var(--kcm-green); background: var(--kcm-sage); color: var(--kcm-green); }
.kcm-rail-toggle svg { display: block; width: 20px; height: 20px; }
.kcm-product-nav { display: flex; flex-direction: column; gap: 2px; }
.kcm-product-nav__heading {
  margin: 17px 10px 6px;
  color: var(--kcm-quiet);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.kcm-product-nav__heading:first-child { margin-top: 0; color: var(--kcm-ink); }
.kcm-product-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--kcm-soft);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 650;
}
.kcm-product-nav a svg { flex: 0 0 19px; width: 19px; height: 19px; color: var(--kcm-green); }
.kcm-product-nav a:hover { background: var(--kcm-sage); color: var(--kcm-ink); }
.kcm-product-nav a[aria-current="page"] { background: var(--kcm-sage); color: var(--kcm-green); font-weight: 750; }
.kcm-privacy-note {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 9px;
  margin-top: 28px;
  border-top: 1px solid var(--kcm-rule);
  padding: 18px 8px 0;
  color: var(--kcm-quiet);
}
.kcm-privacy-note svg { width: 22px; margin-top: 2px; }
.kcm-privacy-note p { margin: 0; font-size: .75rem; line-height: 1.5; }
.kcm-privacy-note strong { color: var(--kcm-ink); }

.kcm-main { flex: 1 1 auto; min-width: 0; padding: 0 clamp(32px, 3.5vw, 64px) 88px; }
.kcm-main > .kcm-view { width: min(100%, 1280px); }
.kcm-view[hidden] { display: none; }
.kcm-product-header {
  display: flex;
  min-height: 86px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--kcm-rule);
}
.kcm-product-header__title {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: var(--kcm-ink) !important;
  text-decoration: none;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.025em;
}
.kcm-product-header__crown {
  width: 43px;
  height: 34px;
  flex: 0 0 auto;
  background: var(--kcm-ink);
  -webkit-mask: url("/assets/logos/keepcalm-crown.svg") center / contain no-repeat;
  mask: url("/assets/logos/keepcalm-crown.svg") center / contain no-repeat;
}
.kcm-product-header__action { flex: 0 0 auto; }
.kcm-product-header__action > span { margin-right: 5px; font-size: 1.1em; }

html.kcm-rail-collapsed .kcm-rail { flex-basis: 72px; width: 72px; padding-right: 8px; padding-left: 8px; }
html.kcm-rail-collapsed .kcm-rail-toggle { right: 18px; }
html.kcm-rail-collapsed .kcm-rail-toggle svg { transform: rotate(180deg); }
html.kcm-rail-collapsed .kcm-product-nav__heading,
html.kcm-rail-collapsed .kcm-product-nav a span,
html.kcm-rail-collapsed .kcm-privacy-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.kcm-rail-collapsed .kcm-product-nav a { justify-content: center; padding-right: 0; padding-left: 0; }

.kcm-hero { max-width: 760px; padding: 52px 0 38px; }
.kcm-context { margin: 0 0 12px; color: var(--kcm-clay); font-size: .82rem; font-weight: 750; }
.kcm-hero h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.8rem, 4.2vw, 4.65rem);
  font-weight: 820;
  letter-spacing: -.04em;
  line-height: .99;
  text-wrap: balance;
}
.kcm-hero__lede { max-width: 58ch; margin: 22px 0 0; color: var(--kcm-soft); font-size: 1.08rem; text-wrap: pretty; }
.kcm-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; }
.kcm-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 11px 20px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 750;
  cursor: pointer;
}
.kcm-button--primary { background: var(--kcm-action); color: var(--kcm-action-ink) !important; }
.kcm-button--primary:hover { background: var(--kcm-action-hover); }
.kcm-button--secondary { border-color: var(--kcm-rule-strong); background: var(--kcm-surface); color: var(--kcm-ink) !important; }
.kcm-button--secondary:hover { border-color: var(--kcm-green); background: var(--kcm-sage); }
.kcm-button:disabled { cursor: not-allowed; opacity: .64; }
.kcm-text-link { font-size: .9rem; font-weight: 700; text-underline-offset: 5px; }
.kcm-value-note { margin: 12px 0 0; color: var(--kcm-quiet); font-size: .78rem; }

.kcm-bridge { margin: 12px 0 60px; overflow: hidden; }
.kcm-bridge ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 0;
  padding: 24px 0 0;
  list-style: none;
}
.kcm-bridge ol::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--kcm-rule-strong);
}
.kcm-bridge li { position: relative; min-width: 0; color: var(--kcm-quiet); }
.kcm-bridge li::before {
  content: "";
  position: absolute;
  top: -21px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--kcm-rule-strong);
  border-radius: 50%;
  background: var(--kcm-canvas);
}
.kcm-bridge li.is-current::before { border-color: var(--kcm-green); background: var(--kcm-green); box-shadow: 0 0 0 5px var(--kcm-sage); }
.kcm-bridge span { display: block; color: var(--kcm-ink); font-size: .78rem; font-weight: 750; }
.kcm-bridge small { display: block; margin-top: 4px; font-size: .7rem; line-height: 1.35; }

.kcm-principle {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr);
  gap: 36px;
  border-top: 1px solid var(--kcm-rule);
  border-bottom: 1px solid var(--kcm-rule);
  padding: 34px 0;
}
.kcm-principle h2, .kcm-section-heading h2, .kcm-view-heading h2 { margin: 0; font-size: 1.55rem; line-height: 1.2; text-wrap: balance; }
.kcm-principle p { max-width: 58ch; margin: 12px 0 0; color: var(--kcm-soft); }
.kcm-principle blockquote { margin: 0; color: var(--kcm-green); font-size: 1.02rem; font-weight: 700; line-height: 1.55; }

.kcm-today-preview { padding-top: 48px; }
.kcm-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.kcm-section-heading p { margin: 7px 0 0; color: var(--kcm-soft); }
.kcm-section-heading .kcm-context { margin: 0 0 7px; color: var(--kcm-clay); }
.kcm-time { color: var(--kcm-quiet); font-size: .78rem; white-space: nowrap; }
.kcm-starters { border-bottom: 1px solid var(--kcm-rule); padding: 42px 0 46px; }
.kcm-starter-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.kcm-starter {
  display: flex;
  min-height: 218px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border: 0;
  border-radius: 13px;
  padding: 22px;
  color: #fff;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.kcm-starter:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(20,28,24,.14), inset 0 0 0 1px rgba(255,255,255,.16); }
.kcm-starter:focus-visible { outline-color: var(--kcm-focus); outline-offset: 4px; }
.kcm-starter--career { background: #24446e; }
.kcm-starter--health { background: #dbc9a7; color: #202c26; box-shadow: inset 0 0 0 1px rgba(38,48,43,.14); }
.kcm-starter--money { background: #93442f; }
.kcm-starter--creative { background: #5b486f; }
.kcm-starter__meta { margin-bottom: auto; font-size: .7rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; opacity: .84; }
.kcm-starter strong { max-width: 14ch; font-size: 1.08rem; line-height: 1.22; text-wrap: balance; }
.kcm-starter > span:last-child { margin-top: 14px; font-size: .76rem; font-weight: 750; }
.kcm-anchor-list { margin: 22px 0 0; padding: 0; border-top: 1px solid var(--kcm-rule); list-style: none; }
.kcm-anchor-list li { display: grid; grid-template-columns: 92px 1fr auto; gap: 20px; align-items: center; border-bottom: 1px solid var(--kcm-rule); padding: 19px 0; }
.kcm-anchor-list time { color: var(--kcm-clay); font-size: .8rem; font-weight: 750; }
.kcm-anchor-list strong, .kcm-anchor-list span { display: block; }
.kcm-anchor-list div > span { margin-top: 3px; color: var(--kcm-soft); font-size: .82rem; }
.kcm-state { border: 1px solid var(--kcm-rule-strong); border-radius: 999px; padding: 4px 9px; color: var(--kcm-quiet); font-size: .7rem; }

.kcm-view-heading { max-width: 670px; padding: 44px 0 28px; border-bottom: 1px solid var(--kcm-rule); }
.kcm-view-heading p { margin: 0 0 8px; color: var(--kcm-clay); font-size: .82rem; font-weight: 750; }
.kcm-view-heading > span { display: block; margin-top: 10px; color: var(--kcm-soft); }
.kcm-empty { max-width: 620px; padding: 56px 0; }
.kcm-empty h3 { margin: 0; font-size: 1.2rem; }
.kcm-empty p { margin: 9px 0 22px; color: var(--kcm-soft); }
.kcm-affirmation-sample { max-width: 680px; padding: 58px 0; }
.kcm-affirmation-sample p { margin: 0 0 25px; color: var(--kcm-green); font-size: 1.65rem; font-weight: 720; line-height: 1.35; }
.kcm-story-item { max-width: 820px; margin: 32px 0 52px; border-top: 1px solid var(--kcm-rule); border-bottom: 1px solid var(--kcm-rule); padding: 34px 0 38px; }
.kcm-story-item > h3 { max-width: 22ch; margin: 5px 0 10px; font-size: clamp(1.6rem, 3.4vw, 2.45rem); line-height: 1.1; }
.kcm-story-summary { max-width: 58ch; margin: 0 0 28px; color: var(--kcm-soft); font-size: 1rem; }
.kcm-story-sections { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--kcm-rule); list-style: none; counter-reset: story-step; }
.kcm-story-sections li { display: grid; grid-template-columns: minmax(100px, .35fr) minmax(0, 1fr); gap: 26px; border-bottom: 1px solid var(--kcm-rule); padding: 22px 0; counter-increment: story-step; }
.kcm-story-sections h4 { margin: 0; color: var(--kcm-clay); font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; }
.kcm-story-sections h4::before { content: counter(story-step, decimal-leading-zero) " · "; }
.kcm-story-sections p { margin: 0; color: var(--kcm-ink); line-height: 1.75; }
.kcm-story-move { display: grid; gap: 5px; margin: 24px 0; border-left: 4px solid var(--kcm-clay); background: var(--kcm-sage); padding: 16px 18px; }
.kcm-story-move span { color: var(--kcm-quiet); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.kcm-story-move strong { font-size: 1rem; }
.kcm-story-library { width: min(100%, 980px); padding: 28px 0 56px; }
.kcm-story-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin-bottom: 10px; }
.kcm-story-toolbar label { display: grid; gap: 6px; color: var(--kcm-quiet); font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.kcm-story-toolbar select { min-height: 44px; width: 100%; border: 1px solid var(--kcm-rule-strong); border-radius: 8px; background: var(--kcm-surface); padding: 0 36px 0 12px; color: var(--kcm-ink); font: inherit; font-size: .86rem; text-transform: none; }
.kcm-story-toolbar select:focus-visible { outline: 3px solid var(--kcm-focus); outline-offset: 2px; }
.kcm-story-library__count { margin: 14px 0 28px; color: var(--kcm-soft); font-size: .82rem; }
.kcm-story-library__create { margin: -8px 0 18px; }
.kcm-story-library__generation:empty { display: none; }
.kcm-story-library__generation .kcm-story-card--draft { margin-bottom: 24px; border-style: dashed; }
.kcm-story-group { margin-top: 34px; }
.kcm-story-group > h3 { margin: 0 0 12px; color: var(--kcm-clay); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.kcm-story-library__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.kcm-story-card { position: relative; border: 1px solid var(--kcm-rule); border-radius: 12px; background: var(--kcm-surface); padding: clamp(20px, 3vw, 30px); box-shadow: 0 8px 24px rgba(38, 48, 43, .05); }
.kcm-story-card:focus-within { border-color: var(--kcm-rule-strong); }
.kcm-story-card__header { display: grid; gap: 7px; }
.kcm-story-card__header h4 { max-width: 28ch; margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.16; }
.kcm-story-card__meta { margin: 0; color: var(--kcm-clay); font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.kcm-story-card > .kcm-story-summary { margin: 10px 0 22px; }
.kcm-story-card__actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.kcm-story-menu { position: relative; }
.kcm-story-menu > summary, .kcm-story-reader > summary, .kcm-story-history > summary { display: inline-flex; min-height: 44px; align-items: center; border-radius: 999px; color: var(--kcm-green); font-size: .82rem; font-weight: 800; cursor: pointer; list-style: none; }
.kcm-story-menu > summary { border: 1px solid var(--kcm-rule-strong); padding: 0 16px; }
.kcm-story-menu > summary::-webkit-details-marker, .kcm-story-reader > summary::-webkit-details-marker, .kcm-story-history > summary::-webkit-details-marker { display: none; }
.kcm-story-menu > summary::after { content: "···"; margin-left: 8px; letter-spacing: .08em; }
.kcm-story-menu[open] > summary, .kcm-story-menu > summary:hover { border-color: var(--kcm-green); background: var(--kcm-sage); }
.kcm-story-menu__items { display: grid; min-width: min(290px, calc(100vw - 48px)); margin-top: 8px; overflow: hidden; border: 1px solid var(--kcm-rule-strong); border-radius: 10px; background: var(--kcm-surface); box-shadow: 0 16px 38px rgba(38, 48, 43, .14); }
.kcm-story-menu__items button { min-height: 44px; border: 0; border-bottom: 1px solid var(--kcm-rule); background: transparent; padding: 10px 14px; color: var(--kcm-ink); font: inherit; font-size: .84rem; font-weight: 700; text-align: left; cursor: pointer; }
.kcm-story-menu__items button:last-child { border-bottom: 0; color: var(--kcm-clay); }
.kcm-story-menu__items button:hover, .kcm-story-menu__items button:focus-visible { background: var(--kcm-sage); }
.kcm-story-reader { margin-top: 18px; border-top: 1px solid var(--kcm-rule); }
.kcm-story-reader > summary { padding: 8px 0 0; }
.kcm-story-reader[open] > summary { margin-bottom: 16px; }
.kcm-story-reader .kcm-story-sections { margin-top: 4px; }
.kcm-story-state { display: grid; gap: 4px; margin: 14px 0; border-left: 4px solid var(--kcm-clay); background: var(--kcm-sage); padding: 14px 16px; }
.kcm-story-state p { margin: 0; color: var(--kcm-soft); line-height: 1.5; }
.kcm-story-state--loading { opacity: .8; }
.kcm-story-state--generation-failed { border-left-color: var(--kcm-clay); }
.kcm-story-revision, .kcm-story-draft-review { display: grid; gap: 10px; margin-top: 20px; border-top: 1px solid var(--kcm-rule); padding-top: 20px; }
.kcm-story-revision h4, .kcm-story-draft-review h4 { margin: 0 0 4px; font-size: 1.05rem; }
.kcm-story-revision label { font-size: .8rem; font-weight: 800; }
.kcm-story-revision select, .kcm-story-revision textarea { width: 100%; border: 1px solid var(--kcm-rule-strong); border-radius: 8px; background: var(--kcm-surface); padding: 11px 12px; color: var(--kcm-ink); font: inherit; }
.kcm-story-revision select { min-height: 44px; }
.kcm-story-revision textarea { min-height: 92px; resize: vertical; }
.kcm-story-revision__count { justify-self: end; color: var(--kcm-soft); font-size: .72rem; }
.kcm-story-history { margin-top: 18px; border-top: 1px solid var(--kcm-rule); padding-top: 8px; }
.kcm-story-history ol { margin: 8px 0 0; padding: 0; border-top: 1px solid var(--kcm-rule); list-style: none; }
.kcm-story-history li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--kcm-rule); padding: 10px 0; }
.kcm-story-history small { color: var(--kcm-soft); }
.kcm-story-history button { min-height: 44px; border: 0; background: transparent; color: var(--kcm-green); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.kcm-story-card [aria-busy="true"] { cursor: wait; }
.kcm-story-card [aria-disabled="true"] { pointer-events: none; opacity: .68; }
.kcm-classic-scenes-title { max-width: 820px; margin-top: 44px; border-top: 1px solid var(--kcm-rule); padding-top: 30px; }
.kcm-program-preview { max-width: 680px; margin: 28px 0; padding: 0; border-top: 1px solid var(--kcm-rule); list-style: none; }
.kcm-program-preview li { display: grid; grid-template-columns: minmax(170px, .65fr) 1fr; gap: 24px; border-bottom: 1px solid var(--kcm-rule); padding: 18px 0; }
.kcm-program-preview span { color: var(--kcm-soft); }
.kcm-status { min-height: 1px; }
.kcm-noscript { border: 1px solid var(--kcm-rule-strong); padding: 16px; color: var(--kcm-soft); }

.kcm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.kcm-onboarding { width: 100%; max-width: 760px; margin: 6px 0 34px; border-top: 1px solid var(--kcm-rule); border-bottom: 1px solid var(--kcm-rule); padding: 28px 0 34px; }
.kcm-onboarding.is-review { margin: 0 0 16px; border-top: 0; padding: 0 0 14px; }
.kcm-onboarding--personal { max-width: 820px; padding-top: clamp(22px, 4vw, 42px); }
.kcm-onboarding-progress { max-width: 680px; margin-bottom: clamp(32px, 6vw, 58px); }
.kcm-onboarding-progress__track { height: 3px; overflow: hidden; border-radius: 99px; background: var(--kcm-rule); }
.kcm-onboarding-progress__fill { display: block; width: var(--kcm-progress, 16.67%); height: 100%; border-radius: inherit; background: var(--kcm-clay); transition: width .24s ease; }
.kcm-onboarding-step { max-width: 680px; }
.kcm-onboarding-step > h2 { font-size: clamp(1.8rem, 4.3vw, 2.75rem); line-height: 1.08; letter-spacing: -.03em; }
.kcm-onboarding-step > .kcm-onboarding__help { max-width: 60ch; margin-top: 14px; font-size: 1rem; line-height: 1.65; }
.kcm-onboarding-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 0; padding: 0; border: 0; }
.kcm-onboarding-option { position: relative; min-width: 0; }
.kcm-onboarding-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kcm-onboarding-option__copy { display: flex; min-height: 58px; flex-direction: column; justify-content: center; border: 1px solid var(--kcm-rule-strong); border-radius: 8px; background: var(--kcm-surface); padding: 11px 14px; color: var(--kcm-ink); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.kcm-onboarding-option__copy strong { font-size: .9rem; }
.kcm-onboarding-option__copy small { margin-top: 3px; color: var(--kcm-soft); line-height: 1.4; }
.kcm-onboarding-option input:hover + .kcm-onboarding-option__copy { border-color: var(--kcm-green); background: var(--kcm-sage); }
.kcm-onboarding-option input:checked + .kcm-onboarding-option__copy { border-color: var(--kcm-green); background: var(--kcm-sage); box-shadow: inset 0 0 0 1px var(--kcm-green); }
.kcm-onboarding-option input:focus-visible + .kcm-onboarding-option__copy { outline: 3px solid var(--kcm-focus); outline-offset: 3px; }
.kcm-onboarding-field { margin-top: 8px; }
.kcm-onboarding-example { margin-top: 18px; border-left: 3px solid var(--kcm-clay); background: var(--kcm-sage); padding: 14px 16px; }
.kcm-onboarding-example p { margin: 0; color: var(--kcm-soft); line-height: 1.55; }
.kcm-onboarding-example__label { margin-bottom: 4px !important; color: var(--kcm-clay) !important; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.kcm-text-button { min-height: 44px; border: 0; background: transparent; color: var(--kcm-green); padding: 8px 2px; font: inherit; font-size: .82rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kcm-text-button:hover { color: var(--kcm-ink); }
.kcm-onboarding-example .kcm-text-button { margin-top: 7px; }
.kcm-onboarding-error { min-height: 1.5em; margin: 12px 0 0; color: var(--kcm-clay); font-size: .82rem; font-weight: 700; }
.kcm-onboarding-actions { align-items: center; flex-wrap: wrap; }
.kcm-onboarding-actions__later { margin-left: 2px; }
.kcm-onboarding-footer { display: flex; max-width: 680px; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; border-top: 1px solid var(--kcm-rule); padding-top: 14px; }
.kcm-onboarding-saved { margin: 0; color: var(--kcm-quiet); font-size: .74rem; }
.kcm-onboarding-clear { color: var(--kcm-quiet); }
.kcm-onboarding-conflict { max-width: 680px; margin-bottom: 22px; border: 1px solid var(--kcm-clay); border-radius: 8px; padding: 18px; }
.kcm-onboarding-conflict h3 { margin: 0 0 6px; font-size: 1rem; }
.kcm-onboarding-conflict p { margin: 0; color: var(--kcm-soft); }
.kcm-onboarding-review { display: grid; gap: 12px; }
.kcm-onboarding-review__chapter { border-top: 1px solid var(--kcm-rule); padding: 18px 0 4px; }
.kcm-onboarding-review__chapter h3 { margin: 0 0 10px; font-size: .9rem; }
.kcm-onboarding-review__empty { margin: 0 0 12px; color: var(--kcm-quiet); font-size: .82rem; }
.kcm-onboarding-review__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; border-top: 1px solid var(--kcm-rule); padding: 13px 0; }
.kcm-onboarding-review__row p { margin: 0; }
.kcm-onboarding-review__question { color: var(--kcm-quiet); font-size: .72rem; font-weight: 750; }
.kcm-onboarding-review__answer { margin-top: 4px !important; color: var(--kcm-ink); font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.kcm-reflection { max-width: 720px; }
.kcm-reflection__summary { margin: 24px 0 18px; color: var(--kcm-ink); font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 720; line-height: 1.45; }
.kcm-reflection > p:not(.kcm-onboarding__step):not(.kcm-reflection__summary):not(.kcm-onboarding-error) { max-width: 62ch; color: var(--kcm-soft); }
.kcm-reflection__question { border-left: 3px solid var(--kcm-clay); padding: 5px 0 5px 15px; color: var(--kcm-ink) !important; font-weight: 650; }
.kcm-reflection__fields { max-width: 620px; margin: 24px 0 0; border-top: 1px solid var(--kcm-rule); border-bottom: 1px solid var(--kcm-rule); }
.kcm-reflection__fields summary { min-height: 44px; display: flex; align-items: center; color: var(--kcm-green); font-size: .82rem; font-weight: 750; cursor: pointer; }
.kcm-reflection__fields ul { margin: 0 0 16px; padding-left: 20px; columns: 2; color: var(--kcm-soft); font-size: .78rem; }
.kcm-reflection__privacy { margin-top: 15px; color: var(--kcm-quiet) !important; font-size: .76rem; }
.kcm-reflection [aria-busy="true"] { cursor: wait; opacity: .72; }
.kcm-bridge-review summary {
  width: max-content;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--kcm-green);
  font-size: .82rem;
  font-weight: 750;
  cursor: pointer;
}
.kcm-bridge-review__body { padding: 12px 0 24px; }
.kcm-onboarding__step { margin: 0 0 10px; color: var(--kcm-clay); font-size: .78rem; font-weight: 750; }
.kcm-onboarding h2 { max-width: 24ch; margin: 0; font-size: 1.7rem; line-height: 1.2; text-wrap: balance; }
.kcm-onboarding__help { max-width: 56ch; margin: 9px 0 24px; color: var(--kcm-soft); }
.kcm-scope-notice { max-width: 62ch; margin: 0 0 22px; border: 1px solid var(--kcm-rule-strong); border-radius: 8px; background: var(--kcm-sage); padding: 12px 14px; color: var(--kcm-soft); font-size: .82rem; }
.kcm-category-fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.kcm-category-choice { position: relative; display: block; }
.kcm-category-choice input { position: absolute; inset: 0; opacity: 0; }
.kcm-category-choice span { display: inline-flex; min-height: 44px; align-items: center; border: 2px solid var(--kcm-rule-strong); border-radius: 999px; padding: 8px 14px; color: var(--kcm-ink); font-size: .85rem; font-weight: 650; cursor: pointer; }
.kcm-category-choice input:hover + span { background: var(--kcm-sage); }
.kcm-category-choice input:checked + span { border-color: var(--kcm-green); background: var(--kcm-sage); box-shadow: inset 0 0 0 1px var(--kcm-green); }
.kcm-category-choice input:focus-visible + span { outline: 3px solid var(--kcm-focus); outline-offset: 3px; }
.kcm-field { margin-top: 20px; }
.kcm-field label { display: block; margin-bottom: 7px; font-size: .85rem; font-weight: 720; }
.kcm-field textarea, .kcm-field input, .kcm-field select { display: block; width: 100%; min-height: 48px; resize: vertical; border: 2px solid var(--kcm-rule-strong); border-radius: 8px; background: var(--kcm-surface); color: var(--kcm-ink); padding: 12px 13px; line-height: 1.5; }
.kcm-field textarea:focus, .kcm-field input:focus, .kcm-field select:focus { border-color: var(--kcm-green); }
.kcm-field textarea::placeholder, .kcm-field input::placeholder { color: var(--kcm-quiet); opacity: 1; }
.kcm-field__count { display: block; margin-top: 5px; color: var(--kcm-quiet); text-align: right; font-size: .7rem; }
.kcm-form-actions { display: flex; gap: 10px; margin-top: 24px; }
.kcm-form-actions .kcm-button--primary { margin-left: auto; }
.kcm-result-heading { margin-bottom: 24px; }
.kcm-future-scene { max-width: 680px; border-radius: 18px; background: var(--kcm-green-deep); color: var(--kcm-surface); padding: clamp(24px, 6vw, 48px); box-shadow: 0 18px 44px rgba(38, 48, 43, .18); }
.kcm-future-scene h3 { margin: 0 0 18px; font-size: .8rem; letter-spacing: .02em; }
.kcm-future-scene p { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.6; text-wrap: pretty; }
html[data-mode="batman"] .kcm-future-scene { background: #263e34; color: #f4f1e8; }
.kcm-result-piece { position: relative; max-width: 680px; border-bottom: 1px solid var(--kcm-rule); padding: 25px 0; }
.kcm-result-piece h3 { margin: 0 0 7px; font-size: .95rem; }
.kcm-result-piece p { margin: 0; color: var(--kcm-soft); }
.kcm-breath { padding-right: 60px; }
.kcm-breath__mark { position: absolute; right: 8px; top: 50%; width: 34px; height: 34px; border: 2px solid var(--kcm-green); border-radius: 50%; transform: translateY(-50%); animation: kcm-breathe 7s ease-in-out infinite; }
@keyframes kcm-breathe { 0%, 100% { transform: translateY(-50%) scale(.7); } 45% { transform: translateY(-50%) scale(1); } }
.kcm-calm-move .kcm-button { margin-top: 18px; }
.kcm-account-invite { max-width: 680px; margin-top: 30px; background: var(--kcm-sage); border: 1px solid var(--kcm-rule); border-radius: 8px; padding: 22px; }
.kcm-account-invite h3 { margin: 0; font-size: 1rem; }
.kcm-account-invite p { max-width: 58ch; margin: 8px 0 18px; color: var(--kcm-soft); font-size: .85rem; }
.kcm-bridge li.is-complete::before { border-color: var(--kcm-green); background: var(--kcm-surface); box-shadow: inset 0 0 0 3px var(--kcm-green); }

.kcm-today-dashboard { max-width: 1080px; margin: 8px 0 54px; }
.kcm-today-goals { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; border-top: 1px solid var(--kcm-rule); padding: 18px 0 0; }
.kcm-today-goals > span { color: var(--kcm-clay); font-size: .72rem; font-weight: 750; }
.kcm-today-goals > div { display: flex; flex-wrap: wrap; gap: 7px; }
.kcm-today-goals button { min-height: 40px; border: 1px solid var(--kcm-rule-strong); border-radius: 999px; background: var(--kcm-surface); color: var(--kcm-ink); padding: 7px 12px; font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; }
.kcm-today-goals button.is-active { border-color: var(--kcm-green); background: var(--kcm-sage); }
.kcm-momentum { display: flex; align-items: end; justify-content: space-between; gap: 30px; border-top: 1px solid var(--kcm-rule); padding: 30px 0 22px; }
.kcm-momentum h2 { margin: 0; font-size: 1.55rem; line-height: 1.2; }
.kcm-momentum p:not(.kcm-context) { max-width: 48ch; margin: 7px 0 0; color: var(--kcm-soft); }
.kcm-momentum__meter { display: grid; grid-template-columns: auto 1fr; min-width: 148px; align-items: baseline; column-gap: 8px; }
.kcm-momentum__meter strong { grid-row: 1 / 3; color: var(--kcm-green); font-size: 2.2rem; line-height: 1; }
.kcm-momentum__meter span { font-size: .72rem; font-weight: 750; }
.kcm-momentum__meter small { color: var(--kcm-quiet); font-size: .66rem; }
.kcm-current-move { display: grid; grid-template-columns: 130px 1fr; gap: 18px; margin: 0; border-top: 1px solid var(--kcm-rule); border-bottom: 1px solid var(--kcm-rule); padding: 17px 0; }
.kcm-current-move span { color: var(--kcm-clay); font-size: .75rem; font-weight: 750; }
.kcm-current-move strong { font-size: .9rem; }
.kcm-now { border-bottom: 1px solid var(--kcm-rule); padding: 28px 0 30px; }
.kcm-now h3, .kcm-quests h3, .kcm-evidence-marks h3 { margin: 0; font-size: 1.15rem; }
.kcm-now__intro { margin: 6px 0 17px; color: var(--kcm-soft); font-size: .84rem; }
.kcm-now__choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kcm-now__choice { min-height: 46px; border: 1px solid var(--kcm-rule-strong); border-radius: 999px; background: var(--kcm-surface); color: var(--kcm-ink); padding: 8px 12px; font: inherit; font-size: .75rem; font-weight: 750; cursor: pointer; }
.kcm-now__choice:hover, .kcm-now__choice.is-active { border-color: var(--kcm-green); background: var(--kcm-sage); }
.kcm-now__tool { margin-top: 14px; border-left: 4px solid var(--kcm-green); background: var(--kcm-sage); padding: 18px 20px; }
.kcm-now__tool h4 { margin: 0; font-size: .95rem; }
.kcm-now__tool p { max-width: 58ch; margin: 6px 0 14px; color: var(--kcm-soft); font-size: .82rem; }
.kcm-now__tool .kcm-button { min-height: 44px; }
.kcm-quests { border-bottom: 1px solid var(--kcm-rule); padding: 28px 0; }
.kcm-quests__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.kcm-quests__heading > p { margin: 0; color: var(--kcm-quiet); font-size: .72rem; }
.kcm-quests__list { margin: 18px 0 0; padding: 0; border-top: 1px solid var(--kcm-rule); list-style: none; }
.kcm-quests__list li { display: grid; grid-template-columns: 32px 1fr auto; gap: 13px; align-items: center; border-bottom: 1px solid var(--kcm-rule); padding: 14px 0; }
.kcm-quests__list li:last-child { border-bottom: 0; }
.kcm-quests__number { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--kcm-rule-strong); border-radius: 50%; color: var(--kcm-clay); font-size: .7rem; font-weight: 800; }
.kcm-quests__list li.is-complete .kcm-quests__number { border-color: var(--kcm-green); background: var(--kcm-green); color: var(--kcm-surface); }
.kcm-quests__list strong, .kcm-quests__list p { display: block; margin: 0; }
.kcm-quests__list strong { font-size: .82rem; }
.kcm-quests__list p { margin-top: 2px; color: var(--kcm-soft); font-size: .76rem; }
.kcm-quests__list .kcm-text-link { min-height: 44px; border: 0; background: transparent; padding: 10px 0; font: inherit; font-size: .72rem; cursor: pointer; }
.kcm-quests__state { color: var(--kcm-green); font-size: .72rem; font-weight: 750; }
.kcm-evidence-marks { border-bottom: 1px solid var(--kcm-rule); padding: 28px 0; }
.kcm-evidence-marks__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 10px; padding: 0; list-style: none; }
.kcm-evidence-marks__list li { max-width: 230px; border: 1px solid var(--kcm-green); border-radius: 999px; padding: 9px 14px; }
.kcm-evidence-marks__list strong, .kcm-evidence-marks__list span { display: block; }
.kcm-evidence-marks__list strong { color: var(--kcm-green); font-size: .75rem; }
.kcm-evidence-marks__list span { margin-top: 2px; color: var(--kcm-soft); font-size: .65rem; }
.kcm-evidence-marks__note { color: var(--kcm-quiet); font-size: .68rem; }
.kcm-anchor-list--interactive { margin-top: 0; }
.kcm-anchor-list--interactive li { grid-template-columns: 82px 1fr auto; }
.kcm-anchor-button { min-width: 96px; min-height: 44px; border: 1px solid var(--kcm-rule-strong); border-radius: 999px; background: var(--kcm-surface); color: var(--kcm-ink); padding: 8px 13px; font-size: .72rem; font-weight: 750; cursor: pointer; }
.kcm-anchor-button:hover:not(:disabled) { border-color: var(--kcm-green); background: var(--kcm-sage); }
.kcm-anchor-button.is-complete { border-color: var(--kcm-green); color: var(--kcm-green); cursor: default; }
.kcm-anchor-form-item { display: block !important; padding: 0 !important; }
.kcm-ritual-panel { width: 100%; background: var(--kcm-sage); border: 1px solid var(--kcm-rule); border-radius: 8px; padding: 22px; }
.kcm-ritual-panel h3 { margin: 0; font-size: 1.15rem; }
.kcm-ritual-panel > p { max-width: 58ch; margin: 7px 0 18px; color: var(--kcm-soft); font-size: .86rem; }
.kcm-ritual-quote { margin: 16px 0; border: 1px solid var(--kcm-rule); border-radius: 8px; background: var(--kcm-surface); padding: 17px; color: var(--kcm-ink); font-size: .88rem; }
.kcm-plan-reminder { font-weight: 650; }
.kcm-radio-row, .kcm-radio-stack { margin: 18px 0 0; padding: 0; border: 0; }
.kcm-radio-row legend, .kcm-radio-stack legend { margin-bottom: 8px; font-size: .8rem; font-weight: 750; }
.kcm-radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kcm-radio-row legend { width: 100%; }
.kcm-radio-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kcm-radio-stack legend { grid-column: 1 / -1; }
.kcm-radio-choice { position: relative; display: block; }
.kcm-radio-choice input { position: absolute; inset: 0; opacity: 0; }
.kcm-radio-choice span { display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--kcm-rule-strong); border-radius: 999px; background: var(--kcm-surface); padding: 7px 12px; color: var(--kcm-ink); font-size: .76rem; font-weight: 650; cursor: pointer; }
.kcm-radio-choice input:checked + span { border-color: var(--kcm-green); background: var(--kcm-canvas); box-shadow: inset 0 0 0 1px var(--kcm-green); }
.kcm-radio-choice input:focus-visible + span { outline: 3px solid var(--kcm-focus); outline-offset: 3px; }
.kcm-journey-controls { border-top: 1px solid var(--kcm-rule); padding-top: 28px; }
.kcm-journey-controls h3 { margin: 0 0 15px; font-size: 1rem; }
.kcm-journey-controls__row { display: flex; flex-wrap: wrap; gap: 9px; }
.kcm-repair { margin-top: 14px; }
.kcm-repair summary { width: max-content; color: var(--kcm-green); font-size: .8rem; font-weight: 700; cursor: pointer; }
.kcm-repair form { max-width: 620px; padding-bottom: 12px; }

.kcm-goal-compass { max-width: 700px; padding: 30px 0; }
.kcm-goal-switcher, .kcm-board-switcher, .kcm-program-chooser { display: flex; max-width: 760px; flex-wrap: wrap; gap: 8px; padding: 22px 0 4px; }
.kcm-add-goal, .kcm-add-board, .kcm-supporter-insights { max-width: 700px; margin-top: 30px; border-top: 1px solid var(--kcm-rule); padding-top: 24px; }
.kcm-add-goal h3, .kcm-add-board h3, .kcm-supporter-insights h3 { margin: 0 0 8px; }
.kcm-add-goal > p, .kcm-supporter-insights p { color: var(--kcm-soft); }
.kcm-inline-board-form { max-width: 560px; }
.kcm-goal-compass h3 { margin: 0; font-size: 1.25rem; }
.kcm-goal-compass dl { display: grid; grid-template-columns: 130px 1fr; margin: 22px 0; border-top: 1px solid var(--kcm-rule); }
.kcm-goal-compass dt, .kcm-goal-compass dd { margin: 0; border-bottom: 1px solid var(--kcm-rule); padding: 13px 0; }
.kcm-goal-compass dt { color: var(--kcm-quiet); font-size: .75rem; font-weight: 750; }
.kcm-goal-compass dd { color: var(--kcm-soft); }
.kcm-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kcm-inline-actions .kcm-button { min-height: 44px; padding: 8px 14px; font-size: .76rem; }
.kcm-inline-editor { width: 100%; margin-top: 18px; border-top: 1px solid var(--kcm-rule); padding-top: 4px; }
.kcm-inline-editor .kcm-inline-actions { margin-top: 18px; }
.kcm-affirmation-custom { max-width: 620px; margin-top: 26px; }
.kcm-board[data-kcm-board-theme="sage"] .kcm-board-list { background: var(--kcm-sage); }
.kcm-board[data-kcm-board-theme="paper"] .kcm-board-list { background: var(--kcm-surface); }
.kcm-board[data-kcm-board-theme="ink"] .kcm-board-list { background: #1f4638; color: #fffdf9; }
.kcm-board[data-kcm-board-theme="ink"] .kcm-board-card span, .kcm-board[data-kcm-board-theme="ink"] .kcm-board-card small { color: #e8ede9; }
.kcm-board[data-kcm-board-theme="clay"] .kcm-board-list { background: color-mix(in srgb, var(--kcm-clay) 16%, var(--kcm-surface)); }
.kcm-scene-item { max-width: 700px; border-bottom: 1px solid var(--kcm-rule); padding: 30px 0; }
.kcm-scene-item h3 { margin: 0 0 13px; font-size: 1rem; }
.kcm-scene-transcript { max-width: 62ch; margin: 0 0 18px; color: var(--kcm-soft); font-size: 1rem; line-height: 1.7; }
.kcm-ai-draft, .kcm-care-stepout { margin-top: 22px; border: 1px solid var(--kcm-rule); border-radius: 8px; background: var(--kcm-sage); padding: clamp(18px, 3vw, 24px); }
.kcm-ai-draft h4, .kcm-care-stepout h4 { margin: 0 0 8px; color: var(--kcm-ink); font-size: 1rem; }
.kcm-ai-draft p, .kcm-care-stepout p { max-width: 62ch; color: var(--kcm-soft); line-height: 1.65; }
.kcm-scene-audio { display: block; width: min(100%, 36rem); margin-top: 18px; }
.kcm-device-playback { margin-top: 12px; }
.kcm-reminders { max-width: 760px; border-top: 1px solid var(--kcm-rule); margin-top: 48px; padding-top: 38px; }
.kcm-reminder-form { display: grid; gap: 22px; margin-top: 22px; }
.kcm-reminder-windows, .kcm-reminder-quiet, .kcm-reminder-purposes { margin: 0; border: 1px solid var(--kcm-rule); border-radius: 8px; padding: 18px; }
.kcm-reminder-windows legend, .kcm-reminder-quiet legend, .kcm-reminder-purposes legend { padding: 0 6px; color: var(--kcm-ink); font-weight: 750; }
.kcm-reminder-purposes > p { max-width: 62ch; margin: 2px 0 8px; color: var(--kcm-soft); font-size: .78rem; }
.kcm-reminder-row { display: grid; grid-template-columns: minmax(12rem, 1fr) auto; gap: 18px; align-items: center; border-bottom: 1px solid var(--kcm-rule); padding: 12px 0; }
.kcm-reminder-row:last-child { border-bottom: 0; }
.kcm-check-choice { display: inline-flex; gap: 10px; align-items: center; font-weight: 680; }
.kcm-check-choice input { width: 20px; height: 20px; accent-color: var(--kcm-green); }
.kcm-reminder-purpose .kcm-check-choice span strong, .kcm-reminder-purpose .kcm-check-choice span small { display: block; }
.kcm-reminder-purpose .kcm-check-choice span small { margin-top: 2px; color: var(--kcm-quiet); font-size: .68rem; font-weight: 500; }
.kcm-time-choice { display: flex; gap: 10px; align-items: center; color: var(--kcm-quiet); font-size: .75rem; }
.kcm-time-choice input, .kcm-reminder-quiet input[type="time"] { min-height: 44px; border: 1px solid var(--kcm-rule-strong); border-radius: 6px; background: var(--kcm-surface); color: var(--kcm-ink); padding: 8px; }
.kcm-reminder-quiet { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.kcm-reminder-quiet legend { width: auto; }
.kcm-reminder-permission, .kcm-inpage-reminder { margin-top: 22px; border: 1px solid var(--kcm-rule-strong); border-radius: 8px; background: var(--kcm-sage); padding: 20px; }
.kcm-reminder-permission h3 { margin: 0 0 6px; font-size: 1rem; }
.kcm-reminder-permission p, .kcm-reminder-note { max-width: 62ch; color: var(--kcm-soft); }
.kcm-inpage-reminder strong, .kcm-inpage-reminder span { display: block; }
.kcm-inpage-reminder span { margin-top: 4px; color: var(--kcm-soft); font-size: .75rem; }
.kcm-accountability-preview, .kcm-data-controls { max-width: 700px; border-top: 1px solid var(--kcm-rule); margin-top: 36px; padding-top: 30px; }
.kcm-accountability-preview h3, .kcm-data-controls h3 { margin: 5px 0 8px; font-size: 1.2rem; }
.kcm-accountability-form { display: grid; gap: 18px; margin-top: 20px; }
.kcm-accountability-form .kcm-radio-stack { display: grid; grid-template-columns: 1fr; }
.kcm-accountability-card { margin-top: 18px; border: 1px solid var(--kcm-rule-strong); border-radius: 8px; background: var(--kcm-sage); padding: 20px; }
.kcm-accountability-card strong { color: var(--kcm-green); }
.kcm-accountability-card p { margin: 10px 0; }
.kcm-accountability-card small { display: block; margin: 12px 0; color: var(--kcm-quiet); }
.kcm-clear-confirm { margin-top: 20px; border: 1px solid var(--kcm-danger); border-radius: 8px; padding: 20px; }
.kcm-clear-confirm p { max-width: 58ch; color: var(--kcm-soft); }
.kcm-clear-confirm .kcm-button { margin-top: 16px; }
.kcm-compact-form { max-width: 700px; border-bottom: 1px solid var(--kcm-rule); padding: 24px 0 30px; }
.kcm-compact-form > .kcm-button { margin-top: 20px; }
.kcm-board { padding-top: 6px; }
.kcm-board-list, .kcm-proof-list, .kcm-journal-list, .kcm-program-list { max-width: 700px; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--kcm-rule); list-style: none; }
.kcm-board-card { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; border-bottom: 1px solid var(--kcm-rule); padding: 17px 0; }
.kcm-board-card small, .kcm-board-card strong, .kcm-board-card span { display: block; }
.kcm-board-card small, .kcm-proof-list small, .kcm-journal-list small { color: var(--kcm-clay); font-size: .68rem; font-weight: 750; }
.kcm-board-card span { margin-top: 3px; color: var(--kcm-soft); font-size: .8rem; }
.kcm-board-image, .kcm-proof-image { display: block; width: min(100%, 320px); max-height: 260px; margin: 0 0 12px; border-radius: 8px; object-fit: cover; }
.kcm-order-actions { display: flex; gap: 5px; }
.kcm-order-actions button, .kcm-proof-list button, .kcm-journal-list button { min-width: 44px; min-height: 44px; border: 1px solid var(--kcm-rule-strong); border-radius: 4px; background: var(--kcm-surface); color: var(--kcm-ink); padding: 6px 9px; font-size: .68rem; cursor: pointer; }
.kcm-order-actions button:disabled { opacity: .45; cursor: not-allowed; }
.kcm-empty-line { border-bottom: 1px solid var(--kcm-rule); padding: 18px 0; color: var(--kcm-quiet); }
.kcm-affirmation-lab { max-width: 700px; padding: 45px 0; }
.kcm-affirmation-lab blockquote { margin: 0 0 28px; color: var(--kcm-green); font-size: 1.75rem; font-weight: 720; line-height: 1.4; text-wrap: balance; }
.kcm-count { color: var(--kcm-quiet); font-size: .75rem; }
.kcm-proof-list li, .kcm-journal-list li { display: grid; grid-template-columns: 1fr auto; gap: 20px; border-bottom: 1px solid var(--kcm-rule); padding: 17px 0; }
.kcm-proof-list p, .kcm-journal-list p { grid-column: 1; margin: 4px 0 0; color: var(--kcm-soft); white-space: pre-wrap; }
.kcm-proof-list .kcm-proof-image { grid-column: 1; }
.kcm-proof-list button, .kcm-journal-list button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.kcm-proof-list .kcm-entry-actions, .kcm-journal-list .kcm-entry-actions { display: flex; grid-column: 2; grid-row: 1 / 3; align-self: center; gap: 6px; }
.kcm-proof-list .kcm-entry-actions button, .kcm-journal-list .kcm-entry-actions button { grid-column: auto; grid-row: auto; }
.kcm-delete-confirm { grid-column: 1 / -1; border: 1px solid var(--kcm-danger); border-radius: 8px; background: var(--kcm-surface); padding: 16px; }
.kcm-delete-confirm p { margin: 0 0 12px; color: var(--kcm-soft); }
.kcm-delete-confirm .kcm-button { grid-column: auto; grid-row: auto; width: auto; }
.kcm-progress-summary { max-width: 700px; padding: 30px 0; }
.kcm-progress-summary > div { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; border-bottom: 1px solid var(--kcm-rule); padding: 16px 0; }
.kcm-progress-summary > div strong { color: var(--kcm-green); font-size: 1.6rem; }
.kcm-progress-summary > div span { color: var(--kcm-soft); }
.kcm-progress-summary > p { max-width: 62ch; margin: 24px 0 0; color: var(--kcm-quiet); }
.kcm-program-progress { margin: 24px 0 0; color: var(--kcm-green); font-weight: 750; }
.kcm-program-list li { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; border-bottom: 1px solid var(--kcm-rule); padding: 17px 0; }
.kcm-program-list strong, .kcm-program-list span { display: block; }
.kcm-program-list span { margin-top: 4px; color: var(--kcm-soft); font-size: .8rem; }
.kcm-program-list .kcm-button { min-width: 128px; }

.kcm-migration-review, .kcm-upgrade { max-width: 760px; border: 1px solid var(--kcm-rule-strong); border-radius: 8px; background: var(--kcm-surface); padding: 22px; }
.kcm-migration-review { margin: 8px 0 28px; }
.kcm-upgrade { margin: 38px 0 10px; background: var(--kcm-sage); }
.kcm-migration-review h2, .kcm-upgrade h2 { margin: 0; font-size: 1.12rem; }
.kcm-migration-review p, .kcm-upgrade p { max-width: 60ch; margin: 8px 0 0; color: var(--kcm-soft); font-size: .84rem; }
.kcm-migration-review__note { font-size: .73rem !important; }
.kcm-upgrade__price { color: var(--kcm-ink) !important; font-weight: 750; }
.kcm-upgrade__free { color: var(--kcm-ink) !important; font-weight: 750; }
.kcm-migration-review .kcm-inline-actions, .kcm-upgrade .kcm-inline-actions { margin-top: 18px; }

@media (max-width: 1180px) and (min-width: 901px) {
  .kcm-starter-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcm-starter { min-height: 190px; }
}

@media (max-width: 900px) {
  .kcm-app { border-top: 0; }
  .kcm-product-topbar {
    position: sticky;
    z-index: 1200;
    top: 0;
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--kcm-rule);
    background: var(--kcm-surface);
    padding: 5px 8px;
  }
  .kcm-product-topbar__button,
  .kcm-rail__close {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--kcm-ink);
    cursor: pointer;
  }
  .kcm-product-topbar__button:hover,
  .kcm-rail__close:hover { background: var(--kcm-sage); }
  .kcm-product-topbar__button svg,
  .kcm-rail__close svg { width: 22px; height: 22px; }
  .kcm-product-topbar__brand {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    color: var(--kcm-ink) !important;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em;
  }
  .kcm-crown { width: 22px; height: 17px; background: currentColor; clip-path: polygon(0 100%, 0 38%, 18% 62%, 34% 17%, 50% 62%, 67% 17%, 82% 62%, 100% 38%, 100% 100%); }
  .kcm-layout { display: block; }
  .kcm-product-header { display: none; }
  .kcm-rail-toggle { display: none; }
  .kcm-rail {
    position: fixed;
    z-index: 1310;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(300px, 86vw);
    height: auto;
    max-height: none;
    padding: 8px 14px 30px;
    visibility: hidden;
    transform: translateX(-105%);
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 180ms;
    box-shadow: 12px 0 28px rgba(18, 28, 23, .18);
  }
  html.kcm-rail-collapsed .kcm-rail { width: min(300px, 86vw); padding: 8px 14px 30px; }
  html.kcm-rail-collapsed .kcm-product-nav__heading,
  html.kcm-rail-collapsed .kcm-product-nav a span,
  html.kcm-rail-collapsed .kcm-privacy-note { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  html.kcm-rail-collapsed .kcm-product-nav a { justify-content: flex-start; padding: 9px 11px; }
  .kcm-rail[data-open="true"] { visibility: visible; transform: translateX(0); transition-delay: 0s; }
  .kcm-rail__close { margin: 0 0 5px auto; }
  .kcm-nav-scrim {
    position: fixed;
    z-index: 1300;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(12, 18, 15, .52);
    cursor: pointer;
  }
  .kcm-nav-scrim[hidden] { display: none; }
  .kcm-main { width: 100%; padding: 0 20px 64px; }
  .kcm-privacy-note { margin-top: 20px; }
  .kcm-hero { padding-top: 36px; }
}

@media (max-width: 520px) {
  .kcm-help { display: block; }
  .kcm-help span { display: none; }
  .kcm-main { padding-right: 14px; padding-left: 14px; }
  .kcm-hero h1 { font-size: 2.5rem; letter-spacing: -.035em; }
  .kcm-hero__lede { font-size: 1rem; }
  .kcm-hero__actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .kcm-button { width: 100%; }
  .kcm-text-link { text-align: center; }
  .kcm-bridge { margin-bottom: 40px; }
  .kcm-bridge ol { grid-template-columns: repeat(5, minmax(48px, 1fr)); gap: 4px; }
  .kcm-bridge small { display: none; }
  .kcm-bridge span { overflow-wrap: anywhere; font-size: .65rem; }
  .kcm-principle { grid-template-columns: 1fr; gap: 22px; padding: 28px 0; }
  .kcm-section-heading { display: block; }
  .kcm-starter-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 280px); grid-template-columns: none; gap: 12px; overflow-x: auto; margin-right: 0; padding: 2px 14px 12px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .kcm-starter-shelf::-webkit-scrollbar { display: none; }
  .kcm-starter { min-height: 205px; scroll-snap-align: start; }
  .kcm-time { display: block; margin-top: 8px; }
  .kcm-anchor-list li { grid-template-columns: 67px 1fr; gap: 12px; }
  .kcm-anchor-list .kcm-state { display: none; }
  .kcm-program-preview li { grid-template-columns: 1fr; gap: 4px; }
  .kcm-story-library { padding-top: 22px; }
  .kcm-story-toolbar { grid-template-columns: 1fr; }
  .kcm-story-card { padding: 20px 16px; }
  .kcm-story-card__actions { align-items: stretch; flex-direction: column; }
  .kcm-story-card__actions > .kcm-button, .kcm-story-card__actions > .kcm-story-menu { width: 100%; }
  .kcm-story-menu > summary { width: 100%; justify-content: center; }
  .kcm-story-menu__items { width: 100%; min-width: 0; }
  .kcm-story-history li { grid-template-columns: 1fr auto; }
  .kcm-story-history button { grid-column: 1 / -1; width: 100%; text-align: left; }
  .kcm-story-sections li { grid-template-columns: 1fr; gap: 6px; }
  .kcm-form-actions { flex-direction: column-reverse; }
  .kcm-form-actions .kcm-button--primary { margin-left: 0; }
  .kcm-onboarding-options { grid-template-columns: 1fr; }
  .kcm-onboarding-actions { align-items: stretch; }
  .kcm-onboarding-actions .kcm-text-button { width: 100%; text-align: center; }
  .kcm-onboarding-footer { align-items: flex-start; flex-direction: column; gap: 4px; }
  .kcm-onboarding-review__row { grid-template-columns: 1fr; gap: 5px; }
  .kcm-onboarding-review__row .kcm-text-button { justify-self: start; }
  .kcm-reflection__fields ul { columns: 1; }
  .kcm-category-fieldset { display: grid; grid-template-columns: 1fr 1fr; }
  .kcm-category-choice span { width: 100%; justify-content: center; text-align: center; }
  .kcm-future-scene p { font-size: 1.08rem; }
  .kcm-momentum { display: block; }
  .kcm-today-goals { grid-template-columns: 1fr; }
  .kcm-momentum__meter { width: max-content; margin-top: 18px; }
  .kcm-current-move { grid-template-columns: 1fr; gap: 4px; }
  .kcm-now__choices { grid-template-columns: 1fr 1fr; }
  .kcm-quests__heading { display: block; }
  .kcm-quests__heading > p { margin-top: 7px; }
  .kcm-quests__list li { grid-template-columns: 32px 1fr; }
  .kcm-quests__list .kcm-text-link, .kcm-quests__state { grid-column: 2; justify-self: start; }
  .kcm-anchor-list--interactive li { grid-template-columns: 64px 1fr; }
  .kcm-anchor-list--interactive .kcm-anchor-button { grid-column: 2; width: 100%; margin-top: 8px; }
  .kcm-radio-stack { grid-template-columns: 1fr; }
  .kcm-radio-stack legend { grid-column: 1; }
  .kcm-ritual-panel { padding: 18px 14px; }
  .kcm-journey-controls__row { display: grid; }
  .kcm-goal-compass dl { grid-template-columns: 1fr; }
  .kcm-goal-compass dt { border-bottom: 0; padding-bottom: 0; }
  .kcm-goal-compass dd { padding-top: 3px; }
  .kcm-board-card, .kcm-proof-list li, .kcm-journal-list li, .kcm-program-list li { grid-template-columns: 1fr; }
  .kcm-order-actions, .kcm-proof-list button, .kcm-journal-list button, .kcm-program-list .kcm-button { grid-column: 1; grid-row: auto; width: 100%; }
  .kcm-proof-list .kcm-entry-actions, .kcm-journal-list .kcm-entry-actions { grid-column: 1; grid-row: auto; }
  .kcm-order-actions button { flex: 1; }
  .kcm-affirmation-lab blockquote { font-size: 1.35rem; }
  .kcm-reminder-row { grid-template-columns: 1fr; gap: 8px; }
  .kcm-time-choice { justify-content: space-between; }
  .kcm-reminder-quiet { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .kcm-app,
  .kcm-app *,
  .kcm-app *::before,
  .kcm-app *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (forced-colors: active) {
  .kcm-product-nav a[aria-current="page"], .kcm-bridge li.is-current::before { border: 2px solid CanvasText; }
}

/* ---------- daily affirmations ----------
   The card is deliberately not a rectangle. Songs, posters and Stories are all
   rectangles, so colour alone would not separate a fourth card type; the arched
   crown does the work at thumbnail size. Ground and ink are the product's own
   sage and deep green, which reads calm and addresses everyone, rather than the
   pink the competitor uses to target one audience. */

.kcm-affirmations__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 12px 20px; margin-bottom: 18px;
}
.kcm-affirmations__note { margin: 4px 0 0; color: var(--kcm-quiet); font-size: .95rem; }

.kcm-affirmation-deck { display: flex; flex-direction: column; gap: 16px; max-width: 420px; }

.kcm-affirmation-deck__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  touch-action: pan-y;
  cursor: grab;
  /* A dismissed card travels to 150%. Without clipping that becomes real
     horizontal scroll on a narrow screen every time someone swipes. The clip
     stays square: a rounded stage cut the card's own arched corners off. */
  overflow: hidden;
}
.kcm-affirmation-deck__stage.is-grabbing { cursor: grabbing; }
.kcm-affirmation-deck__stage:focus-visible { outline: 3px solid var(--kcm-focus); outline-offset: 4px; }

.kcm-affirmation-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 62px 26px 42px;
  text-align: center;
  background: var(--kcm-sage);
  border: 1px solid var(--kcm-green);
  border-radius: 150px 150px 12px 12px / 92px 92px 10px 10px;
  color: var(--kcm-green-deep);
  transition: transform .44s cubic-bezier(.2,.72,.28,1), opacity .34s ease;
  will-change: transform;
  user-select: none; -webkit-user-select: none;
}
.kcm-affirmation-card.is-dragging { transition: none; }

.kcm-affirmation-card__chrome {
  position: absolute; top: 26px; left: 30px; right: 30px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.kcm-affirmation-card__brand { width: 96px; height: auto; opacity: .8; flex: none; }
.kcm-affirmation-card__brand--dark { display: none; }

.kcm-affirmation-card__tools { display: flex; gap: 8px; flex: none; }
.kcm-affirmation-card__tool {
  width: 44px; height: 44px; padding: 0; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid currentColor; border-radius: 50%;
  background: transparent; color: inherit; opacity: .6;
}
.kcm-affirmation-card__tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.kcm-affirmation-card__tool:hover { opacity: 1; }
.kcm-affirmation-card__tool:focus-visible { outline: 3px solid var(--kcm-focus); outline-offset: 2px; opacity: 1; }
.kcm-affirmation-card__tool.is-favorite { color: #b3243c; border-color: #b3243c; opacity: 1; }
.kcm-affirmation-card__tool.is-favorite svg { fill: #b3243c; stroke: #b3243c; }

.kcm-affirmation-card__face { display: flex; flex-direction: column; gap: 18px; }
.kcm-affirmation-card__line {
  margin: 0; font-size: 1.32rem; line-height: 1.34; font-weight: 500;
  text-wrap: balance;
}
.kcm-affirmation-card__theme {
  margin: 0; font-size: .68rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--kcm-green);
}
.kcm-affirmation-card__url {
  position: absolute; bottom: 22px; left: 0; right: 0;
  font-size: .62rem; font-weight: 600; letter-spacing: .14em;
  /* 0.55 blended to 2.85:1 against sage, under the 4.5 minimum. 0.8 clears it
     in both themes while still reading as a quiet footer mark. */
  opacity: .8;
}

.kcm-affirmation-deck__controls { display: flex; align-items: center; gap: 12px; }
.kcm-affirmation-deck__nav {
  font: inherit; min-height: 44px; padding: 10px 18px; cursor: pointer;
  border: 1px solid var(--kcm-rule-strong); border-radius: 999px;
  background: var(--kcm-surface); color: var(--kcm-ink); font-weight: 600;
}
.kcm-affirmation-deck__nav:hover { border-color: var(--kcm-green); color: var(--kcm-green); }
.kcm-affirmation-deck__nav:focus-visible { outline: 3px solid var(--kcm-focus); outline-offset: 2px; }
.kcm-affirmation-deck__count { margin: 0; flex: 1; text-align: center; color: var(--kcm-quiet); font-size: .9rem; }

.kcm-affirmation-deck__done {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  min-height: 320px; padding: 40px 26px;
  border: 1px solid var(--kcm-rule); border-radius: 14px;
  background: var(--kcm-surface);
}
.kcm-affirmation-deck__done-line { margin: 0; font-size: 1.2rem; font-weight: 600; color: var(--kcm-ink); }
.kcm-affirmation-deck__done-note { margin: 0; max-width: 40ch; color: var(--kcm-quiet); font-size: .95rem; }

.kcm-affirmations__saved { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--kcm-rule); }
.kcm-affirmations__saved h3 { margin: 0 0 16px; font-size: 1.15rem; }
.kcm-affirmations__saved-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kcm-affirmations__saved-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px; border: 1px solid var(--kcm-rule); border-radius: 10px;
  background: var(--kcm-surface);
}
.kcm-affirmations__saved-line { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--kcm-ink); }
.kcm-affirmations__saved-theme {
  margin: 0; font-size: .64rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--kcm-green);
}
.kcm-affirmations__saved-actions { display: flex; gap: 8px; margin-top: 4px; }
.kcm-affirmations__pager { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.kcm-affirmations__pager-count { margin: 0; flex: 1; text-align: center; color: var(--kcm-quiet); font-size: .9rem; }

/* Any component given a display value must restate the hidden rule: an author
   `display` beats the user agent's `[hidden] { display: none }` regardless of
   specificity, so without these the teaser and the finished state stay on screen
   after the code has hidden them. */
.kcm-teaser[hidden],
.kcm-affirmation-deck__stage[hidden],
.kcm-affirmation-deck__controls[hidden],
.kcm-affirmation-deck__done[hidden] { display: none; }

/* ---------- share review ---------- */

.kcm-share-sheet {
  border: 1px solid var(--kcm-rule); border-radius: 10px; padding: 0;
  background: var(--kcm-surface); color: var(--kcm-ink);
  width: min(520px, calc(100vw - 32px));
}
.kcm-share-sheet::backdrop { background: rgba(18, 24, 20, .55); }
.kcm-share-sheet__in { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.kcm-share-sheet__in h2 { margin: 0; font-size: 1.15rem; }
.kcm-share-sheet__note { margin: 0; font-size: .9rem; color: var(--kcm-quiet); }
.kcm-share-sheet__preview {
  margin: 0; padding: 14px 16px; white-space: pre-line;
  border-left: 3px solid var(--kcm-green); border-radius: 0 4px 4px 0;
  background: var(--kcm-sage); color: var(--kcm-green-deep); font-size: 1rem;
}
.kcm-share-sheet__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.kcm-share-sheet__grid .rc-share-destination {
  min-height: 58px; display: grid; place-items: center; align-content: center; gap: 4px;
  padding: 8px 4px; cursor: pointer;
  border: 1px solid var(--kcm-rule); border-radius: 10px;
  background: var(--kcm-canvas); color: var(--kcm-green);
}
.kcm-share-sheet__grid .rc-share-destination:hover { border-color: var(--kcm-green); }
.kcm-share-sheet__grid .rc-share-destination:focus-visible { outline: 3px solid var(--kcm-focus); outline-offset: 2px; }
.kcm-share-sheet__grid .rc-share-destination svg { width: 18px; height: 18px; }
.kcm-share-sheet__grid .rc-share-destination strong { font-size: 11px; font-weight: 700; }

/* ---------- the onboarding door ---------- */

.kcm-product-nav a[data-kcm-locked] { opacity: .58; }
.kcm-product-nav a[data-kcm-locked]::after {
  content: ""; width: 9px; height: 11px; margin-left: 7px; flex: none;
  border: 1.5px solid currentColor; border-radius: 1px 1px 2px 2px;
  border-top-width: 4px; border-top-left-radius: 6px; border-top-right-radius: 6px;
  display: inline-block; vertical-align: -1px; opacity: .75;
}

.kcm-teaser { display: flex; flex-direction: column; gap: 26px; }
.kcm-teaser__label {
  align-self: flex-start;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kcm-clay); border: 1px solid currentColor; border-radius: 3px; padding: 4px 9px;
}
.kcm-teaser__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; align-items: start; }
.kcm-teaser__panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kcm-teaser__panel h3 { margin: 0; font-size: 1.05rem; }
.kcm-teaser__panel > p { margin: 0; color: var(--kcm-quiet); font-size: .95rem; max-width: 46ch; }
.kcm-teaser__story {
  border: 1px solid var(--kcm-rule); border-radius: 10px; padding: 20px 22px;
  background: var(--kcm-surface); display: flex; flex-direction: column; gap: 10px;
}
.kcm-teaser__story h4 { margin: 0; font-size: 1rem; }
.kcm-teaser__story p { margin: 0; color: var(--kcm-soft); font-size: .95rem; line-height: 1.55; }
.kcm-teaser .kcm-affirmation-deck { max-width: 320px; }

/* The card keeps its own identity in dark mode rather than inverting: a deeper
   sage ground with the light mark, so the brand never renders dark on dark. */
html[data-mode="batman"] .kcm-affirmation-card__brand--light { display: none; }
html[data-mode="batman"] .kcm-affirmation-card__brand--dark { display: block; }
html[data-mode="batman"] .kcm-affirmation-card { background: #22332b; border-color: #6fae92; color: #e6f2ea; }
html[data-mode="batman"] .kcm-affirmation-card__theme { color: #9ad4b6; }
html[data-mode="batman"] .kcm-share-sheet__preview { background: #22332b; color: #e6f2ea; }

@media (max-width: 480px) {
  .kcm-affirmation-deck { max-width: none; }
  .kcm-affirmation-card { padding: 58px 20px 38px; border-radius: 120px 120px 12px 12px / 74px 74px 10px 10px; }
  .kcm-affirmation-card__line { font-size: 1.16rem; }
  .kcm-affirmation-card__chrome { top: 22px; left: 24px; right: 24px; }
  .kcm-affirmation-card__brand { width: 82px; }
  .kcm-share-sheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .kcm-affirmation-card { transition: opacity .2s ease; }
}

/* ---------- print / save a Story ----------
   The transcript is the durable artifact, so printing keeps the words and drops
   everything that only makes sense on a screen. Chrome list matches the house
   print rule in kc-calm-kit.css. When the player is open it IS the page: its
   siblings in the library are navigation, not content. */
@media print {
  .kc-crisis-ribbon, .wt-mini, .wt-mini__drawer, .wt-masthead, .kc-footer,
  .kcm-product-nav, .kcm-product-header { display: none !important; }

  .kcm-story-library--player-open > :not(.kcm-story-player-host) { display: none !important; }

  .kcm-story-player__header button,
  .kcm-story-player__segments,
  .kcm-story-player__transport,
  .kcm-story-player__reading-tools,
  .kcm-story-player__section-controls,
  .kcm-story-player__status { display: none !important; }

  .kcm-story-player {
    margin: 0; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; color: #000;
  }
  .kcm-story-player__transcript { list-style: none; margin: 0; padding: 0; }
  .kcm-story-player__section { break-inside: avoid; page-break-inside: avoid; margin: 0 0 16pt; }
  .kcm-story-player__reader::after {
    content: "KeepCalm.org";
    display: block; margin-top: 22pt;
    font-size: 9pt; letter-spacing: .12em;
  }
}