/* ---- Steady — soft pastel calming design system ---- */

:root {
  /* Pastel surfaces */
  --bg:        #fbf8ff;   /* barely-there lavender white */
  --bg-alt:    #f3effc;   /* soft lilac */
  --surface:   #ffffff;

  /* Pastel accent family */
  --lav:       #e5defb;   /* lavender */
  --lav-mid:   #c9bdf3;
  --sky:       #dbeafd;   /* soft blue */
  --sky-mid:   #b6d6f7;
  --mint:      #d8f2e7;   /* mint */
  --mint-mid:  #a8e0cb;
  --peach:     #ffe4d6;   /* peach */
  --peach-mid: #ffc4a8;
  --blush:     #fde2ec;   /* blush pink */

  /* Ink for everything set in the reading face — three shades darker
     than the titles, at 10.9:1. The captions used to sit at 3.4:1,
     which is below the readable floor; they now match the body, so
     nothing on the site is written in a whisper. */
  --ink:       #443A3E;
  --ink-soft:  #4E4348;
  --ink-faint: #443A3E;

  /* The one shade that stays quiet, kept for the few places where
     faintness is the point rather than an oversight. */
  --ink-quiet: #8d87a3;

  /* Interactive */
  --accent:    #7b6cc4;   /* muted periwinkle */
  --accent-dk: #5c4fa3;
  --accent-lt: var(--lav);
  --warm:      #e08a63;   /* soft coral */
  --warm-dk:   #c9704a;
  --warm-lt:   var(--peach);

  --line:      #ebe5f7;
  --line-warm: #f7e0d4;

  --radius:    20px;
  --radius-sm: 12px;
  --shadow:    0 1px 2px rgba(90,75,140,.05), 0 10px 30px rgba(123,108,196,.08);
  --shadow-lg: 0 2px 6px rgba(90,75,140,.06), 0 18px 44px rgba(123,108,196,.14);
  --maxw:      720px;
  --font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* heading that search engines and screen readers see, but the eye doesn't */
.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;
}

html { scroll-behavior: smooth; }

/* pages ease in, so moving between them never jolts */
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }
body { animation: pagein .28s ease both; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 520px at 12% -8%,  rgba(229,222,251,.85), transparent 60%),
    radial-gradient(ellipse 800px 480px at 92% 4%,   rgba(219,234,253,.75), transparent 60%),
    radial-gradient(ellipse 760px 520px at 50% 100%, rgba(216,242,231,.55), transparent 62%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---- Layout ---- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1000px; margin: 0 auto; padding: 0 24px; }

main { padding: 48px 0 80px; }
section { margin: 0 0 56px; }

/* ---- Header / nav ---- */

header.site {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

.brand .dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lav-mid), var(--sky-mid) 50%, var(--mint-mid));
  flex: none;
}

.nav a.navlink {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15.5px;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.nav a.navlink:hover { background: var(--bg-alt); color: var(--ink); }
.nav a.navlink[aria-current="page"] { background: var(--lav); color: var(--accent-dk); font-weight: 600; }

.nav a.nav-panic {
  background: linear-gradient(135deg, var(--peach), var(--blush));
  color: #a8542f;
  font-weight: 650;
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15.5px;
  white-space: nowrap;
  border: 1px solid var(--line-warm);
  transition: filter .15s ease;
}
.nav a.nav-panic:hover { filter: brightness(.97); }

/* ---- Type ---- */

h1 {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 16px;
  font-weight: 700;
}

h2 {
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -.018em;
  margin: 48px 0 14px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  line-height: 1.35;
  margin: 30px 0 8px;
  font-weight: 650;
}

p { margin: 0 0 18px; }

.lede {
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 32px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 10px;
}

a { color: var(--accent-dk); }

ul, ol { padding-left: 22px; margin: 0 0 18px; }
li { margin-bottom: 9px; }

strong { font-weight: 650; }

hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }

