/* Workout Sessions: selected brand palette and appearance preferences. */
:root {
  --surface: #fff;
  --line: #e6dfef;
  --lilac: #eee4ff;
  --soft-green: #e8f6d9;
  --soft-pink: #f7e2ed;
  --soft-yellow: #fff1be;
  --soft-blue: #e1ecfb;
  --band: #f1edf7;
  --cta: #7900ff;
  --cta-text: #fff;
  --on-accent: #21172e;
}
.feature-lilac, .topic-lilac, .related-topic { background: var(--lilac); }
.feature-green, .topic-green { background: var(--soft-green); }
.pink { background: var(--soft-pink); }
.yellow { background: var(--soft-yellow); }
.blue { background: var(--soft-blue); }
.progress-section { background: var(--band); }
.orbit { background: var(--lilac); }
.floating-note, .reading-panel, .skip-link { background: var(--surface); border-color: var(--line); }
.getting-started { background: var(--cta); color: var(--cta-text); }
.getting-started .eyebrow, .getting-started li p { color: inherit; opacity: .85; }
.getting-started li>span, .activity-strip, .note-bottom span { color: var(--on-accent); }
.faq details, .site-footer { border-color: var(--line); }
.activity-strip span { color: var(--on-accent); }
.store-link { background: #fff; border-radius: 10px; padding: 1px; }
.topic-card:hover { color: var(--ink); }
/* 01 — Play: soft, cheerful, close to the native app. */
.site-session { --paper: #fcfbfe; }
.site-session .hero h1 { letter-spacing: -.055em; }
.site-session .orbit { border-radius: 40% 60% 55% 45%; }
.site-session .hero-screen { transform: rotate(7deg); }
.site-session .story-image { border-radius: 36px; }
html[data-theme="dark"] {
  --paper: #15121c; --ink: #f2edf9; --muted: #bbb1ca; --purple: #bd94ff;
  --green: #a6f147; --surface: #201b29; --line: #3b314b;
  --lilac: #30223f; --soft-green: #233324; --soft-pink: #392532;
  --soft-yellow: #393321; --soft-blue: #222e40; --band: #1c1725;
  --cta: #563096; --cta-text: #fff; --on-accent: #21172e;
}
html[data-theme="dark"] .site-session { --paper: #15121c; }
@media (prefers-color-scheme: dark) {
  /* No-JavaScript fallback: use the same accessible shared dark palette. */
  html:not([data-theme]) body { --paper: #15121c; --ink: #f2edf9; --muted: #bbb1ca; --purple: #bd94ff; --surface: #201b29; --line: #3b314b; --lilac: #30223f; --soft-green: #233324; --soft-pink: #392532; --soft-yellow: #393321; --soft-blue: #222e40; --band: #1c1725; --cta: #563096; }
}

/* Appearance is a site preference, independent of the page content. */
.theme-picker { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin: 0; gap: 2px; }
.theme-picker legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.theme-picker button { min-height: 40px; min-width: 44px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.theme-picker button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.theme-picker button:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.site-footer { flex-wrap: wrap; gap: 20px; }
.site-footer .theme-picker { margin-left: auto; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
@media(max-width:700px) {
 .site-footer .theme-picker { margin-left: 0; }
 .faq summary { padding-block: 8px; }
 .related-topic>a, .help-bottom>a { padding-block: 12px; }
 .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
 .breadcrumbs { padding-block: 8px; }
}