/* ---- Cards ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* pastel card variants */
.card.lav   { background: linear-gradient(160deg, #f6f2ff, #fff 70%); }
.card.sky   { background: linear-gradient(160deg, #f0f7ff, #fff 70%); }
.card.mint  { background: linear-gradient(160deg, #eefaf5, #fff 70%); }
.card.peach { background: linear-gradient(160deg, #fff3ec, #fff 70%); }

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-link .go { color: var(--accent-dk); font-weight: 650; font-size: 15.5px; }

.card .ico {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px;
  margin-bottom: 14px;
}
.card.lav   .ico { background: var(--lav); }
.card.sky   .ico { background: var(--sky); }
.card.mint  .ico { background: var(--mint); }
.card.peach .ico { background: var(--peach); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* ---- Callouts ---- */

.note {
  background: var(--lav);
  border-left: 4px solid var(--lav-mid);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px;
  margin: 0 0 24px;
}
.note.warm  { background: var(--peach); border-left-color: var(--peach-mid); }
.note.mint  { background: var(--mint);  border-left-color: var(--mint-mid); }
.note.sky   { background: var(--sky);   border-left-color: var(--sky-mid); }

.note > :last-child { margin-bottom: 0; }
.note p { font-size: 17px; }

/* ---- Buttons ---- */

.btn {
  display: inline-block;
  background: linear-gradient(135deg, #8a7bd0, var(--accent));
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  font-size: 17px;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(123,108,196,.28);
  transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

.btn.big { font-size: 19px; padding: 18px 38px; }

.btn.warm {
  background: linear-gradient(135deg, #eda07d, var(--warm));
  box-shadow: 0 4px 14px rgba(224,138,99,.30);
}

.btn.ghost {
  background: var(--surface);
  color: var(--accent-dk);
  border: 1.5px solid var(--lav-mid);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--lav); }

.btn:disabled { opacity: .45; cursor: default; transform: none; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---- Steps list ---- */

ol.steps { list-style: none; padding: 0; counter-reset: s; }

ol.steps > li {
  counter-increment: s;
  position: relative;
  padding-left: 54px;
  margin-bottom: 26px;
}

ol.steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 1px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--lav);
  color: var(--accent-dk);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

ol.steps.warm > li::before { background: var(--peach); color: #a8542f; }
ol.steps.mint > li::before { background: var(--mint);  color: #2f7a60; }

ol.steps > li p:last-child { margin-bottom: 0; }
ol.steps h3 { margin: 0 0 4px; font-size: 19px; }

/* ---- Breathing tool ---- */

.breathe-box {
  background: linear-gradient(165deg, #f7f3ff, #f0f8ff 55%, #eefaf5);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 32px 28px 28px;
  text-align: center;
}

.orb-stage {
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.orb {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, var(--lav-mid) 42%, var(--sky-mid) 100%);
  box-shadow:
    0 0 0 16px rgba(201,189,243,.22),
    0 0 0 34px rgba(182,214,247,.16),
    0 0 0 54px rgba(168,224,203,.10);
  transition: transform 1s linear;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dk);
}

.orb-count {
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(92,79,163,.35);
}

.phase-label {
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.01em;
  min-height: 36px;
  margin: 4px 0 6px;
  color: var(--accent-dk);
}

.cycle-count { color: var(--ink-faint); font-size: 15px; margin-bottom: 20px; }

.pattern-picker {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.pattern-picker button {
  font-family: inherit;
  font-size: 15px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: rgba(255,255,255,.75);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.pattern-picker button:hover { border-color: var(--lav-mid); color: var(--accent-dk); }
.pattern-picker button.on {
  background: var(--lav);
  border-color: var(--lav-mid);
  color: var(--accent-dk);
  font-weight: 650;
}

.pattern-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 20px auto 0;
  max-width: 34ch;
}
/* a brief lift when you switch, so the change is unmistakable */
.pattern-desc.flash { animation: descFlash 1.1s ease; }
@keyframes descFlash {
  0%   { opacity: 0; transform: translateY(5px); }
  22%  { opacity: 1; transform: translateY(0);   color: var(--accent-dk); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Grounding tool ---- */

.ground-box {
  background: linear-gradient(165deg, #eefaf5, #f7f3ff 70%);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 30px 30px 26px;
}

.ground-progress { display: flex; gap: 6px; margin-bottom: 24px; }

.ground-progress span {
  height: 6px;
  flex: 1;
  background: rgba(255,255,255,.7);
  border-radius: 999px;
  transition: background .3s ease;
}
.ground-progress span.on { background: var(--lav-mid); }

.ground-num {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--lav-mid);
  letter-spacing: -.04em;
  margin-bottom: 6px;
}

.ground-sense {
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.015em;
  margin-bottom: 10px;
}

.ground-hint { color: var(--ink-soft); font-size: 17px; margin-bottom: 22px; }

.ground-inputs { margin-bottom: 24px; }

.ground-inputs input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  padding: 13px 17px;
  margin-bottom: 10px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.85);
  color: var(--ink);
}
.ground-inputs input::placeholder { color: var(--ink-quiet); }
.ground-inputs input:focus {
  outline: none;
  border-color: var(--lav-mid);
  background: #fff;
}

/* ---- Myth / fact grid ---- */

.myth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--surface);
}

.myth > div { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.myth > div:nth-child(odd) { border-right: 1px solid var(--line); background: #fdf6f2; }
.myth > div:nth-child(even) { background: #f6fcfa; }
.myth > div:nth-last-child(-n+2) { border-bottom: none; }

.myth .head {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
}

.myth p { margin: 0; font-size: 16.5px; line-height: 1.6; }
.myth p + p { margin-top: 12px; }

/* a medical warning that must not be skimmed past */
.redflag {
  background: #fff1ec;
  border-left: 4px solid var(--warm);
  border-radius: 0 10px 10px 0;
  padding: 13px 16px;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: #7d4028;
}
.redflag strong { color: #8f3f22; }

/* ---- Details / accordion ---- */

details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 22px;
  margin-bottom: 12px;
}

details summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 18px;
  padding: 16px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+";
  color: var(--accent);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
details[open] summary::after { content: "\2013"; }
details[open] summary { border-bottom: 1px solid var(--line); }
details .body { padding: 16px 0 6px; }
details .body > :last-child { margin-bottom: 0; }

/* ---- Hero ---- */

.hero {
  padding: 76px 0 60px;
  text-align: center;
  background:
    radial-gradient(ellipse 700px 420px at 20% 0%,  rgba(229,222,251,.9), transparent 62%),
    radial-gradient(ellipse 640px 400px at 82% 12%, rgba(219,234,253,.9), transparent 62%),
    radial-gradient(ellipse 620px 380px at 55% 95%, rgba(253,226,236,.7), transparent 62%);
}
.hero h1 { font-size: 47px; }
.hero .lede { max-width: 580px; margin: 0 auto 34px; }
.hero .btn-row { justify-content: center; }

/* ---- Footer ---- */

footer.site {
  background: linear-gradient(180deg, #f3effc, #ece6f8);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 48px 0 40px;
  font-size: 16px;
  line-height: 1.65;
}
footer.site a { color: var(--accent-dk); }
footer.site strong { color: var(--ink); }
footer.site h4 {
  color: var(--ink);
  font-size: 15px;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-bottom: 32px;
}
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: 7px; font-size: 15.5px; }

.disclaimer {
  border-top: 1px solid rgba(123,108,196,.18);
  padding-top: 24px;
  font-size: 14.5px;
  color: var(--ink-faint);
}
.disclaimer p:last-child { margin-bottom: 0; }

/* ---- Responsive ---- */

@media (max-width: 680px) {
  body { font-size: 17px; }
  h1 { font-size: 32px; }
  .hero { padding: 52px 0 44px; }
  .hero h1 { font-size: 34px; }
  h2 { font-size: 23px; }
  .lede { font-size: 19px; }
  .myth { grid-template-columns: 1fr; }
  .myth > div:nth-child(odd) { border-right: none; }
  .card { padding: 22px; }
  .breathe-box, .ground-box { padding: 24px 20px; }
  .nav { gap: 4px; }
  .nav a.navlink { padding: 6px 10px; font-size: 14.5px; }
  .orb-stage { height: 240px; }
  .ground-num { font-size: 50px; }
}

/* ==========================================================
   INSTANT HELP — minimal layout
   Deliberately built to the same scale as the home screen:
   same background, same tile size as the two circles, same
   type sizes — so moving between them feels like one place.
   ========================================================== */

.v1-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 34px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.v1-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 0;
  gap: 14px;
  flex: none;
}

/* Centred, then lifted 36px. Dead centre put the circle and the two
   tiles slightly low on the screen; a little above the middle is where
   the eye expects them. The extra 72px of bottom padding does it —
   centring splits it, so the content moves up by half. */
.v1-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 96px;
}

.v1-back {
  height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 0 17px 0 14px;
  font-size: 19px;
  color: var(--ink-soft);
  text-decoration: none;
  flex: none;
  white-space: nowrap;
  transition: transform .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.v1-back .bt { font-size: 14.5px; font-weight: 500; }

/* Instant Help pairs this with "Talk to someone", which is a wide button
   in its own right. Below this width the pair needs the room. */
@media (max-width: 400px) {
  .v1-back { height: 44px; padding: 0 13px 0 11px; gap: 6px; }
  .v1-back .bt { font-size: 13.5px; }
  .topbar .back { height: 44px; padding: 0 13px 0 11px; gap: 6px; }
  .topbar .back .bt { font-size: 13.5px; }
}
.v1-back:active { transform: scale(.93); }

.v1-talk {
  appearance: none;
  font-family: inherit;
  background: #2f4257;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(47,66,87,.20);
  transition: transform .16s ease, background .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.v1-talk:hover { background: #3a5069; }
.v1-talk:active { transform: scale(.97); }

.v1-hero { text-align: center; margin-bottom: clamp(30px, 5vw, 46px); }

/* The same face, size and ink as the name on the home page, so the two
   screens open in one voice. Stated here in full rather than inherited,
   so the .typeset rule further down cannot quietly re-italicise it. */
.v1-hero h1 {
  font-family: "Apple Chancery", "Segoe Script", "Lucida Handwriting", cursive,
               "Iowan Old Style", Georgia, serif;
  font-style: normal;
  font-size: clamp(27px, 6vw, 34px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;

  /* The same ink as the name on the home page. It was the darkest thing
     on the site at 10.6:1, which made the heading outshout the two tiles
     it is meant to be introducing. At 6.8:1 it is still comfortably
     readable and no longer competing with them. */
  color: var(--outer);
  margin: 0 0 14px;
}

.v1-sub {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-faint);
  max-width: 36ch;
  margin: 0 auto;
  line-height: 1.55;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* same footprint and gap as the two circles on the home screen */
.v1-grid {
  display: flex;
  gap: clamp(14px, 4vw, 34px);
  align-items: stretch;
  justify-content: center;
  flex-wrap: nowrap;
}

.v1-tile {
  appearance: none;
  font-family: inherit;
  border: none;
  border-radius: 22px;
  width: min(43vw, 230px);
  aspect-ratio: 1 / 1;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(123,108,196,.13);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.v1-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(60,50,90,.15); }
.v1-tile:active { transform: scale(.97); }

.v1-ico {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
}
.v1-ico svg { width: clamp(60px, 36%, 82px); height: auto; max-height: 100%; }

/* ==========================================================
   Living marks — each tile shows what is inside it
   ========================================================== */

.mark { will-change: transform, opacity; }

/* ---------- Paced breathing ----------
   Rings ripple outward as the breath fills, and settle back as it
   empties. Around them, ten counts light up one at a time: four on
   the way in, a pause, then six on the way out. Cycle = 6s.
------------------------------------------------------------ */

.mark-breathe .mb-r {
  transform-box: fill-box;
  transform-origin: center;
  animation: markRipple 6s cubic-bezier(.45,0,.35,1) infinite;
}
.mark-breathe .mb-r1 { opacity: 1;   }
.mark-breathe .mb-r2 { opacity: .58; animation-delay: -5.86s; }   /* a beat behind */
.mark-breathe .mb-r3 { opacity: .3;  animation-delay: -5.72s; }   /* a beat behind that */

@keyframes markRipple {
  0%          { transform: scale(.34); }
  33%         { transform: scale(1);   }   /* in   — 2s */
  42%         { transform: scale(1);   }   /* hold      */
  92%, 100%   { transform: scale(.34); }   /* out  — 3s */
}

.mark-breathe .mb-seg { opacity: .18; }
.mark-breathe .s1 { animation: seg1 6s linear infinite; }
.mark-breathe .s2 { animation: seg2 6s linear infinite; }
.mark-breathe .s3 { animation: seg3 6s linear infinite; }
.mark-breathe .s4 { animation: seg4 6s linear infinite; }
.mark-breathe .s5 { animation: seg5 6s linear infinite; }
.mark-breathe .s6 { animation: seg6 6s linear infinite; }
.mark-breathe .s7 { animation: seg7 6s linear infinite; }
.mark-breathe .s8 { animation: seg8 6s linear infinite; }
.mark-breathe .s9 { animation: seg9 6s linear infinite; }
.mark-breathe .s10 { animation: seg10 6s linear infinite; }

@keyframes seg1 { 0%, 92% { opacity: 1; } 96%, 100% { opacity: .18; } }
@keyframes seg2 { 0%, 8.33% { opacity: .18; } 9.93%, 92% { opacity: 1; } 96%, 100% { opacity: .18; } }
@keyframes seg3 { 0%, 16.67% { opacity: .18; } 18.27%, 92% { opacity: 1; } 96%, 100% { opacity: .18; } }
@keyframes seg4 { 0%, 25.00% { opacity: .18; } 26.60%, 92% { opacity: 1; } 96%, 100% { opacity: .18; } }
@keyframes seg5 { 0%, 41.67% { opacity: .18; } 43.27%, 92% { opacity: 1; } 96%, 100% { opacity: .18; } }
@keyframes seg6 { 0%, 50.00% { opacity: .18; } 51.60%, 92% { opacity: 1; } 96%, 100% { opacity: .18; } }
@keyframes seg7 { 0%, 58.33% { opacity: .18; } 59.93%, 92% { opacity: 1; } 96%, 100% { opacity: .18; } }
@keyframes seg8 { 0%, 66.67% { opacity: .18; } 68.27%, 92% { opacity: 1; } 96%, 100% { opacity: .18; } }
@keyframes seg9 { 0%, 75.00% { opacity: .18; } 76.60%, 92% { opacity: 1; } 96%, 100% { opacity: .18; } }
@keyframes seg10 { 0%, 83.33% { opacity: .18; } 84.93%, 92% { opacity: 1; } 96%, 100% { opacity: .18; } }

/* ---------- 5-4-3-2-1 grounding ----------
   The five senses appear one at a time — see, touch, hear,
   smell, taste — with the counter filling underneath.
   Two seconds each, cycle = 10s.
------------------------------------------------------------ */

.mark-ground .mgs {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 60px 50px;
  animation: senseCycle 10s ease-in-out infinite;
}
.mark-ground .mgs-1 { animation-delay: 0s; }
.mark-ground .mgs-2 { animation-delay: 2s; }
.mark-ground .mgs-3 { animation-delay: 4s; }
.mark-ground .mgs-4 { animation-delay: 6s; }
.mark-ground .mgs-5 { animation-delay: 8s; }

@keyframes senseCycle {
  0%          { opacity: 0; transform: scale(.82); }
  4%          { opacity: 1; transform: scale(1);   }
  16%         { opacity: 1; transform: scale(1);   }
  20%, 100%   { opacity: 0; transform: scale(1.06); }
}

.mark-ground .mg-step {
  opacity: .18;
  transform-box: fill-box;
  transform-origin: center;
  animation: stepCycle 10s ease-in-out infinite;
}
.mark-ground .mg-step:nth-child(1) { animation-delay: 0s; }
.mark-ground .mg-step:nth-child(2) { animation-delay: 2s; }
.mark-ground .mg-step:nth-child(3) { animation-delay: 4s; }
.mark-ground .mg-step:nth-child(4) { animation-delay: 6s; }
.mark-ground .mg-step:nth-child(5) { animation-delay: 8s; }

@keyframes stepCycle {
  0%          { opacity: .18; transform: scale(1);    }
  4%          { opacity: 1;   transform: scale(1.35); }
  16%         { opacity: 1;   transform: scale(1.2);  }
  20%, 100%   { opacity: .18; transform: scale(1);    }
}

/* a tap should feel like the exercise starting, not an interruption */
.v1-tile:active .mark * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .mark-breathe .mb-r,
  .mark-breathe .mb-seg,
  .mark-ground .mgs,
  .mark-ground .mg-step { animation: none; }
  .mark-breathe .mb-r { transform: scale(.8); }
  .mark-breathe .mb-seg { opacity: .45; }
  .mark-ground .mgs-1 { opacity: 1; }   /* just the eye, held still */
  .mark-ground .mg-step { opacity: .4; }
}

.v1-txt { display: block; }

.v1-name {
  display: block;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(16px, 3.7vw, 20px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--outer);   /* the same ink as "Instant Help" */
  margin-bottom: 6px;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.v1-desc {
  display: block;
  font-size: 13px;
  line-height: 1.42;
  color: rgba(59,53,82,.55);
}

/* tile grounds — soft, with a deeper ink for the mark */
.c-rose  { background: #F7DBE2; color: #D17F99; }
.c-mauve { background: #E6DCE4; color: #8A6E90; }
.c-clay  { background: #fae2d3; color: #dd9268; }
.c-blue  { background: #d7e9f8; color: #5093c9; }
.c-mint  { background: #dcf0e6; color: #56a687; }
.c-lav   { background: #e7e2f8; color: #8477cf; }
.c-blush { background: #fbe0ea; color: #d6789e; }
.c-sand  { background: #f7ecd8; color: #cca75a; }

@media (max-height: 720px) {
  .v1-hero { margin-bottom: 26px; }
  .v1-hero h1 { font-size: clamp(26px, 4.6vw, 36px); }
  .v1-tile { width: min(40vw, 200px); }
}

@media (max-width: 400px) {
  .v1-page { padding: 0 16px 24px; }
  .v1-tile { border-radius: 18px; padding: 16px 15px 15px; }
  .v1-name { margin-bottom: 4px; }
}

/* ==========================================================
   SPLASH — the one-button front door
   ========================================================== */

.splash {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 24px 32px;
  gap: 0;

  /* The rest of the site sits on a cool lavender-and-mint wash. Under
     terracotta that turns the left circle grey — warm colour on a cool
     ground always reads muddy. This page gets its own neutral ground so
     both circles read as themselves. It covers the body wash rather than
     replacing it, so no other page is affected. */
  position: relative;
  background: linear-gradient(170deg, #FAF7FB 0%, #F9F7F6 55%, #F8F5F2 100%);
}

/* ==========================================================
   One ground, one ink.

   The reading pages used to carry eight box colours between them —
   four for cards, three for notes, plus tinted table columns, tinted
   numbered circles and a lavender accordion. Nothing was chosen for
   meaning; it had accumulated. All of it is now one warm ivory, and
   every line of text is the one body ink.

   Two things keep their colour on purpose, and both earn it:
   the red-flag warning, which tells someone to treat chest pain as an
   emergency, and the "Need help now?" button, which is the fastest way
   off any page. Colour is doing a job in those two places.

   Scoped with .flat so the exercise screens are untouched.
   ========================================================== */
.flat .note,
.flat .note.warm,
.flat .note.mint,
.flat .note.sky {
  background: #F9F6F2;
  border-left-color: #E6DED4;
}
.flat .card,
.flat .card.lav,
.flat .card.sky,
.flat .card.mint,
.flat .card.peach,
.flat details { background: #F9F6F2; }
.flat .card .ico { background: #E6DED4; }

/* the numbered circles */
.flat ol.steps > li::before,
.flat ol.steps.warm > li::before,
.flat ol.steps.mint > li::before {
  background: #E6DED4;
  color: var(--ink);
}

/* both columns of the comparison table */
.flat .myth > div:nth-child(odd),
.flat .myth > div:nth-child(even) { background: #F9F6F2; }

/* and every line of text, whatever it used to be */
.flat .tiles-head p,
.flat .myth .head,
.flat .myth p,
.flat .ba-count,
.flat .week span,
.flat small { color: var(--ink); }

/* ==========================================================
   One paper, one ink.

   The reading pages used to carry eight box colours and a scatter of
   text greys — lavender numbered circles, a peach-and-mint comparison
   table, four card tints, three note tints. Every box is now the same
   warm ivory, and every line of text the same ink as the paragraphs.

   Two things deliberately keep their colour, because colour is doing a
   job rather than decorating: links, which is how a link announces
   itself, and the red-flag medical warnings, which must not read as
   ordinary text. The help button in the corner keeps its warmth too.

   Scoped to the reading wrappers, so the exercise screens — where the
   greys mark the difference between an instruction and a count — are
   untouched.
   ========================================================== */
:root { --paper: #F9F6F2; --paper-edge: #E6DED4; }

.note,
.note.warm,
.note.mint,
.note.sky        { background: var(--paper); border-left-color: var(--paper-edge); }

.card,
.card.lav,
.card.sky,
.card.mint,
.card.peach      { background: var(--paper); }
.card.lav   .ico,
.card.sky   .ico,
.card.mint  .ico,
.card.peach .ico { background: var(--paper-edge); }

details          { background: var(--paper); }

ol.steps > li::before,
ol.steps.warm > li::before,
ol.steps.mint > li::before { background: var(--paper-edge); color: var(--ink); }

.myth > div:nth-child(odd),
.myth > div:nth-child(even) { background: var(--paper); }

/* one ink for every line on the reading pages */
.wrap p, .wrap li, .wrap small, .wrap td, .wrap th, .wrap strong, .wrap em,
.wrap h2, .wrap h3, .wrap summary, .wrap .myth .head, .wrap .myth p,
.ba-wrap p, .ba-wrap li, .ba-wrap small, .ba-wrap strong, .ba-wrap em,
.ba-wrap h2, .ba-wrap h3, .ba-wrap .ba-count, .ba-wrap .ba-num,
.tiles-head p { color: var(--ink); }

/* the two exceptions */
.wrap a, .ba-wrap a { color: var(--accent-dk); }
.redflag         { background: #fff1ec; border-left-color: var(--warm); color: #7d4028; }
.redflag strong  { color: #8f3f22; }

/* ==========================================================
   The greeting.

   The line that welcomes you to a page, set exactly as the site's name
   is on the home screen — same script, same size, same ink. It goes on
   one heading per page, and only on pages that have been reviewed, so
   it is opted into with a class rather than applied to every h1.

   Only for greetings. Headings that argue rather than welcome — "Why
   box breathing is not here either" — stay in the reading faces, since
   a script face makes an argument harder to follow.
   ========================================================== */
h1.greeting,
.tiles-head h1.greeting,
.v1-hero h1.greeting {
  font-family: "Apple Chancery", "Segoe Script", "Lucida Handwriting", cursive,
               "Iowan Old Style", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(27px, 6vw, 34px);
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--outer);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* One step down, for the pages inside the site rather than its two front
   doors. The stroke is there because a script face loses weight faster
   than a plain one as it shrinks — without it, 30px reads thinner than
   34px rather than simply smaller. */
h1.greeting.sm,
.tiles-head h1.greeting.sm {
  font-size: clamp(24px, 5.2vw, 30px);
  letter-spacing: .02em;
  -webkit-text-stroke: .45px var(--outer);
}

/* ==========================================================
   The house typeface for headings and labels.

   Serif italic, the same as the home page. It goes on pages one at a
   time by adding class="typeset" to the body, so a page is only
   affected once it has been looked at and approved.

   Paragraphs are deliberately left out. Everything below is a label or
   a heading — a few words you glance at. Italic serif is measurably
   slower to read across long passages, and Understanding, Sources and
   the step-by-step plan are long.
   ========================================================== */
.typeset h1,
.typeset h2,
.typeset h3,
.typeset .tile .tlabel,
.typeset .after-tile .alabel,
.typeset .ba-num,
.typeset details > summary,
.typeset .wk-toggle {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* One ink for everything outside the circles — the name, "Just Tap.",
   the line under it, both cards and the footnote. A muted plum-taupe
   that belongs to neither circle, so it does not tip the page towards
   one door or the other. Size carries the hierarchy instead of colour. */
:root { --outer: #5F5259; }

/* The script faces are the ones already installed on the machine, so
   nothing is downloaded and nothing waits on the network. Apple has
   Chancery, Windows has Segoe Script; anything else falls back to its
   own cursive, and then to the site's serif. */
.splash-brand {
  position: absolute;
  top: 26px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  font-family: "Apple Chancery", "Segoe Script", "Lucida Handwriting", cursive,
               "Iowan Old Style", Georgia, serif;
  font-weight: 400;
  font-size: clamp(27px, 6vw, 34px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--outer);
  text-decoration: none;
  align-items: center;

  /* The body turns on antialiased smoothing, which on macOS renders text
     thinner and lighter than the default. On a script face, whose strokes
     are already thin, it bleaches the name — same colour, same size, but
     visibly paler than it should be. These two lines put the weight back. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* the two doors */
/* The spacing is set against the gap between the pale RIMS, not between
   the circles. Each rim juts 6.5% past its circle, so about 21px of any
   gap is swallowed before the eye sees any daylight at all. Tuning the
   circle gap directly overshoots badly. This leaves roughly 10px rim to
   rim on a phone, down from about 15px.

   The width is derived from the room actually left over rather than
   being a flat 41vw. The old way asked for more than the row could hold
   at every phone width, so the browser shrank the doors to fit — and it
   shrinks width only, never height, which quietly turned both circles
   into slight ovals. Sizing them from what remains means they never have
   to be squeezed, hence flex: 0 0 auto below.

   100% here, not 100vw: .circles now spans the content box, so the sum
   cannot be thrown out by a desktop scrollbar the way a viewport unit
   would be. */
.circles {
  /* The ceiling stays at the old 76px and the cap at the old 174px on
     purpose. Both only come into play on wide screens, so the desktop
     layout is left pixel for pixel as it was — the complaint was about
     the phone, and nothing else should move. Below roughly 970px the
     7.8vw takes over and closes the gap. */
  --gap: clamp(24px, 7.8vw, 76px);
  --cap: 174px;

  display: flex;
  gap: var(--gap);
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 480px;
}

.door {
  position: relative;
  flex: 0 0 auto;
  width: min(var(--cap), calc((100% - var(--gap)) / 2));
  /* aspect-ratio, not a matching height: a percentage height resolves
     against the parent's height, which is not what we mean here. This
     ties the height to the width itself, so it is a circle by
     construction and cannot drift into an oval again. */
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12%;
  text-decoration: none;
  z-index: 1;
  transition: transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.door:active { transform: scale(.96); }

/* A paler circle of the door's own colours, concentric, showing an even
   rim all the way round rather than a crescent off to one side. */
/* inset, not width — an absolutely positioned box with no offsets sits
   at the top-left corner, which hangs the halo up and to the left of
   the circle instead of evenly around it. -6.5% on every side is the
   same 113% overall, centred. */
.rim {
  position: absolute;
  inset: -6.5%;
  border-radius: 50%;
  z-index: -2;
}
.door-now  .rim { background: linear-gradient(150deg, #F6E5DA, #EFD4C2); }
.door-work .rim { background: linear-gradient(150deg, #EBE3EA, #DFD3DF); }

/* Terracotta and mauve, and no white text anywhere. The old labels were
   white on pastel, which measured 1.5:1 — these clear 7:1.

   No inset white glow either. It was left over from the old pastel doors
   and it bleached the bottom half of both circles, which is why they came
   out looking like cream rather than terracotta. */
.door-now  { background: linear-gradient(150deg, #F0DBD0, #E8C9B8); }
.door-work { background: linear-gradient(150deg, #E6DCE4, #DACFDC); }

/* Both labels in the same ink as the name above them, so the whole
   screen is written in one voice. Measured against the circles they sit
   on: 5.5:1 at the pale end of each, 4.8:1 at the deepest point. */
.door-title {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(17px, 4.6vw, 23px);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.18;
  color: var(--outer);
  white-space: nowrap;   /* "Let's Work" must not break into three lines */
  -webkit-font-smoothing: auto;   /* same reason as the name above */
  -moz-osx-font-smoothing: auto;
}

/* expanding calm rings */
/* The rings leave from the rim, not from the circle itself — centred the
   same way, and on their own shorter travel. The old one grew to 1.72,
   which from the rim outward was wide enough for the two doors' rings to
   collide in the middle and pass behind "Just Tap." */
.pulse {
  position: absolute;
  inset: -6.5%;
  border-radius: 50%;
  border: 2px solid rgba(186,112,80,.42);
  animation: doorring 3.6s cubic-bezier(.22,.7,.3,1) infinite;
  z-index: -1;
}
@keyframes doorring {
  0%   { transform: scale(.94); opacity: .6; }
  100% { transform: scale(1.34); opacity: 0; }
}
.door-work .pulse { border-color: rgba(124,98,136,.38); }
.pulse.d2 { animation-delay: 1.2s; }
.pulse.d3 { animation-delay: 2.4s; }

.door-work .pulse {
  border-color: rgba(123,108,196,.30);
  animation-duration: 5.4s;
}

@keyframes pulsering {
  0%   { transform: scale(1);    opacity: .55; }
  100% { transform: scale(1.72); opacity: 0; }
}

.splash-hint {
  margin: 30px 0 0;
  font-size: 15px;
  color: var(--outer);
  letter-spacing: .01em;
}
.splash-tag {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--outer);
}

/* second option — the not-right-now path */
.or-line {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(92vw, 400px);
  margin: 30px 0 18px;
  color: var(--ink-faint);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.or-line::before, .or-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,108,196,.28), transparent);
}

.big-option {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(92vw, 400px);
  text-decoration: none;
  background: linear-gradient(135deg, #dff3ea 0%, #ddeafd 55%, #e9e2fc 100%);
  border: 1px solid rgba(123,108,196,.16);
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow: 0 6px 22px rgba(123,108,196,.16);
  transition: transform .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.big-option:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(123,108,196,.22); }
.big-option:active { transform: scale(.98); }
.big-option .oico {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  font-size: 27px;
  flex: none;
}
.big-option .otext { text-align: left; }
.big-option b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1.25;
}
.big-option small {
  display: block;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.big-option .arrow { margin-left: auto; color: var(--accent); font-size: 22px; flex: none; }

/* clearly visible secondary links */
.home-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(92vw, 400px);
  /* Was 12px. Opened up so "Just Tap." and the line under it read as
     their own thing rather than running straight into the two boxes.
     The short-screen query below deliberately does not follow this —
     see the note there. */
  margin-top: 44px;
}
.home-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 16px 12px;
  box-shadow: 0 3px 12px rgba(123,108,196,.10);
  transition: transform .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.home-card:hover { transform: translateY(-2px); border-color: var(--lav-mid); }
.home-card .hico { display: flex; line-height: 1; }
.home-card .hico svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-card span.ht {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  color: var(--outer);
  text-align: center;
  line-height: 1.32;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.home-card span.hsub {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--outer);
  text-align: center;
  margin-top: -2px;
}

.splash-foot {
  /* Was 26px, moved with the boxes above it so the statement keeps its
     own space rather than being crowded by them. */
  margin: 52px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--outer);
  max-width: 400px;
}
.splash-foot a { color: var(--outer); }

@media (max-height: 760px) {
  /* Only the ceiling moves. Setting width and height here directly would
     reintroduce the squeeze the rule above exists to prevent. 178px is
     what this query already allowed, kept so short desktop windows look
     exactly as they did. */
  .circles { --cap: 178px; }
  .splash-hint { margin-top: 16px; font-size: 15px; }

  /* These stay tight on purpose and do NOT follow the 44/52 above.
     Home is the one page that must never need scrolling — someone
     reaching for it mid-panic should see all of it at once. On a screen
     this short the extra air would push the closing statement, and on
     the smallest phones the boxes themselves, below the fold. Space is
     the first thing to give up here. */
  .home-cards { margin-top: 18px; }
  .splash-foot { margin-top: 18px; font-size: 11.5px; }
}

/* ==========================================================
   TILES — the immediate-help grid
   ========================================================== */

/* The bar stays put. On a long page the way out used to scroll away
   entirely, which is the last thing someone struggling should have to
   go looking for. Alignment is unchanged — back left, help right. */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  max-width: 900px;
  margin: 0 auto;
  position: sticky;
  top: 0;
  z-index: 50;                       /* under the player, which is 200 */
}
/* a full-width backdrop behind a bar that is itself centred and capped */
.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: rgba(251, 248, 255, .88);
  border-bottom: 1px solid var(--line);
  z-index: -1;
}
@supports (backdrop-filter: blur(10px)) {
  .topbar::before {
    background: rgba(251, 248, 255, .72);
    backdrop-filter: blur(12px);
  }
}
/* A pill rather than a circle, because it now says where it goes.
   An unlabelled arrow promises nothing; a labelled one has to be right,
   which is why the destinations were checked against the live links
   before any of these names were written. */
.topbar .back {
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 0 16px 0 13px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 20px;
  flex: none;
  white-space: nowrap;
}
.topbar .back .bt { font-size: 14.5px; font-weight: 500; }
.topbar .spacer { margin-left: auto; }
/* solid rather than the old soft gradient — it needs to be findable
   at a glance, without shouting like an alarm on every page */
.topbar .sos {
  background: var(--warm);
  color: #fff;
  border: 1px solid var(--warm);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .16s ease, border-color .16s ease;
}
.topbar .sos:hover { background: var(--warm-dk); border-color: var(--warm-dk); }
.topbar .sos:active { transform: scale(.97); }

.tiles-head {
  text-align: center;
  padding: 6px 24px 26px;
}
.tiles-head h1 {
  font-size: clamp(26px, 7vw, 36px);
  margin: 0 0 6px;
}
.tiles-head p {
  color: var(--ink-faint);
  font-size: 16.5px;
  margin: 0;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.tile {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  padding: 22px 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 158px;
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tile:active { transform: scale(.97); }
a.tile { text-decoration: none; }

.tile .tico {
  width: 62px; height: 62px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  line-height: 1;
}
/* The eight exercise titles all read the same way — same face, same
   weight, same ink as "Instant Help" on the home page. Not scoped to
   .typeset: these were approved as a set, page headings separately. */
.tile .tlabel {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  color: var(--outer);
  letter-spacing: -.01em;
  text-align: center;
  line-height: 1.25;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.tile .tsub {
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.3;
  margin-top: -6px;
  letter-spacing: .005em;
}

.tile.t-lav   { background: linear-gradient(160deg,#f7f3ff,#fff 65%); }
.tile.t-lav   .tico { background: var(--lav); }
.tile.t-sky   { background: linear-gradient(160deg,#f0f7ff,#fff 65%); }
.tile.t-sky   .tico { background: var(--sky); }
.tile.t-mint  { background: linear-gradient(160deg,#eefaf5,#fff 65%); }
.tile.t-mint  .tico { background: var(--mint); }
.tile.t-peach { background: linear-gradient(160deg,#fff4ed,#fff 65%); }
.tile.t-peach .tico { background: var(--peach); }
.tile.t-blush { background: linear-gradient(160deg,#fff1f6,#fff 65%); }
.tile.t-blush .tico { background: var(--blush); }

.tiles-foot {
  text-align: center;
  padding: 0 24px 60px;
}
.tiles-foot a {
  font-size: 15.5px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

@media (min-width: 620px) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .tile { min-height: 168px; }
}
@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================
   PLAYER — fullscreen activity
   ========================================================== */

.player {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  animation: fadein .22s ease;
  overflow: hidden;
}
.player[hidden] { display: none; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.player[data-theme="lav"]   { background: linear-gradient(165deg,#f4efff,#eaf2ff 60%,#f7f3ff); }
.player[data-theme="sky"]   { background: linear-gradient(165deg,#eaf4ff,#f2f8ff 60%,#eefaf7); }
/* Step two has its own ground. The blue of the other screens pulls all
   six tiles cold; this is neutral — lilac, to aqua, to a warm cream —
   so each colour reads as itself. */
.player[data-theme="after"]  { background: linear-gradient(168deg,#FDF6F8 0%,#FBF3F6 45%,#F7F4FA 100%); }

/* Paced Breathing, in the colour of the tile you tapped to get here.
   It used to open in lavender while its tile was rose, so the screen
   looked like it belonged to something else. */
.player[data-theme="rose"]   { background: linear-gradient(165deg,#FDF6F8,#FBF1F4 60%,#FAF4F2); }
.player[data-theme="rose"] .orb-big {
  background: radial-gradient(circle at 32% 28%, #fff 0%, #F7DBE2 42%, #EFC4CF 100%);
  box-shadow:
    0 0 0 18px rgba(247,219,226,.55),
    0 0 0 40px rgba(247,219,226,.34),
    0 0 0 66px rgba(247,219,226,.18);
}
/* Grounding, in the colour of the tile you tapped to get here — the same
   move as Paced Breathing above. It had been opening mint, which belongs
   to Jacobson's and Meditation, not to this. Everything on the screen is
   re-inked to sit on the mauve rather than on white. */
.player[data-theme="mauve"] { background: linear-gradient(165deg,#FAF7FA,#F7F3F8 60%,#F6F4FA); }

.player[data-theme="mauve"] .tapdot {
  border-color: #C9B6CC;
  color: #8A6E90;
  box-shadow: 0 3px 10px rgba(122,98,132,.16);
}
.player[data-theme="mauve"] .tapdot:not(.on) { animation: dotbeckonmauve 2.4s ease-in-out infinite; }
@keyframes dotbeckonmauve {
  0%, 100% { box-shadow: 0 3px 10px rgba(122,98,132,.16), 0 0 0 0 rgba(201,182,204,.55); }
  50%      { box-shadow: 0 3px 10px rgba(122,98,132,.16), 0 0 0 10px rgba(201,182,204,0); }
}
.player[data-theme="mauve"] .tapdot.on {
  background: linear-gradient(140deg, #C8A9CE, #A98FB6);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(138,110,144,.42);
}

/* the count is large text, so 3:1 is its floor — #A98FB6 measured 2.6 */
.player[data-theme="mauve"] .bignum      { color: #9575A3; }
.player[data-theme="mauve"] .bigword,
.player[data-theme="mauve"] .tally       { color: #4C3A50; }
.player[data-theme="mauve"] .tally small { color: #7A6280; }
.player[data-theme="mauve"] .warm-banner { color: #6B5570; }
.player[data-theme="mauve"] .cantfind,
.player[data-theme="mauve"] .cantfind-go { color: #7A6280; }
.player[data-theme="mauve"] .steadier.s3 { color: #493052; background: rgba(230,220,228,.85); }

/* bigger than it was — text and padding together, so the tap target grows
   too, which is what matters when someone's hands are unsteady */
.player[data-theme="mauve"] .sense-next {
  background: rgba(230,220,228,.9);
  color: #4C3A50;
  font-size: 17px;
  padding: 11.3px 22.5px;
}
.player[data-theme="mauve"] .sense-next:hover,
.player[data-theme="mauve"] .sense-next:focus-visible { background: #DACFDC; }

/* Everything reached from step two keeps the colour of the door, so the
   ring, the big word and the small counts have to work on rose and on
   mauve as well as on the screens they were drawn for. */
.player[data-theme="rose"]  .ring .ring-fg  { stroke: #E3A9B8; }
.player[data-theme="rose"]  .ring .ringnum  { fill: #8E4B60; }
.player[data-theme="rose"]  .warm-line      { color: #8A6570; }
.player[data-theme="rose"]  .bigbtn small,
.player[data-theme="rose"]  .cycle-count    { color: #9C6072; }

.player[data-theme="mauve"] .ring .ring-fg  { stroke: #BFA5C6; }
.player[data-theme="mauve"] .ring .ringnum  { fill: #4C3A50; }
.player[data-theme="mauve"] .warm-line      { color: #6B5570; }
.player[data-theme="mauve"] .bigbtn small,
.player[data-theme="mauve"] .cycle-count    { color: #7A6280; }

/* the count was white on purple; on rose it needs the tile's deep ink */
.player[data-theme="rose"] .orb-big span { color: #8E4B60; text-shadow: none; }
.player[data-theme="rose"] .bigword      { color: #8E4B60; }
.player[data-theme="rose"] .breathe-intro,
.player[data-theme="rose"] .pattern-desc { color: #8A6570; }

/* Once it has warmed all the way up at three minutes, it takes a deeper
   rose than the tile's own, so it stands out against a screen that is
   otherwise all pale rose. 8.4:1. The two faint stages before it are
   untouched — the whole point is that it arrives quietly. */
.player[data-theme="rose"] .steadier.s3 {
  color: #6E3548;
  background: rgba(247, 219, 226, .85);
}
.player[data-theme="mint"]  { background: linear-gradient(165deg,#e9f9f2,#f3fbf7 60%,#f4f2ff); }
.player[data-theme="peach"] { background: linear-gradient(165deg,#fff1e8,#fff6f0 60%,#fdeef4); }
.player[data-theme="blush"] { background: linear-gradient(165deg,#fff0f5,#fdf3fb 60%,#f5f1ff); }

.player-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  flex: none;
}
.player-close {
  appearance: none;
  border: 1px solid rgba(123,108,196,.18);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 10px 20px 10px 15px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  -webkit-tap-highlight-color: transparent;
}
.player-close:active { transform: scale(.96); }
/* On the six reached from step two the title sits in the middle.

   This used to be a flex row with a fixed 104px spacer opposite the back
   button — fine while that button was a 42px circle, wrong the moment it
   became a pill carrying a destination name, which can be twice as wide.
   The title drifted right by however much the two disagreed.

   A three-column grid removes the guesswork: minmax(0,1fr) on both sides
   forces the outer columns to exactly the same width whatever the button
   is doing, so the middle column is the true centre and stays there if
   the wording ever changes again. */
.player.from-after .player-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.player.from-after .player-close { justify-self: start; }
.player.from-after .player-title {
  margin-left: 0;
  padding-right: 0;
  text-align: center;
  min-width: 0;          /* let it wrap rather than push the grid wider */
}

/* The stage centres what is in it, so the space under the header is
   whatever happens to be left over — on these six that came out as a
   wide, empty band. Lifting the whole stack closes it without leaving
   the ring and the text sitting low.

   Not the writing pad: that one fills its whole area rather than sitting
   in the middle of it, so lifting it pushed its top edge up behind the
   header and cut the frame off. */
/* Each of the six placed on its own, banner and content separately,
   because the amount of empty space under the header depends entirely
   on how much that particular screen has on it. Calming Words has one
   sentence and needed 140; the writing pad fills its page and needs
   nothing. The numbers came from looking at each one. */
.player.from-after .player-stage[data-act="water"]    > .warm-banner { transform: translateY(-55px); }
.player.from-after .player-stage[data-act="water"]    > *:not(.warm-banner) { transform: translateY(-20px); }
.player.from-after .player-stage[data-act="cold"]     > .warm-banner { transform: translateY(-40px); }
.player.from-after .player-stage[data-act="cold"]     > *:not(.warm-banner) { transform: translateY(-15px); }
.player.from-after .player-stage[data-act="move"]     > .warm-banner { transform: translateY(-50px); }
.player.from-after .player-stage[data-act="move"]     > *:not(.warm-banner) { transform: translateY(-30px); }
.player.from-after .player-stage[data-act="music"]    > .warm-banner { transform: translateY(-5px); }
.player.from-after .player-stage[data-act="music"]    > *:not(.warm-banner) { transform: translateY(-10px); }
.player.from-after .player-stage[data-act="words"]    > .warm-banner { transform: translateY(-140px); }
.player.from-after .player-stage[data-act="words"]    > *:not(.warm-banner) { transform: translateY(-40px); }
/* the writing pad fills its own area and is left exactly where it falls */

/* Calming Words — the phrase, and its two faint neighbours */
.player-stage[data-act="words"] > .warm-banner { margin-bottom: 6px; }
.player-stage[data-act="words"] > .phrase { font-size: clamp(32px, 9vw, 54px); max-width: 17ch; }
.wghost {
  font-size: 19px;
  line-height: 1.4;
  opacity: .32;
  max-width: 22ch;
  transition: opacity .6s ease, transform .6s ease;
}
.wghost.out { opacity: 0; transform: translateY(-10px); }
.player-stage[data-act="words"] > .wghost:first-of-type { margin-bottom: 18px; }
.player-stage[data-act="words"] > .wghost:last-of-type  { margin-top: 18px; }
.player[data-theme="rose"]  .phrase, .player[data-theme="rose"]  .wghost { color: #8E4B60; }
.player[data-theme="mauve"] .phrase, .player[data-theme="mauve"] .wghost { color: #4C3A50; }

.player-title {
  margin-left: auto;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-right: 6px;
}

/* The back button now carries a destination name, so on a small phone the
   header holds two pieces of text instead of one. These shrink both before
   anything collides. If it still runs out of room the title wraps to a
   second line rather than overlapping the button — an ugly wrap is
   recoverable, two overlapping labels are not. */
@media (max-width: 430px) {
  .player-head { padding: 14px 12px; gap: 8px; }
  .player-close { font-size: 14px; padding: 9px 14px 9px 11px; gap: 5px; }
  .player-title { font-size: 12.5px; letter-spacing: .06em; }
}
@media (max-width: 360px) {
  .player-close { font-size: 13px; padding: 9px 12px 9px 10px; }
  .player-title { font-size: 11.5px; letter-spacing: .04em; }
}

.player-stage {
  position: relative;          /* so the disclaimer chip can sit in the corner */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 22px 40px;
  text-align: center;
  gap: 0;
  overflow-y: auto;
}

/* big single word */
.bigword {
  font-size: clamp(32px, 9vw, 52px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--accent-dk);
  line-height: 1.1;
  min-height: 1.15em;
  transition: opacity .35s ease;
}
.subword {
  font-size: clamp(16px, 4.4vw, 20px);
  color: var(--ink-faint);
  margin-top: 12px;
  letter-spacing: .01em;
}

/* breathing orb, player version */
.orb-wrap {
  height: min(46vh, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex: none;
}
.orb-big {
  width: min(34vw, 150px);
  height: min(34vw, 150px);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, var(--lav-mid) 42%, var(--sky-mid) 100%);
  box-shadow:
    0 0 0 18px rgba(201,189,243,.20),
    0 0 0 40px rgba(182,214,247,.14),
    0 0 0 66px rgba(168,224,203,.09);
  display: flex;
  align-items: center;
  justify-content: center;
  /* A breath is not a constant speed — it starts slowly, moves through the
     middle, and eases off at the top. A linear circle sets a pace no chest
     can match, which is most of why it was hard to follow. */
  transition: transform 1s cubic-bezier(.37, 0, .63, 1);
}
.orb-big span {
  font-size: clamp(30px, 8vw, 42px);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(92,79,163,.35);
}

.mini-pills {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
.mini-pills button {
  appearance: none;
  font-family: inherit;
  font-size: 14.5px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: rgba(255,255,255,.7);
  color: var(--ink-faint);
  cursor: pointer;
}
.mini-pills button.on {
  background: #fff;
  border-color: var(--lav-mid);
  color: var(--accent-dk);
  font-weight: 650;
}

/* countdown ring */
.ring-wrap {
  position: relative;
  width: min(62vw, 260px);
  height: min(62vw, 260px);
  margin-bottom: 26px;
  flex: none;
}
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.ring .ring-bg { stroke: rgba(255,255,255,.75); }
.ring .ring-fg { stroke: var(--lav-mid); transition: stroke-dashoffset .28s linear; }
.player[data-theme="sky"]   .ring .ring-fg { stroke: var(--sky-mid); }
.player[data-theme="mint"]  .ring .ring-fg { stroke: var(--mint-mid); }
.player[data-theme="peach"] .ring .ring-fg { stroke: var(--peach-mid); }

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ring-emoji { font-size: clamp(42px, 12vw, 62px); line-height: 1; }
/* The guided exercises hold a living mark here now rather than a glyph —
   the same one, with the same motion, as the tile that was tapped. */
.ring-emoji svg {
  width: clamp(46px, 13vw, 64px);
  height: auto;
  display: block;
  margin: 0 auto 2px;
}
.mnote svg { width: 56px; height: 56px; display: block; }
.player[data-theme="rose"]  .ring-emoji { color: #C97E96; }
.player[data-theme="mauve"] .ring-emoji { color: #9E7B9A; }
.ring-num {
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 700;
  color: var(--accent-dk);
  font-variant-numeric: tabular-nums;
}

/* tap dots for 5-4-3-2-1 */
.tapdots {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.tapdot {
  position: relative;
  appearance: none;
  border: 3px solid var(--lav-mid);
  background: #fff;
  width: clamp(58px, 16vw, 72px);
  height: clamp(58px, 16vw, 72px);
  border-radius: 50%;
  cursor: pointer;
  font-size: 30px;
  font-weight: 700;
  color: var(--lav-mid);
  transition: transform .25s cubic-bezier(.34,1.6,.64,1), background .25s ease, border-color .25s ease, color .25s ease;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(123,108,196,.14);
  -webkit-tap-highlight-color: transparent;
}
.tapdot:active { transform: scale(.88); }

/* unticked dots gently breathe so it's obvious they're tappable */
.tapdot:not(.on) { animation: dotbeckon 2.4s ease-in-out infinite; }
@keyframes dotbeckon {
  0%, 100% { box-shadow: 0 3px 10px rgba(123,108,196,.14), 0 0 0 0 rgba(201,189,243,.55); }
  50%      { box-shadow: 0 3px 10px rgba(123,108,196,.14), 0 0 0 10px rgba(201,189,243,0); }
}

.tapdot.on {
  background: linear-gradient(140deg, #8ad9bd, #7fc3ea);
  border-color: transparent;
  color: #fff;
  transform: scale(1.1);
  animation: dotpop .42s cubic-bezier(.34,1.7,.5,1);
  box-shadow: 0 6px 18px rgba(107,190,175,.42);
}
@keyframes dotpop {
  0%   { transform: scale(.85); }
  55%  { transform: scale(1.26); }
  100% { transform: scale(1.1); }
}

/* the running tally — the visible "something happened" signal */
.tally {
  margin-top: 22px;
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 650;
  color: var(--accent-dk);
  letter-spacing: -.01em;
  transition: transform .25s cubic-bezier(.34,1.7,.5,1);
}
.tally.bump { transform: scale(1.16); }
.tally small { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink-faint); margin-top: 4px; letter-spacing: 0; }

.senseicon { font-size: clamp(38px, 10vw, 54px); line-height: 1; margin-bottom: 8px; }
/* the grounding marks are drawn now, so the box holds an svg rather than
   a glyph — same footprint, so nothing else on the screen moves */
.senseicon svg {
  width: clamp(44px, 11vw, 58px);
  height: auto;
  display: block;
  margin: 0 auto;
}
.player[data-theme="mauve"] .senseicon { color: #9575A3; }
.bignum {
  font-size: clamp(46px, 14vw, 74px);
  font-weight: 800;
  line-height: .95;
  color: var(--lav-mid);
  letter-spacing: -.05em;
}
.senserow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  justify-content: center;
}

/* trace-the-hand */
.trace-svg { width: min(88vw, 420px); height: auto; }
.trace-path { fill: none; stroke: rgba(201,189,243,.55); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.trace-dot  { fill: #fff; stroke: var(--accent); stroke-width: 5; filter: drop-shadow(0 3px 10px rgba(123,108,196,.45)); }

/* phrase cards */
.phrase {
  font-size: clamp(28px, 7.5vw, 44px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--accent-dk);
  max-width: 15ch;
  transition: opacity .6s ease, transform .6s ease;
}
.phrase.out { opacity: 0; transform: translateY(-10px); }

/* big action buttons inside player */
.bigbtns { display: flex; flex-direction: column; gap: 12px; width: min(92vw, 380px); margin-top: 10px; }
.bigbtn {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 20px;
  text-align: left;
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
}
.bigbtn .be { font-size: 26px; flex: none; }
.bigbtn b { display: block; font-weight: 650; }
.bigbtn small { color: var(--ink-faint); font-size: 14.5px; }

/* ---- warm companion messages ---- */

.warm-banner {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 18px;
  padding: 14px 22px;
  margin-bottom: 22px;
  max-width: 460px;
  font-size: clamp(15px, 4vw, 17px);
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 500;
  box-shadow: 0 3px 14px rgba(123,108,196,.10);
  flex: none;
}

.warm-line {
  font-size: clamp(15px, 4.2vw, 18px);
  color: var(--ink-soft);
  margin-top: 14px;
  max-width: 420px;
  line-height: 1.5;
  transition: opacity .4s ease;
}

/* ---- calming music ---- */

.music-viz {
  position: relative;
  width: min(52vw, 210px);
  height: min(52vw, 210px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  flex: none;
}
.music-viz .mnote {
  font-size: clamp(40px, 11vw, 56px);
  z-index: 1;
  opacity: .55;
  transition: opacity .5s ease;
}
.music-viz.on .mnote { opacity: 1; }

.music-viz .mring {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 2px solid rgba(123,108,196,.30);
  opacity: 0;
}
.music-viz.on .mring {
  animation: mpulse 5.2s cubic-bezier(.24,.7,.3,1) infinite;
}
.music-viz.on .mring.m2 { animation-delay: 1.75s; }
.music-viz.on .mring.m3 { animation-delay: 3.5s; }

@keyframes mpulse {
  0%   { transform: scale(.72); opacity: .0; }
  22%  { opacity: .5; }
  100% { transform: scale(1.5); opacity: 0; }
}

.music-viz::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  /* was --sky-mid: a blue orb that stayed blue whatever the exercise
     wore, for the same reason as the thumb above. */
  background: radial-gradient(circle at 34% 30%, #fff, var(--lav-mid) 68%, #a892d6);
  opacity: .55;
  transition: transform 3s ease-in-out, opacity .6s ease;
}
.music-viz.on::before { animation: mbreathe 8s ease-in-out infinite; opacity: .8; }
@keyframes mbreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.music-controls { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }

.mini-pills.sounds {
  max-width: 460px;
  margin-top: 0;
  margin-bottom: 24px;
}
.mini-pills.sounds button {
  font-size: 14.5px;
  padding: 10px 16px;
  background: rgba(255,255,255,.75);
}
.mini-pills.sounds button.on {
  background: #fff;
  border-color: var(--sky-mid);
  color: var(--accent-dk);
  box-shadow: 0 2px 10px rgba(123,108,196,.16);
}

.playbtn {
  appearance: none;
  font-family: inherit;
  font-size: 18px;
  font-weight: 650;
  color: #fff;
  background: linear-gradient(135deg, #8a7bd0, var(--accent));
  border: none;
  border-radius: 999px;
  padding: 14px 42px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(123,108,196,.30);
  -webkit-tap-highlight-color: transparent;
}
.playbtn:active { transform: scale(.96); }

.vol {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.vol input {
  -webkit-appearance: none;
  appearance: none;
  width: min(52vw, 200px);
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  outline: none;
}
.vol input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--lav-mid);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(123,108,196,.35);
}
.vol input::-moz-range-thumb {
  width: 22px; height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--lav-mid);
  cursor: pointer;
}

/* ---- draw or write pad ---- */

.player-stage.stage-canvas {
  justify-content: flex-start;
  padding: 4px 14px 18px;
  overflow: hidden;
}

.pad-hint {
  font-size: 14.5px;
  color: var(--ink-faint);
  margin-bottom: 10px;
  flex: none;
}

.pad-wrap {
  flex: 1;
  width: 100%;
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  /* faint ruled-notebook feel */
  background-image: repeating-linear-gradient(180deg, transparent, transparent 33px, rgba(123,108,196,.07) 33px, rgba(123,108,196,.07) 34px);
}

.pad {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  transition: opacity .28s ease;
}

/* typing layer, sits over the drawing so you can do both */
.padtext {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: inherit;
  font-size: 19px;
  line-height: 34px;      /* matches the ruled lines */
  padding: 8px 20px;
  color: #0aa5a5;
  pointer-events: none;
  caret-color: currentColor;
  transition: opacity .28s ease;
}
.padtext::placeholder { color: rgba(141,135,163,.65); }

.pad-wrap.writing .padtext { pointer-events: auto; }
.pad-wrap.writing .pad { pointer-events: none; }
.pad-wrap.writing { box-shadow: var(--shadow), 0 0 0 2.5px var(--lav-mid); }

.pad-wrap.wiping .pad,
.pad-wrap.wiping .padtext { opacity: 0; }

.pad-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
  flex: none;
}

.mode-switch {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.mode-switch button {
  appearance: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.mode-switch button.on {
  background: #fff;
  color: var(--accent-dk);
  box-shadow: 0 1px 5px rgba(59,53,82,.14);
}

/* twelve inks now — six bold, six pastel — so they wrap onto two rows */
.swatches {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  /* exactly six across, so all four rows line up under each other */
  max-width: 258px;
}

.swatch {
  appearance: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid transparent;
  box-shadow: 0 2px 8px rgba(59,53,82,.18);
  cursor: pointer;
  padding: 0;
  transition: transform .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.swatch:hover { transform: scale(1.08); }
.swatch.on { border-color: #fff; transform: scale(1.18); box-shadow: 0 0 0 2px rgba(123,108,196,.5), 0 2px 8px rgba(59,53,82,.20); }

/* Three deliberate rows rather than one that wraps: the Draw/Write
   toggle, the swatch grid, then the three actions at a matched width so
   they read as a set instead of three different-sized pills. */
.pad-tools {
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pad-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
}
.padclear, .padsave, .padpast { min-width: 118px; justify-content: center; }
.padclear, .padsave, .padpast {
  appearance: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.padsave {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.padclear:active, .padsave:active, .padpast:active { transform: scale(.96); }

.pad-said {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: var(--accent-dk);
  min-height: 20px;
  opacity: 0;
  transition: opacity .3s ease;
}
.pad-said.show { opacity: 1; }
.pad-said.bad { color: var(--warm-dk); }

/* what has been written before.
   The [hidden] guard below is not optional: an author "display" rule beats
   the browser's own [hidden] rule, so without it this panel sits over the
   whole pad permanently and the person cannot get back to writing. */
.jrn[hidden] { display: none; }
.jrn {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 26px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.jrn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}
.jrn-head h3 { margin: 0; font-size: 19px; color: var(--ink); }
.jrn-x {
  appearance: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.jrn-note {
  margin: 10px 0 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
}
.jrn-empty {
  margin: 30px auto 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-faint);
  text-align: center;
}
.jrn-warn {
  margin: 26px auto 0;
  max-width: 46ch;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--peach);
  border: 1px solid var(--line-warm);
  text-align: left;
}
.jrn-warn p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.jrn-warn strong { color: var(--warm-dk); }
.jrn-list { margin-top: 6px; }
.jrn-day {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 20px 0 8px;
}
.jrn-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}
.jrn-open {
  appearance: none;
  flex: 1;
  text-align: left;
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  cursor: pointer;
  min-width: 0;
}
.jrn-open:active { transform: scale(.995); }
.jrn-when {
  display: block;
  font-size: 13px;
  font-weight: 650;
  color: var(--accent-dk);
}
.jrn-prev {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jrn-del {
  appearance: none;
  width: 42px;
  flex: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  color: var(--ink-faint);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.jrn-del:active { background: var(--blush); color: var(--warm-dk); }

/* ==========================================================
   BEHAVIOURAL ACTIVATION
   ========================================================== */

.ba-wrap { max-width: 820px; margin: 0 auto; padding: 0 20px 70px; }

.ba-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.ba-step > :last-child { margin-bottom: 0; }

.ba-num {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 12px;
}
.ba-num i {
  font-style: normal;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--lav);
  color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}

.ba-cat {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-faint);
  margin: 20px 0 10px;
}
.ba-cat:first-of-type { margin-top: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }

.chip {
  appearance: none;
  font-family: inherit;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: var(--lav-mid); color: var(--ink); }
.chip:active { transform: scale(.95); }
.chip.on {
  background: linear-gradient(135deg, var(--mint), var(--sky));
  border-color: var(--mint-mid);
  color: var(--ink);
  font-weight: 600;
}
.chip .cx { font-size: 16px; line-height: 1; }

/* an activity you added yourself, with a way to take it off again */
.chip-own { display: inline-flex; align-items: stretch; }
.chip-own .chip {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right-width: 0;
  padding-right: 12px;
}
.chip-x {
  appearance: none;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  width: 34px;
  border: 1.5px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 4px 999px 999px 4px;
  background: var(--bg);
  color: var(--ink-faint);
  cursor: pointer;
  transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip-own .chip.on + .chip-x {
  background: linear-gradient(135deg, var(--sky), var(--sky));
  border-color: var(--mint-mid);
  color: var(--ink-soft);
}
.chip-x:hover { background: var(--peach); border-color: var(--peach-mid); color: var(--warm-dk); }
.chip-x:active { transform: scale(.94); }

.ba-add { display: flex; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
.ba-add input {
  flex: 1;
  min-width: 190px;
  font-family: inherit;
  font-size: 16px;
  padding: 11px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
}
.ba-add input:focus { outline: none; border-color: var(--lav-mid); background: #fff; }
.ba-add button {
  appearance: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
  padding: 11px 22px;
  border-radius: 999px;
  border: none;
  background: var(--lav);
  color: var(--accent-dk);
  cursor: pointer;
}

.ba-count { font-size: 15px; color: var(--ink-faint); margin-top: 16px; }

/* daily target stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 9px;
  width: max-content;
  margin-top: 6px;
}
.stepper button {
  appearance: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--accent-dk);
  font-size: 21px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(59,53,82,.12);
  line-height: 1;
}
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper .sv { font-size: 19px; font-weight: 700; min-width: 88px; text-align: center; }

/* today's plan */
.today-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

.today-item {
  display: flex;
  align-items: center;
  gap: 15px;
  background: linear-gradient(135deg, #f7f3ff, #fff 65%);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 15px 18px;
  transition: all .2s ease;
}
.today-item.done {
  background: linear-gradient(135deg, #e6f8f0, #f3fbf8 70%);
  border-color: var(--mint-mid);
}
.today-item .ti-emoji { font-size: 26px; flex: none; line-height: 1; }
.today-item .ti-name { font-size: 17.5px; font-weight: 600; flex: 1; }
.today-item.done .ti-name { color: var(--ink-soft); }

.checkcircle {
  appearance: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2.5px solid var(--lav-mid);
  background: #fff;
  cursor: pointer;
  font-size: 21px;
  color: transparent;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: all .24s cubic-bezier(.34,1.6,.64,1);
  -webkit-tap-highlight-color: transparent;
}
.checkcircle:active { transform: scale(.88); }
.today-item.done .checkcircle {
  background: linear-gradient(140deg, #8ad9bd, #7fc3ea);
  border-color: transparent;
  color: #fff;
  transform: scale(1.06);
}

.swapbtn {
  appearance: none;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 19px;
  cursor: pointer;
  padding: 6px;
  flex: none;
  line-height: 1;
}
.swapbtn:hover { color: var(--accent); }

/* ---- what you did, folded away under the week strip ---- */

.wk-more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }

.wk-toggle {
  appearance: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.85);
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wk-toggle:hover { border-color: var(--lav-mid); color: var(--accent-dk); }
.wk-chev { display: inline-block; font-size: 12px; transition: transform .2s ease; }
.wk-toggle.open .wk-chev { transform: rotate(180deg); }

.wk-panel[hidden] { display: none; }        /* author display beats [hidden] — guard it */
.wk-panel { display: block; padding-top: 14px; }

.wk-modes { display: flex; gap: 7px; margin-bottom: 12px; }
.wk-modes button {
  appearance: none;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  color: var(--ink-faint);
  cursor: pointer;
}
.wk-modes button.on { background: #fff; border-color: var(--lav-mid); color: var(--accent-dk); font-weight: 650; }

/* one line per day — the whole point is that it stays small */
.wk-row { display: flex; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.wk-row:first-of-type { border-top: 0; }
.wk-day { min-width: 62px; font-size: 12.5px; color: var(--ink-faint); flex: none; }
.wk-day.now { color: var(--accent-dk); font-weight: 650; }
.wk-acts { flex: 1; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.wk-none { color: var(--ink-faint); }
.wk-dot  { color: var(--ink-faint); }

.wk-head, .wk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wk-head { margin-bottom: 5px; }
.wk-hd { font-size: 11px; color: var(--ink-faint); text-align: center; }
.wk-cell {
  appearance: none;
  font-family: inherit;
  aspect-ratio: 1;
  padding: 0;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-alt);
  color: var(--ink-faint);
  cursor: pointer;
}
.wk-cell.n1 { background: var(--lav);      color: var(--accent-dk); }
.wk-cell.n2 { background: var(--lav-mid);  color: var(--accent-dk); }
.wk-cell.n3 { background: var(--accent);   color: #fff; border-color: var(--accent); }
.wk-cell.on { outline: 2px solid var(--accent-dk); outline-offset: 1px; }
.wk-detail { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.wk-when { color: var(--ink-faint); }

/* the count, with a way to wipe every choice at once */
.ba-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.ba-count-row .ba-count { margin: 0; flex: 1; min-width: 200px; }

.ba-clear[hidden] { display: none; }      /* author display beats [hidden] — guard it */
.ba-clear {
  appearance: none;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.85);
  color: var(--ink-faint);
  cursor: pointer;
  transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.ba-clear:hover { border-color: var(--peach-mid); background: var(--peach); color: var(--warm-dk); }
.ba-clear:active { transform: scale(.96); }
.ba-clear.undo {
  border-color: var(--accent);
  background: var(--lav);
  color: var(--accent-dk);
}

/* this section can do nothing until step 1 has been filled in, so it should
   say so plainly and offer a way back rather than a vague "above" */
.ba-empty {
  color: var(--ink-soft);
  font-size: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  border: 1px dashed var(--lav-mid);
}
.ba-empty p { margin: 0 0 8px; line-height: 1.6; }
.ba-empty strong { color: var(--accent-dk); }
.ba-empty .ghostbtn { margin-top: 8px; padding: 10px 20px; font-size: 15px; }

/* a brief glow on step 1 when someone is sent back to it */
.ba-flash {
  animation: baFlash 1.8s ease;
}
@keyframes baFlash {
  0%, 100% { box-shadow: var(--shadow); }
  20%, 60% { box-shadow: 0 0 0 3px var(--lav-mid), var(--shadow); }
}

/* week strip */
.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.day { text-align: center; }
.day .dlabel { font-size: 12px; color: var(--ink-faint); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.day .dbar {
  height: 58px;
  border-radius: 12px;
  background: var(--bg-alt);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.day .dfill {
  width: 100%;
  background: linear-gradient(180deg, var(--mint-mid), var(--sky-mid));
  border-radius: 12px;
  transition: height .4s ease;
}
.day .dnum {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.day.today .dbar { box-shadow: 0 0 0 2.5px var(--lav-mid); }

/* ---- the disclaimer chip, and what it opens ---- */

.disc-wrap {
  position: absolute;
  top: 8px;
  right: 18px;
  z-index: 20;
}

.disc-chip {
  appearance: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-faint);
  background: rgba(255,255,255,.8);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.disc-chip:hover { background: #fff; color: var(--ink-soft); }
.disc-chip.open {
  background: var(--peach);
  border-color: var(--peach-mid);
  color: #a8542f;
}

.disc-panel {
  position: absolute;
  top: 50px;
  right: 0;
  width: min(86vw, 380px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 24px 20px;
  box-shadow: 0 12px 44px rgba(60,50,90,.20);
  text-align: left;
  animation: discIn .22s ease;
}
.disc-panel[hidden] { display: none; }

@keyframes discIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.disc-panel h3 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.disc-panel ul {
  margin: 0 0 16px;
  padding-left: 20px;
}
.disc-panel li {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 10px;
  color: var(--ink-soft);
}
.disc-panel li strong { color: var(--ink); }
.disc-panel p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.disc-panel .disc-legal {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-bottom: 16px;
}
.disc-panel .disc-close { margin: 0; padding: 10px 24px; font-size: 15px; }

/* the crisp line, before you press play */
.jpmr-safety {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 34ch;
  margin: 14px auto 0;
  transition: opacity .5s ease, max-height .5s ease, margin .5s ease;
  overflow: hidden;
  max-height: 80px;
}
.jpmr-safety.gone { opacity: 0; max-height: 0; margin-top: 0; }

/* ---- JPMR: guided by voice, so the screen stays calm ---- */

.jpmr-sub {
  min-height: 3.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 30ch;
  font-size: clamp(16px, 4.2vw, 19px);
  color: var(--ink-soft);
}

/* the ring warms while you are holding the tension */
.player-stage.stage-jpmr .ring .ring-fg { transition: stroke .6s ease, stroke-dashoffset .28s linear; }
.player-stage.stage-jpmr.is-tensing .ring .ring-fg { stroke: var(--peach-mid); }

/* scrub back and forth through the session, like a player */
.scrubwrap { width: min(92vw, 440px); margin-top: 24px; }

.scrub {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  outline: none;
  cursor: pointer;
}
.scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  /* was --mint-mid: a green thumb no theme could reach, because the
     colour is named here rather than taken from the player's theme. */
  background: var(--lav-mid);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(90,75,140,.28);
  cursor: pointer;
}
.scrub::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--lav-mid);
  border: 3px solid #fff;
  cursor: pointer;
}
.scrubtime {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

.transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.tbtn {
  appearance: none;
  font-family: inherit;
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: rgba(255,255,255,.85);
  color: var(--ink-soft);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .16s ease, background .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.tbtn small {
  position: absolute;
  bottom: 11px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.tbtn:hover { background: #fff; }
.tbtn:active { transform: scale(.92); }

.tbtn.wide {
  width: auto; height: auto;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
}
.tbtn.wide small { position: static; font-size: inherit; font-weight: inherit; }

.jpmr-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.jpmr-controls .playbtn { padding: 14px 46px; }

.voicebtn {
  appearance: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: rgba(255,255,255,.8);
  color: var(--ink-faint);
  cursor: pointer;
  transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.voicebtn.on {
  background: #fff;
  border-color: var(--mint-mid);
  color: var(--ink);
}
.voicebtn:disabled { opacity: .5; cursor: default; }

/* set the music level to suit the room you're in */
.musicvol {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.musicvol input {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  outline: none;
  cursor: pointer;
}
.musicvol input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--sky-mid);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(90,75,140,.28);
  cursor: pointer;
}
.musicvol input::-moz-range-thumb {
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--sky-mid);
  border: 2.5px solid #fff;
  cursor: pointer;
}
.musicvol input:disabled { opacity: .4; cursor: default; }

/* pick a different voice if the automatic one is not right */
.voicepick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.voicepick select {
  font-family: inherit;
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: rgba(255,255,255,.85);
  cursor: pointer;
  max-width: 190px;
}

/* ---- JPMR progress ---- */

.jpmr-prog {
  width: min(88vw, 420px);
  height: 6px;
  background: rgba(255,255,255,.8);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 26px;
}
.jpmr-bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint-mid), var(--sky-mid));
  transition: width .5s ease;
}
.jpmr-count {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-faint);
  letter-spacing: .02em;
}

/* ---------- meditation ---------- */

/* the circle just sits there and breathes — it is not a progress bar,
   and it is never allowed to look like one */
.player-stage.stage-med .ring .ring-fg { stroke: var(--lav-mid); }
.player-stage.stage-med .ring-wrap.sitting {
  animation: medBreathe 9s ease-in-out infinite;
}
@keyframes medBreathe {
  0%, 100% { transform: scale(1);     opacity: .92; }
  50%      { transform: scale(1.045); opacity: 1;   }
}

.med-sub { max-width: 32ch; }

/* which piece plays underneath — one quiet row, chosen once and remembered */
.med-tracks {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  width: min(88vw, 340px);
  text-align: center;
}
.med-tracks-lab {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 9px;
}
.med-tracks .mini-pills { margin-top: 0; }
.med-tracks .mini-pills button { font-size: 13.5px; padding: 7px 16px; }

/* the clock: small, beside the button, easy to ignore */
.med-transport { margin-top: 26px; gap: 12px; }
.med-tick {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  min-width: 62px;
  text-align: right;
  letter-spacing: .01em;
  transition: color .4s ease;
}
.med-tick.running { color: var(--accent-dk); }
.med-go { min-width: 132px; }
.med-go.is-running {
  background: var(--blush-mid);
  border-color: var(--blush-mid);
}

/* how long you have sat, kept on this device */
.med-record {
  margin-top: 16px;
  text-align: center;
  line-height: 1.5;
}
.med-record b {
  display: block;
  font-size: 16.5px;
  font-weight: 650;
  color: var(--accent-dk);
}
.med-record span {
  display: block;
  font-size: 13.5px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.med-rec-none {
  display: block;
  font-size: 13.5px;
  color: var(--ink-faint);
  max-width: 34ch;
  margin: 0 auto;
}

/* One plain centred line instead of the old white banner box. Removing
   the box is what freed the height that was pushing the top of this
   screen out of reach. */
/* Sits a little higher than the rest of the stack. Pulling it up puts
   clear air between the sentence and the circle, so the reassurance is
   read once and then the circle has the screen to itself. */
.breathe-intro {
  font-size: clamp(15px, 4vw, 17px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 32ch;
  margin: 0 0 clamp(30px, 5.6vh, 56px);
  margin-top: clamp(-56px, -5.6vh, -30px);
  flex: none;
  text-wrap: balance;
}

/* ---------- the quiet way onward ---------- */

/* No box, no border, no arrow. It has to be findable without ever
   competing with the breathing circle for someone's attention, so it
   is the same faint ink the counts and captions already use. */
.steadier {
  appearance: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  background: none;
  border: 0;
  border-radius: 20px;
  padding: 10px 14px;
  margin-top: 26px;
  color: var(--ink-faint);
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 2.5s ease, background 2.5s ease;
}

/* Three stages, over three minutes. The slow transition matters as much
   as the colours: at two and a half seconds nothing appears to happen,
   it is simply more readable than it was a while ago. Measured against
   the palest player background, s1 is 2.2:1, s2 is 3.1:1 and s3 is
   6.2:1 — deliberately below the readable floor at first, since at that
   point it is not information anyone needs, and well above it by the end,
   when it is. */
.steadier.s1 { color: #a8a2bd; }
.steadier.s2 { color: var(--ink-quiet); }   /* the fade-up needs a middle, not the body ink */
.steadier.s3 {
  color: var(--accent-dk);
  background: rgba(216, 242, 231, .72);
}

/* it only confirms it is real once you reach for it */
.steadier:hover,
.steadier:focus-visible { color: var(--accent-dk); }
.steadier:active { color: var(--accent-dk); }

/* ---------- grounding: the other two ways forward ---------- */

.sense-nav {
  display: flex;
  justify-content: flex-end;
  width: min(88vw, 420px);
  margin-top: 20px;
}
.sense-nav[hidden] { display: none; }

.sense-next {
  appearance: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--accent-dk);
  background: rgba(216, 242, 231, .8);
  border: 0;
  border-radius: 20px;
  padding: 9px 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, transform .2s ease;
}
.sense-next:hover,
.sense-next:focus-visible { background: var(--mint-mid); }
.sense-next:active { transform: scale(.96); }

/* the reassurance — readable, but the quietest readable there is */
.cantfind {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-quiet);   /* quiet on purpose — an offer, not a nudge */
  max-width: 30ch;
}
.cantfind[hidden] { display: none; }

.cantfind-go {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease;
}
.cantfind-go:hover,
.cantfind-go:focus-visible,
.cantfind-go:active { color: var(--accent-dk); }

/* ---------- what to do once it is passing ---------- */

/* the whole stack sits 30px higher than it did */
.player-stage.stage-after { justify-content: flex-start; padding-top: 24px; }
.player-stage.stage-after > * { transform: translateY(-30px); }

.after-head { text-align: center; max-width: 40ch; margin: 0 auto 26px; }
.after-head h2 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 4.4vw, 27px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.18;
  margin: 0 0 10px;
  color: #33384a;
}
.after-head p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #7d8294;
  margin: 0;
  max-width: 42ch;
}

/* two phases, not six numbered steps */
.after-cat {
  width: min(92vw, 646px);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: lowercase;
  color: var(--ink-faint);
  margin: 0 0 11px 4px;
  text-align: left;
}
.after-cat + .after-grid { margin-bottom: 22px; }
.after-grid + .after-cat { margin-top: 2px; }

.after-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  width: min(92vw, 646px);
}
/* Three across is the design. On a narrow phone three columns leaves
   about 100px a tile, which turns "Splash cold water on your face"
   into six stacked lines — so below that it drops to two. */
@media (max-width: 520px) {
  .after-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
}

/* Built like the two tiles on Instant Help — same corner, same soft
   shadow, the mark up in the top-left with the text ranged under it.
   Coming here from breathing or grounding, the page now reads as the
   same site continuing rather than a different one starting. */
.after-tile {
  appearance: none;
  font-family: inherit;
  text-align: left;
  border: 0;
  border-radius: 18.5px;
  min-height: 151px;
  box-shadow: 0 6px 22px rgba(123,108,196,.13);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 17px 18px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
  -webkit-tap-highlight-color: transparent;
}
.after-tile:hover  { transform: translateY(-3px); }
.after-tile:active { transform: scale(.97); }

.after-tile .aico   { display: flex; justify-content: flex-start; margin-bottom: 12px; }
.after-tile .aico svg { width: 60px; height: 60px; }
.after-tile .alabel {
  display: block; font-size: 16px; font-weight: 500; letter-spacing: -.015em;
  line-height: 1.18; margin-bottom: 5px;
  /* two lines held on every tile, so a one-line title cannot make its
     row shorter than the row above — the two grids size separately */
  min-height: 2.36em;
}
.after-tile .asub   { display: block; font-size: 12.2px; line-height: 1.45; }

/* One family, rose at the first tile easing to mauve by the last — the
   two colours of the doors you arrive through. Every title clears 4.8:1
   against its ground and every subtitle 4.2:1. */
.a-teal    { background: #F7DBE2; color: #C97E96; }
.a-teal    .alabel { color: #8E4B60; } .a-teal    .asub { color: #96566A; }
.a-peri    { background: #F2DBE0; color: #C08096; }
.a-peri    .alabel { color: #86485A; } .a-peri    .asub { color: #8F5566; }
.a-apricot { background: #EDDBE1; color: #B57F94; }
.a-apricot .alabel { color: #7C4A5E; } .a-apricot .asub { color: #865668; }
.a-sage    { background: #E6DCE4; color: #9E7B9A; }
.a-sage    .alabel { color: #4C3A50; } .a-sage    .asub { color: #59475D; }
.a-rose    { background: #E1DAE9; color: #8C7BA6; }
.a-rose    .alabel { color: #514465; } .a-rose    .asub { color: #5C5071; }
.a-butter  { background: #F2E0DA; color: #C08A78; }
.a-butter  .alabel { color: #7E4A3B; } .a-butter  .asub { color: #8A5749; }

/* ---------- the marks ----------
   Same idea as the two on Instant Help, but slower. Nothing on this
   page should look like it is asking for anything. */
.amk * { transform-box: fill-box; transform-origin: center; }

/* water: the level drops sip by sip, then the glass is full again */
.amk .sipf { animation: aSip 9s ease-in-out infinite; }
@keyframes aSip {
  0%, 8%    { transform: translateY(0);    }
  22%, 30%  { transform: translateY(14px); }
  44%, 52%  { transform: translateY(28px); }
  66%, 88%  { transform: translateY(46px); }
  97%, 100% { transform: translateY(0);    }
}

/* splash: a drop falls, and the rings go out from where it landed */
.amk .spd { transform-box: view-box; animation: aFall 4.2s cubic-bezier(.5,0,.75,.4) infinite; }
@keyframes aFall {
  0%        { transform: translateY(-6px); opacity: 0; }
  8%        { opacity: 1; }
  38%       { transform: translateY(44px); opacity: 1; }
  44%, 100% { transform: translateY(44px); opacity: 0; }
}
.amk .spr  { opacity: 0; animation: aRing 4.2s ease-out infinite; }
.amk .spr2 { animation-delay: .34s; }
@keyframes aRing {
  0%, 40%   { transform: scale(.24); opacity: 0;  }
  48%       { opacity: .85; }
  92%, 100% { transform: scale(1.5); opacity: 0;  }
}

/* move: four steps, one at a time, never hurried */
.amk .mvs { opacity: .16; animation: aStep 7.2s ease-in-out infinite; }
.amk .mv2 { animation-delay: 1.2s; }
.amk .mv3 { animation-delay: 2.4s; }
.amk .mv4 { animation-delay: 3.6s; }
@keyframes aStep {
  0%        { opacity: .16; transform: scale(1);    }
  6%        { opacity: 1;   transform: scale(1.14); }
  40%       { opacity: 1;   transform: scale(1.06); }
  62%, 100% { opacity: .16; transform: scale(1);    }
}

/* music: five bars, each breathing at its own speed */
.amk .mub { animation: aBar 3.6s ease-in-out infinite; }
.amk .mu1 { animation-duration: 3.2s; }
.amk .mu2 { animation-duration: 4.4s; animation-delay: -.7s;  }
.amk .mu3 { animation-duration: 2.9s; animation-delay: -1.4s; }
.amk .mu4 { animation-duration: 4.1s; animation-delay: -.3s;  }
.amk .mu5 { animation-duration: 3.5s; animation-delay: -2.1s; }
@keyframes aBar { 0%, 100% { transform: scaleY(.34); } 50% { transform: scaleY(1); } }

/* write: a line of handwriting, drawn out and then let go of */
.amk .wrl { stroke-dasharray: 210; stroke-dashoffset: 210; animation: aDraw 6.5s ease-in-out infinite; }
@keyframes aDraw {
  0%        { stroke-dashoffset: 210; opacity: 1; }
  55%, 82%  { stroke-dashoffset: 0;   opacity: 1; }
  94%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* words: three true things, arriving one at a time */
.amk .wdl { opacity: .16; transform-origin: left center; animation: aWord 6s ease-in-out infinite; }
.amk .wd2 { animation-delay: 1.1s; }
.amk .wd3 { animation-delay: 2.2s; }
@keyframes aWord {
  0%        { opacity: .16; transform: scaleX(.5); }
  8%        { opacity: 1;   transform: scaleX(1);  }
  55%       { opacity: 1;   transform: scaleX(1);  }
  72%, 100% { opacity: .16; transform: scaleX(.5); }
}

/* a tap should feel like the thing starting, not an interruption */
.after-tile:active .amk * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .amk * { animation: none !important; }
  .amk .spr { opacity: .5; transform: scale(1); }
  .amk .mvs { opacity: .7; }
  .amk .wrl { stroke-dashoffset: 0; }
  .amk .wdl { opacity: .7; }
}

.after-foot {
  font-size: 13.5px;
  color: var(--ink-faint);
  text-align: center;
  margin: 22px 0 0;
  line-height: 1.6;
}

.player-foot { flex: none; padding: 0 22px 26px; text-align: center; }
.ghostbtn {
  appearance: none;
  font-family: inherit;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .orb, .orb-big { transition: none !important; }
  .pulse { display: none; }
}

/* ==========================================================
   LET'S WORK ON IT — the six, rebuilt

   Same shape language as "A few things that help": the numbers below
   are copied from .after-tile and .after-grid rather than approximated,
   including the 520px breakpoint and its narrower 11px gap.

   The ground is the mauve this page's own circle wears on the home
   screen — .door-work is #E6DCE4 to #DACFDC — held very pale, because
   a whole page at tile strength would drown the tiles sitting on it.

   Every text colour here was worked backwards from a contrast target
   (6:1 titles, 5:1 subtitles, 3.1:1 marks) rather than chosen by eye.
   ========================================================== */

body.practice {
  background: #F6F1F5;
  background-image:
    radial-gradient(ellipse 900px 560px at 15% -6%, rgba(230,220,228,.95), transparent 62%),
    radial-gradient(ellipse 820px 520px at 88% 3%, rgba(218,207,220,.85), transparent 60%),
    linear-gradient(170deg, #FAF7F9 0%, #F6F1F5 55%, #F3EDF2 100%);
}

.lw-cat {
  width: min(92vw, 646px);
  margin: 0 auto 11px;
  padding-left: 4px;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: lowercase;
  color: var(--ink-faint);
  text-align: left;
}

.lw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  width: min(92vw, 646px);
  margin: 0 auto 22px;
}
@media (max-width: 520px) {
  .lw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
}

.lw-tile {
  appearance: none;
  font-family: inherit;
  text-align: left;
  border: 0;
  border-radius: 18.5px;
  min-height: 151px;
  box-shadow: 0 6px 22px rgba(123,108,196,.13);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 17px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
  -webkit-tap-highlight-color: transparent;
}
.lw-tile:hover  { transform: translateY(-3px); }
.lw-tile:active { transform: scale(.97); }
.lw-tile .lico  { display: flex; justify-content: flex-start; margin-bottom: 12px; }
.lw-tile .lico svg { width: 60px; height: 60px; }
.lw-tile .llabel {
  display: block; font-size: 16px; font-weight: 500; letter-spacing: -.015em;
  line-height: 1.18; margin-bottom: 5px;
  min-height: 2.36em;     /* two lines held, so rows cannot size unevenly */
}
.lw-tile .lsub { display: block; font-size: 12.2px; line-height: 1.45; }

/* ---- mauve alternating with a warm stone ---- */
.w-1 { background: #EDE5EC; color: #A770A0; }
.w-1 .llabel { color: #75436F; } .w-1 .lsub { color: #844F7E; }
.w-2 { background: #E4DEE0; color: #94747F; }
.w-2 .llabel { color: #634952; } .w-2 .lsub { color: #70555E; }
.w-3 { background: #E7DDE7; color: #A06AA0; }
.w-3 .llabel { color: #6E416E; } .w-3 .lsub { color: #7C4B7C; }
.w-4 { background: #DFD9DC; color: #8E7280; }
.w-4 .llabel { color: #5D4852; } .w-4 .lsub { color: #6A535F; }
.w-5 { background: #E1D6E1; color: #9A679A; }
.w-5 .llabel { color: #653F65; } .w-5 .lsub { color: #744A74; }
.w-6 { background: #D9D3D6; color: #876F7B; }
.w-6 .llabel { color: #56454D; } .w-6 .lsub { color: #63505A; }

/* Alternating colours only checkerboard at three columns. At two, every
   mauve would land in the left column and every stone in the right —
   two stripes rather than six tiles. Tiles three and four trade colour
   sets to fix it. Note that nothing MOVES: the six sit in the same order
   on a phone as on a laptop, which matters more than the pattern.

   This depends on there being exactly six tiles. Add a seventh and the
   swap has to be worked out again. */
@media (max-width: 520px) {
  .w-3 { background: #DFD9DC; color: #8E7280; }
  .w-3 .llabel { color: #5D4852; } .w-3 .lsub { color: #6A535F; }
  .w-4 { background: #E7DDE7; color: #A06AA0; }
  .w-4 .llabel { color: #6E416E; } .w-4 .lsub { color: #7C4B7C; }
}

/* ---- the marks ---- */
.lmk * { transform-box: fill-box; transform-origin: center; }

/* Jacobson's — the body, group by group. Each band tightens, holds and
   lets go in turn, head downwards, which is the exercise itself. */
.lmk .z1 { animation: lwZone 9s ease-in-out infinite; }
.lmk .z2 { animation: lwZone 9s ease-in-out infinite 1.5s; }
.lmk .z3 { animation: lwZone 9s ease-in-out infinite 3s; }
@keyframes lwZone {
  0%, 4%    { transform: scaleX(1);   opacity: .35; }
  11%, 21%  { transform: scaleX(.68); opacity: 1; }
  31%, 100% { transform: scaleX(1);   opacity: .35; }
}

/* Meditation — a head settling, with the quiet spreading out from it. */
.lmk .ring  { animation: lwRing 8s ease-out infinite; }
.lmk .ring2 { animation: lwRing 8s ease-out infinite 2.6s; }
@keyframes lwRing {
  0%   { transform: scale(.5); opacity: 0; }
  15%  { opacity: .75; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Behavioural Activation — two ticks landing on the day, one then the
   other, because "two things" is the whole instruction. */
.lmk .t1 { animation: lwTick 9s ease-out infinite 1s; }
.lmk .t2 { animation: lwTick 9s ease-out infinite 3.4s; }
@keyframes lwTick {
  0%        { opacity: 0; transform: scale(.5); }
  10%       { opacity: 1; transform: scale(1.12); }
  16%, 72%  { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; }
}

.lmk .bar1 { animation: lwBar 2.6s ease-in-out infinite; }
.lmk .bar2 { animation: lwBar 2.6s ease-in-out infinite .3s; }
.lmk .bar3 { animation: lwBar 2.6s ease-in-out infinite .6s; }
.lmk .bar4 { animation: lwBar 2.6s ease-in-out infinite .15s; }
.lmk .bar5 { animation: lwBar 2.6s ease-in-out infinite .45s; }
@keyframes lwBar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

.lmk .wln { stroke-dasharray: 120; stroke-dashoffset: 120; animation: lwWrite 7s ease-in-out infinite; }
@keyframes lwWrite {
  0%        { stroke-dashoffset: 120; }
  45%, 70%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 0; opacity: 0; }
}

.lmk .st  { opacity: .3; }
.lmk .st1 { animation: lwStep 8s infinite; }
.lmk .st2 { animation: lwStep 8s infinite 1.1s; }
.lmk .st3 { animation: lwStep 8s infinite 2.2s; }
.lmk .st4 { animation: lwStep 8s infinite 3.3s; }
@keyframes lwStep { 0%, 6% { opacity: .3; } 14%, 46% { opacity: 1; } 60%, 100% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) { .lmk * { animation: none !important; } }

/* ---- two chips, stacked ----
   Jacobson's carries both a Disclaimer and an About, one above the other
   rather than side by side. Scoped to .disc-stack so the single chip on
   Calming Music is untouched.

   The panel sits below whichever chip is open, so its offset is measured
   from the bottom of the stack rather than the old fixed 50px. */
.disc-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.disc-wrap:has(.disc-stack) .disc-panel { top: 96px; }

/* :has() is recent. Without it the panel keeps the old 50px and would sit
   over the second chip, so the fallback moves it by class instead. */
.disc-wrap.stacked .disc-panel { top: 96px; }

.disc-about h3 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--ink);
}
.disc-about p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.disc-about p:last-of-type { margin-bottom: 14px; }


/* ==========================================================
   THE FOUR EXERCISES OPENED FROM "LET'S WORK ON IT"

   Each takes the ground of its own tile, so pressing a mauve tile opens
   a mauve screen. Reached instead through step two on Instant Help, the
   door colour still wins — the theme here only applies when there is no
   door to inherit from — so nothing on that side changes.

   These replace mint / mint / sky / blush, four colours that had nothing
   to do with the page they open from.
   ========================================================== */
.player[data-theme="lw-jpmr"]  { background: linear-gradient(165deg,#FBF7FA,#F3EAF2); }
.player[data-theme="lw-med"]   { background: linear-gradient(165deg,#FAF9F9,#EFEBED); }
.player[data-theme="lw-music"] { background: linear-gradient(165deg,#FBF7FB,#F2E9F2); }
.player[data-theme="lw-write"] { background: linear-gradient(165deg,#FAF6FA,#F1E8F1); }

/* the title sits in the middle here too, by the same equal-column grid
   the six already use */
.player[data-theme^="lw-"] .player-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.player[data-theme^="lw-"] .player-close { justify-self: start; }
.player[data-theme^="lw-"] .player-title {
  margin-left: 0;
  padding-right: 0;
  text-align: center;
  min-width: 0;
}

.player[data-theme^="lw-"] .ring-emoji { color: #9E7B9A; }
.player[data-theme^="lw-"] .ring-emoji svg { width: 84px; height: 84px; display: block; }

/* ---- the two that are whole pages rather than overlays ---- */
body.lw-page {
  background: #F6F1F5;
  background-image: linear-gradient(170deg, #FBF9FA 0%, #F1EDEE 100%);
}
body.lw-page-plan {
  background: #F4F0F1;
  background-image: linear-gradient(170deg, #FAF8F9 0%, #EFEBEC 100%);
}
.head-mark { display: flex; justify-content: center; margin: 4px 0 -2px; }
.head-mark svg { width: 72px; height: 72px; }
body.lw-page .head-mark svg      { color: #8E7280; }
body.lw-page-plan .head-mark svg { color: #876F7B; }

/* ---- Jacobson's: the body mark in each phase ----
   The ring here is a phase indicator, not decoration. These are the
   states it moves through, all drawn from the same body so the mark you
   pressed on the tile is the mark you are watching. */
.body-rest .b1, .body-rest .b2, .body-rest .b3 { opacity: .45; }
.body-rest .b1 { animation: lwZone 9s ease-in-out infinite; }
.body-rest .b2 { animation: lwZone 9s ease-in-out infinite 1.5s; }
.body-rest .b3 { animation: lwZone 9s ease-in-out infinite 3s; }

.body-ready .b1, .body-ready .b2, .body-ready .b3 { opacity: .8; }
.body-ready .b2 { animation: bodyReady 1.6s ease-in-out infinite; }
@keyframes bodyReady { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

/* drawn in and held — the squeeze */
.body-tense .b1, .body-tense .b2, .body-tense .b3 {
  transform: scaleX(.62);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 1;
  transition: transform .5s cubic-bezier(.3,.7,.4,1);
}

/* opening out again, and easing */
.body-release .b1, .body-release .b2, .body-release .b3 {
  transform-box: fill-box;
  transform-origin: center;
  animation: bodyRelease 2.6s ease-out infinite;
}
@keyframes bodyRelease {
  0%   { transform: scaleX(.62); opacity: 1; }
  55%  { transform: scaleX(1);   opacity: .8; }
  100% { transform: scaleX(1);   opacity: .5; }
}

.body-done .b1, .body-done .b2, .body-done .b3 { opacity: 1; }

/* A round cap on a closed circle has nothing to cap, but some engines
   still mark the path's start point — which the -90deg rotation puts at
   twelve o'clock, exactly where the notch appeared. Once the ring is
   undashed there is no cap to want, so it is turned off. Partial rings
   keep theirs, since those really do have two ends. */
.ring circle[stroke-dasharray="none"] { stroke-linecap: butt; }
.ring .ring-bg { stroke-linecap: butt; }

/* ==========================================================
   The consent notice and the account card.

   Both are injected by sync.js rather than written into the pages, and
   both sit in the normal flow at the foot of the content. Neither is a
   modal, neither covers anything, and neither appears on the home page
   or anywhere in Instant Help — a question asked over the top of someone
   mid-panic is exactly the gate this project promises not to build.
   ========================================================== */

.acct-mount {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px 48px;
}
.acct-mount:empty { padding: 0; }

.consent-card,
.acct-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 22px 18px;
  margin-top: 28px;
  box-shadow: 0 2px 14px rgba(90, 75, 140, .06);
}

.consent-line,
.acct-line {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.consent-sub,
.acct-sub {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.62;
  /* Same ink as the body. The detail of what we keep is the part that
     matters most here, so it is not set in a whisper. */
  color: var(--ink-soft);
}

.consent-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.consent-yes,
.acct-go {
  flex: 0 0 auto;
  border: 0;
  border-radius: 11px;
  padding: 11px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  min-height: 44px;
}
.consent-yes:hover, .acct-go:hover { background: var(--accent-dk); }

.consent-no,
.acct-no {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 18px;
  font: inherit;
  font-size: 15px;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  min-height: 44px;
}
.consent-no:hover, .acct-no:hover { background: var(--bg-alt); }

.acct-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.acct-email {
  flex: 1 1 200px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;          /* 16px stops iOS zooming the page on focus */
  color: var(--ink);
  background: var(--bg);
  min-height: 44px;
}
.acct-email:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.acct-no { margin-top: 2px; }

.acct-said {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 420px) {
  .acct-form { flex-direction: column; }
  .acct-go { width: 100%; }
}