/* Theming: a user-selectable `data-theme` attribute on <html> (set from the
   `theme` cookie, itself mirroring the signed-in user's saved preference --
   see base.html), not the OS's prefers-color-scheme -- this app now has an
   explicit per-user theme choice (Account page), so the previous "follow
   the OS" behavior would silently fight a stored preference. The bare
   :root block below IS the "dark" theme and also the fallback for pages
   with no theme cookie yet (logged-out pages), matching "default (dark)"
   as the app's overall default. Every other theme is a full override block
   keyed by [data-theme="..."] -- add a new theme by adding one such block
   (see THEME_OPTIONS in app/auth.py, which must list it for the Account
   page dropdown to offer it) and redefining every token below, never by
   partially overriding a subset (an incomplete theme would silently
   inherit dark's leftover values). */
/* .theme-scope[data-theme=...]: the same theme tokens on a single element,
   so one card can show another theme inside a page in the viewer's own
   (another user's profile card -- templates/profile.html). */
:root, .theme-scope[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111318;
  --fg: #e8e8ea;
  --muted: #9aa0a6;
  --border: #2a2d34;
  --accent: #4f8cff;
  --accent-active: #24417a;
  --danger: #f87171;
  --card-bg: #191b20;
  /* Text color for anything sitting on a saturated fill (--accent,
     --danger, or a dynamic --phase-* mix) -- one shared token since every
     current use case agrees on white, but themes are free to override it
     (e.g. a bright/light accent would need dark text here instead). */
  --on-color: #ffffff;

  /* Muscle fitness/fatigue phase colors -- a fixed 4-role status palette
     (Growing/Rebuilding, Ready, Detraining, Atrophying), not a themed
     categorical set -- EVERY theme should normally keep these exact values
     rather than reinterpreting them, since they're independently validated
     (colorblind-safe, contrast-checked) and re-deriving them per theme
     risks quietly breaking that. Growing/Detraining/Atrophying reuse the
     dataviz skill's documented, mode-invariant status hexes (good/warning/
     critical) exactly as given, since Status is fixed -- never re-derived.
     Ready has no status role of its own (it's a *positive but distinct*
     state, not a point on a good->critical severity scale), so it borrows
     the skill's categorical slot-1 blue instead -- chosen specifically
     because blue sits on a CVD confusion axis separate from the red/green/
     amber trio (validated: the status green/red pair alone fails the
     categorical CVD check at ΔE 4.1 deutan, well under the floor -- but per
     the skill, status colors are exempt from that check and rely on the
     always-present text label instead, same mitigation this app uses
     throughout the legend). Ready's blue is the one value that's allowed to
     vary per theme (it tracks --accent's dark/light categorical step, same
     idea as --accent itself varying), everything else here is pinned. */
  --phase-growing: #0ca30c;
  --phase-ready: #3987e5;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  /* Nav icon colors -- decorative, not status-semantic, so free to vary per
     theme. --outline-grey (the active-page ring) needs enough contrast
     against the nav background, so it's a separate token per theme rather
     than reusing --border. */
  --dumbbell-grey: #d1d5db;
  --scroll-yellow: #fcd34d;
  --outline-grey: #d1d5db;
}

:root[data-theme="light"], .theme-scope[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;
  --accent-active: #1e3a8a;
  --danger: #dc2626;
  --card-bg: #f9fafb;
  --on-color: #ffffff;

  --phase-growing: #0ca30c;
  --phase-ready: #2a78d6;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #d1d5db;
  --scroll-yellow: #fcd34d;
  --outline-grey: #6b7280;
}

/* A mix of pinks -- text/accent contrast checked against WCAG AA (~4.5:1+,
   matching what the two default themes already land on) so it's not just
   pretty but still legible; --border stays as soft/low-contrast as the
   default themes' borders (~1.3:1) rather than a stricter divider, for
   visual consistency with them. */
:root[data-theme="pinkify"], .theme-scope[data-theme="pinkify"] {
  color-scheme: light;
  --bg: #fdf2f8;
  --fg: #4a1942;
  --muted: #8a5678;
  --border: #f3cbe3;
  --accent: #c2255f;
  --accent-active: #9d174d;
  --danger: #dc2626;
  --card-bg: #fce7f3;
  --on-color: #ffffff;

  --phase-growing: #0ca30c;
  --phase-ready: #2a78d6;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #e3b8d1;
  --scroll-yellow: #f4c95d;
  --outline-grey: #9d174d;
}

/* Light blues (ocean) with sandy-yellow nav-icon accents -- --danger shifts
   to a warm coral rather than a cool red so it doesn't get lost among the
   theme's own blues; same AA-legibility/soft-border approach as pinkify
   above. */
:root[data-theme="ocean"], .theme-scope[data-theme="ocean"] {
  color-scheme: light;
  --bg: #eef8fb;
  --fg: #0f3a4d;
  --muted: #3f6b7a;
  --border: #bfe2ec;
  --accent: #0e7490;
  --accent-active: #0e6379;
  --danger: #c0392b;
  --card-bg: #dcf1f7;
  --on-color: #ffffff;

  --phase-growing: #0ca30c;
  --phase-ready: #2a78d6;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #d9c9a3;
  --scroll-yellow: #e0b84a;
  --outline-grey: #0e6379;
}

/* Deep greens + warm browns -- earthy/outdoor-training feel. Light theme,
   so uses the light-mode Ready blue (see :root's comment on why Ready's
   blue is allowed to vary while the other 3 phase colors stay pinned). */
:root[data-theme="forest"], .theme-scope[data-theme="forest"] {
  color-scheme: light;
  --bg: #f5f0e6;
  --fg: #2b3a26;
  --muted: #5c6b4f;
  --border: #d9cdb0;
  --accent: #2f6b3f;
  --accent-active: #1f4a24;
  --danger: #b5442e;
  --card-bg: #ebe2d0;
  --on-color: #ffffff;

  --phase-growing: #0ca30c;
  --phase-ready: #2a78d6;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #c9b896;
  --scroll-yellow: #d4a24c;
  --outline-grey: #1f4a24;
}

/* Soft purples on a light ground -- calmer, recovery-day feel. */
:root[data-theme="lavender"], .theme-scope[data-theme="lavender"] {
  color-scheme: light;
  --bg: #f8f5fc;
  --fg: #3d2e52;
  --muted: #6f5a8a;
  --border: #ddd0ed;
  --accent: #7e4fee;
  --accent-active: #5b21b6;
  --danger: #dc2626;
  --card-bg: #efe7f7;
  --on-color: #ffffff;

  --phase-growing: #0ca30c;
  --phase-ready: #2a78d6;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #d4c5ea;
  --scroll-yellow: #f0c766;
  --outline-grey: #5b21b6;
}

/* Vivid cyan + magenta on near-black -- energy-drink/arcade aesthetic.
   --on-color flips to dark here (not the usual white): the accent/danger
   fills are themselves very bright, so black text reads far better on them
   than white does (checked both ways -- white failed AA on every fill in
   this theme, black clears it comfortably). Dark theme, dark-mode Ready
   blue. */
:root[data-theme="neon"], .theme-scope[data-theme="neon"] {
  color-scheme: dark;
  --bg: #0a0a12;
  --fg: #e8e8f5;
  --muted: #8888a8;
  --border: #2a2a3d;
  --accent: #00c2d9;
  --accent-active: #00a8bf;
  --danger: #ff2d6d;
  --card-bg: #14141f;
  --on-color: #0a0a12;

  --phase-growing: #0ca30c;
  --phase-ready: #3987e5;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #6b6b8f;
  --scroll-yellow: #ffee00;
  --outline-grey: #00c2d9;
}

/* Warm browns + cream -- cozy, morning-coffee feel. */
:root[data-theme="coffee"], .theme-scope[data-theme="coffee"] {
  color-scheme: light;
  --bg: #f5ede4;
  --fg: #3a2419;
  --muted: #7a5a44;
  --border: #ddccb8;
  --accent: #a0642f;
  --accent-active: #5c3a1e;
  --danger: #c1442e;
  --card-bg: #ebe0d3;
  --on-color: #ffffff;

  --phase-growing: #0ca30c;
  --phase-ready: #2a78d6;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #cbb192;
  --scroll-yellow: #d9a441;
  --outline-grey: #5c3a1e;
}

/* Warm ivory ground with a classic metallic-gold accent -- a bright/light
   accent like this needs dark text on it (see :root's --on-color comment),
   not the usual white. Light theme, so uses the light-mode Ready blue, and
   --outline-grey matches --accent-active like the other light themes above. */
:root[data-theme="gold"], .theme-scope[data-theme="gold"] {
  color-scheme: light;
  --bg: #fdf8ec;
  --fg: #3d3018;
  --muted: #8a7a4f;
  --border: #ecdfb8;
  --accent: #c9a227;
  --accent-active: #a3841f;
  --danger: #c1442e;
  --card-bg: #f6eed7;
  --on-color: #2b2210;

  --phase-growing: #0ca30c;
  --phase-ready: #2a78d6;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #f5e9c4;
  --scroll-yellow: #f0dfa0;
  --outline-grey: #a3841f;
}

/* Warm peach ground with a hot orange-red accent -- more saturated/intense
   than the old "sunset" theme this replaces. --danger is pulled to a
   cleaner red (not orange) so a real error/delete action never reads as
   just more "fire". Light theme, so uses the light-mode Ready blue. */
:root[data-theme="fire"], .theme-scope[data-theme="fire"] {
  color-scheme: light;
  --bg: #fff5f0;
  --fg: #4a1f12;
  --muted: #a8654a;
  --border: #f5d5c2;
  --accent: #e8511c;
  --accent-active: #b83c12;
  --danger: #d81c2b;
  --card-bg: #ffe9de;
  --on-color: #ffffff;

  --phase-growing: #0ca30c;
  --phase-ready: #2a78d6;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #ffd9c2;
  --scroll-yellow: #ffb74d;
  --outline-grey: #b83c12;
}

/* Cool, neutral gunmetal grey with a muted steel-blue accent -- the
   "no-nonsense equipment room" alternative to mono (which this replaces),
   distinct from it by actually having a color instead of orange-on-grey.
   The accent is mid-bright like neon's, so it takes neon's same
   dark-text-on-accent approach rather than white. Dark theme, so uses the
   dark-mode Ready blue. */
:root[data-theme="steel"], .theme-scope[data-theme="steel"] {
  color-scheme: dark;
  --bg: #14161a;
  --fg: #e6e8ea;
  --muted: #8a9096;
  --border: #2a2e33;
  --accent: #8fa3ad;
  --accent-active: #6b7d86;
  --danger: #e5534b;
  --card-bg: #1c1f23;
  --on-color: #14161a;

  --phase-growing: #0ca30c;
  --phase-ready: #3987e5;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #c8d0d4;
  --scroll-yellow: #d4b483;
  --outline-grey: #8fa3ad;
}

/* Premium (real-photo) themes -- see PREMIUM_THEME_OPTIONS in app/auth.py.
   Unlike every theme above, these need more than a token block: --bg stays
   a normal solid color (it's still used as-is for the notification-dot
   border, color-mix() inputs, and the .topnav/.sticky-save fallback), and
   the actual photo is layered onto `body` separately below so those other
   --bg consumers don't end up trying to render an image where a <color> is
   required. --card-bg is a translucent white/black instead of solid so
   every element that already uses it (.card, inputs, buttons, notification
   panels, ...) becomes a glass panel over the photo for free, without
   hunting down each selector individually. */
:root[data-theme="mountain"], .theme-scope[data-theme="mountain"] {
  color-scheme: light;
  --bg: #dce6ec;
  --fg: #1c2b35;
  --muted: #55707d;
  --border: rgba(28, 43, 53, 0.18);
  --accent: #2f6f8f;
  --accent-active: #1d4f66;
  --danger: #c0392b;
  --card-bg: rgba(255, 255, 255, 0.62);
  --on-color: #ffffff;

  --phase-growing: #0ca30c;
  --phase-ready: #2a78d6;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #b8c4cc;
  --scroll-yellow: #e8c874;
  --outline-grey: #2f6f8f;
}

:root[data-theme="beach"], .theme-scope[data-theme="beach"] {
  color-scheme: light;
  --bg: #eaf7f7;
  --fg: #0d3b3f;
  --muted: #3f7a80;
  --border: rgba(13, 59, 63, 0.16);
  --accent: #17a2a8;
  --accent-active: #0f6e73;
  --danger: #d1495b;
  --card-bg: rgba(255, 255, 255, 0.60);
  --on-color: #ffffff;

  --phase-growing: #0ca30c;
  --phase-ready: #2a78d6;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #bfe3e3;
  --scroll-yellow: #f0c869;
  --outline-grey: #17a2a8;
}

:root[data-theme="forest_photo"], .theme-scope[data-theme="forest_photo"] {
  color-scheme: dark;
  --bg: #10190f;
  --fg: #eaf3e6;
  --muted: #9fb694;
  --border: rgba(234, 243, 230, 0.16);
  --accent: #5a9c46;
  --accent-active: #3d7830;
  --danger: #e0574a;
  --card-bg: rgba(16, 25, 15, 0.55);
  --on-color: #0e1a0c;

  --phase-growing: #0ca30c;
  --phase-ready: #3987e5;
  --phase-detraining: #fab219;
  --phase-atrophying: #d03b3b;

  --dumbbell-grey: #b7e0a0;
  --scroll-yellow: #d9c873;
  --outline-grey: #5a9c46;
}

/* The photo itself: fixed (doesn't scroll with content) and covers the
   viewport, painted behind the solid --bg so there's no flash of the wrong
   color while the image loads. */
:root[data-theme="mountain"] body {
  background-color: var(--bg);
  background-image: url('/static/themes/mountain.jpg');
  background-position: center 32%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
:root[data-theme="beach"] body {
  background-color: var(--bg);
  background-image: url('/static/themes/beach.jpg');
  background-position: center 60%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
:root[data-theme="forest_photo"] body {
  background-color: var(--bg);
  background-image: url('/static/themes/forest.jpg');
  background-position: center 55%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Blur the glass surfaces so body text under them (page content scrolled
   behind a sticky nav, etc.) doesn't show through illegibly -- .card and
   friends already get their translucency from --card-bg above, this just
   adds the frosted look on top of it. */
:root[data-theme="mountain"] .card,
:root[data-theme="mountain"] input,
:root[data-theme="mountain"] select,
:root[data-theme="mountain"] textarea,
:root[data-theme="mountain"] .topnav,
:root[data-theme="mountain"] .sticky-save,
:root[data-theme="beach"] .card,
:root[data-theme="beach"] input,
:root[data-theme="beach"] select,
:root[data-theme="beach"] textarea,
:root[data-theme="beach"] .topnav,
:root[data-theme="beach"] .sticky-save,
:root[data-theme="forest_photo"] .card,
:root[data-theme="forest_photo"] input,
:root[data-theme="forest_photo"] select,
:root[data-theme="forest_photo"] textarea,
:root[data-theme="forest_photo"] .topnav,
:root[data-theme="forest_photo"] .sticky-save {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  /* Stops iOS's elastic rubber-band overscroll at the top/bottom of the
     page -- in the native wrapper and installed-PWA contexts, that bounce
     was dragging the sticky .topnav along with it, briefly exposing the
     native WKWebView background above it before it sprang back ("locking"
     into place). Harmless everywhere else; it's a no-op on desktop browsers
     and Android, which don't bounce this way to begin with. */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  /* calc() + env(): the iOS home-indicator inset is 0 on devices/contexts
     that don't have one (older phones, most of the web), so this safely
     collapses to the plain 4rem everywhere except notched devices running
     as an installed PWA or the native wrapper. */
  padding-bottom: calc(4rem + env(safe-area-inset-bottom));
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem 1rem 6rem;
}

h1 {
  font-size: 1.4rem;
  margin: 0.5rem 0 1rem;
}
.centered-header { text-align: center; }

/* Spans the full viewport width regardless of main's 480px column/padding
   -- the standard full-bleed trick (100vw + left:50% + translateX(-50%))
   rather than breaking out via negative margins sized to main's own
   padding, since "edge to edge" here means the actual screen edge, not
   just main's padding. */
.full-bleed-divider {
  border: none;
  border-top: 2px solid var(--accent);
  height: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0.85rem 0;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  /* Extends the nav's own background up behind the notch/status bar
     instead of leaving a gap there -- see body's padding-bottom comment. */
  padding-top: calc(0.75rem + env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
  overflow-x: auto;
  white-space: nowrap;
}
.topnav a {
  flex-shrink: 0;
}
.nav-btn {
  position: relative;
  color: var(--on-color);
  background: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem;
  border-radius: 999px;
}
.nav-btn svg {
  width: 22px;
  height: 22px;
}
.nav-btn.active {
  background: var(--accent-active);
  outline: 2px solid var(--outline-grey);
  outline-offset: 2px;
}
.nav-btn.has-notification::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  border: 1.5px solid var(--bg);
}
.nav-account {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--fg);
}
.nav-account svg {
  width: 26px;
  height: 26px;
}
/* Same "selected" ring as the tab buttons (.nav-btn.active). The padding and
   radius are always there so selecting it doesn't shift the bar. */
.nav-account { padding: 0.35rem; border-radius: 999px; }
.nav-account.active {
  background: color-mix(in oklab, var(--accent) 25%, transparent);
  outline: 2px solid var(--outline-grey);
  outline-offset: 2px;
}
.logout-form-block {
  margin-top: 1.5rem;
}
.danger-zone-spacer {
  margin-top: 2.5rem;
}

.notification-prefs {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.notification-pref-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}
.notification-pref-row input {
  width: auto;
  padding: 0;
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.notification-pref-label {
  display: block;
  font-size: 0.95rem;
}
.notification-pref-desc {
  display: block;
  font-size: 0.8rem;
}

.push-enable-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.push-status {
  font-size: 0.8rem;
  margin: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
label { font-size: 0.85rem; color: var(--muted); }

input, select, textarea, button {
  font-size: 1rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
}

button {
  cursor: pointer;
  font-weight: 600;
  border: none;
}
button.primary {
  background: var(--accent);
  color: var(--on-color);
  width: 100%;
  padding: 0.9rem;
}
button.secondary {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--fg);
  width: 100%;
  margin: 0.5rem 0;
}
button.small { padding: 0.4rem 0.6rem; font-size: 0.85rem; width: auto; }

.block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background: var(--card-bg);
}
.block.finished {
  border-color: var(--phase-growing);
  background: color-mix(in oklab, var(--phase-growing) 8%, var(--card-bg));
}
.block.finished .form-tips,
.block.finished .form-toggle-btn,
.block.finished .exercise-status,
.block.finished .sets,
.block.finished .add-set-btn,
.block.finished .block-footer {
  display: none;
}
.block-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.block-footer .add-set-btn { margin: 0; }
.block-footer button.secondary.finish-exercise-btn { margin-left: auto; }
button.secondary.finish-exercise-btn {
  width: auto;
  margin: 0;
}
.block-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.block-header .exercise-select { flex: 1; min-width: 0; }
.remove-block {
  background: transparent;
  color: var(--danger);
  border: none;
  font-size: 0.8rem;
  white-space: nowrap;
  margin-right: 0.3rem;
}

/* Drag grip in each exercise header (hold + drag to reorder). */
.drag-handle {
  flex-shrink: 0; width: 1.9rem; height: 2.2rem; padding: 0; margin: 0;
  background: transparent; border: none; color: var(--muted);
  font-size: 1.25rem; line-height: 1; cursor: grab;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.block.dragging {
  position: relative; z-index: 20;
  background: var(--card-bg); border-color: var(--accent);
  will-change: transform;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.block.dragging .drag-handle { cursor: grabbing; color: var(--accent); }
body.block-dragging { -webkit-user-select: none; user-select: none; }
.drag-handle { -webkit-touch-callout: none; border-radius: 8px; }
/* 1s hold: the grip fills with the accent colour, then the card lifts */
.drag-handle.holding { animation: grip-hold 0.4s linear forwards; }
@keyframes grip-hold {
  from { color: var(--muted); background: transparent; transform: scale(1); }
  to { color: var(--on-color); background: var(--accent); transform: scale(1.12); }
}
body.block-dragging #blocks .block > :not(.block-header),
body.block-dragging #blocks .block-header > :not(.drag-handle):not(.exercise-select) { display: none !important; }
body.block-dragging #blocks .block-header { flex-wrap: nowrap; }
body.block-dragging #blocks .exercise-select { pointer-events: none; }
.block.just-moved { animation: block-moved 0.6s ease; }
@keyframes block-moved {
  0% { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}

.set-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.set-label {
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 2.6rem;
}
.set-row input.num-input {
  width: 4.2rem;
}
.set-row input.rpe-input {
  width: 3.5rem;
}
/* Column labels over the set rows (app.js buildSetHead): same gap and
   widths as the inputs below. Hidden until the first set exists. */
.sets .set-head,
.sets .set-row {
  display: grid;
  grid-template-columns: var(--set-cols);
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.sets .set-row input.num-input,
.sets .set-row input.rpe-input { width: 100%; min-width: 0; padding: 0.55rem 0.15rem; text-align: center; }
.set-head span { text-align: center; }
.sets .set-row .rpe-field { min-width: 0; }
.sets .set-row .set-label { min-width: 0; text-align: center; }
.sets .set-row .failure-label { justify-content: center; }
.log-box .sets .set-row .remove-row { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; }
.set-head {
  font-size: 0.72rem;
  color: var(--muted);
}
/* Narrow columns (Fail/Note/Done) are slimmer than their label: centre
   the label and let it spill evenly over the gaps instead of clipping. */
.set-head span { white-space: nowrap; display: flex; justify-content: center; letter-spacing: 0; overflow: visible; }
.set-head span:first-child { padding-left: 0; text-align: center; }
.set-head .set-head-center { padding-left: 0; text-align: center; }
.set-head:last-child { display: none; }
.set-done-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Set rewards trial (app.js SET_REWARDS). */
.set-done-btn.just-done { animation: set-done-pop 0.45s cubic-bezier(.3, 1.6, .5, 1); position: relative; }
.set-done-btn.just-done::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--phase-growing);
  animation: set-done-ring 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes set-done-pop { 0% { transform: scale(0.8); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes set-done-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }
.set-row.done.beat-last .set-done-btn {
  background: linear-gradient(135deg, #ffd54a, #f0a500);
  border-color: #f0a500;
  color: #3b2a00;
}
.set-row.done.beat-last .set-done-btn.just-done::after { border-color: #f0a500; }
.set-reward-float {
  position: fixed;
  z-index: 60;
  transform: translate(-50%, -100%);
  pointer-events: none;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--phase-growing);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  animation: set-reward-float 1.3s ease-out forwards;
}
.set-reward-float.set-reward-gold {
  color: #3b2a00;
  background: linear-gradient(135deg, #ffd54a, #f0a500);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 4px 14px rgba(240, 165, 0, 0.45);
  animation: set-reward-toast 2.2s ease-out forwards;
}
@keyframes set-reward-float {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -110%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(1); }
}
@keyframes set-reward-toast {
  0% { opacity: 0; transform: translate(-80%, -60%) scale(0.7); }
  12% { opacity: 1; transform: translate(-80%, -130%) scale(1.08); }
  20% { transform: translate(-80%, -130%) scale(1); }
  80% { opacity: 1; transform: translate(-80%, -150%); }
  100% { opacity: 0; transform: translate(-80%, -190%); }
}
.legend-score.score-bump { display: inline-block; animation: score-bump 0.5s ease; color: var(--phase-growing); }
@keyframes score-bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.progress-bubble polygon.muscle-pulse { animation: muscle-pulse 0.85s ease-in-out 3; }
@keyframes muscle-pulse {
  0%, 100% { stroke: transparent; stroke-width: 0; fill-opacity: 1; }
  50% { stroke: #fff; stroke-width: 4; fill-opacity: 0.6; }
}
.progress-bubble.bubble-celebrate { animation: bubble-celebrate 0.8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bubble-celebrate { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .set-done-btn.just-done, .set-done-btn.just-done::after, .legend-score.score-bump,
  .progress-bubble polygon.muscle-pulse, .progress-bubble.bubble-celebrate { animation: none; }
}
.set-row.done .set-done-btn {
  background: var(--phase-growing);
  border-color: var(--phase-growing);
  color: #fff;
}
.set-row.done input.num-input { border-color: color-mix(in oklab, var(--phase-growing) 60%, var(--border)); }
.rpe-field {
  position: relative;
  /* Own stacking context: the "?" badge's z-index lifts it over the Fail
     cell beside it, but must not lift it over the sticky Save bar. */
  z-index: 0;
  display: inline-flex;
}
.rpe-help-btn {
  position: absolute;
  top: -0.32rem;
  right: -0.32rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--muted);
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* Stacked above the RPE box corner so a tap on the badge opens it -- but
   the tap area is only a sliver bigger than the badge itself: a big
   invisible hit area (tried before) stole taps meant for the RPE box and
   the Fail cell next to it, popping the guide open by accident. */
.rpe-help-btn { z-index: 2; touch-action: manipulation; }
.rpe-help-btn::before {
  content: "";
  position: absolute;
  inset: -0.15rem;
}
.rpe-help-btn:hover,
.rpe-help-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}
.rpe-help-panel {
  /* Fixed + centered on the viewport (not anchored to the "?" badge's own
     row position) -- the badge can sit anywhere in a wrapping flex row, and
     main/.log-box is itself always horizontally centered on the page, so
     this reliably keeps the panel fully on-screen and roughly aligned with
     the log box regardless of which row triggered it. `top` is set from JS
     per-open, relative to where the tapped badge actually is. */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: min(20rem, calc(100vw - 2rem));
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 0.6rem 0.7rem;
  font-size: 0.75rem;
}
.rpe-help-title {
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--fg);
}
.rpe-help-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.5rem;
  margin: 0;
}
.rpe-help-list dt {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
.rpe-help-list dd {
  margin: 0;
  color: var(--fg);
  white-space: nowrap;
}
/* Per-set note: the pencil is a grid cell; the opened input gets its own
   full-width line under the set (order: 1 puts it after done/remove). */
.sets .set-row .note-toggle-btn {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  font-size: 0.85rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.log-box .sets .set-row .note-toggle-btn.has-note { border-style: solid; color: var(--fg); }
.log-box .sets .set-row .note-toggle-btn.is-open {
  border-style: solid;
  background: color-mix(in oklab, var(--accent) 25%, transparent);
  color: var(--fg);
}
.sets .set-row input.set-note-input {
  grid-column: 1 / -1;
  order: 1;
  width: 100%;
  min-width: 0;
}
.note-toggle-btn {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  white-space: nowrap;
}
.failure-label {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  border: none;
  background: transparent;
  padding: 0;
}
.failure-label input { width: auto; padding: 0; }

.remove-row {
  background: transparent;
  color: var(--danger);
  border: none;
  padding: 0.2rem 0.4rem;
}

.log-box {
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.log-box .field:first-child { margin-top: 0; }
.log-box #add-exercise-btn { margin-bottom: 0; }
.log-box-outside {
  margin-top: 1.5rem;
}
.log-box-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}
button.secondary.danger-text {
  width: auto;
  margin: 0;
  color: var(--danger);
}

.template-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.template-bar select { flex: 1 1 0; min-width: 0; }  /* min-width:0 lets it shrink so Share fits on narrow phones */
.template-bar #share-template-btn { flex-shrink: 0; margin: 0; }
/* Height (not width) matched to .template-bar select -- same font-size and
   *vertical* padding as the base input/select/textarea/button rule (that's
   what actually determines row height), but with its own tighter
   horizontal padding and a short label so it doesn't eat the width the
   select needs and push it out of .log-box. */
.template-bar-recommend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  padding: 0.55rem 0.5rem;
  cursor: pointer;
}

.page-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.page-header-row h1 { margin-bottom: 0; }
.log-header-row { margin-bottom: 1rem; }
/* Turns a name span into a link to that person's profile (feed/leaderboard/
   friends rows) without picking up the browser's default blue/underline. */
.profile-link { color: inherit; text-decoration: none; }
.secondary-link {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.metric-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.metric-tab {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--muted);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
}
.metric-tab.active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card-bg));
}

.chart-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  background: var(--card-bg);
  position: relative;
}
#chart-svg, #growth-chart-svg { width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-grid-zero { stroke: var(--muted); stroke-width: 1.25; }
.chart-axis-label { fill: var(--muted); font-size: 7px; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: var(--card-bg); stroke: var(--accent); stroke-width: 2; }
.chart-point-pr { fill: var(--accent); }

.chart-tooltip {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
  pointer-events: none;
  min-width: 7rem;
}
.chart-tooltip-date { color: var(--muted); font-size: 0.7rem; }
.chart-tooltip-val { font-weight: 700; }
.chart-tooltip-detail { font-size: 0.7rem; margin-top: 0.1rem; }

.chart-summary { margin-top: 0.75rem; }
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 0.2rem 0;
}

.muscle-diagram {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background: var(--card-bg);
}
.body-views {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
}
.body-svg {
  width: 34%;
  max-width: 135px;
}
.body-svg .body-label {
  font-size: 7px;
  fill: var(--muted);
  text-anchor: middle;
}
.body-svg polygon {
  stroke: var(--card-bg);
  stroke-width: 0.4;
}
.body-svg .mg-neutral {
  fill: var(--border);
}
.cardio-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
}
.cardio-circle {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-color);
  font-size: 1.1rem;
}
.muscle-legend {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
}
.legend-headers, .legend-row {
  display: grid;
  /* Fixed widths on every column, not 1fr on Name -- 1fr grows to fill
     100% of whatever width is left in the row, so a short name like "Core"
     left a huge dead zone before Last (much bigger than any other gap,
     since it scaled with the phone's actual width, not the content). Name
     still truncates with an ellipsis (see .legend-name) if a group name
     is longer than its column. Last is 2.2rem, not 1.6rem -- "never" and
     the header word "LAST" were close to or wider than 1.6rem, so they
     were overflowing into Growth's column, not really gapped by the grid
     gap at all. Growth/Fatigue sized to typical content ("3.1 Growing"),
     not the rare longest case ("10.0 High Fatigue"), which would leave
     dead space after every shorter badge -- that rare long combo may nudge
     right to the column's edge instead of always reserving room for it. */
  grid-template-columns: 6.5rem 2.2rem 5rem 5rem;
  align-items: center;
  gap: 0.75rem;
  /* Fixed-width columns leave leftover space at the row's full width
     (phone screens vary; the four columns above don't) -- space-between
     hands that leftover to the three gaps between columns EQUALLY (on top
     of the 0.75rem minimum each already has), so the row fills the card
     edge-to-edge instead of leaving dead space after Fatigue, without
     un-evening the gaps relative to each other. */
  justify-content: space-between;
}
.legend-headers {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}
/* Left-aligned (not right) so the header label sits directly above where
   the score itself starts (see .legend-col-growth/.legend-col-fatigue's
   justify-content: flex-start below) -- scores line up in a straight
   column regardless of how wide each row's phase/readiness badge is. */
.legend-col-growth, .legend-col-fatigue {
  text-align: left;
}
.legend-row {
  font-size: 0.74rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--border);
}
.legend-row:last-child { border-bottom: none; }
.legend-col-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.legend-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Left-aligned (not right) so it doesn't hug up against Growth's own
   left-aligned score across just the grid gap -- that's what was making
   Last and Growth look crowded together while Muscle-to-Last (which had a
   real gap on both sides) looked normal by comparison. */
.legend-col-last {
  font-size: 0.68rem;
  text-align: left;
}
.legend-col-growth, .legend-col-fatigue {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
}
.legend-score {
  font-weight: 600;
}
/* A light tint of the phase/readiness color, not a solid fill -- the fixed
   status hexes (esp. amber/"warning") don't have reliable contrast against
   white text, so badges always read in normal ink and let the tint alone
   carry the color association. */
.legend-phase, .legend-readiness {
  display: inline-block;
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--fg);
  padding: 0.06rem 0.28rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.legend-phase.phase-growing {
  background: color-mix(in oklab, var(--phase-growing) 22%, var(--card-bg));
}
.legend-phase.phase-ready {
  background: color-mix(in oklab, var(--phase-ready) 22%, var(--card-bg));
}
.legend-phase.phase-detraining {
  background: color-mix(in oklab, var(--phase-detraining) 30%, var(--card-bg));
}
.legend-phase.phase-atrophying {
  background: color-mix(in oklab, var(--phase-atrophying) 22%, var(--card-bg));
}
.legend-readiness.readiness-ready {
  background: color-mix(in oklab, var(--phase-growing) 22%, var(--card-bg));
}
.legend-readiness.readiness-fatigue {
  background: color-mix(in oklab, var(--phase-ready) 22%, var(--card-bg));
}
.legend-readiness.readiness-high-fatigue {
  background: color-mix(in oklab, var(--phase-detraining) 30%, var(--card-bg));
}

.equip-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.equip-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--fg);
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.equip-item input { width: auto; padding: 0; }
.equip-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}
.equip-item-text {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.combo-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem;
  margin-top: 0.6rem;
}
.combo-row .combo-checklist {
  margin-bottom: 0.5rem;
}
.combo-row button.secondary.small {
  width: auto;
  margin: 0;
}

.form-tips {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-left: 3px solid var(--accent);
  background: transparent;
}
.form-toggle-btn { margin-top: 0.5rem; }
.form-tips { position: relative; padding-right: 2rem; }
.form-tips-min-btn {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-tips-min-btn:hover,
.form-tips-min-btn:focus-visible { color: var(--fg); background: color-mix(in oklab, var(--fg) 10%, transparent); }
.form-images {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.form-images img {
  width: 48%;
  max-width: 160px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
}
.exercise-status {
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
}
.exercise-status-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.exercise-status-name {
  font-weight: 600;
  font-size: 0.85rem;
  flex: 1;
}
.exercise-status-days {
  font-size: 0.72rem;
}
.exercise-status-stats {
  display: flex;
  gap: 1.25rem;
}
.exercise-status-stat {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.exercise-status-row + .exercise-status-row {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.exercise-status-stat-label {
  font-size: 0.72rem;
}
/* With a projection each stat gets its own line (current -> projected). */
/* Logging (status boxes that can show a projection): always the two-line
   current -> projected grid, so showing/hiding the projection never
   changes the box's height. */
.exercise-status-stats[data-proj-group] {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: 0.35rem;
}
.exercise-status-stats[data-proj-group] .exercise-status-stat { display: contents; }
.exercise-status-stats[data-proj-group] > .exercise-status-stat > * { justify-self: start; }
.status-proj {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 0.5;
}
.status-proj { transition: opacity 0.35s ease; }
.status-proj.is-empty { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s 0.35s; }
.status-proj-arrow {
  position: relative;
  width: 1.4rem;
  border-top: 2px dotted currentColor;
  margin-right: 0.15rem;
}
.status-proj-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -5px;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.new-exercise-form {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.mg-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.15rem 0.75rem;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
}
.mg-check-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  padding: 0.1rem 0;
}
.mg-check-row span {
  flex: 1;
}
.mg-check-row .mg-role {
  font-size: 0.72rem;
  padding: 0.05rem 0.15rem;
}
.mg-check-row .mg-role:disabled {
  opacity: 0.4;
}

.recommend-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.wheel-picker {
  position: relative;
  height: 168px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  -webkit-overflow-scrolling: touch;
}
.wheel-picker-track {
  padding: 56px 0;
}
.wheel-picker-item {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: 1.05rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.wheel-picker-item.selected {
  color: var(--fg);
  font-weight: 700;
  font-size: 1.3rem;
}
.wheel-picker-highlight {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 56px;
  transform: translateY(-50%);
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  pointer-events: none;
}
.time-picker-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 400;
  text-align: left;
}
.time-picker-trigger::after {
  content: "▾";
  color: var(--muted);
}
.wheel-dialog {
  border: none;
  border-radius: 14px;
  padding: 1.25rem;
  background: var(--card-bg);
  color: var(--fg);
  max-width: 20rem;
  width: 90vw;
}
.wheel-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.wheel-dialog-header {
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.75rem;
}
.wheel-dialog #time-wheel-done {
  margin-top: 1rem;
}

.highlights-dialog {
  border: none;
  border-radius: 16px;
  padding: 1.5rem;
  background: var(--card-bg);
  color: var(--fg);
  max-width: 26rem;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}
.highlights-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.highlights-dialog[open] {
  animation: highlights-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes highlights-pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .highlights-dialog[open] { animation: none; }
}
.highlights-header {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
}
.highlights-header-emoji {
  display: inline-block;
  animation: highlights-bounce 0.6s ease-in-out 0.15s;
}
@keyframes highlights-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-6px) scale(1.15); }
  50% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .highlights-header-emoji { animation: none; }
}
.highlights-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 0.2rem 0 1.1rem;
}
.highlights-empty {
  text-align: center;
  color: var(--muted);
  margin: 1rem 0 1.5rem;
}
.highlights-section {
  margin-bottom: 1.1rem;
}
.highlights-section-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}
.highlights-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.highlights-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.highlights-item-pr {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, var(--bg));
}
.highlights-item-name {
  font-weight: 700;
}
.highlights-item-detail {
  color: var(--muted);
  font-size: 0.8rem;
}
.highlights-item-detail b {
  color: var(--fg);
}
#highlights-close-btn {
  margin-top: 0.5rem;
}
.highlights-followup-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.highlights-followup-row button {
  flex: 1;
}

.wrapped-trigger {
  margin-top: 0.75rem;
}
button.secondary.wrapped-trigger {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-color);
  font-weight: 700;
}
button.secondary.wrapped-trigger:hover {
  background: var(--accent-active);
  border-color: var(--accent-active);
}

.wrapped-dialog {
  position: relative;
  border: none;
  border-radius: 16px;
  padding: 1.25rem;
  background: var(--card-bg);
  color: var(--fg);
  max-width: 22rem;
  width: 90vw;
}
.wrapped-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.wrapped-dialog[open] {
  animation: highlights-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
  .wrapped-dialog[open] { animation: none; }
}
.wrapped-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 5;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapped-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  touch-action: pan-y;
}
.wrapped-track {
  display: flex;
  cursor: grab;
  user-select: none;
  transition: transform 0.25s ease;
}
.wrapped-track.dragging {
  transition: none;
  cursor: grabbing;
}
.wrapped-card {
  flex: 0 0 100%;
  box-sizing: border-box;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: 0.4rem;
}
.wrapped-card-a {
  background: color-mix(in oklab, var(--accent) 16%, var(--card-bg));
}
.wrapped-card-b {
  background: color-mix(in oklab, var(--accent) 8%, var(--card-bg));
}
.wrapped-card-emoji {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.wrapped-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--muted);
}
.wrapped-card-number {
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--accent);
}
.wrapped-card-number-sm {
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--accent);
}
.wrapped-card-label {
  font-size: 0.95rem;
  color: var(--fg);
}
.wrapped-card-label b {
  color: var(--accent);
}
.wrapped-card-detail {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
.wrapped-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 85%, transparent);
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.wrapped-nav-prev { left: 0.5rem; }
.wrapped-nav-next { right: 0.5rem; }
.wrapped-dots {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  margin-top: 0.85rem;
}
.wrapped-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--border);
}
.wrapped-dot.active {
  background: var(--accent);
}

.split-options {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.split-btn {
  flex: 1;
  min-width: 5rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--muted);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.split-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card-bg));
}
.split-btn-featured {
  padding: 0.75rem;
  font-size: 0.95rem;
  border-color: var(--accent);
  color: var(--accent);
}
.recommend-results h2 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}
.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.recommend-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
}
.recommend-item-header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.recommend-item-meta {
  font-size: 0.82rem;
}
.recommend-item-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  touch-action: pan-y;
}
.recommend-item-track {
  display: flex;
  cursor: grab;
  user-select: none;
  transition: transform 0.25s ease;
}
.recommend-item-track.dragging {
  transition: none;
  cursor: grabbing;
}
.recommend-item-card {
  flex: 0 0 100%;
  display: flex;
  gap: 0.75rem;
  box-sizing: border-box;
}
.recommend-item-img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}
.recommend-item-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.recommend-item-name {
  font-weight: 600;
}
.recommend-item-equip {
  font-size: 0.82rem;
  margin-top: 0.15rem;
}
.recommend-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 85%, transparent);
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.recommend-nav-prev { left: 0.3rem; }
.recommend-nav-next { right: 0.3rem; }
.recommend-item-dots {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
}
.recommend-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--border);
}
.recommend-dot.active {
  background: var(--accent);
}

.sticky-save {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: 0.75rem 0;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}

.card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem;
  margin-bottom: 0.85rem;
  background: var(--card-bg);
  /* Safety net so nothing (session notes, a long exercise name, ...) can
     ever push past the card's edge -- prefers breaking at a space first,
     only breaks mid-word if a single run genuinely has nowhere else to go. */
  overflow-wrap: break-word;
}
.card-list .card { margin-bottom: 0.5rem; }
.friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.friend-row-actions {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}
.friend-row-actions button.small { margin: 0; }
/* "..." -> Remove friend / Block sheet (static/friend_actions.js) */
.friend-more { letter-spacing: 0.08em; font-weight: 800; }
.profile-more-btn {
  background: none; border: 0; color: var(--fg); padding: 0.3rem 0.5rem;
  font-size: 1.3rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; cursor: pointer; width: auto;
}
.win-card.fa-card { border-color: var(--border); background: var(--card-bg); box-shadow: none; }
.fa-card h2 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.fa-points { text-align: left; margin: 0 0 0.9rem; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.45; }
.fa-points li { margin-bottom: 0.35rem; }
.fa-card .fa-danger { color: var(--danger); }
.win-card.fa-card .win-btn.fa-danger-fill { background: var(--danger); color: var(--on-color); }
.fa-error { margin: 0.5rem 0 0 !important; }

.section-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.section-tab {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  /* Inactive tabs need to read as a distinct, clickable chip in every theme,
     not just accent-colored text on --card-bg (which is barely different
     from --bg in most themes and made them nearly invisible) -- --border
     as a fill and --fg for text are always contrast-checked against --bg. */
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--border);
}
.section-tab.active {
  background: var(--accent);
  color: var(--on-color);
  border-color: var(--accent);
}
.tab-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  margin-left: 0.3rem;
  vertical-align: middle;
}
.recap-dismiss-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
  flex-shrink: 0;
}

.leaderboard-row.is-me {
  background: color-mix(in oklab, var(--accent) 14%, var(--card-bg));
  border-radius: 8px;
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.trend-arrow { font-size: 0.7rem; margin-left: 0.3rem; }
.trend-up { color: var(--phase-growing); }
.trend-down { color: var(--danger); }

.feed-post-header { margin-bottom: 0.35rem; }
.feed-post.is-new { border-color: var(--danger); }
.feed-post-body { font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.6rem; }
.feed-reaction-summary { min-height: 1.1rem; margin-bottom: 0.3rem; font-size: 0.8rem; }
.feed-reaction-picker { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.feed-reaction-picker button.reaction-btn { width: auto; margin: 0; padding: 0.25rem 0.5rem; }
.feed-reaction-picker button.reaction-btn.active-reaction {
  background: color-mix(in oklab, var(--accent) 25%, var(--card-bg));
  border-color: var(--accent);
}
.center-card {
  margin-top: 3rem;
  text-align: center;
}
.center-card form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}
.center-note { margin-top: 1rem; }
/* Terms / Privacy links (register, login, Settings > Feedback) */
.legal-note { font-size: 0.8rem; text-align: center; margin-top: 0.8rem; }

.mini-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.mini-calendar-nav {
  color: var(--accent);
  text-decoration: none;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.15rem 0.6rem;
  border-radius: 6px;
}
.mini-calendar-nav:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.mini-calendar-nav.disabled {
  color: var(--muted);
  opacity: 0.4;
  pointer-events: none;
}
.mini-calendar-back {
  display: block;
  text-align: center;
  margin-top: 0.6rem;
}
.mini-calendar-weekdays,
.mini-calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}
.mini-calendar-weekdays {
  margin-bottom: 0.3rem;
}
.mini-calendar-weekdays span {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.mini-calendar-week-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.mini-calendar-week-row + .mini-calendar-week-row {
  margin-top: 0.15rem;
}
.mini-calendar-week {
  flex: 1;
  min-width: 0;
}
/* Per-week streak overlay -- "hit" (>=1 session that week) shows a lit
   flame, "missed" (week's fully over with none) a greyed-out one, and
   "in_progress" (contains today, not resolved yet) a dim one rather than a
   hard miss -- mirrors compute_streak's own grace period for the current
   week. "future" weeks (not reached yet) render an invisible placeholder so
   row heights stay consistent without showing a premature judgement. */
.week-streak-badge {
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1;
}
.week-streak-missed {
  filter: grayscale(1);
  opacity: 0.35;
}
.week-streak-in_progress {
  filter: grayscale(0.5);
  opacity: 0.55;
}
.week-streak-placeholder {
  visibility: hidden;
}
/* Personal streak freeze (app.streak_freeze): a week it covered, and the
   one banked, next to the Log page streak. */
.week-streak-frozen { font-size: 0.8rem; }
.history-streak { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; }
.hs-flame { font-size: 1.9rem; line-height: 1; }
.hs-lvl-0 { filter: grayscale(1); opacity: 0.4; }
.hs-lvl-1 { filter: grayscale(0.35); opacity: 0.7; }
.hs-main { flex: 1; min-width: 0; font-size: 1.1rem; }
.hs-best { font-size: 0.8rem; }
.hs-freeze { flex-shrink: 0; font-size: 0.8rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px;
  border: 1.5px solid #7cc4f0; background: rgba(124, 196, 240, 0.16); color: var(--fg); }
.hs-freeze-none { border-color: var(--border); background: none; color: var(--muted); font-weight: 600; filter: grayscale(1); opacity: 0.75; }
.hs-note { flex-basis: 100%; margin: 0.2rem 0 0; font-size: 0.78rem; }
.mini-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--fg);
  padding: 0;
}
.mini-calendar-day.empty {
  visibility: hidden;
}
.mini-calendar-day.future {
  color: var(--muted);
  opacity: 0.55;
}
.mini-calendar-day.logged {
  background: var(--accent);
  color: var(--on-color);
  font-weight: 700;
  cursor: pointer;
}
.mini-calendar-day.logged:hover {
  background: var(--accent-active);
}
.mini-calendar-day.today {
  outline: 2px solid var(--outline-grey);
  outline-offset: 2px;
  font-weight: 700;
}

/* Clicking a mini-calendar date scrollIntoView()s this card with block:
   'start' -- without this, the sticky .topnav (~4rem tall) covers the top
   of the card, so the date line ends up hidden behind it and the first
   exercise reads as the top of the scroll instead. */
.session-card { scroll-margin-top: 4.5rem; }
.session-card .session-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.session-header-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.session-header-left .view-highlights-btn { flex-shrink: 0; }
button.secondary.view-highlights-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-color);
}
button.secondary.view-highlights-btn:hover {
  background: var(--accent-active);
  border-color: var(--accent-active);
}
.session-card.highlighted {
  border: 2px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, var(--card-bg));
}
.session-card.highlighted .session-header strong { font-weight: 800; }
.session-actions { display: flex; align-items: center; gap: 0.75rem; }
.session-actions .edit-link { color: var(--accent); font-size: 0.85rem; text-decoration: none; font-weight: 600; }
.delete-form { display: inline; margin: 0; }
.delete-link {
  background: transparent;
  border: none;
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}
.exercise-groups {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.exercise-group + .exercise-group {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.exercise-group-header {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.exercise-group-name {
  font-weight: 600;
  font-size: 0.9rem;
}
.exercise-group-count {
  font-size: 0.78rem;
}
.exercise-group-sets {
  font-size: 0.82rem;
  margin-top: 0.15rem;
}
/* Deliberately NOT white-space: nowrap -- that would also suppress the
   .card's overflow-wrap fallback (nowrap disables every soft-wrap
   opportunity, including break-word), which is exactly what let a long set
   list spill past the card edge on a narrow phone. Leaving this as normal
   wrapping means the browser breaks between sets/at spaces first (the
   common case, looks the same as before on any line that already fits) and
   only breaks mid-word in the rare case a single set's text alone is too
   wide for the card. */
.exercise-group-set { white-space: normal; }
.exercise-group-sep { white-space: normal; }

/* kg/lbs pill toggle -- shared shape between the Log page's per-exercise
   block-header toggle (built in JS, buildUnitToggle) and History's smaller
   per-exercise-group one (.mini, built inline in history.html's script).
   Both hit the same /exercises/{id}/unit preference. */
.unit-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.unit-toggle[hidden] { display: none; }
.unit-toggle-btn {
  background: var(--card-bg);
  color: var(--muted);
  border: none;
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.unit-toggle-btn.active {
  background: var(--accent);
  color: var(--on-color);
}
.unit-toggle.mini .unit-toggle-btn {
  padding: 0.1rem 0.35rem;
  font-size: 0.65rem;
}

.delete-workout-btn,
button.secondary.delete-workout-btn {
  color: var(--danger);
  border-color: var(--danger);
}

.welcome-msg {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 0.25rem;
}

.danger-zone {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.danger-zone h2 { color: var(--danger); }

.failure-badge {
  display: inline-block;
  background: var(--danger);
  color: var(--on-color);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}

.muted { color: var(--muted); font-size: 0.85rem; }
.error { color: var(--danger); }
.notice { color: var(--phase-growing); font-weight: 600; }
.change-password-form { margin-top: 0.5rem; }
.settings-hint { font-size: 0.8rem; margin: 0.25rem 0 0; }

/* "Want to try a new look?" banner -- deliberately a flat, fixed yellow
   regardless of theme (not var(--scroll-yellow), which is muted/grey on the
   mono theme) since the whole point is to stand out as an announcement. */
.theme-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #fcd34d;
  color: #1a1408;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.4rem 0.6rem 0.4rem 0.85rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
.theme-banner-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.theme-banner-action {
  flex-shrink: 0;
  background: #1a1408;
  color: #fcd34d;
  border: none;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  width: auto;
}

/* Small floating shortcut to the Progress page's body diagram, shown on the
   Log page -- reuses the exact same front_view()/back_view() markup/data-group
   attrs as the full diagram, so app.js's existing setGroupDisplay() (driven by
   updateDiagramPreview() as sets are added) keeps it live for free. */
.progress-bubble {
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  width: 5.4rem;
  height: 6.4rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  padding: 0.3rem;
  z-index: 15;
  /* Draggable/resizable (see app.js) -- the right/bottom offsets above are
     just the pre-first-drag default; once moved or resized it switches to
     explicit inline left/top/width/height and stays there (persisted per
     user). touch-action: none stops the browser's own scroll/zoom gestures
     from fighting the drag on touchscreens. */
  touch-action: none;
  cursor: grab;
}
.progress-bubble-dragging {
  cursor: grabbing;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
/* Plays on a plain tap (see app.js's flashMovable) -- since the bubble no
   longer navigates anywhere on tap, this is the only feedback telling
   someone "this is a thing you can grab and move", not a dead end. */
.progress-bubble-flash {
  animation: progress-bubble-shake 0.4s ease;
}
.progress-bubble-flash .progress-bubble-views {
  filter: brightness(0.7);
}
@keyframes progress-bubble-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .progress-bubble-flash { animation: none; }
}
.progress-bubble[hidden] { display: none; }
/* Now a <button> (it no longer navigates -- see app.js), so it needs to
   shed the generic button/input chrome (border/background/padding/radius)
   the base `button` and `input, select, textarea, button` rules would
   otherwise give it, and just fill the bubble invisibly instead. */
.progress-bubble-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font: inherit;
  text-decoration: none;
  cursor: inherit;
}
.progress-bubble-link:active { transform: scale(0.95); }
.progress-bubble-views {
  display: flex;
  gap: 0.15rem;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.progress-bubble-views .body-svg {
  width: auto;
  height: 100%;
  max-width: none;
}
/* Sits in the bubble's corner, slightly overhanging it -- big enough to tap
   without the bubble's own /progress link stealing the click (stopPropagation
   in app.js handles that part). */
.progress-bubble-collapse {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "Little button in theme colours" -- same accent/on-color pairing as
   button.primary, just small and pill-shaped, to re-summon a collapsed
   progress-bubble. */
.progress-toggle-btn {
  background: var(--accent);
  color: var(--on-color);
  border: none;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  white-space: nowrap;
  /* Stays pinned right even if welcome-msg is absent (no first name on
     file) and it ends up the row's only child. */
  margin-left: auto;
}
.progress-toggle-btn[hidden] { display: none; }

.draft-preview-note { margin-bottom: 0.5rem; }

.strava-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.75rem 0;
  max-height: 50vh;
  overflow-y: auto;
}
.strava-preview-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}

/* "Log a Workout" stays truly centered on the page (equal-width flanking
   columns, same trick as the earlier welcome-row) while the streak badge
   sits pinned to the right edge. */
.log-title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.log-title-spacer { justify-self: start; }
.log-title-centered { margin: 0; justify-self: center; white-space: nowrap; }

.streak-badge {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
}
/* Broken streak stacks the flame above "Longest: N" instead of sitting
   beside a number -- there's no current streak number to show inline. */
.streak-badge-broken {
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.25rem 0.55rem;
}
.streak-flame {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.4;
  transform: scale(0.85);
}
.streak-flame-1 { filter: grayscale(0.35); opacity: 0.65; transform: scale(0.9); }
.streak-flame-2 { filter: grayscale(0.1); opacity: 0.85; transform: scale(1); }
.streak-flame-3 { filter: none; opacity: 1; transform: scale(1.15); }
.streak-number {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--fg);
  white-space: nowrap;
}
.streak-longest {
  font-size: 0.65rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Profile page's link to Settings -- reuses .page-header-row's space-between
   so the gear sits flush right of the "Profile" title. */
.profile-settings-btn {
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  flex-shrink: 0;
}
.profile-settings-btn svg { width: 22px; height: 22px; }
.profile-identity-card { text-align: center; }
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 auto 0.5rem;
}
.profile-name { font-weight: 700; font-size: 1.1rem; margin: 0 0 0.2rem; }
.profile-member-since { font-size: 0.7rem; margin-top: 0.15rem; }

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.85rem 0;
}
.profile-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: inherit;
  text-decoration: none;
}
.profile-stat-value { font-size: 1.15rem; font-weight: 800; }
.profile-stat-label {
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.profile-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}
.profile-badge-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.profile-badge-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #2e2510;
  border: 1px solid #6b5220;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.profile-badge-text { flex: 1; min-width: 0; }
.profile-badge-name { font-size: 0.8rem; font-weight: 700; color: #e8b34a; }
.profile-badge-period { font-size: 0.68rem; margin-top: 0.05rem; }

/* Settings hub: a narrow left-hand rail of section buttons next to a content
   pane, matching the "list on left side" iOS/Android-style settings layout
   -- both columns still sit inside main's 480px column, so the rail stays
   slim (fits section labels, not icons+labels) rather than a wide sidebar. */
.settings-layout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
  width: 5.2rem;
  position: sticky;
  top: 0.75rem;
}
.settings-nav-item {
  /* Solid (not transparent) so animated theme backgrounds don't show through. */
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 8px;
  padding: 0.5rem 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
}
.settings-nav-item.active {
  background: var(--accent);
  color: var(--on-color);
  border-color: var(--accent);
}
.settings-content {
  flex: 1;
  min-width: 0;
}
.settings-section h2:first-child { margin-top: 0; }

/* Apple Health: per-session heart rate/calories on History, steps on Progress */
.health-stats { margin: 0.25rem 0 0.5rem; font-size: 0.9rem; }
.health-source { opacity: 0.8; }
.steps-card { display: flex; flex-direction: column; gap: 0.75rem; }
.steps-today { display: flex; align-items: baseline; gap: 0.5rem; }
.steps-today-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.health-connect-status { margin: 0.5rem 0 0; }

/* Chart selection (static/chart_select.js): bold selected mark + guide line,
   tooltip parked on the side away from the selection so it never covers it. */
.chart-point.selected { stroke-width: 3; fill: var(--accent); }
.chart-guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-tooltip.tooltip-left { left: 0.75rem; right: auto; }
.chart-tooltip.tooltip-right { right: 0.75rem; left: auto; }
.chart-bar { fill: color-mix(in oklab, var(--accent) 55%, var(--card-bg)); transition: fill 0.15s; }
.chart-bar.today { fill: var(--accent); }
svg.has-selection .chart-bar { fill: color-mix(in oklab, var(--accent) 30%, var(--card-bg)); }
svg.has-selection .chart-bar.selected { fill: var(--accent); stroke: var(--fg); stroke-width: 1; }
#steps-chart-svg, #steps-day-svg { width: 100%; height: auto; display: block; }
/* Drag-to-scrub (chart_select.js): horizontal drags stay with the chart,
   vertical swipes still scroll the page. */
#chart-svg, #growth-chart-svg, #steps-chart-svg, #steps-day-svg { touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: crosshair; }
.steps-day-title { margin: 0.75rem 0 0.25rem; font-weight: 600; }
/* Fixed chart-sized box so switching days (chart vs "no hourly data")
   never resizes the card and jumps the page. */
.steps-day-area { position: relative; aspect-ratio: 320 / 130; }
.steps-day-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1rem; margin: 0; }
.steps-day-empty[hidden] { display: none; }

/* Progress muscle table <-> body diagram focus (static/muscle_focus.js) */
.legend-row[data-row-group] { cursor: pointer; border-radius: 6px; transition: background 0.15s; }
.legend-row.selected { background: color-mix(in oklab, var(--accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.legend-row.selected .legend-name { font-weight: 700; }
.body-svg polygon[data-group], .cardio-circle { cursor: pointer; transition: opacity 0.15s; }
.muscle-diagram.has-focus .body-svg polygon[data-group]:not(.focused),
.muscle-diagram.has-focus .cardio-circle:not(.focused) { opacity: 0.25; }
.body-svg polygon.focused { stroke: var(--fg); stroke-width: 1.2; }
.cardio-circle.focused { box-shadow: 0 0 0 2px var(--fg); }

/* Goals & Reviews (templates/goals.html, static/goals.js) */
.goals-card > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 0.15rem; }
.goals-card > summary::-webkit-details-marker { display: none; }
.goals-card > summary::after { content: "Edit \25BE"; font-size: 0.8rem; color: var(--accent); align-self: flex-end; margin-top: -1.2rem; }
.goals-card[open] > summary::after { content: "Collapse \25B4"; }
.goals-title { font-weight: 700; font-size: 1.05rem; }
.goals-week { font-weight: 400; font-size: 0.85rem; margin-left: 0.35rem; }
.goals-intro, .goals-hint { font-size: 0.85rem; }
.goals-days { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem 0; }
.goals-projection { border-top: 1px solid var(--border); padding-top: 0.75rem; margin: 0.75rem 0; }
.goals-proj-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin-bottom: 0.4rem; }
.goals-proj-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.goals-proj-delta { font-size: 0.8rem; color: var(--muted); }
.goals-proj-delta.up { color: var(--phase-growing); }
#goals-proj-svg { width: 100%; height: auto; display: block; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.goals-line-baseline { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.goals-axis-workout { fill: var(--fg); font-weight: 700; }
.goals-legend { font-size: 0.75rem; display: flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0 0.5rem; }
.goals-key { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--accent); margin-left: 0.5rem; }
.goals-key.planned { margin-left: 0; }
.goals-key.baseline { border-top: 2px dashed var(--muted); }
.goals-feedback { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.goals-fb { font-size: 0.85rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: color-mix(in oklab, var(--border) 45%, transparent); }
.goals-fb-warn { background: color-mix(in oklab, var(--phase-detraining) 18%, transparent); }
.goals-fb-good { background: color-mix(in oklab, var(--phase-growing) 18%, transparent); }
.goals-status { margin: 0.5rem 0 0; }
.goals-calendar { margin-top: 0.75rem; }
.planned-today-note { margin: 0 0 0.5rem; font-size: 0.85rem; }
.planned-today-card { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.75rem; }
.planned-today-card p { margin: 0.15rem 0 0; font-size: 0.85rem; }
.planned-today-card button { flex-shrink: 0; }
/* Six nav buttons + profile since Goals & Reviews was added -- keep it on
   one line on narrow phones (iPhone SE/mini width) without horizontal scroll. */
@media (max-width: 400px) {
  .topnav { gap: 0.4rem; padding-left: 0.6rem; padding-right: 0.6rem; }
  .nav-btn { padding: 0.48rem; }
}
.goals-day[hidden] { display: none; }
.goals-day-label { font-size: 0.9rem; font-weight: 600; }
/* Progress reviews (app/reviews.py; review_week/month.html, reviews.html) */
.rv-due { display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; border-color: var(--accent); margin-bottom: 0.75rem; }
.rv-due-icon { font-size: 1.6rem; line-height: 1; }
.rv-due-text { display: flex; flex-direction: column; flex: 1; gap: 0.1rem; }
.rv-due-text .muted { font-size: 0.85rem; }
.rv-due-go { font-size: 1.6rem; color: var(--accent); }
.rv-period { margin: -0.3rem 0 0.9rem; }
.rv-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; text-align: center; }
.rv-day { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.rv-day-letter { font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.rv-day-dot {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); font-weight: 800; color: var(--on-color); box-sizing: border-box;
}
.rv-done .rv-day-dot, .rv-key.rv-done { background: var(--accent); border-color: var(--accent); }
.rv-extra .rv-day-dot, .rv-key.rv-extra { background: color-mix(in oklab, var(--accent) 45%, transparent); border-color: var(--accent); }
.rv-missed .rv-day-dot, .rv-key.rv-missed { border-color: var(--danger); color: var(--danger); }
.rv-planned .rv-day-dot { border-style: dashed; border-color: var(--accent); }
.rv-week-line { text-align: center; margin: 0.75rem 0 0.2rem; }
.rv-legend { text-align: center; font-size: 0.75rem; margin: 0; }
.rv-key { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 2px solid; vertical-align: -0.1rem; margin: 0 0.15rem 0 0.5rem; }
.rv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.5rem; margin: 0.75rem 0; }
.rv-tile { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 0.7rem 0.5rem; text-align: center; }
.rv-tile-value { font-size: 1.35rem; font-weight: 800; }
.rv-tile-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.rv-tile-sub { font-size: 0.72rem; margin-top: 0.15rem; }
.rv-section h2, .rv-checkin h2, .rv-suggest h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.rv-sub { font-size: 0.8rem; margin: -0.35rem 0 0.6rem; }
.rv-list { list-style: none; margin: 0; padding: 0; }
.rv-list li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--border); font-size: 0.92rem; }
.rv-list li:first-child { border-top: 0; }
.rv-list li > span:last-child { text-align: right; white-space: nowrap; }
.rv-links a { color: var(--fg); text-decoration: none; font-weight: 600; }
.rv-up { color: #22c55e; font-weight: 700; }
.rv-down { color: var(--danger); font-weight: 700; }
.rv-flat { color: var(--muted); font-weight: 700; }
.rv-tag { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #f59e0b; border: 1px solid; border-radius: 999px; padding: 0 0.4rem; margin-left: 0.25rem; }
.rv-chip-label { font-size: 0.78rem; margin: 0 0 0.3rem; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.rv-chip { font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--fg); width: auto; margin: 0; }
.rv-chip-warn { border-color: #f59e0b; color: #f59e0b; }
button.rv-chip.selected { background: var(--accent); border-color: var(--accent); color: var(--on-color); }
.rv-q { font-weight: 700; font-size: 0.9rem; margin: 0.8rem 0 0.4rem; }
.rv-checkin h2 + .rv-q { margin-top: 0; }
.rv-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; }
.rv-scale-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.45rem 0.1rem; margin: 0;
  background: transparent; border: 1.5px solid var(--border); border-radius: 12px; color: var(--fg); width: auto;
}
.rv-scale-btn.selected { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 22%, transparent); }
.rv-scale-emoji { font-size: 1.4rem; line-height: 1.1; }
.rv-scale-label { font-size: 0.68rem; font-weight: 600; color: var(--muted); }
.rv-scale-btn.selected .rv-scale-label { color: var(--fg); }
.rv-note { width: 100%; box-sizing: border-box; }
.rv-save { width: 100%; margin-top: 0.8rem; }
.rv-suggest { border-color: var(--accent); }
.rv-suggest-list { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.rv-suggest-list li { display: flex; gap: 0.6rem; padding: 0.45rem 0; line-height: 1.4; font-size: 0.92rem; }
.rv-suggest-icon { font-size: 1.15rem; line-height: 1.3; }
.rv-plan-btn { display: block; text-align: center; text-decoration: none; padding: 0.7rem; border-radius: 12px; background: var(--accent); color: var(--on-color); font-weight: 700; }
.rv-bars { display: flex; gap: 0.5rem; align-items: flex-end; justify-content: space-around; }
.rv-bar-col { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; flex: 1; }
.rv-bar { width: 100%; max-width: 2.6rem; height: 5.5rem; display: flex; align-items: flex-end; background: color-mix(in oklab, var(--border) 50%, transparent); border-radius: 8px; overflow: hidden; }
.rv-bar-fill { width: 100%; background: var(--accent); border-radius: 8px 8px 0 0; min-height: 2px; }
.rv-bar-n { font-weight: 800; font-size: 0.9rem; min-height: 1.1em; }
.rv-bar-label { font-size: 0.7rem; }
.rv-future .rv-bar { opacity: 0.4; }
.rv-hbars { display: flex; flex-direction: column; gap: 0.35rem; }
.rv-hbar { display: grid; grid-template-columns: 6.2rem 1fr 1.8rem; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.rv-hbar-track { height: 0.6rem; border-radius: 999px; background: color-mix(in oklab, var(--border) 60%, transparent); overflow: hidden; }
.rv-hbar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.rv-hbar-n { text-align: right; font-weight: 700; }
.rv-light .rv-hbar-label, .rv-light .rv-hbar-n { color: #f59e0b; }
.rv-light .rv-hbar-fill { background: #f59e0b; }
.rv-all { text-align: center; }
.rv-headline { border-color: var(--accent); }
.rv-headline-text { font-size: 1.2rem; font-weight: 800; margin: 0; line-height: 1.3; }
.rv-headline-sub { margin: 0.3rem 0 0; color: var(--muted); }
.rv-tone-good { background: linear-gradient(180deg, color-mix(in oklab, #22c55e 18%, transparent), transparent 80%), var(--card-bg); border-color: #22c55e; }
.rv-tone-low { border-color: var(--border); }
.rv-takeaway { display: flex; gap: 0.7rem; padding: 0.55rem 0; border-top: 1px solid var(--border); }
.rv-takeaway:first-child { border-top: 0; padding-top: 0; }
.rv-takeaway:last-child { padding-bottom: 0; }
.rv-takeaway-icon { font-size: 1.3rem; line-height: 1.35; flex-shrink: 0; }
.rv-takeaway-title { margin: 0; font-weight: 700; }
.rv-takeaway-text { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--muted); line-height: 1.4; }
.rv-takeaway-watch .rv-takeaway-title { color: #f59e0b; }
.rv-checkin-summary { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; }
.rv-checkin-summary::-webkit-details-marker { display: none; }
.rv-checkin-summary .muted { font-size: 0.85rem; }
.rv-checkin[open] .rv-checkin-summary { margin-bottom: 0.4rem; }
.rv-checkin[open] .rv-edit { display: none; }
.rv-edit { color: var(--accent); font-size: 0.85rem; font-weight: 700; }
.rv-next { border-color: var(--accent); }
.rv-next h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.rv-next-row { display: flex; gap: 0.6rem; }
.rv-next-icon { font-size: 1.2rem; line-height: 1.3; }
.rv-next-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0.9rem 0 0.35rem; }
.rv-next-line { margin: 0.2rem 0; font-size: 0.9rem; line-height: 1.4; }
.rv-plan-days { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.rv-plan-day { font-size: 0.78rem; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--border); }
.rv-targets { list-style: none; margin: 0; padding: 0; }
.rv-target { padding: 0.45rem 0 0.45rem 0.6rem; border-left: 3px solid var(--border); margin-bottom: 0.35rem; }
.rv-target-up { border-left-color: #22c55e; }
.rv-target-rep { border-left-color: var(--accent); }
.rv-target-switch { border-left-color: #f59e0b; }
.rv-target-ease, .rv-target-hold { border-left-color: var(--muted); }
.rv-target-top { display: flex; justify-content: space-between; gap: 0.5rem; font-weight: 700; font-size: 0.92rem; }
.rv-target-to { white-space: nowrap; }
.rv-target-why { font-size: 0.78rem; margin-top: 0.1rem; }
.rv-next .rv-plan-btn { margin-top: 1rem; width: 100%; border: 0; font-size: 1rem; cursor: pointer; box-sizing: border-box; }
.rv-plan-secondary { background: transparent !important; color: var(--accent) !important; border: 1px solid var(--accent) !important; }
.rv-apply-note { font-size: 0.75rem; text-align: center; margin: 0.4rem 0 0; }
.rv-numbers summary { cursor: pointer; }
.rv-numbers[open] summary { margin-bottom: 0.7rem; }
.rv-focus { list-style: none; margin: 0; padding: 0; }
.rv-focus li { display: flex; gap: 0.7rem; padding: 0.45rem 0; line-height: 1.4; font-size: 0.92rem; }
/* Lift targets: action, last time -> next week, why (reviews._lift_target) */
.rv-replay { width: auto; margin: 0; padding: 0.35rem 0.75rem; font-size: 0.8rem; font-weight: 700; border-radius: 999px; background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.rv-lift { padding: 0.75rem 0; border-top: 1px solid var(--border); }
.rv-lift:first-of-type { border-top: 0; padding-top: 0.2rem; }
.rv-lift-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.rv-lift-action { font-size: 0.78rem; font-weight: 800; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; background: color-mix(in oklab, var(--accent) 20%, transparent); color: var(--fg); }
.rv-lift-up .rv-lift-action { background: color-mix(in oklab, #22c55e 25%, transparent); }
.rv-lift-slow .rv-lift-action, .rv-lift-switch .rv-lift-action { background: color-mix(in oklab, #f59e0b 25%, transparent); }
.rv-lift-ease .rv-lift-action, .rv-lift-hold .rv-lift-action { background: color-mix(in oklab, var(--muted) 25%, transparent); }
.rv-lift-nums { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0.35rem; }
.rv-lift-nums > div { display: flex; flex-direction: column; padding: 0.4rem 0.6rem; border-radius: 10px; background: color-mix(in oklab, var(--border) 35%, transparent); }
.rv-lift-nums small { font-size: 0.68rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.rv-lift-nums span { font-weight: 800; }
.rv-lift-nums .rv-lift-next { background: color-mix(in oklab, var(--accent) 22%, transparent); }
.rv-lift-arrow { color: var(--muted); font-weight: 800; }
.rv-lift-how { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
a.rv-lift-max { display: inline-block; text-decoration: none; }
.rv-lift-max { width: auto; margin: 0.4rem 0 0; padding: 0; background: none; border: 0; color: var(--accent); font-size: 0.8rem; font-weight: 700; text-align: left; }
/* The review story (static/review_story.js) inside the celebration dialog */
/* The content box is held to the screen (the celebration's own rule lets it
   grow), so a long page scrolls inside the stage and Continue stays put.
   margin:auto centres a short page but lets a long one start at the top. */
.review-story.celebrate-v2:not(.on-final) #review-story-content, .review-story.celebrate-v2:not(.on-final) .story-content { flex: 1 1 0; min-height: 0; }
.review-story:not(.on-final) .cel-stage { justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
.review-story .cel-stage > .cel-page:not(.out) { margin: auto 0; }
.review-story .cel-continue { flex-shrink: 0; }
.rv-ready { display: flex; gap: 0.65rem; padding: 0.6rem 0; border-top: 1px solid var(--border); }
.rv-ready:first-of-type { border-top: 0; padding-top: 0.1rem; }
.rv-ready-icon { font-size: 1.2rem; line-height: 1.35; }
.rv-ready-line { margin: 0; }
.rv-ready-say { margin: 0.15rem 0 0; font-size: 0.88rem; line-height: 1.4; }
.rs-say { color: var(--fg) !important; font-size: 0.9rem !important; line-height: 1.4; }
.rs-days { display: grid; grid-template-columns: repeat(7, 2.3rem); gap: 0.35rem; justify-content: center; margin-top: 0.8rem; }
.rs-day { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; opacity: 0; transform: scale(0.6); transition: all 0.3s cubic-bezier(0.3, 1.7, 0.5, 1); }
.rs-day.in { opacity: 1; transform: none; }
.rs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.rs-gain { color: #22c55e !important; font-weight: 900; font-size: 0.95rem !important; }
.rs-takeaway.rs-watch b { color: #f59e0b; }
.rs-form { width: 100%; max-width: 22rem; text-align: left; margin-top: 0.6rem; }
.rs-error { margin: 0.6rem 0 0; text-align: center; }
.rs-skip { display: block; width: auto; margin: 0.8rem auto 0; background: none; border: 0; color: var(--muted); font-weight: 700; text-decoration: underline; }
.rs-action { font-size: 0.75rem !important; font-weight: 800; color: var(--fg) !important; white-space: nowrap; }
.rs-nums { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.4rem; margin: 0.45rem 0 0.3rem; }
.rs-num { display: flex; flex-direction: column; padding: 0.35rem 0.55rem; border-radius: 10px; background: color-mix(in oklab, var(--border) 35%, transparent); }
.rs-num small { font-size: 0.65rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.rs-num strong { font-size: 0.95rem; }
.rs-num-next { background: color-mix(in oklab, var(--accent) 22%, transparent); }
.rs-arrow { color: var(--muted) !important; font-weight: 800; }
.rs-how { font-size: 0.82rem !important; line-height: 1.35; }
.rs-up { border-color: #22c55e; }
.rs-slow, .rs-switch { border-color: #f59e0b; }
.rs-max { width: auto; margin: 0.35rem 0 0; padding: 0; background: none; border: 0; color: var(--accent); font-size: 0.78rem; font-weight: 700; text-align: left; }
.rs-max-done { color: #22c55e !important; font-size: 0.78rem !important; font-weight: 700; margin-top: 0.3rem; }
.rs-actions { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 22rem; margin-top: 1.2rem; }
.rs-btn { display: block; width: 100%; text-align: center; text-decoration: none; padding: 0.85rem; border-radius: 14px; font-weight: 800; box-sizing: border-box; margin: 0; }
a.rs-btn.primary { background: var(--accent); color: var(--on-color); }
.rs-note { font-size: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .rs-day { opacity: 1; transform: none; transition: none; } }

.goals-week-tabs { display: flex; gap: 0.4rem; justify-content: center; margin: 0 0 0.75rem; }
.goals-week-tab { padding: 0.35rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); color: var(--fg); text-decoration: none; font-size: 0.85rem; background: var(--card-bg); }
.goals-week-tab.active { background: var(--accent); border-color: var(--accent); color: var(--on-color); font-weight: 600; }
/* Day picker: same big tappable dots as History's mini calendar. */
.goals-dots-weekdays, .goals-dots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; text-align: center; }
.goals-dots-weekdays { font-size: 0.72rem; color: var(--muted); margin-top: 0.75rem; }
.goals-dots { margin: 0.3rem 0 0.75rem; }
.goals-dot {
  aspect-ratio: 1; width: 100%; max-width: 2.75rem; justify-self: center;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border-radius: 50%; border: 2px solid var(--border); background: transparent;
  color: var(--fg); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.goals-dot.selected { background: var(--accent); border-color: var(--accent); color: var(--on-color); }
.goals-dot.today { outline: 2px solid var(--outline-grey); outline-offset: 2px; }
.goals-dot:disabled { opacity: 0.35; cursor: default; }
.goals-empty { font-size: 0.85rem; margin: 0 0 0.5rem; }
/* Goals & Reviews nav icon: a soft red target. Its own token (not
   --phase-atrophying) so it can be lightened on themes whose nav-button
   background is itself red/pink/orange, where full red would vanish. */
.nav-goals { --goals-target-red: #ff7b7b; }
:root[data-theme="pinkify"] .nav-goals,
:root[data-theme="fire"] .nav-goals { --goals-target-red: #ffe3e3; }
/* Day row: label | time (sized to its content, never stretched) | template
   (takes the rest). Flex rather than a fractional grid -- iOS renders
   <input type="time"> wider than a narrow grid track and it overflowed onto
   the template select. */
.goals-day { display: flex; align-items: center; gap: 0.5rem; }
.goals-day-label { flex: 0 0 3.6rem; white-space: nowrap; }
.goals-day input[type="time"] { flex: 0 0 auto; width: 6.4rem; min-width: 0; max-width: 6.4rem; font-size: 0.85rem; -webkit-appearance: none; appearance: none; text-align: left; }
.goals-day select { flex: 1 1 auto; min-width: 0; width: auto; font-size: 0.85rem; }

/* Progress chart time ranges (static/range_nav.js) + steps week arrows */
.range-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.25rem 0 0.5rem; flex-wrap: wrap; }
.range-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.range-tab { background: transparent; color: var(--fg); padding: 0.3rem 0.75rem; font-size: 0.8rem; border-radius: 0; width: auto; }
.range-tab.active { background: var(--accent); color: var(--on-color); }
.range-step { display: inline-flex; align-items: center; gap: 0.35rem; }
.range-label { font-size: 0.85rem; font-weight: 600; min-width: 6.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.range-arrow { background: var(--card-bg); color: var(--fg); border: 1px solid var(--border); border-radius: 50%; width: 1.9rem; height: 1.9rem; padding: 0; font-size: 1.1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.range-arrow:disabled { opacity: 0.3; cursor: default; }
#steps-range .range-label { min-width: 0; width: 8.6rem; }
.steps-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }

/* Template share links: Log page picker + /t/<code> preview page */
.share-template-picker { margin: 0.4rem 0 0.6rem; }
.share-template-status { font-size: 0.8rem; margin: 0.3rem 0 0; word-break: break-all; }
.share-byline { text-align: center; margin-top: -0.5rem; }
.share-note { font-size: 0.9rem; }
.share-items { list-style: none; padding: 0; margin: 0.5rem 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.share-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; }
.share-item.needs-swap { border-color: color-mix(in oklab, var(--phase-detraining) 60%, var(--border)); }
.share-item-main { display: flex; flex-direction: column; min-width: 0; }
.share-item-name { font-weight: 600; }
.share-item-meta, .share-missing, .share-noswap { font-size: 0.8rem; }
.share-ok { color: var(--phase-growing); font-weight: 700; font-size: 1.1rem; }
.share-swap { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; }
.share-swap-choice { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.88rem; }
.share-fine { font-size: 0.8rem; margin-top: 0.5rem; }

/* Template editor (/templates, static/templates_editor.js) */
.tpl-back { display: inline-block; margin-bottom: 0.25rem; }
.tpl-new-btn { margin-bottom: 0.75rem; }
.tpl-list { display: flex; flex-direction: column; gap: 0.6rem; }
.tpl-card > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.tpl-card > summary::-webkit-details-marker { display: none; }
.tpl-card > summary::after { content: "Edit \25BE"; font-size: 0.8rem; color: var(--accent); flex-shrink: 0; }
.tpl-card[open] > summary::after { content: "Close \25B4"; }
.tpl-card.dirty > summary .tpl-summary-name::after { content: " \2022"; color: var(--phase-detraining); }
.tpl-summary-name { font-weight: 700; }
.tpl-summary-meta { font-size: 0.8rem; margin-left: auto; }
.tpl-label { display: block; font-size: 0.8rem; margin-top: 0.75rem; color: var(--muted); }
.tpl-name { width: 100%; }
.tpl-rows { list-style: none; padding: 0; margin: 0.75rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.tpl-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.45rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; }
.tpl-row-name { flex: 1 1 8rem; min-width: 0; font-size: 0.9rem; }
.tpl-sets, .tpl-move { display: inline-flex; align-items: center; gap: 0.25rem; }
.tpl-sets-value { min-width: 3.4rem; text-align: center; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.tpl-icon-btn { width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; background: var(--card-bg); color: var(--fg); border: 1px solid var(--border); font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; }
.tpl-icon-btn:disabled { opacity: 0.3; cursor: default; }
.tpl-remove { color: var(--danger); }
.tpl-row-empty { font-size: 0.85rem; }
.tpl-add-select { width: 100%; margin-bottom: 0.5rem; }
.tpl-status { font-size: 0.85rem; min-height: 1.1em; margin: 0.25rem 0 0.5rem; }
.tpl-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.tpl-actions button { flex: 1 1 auto; margin: 0; }

/* My Exercises (/exercises/manage, static/exercises_manage.js) -- reuses the
   template editor's card styles (.tpl-*) */
.ex-intro { font-size: 0.85rem; text-align: center; }
.ex-card.archived > summary .tpl-summary-name { opacity: 0.55; text-decoration: line-through; }
.ex-category, .ex-notes { width: 100%; }
.ex-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.35rem 0.6rem; margin: 0.3rem 0 0.4rem; }
.ex-group { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; font-size: 0.85rem; }
.ex-role { width: auto; min-width: 0; font-size: 0.8rem; padding: 0.2rem 0.3rem; }
.ex-warn { font-size: 0.82rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: color-mix(in oklab, var(--phase-detraining) 18%, transparent); margin: 0.5rem 0 0; }
/* Show Progress now shares the Remove all row (left side) instead of its own
   header row; the row stays right-aligned when it's hidden. */
.log-box-header { align-items: center; gap: 0.5rem; }
.log-box-header .progress-toggle-btn { margin-left: 0; margin-right: auto; font-size: 0.8rem; padding: 0.35rem 0.8rem; }

/* Log page tips banner (static/tips.js, app/tips.py). Theme-aware: built
   only from the theme tokens (--accent, --card-bg, --fg, ...) so it reads
   right on every theme, light or dark. */
.tips-banner { margin: 0 0 1rem; }
.tips-card {
  position: relative; overflow: hidden;
  padding: 0.65rem 0.8rem 0.75rem 0.95rem; border-radius: 14px;
  /* Accent wash down from the whole top edge, plus the coloured bar on the
     left (accent for tips, green for quotes) -- the tips card keeps its
     stripe; the Log form below uses a full coloured border instead. */
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 70%),
    color-mix(in oklab, var(--accent) 6%, var(--card-bg));
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  box-shadow: 0 6px 18px -12px color-mix(in oklab, var(--accent) 70%, transparent);
}
.tips-card::before {  /* coloured bar on the left */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 40%, transparent));
}
.tips-card.kind-quote::before { background: linear-gradient(180deg, var(--phase-growing), color-mix(in oklab, var(--phase-growing) 40%, transparent)); }
.tips-card.kind-quote {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--phase-growing) 20%, transparent) 0%, transparent 70%),
    color-mix(in oklab, var(--phase-growing) 5%, var(--card-bg));
  border-color: color-mix(in oklab, var(--phase-growing) 30%, var(--border));
}
.tips-top { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; flex-wrap: nowrap; min-height: 1.75rem; }
.tips-chip, .tips-new { white-space: nowrap; flex-shrink: 0; }
.tips-chip {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--fg);
}
.kind-quote .tips-chip { background: color-mix(in oklab, var(--phase-growing) 22%, transparent); }
.tips-new {
  font-size: 0.66rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 999px;
  background: var(--accent); color: var(--on-color);
}
.tips-controls { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; }
.tips-btn {
  width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 50%;
  background: transparent; color: var(--fg); font-size: 1.1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; opacity: 0.75;
}
.tips-btn:hover, .tips-btn:focus-visible { opacity: 1; background: color-mix(in oklab, var(--accent) 18%, transparent); }
.tips-slide { min-height: 2.6rem; }  /* locked to the tallest item by tips.js */
.tips-text { margin: 0; font-size: 0.9rem; line-height: 1.4; }
.kind-quote .tips-text { font-size: 1.02rem; font-style: italic; font-weight: 600; line-height: 1.35; }
.kind-quote .tips-text::before { content: "\201C"; }
.kind-quote .tips-text::after { content: "\201D"; }
.tips-link {
  display: inline-flex; align-items: center; margin-top: 0.4rem; padding: 0.2rem 0.6rem;
  border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-decoration: none;
  color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
}
/* display:inline-flex above would otherwise override the hidden attribute
   (quotes, and tips without a link, must not show a stale link pill). */
.tips-link[hidden], .tips-new[hidden] { display: none; }
.tips-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in oklab, var(--accent) 12%, transparent); }
.tips-progress span { display: block; height: 100%; width: 0; background: color-mix(in oklab, var(--accent) 75%, transparent); }
.kind-quote .tips-progress span { background: color-mix(in oklab, var(--phase-growing) 75%, transparent); }
/* Slide transitions (skipped under prefers-reduced-motion by tips.js) */
.tips-slide.out { opacity: 0; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease; }
.tips-slide.in-right { animation: tips-in-right 0.28s ease both; }
.tips-slide.in-left { animation: tips-in-left 0.28s ease both; }
@keyframes tips-in-right { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes tips-in-left { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
/* Minimised: just a pill */
.tips-pill { display: none; }
.tips-banner.minimised .tips-card { display: none; }
.tips-banner.minimised .tips-pill {
  display: inline-flex; align-items: center; gap: 0.3rem; width: auto;
  padding: 0.28rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  background: color-mix(in oklab, var(--accent) 12%, var(--card-bg)); color: var(--fg);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
}

/* Log a Workout form box -- same card language as the tips banner above it
   (accent wash down from the whole top edge, full coloured border, soft shadow). No
   overflow:hidden here -- it would clip the RPE help popover and dropdowns. */
.log-box {
  border: 1.5px solid color-mix(in oklab, var(--accent) 65%, transparent);
  border-radius: 14px;
  padding: 1rem;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 16%, transparent) 0, transparent 22rem),
    color-mix(in oklab, var(--accent) 5%, var(--card-bg));
  box-shadow: 0 8px 22px -14px color-mix(in oklab, var(--accent) 70%, transparent);
}
.log-box .block { box-shadow: 0 2px 8px -6px color-mix(in oklab, var(--fg) 40%, transparent); }

/* Log section buttons: theme-colour outline on every button (user request).
   Filled ones (Save workout, Show Progress) already are the theme colour.
   Danger buttons keep their red text; "+ note" keeps its dashed style. */
.log-box button.secondary,
.log-box .template-bar-recommend,
.log-box .remove-row,
.log-box #date,
.log-box #gym-select,
.log-box #template-select,
.log-box .unit-toggle,
#save-template-btn {
  border: 1.5px solid color-mix(in oklab, var(--accent) 70%, transparent);
}
.log-box .note-toggle-btn { border: 1.5px dashed color-mix(in oklab, var(--accent) 70%, transparent); }
.log-box .rpe-help-btn { border: 1px solid color-mix(in oklab, var(--accent) 70%, transparent); } /* thinner on the small badge */
/* "Remove exercise" stays plain red text (no outline) -- user request. */
.log-box .remove-row {
  border-radius: 50%; width: 2rem; height: 2rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.log-box .unit-toggle-btn { border: none; }
/* Phone widths: the exercise dropdown was squeezed to ~20-70px by the kg/lbs
   toggle + "Remove exercise" beside it (names unreadable). Give it the whole
   first line; the controls wrap to a right-aligned line below. */
@media (max-width: 480px) {
  .block-header { flex-wrap: wrap; row-gap: 0.45rem; }
  .block-header .exercise-select { flex: 1 1 calc(100% - 2.4rem); }
  .block-header .unit-toggle { margin-left: auto; }
}

/* Native controls in the theme colour where the platform allows it:
   checkboxes (e.g. "Failure"), radio buttons, and -- on browsers that honour
   it -- date-picker highlights. The date picker pop-up itself is drawn by
   iOS, so this is best-effort; light/dark already follows each theme's
   color-scheme. */
:root { accent-color: var(--accent); }
/* Selected field in the Log form: theme-colour border + glow. */
.log-box input:focus, .log-box select:focus, .log-box textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
}
/* The highlighted day/month/year segment while editing the date (Chrome,
   Android, desktop Safari) -- theme colour instead of system blue. */
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background-color: var(--accent);
  color: var(--on-color);
  border-radius: 3px;
}

/* Each exercise box (picker, sets, Remove exercise) gets the theme outline
   -- the box, not the dropdown inside it. Finished exercises keep their
   green border so "done" still reads at a glance. */
.log-box .block { border: 1.5px solid color-mix(in oklab, var(--accent) 70%, transparent); }
.log-box .block.finished { border-color: var(--phase-growing); }

/* Tips card: quotes use the same accent colour as tips, so the card no
   longer flips between blue and green as it cycles (user feedback: the
   changing colour was hard on the eyes). Overrides the kind-quote colours. */
.tips-card.kind-quote {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 70%),
    color-mix(in oklab, var(--accent) 6%, var(--card-bg));
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
.tips-card.kind-quote::before { background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 40%, transparent)); }
.kind-quote .tips-chip { background: color-mix(in oklab, var(--accent) 22%, transparent); }
.kind-quote .tips-progress span { background: color-mix(in oklab, var(--accent) 75%, transparent); }

/* Log a Workout card: one flat, even shade of green instead of the fading
   accent gradient (user feedback: the colour shifting down the card was hard
   on the eyes). The theme-colour border and button outlines are unchanged. */
.log-box {
  background: color-mix(in oklab, var(--phase-growing) 7%, var(--card-bg));
}

/* App-wide card design (same principles as the Log workout card): flat,
   even green tint, theme-colour border, rounded corners, soft shadow, and
   theme-colour outlines on the buttons and fields inside. Applies to the
   generic .card (History, Goals, Friends, Profile, Feed, My Templates...),
   the Progress chart/diagram boxes and the Settings panels. */
.card, .chart-card, .muscle-diagram, .settings-section, .profile-stat {
  background: color-mix(in oklab, var(--phase-growing) 7%, var(--card-bg));
  border: 1.5px solid color-mix(in oklab, var(--accent) 65%, transparent);
  border-radius: 14px;
  box-shadow: 0 8px 22px -14px color-mix(in oklab, var(--accent) 70%, transparent);
}
.settings-section { padding: 1rem; }
:is(.card, .chart-card, .muscle-diagram, .settings-section) :is(
  button.secondary,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  select,
  textarea
) {
  border: 1.5px solid color-mix(in oklab, var(--accent) 70%, transparent);
}
:is(.card, .chart-card, .muscle-diagram, .settings-section) :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
}
/* Fields that sit just outside a card but belong to one (Friends search,
   Progress chart pickers) get the same theme outline. */
#friend-search, #growth-select, #exercise-select {
  border: 1.5px solid color-mix(in oklab, var(--accent) 70%, transparent);
}
#friend-search:focus, #growth-select:focus, #exercise-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
}

/* Leaderboard reuses the Progress muscle table's grid, whose fixed 6.5rem
   name column cut full names off ("Sarah Risby-Jo..."). Here the name gets
   all the spare width (and wraps rather than truncating if it's genuinely
   long), the empty 2nd column collapses, and Avg/Current fit their numbers. */
.leaderboard-legend .legend-headers,
.leaderboard-legend .legend-row {
  grid-template-columns: minmax(0, 1fr) 0 3rem 4.4rem;
  gap: 0.5rem;
  justify-content: stretch;
}
.leaderboard-legend .legend-col-name { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.leaderboard-legend .legend-name {
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; line-height: 1.25;
}
.leaderboard-legend .legend-col-last, .leaderboard-legend .legend-col-growth { text-align: right; justify-content: flex-end; }

/* Profile: average growth chart + this month's calendar (templates/profile.html) */
.profile-growth-card { margin-bottom: 0.4rem; }
.profile-month .mini-calendar-day.logged { text-decoration: none; }
span.mini-calendar-day.logged { cursor: default; }
/* Back button (top-left) on other people's profiles */
.profile-title { display: inline-flex; align-items: center; gap: 0.5rem; }
.back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; flex-shrink: 0;
  font-size: 1.6rem; line-height: 1; text-decoration: none; color: var(--fg);
  border: 1.5px solid color-mix(in oklab, var(--accent) 70%, transparent);
  background: color-mix(in oklab, var(--accent) 10%, var(--card-bg));
  padding-bottom: 0.15rem;
}

/* Leaderboard: taller rows + a mini average-growth chart per person. */
.leaderboard-legend .legend-headers,
.leaderboard-legend .legend-row {
  grid-template-columns: minmax(0, 1fr) 4.2rem 2.8rem 4.2rem;
}
.leaderboard-legend .legend-row { padding: 0.7rem 0.35rem; font-size: 0.92rem; min-height: 3.2rem; }
.leaderboard-legend .legend-headers { padding: 0 0.35rem; }
.lb-spark-head { text-align: center; }
.lb-spark-cell { display: flex; align-items: center; justify-content: center; }
.lb-spark { width: 4.2rem; height: 1.6rem; overflow: visible; }
.lb-spark polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lb-spark.up polyline { stroke: var(--phase-growing); }
.lb-spark.down polyline { stroke: var(--danger); }
.lb-spark-zero { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
/* Your own (highlighted) row keeps the same box as the others, so its
   chart and numbers line up with every other row's columns. */
.leaderboard-legend .leaderboard-row.is-me { margin: 0; padding-left: 0.35rem; padding-right: 0.35rem; }
/* Profile back button: a little smaller (user feedback). */
.back-btn { width: 1.8rem; height: 1.8rem; font-size: 1.3rem; padding-bottom: 0.12rem; }
/* Profile: breathing room between the growth chart's summary ("Period
   average") and the month calendar's label below it. */
.profile-growth-card + .chart-summary { margin-bottom: 1.75rem; }
/* Mini calendar (History + Profile): each week row is [7 day cells][flame
   column 1.1rem] with a 0.35rem gap, but the weekday header spanned the full
   width -- so Mo..Su drifted right of their dates, worst by Su. Reserve the
   same flame-column width on the header so the columns line up exactly. */
.mini-calendar-weekdays { padding-right: calc(1.1rem + 0.35rem); }

/* Leaderboard win congratulations pop-up (templates/log.html) */
.win-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  background: color-mix(in oklab, #000 55%, transparent);
  animation: win-fade 0.25s ease both;
}
.win-card {
  width: 100%; max-width: 22rem; text-align: center;
  padding: 1.5rem 1.25rem 1.25rem; border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in oklab, #c9a227 28%, transparent) 0%, transparent 65%),
    var(--card-bg);
  border: 1.5px solid #c9a227;
  box-shadow: 0 18px 40px -16px color-mix(in oklab, #c9a227 80%, transparent);
  animation: win-pop 0.35s cubic-bezier(.2, 1.4, .4, 1) both;
}
.win-card h2 { margin: 0.25rem 0 0.15rem; }
.win-card p { margin: 0.5rem 0 0.9rem; line-height: 1.4; }
.win-period { font-size: 0.85rem; margin-top: 0 !important; }
.win-trophy { font-size: 3rem; line-height: 1; }
.win-btn { width: 100%; margin-top: 0.5rem; }
@keyframes win-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes win-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .win-overlay, .win-card { animation: none; } }
.win-card .win-btn.primary { background: #c9a227; color: #2b2210; }

/* ===================== Reward themes (app/reward_themes.py) =====================
   Bronze / Silver: earned colour themes. Diamond / Inferno: "premium" earned
   themes with animated effects -- a fixed background layer (rising embers /
   drifting facets + light sweep) animated with transforms only, a glowing
   border on the hero cards, gradient headings and a glowing active tab.
   Everything animated is disabled under prefers-reduced-motion. */
:root[data-theme="bronze"], .theme-scope[data-theme="bronze"] {
  color-scheme: dark;
  --bg: #17110c; --fg: #f1e4d6; --muted: #a88e76; --border: #3a2a1d;
  --accent: #cd7f32; --accent-active: #8c5422; --danger: #ff6b5b;
  --card-bg: #201710; --on-color: #1a0f06;
  --phase-growing: #0ca30c; --phase-ready: #3987e5; --phase-detraining: #fab219; --phase-atrophying: #d03b3b;
  --dumbbell-grey: #e8c39e; --scroll-yellow: #e0a86a; --outline-grey: #e0a86a;
}
:root[data-theme="silver"], .theme-scope[data-theme="silver"] {
  color-scheme: light;
  --bg: #f3f5f7; --fg: #1e2328; --muted: #66717c; --border: #d3d9df;
  --accent: #6f7d8a; --accent-active: #4a5560; --danger: #c62828;
  --card-bg: #e8ecf0; --on-color: #ffffff;
  --phase-growing: #0ca30c; --phase-ready: #2a78d6; --phase-detraining: #fab219; --phase-atrophying: #d03b3b;
  --dumbbell-grey: #eef1f4; --scroll-yellow: #c9b27a; --outline-grey: #4a5560;
}
:root[data-theme="diamond"], .theme-scope[data-theme="diamond"] {
  color-scheme: dark;
  --bg: #0b1220; --fg: #e8f4ff; --muted: #8aa4c0; --border: #1e2e48;
  --accent: #6fd6ff; --accent-active: #2c8fc0; --danger: #ff6b81;
  --card-bg: #111b2e; --on-color: #04121f;
  --phase-growing: #0ca30c; --phase-ready: #3987e5; --phase-detraining: #fab219; --phase-atrophying: #d03b3b;
  --dumbbell-grey: #cdeeff; --scroll-yellow: #b9f1ff; --outline-grey: #a8e6ff;
}
:root[data-theme="inferno"], .theme-scope[data-theme="inferno"] {
  color-scheme: dark;
  --bg: #140806; --fg: #ffe9dc; --muted: #c0866c; --border: #3d1810;
  --accent: #ff5a1f; --accent-active: #c2370c; --danger: #ff4d4d;
  --card-bg: #1d0c08; --on-color: #1a0500;
  --phase-growing: #0ca30c; --phase-ready: #3987e5; --phase-detraining: #fab219; --phase-atrophying: #d03b3b;
  --dumbbell-grey: #ffc9a8; --scroll-yellow: #ffb347; --outline-grey: #ffb347;
}

/* --- Premium: animated background layer (behind all content) ------------------ */
/* body normally paints var(--bg) over negative-z layers; let <html> carry it. */
:root[data-theme="inferno"] body, :root[data-theme="diamond"] body { background: transparent; }
:root[data-theme="inferno"] body::before,
:root[data-theme="inferno"] body::after,
:root[data-theme="diamond"] body::before,
:root[data-theme="diamond"] body::after {
  content: ""; position: fixed; left: 0; right: 0; pointer-events: none; z-index: -1;
  will-change: transform;
}
/* Inferno: heat glow rising from the bottom edge... */
:root[data-theme="inferno"] body::before {
  top: 0; bottom: 0;
  background:
    radial-gradient(120% 45% at 50% 105%, rgba(255, 90, 31, 0.32), transparent 70%),
    radial-gradient(60% 30% at 20% 110%, rgba(255, 179, 71, 0.18), transparent 70%),
    radial-gradient(60% 30% at 80% 110%, rgba(255, 60, 20, 0.16), transparent 70%);
  animation: inferno-heat 7s ease-in-out infinite alternate;
}
/* ...and embers drifting upward (a tall tiled layer translated up). */
:root[data-theme="inferno"] body::after {
  top: 0; height: 200vh;
  background-image:
    radial-gradient(circle, rgba(255, 190, 110, 0.9) 0 1.4px, transparent 2.4px),
    radial-gradient(circle, rgba(255, 110, 40, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 220, 160, 0.7) 0 0.8px, transparent 1.8px);
  background-size: 140px 220px, 90px 170px, 210px 260px;
  background-position: 10px 40px, 60px 120px, 130px 10px;
  opacity: 0.55;
  animation: inferno-rise 26s linear infinite;
}
@keyframes inferno-rise { from { transform: translateY(0); } to { transform: translateY(-100vh); } }
@keyframes inferno-heat { from { opacity: 0.75; } to { opacity: 1; } }

/* Diamond: scattered faceted diamonds + sparkles drifting slowly upward... */
:root[data-theme="diamond"] body::before {
  top: 0; height: calc(100vh + 300px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='260' height='300' fill='none' stroke='%23a8e6ff' stroke-linejoin='round'%3E%3Cg stroke-width='1.2' opacity='.55'%3E%3Cpath d='M40 30 l14 18 l-14 18 l-14 -18z'/%3E%3Cpath d='M40 30 v36 M26 48 h28' opacity='.5'/%3E%3C/g%3E%3Cg stroke-width='1' opacity='.35'%3E%3Cpath d='M190 120 l22 28 l-22 28 l-22 -28z'/%3E%3Cpath d='M168 148 h44 M190 120 l-8 28 l8 28 l8 -28z' opacity='.6'/%3E%3C/g%3E%3Cg stroke-width='1' opacity='.45'%3E%3Cpath d='M90 220 l9 12 l-9 12 l-9 -12z'/%3E%3C/g%3E%3Cg fill='%23e8f9ff' stroke='none'%3E%3Cpath d='M140 40 l2 6 l6 2 l-6 2 l-2 6 l-2 -6 l-6 -2 l6 -2z' opacity='.7'/%3E%3Cpath d='M230 250 l1.5 4.5 l4.5 1.5 l-4.5 1.5 l-1.5 4.5 l-1.5 -4.5 l-4.5 -1.5 l4.5 -1.5z' opacity='.6'/%3E%3Ccircle cx='20' cy='170' r='1.3' opacity='.6'/%3E%3Ccircle cx='150' cy='280' r='1' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 300px;
  opacity: 0.6;
  animation: diamond-drift 70s linear infinite;
}
/* ...with a slow light sweep across the screen. */
:root[data-theme="diamond"] body::after {
  top: 0; bottom: 0; left: -60%; right: -60%;
  background: linear-gradient(110deg, transparent 42%, rgba(220, 245, 255, 0.10) 50%, transparent 58%);
  animation: diamond-sweep 11s ease-in-out infinite;
}
@keyframes diamond-drift { from { transform: translateY(0); } to { transform: translateY(-300px); } }
@keyframes diamond-sweep { 0% { transform: translateX(-35%); } 55%, 100% { transform: translateX(35%); } }

/* --- Premium: cards ---------------------------------------------------------------- */
:root[data-theme="inferno"] :is(.card, .chart-card, .muscle-diagram, .settings-section, .profile-stat, .log-box) {
  box-shadow: 0 0 0 1px rgba(255, 90, 31, 0.15), 0 10px 26px -14px rgba(255, 90, 31, 0.75);
}
:root[data-theme="diamond"] :is(.card, .chart-card, .muscle-diagram, .settings-section, .profile-stat, .log-box) {
  box-shadow: 0 0 0 1px rgba(111, 214, 255, 0.12), 0 10px 26px -14px rgba(111, 214, 255, 0.7);
}
/* Hero cards: Inferno's border breathes like an ember; Diamond's catches a
   travelling glint (animated conic border). Only these few, not every card.
   Inferno's ember is a bright border + glow on a ::after that only fades
   in and out -- animating the card's own border/box-shadow repainted the
   whole (tall) Log card every frame and made scrolling heavy. */
:root[data-theme="inferno"] :is(.log-box, .tips-card, .profile-identity-card) {
  position: relative;
  border-color: rgba(255, 90, 31, 0.55);
}
:root[data-theme="inferno"] :is(.log-box, .tips-card, .profile-identity-card)::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(255, 179, 71, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.35), 0 12px 32px -12px rgba(255, 120, 40, 0.9);
  opacity: 0; will-change: opacity;
  animation: inferno-ember 2.25s ease-in-out infinite alternate;
}
@keyframes inferno-ember { to { opacity: 1; } }
@property --diamond-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
:root[data-theme="diamond"] :is(.log-box, .profile-identity-card) {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in oklab, var(--phase-growing) 7%, var(--card-bg)), color-mix(in oklab, var(--phase-growing) 7%, var(--card-bg))) padding-box,
    conic-gradient(from var(--diamond-angle), rgba(111, 214, 255, 0.35), #ffffff 8%, rgba(111, 214, 255, 0.35) 16%, rgba(111, 214, 255, 0.35)) border-box;
  animation: diamond-glint 7s linear infinite;
}
@keyframes diamond-glint { to { --diamond-angle: 360deg; } }

/* --- Premium: headings + active tab ------------------------------------------------ */
:root[data-theme="inferno"] h1 {
  background: linear-gradient(90deg, #ffb347, #ff5a1f 55%, #ff2d2d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="diamond"] h1 {
  background: linear-gradient(90deg, #ffffff, #b9f1ff 45%, #6fd6ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="inferno"] .nav-btn.active { box-shadow: 0 0 14px 2px rgba(255, 110, 40, 0.65); }
:root[data-theme="diamond"] .nav-btn.active { box-shadow: 0 0 14px 2px rgba(111, 214, 255, 0.6); }

/* Unlock pop-up colours per reward theme */
.win-card.unlock-bronze { border-color: #cd7f32; background: linear-gradient(180deg, rgba(205, 127, 50, 0.3), transparent 65%), var(--card-bg); }
.win-card.unlock-silver { border-color: #aab4be; background: linear-gradient(180deg, rgba(170, 180, 190, 0.3), transparent 65%), var(--card-bg); }
.win-card.unlock-diamond { border-color: #6fd6ff; background: linear-gradient(180deg, rgba(111, 214, 255, 0.3), transparent 65%), var(--card-bg); }
.win-card.unlock-inferno { border-color: #ff5a1f; background: linear-gradient(180deg, rgba(255, 90, 31, 0.32), transparent 65%), var(--card-bg); }
.win-card:is(.unlock-bronze, .unlock-silver, .unlock-diamond, .unlock-inferno) .win-btn.primary { background: var(--accent); color: var(--on-color); }

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="inferno"] body::before, :root[data-theme="inferno"] body::after,
  :root[data-theme="diamond"] body::before, :root[data-theme="diamond"] body::after,
  :root[data-theme="inferno"] :is(.log-box, .tips-card, .profile-identity-card)::after,
  :root[data-theme="diamond"] :is(.log-box, .profile-identity-card) { animation: none; }
}

/* ===== Premium nature reward themes (app/reward_themes.py) =====
   Beach (sunlit_beach): log cardio 20 times. Pine Forest (pine_forest): log
   50 workouts. Light, animated: Beach has swaying sun rays + rising bubbles;
   Pine Forest is one seamless SVG scene (rows of pines, fog, light beams)
   with drifting sun motes. Frosted cards; disabled under reduced motion. */
:root[data-theme="sunlit_beach"], .theme-scope[data-theme="sunlit_beach"] {color-scheme:light;--bg:#e4f6fa;--fg:#0b3a4a;--muted:#4f7d8b;--border:#b6e0ea;--accent:#0e95a8;--accent-active:#0a6c7a;--danger:#c0392b;--card-bg:#f4fcfe;--on-color:#fff;--phase-growing:#0ca30c;--phase-ready:#2a78d6;--phase-detraining:#fab219;--phase-atrophying:#d03b3b;--dumbbell-grey:#d6f1f6;--scroll-yellow:#e0b84a;--outline-grey:#0a6c7a}
:root[data-theme="pine_forest"], .theme-scope[data-theme="pine_forest"] {color-scheme:light;--bg:#f2f5e9;--fg:#24371f;--muted:#5f7154;--border:#cfdcbc;--accent:#4a8a3a;--accent-active:#2f6326;--danger:#b5442e;--card-bg:#fbfcf5;--on-color:#fff;--phase-growing:#0ca30c;--phase-ready:#2a78d6;--phase-detraining:#fab219;--phase-atrophying:#d03b3b;--dumbbell-grey:#e6eed6;--scroll-yellow:#d9a441;--outline-grey:#2f6326}
:root:is([data-theme="sunlit_beach"],[data-theme="pine_forest"]) body{background:transparent}
:root:is([data-theme="sunlit_beach"],[data-theme="pine_forest"]) body::before,:root:is([data-theme="sunlit_beach"],[data-theme="pine_forest"]) body::after{content:"";position:fixed;left:0;right:0;pointer-events:none;z-index:-1;will-change:transform}
:root:is([data-theme="sunlit_beach"],[data-theme="pine_forest"]) .topnav{background:color-mix(in oklab,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
:root:is([data-theme="sunlit_beach"],[data-theme="pine_forest"]) .sticky-save{background:transparent}

/* Ocean: swaying sun rays + surface glow, bubbles rising */
:root[data-theme="sunlit_beach"] body::before{top:0;bottom:0;left:-15%;right:-15%;transform-origin:50% 0;
 background:
  radial-gradient(80% 14% at 50% 0%,rgba(255,255,255,.7),transparent 70%),
  linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 33%,transparent 37%),
  linear-gradient(80deg,transparent 52%,rgba(255,255,255,.45) 55%,transparent 59%),
  linear-gradient(93deg,transparent 64%,rgba(255,255,255,.35) 66%,transparent 70%),
  linear-gradient(86deg,transparent 18%,rgba(255,255,255,.3) 20%,transparent 23%),
  linear-gradient(180deg,#9fe3ef 0%,#c6eff5 35%,#e4f6f4 75%,#f3ecd6 100%);
 animation:rt-ocean-sway 9s ease-in-out infinite alternate}
@keyframes rt-ocean-sway{from{transform:skewX(-3deg)}to{transform:skewX(3deg)}}
:root[data-theme="sunlit_beach"] body::after{top:0;height:calc(100vh + 320px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Ccircle cx='30' cy='40' r='5' stroke='%233aa6b9' stroke-width='1' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='28.25' cy='38.25' r='1.4000000000000001' fill='%23ffffff'/%3E%3Ccircle cx='150' cy='90' r='3' stroke='%233aa6b9' stroke-width='1' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='148.95' cy='88.95' r='0.8400000000000001' fill='%23ffffff'/%3E%3Ccircle cx='90' cy='170' r='7' stroke='%233aa6b9' stroke-width='1' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='87.55' cy='167.55' r='1.9600000000000002' fill='%23ffffff'/%3E%3Ccircle cx='190' cy='230' r='2.5' stroke='%233aa6b9' stroke-width='1' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='189.125' cy='229.125' r='0.7000000000000001' fill='%23ffffff'/%3E%3Ccircle cx='50' cy='270' r='3.5' stroke='%233aa6b9' stroke-width='1' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='48.775' cy='268.775' r='0.9800000000000001' fill='%23ffffff'/%3E%3Ccircle cx='120' cy='20' r='2' stroke='%233aa6b9' stroke-width='1' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='119.3' cy='19.3' r='0.56' fill='%23ffffff'/%3E%3Ccircle cx='200' cy='140' r='4.5' stroke='%233aa6b9' stroke-width='1' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='198.425' cy='138.425' r='1.2600000000000002' fill='%23ffffff'/%3E%3Ccircle cx='15' cy='190' r='2' stroke='%233aa6b9' stroke-width='1' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='14.3' cy='189.3' r='0.56' fill='%23ffffff'/%3E%3C/svg%3E");background-size:220px 320px;opacity:.75;animation:rt-ocean-bubbles 22s linear infinite}
@keyframes rt-ocean-bubbles{from{transform:translateY(0)}to{transform:translateY(-320px)}}



/* Forest C: tall tiered pines framing both edges, fog at their feet */
:root[data-theme="pine_forest"] body::before{top:0;bottom:0;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 1000' preserveAspectRatio='xMidYMax slice'%3E %3Cdefs%3E %3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f9f1d2'/%3E%3Cstop offset='.55' stop-color='%23eef3df'/%3E%3Cstop offset='1' stop-color='%23e2ecd2'/%3E%3C/linearGradient%3E %3ClinearGradient id='fog' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f1f5e6' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23f1f5e6' stop-opacity='1'/%3E%3C/linearGradient%3E %3ClinearGradient id='beam' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff2b8' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23fff2b8' stop-opacity='0'/%3E%3C/linearGradient%3E %3CradialGradient id='sun'%3E%3Cstop offset='0' stop-color='%23fff6cf'/%3E%3Cstop offset='.3' stop-color='%23fff0b8' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23fff0b8' stop-opacity='0'/%3E%3C/radialGradient%3E %3C/defs%3E %3Crect x='-200' y='0' width='1000' height='1000' fill='url(%23sky)'/%3E %3Ccircle cx='430' cy='160' r='170' fill='url(%23sun)'/%3E %3Cpath d='M330 0 L420 0 L150 1000 L40 1000Z' fill='url(%23beam)' opacity='.5'/%3E %3Cpath d='M480 0 L540 0 L330 1000 L250 1000Z' fill='url(%23beam)' opacity='.35'/%3E %3Crect x='-169.7' y='958.5' width='10.0' height='41.5' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M-164.8 723.4 L-132.9 828.5 L-196.6 828.5Z' fill='%23dfe8cf'/%3E%3Cpath d='M-164.8 778.7 L-116.0 883.8 L-213.6 883.8Z' fill='%23dfe8cf'/%3E%3Cpath d='M-164.8 834.0 L-99.0 939.1 L-230.5 939.1Z' fill='%23dfe8cf'/%3E%3Cpath d='M-164.8 889.3 L-82.1 994.5 L-247.4 994.5Z' fill='%23dfe8cf'/%3E%3Crect x='-130.3' y='951.2' width='11.7' height='48.8' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M-124.4 674.7 L-86.9 798.3 L-161.9 798.3Z' fill='%23dfe8cf'/%3E%3Cpath d='M-124.4 739.7 L-67.0 863.4 L-181.8 863.4Z' fill='%23dfe8cf'/%3E%3Cpath d='M-124.4 804.8 L-47.1 928.4 L-201.7 928.4Z' fill='%23dfe8cf'/%3E%3Cpath d='M-124.4 869.9 L-27.2 993.5 L-221.6 993.5Z' fill='%23dfe8cf'/%3E%3Crect x='-66.5' y='946.1' width='12.9' height='53.9' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M-60.0 640.8 L-18.6 777.3 L-101.4 777.3Z' fill='%23dfe8cf'/%3E%3Cpath d='M-60.0 712.7 L3.4 849.1 L-123.4 849.1Z' fill='%23dfe8cf'/%3E%3Cpath d='M-60.0 784.5 L25.3 921.0 L-145.3 921.0Z' fill='%23dfe8cf'/%3E%3Cpath d='M-60.0 856.3 L47.3 992.8 L-167.3 992.8Z' fill='%23dfe8cf'/%3E%3Crect x='-39.2' y='956.8' width='10.4' height='43.2' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M-34.0 711.7 L-0.8 821.3 L-67.2 821.3Z' fill='%23dfe8cf'/%3E%3Cpath d='M-34.0 769.4 L16.8 878.9 L-84.9 878.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M-34.0 827.0 L34.5 936.6 L-102.5 936.6Z' fill='%23dfe8cf'/%3E%3Cpath d='M-34.0 884.7 L52.1 994.2 L-120.2 994.2Z' fill='%23dfe8cf'/%3E%3Crect x='13.0' y='957.8' width='10.1' height='42.2' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M18.0 718.9 L50.4 825.7 L-14.4 825.7Z' fill='%23dfe8cf'/%3E%3Cpath d='M18.0 775.1 L67.6 881.9 L-31.6 881.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M18.0 831.3 L84.8 938.2 L-48.8 938.2Z' fill='%23dfe8cf'/%3E%3Cpath d='M18.0 887.6 L102.0 994.4 L-66.0 994.4Z' fill='%23dfe8cf'/%3E%3Crect x='47.6' y='949.9' width='12.0' height='50.1' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M53.6 666.0 L92.0 792.9 L15.1 792.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M53.6 732.8 L112.5 859.7 L-5.3 859.7Z' fill='%23dfe8cf'/%3E%3Cpath d='M53.6 799.6 L132.9 926.5 L-25.8 926.5Z' fill='%23dfe8cf'/%3E%3Cpath d='M53.6 866.4 L153.4 993.3 L-46.2 993.3Z' fill='%23dfe8cf'/%3E%3Crect x='104.2' y='957.5' width='10.2' height='42.5' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M109.3 716.5 L142.0 824.2 L76.7 824.2Z' fill='%23dfe8cf'/%3E%3Cpath d='M109.3 773.2 L159.4 880.9 L59.3 880.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M109.3 829.9 L176.7 937.6 L42.0 937.6Z' fill='%23dfe8cf'/%3E%3Cpath d='M109.3 886.6 L194.1 994.3 L24.6 994.3Z' fill='%23dfe8cf'/%3E%3Crect x='131.5' y='953.9' width='11.1' height='46.1' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M137.0 692.5 L172.4 809.3 L101.6 809.3Z' fill='%23dfe8cf'/%3E%3Cpath d='M137.0 754.0 L191.3 870.8 L82.8 870.8Z' fill='%23dfe8cf'/%3E%3Cpath d='M137.0 815.5 L210.1 932.3 L63.9 932.3Z' fill='%23dfe8cf'/%3E%3Cpath d='M137.0 877.0 L228.9 993.8 L45.1 993.8Z' fill='%23dfe8cf'/%3E%3Crect x='180.4' y='960.5' width='9.5' height='39.5' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M185.1 736.7 L215.4 836.8 L154.8 836.8Z' fill='%23dfe8cf'/%3E%3Cpath d='M185.1 789.4 L231.5 889.4 L138.7 889.4Z' fill='%23dfe8cf'/%3E%3Cpath d='M185.1 842.0 L247.7 942.1 L122.5 942.1Z' fill='%23dfe8cf'/%3E%3Cpath d='M185.1 894.7 L263.8 994.7 L106.4 994.7Z' fill='%23dfe8cf'/%3E%3Crect x='238.4' y='954.0' width='11.0' height='46.0' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M243.9 693.4 L279.2 809.9 L208.6 809.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M243.9 754.7 L298.0 871.2 L189.8 871.2Z' fill='%23dfe8cf'/%3E%3Cpath d='M243.9 816.0 L316.7 932.6 L171.0 932.6Z' fill='%23dfe8cf'/%3E%3Cpath d='M243.9 877.4 L335.5 993.9 L152.3 993.9Z' fill='%23dfe8cf'/%3E%3Crect x='282.3' y='965.0' width='8.4' height='35.0' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M286.5 766.5 L313.4 855.2 L259.7 855.2Z' fill='%23dfe8cf'/%3E%3Cpath d='M286.5 813.2 L327.7 901.9 L245.4 901.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M286.5 859.9 L342.0 948.6 L231.1 948.6Z' fill='%23dfe8cf'/%3E%3Cpath d='M286.5 906.6 L356.3 995.3 L216.8 995.3Z' fill='%23dfe8cf'/%3E%3Crect x='321.6' y='952.5' width='11.4' height='47.5' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M327.3 683.4 L363.7 803.7 L290.8 803.7Z' fill='%23dfe8cf'/%3E%3Cpath d='M327.3 746.7 L383.1 867.0 L271.4 867.0Z' fill='%23dfe8cf'/%3E%3Cpath d='M327.3 810.0 L402.5 930.3 L252.0 930.3Z' fill='%23dfe8cf'/%3E%3Cpath d='M327.3 873.3 L421.9 993.7 L232.6 993.7Z' fill='%23dfe8cf'/%3E%3Crect x='366.2' y='965.5' width='8.3' height='34.5' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M370.3 769.8 L396.9 857.3 L343.8 857.3Z' fill='%23dfe8cf'/%3E%3Cpath d='M370.3 815.9 L410.9 903.3 L329.7 903.3Z' fill='%23dfe8cf'/%3E%3Cpath d='M370.3 861.9 L425.0 949.4 L315.7 949.4Z' fill='%23dfe8cf'/%3E%3Cpath d='M370.3 907.9 L439.1 995.4 L301.6 995.4Z' fill='%23dfe8cf'/%3E%3Crect x='399.7' y='950.9' width='11.8' height='49.1' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M405.6 672.4 L443.4 796.9 L367.9 796.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M405.6 737.9 L463.4 862.4 L347.8 862.4Z' fill='%23dfe8cf'/%3E%3Cpath d='M405.6 803.4 L483.5 927.9 L327.8 927.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M405.6 868.9 L503.5 993.4 L307.7 993.4Z' fill='%23dfe8cf'/%3E%3Crect x='446.1' y='947.7' width='12.6' height='52.3' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M452.4 651.4 L492.6 783.9 L412.3 783.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M452.4 721.1 L513.9 853.6 L390.9 853.6Z' fill='%23dfe8cf'/%3E%3Cpath d='M452.4 790.8 L535.2 923.3 L369.6 923.3Z' fill='%23dfe8cf'/%3E%3Cpath d='M452.4 860.6 L556.6 993.0 L348.2 993.0Z' fill='%23dfe8cf'/%3E%3Crect x='483.5' y='959.2' width='9.8' height='40.8' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M488.4 727.8 L519.7 831.2 L457.0 831.2Z' fill='%23dfe8cf'/%3E%3Cpath d='M488.4 782.3 L536.4 885.7 L440.4 885.7Z' fill='%23dfe8cf'/%3E%3Cpath d='M488.4 836.7 L553.0 940.1 L423.7 940.1Z' fill='%23dfe8cf'/%3E%3Cpath d='M488.4 891.1 L569.7 994.6 L407.0 994.6Z' fill='%23dfe8cf'/%3E%3Crect x='524.9' y='961.4' width='9.3' height='38.6' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M529.5 742.9 L559.1 840.6 L499.9 840.6Z' fill='%23dfe8cf'/%3E%3Cpath d='M529.5 794.3 L574.8 892.0 L484.1 892.0Z' fill='%23dfe8cf'/%3E%3Cpath d='M529.5 845.7 L590.6 943.4 L468.4 943.4Z' fill='%23dfe8cf'/%3E%3Cpath d='M529.5 897.2 L606.3 994.9 L452.7 994.9Z' fill='%23dfe8cf'/%3E%3Crect x='580.5' y='949.5' width='12.1' height='50.5' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M586.5 663.5 L625.3 791.3 L547.8 791.3Z' fill='%23dfe8cf'/%3E%3Cpath d='M586.5 730.8 L645.9 858.7 L527.2 858.7Z' fill='%23dfe8cf'/%3E%3Cpath d='M586.5 798.1 L666.5 926.0 L506.6 926.0Z' fill='%23dfe8cf'/%3E%3Cpath d='M586.5 865.4 L687.1 993.3 L486.0 993.3Z' fill='%23dfe8cf'/%3E%3Crect x='612.2' y='948.2' width='12.4' height='51.8' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M618.4 654.5 L658.2 785.8 L578.6 785.8Z' fill='%23dfe8cf'/%3E%3Cpath d='M618.4 723.6 L679.4 854.9 L557.5 854.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M618.4 792.7 L700.5 924.0 L536.4 924.0Z' fill='%23dfe8cf'/%3E%3Cpath d='M618.4 861.8 L721.7 993.1 L515.2 993.1Z' fill='%23dfe8cf'/%3E%3Crect x='665.2' y='959.6' width='9.7' height='40.4' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M670.0 730.8 L701.0 833.1 L639.0 833.1Z' fill='%23dfe8cf'/%3E%3Cpath d='M670.0 784.6 L717.5 886.9 L622.5 886.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M670.0 838.5 L734.0 940.8 L606.0 940.8Z' fill='%23dfe8cf'/%3E%3Cpath d='M670.0 892.3 L750.4 994.6 L589.6 994.6Z' fill='%23dfe8cf'/%3E%3Crect x='709.1' y='959.7' width='9.7' height='40.3' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M714.0 731.3 L744.9 833.4 L683.0 833.4Z' fill='%23dfe8cf'/%3E%3Cpath d='M714.0 785.1 L761.4 887.2 L666.6 887.2Z' fill='%23dfe8cf'/%3E%3Cpath d='M714.0 838.8 L777.8 940.9 L650.1 940.9Z' fill='%23dfe8cf'/%3E%3Cpath d='M714.0 892.5 L794.3 994.6 L633.7 994.6Z' fill='%23dfe8cf'/%3E%3Crect x='759.8' y='960.1' width='9.6' height='39.9' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M764.6 733.9 L795.3 835.0 L734.0 835.0Z' fill='%23dfe8cf'/%3E%3Cpath d='M764.6 787.1 L811.6 888.2 L717.7 888.2Z' fill='%23dfe8cf'/%3E%3Cpath d='M764.6 840.3 L827.8 941.5 L701.4 941.5Z' fill='%23dfe8cf'/%3E%3Cpath d='M764.6 893.6 L844.1 994.7 L685.1 994.7Z' fill='%23dfe8cf'/%3E %3Crect x='-200' y='700' width='1000' height='300' fill='url(%23fog)' opacity='0.75'/%3E %3Crect x='-136.7' y='944.7' width='13.3' height='55.3' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M-130.1 631.2 L-87.6 771.4 L-172.6 771.4Z' fill='%23c3d7aa'/%3E%3Cpath d='M-130.1 705.0 L-65.1 845.1 L-195.1 845.1Z' fill='%23c3d7aa'/%3E%3Cpath d='M-130.1 778.7 L-42.5 918.9 L-217.7 918.9Z' fill='%23c3d7aa'/%3E%3Cpath d='M-130.1 852.5 L-19.9 992.6 L-240.3 992.6Z' fill='%23c3d7aa'/%3E%3Crect x='-71.6' y='949.9' width='12.0' height='50.1' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M-65.6 666.0 L-27.1 792.9 L-104.0 792.9Z' fill='%23c3d7aa'/%3E%3Cpath d='M-65.6 732.8 L-6.6 859.7 L-124.5 859.7Z' fill='%23c3d7aa'/%3E%3Cpath d='M-65.6 799.6 L13.8 926.5 L-144.9 926.5Z' fill='%23c3d7aa'/%3E%3Cpath d='M-65.6 866.4 L34.2 993.3 L-165.3 993.3Z' fill='%23c3d7aa'/%3E%3Crect x='0.6' y='930.3' width='16.7' height='69.7' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M9.0 535.6 L62.5 712.1 L-44.5 712.1Z' fill='%23c3d7aa'/%3E%3Cpath d='M9.0 628.5 L90.9 805.0 L-73.0 805.0Z' fill='%23c3d7aa'/%3E%3Cpath d='M9.0 721.4 L119.3 897.8 L-101.4 897.8Z' fill='%23c3d7aa'/%3E%3Cpath d='M9.0 814.2 L147.7 990.7 L-129.8 990.7Z' fill='%23c3d7aa'/%3E%3Crect x='98.9' y='952.1' width='11.5' height='47.9' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M104.6 680.9 L141.4 802.1 L67.9 802.1Z' fill='%23c3d7aa'/%3E%3Cpath d='M104.6 744.7 L160.9 866.0 L48.3 866.0Z' fill='%23c3d7aa'/%3E%3Cpath d='M104.6 808.5 L180.5 929.8 L28.8 929.8Z' fill='%23c3d7aa'/%3E%3Cpath d='M104.6 872.3 L200.0 993.6 L9.3 993.6Z' fill='%23c3d7aa'/%3E%3Crect x='155.5' y='940.7' width='14.2' height='59.3' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M162.6 604.9 L208.1 755.0 L117.1 755.0Z' fill='%23c3d7aa'/%3E%3Cpath d='M162.6 683.9 L232.3 834.1 L92.9 834.1Z' fill='%23c3d7aa'/%3E%3Cpath d='M162.6 762.9 L256.5 913.1 L68.8 913.1Z' fill='%23c3d7aa'/%3E%3Cpath d='M162.6 842.0 L280.7 992.1 L44.6 992.1Z' fill='%23c3d7aa'/%3E%3Crect x='226.7' y='939.5' width='14.5' height='60.5' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M234.0 596.9 L280.4 750.1 L187.5 750.1Z' fill='%23c3d7aa'/%3E%3Cpath d='M234.0 677.6 L305.1 830.7 L162.9 830.7Z' fill='%23c3d7aa'/%3E%3Cpath d='M234.0 758.2 L329.7 911.3 L138.2 911.3Z' fill='%23c3d7aa'/%3E%3Cpath d='M234.0 838.8 L354.4 991.9 L113.5 991.9Z' fill='%23c3d7aa'/%3E%3Crect x='277.0' y='931.4' width='16.5' height='68.6' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M285.2 542.4 L337.9 716.3 L232.5 716.3Z' fill='%23c3d7aa'/%3E%3Cpath d='M285.2 633.9 L365.9 807.8 L204.5 807.8Z' fill='%23c3d7aa'/%3E%3Cpath d='M285.2 725.4 L393.9 899.3 L176.5 899.3Z' fill='%23c3d7aa'/%3E%3Cpath d='M285.2 817.0 L421.9 990.8 L148.5 990.8Z' fill='%23c3d7aa'/%3E%3Crect x='374.3' y='947.9' width='12.5' height='52.1' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M380.5 652.9 L420.5 784.8 L340.5 784.8Z' fill='%23c3d7aa'/%3E%3Cpath d='M380.5 722.4 L441.7 854.2 L319.3 854.2Z' fill='%23c3d7aa'/%3E%3Cpath d='M380.5 791.8 L463.0 923.6 L298.1 923.6Z' fill='%23c3d7aa'/%3E%3Cpath d='M380.5 861.2 L484.2 993.1 L276.8 993.1Z' fill='%23c3d7aa'/%3E%3Crect x='443.7' y='930.8' width='16.6' height='69.2' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M452.0 538.9 L505.1 714.1 L398.9 714.1Z' fill='%23c3d7aa'/%3E%3Cpath d='M452.0 631.1 L533.4 806.3 L370.7 806.3Z' fill='%23c3d7aa'/%3E%3Cpath d='M452.0 723.3 L561.6 898.5 L342.5 898.5Z' fill='%23c3d7aa'/%3E%3Cpath d='M452.0 815.5 L589.8 990.8 L314.2 990.8Z' fill='%23c3d7aa'/%3E%3Crect x='490.7' y='936.6' width='15.2' height='63.4' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M498.3 577.1 L547.0 737.8 L449.5 737.8Z' fill='%23c3d7aa'/%3E%3Cpath d='M498.3 661.7 L572.9 822.4 L423.7 822.4Z' fill='%23c3d7aa'/%3E%3Cpath d='M498.3 746.3 L598.7 907.0 L397.8 907.0Z' fill='%23c3d7aa'/%3E%3Cpath d='M498.3 830.8 L624.6 991.5 L371.9 991.5Z' fill='%23c3d7aa'/%3E%3Crect x='587.8' y='944.2' width='13.4' height='55.8' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M594.5 628.3 L637.3 769.6 L551.6 769.6Z' fill='%23c3d7aa'/%3E%3Cpath d='M594.5 702.7 L660.0 843.9 L528.9 843.9Z' fill='%23c3d7aa'/%3E%3Cpath d='M594.5 777.0 L682.8 918.2 L506.1 918.2Z' fill='%23c3d7aa'/%3E%3Cpath d='M594.5 851.3 L705.5 992.6 L483.4 992.6Z' fill='%23c3d7aa'/%3E%3Crect x='640.0' y='935.3' width='15.5' height='64.7' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M647.7 568.9 L697.4 732.7 L598.1 732.7Z' fill='%23c3d7aa'/%3E%3Cpath d='M647.7 655.2 L723.8 819.0 L571.7 819.0Z' fill='%23c3d7aa'/%3E%3Cpath d='M647.7 741.4 L750.2 905.2 L545.3 905.2Z' fill='%23c3d7aa'/%3E%3Cpath d='M647.7 827.6 L776.5 991.4 L518.9 991.4Z' fill='%23c3d7aa'/%3E%3Crect x='732.4' y='933.4' width='16.0' height='66.6' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M740.4 556.1 L791.5 724.8 L689.2 724.8Z' fill='%23c3d7aa'/%3E%3Cpath d='M740.4 644.9 L818.7 813.6 L662.1 813.6Z' fill='%23c3d7aa'/%3E%3Cpath d='M740.4 733.6 L845.8 902.3 L634.9 902.3Z' fill='%23c3d7aa'/%3E%3Cpath d='M740.4 822.4 L873.0 991.1 L607.7 991.1Z' fill='%23c3d7aa'/%3E %3Crect x='-200' y='800' width='1000' height='200' fill='url(%23fog)' opacity='0.7'/%3E %3Crect x='31.3' y='937.1' width='15.1' height='62.9' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M38.8 580.9 L87.1 740.2 L-9.5 740.2Z' fill='%23a3c287'/%3E%3Cpath d='M38.8 664.7 L112.7 824.0 L-35.1 824.0Z' fill='%23a3c287'/%3E%3Cpath d='M38.8 748.6 L138.4 907.8 L-60.8 907.8Z' fill='%23a3c287'/%3E%3Cpath d='M38.8 832.4 L164.0 991.6 L-86.4 991.6Z' fill='%23a3c287'/%3E%3Crect x='113.4' y='944.3' width='13.4' height='55.7' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M120.1 628.5 L162.9 769.6 L77.3 769.6Z' fill='%23a3c287'/%3E%3Cpath d='M120.1 702.8 L185.6 844.0 L54.5 844.0Z' fill='%23a3c287'/%3E%3Cpath d='M120.1 777.1 L208.4 918.3 L31.8 918.3Z' fill='%23a3c287'/%3E%3Cpath d='M120.1 851.4 L231.1 992.6 L9.1 992.6Z' fill='%23a3c287'/%3E%3Crect x='214.9' y='944.1' width='13.4' height='55.9' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M221.6 627.4 L264.5 769.0 L178.6 769.0Z' fill='%23a3c287'/%3E%3Cpath d='M221.6 701.9 L287.3 843.5 L155.8 843.5Z' fill='%23a3c287'/%3E%3Cpath d='M221.6 776.4 L310.1 918.0 L133.0 918.0Z' fill='%23a3c287'/%3E%3Cpath d='M221.6 851.0 L332.9 992.5 L110.2 992.5Z' fill='%23a3c287'/%3E%3Crect x='326.7' y='950.4' width='11.9' height='49.6' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M332.7 669.0 L370.8 794.8 L294.5 794.8Z' fill='%23a3c287'/%3E%3Cpath d='M332.7 735.2 L391.1 861.0 L274.3 861.0Z' fill='%23a3c287'/%3E%3Cpath d='M332.7 801.4 L411.3 927.2 L254.0 927.2Z' fill='%23a3c287'/%3E%3Cpath d='M332.7 867.6 L431.6 993.4 L233.8 993.4Z' fill='%23a3c287'/%3E%3Crect x='489.8' y='937.8' width='14.9' height='62.2' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M497.2 585.5 L545.0 743.0 L449.5 743.0Z' fill='%23a3c287'/%3E%3Cpath d='M497.2 668.4 L570.3 825.9 L424.1 825.9Z' fill='%23a3c287'/%3E%3Cpath d='M497.2 751.3 L595.7 908.8 L398.7 908.8Z' fill='%23a3c287'/%3E%3Cpath d='M497.2 834.2 L621.1 991.7 L373.4 991.7Z' fill='%23a3c287'/%3E%3Crect x='596.7' y='936.6' width='15.2' height='63.4' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M604.3 577.6 L653.0 738.1 L555.6 738.1Z' fill='%23a3c287'/%3E%3Cpath d='M604.3 662.1 L678.8 822.6 L529.8 822.6Z' fill='%23a3c287'/%3E%3Cpath d='M604.3 746.5 L704.7 907.1 L503.9 907.1Z' fill='%23a3c287'/%3E%3Cpath d='M604.3 831.0 L730.5 991.6 L478.1 991.6Z' fill='%23a3c287'/%3E %3Crect x='-24.8' y='877.0' width='29.5' height='123.0' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M-10.0 180.0 L84.5 491.6 L-104.5 491.6Z' fill='%2386ad69'/%3E%3Cpath d='M-10.0 344.0 L134.6 655.6 L-154.6 655.6Z' fill='%2386ad69'/%3E%3Cpath d='M-10.0 508.0 L184.8 819.6 L-204.8 819.6Z' fill='%2386ad69'/%3E%3Cpath d='M-10.0 672.0 L235.0 983.6 L-255.0 983.6Z' fill='%2386ad69'/%3E%3Crect x='69.2' y='910.0' width='21.6' height='90.0' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M80.0 400.0 L149.1 628.0 L10.9 628.0Z' fill='%237aa45e'/%3E%3Cpath d='M80.0 520.0 L185.8 748.0 L-25.8 748.0Z' fill='%237aa45e'/%3E%3Cpath d='M80.0 640.0 L222.6 868.0 L-62.6 868.0Z' fill='%237aa45e'/%3E%3Cpath d='M80.0 760.0 L259.3 988.0 L-99.3 988.0Z' fill='%237aa45e'/%3E %3Crect x='596.3' y='886.0' width='27.4' height='114.0' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M610.0 240.0 L697.6 528.8 L522.4 528.8Z' fill='%2386ad69'/%3E%3Cpath d='M610.0 392.0 L744.1 680.8 L475.9 680.8Z' fill='%2386ad69'/%3E%3Cpath d='M610.0 544.0 L790.6 832.8 L429.4 832.8Z' fill='%2386ad69'/%3E%3Cpath d='M610.0 696.0 L837.1 984.8 L382.9 984.8Z' fill='%2386ad69'/%3E%3Crect x='519.9' y='916.0' width='20.2' height='84.0' fill='%236b5a3a' opacity='.7'/%3E%3Cpath d='M530.0 440.0 L594.5 652.8 L465.5 652.8Z' fill='%237aa45e'/%3E%3Cpath d='M530.0 552.0 L628.8 764.8 L431.2 764.8Z' fill='%237aa45e'/%3E%3Cpath d='M530.0 664.0 L663.1 876.8 L396.9 876.8Z' fill='%237aa45e'/%3E%3Cpath d='M530.0 776.0 L697.3 988.8 L362.7 988.8Z' fill='%237aa45e'/%3E %3Crect x='-200' y='840' width='1000' height='140' fill='url(%23fog)' opacity='1'/%3E%3Crect x='-200' y='975' width='1000' height='30' fill='%23f1f5e6'/%3E %3C/svg%3E") 50% 100%/cover no-repeat;
 animation:rt-forest-haze 10s ease-in-out infinite alternate}
@keyframes rt-forest-haze{from{opacity:.9}to{opacity:1}}
:root[data-theme="pine_forest"] body::after{top:-280px;height:calc(100vh + 560px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='280'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fffbe0'/%3E%3Cstop offset='.3' stop-color='%23ffe9a0' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23ffe08a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='40' cy='60' r='8' fill='url(%23g)'/%3E%3Ccircle cx='170' cy='30' r='5' fill='url(%23g)'/%3E%3Ccircle cx='120' cy='160' r='7' fill='url(%23g)'/%3E%3Ccircle cx='210' cy='220' r='6' fill='url(%23g)'/%3E%3Ccircle cx='60' cy='250' r='4' fill='url(%23g)'/%3E%3C/svg%3E");background-size:240px 280px;
 animation:rt-forest-drift 50s linear infinite,rt-forest-glint 3.2s ease-in-out infinite alternate}

@keyframes rt-forest-drift{from{transform:translate(0,0)}to{transform:translate(-60px,300px)}}
@keyframes rt-forest-glint{from{opacity:.6}to{opacity:1}}

/* cards / headings / tab glow */
:root[data-theme="pine_forest"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card){background:linear-gradient(180deg,rgba(214,232,190,.82),rgba(232,241,214,.8))!important;border-color:#8fb56c}
:root[data-theme="pine_forest"] .log-box :is(input,select,button.secondary,.block){background:rgba(250,252,244,.85)}
:root[data-theme="sunlit_beach"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card){background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 26px -16px rgba(14,149,168,.6)}
:root[data-theme="pine_forest"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card){background:rgba(255,255,250,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 26px -16px rgba(74,138,58,.55)}
@property --wave-pos{syntax:"<percentage>";initial-value:0%;inherits:false}
:root[data-theme="sunlit_beach"] :is(.log-box,.tips-card){border-color:transparent;background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)) padding-box,linear-gradient(90deg,#0e95a8,#9ff0fa var(--wave-pos),#0e95a8 calc(var(--wave-pos) + 25%)) border-box;animation:rt-ocean-shimmer 6s ease-in-out infinite alternate}
@keyframes rt-ocean-shimmer{from{--wave-pos:-10%}to{--wave-pos:90%}}
:root[data-theme="pine_forest"] :is(.log-box,.tips-card){border-color:#7aa85a;animation:rt-forest-glow 5s ease-in-out infinite}
@keyframes rt-forest-glow{0%,100%{box-shadow:0 10px 26px -16px rgba(74,138,58,.5)}50%{box-shadow:0 0 18px -2px rgba(240,200,90,.55)}}
:root[data-theme="sunlit_beach"] h1{background:linear-gradient(90deg,#0a5e6c,#0e95a8 50%,#2cc3d4);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="pine_forest"] h1{background:linear-gradient(90deg,#2f6326,#5f9a3a 55%,#b9922e);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="sunlit_beach"] .nav-btn.active{box-shadow:0 0 14px 2px rgba(14,149,168,.45)}
:root[data-theme="pine_forest"] .nav-btn.active{box-shadow:0 0 14px 2px rgba(217,164,65,.55)}
@media (prefers-reduced-motion:reduce){:root:is([data-theme="sunlit_beach"],[data-theme="pine_forest"]) body::before,:root:is([data-theme="sunlit_beach"],[data-theme="pine_forest"]) body::after,:root:is([data-theme="sunlit_beach"],[data-theme="pine_forest"]) :is(.log-box,.tips-card){animation:none}}

.win-card.unlock-sunlit_beach { border-color: #0e95a8; background: linear-gradient(180deg, rgba(14, 149, 168, 0.25), transparent 65%), var(--card-bg); }
.win-card.unlock-pine_forest { border-color: #4a8a3a; background: linear-gradient(180deg, rgba(74, 138, 58, 0.25), transparent 65%), var(--card-bg); }
.win-card:is(.unlock-sunlit_beach, .unlock-pine_forest) .win-btn.primary { background: var(--accent); color: var(--on-color); }

/* ===== Campfire reward theme (app/reward_themes.py: add 3 friends) =====
   Premium, dark: one seamless SVG night scene (twinkling stars, moon, pine
   treeline, a flickering fire with a pulsing warm glow -- animated by CSS
   inside the SVG) plus sparks rising from the fire on body::after. */
:root[data-theme="campfire"], .theme-scope[data-theme="campfire"] {color-scheme:dark;--bg:#120d14;--fg:#f6e8d8;--muted:#b49a86;--border:#3a2a26;--accent:#ff8a3d;--accent-active:#c9621f;--danger:#ff6b5b;--card-bg:#1c1418;--on-color:#1a0a00;--phase-growing:#0ca30c;--phase-ready:#3987e5;--phase-detraining:#fab219;--phase-atrophying:#d03b3b;--dumbbell-grey:#f3d6b8;--scroll-yellow:#ffc46b;--outline-grey:#ffc46b}
:root[data-theme="campfire"] body{background:transparent}
:root[data-theme="campfire"] body::before,:root[data-theme="campfire"] body::after{content:"";position:fixed;pointer-events:none;z-index:-1}
:root[data-theme="campfire"] body::before{inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 1000' preserveAspectRatio='xMidYMax slice'%3E %3Cstyle%3E .tw%7Banimation:tw ease-in-out infinite alternate%7D %40keyframes tw%7Bfrom%7Bopacity:.15%7Dto%7Bopacity:1%7D%7D .glow%7Banimation:glow 2.2s ease-in-out infinite alternate%3Btransform-origin:300px 905px%7D %40keyframes glow%7B0%25%7Bopacity:.75%3Btransform:scale(1)%7D40%25%7Bopacity:.95%3Btransform:scale(1.04)%7D70%25%7Bopacity:.82%3Btransform:scale(.98)%7D100%25%7Bopacity:1%3Btransform:scale(1.03)%7D%7D .f1,.f2,.f3%7Btransform-origin:300px 905px%7D .f1%7Banimation:fl1 .9s ease-in-out infinite alternate%7D .f2%7Banimation:fl2 .7s ease-in-out infinite alternate%7D .f3%7Banimation:fl3 .55s ease-in-out infinite alternate%7D %40keyframes fl1%7B0%25%7Btransform:scale(1,1) skewX(0)%7D50%25%7Btransform:scale(.96,1.08) skewX(-3deg)%7D100%25%7Btransform:scale(1.03,.94) skewX(3deg)%7D%7D %40keyframes fl2%7B0%25%7Btransform:scale(1,.95) skewX(2deg)%7D100%25%7Btransform:scale(.95,1.1) skewX(-4deg)%7D%7D %40keyframes fl3%7B0%25%7Btransform:scale(.95,1.05)%7D100%25%7Btransform:scale(1.05,.9) skewX(3deg)%7D%7D .ss%7Bopacity:0%3Banimation:ss 21s linear infinite%7D .ss2%7Banimation-duration:34s%3Banimation-delay:-13s%7D %40keyframes ss%7B0%25,85%25%7Bopacity:0%3Btransform:translate(0,0)%7D87%25%7Bopacity:.85%7D96%25%7Bopacity:.85%7D98%25%7Bopacity:0%3Btransform:translate(-270px,115px)%7D100%25%7Bopacity:0%3Btransform:translate(-270px,115px)%7D%7D %40media (prefers-reduced-motion:reduce)%7B.tw,.glow,.f1,.f2,.f3%7Banimation:none%7D.ss%7Banimation:none%3Bopacity:0%7D%7D %3C/style%3E %3Cdefs%3E %3ClinearGradient id='sstrail' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff8ec' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23fff8ec' stop-opacity='0'/%3E%3C/linearGradient%3E %3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23070b1d'/%3E%3Cstop offset='.5' stop-color='%23141433'/%3E%3Cstop offset='.8' stop-color='%232a1a2a'/%3E%3Cstop offset='1' stop-color='%231a0f10'/%3E%3C/linearGradient%3E %3CradialGradient id='warm' cx='300' cy='885' r='420' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff9a3c' stop-opacity='.55'/%3E%3Cstop offset='.35' stop-color='%23ff6a1f' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23ff6a1f' stop-opacity='0'/%3E%3C/radialGradient%3E %3CradialGradient id='core' cx='300' cy='895' r='120' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffd27a' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23ffb347' stop-opacity='0'/%3E%3C/radialGradient%3E %3CradialGradient id='moon' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='.55' stop-color='%23fff4dc'/%3E%3Cstop offset='.62' stop-color='%23fff4dc' stop-opacity='.25'/%3E%3Cstop offset='1' stop-color='%23fff4dc' stop-opacity='0'/%3E%3C/radialGradient%3E %3C/defs%3E %3Crect x='-200' y='0' width='1000' height='1000' fill='url(%23sky)'/%3E %3Ccircle cx='-99.9' cy='224.6' r='1.0' fill='%23fff6e6' opacity='0.7' class='tw' style='animation-delay:-3.4s%3Banimation-duration:3.7s'/%3E%3Ccircle cx='274.0' cy='241.3' r='1.0' fill='%23fff6e6' opacity='0.6' class='tw' style='animation-delay:-2.9s%3Banimation-duration:2.9s'/%3E%3Ccircle cx='370.5' cy='499.7' r='1.1' fill='%23fff6e6' opacity='0.7' class='tw' style='animation-delay:-0.9s%3Banimation-duration:4.7s'/%3E%3Ccircle cx='343.6' cy='245.6' r='0.9' fill='%23fff6e6' opacity='0.5' class='tw' style='animation-delay:-3.2s%3Banimation-duration:2.5s'/%3E%3Ccircle cx='360.8' cy='412.4' r='0.6' fill='%23fff6e6' opacity='0.9'/%3E%3Ccircle cx='317.7' cy='30.8' r='1.5' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='621.1' cy='3.6' r='1.6' fill='%23fff6e6' opacity='0.9'/%3E%3Ccircle cx='129.5' cy='62.3' r='1.7' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='699.8' cy='479.3' r='1.2' fill='%23fff6e6' opacity='0.9' class='tw' style='animation-delay:-2.5s%3Banimation-duration:2.6s'/%3E%3Ccircle cx='565.3' cy='164.5' r='1.8' fill='%23fff6e6' opacity='0.7' class='tw' style='animation-delay:-2.7s%3Banimation-duration:5.4s'/%3E%3Ccircle cx='443.4' cy='266.3' r='1.8' fill='%23fff6e6' opacity='0.9'/%3E%3Ccircle cx='698.4' cy='210.7' r='1.7' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='-61.7' cy='13.7' r='1.8' fill='%23fff6e6' opacity='0.6' class='tw' style='animation-delay:-1.4s%3Banimation-duration:4.2s'/%3E%3Ccircle cx='277.8' cy='34.6' r='1.1' fill='%23fff6e6' opacity='0.9' class='tw' style='animation-delay:-2.3s%3Banimation-duration:4.2s'/%3E%3Ccircle cx='-21.2' cy='623.0' r='2.0' fill='%23fff6e6' opacity='0.7'/%3E%3Ccircle cx='195.6' cy='527.0' r='1.5' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='326.3' cy='109.2' r='1.9' fill='%23fff6e6' opacity='0.9'/%3E%3Ccircle cx='17.7' cy='58.8' r='1.9' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='561.2' cy='171.8' r='1.8' fill='%23fff6e6' opacity='0.7'/%3E%3Ccircle cx='85.0' cy='32.3' r='1.7' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='506.0' cy='157.6' r='1.8' fill='%23fff6e6' opacity='0.5'/%3E%3Ccircle cx='-83.6' cy='7.6' r='1.4' fill='%23fff6e6' opacity='0.8' class='tw' style='animation-delay:-3.2s%3Banimation-duration:3.5s'/%3E%3Ccircle cx='691.9' cy='255.2' r='1.7' fill='%23fff6e6' opacity='0.6' class='tw' style='animation-delay:-2.6s%3Banimation-duration:4.0s'/%3E%3Ccircle cx='112.0' cy='258.0' r='1.5' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='293.0' cy='266.4' r='0.8' fill='%23fff6e6' opacity='0.9'/%3E%3Ccircle cx='297.1' cy='301.2' r='0.9' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='-16.5' cy='309.6' r='1.1' fill='%23fff6e6' opacity='0.6' class='tw' style='animation-delay:-2.0s%3Banimation-duration:5.3s'/%3E%3Ccircle cx='31.0' cy='508.6' r='1.8' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='126.0' cy='97.8' r='1.0' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='349.8' cy='208.7' r='1.3' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='-88.9' cy='466.6' r='1.7' fill='%23fff6e6' opacity='0.8' class='tw' style='animation-delay:-3.1s%3Banimation-duration:4.0s'/%3E%3Ccircle cx='-93.3' cy='514.0' r='2.0' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='34.5' cy='174.3' r='1.3' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='275.6' cy='70.8' r='1.4' fill='%23fff6e6' opacity='0.9'/%3E%3Ccircle cx='151.4' cy='25.8' r='1.3' fill='%23fff6e6' opacity='0.9'/%3E%3Ccircle cx='-42.7' cy='314.4' r='1.6' fill='%23fff6e6' opacity='0.7'/%3E%3Ccircle cx='191.2' cy='70.1' r='1.9' fill='%23fff6e6' opacity='0.5'/%3E%3Ccircle cx='343.5' cy='159.8' r='1.5' fill='%23fff6e6' opacity='0.5'/%3E%3Ccircle cx='349.5' cy='535.7' r='1.7' fill='%23fff6e6' opacity='0.5'/%3E%3Ccircle cx='68.0' cy='437.5' r='1.7' fill='%23fff6e6' opacity='0.6' class='tw' style='animation-delay:-2.9s%3Banimation-duration:5.0s'/%3E%3Ccircle cx='175.6' cy='261.6' r='0.9' fill='%23fff6e6' opacity='0.9' class='tw' style='animation-delay:-2.1s%3Banimation-duration:4.9s'/%3E%3Ccircle cx='324.9' cy='601.8' r='1.8' fill='%23fff6e6' opacity='0.9'/%3E%3Ccircle cx='278.4' cy='373.8' r='1.6' fill='%23fff6e6' opacity='0.5'/%3E%3Ccircle cx='598.5' cy='3.1' r='1.1' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='648.3' cy='463.2' r='0.6' fill='%23fff6e6' opacity='0.7' class='tw' style='animation-delay:-2.0s%3Banimation-duration:2.5s'/%3E%3Ccircle cx='376.0' cy='265.0' r='1.3' fill='%23fff6e6' opacity='0.5' class='tw' style='animation-delay:-0.8s%3Banimation-duration:4.9s'/%3E%3Ccircle cx='-68.0' cy='557.4' r='1.2' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='179.2' cy='551.4' r='1.0' fill='%23fff6e6' opacity='0.7'/%3E%3Ccircle cx='130.7' cy='608.0' r='1.5' fill='%23fff6e6' opacity='0.8' class='tw' style='animation-delay:-2.2s%3Banimation-duration:4.4s'/%3E%3Ccircle cx='-17.0' cy='46.8' r='0.8' fill='%23fff6e6' opacity='0.5' class='tw' style='animation-delay:-3.3s%3Banimation-duration:4.6s'/%3E%3Ccircle cx='300.8' cy='181.7' r='1.5' fill='%23fff6e6' opacity='0.5'/%3E%3Ccircle cx='488.0' cy='531.9' r='1.8' fill='%23fff6e6' opacity='0.5'/%3E%3Ccircle cx='230.8' cy='625.0' r='1.5' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='125.9' cy='172.5' r='2.0' fill='%23fff6e6' opacity='0.7'/%3E%3Ccircle cx='297.7' cy='264.4' r='1.6' fill='%23fff6e6' opacity='0.5' class='tw' style='animation-delay:-1.6s%3Banimation-duration:4.9s'/%3E%3Ccircle cx='274.3' cy='348.4' r='1.6' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='170.9' cy='234.9' r='1.9' fill='%23fff6e6' opacity='0.7' class='tw' style='animation-delay:-0.5s%3Banimation-duration:3.9s'/%3E%3Ccircle cx='551.2' cy='206.0' r='1.3' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='577.8' cy='21.1' r='1.1' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='112.9' cy='21.0' r='1.8' fill='%23fff6e6' opacity='0.7' class='tw' style='animation-delay:-3.2s%3Banimation-duration:3.7s'/%3E%3Ccircle cx='422.6' cy='2.7' r='1.9' fill='%23fff6e6' opacity='0.5'/%3E%3Ccircle cx='173.4' cy='285.3' r='0.7' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='236.1' cy='374.4' r='1.8' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='525.6' cy='605.9' r='1.7' fill='%23fff6e6' opacity='0.5' class='tw' style='animation-delay:-0.7s%3Banimation-duration:2.5s'/%3E%3Ccircle cx='-94.0' cy='30.6' r='1.9' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='127.0' cy='354.1' r='0.6' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='514.6' cy='460.6' r='1.7' fill='%23fff6e6' opacity='0.7'/%3E%3Ccircle cx='115.0' cy='563.6' r='1.5' fill='%23fff6e6' opacity='0.5' class='tw' style='animation-delay:-1.2s%3Banimation-duration:5.1s'/%3E%3Ccircle cx='262.1' cy='541.3' r='1.7' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='70.8' cy='479.4' r='0.7' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='488.3' cy='626.9' r='1.0' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='616.4' cy='105.3' r='1.7' fill='%23fff6e6' opacity='0.5'/%3E%3Ccircle cx='680.2' cy='28.4' r='1.4' fill='%23fff6e6' opacity='0.5'/%3E%3Ccircle cx='13.4' cy='425.5' r='1.3' fill='%23fff6e6' opacity='0.8'/%3E%3Ccircle cx='521.6' cy='450.3' r='1.9' fill='%23fff6e6' opacity='0.5' class='tw' style='animation-delay:-2.2s%3Banimation-duration:3.3s'/%3E%3Ccircle cx='475.9' cy='567.3' r='1.5' fill='%23fff6e6' opacity='0.6' class='tw' style='animation-delay:-0.7s%3Banimation-duration:4.5s'/%3E%3Ccircle cx='294.2' cy='360.4' r='1.5' fill='%23fff6e6' opacity='0.9'/%3E%3Ccircle cx='-85.4' cy='206.0' r='1.1' fill='%23fff6e6' opacity='0.5' class='tw' style='animation-delay:-1.5s%3Banimation-duration:3.5s'/%3E%3Ccircle cx='278.1' cy='557.2' r='1.1' fill='%23fff6e6' opacity='0.9' class='tw' style='animation-delay:-2.8s%3Banimation-duration:2.7s'/%3E%3Ccircle cx='504.3' cy='390.4' r='1.1' fill='%23fff6e6' opacity='0.6' class='tw' style='animation-delay:-2.0s%3Banimation-duration:5.3s'/%3E%3Ccircle cx='473.4' cy='517.4' r='1.7' fill='%23fff6e6' opacity='0.9'/%3E%3Ccircle cx='601.6' cy='395.4' r='1.1' fill='%23fff6e6' opacity='0.9'/%3E%3Ccircle cx='619.9' cy='145.8' r='1.0' fill='%23fff6e6' opacity='0.5' class='tw' style='animation-delay:-1.0s%3Banimation-duration:2.6s'/%3E%3Ccircle cx='648.6' cy='324.4' r='1.7' fill='%23fff6e6' opacity='0.7'/%3E%3Ccircle cx='2.7' cy='78.1' r='1.1' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='607.1' cy='218.0' r='1.2' fill='%23fff6e6' opacity='0.7' class='tw' style='animation-delay:-3.0s%3Banimation-duration:5.4s'/%3E%3Ccircle cx='299.6' cy='101.1' r='1.1' fill='%23fff6e6' opacity='0.6'/%3E%3Ccircle cx='220.0' cy='284.7' r='1.2' fill='%23fff6e6' opacity='0.5' class='tw' style='animation-delay:-0.7s%3Banimation-duration:4.8s'/%3E%3Ccircle cx='278.3' cy='308.6' r='0.9' fill='%23fff6e6' opacity='0.5'/%3E%3Ccircle cx='505.9' cy='276.3' r='1.0' fill='%23fff6e6' opacity='0.7'/%3E %3Cg class='ss'%3E%3Cline x1='560' y1='85' x2='620' y2='60' stroke='url(%23sstrail)' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='560' cy='85' r='1.5' fill='%23fffaf0'/%3E%3C/g%3E %3Cg class='ss ss2'%3E%3Cline x1='440' y1='45' x2='500' y2='20' stroke='url(%23sstrail)' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='440' cy='45' r='1.3' fill='%23fffaf0'/%3E%3C/g%3E %3Cmask id='cres'%3E%3Crect x='0' y='0' width='600' height='1000' fill='%23fff'/%3E%3Ccircle cx='132' cy='88' r='23' fill='%23000'/%3E%3C/mask%3E %3Ccircle cx='120' cy='100' r='40' fill='url(%23moon)' opacity='.5'/%3E%3Ccircle cx='120' cy='100' r='22' fill='%23fff4dc' mask='url(%23cres)'/%3E %3Cpath d='M-140.6 601.5 L-110.8 699.7 L-170.4 699.7Z' fill='%23151a2c'/%3E%3Cpath d='M-140.6 653.2 L-95.0 751.4 L-186.2 751.4Z' fill='%23151a2c'/%3E%3Cpath d='M-140.6 704.9 L-79.2 803.1 L-202.0 803.1Z' fill='%23151a2c'/%3E%3Cpath d='M-140.6 756.6 L-63.4 854.8 L-217.9 854.8Z' fill='%23151a2c'/%3E%3Cpath d='M-93.6 656.3 L-70.1 733.7 L-117.1 733.7Z' fill='%23151a2c'/%3E%3Cpath d='M-93.6 697.0 L-57.7 774.4 L-129.5 774.4Z' fill='%23151a2c'/%3E%3Cpath d='M-93.6 737.8 L-45.2 815.2 L-142.0 815.2Z' fill='%23151a2c'/%3E%3Cpath d='M-93.6 778.5 L-32.7 855.9 L-154.5 855.9Z' fill='%23151a2c'/%3E%3Cpath d='M-29.3 609.5 L-0.5 704.7 L-58.2 704.7Z' fill='%23151a2c'/%3E%3Cpath d='M-29.3 659.6 L14.9 754.8 L-73.5 754.8Z' fill='%23151a2c'/%3E%3Cpath d='M-29.3 709.7 L30.2 804.9 L-88.8 804.9Z' fill='%23151a2c'/%3E%3Cpath d='M-29.3 759.8 L45.5 855.0 L-104.2 855.0Z' fill='%23151a2c'/%3E%3Cpath d='M25.9 653.8 L49.6 732.1 L2.1 732.1Z' fill='%23151a2c'/%3E%3Cpath d='M25.9 695.0 L62.3 773.4 L-10.5 773.4Z' fill='%23151a2c'/%3E%3Cpath d='M25.9 736.3 L74.9 814.6 L-23.1 814.6Z' fill='%23151a2c'/%3E%3Cpath d='M25.9 777.5 L87.5 855.9 L-35.7 855.9Z' fill='%23151a2c'/%3E%3Cpath d='M77.4 613.9 L105.8 707.4 L49.1 707.4Z' fill='%23151a2c'/%3E%3Cpath d='M77.4 663.1 L120.8 756.6 L34.0 756.6Z' fill='%23151a2c'/%3E%3Cpath d='M77.4 712.3 L135.9 805.9 L18.9 805.9Z' fill='%23151a2c'/%3E%3Cpath d='M77.4 761.6 L150.9 855.1 L3.9 855.1Z' fill='%23151a2c'/%3E%3Cpath d='M126.1 674.3 L147.5 744.9 L104.7 744.9Z' fill='%23151a2c'/%3E%3Cpath d='M126.1 711.4 L158.8 782.0 L93.3 782.0Z' fill='%23151a2c'/%3E%3Cpath d='M126.1 748.6 L170.2 819.1 L82.0 819.1Z' fill='%23151a2c'/%3E%3Cpath d='M126.1 785.7 L181.6 856.3 L70.6 856.3Z' fill='%23151a2c'/%3E%3Cpath d='M166.0 684.6 L186.2 751.2 L145.8 751.2Z' fill='%23151a2c'/%3E%3Cpath d='M166.0 719.7 L197.0 786.3 L135.1 786.3Z' fill='%23151a2c'/%3E%3Cpath d='M166.0 754.7 L207.7 821.4 L124.3 821.4Z' fill='%23151a2c'/%3E%3Cpath d='M166.0 789.8 L218.4 856.5 L113.6 856.5Z' fill='%23151a2c'/%3E%3Cpath d='M227.5 630.0 L254.0 717.4 L201.0 717.4Z' fill='%23151a2c'/%3E%3Cpath d='M227.5 676.0 L268.1 763.4 L186.9 763.4Z' fill='%23151a2c'/%3E%3Cpath d='M227.5 722.0 L282.1 809.4 L172.9 809.4Z' fill='%23151a2c'/%3E%3Cpath d='M227.5 768.0 L296.2 855.4 L158.8 855.4Z' fill='%23151a2c'/%3E%3Cpath d='M283.4 655.5 L306.9 733.2 L259.8 733.2Z' fill='%23151a2c'/%3E%3Cpath d='M283.4 696.4 L319.4 774.1 L247.3 774.1Z' fill='%23151a2c'/%3E%3Cpath d='M283.4 737.3 L331.9 815.0 L234.8 815.0Z' fill='%23151a2c'/%3E%3Cpath d='M283.4 778.2 L344.5 855.9 L222.3 855.9Z' fill='%23151a2c'/%3E%3Cpath d='M327.9 655.9 L351.4 733.5 L304.4 733.5Z' fill='%23151a2c'/%3E%3Cpath d='M327.9 696.7 L363.9 774.3 L291.9 774.3Z' fill='%23151a2c'/%3E%3Cpath d='M327.9 737.6 L376.4 815.1 L279.4 815.1Z' fill='%23151a2c'/%3E%3Cpath d='M327.9 778.4 L388.9 855.9 L266.9 855.9Z' fill='%23151a2c'/%3E%3Cpath d='M369.1 620.2 L396.7 711.3 L341.4 711.3Z' fill='%23151a2c'/%3E%3Cpath d='M369.1 668.2 L411.4 759.3 L326.8 759.3Z' fill='%23151a2c'/%3E%3Cpath d='M369.1 716.1 L426.0 807.3 L312.1 807.3Z' fill='%23151a2c'/%3E%3Cpath d='M369.1 764.1 L440.7 855.2 L297.4 855.2Z' fill='%23151a2c'/%3E%3Cpath d='M422.1 661.2 L445.0 736.8 L399.2 736.8Z' fill='%23151a2c'/%3E%3Cpath d='M422.1 701.0 L457.2 776.5 L387.1 776.5Z' fill='%23151a2c'/%3E%3Cpath d='M422.1 740.7 L469.4 816.3 L374.9 816.3Z' fill='%23151a2c'/%3E%3Cpath d='M422.1 780.5 L481.5 856.0 L362.8 856.0Z' fill='%23151a2c'/%3E%3Cpath d='M483.0 591.7 L513.9 693.7 L452.1 693.7Z' fill='%23151a2c'/%3E%3Cpath d='M483.0 645.4 L530.3 747.3 L435.7 747.3Z' fill='%23151a2c'/%3E%3Cpath d='M483.0 699.0 L546.8 801.0 L419.3 801.0Z' fill='%23151a2c'/%3E%3Cpath d='M483.0 752.7 L563.2 854.6 L402.9 854.6Z' fill='%23151a2c'/%3E%3Cpath d='M541.1 689.4 L560.8 754.2 L521.5 754.2Z' fill='%23151a2c'/%3E%3Cpath d='M541.1 723.5 L571.2 788.4 L511.0 788.4Z' fill='%23151a2c'/%3E%3Cpath d='M541.1 757.7 L581.6 822.5 L500.6 822.5Z' fill='%23151a2c'/%3E%3Cpath d='M541.1 791.8 L592.1 856.6 L490.1 856.6Z' fill='%23151a2c'/%3E%3Cpath d='M579.0 625.5 L606.0 714.6 L552.0 714.6Z' fill='%23151a2c'/%3E%3Cpath d='M579.0 672.4 L620.4 761.5 L537.7 761.5Z' fill='%23151a2c'/%3E%3Cpath d='M579.0 719.3 L634.7 808.4 L523.3 808.4Z' fill='%23151a2c'/%3E%3Cpath d='M579.0 766.2 L649.1 855.3 L509.0 855.3Z' fill='%23151a2c'/%3E%3Cpath d='M642.8 626.3 L669.7 715.1 L615.9 715.1Z' fill='%23151a2c'/%3E%3Cpath d='M642.8 673.0 L684.0 761.8 L601.6 761.8Z' fill='%23151a2c'/%3E%3Cpath d='M642.8 719.8 L698.3 808.6 L587.3 808.6Z' fill='%23151a2c'/%3E%3Cpath d='M642.8 766.5 L712.6 855.3 L573.0 855.3Z' fill='%23151a2c'/%3E%3Cpath d='M675.6 671.3 L697.3 743.0 L653.8 743.0Z' fill='%23151a2c'/%3E%3Cpath d='M675.6 709.0 L708.9 780.7 L642.3 780.7Z' fill='%23151a2c'/%3E%3Cpath d='M675.6 746.8 L720.4 818.5 L630.7 818.5Z' fill='%23151a2c'/%3E%3Cpath d='M675.6 784.5 L732.0 856.2 L619.2 856.2Z' fill='%23151a2c'/%3E%3Cpath d='M725.6 652.0 L749.6 731.0 L701.7 731.0Z' fill='%23151a2c'/%3E%3Cpath d='M725.6 693.6 L762.3 772.6 L688.9 772.6Z' fill='%23151a2c'/%3E%3Cpath d='M725.6 735.2 L775.0 814.2 L676.2 814.2Z' fill='%23151a2c'/%3E%3Cpath d='M725.6 776.8 L787.8 855.8 L663.5 855.8Z' fill='%23151a2c'/%3E %3Cpath d='M-87.1 593.8 L-51.8 710.1 L-122.4 710.1Z' fill='%230d1020'/%3E%3Cpath d='M-87.1 655.0 L-33.1 771.4 L-141.1 771.4Z' fill='%230d1020'/%3E%3Cpath d='M-87.1 716.3 L-14.4 832.6 L-159.9 832.6Z' fill='%230d1020'/%3E%3Cpath d='M-87.1 777.5 L4.4 893.9 L-178.6 893.9Z' fill='%230d1020'/%3E%3Cpath d='M-25.7 630.0 L5.4 732.6 L-56.8 732.6Z' fill='%230d1020'/%3E%3Cpath d='M-25.7 684.0 L21.9 786.6 L-73.3 786.6Z' fill='%230d1020'/%3E%3Cpath d='M-25.7 738.0 L38.4 840.6 L-89.9 840.6Z' fill='%230d1020'/%3E%3Cpath d='M-25.7 792.0 L55.0 894.6 L-106.4 894.6Z' fill='%230d1020'/%3E%3Cpath d='M67.3 590.7 L102.9 708.3 L31.6 708.3Z' fill='%230d1020'/%3E%3Cpath d='M67.3 652.6 L121.8 770.1 L12.7 770.1Z' fill='%230d1020'/%3E%3Cpath d='M67.3 714.4 L140.7 832.0 L-6.2 832.0Z' fill='%230d1020'/%3E%3Cpath d='M67.3 776.3 L159.7 893.8 L-25.2 893.8Z' fill='%230d1020'/%3E%3Cpath d='M156.0 664.7 L183.1 754.1 L128.9 754.1Z' fill='%230d1020'/%3E%3Cpath d='M156.0 711.7 L197.5 801.2 L114.5 801.2Z' fill='%230d1020'/%3E%3Cpath d='M156.0 758.8 L211.9 848.2 L100.1 848.2Z' fill='%230d1020'/%3E%3Cpath d='M156.0 805.9 L226.3 895.3 L85.7 895.3Z' fill='%230d1020'/%3E%3Cpath d='M235.6 683.1 L260.6 765.5 L210.7 765.5Z' fill='%230d1020'/%3E%3Cpath d='M235.6 726.5 L273.9 808.9 L197.4 808.9Z' fill='%230d1020'/%3E%3Cpath d='M235.6 769.9 L287.2 852.3 L184.1 852.3Z' fill='%230d1020'/%3E%3Cpath d='M235.6 813.2 L300.4 895.7 L170.8 895.7Z' fill='%230d1020'/%3E%3Cpath d='M302.5 600.1 L337.0 714.1 L267.9 714.1Z' fill='%230d1020'/%3E%3Cpath d='M302.5 660.1 L355.4 774.1 L249.6 774.1Z' fill='%230d1020'/%3E%3Cpath d='M302.5 720.1 L373.7 834.0 L231.2 834.0Z' fill='%230d1020'/%3E%3Cpath d='M302.5 780.1 L392.1 894.0 L212.9 894.0Z' fill='%230d1020'/%3E%3Cpath d='M376.2 685.7 L400.9 767.2 L351.5 767.2Z' fill='%230d1020'/%3E%3Cpath d='M376.2 728.6 L414.0 810.0 L338.4 810.0Z' fill='%230d1020'/%3E%3Cpath d='M376.2 771.4 L427.1 852.9 L325.3 852.9Z' fill='%230d1020'/%3E%3Cpath d='M376.2 814.3 L440.2 895.7 L312.2 895.7Z' fill='%230d1020'/%3E%3Cpath d='M477.1 652.6 L505.6 746.6 L448.6 746.6Z' fill='%230d1020'/%3E%3Cpath d='M477.1 702.1 L520.7 796.1 L433.5 796.1Z' fill='%230d1020'/%3E%3Cpath d='M477.1 751.6 L535.9 845.6 L418.3 845.6Z' fill='%230d1020'/%3E%3Cpath d='M477.1 801.0 L551.0 895.1 L403.2 895.1Z' fill='%230d1020'/%3E%3Cpath d='M547.1 683.4 L572.0 765.7 L522.1 765.7Z' fill='%230d1020'/%3E%3Cpath d='M547.1 726.7 L585.3 809.0 L508.9 809.0Z' fill='%230d1020'/%3E%3Cpath d='M547.1 770.0 L598.6 852.3 L495.6 852.3Z' fill='%230d1020'/%3E%3Cpath d='M547.1 813.4 L611.8 895.7 L482.4 895.7Z' fill='%230d1020'/%3E%3Cpath d='M623.9 633.1 L654.7 734.5 L593.2 734.5Z' fill='%230d1020'/%3E%3Cpath d='M623.9 686.5 L671.0 787.9 L576.8 787.9Z' fill='%230d1020'/%3E%3Cpath d='M623.9 739.8 L687.4 841.3 L560.5 841.3Z' fill='%230d1020'/%3E%3Cpath d='M623.9 793.2 L703.7 894.7 L544.2 894.7Z' fill='%230d1020'/%3E%3Cpath d='M710.2 641.2 L740.0 739.6 L680.4 739.6Z' fill='%230d1020'/%3E%3Cpath d='M710.2 693.0 L755.8 791.3 L664.5 791.3Z' fill='%230d1020'/%3E%3Cpath d='M710.2 744.7 L771.7 843.1 L648.7 843.1Z' fill='%230d1020'/%3E%3Cpath d='M710.2 796.5 L787.5 894.8 L632.9 894.8Z' fill='%230d1020'/%3E %3Crect x='-200' y='880' width='1000' height='120' fill='%23120b0c'/%3E %3Cg class='glow'%3E%3Crect x='-200' y='300' width='1000' height='700' fill='url(%23warm)'/%3E%3C/g%3E %3Cellipse cx='300' cy='913' rx='150' ry='18' fill='%23ff8a3d' opacity='.18'/%3E %3Cellipse cx='361.2' cy='916.4' rx='12.3' ry='8.7' fill='%233b302c'/%3E%3Cellipse cx='359.2' cy='913.4' rx='6.0' ry='2.5' fill='%23a0603a' opacity='.45'/%3E%3Cellipse cx='354.1' cy='919.4' rx='11.2' ry='7.4' fill='%233b302c'/%3E%3Cellipse cx='352.1' cy='916.4' rx='6.0' ry='2.5' fill='%23a0603a' opacity='.45'/%3E%3Cellipse cx='340.3' cy='921.8' rx='13.1' ry='8.9' fill='%233b302c'/%3E%3Cellipse cx='338.3' cy='918.8' rx='6.0' ry='2.5' fill='%23a0603a' opacity='.45'/%3E%3Cellipse cx='321.5' cy='923.4' rx='12.8' ry='8.2' fill='%233b302c'/%3E%3Cellipse cx='319.5' cy='920.4' rx='6.0' ry='2.5' fill='%23a0603a' opacity='.45'/%3E%3Cellipse cx='300.0' cy='924.0' rx='14.4' ry='8.4' fill='%233b302c'/%3E%3Cellipse cx='298.0' cy='921.0' rx='6.0' ry='2.5' fill='%23a0603a' opacity='.45'/%3E%3Cellipse cx='278.5' cy='923.4' rx='13.0' ry='8.4' fill='%233b302c'/%3E%3Cellipse cx='276.5' cy='920.4' rx='6.0' ry='2.5' fill='%23a0603a' opacity='.45'/%3E%3Cellipse cx='259.7' cy='921.8' rx='14.5' ry='8.5' fill='%233b302c'/%3E%3Cellipse cx='257.7' cy='918.8' rx='6.0' ry='2.5' fill='%23a0603a' opacity='.45'/%3E%3Cellipse cx='245.9' cy='919.4' rx='11.6' ry='8.2' fill='%233b302c'/%3E%3Cellipse cx='243.9' cy='916.4' rx='6.0' ry='2.5' fill='%23a0603a' opacity='.45'/%3E%3Cellipse cx='238.8' cy='916.4' rx='14.6' ry='7.4' fill='%233b302c'/%3E%3Cellipse cx='236.8' cy='913.4' rx='6.0' ry='2.5' fill='%23a0603a' opacity='.45'/%3E %3Crect x='242' y='899' width='116' height='13' rx='6.5' fill='%234a2c1c' transform='rotate(14 300 905)'/%3E %3Crect x='242' y='899' width='116' height='13' rx='6.5' fill='%235a3622' transform='rotate(-14 300 905)'/%3E %3Cg class='glow'%3E%3Ccircle cx='300' cy='895' r='120' fill='url(%23core)'/%3E%3C/g%3E %3Cpath class='f1' fill='%23e8451c' d='M300 785 C306 821 340 851 332 893 C328 909 272 909 268 893 C260 851 292 833 300 785Z'/%3E %3Cpath class='f2' fill='%23ff8a2a' d='M300 813 C304.5 840.6 330 863.6 324 895.8 C321 909 279 909 276 895.8 C270 863.6 294 849.8 300 813Z'/%3E %3Cpath class='f3' fill='%23ffd36b' d='M300 847 C302.55 864.4 317 878.9 313.6 899.2 C311.9 909 288.1 909 286.4 899.2 C283 878.9 296.6 870.2 300 847Z'/%3E %3C/svg%3E") 50% 100%/cover no-repeat}
:root[data-theme="campfire"] body::after{left:calc(50% - 80px);width:160px;bottom:10vh;height:calc(55vh + 300px);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='300'%3E%3Ccircle cx='125.9' cy='199.8' r='1.8' fill='%23ffd27a'/%3E%3Ccircle cx='118.7' cy='65.1' r='1.7' fill='%23ff9a3c'/%3E%3Ccircle cx='30.1' cy='53.3' r='2.2' fill='%23ffb347'/%3E%3Ccircle cx='94.9' cy='246.9' r='2.1' fill='%23ffd27a'/%3E%3Ccircle cx='79.8' cy='136.7' r='1.8' fill='%23ff9a3c'/%3E%3Ccircle cx='72.5' cy='203.7' r='1.8' fill='%23ffb347'/%3E%3Ccircle cx='46.5' cy='127.7' r='1.2' fill='%23ffd27a'/%3E%3Ccircle cx='137.5' cy='209.0' r='1.9' fill='%23ff9a3c'/%3E%3Ccircle cx='72.9' cy='263.9' r='2.0' fill='%23ffb347'/%3E%3C/svg%3E");background-size:160px 300px;will-change:transform;
 -webkit-mask-image:linear-gradient(0deg,#000 0,#000 30%,transparent 75%);mask-image:linear-gradient(0deg,#000 0,#000 30%,transparent 75%);
 animation:rt-campfire-sparks 7s linear infinite}
@keyframes rt-campfire-sparks{from{transform:translateY(300px)}to{transform:translateY(0)}}
:root[data-theme="campfire"] .topnav{background:color-mix(in oklab,var(--bg) 60%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
:root[data-theme="campfire"] .sticky-save{background:transparent}
:root[data-theme="campfire"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card){background:rgba(30,20,24,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:rgba(255,138,61,.45);box-shadow:0 12px 28px -14px rgba(255,120,40,.55)}
:root[data-theme="campfire"] :is(.log-box,.tips-card){animation:rt-campfire-glow 3.4s ease-in-out infinite}
@keyframes rt-campfire-glow{0%,100%{box-shadow:0 12px 28px -14px rgba(255,120,40,.5)}45%{box-shadow:0 12px 30px -10px rgba(255,150,60,.75)}70%{box-shadow:0 12px 26px -14px rgba(255,110,40,.45)}}
:root[data-theme="campfire"] h1{background:linear-gradient(90deg,#ffe2a8,#ffb347 50%,#ff7a2a);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="campfire"] .nav-btn.active{box-shadow:0 0 14px 2px rgba(255,150,60,.6)}
.win-card.unlock-campfire{border-color:#ff8a3d;background:linear-gradient(180deg,rgba(255,138,61,.28),transparent 65%),var(--card-bg)}
.win-card.unlock-campfire .win-btn.primary{background:var(--accent);color:var(--on-color)}
@media (prefers-reduced-motion:reduce){:root[data-theme="campfire"] body::after,:root[data-theme="campfire"] :is(.log-box,.tips-card){animation:none}}

/* Dedicated equipment page + multiple gyms (templates/equipment.html) */
.equip-page-header { display: flex; align-items: center; gap: 0.6rem; }
.equip-page-header h1 { margin: 0.5rem 0; }
.gyms-hint { margin: 0.3rem 0 0.6rem; font-size: 0.85rem; }
.gym-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.6rem; }
.gym-chips form { margin: 0; }
.gym-chip {
  border: 1.5px solid var(--accent); background: var(--card-bg); color: var(--fg);
  border-radius: 999px; padding: 0.4rem 0.85rem; font-weight: 600; cursor: pointer;
}
.gym-chip.active { background: var(--accent); color: var(--on-color); opacity: 1; cursor: default; }
.gym-manage { margin-top: 0.5rem; }
.gym-manage summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 0.3rem 0; }
.gym-manage form { margin-top: 0.5rem; }
.gym-rename-form .field input { width: 100%; }
.gym-manage-actions { display: flex; gap: 0.5rem; }
.gym-manage-actions button { flex: 1; margin: 0; }
.gym-start { border: 0; padding: 0; margin: 0 0 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.gym-start label { display: flex; align-items: center; gap: 0.45rem; }
.equip-for { margin: 1rem 0 0.5rem; }
.gym-switch select { width: 100%; }

/* Settings > Account: password fields stay collapsed until "Change password" is tapped */
.change-password-toggle { margin-top: 1rem; }
.change-password-form { margin-top: 0.75rem; }
.change-password-form[hidden] { display: none; }

/* Loading feedback while an in-place (spa_nav.js) submit is in flight: a
   small spinner after the tapped button's label; the Log page gym picker
   shows it beside its "Gym" label. */
.is-loading, .gym-switch.is-loading select { pointer-events: none; opacity: 0.85; }
button.is-loading::after,
.gym-switch.is-loading label::after {
  content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.5em;
  vertical-align: -0.1em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button.is-loading::after, .gym-switch.is-loading label::after { animation-duration: 2s; }
}

/* Brief banner echoing a page message that's scrolled out of view after an
   in-place submit (static/spa_nav.js toastOffscreenMessage). */
.spa-toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 4.5rem); z-index: 1100;
  transform: translateX(-50%); max-width: calc(100% - 2rem);
  padding: 0.6rem 1rem; border-radius: 999px; font-weight: 600; font-size: 0.92rem;
  background: var(--accent); color: var(--on-color);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.45);
  animation: spa-toast-in 0.2s ease both; transition: opacity 0.4s, transform 0.4s;
}
.spa-toast-error { background: var(--danger); color: #fff; }
.spa-toast-hide { opacity: 0; transform: translate(-50%, -8px); }
@keyframes spa-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translateX(-50%); } }

/* "Done" tick after an in-place submit finishes (static/spa_nav.js flashDone):
   pops in after the label, then fades -- gone within a second. */
button.is-done::after,
.gym-switch label.is-done::after {
  content: "\2713"; display: inline-block; margin-left: 0.45em; font-weight: 800;
  animation: done-tick 0.9s ease forwards;
}
@keyframes done-tick {
  0% { opacity: 0; transform: scale(0.4); }
  20% { opacity: 1; transform: scale(1.2); }
  35% { transform: scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Space reward theme (premium; app/reward_themes.py) =====
   One seamless SVG scene: nebula clouds (slow breathing), twinkling stars
   with glints, a ringed planet + moon, and a detailed comet drifting across every ~26s --
   animated by CSS inside the SVG. body::after adds a slowly drifting near
   starfield for parallax depth. */
:root[data-theme="space"], .theme-scope[data-theme="space"] {color-scheme:dark;--bg:#040509;--fg:#eceef5;--muted:#9a9fb0;--border:#23252f;--accent:#3fd2c7;--accent-active:#22a39a;--danger:#ff6b6b;--card-bg:#0c0d14;--on-color:#04110f;--phase-growing:#0ca30c;--phase-ready:#3987e5;--phase-detraining:#fab219;--phase-atrophying:#d03b3b;--dumbbell-grey:#d8f5f2;--scroll-yellow:#ffd36b;--outline-grey:#8fe8df}
:root[data-theme="space"] body{background:transparent}
:root[data-theme="space"] body::before,:root[data-theme="space"] body::after{content:"";position:fixed;left:0;right:0;pointer-events:none;z-index:-1}
:root[data-theme="space"] body::before{top:0;bottom:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 1000' preserveAspectRatio='xMidYMax slice'%3E %3Cstyle%3E .tw%7Banimation:tw ease-in-out infinite alternate%7D %40keyframes tw%7Bfrom%7Bopacity:.15%7Dto%7Bopacity:1%7D%7D .neb%7Banimation:neb 14s ease-in-out infinite alternate%3Btransform-origin:300px 400px%7D %40keyframes neb%7Bfrom%7Bopacity:.8%3Btransform:scale(1)%7Dto%7Bopacity:1%3Btransform:scale(1.05)%7D%7D .comet%7Banimation:comet 26s linear infinite%3Bopacity:0%7D %40keyframes comet%7B0%25%7Bopacity:0%3Btransform:translate(0,0)%7D3%25%7Bopacity:1%7D28%25%7Bopacity:1%7D33%25%7Bopacity:0%3Btransform:translate(-800px,70px)%7D100%25%7Bopacity:0%3Btransform:translate(-800px,70px)%7D%7D .ctail%7Banimation:ctail 1.6s ease-in-out infinite alternate%3Btransform-origin:0 0%7D %40keyframes ctail%7Bfrom%7Btransform:scaleX(1)%7Dto%7Btransform:scaleX(1.06)%7D%7D .chead%7Banimation:chead 1.1s ease-in-out infinite alternate%7D %40keyframes chead%7Bfrom%7Bopacity:.85%7Dto%7Bopacity:1%7D%7D .ring%7Banimation:ringglow 6s ease-in-out infinite alternate%7D %40keyframes ringglow%7Bfrom%7Bopacity:.75%7Dto%7Bopacity:1%7D%7D %40media (prefers-reduced-motion:reduce)%7B.tw,.neb,.comet,.ctail,.chead,.ring%7Banimation:none%7D.comet%7Bopacity:0%7D%7D %3C/style%3E %3Cdefs%3E %3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23020206'/%3E%3Cstop offset='.55' stop-color='%2305060d'/%3E%3Cstop offset='1' stop-color='%23030308'/%3E%3C/linearGradient%3E %3Cfilter id='blur' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='30'/%3E%3C/filter%3E %3Cfilter id='blurS' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E %3Cfilter id='blurD' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E %3Cfilter id='blurXS' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E %3CradialGradient id='ghalo'%3E%3Cstop offset='0' stop-color='%23cfe0ff' stop-opacity='.22'/%3E%3Cstop offset='.55' stop-color='%237fa8ff' stop-opacity='.08'/%3E%3Cstop offset='1' stop-color='%237fa8ff' stop-opacity='0'/%3E%3C/radialGradient%3E %3CradialGradient id='gcore2'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.5' stop-color='%23fff1d6' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23ffd9a8' stop-opacity='0'/%3E%3C/radialGradient%3E %3CradialGradient id='gcore'%3E%3Cstop offset='0' stop-color='%23fff6e6'/%3E%3Cstop offset='.35' stop-color='%23ffd9a8' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23ffd9a8' stop-opacity='0'/%3E%3C/radialGradient%3E %3CradialGradient id='glow'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E %3CradialGradient id='planet' cx='.32' cy='.3' r='.85'%3E%3Cstop offset='0' stop-color='%23ffe3b0'/%3E%3Cstop offset='.45' stop-color='%23d08a4a'/%3E%3Cstop offset='.8' stop-color='%236a3a1c'/%3E%3Cstop offset='1' stop-color='%231e0f08'/%3E%3C/radialGradient%3E %3ClinearGradient id='bands' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%23fff1d6' stop-opacity='.22'/%3E%3Cstop offset='.38' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23ffe0b8' stop-opacity='.16'/%3E%3Cstop offset='.62' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E %3CradialGradient id='atmo' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='.86' stop-color='%23ffc98a' stop-opacity='0'/%3E%3Cstop offset='.93' stop-color='%23ffc98a' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%23ffc98a' stop-opacity='0'/%3E%3C/radialGradient%3E %3ClinearGradient id='ringg' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23e8c79a' stop-opacity='.1'/%3E%3Cstop offset='.5' stop-color='%23fff2dc' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23e8c79a' stop-opacity='.15'/%3E%3C/linearGradient%3E %3ClinearGradient id='iontail' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23e6fbff' stop-opacity='.95'/%3E%3Cstop offset='.35' stop-color='%238fe6ff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%235fc8ff' stop-opacity='0'/%3E%3C/linearGradient%3E %3ClinearGradient id='dusttail' x1='0' y1='0' x2='1' y2='-.2'%3E%3Cstop offset='0' stop-color='%23fff3dc' stop-opacity='.85'/%3E%3Cstop offset='.4' stop-color='%23ffd59a' stop-opacity='.4'/%3E%3Cstop offset='1' stop-color='%23ffb070' stop-opacity='0'/%3E%3C/linearGradient%3E %3CradialGradient id='coma'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.95'/%3E%3Cstop offset='.3' stop-color='%23d9f7ff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%239fe6ff' stop-opacity='0'/%3E%3C/radialGradient%3E %3ClinearGradient id='trail' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23bfe9ff' stop-opacity='0'/%3E%3C/linearGradient%3E %3CclipPath id='pclip'%3E%3Ccircle cx='505' cy='845' r='150'/%3E%3C/clipPath%3E %3C/defs%3E %3Crect x='-200' y='0' width='1000' height='1000' fill='url(%23sky)'/%3E %3Cg class='neb' filter='url(%23blur)'%3E %3Cellipse cx='140' cy='280' rx='200' ry='120' fill='%231d6fd6' opacity='0.14'/%3E %3Cellipse cx='420' cy='180' rx='170' ry='100' fill='%2313c4c9' opacity='0.41'/%3E %3Cellipse cx='300' cy='300' rx='120' ry='70' fill='%23ff7a59' opacity='0.33'/%3E %3Cellipse cx='230' cy='120' rx='110' ry='60' fill='%23ff4f9a' opacity='0.26'/%3E %3Cellipse cx='470' cy='470' rx='190' ry='110' fill='%230fb5a8' opacity='0.37'/%3E %3Cellipse cx='360' cy='560' rx='120' ry='60' fill='%23ffb347' opacity='0.24'/%3E %3Cellipse cx='90' cy='600' rx='170' ry='100' fill='%232a5bd6' opacity='0.14'/%3E %3Cellipse cx='150' cy='700' rx='110' ry='60' fill='%23ff5f7e' opacity='0.19'/%3E %3Cellipse cx='560' cy='700' rx='140' ry='90' fill='%2319a3ff' opacity='0.14'/%3E %3Cellipse cx='110' cy='70' rx='150' ry='70' fill='%2313c4c9' opacity='0.46'/%3E %3Cellipse cx='470' cy='60' rx='160' ry='70' fill='%23ff4f9a' opacity='0.37'/%3E %3Cellipse cx='300' cy='110' rx='110' ry='50' fill='%23ffb347' opacity='0.28'/%3E %3Cellipse cx='300' cy='830' rx='170' ry='80' fill='%2312c7b8' opacity='0.46'/%3E %3Cellipse cx='200' cy='960' rx='190' ry='70' fill='%23ff5f9e' opacity='0.34'/%3E %3Cellipse cx='420' cy='720' rx='130' ry='60' fill='%23ff8a4a' opacity='0.34'/%3E %3Cellipse cx='40' cy='860' rx='140' ry='90' fill='%232a6bff' opacity='0.14'/%3E %3C/g%3E %3Cg transform='rotate(-52 300 470)'%3E %3Cg filter='url(%23blur)'%3E %3Cellipse cx='300' cy='470' rx='760' ry='95' fill='%239aa8c4' opacity='.16'/%3E %3Cellipse cx='300' cy='470' rx='520' ry='48' fill='%23e8ecf5' opacity='.2'/%3E %3Cellipse cx='360' cy='470' rx='200' ry='55' fill='%23ffd9a8' opacity='.3'/%3E %3C/g%3E %3Cg filter='url(%23blurS)'%3E %3Cellipse cx='260' cy='476' rx='430' ry='9' fill='%2302050c' opacity='.55'/%3E %3Cellipse cx='480' cy='460' rx='160' ry='6' fill='%2302050c' opacity='.45'/%3E %3C/g%3E %3C/g%3E %3Ccircle cx='-81.5' cy='949.5' r='0.35' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='294.1' cy='469.5' r='0.55' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='58.1' cy='794.3' r='0.35' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='470.4' cy='268.1' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='102.5' cy='852.8' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='428.8' cy='342.1' r='0.65' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='564.8' cy='105.8' r='0.36' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='213.1' cy='506.3' r='0.37' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='613.6' cy='22.0' r='0.38' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='250.9' cy='516.6' r='1.07' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='309.8' cy='509.1' r='1.63' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-57.7' cy='684.2' r='0.42' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='71.9' cy='771.9' r='0.68' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='194.8' cy='620.4' r='0.67' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='466.3' cy='209.5' r='0.36' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='33.7' cy='872.8' r='0.35' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='653.2' cy='58.8' r='0.63' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='112.0' cy='670.7' r='0.58' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='590.0' cy='57.8' r='0.68' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='507.7' cy='254.3' r='0.72' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-53.2' cy='826.9' r='0.43' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='526.4' cy='223.6' r='0.70' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='134.7' cy='589.2' r='0.35' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='118.6' cy='798.7' r='0.89' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='126.9' cy='762.3' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='483.8' cy='239.6' r='0.61' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='593.1' cy='96.6' r='0.60' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='386.2' cy='194.0' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='139.6' cy='745.2' r='0.37' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='313.7' cy='386.5' r='0.77' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='324.7' cy='433.6' r='0.35' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='468.4' cy='286.3' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='632.8' cy='87.2' r='0.88' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='-79.0' cy='970.9' r='1.58' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='-37.7' cy='995.3' r='0.84' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='630.1' cy='82.2' r='0.45' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='174.8' cy='708.1' r='0.37' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='422.5' cy='347.7' r='0.40' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='152.4' cy='687.1' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='341.5' cy='519.5' r='0.66' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='594.3' cy='107.8' r='1.32' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='208.4' cy='637.5' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='301.6' cy='477.5' r='0.50' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='6.2' cy='819.7' r='0.35' fill='%23ffe7c4' opacity='0.6'/%3E%3Ccircle cx='3.9' cy='803.5' r='1.52' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='445.7' cy='356.0' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='17.3' cy='840.5' r='0.37' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='-32.9' cy='869.5' r='0.92' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='123.0' cy='519.2' r='0.91' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='58.5' cy='783.9' r='0.35' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='422.5' cy='252.0' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='504.6' cy='190.6' r='0.83' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='274.3' cy='589.2' r='0.35' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='465.6' cy='251.0' r='0.39' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='-18.3' cy='810.5' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='81.1' cy='680.2' r='0.95' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='25.9' cy='714.5' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='399.3' cy='361.0' r='1.22' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='92.6' cy='632.6' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='181.8' cy='682.9' r='1.74' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='474.3' cy='215.1' r='0.84' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='551.3' cy='154.6' r='0.78' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='47.7' cy='770.9' r='0.47' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='187.6' cy='547.0' r='0.40' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='341.9' cy='486.6' r='0.36' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='83.9' cy='642.3' r='0.35' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='228.4' cy='474.9' r='0.74' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='333.7' cy='349.7' r='0.58' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='20.6' cy='828.3' r='0.82' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='-103.8' cy='1016.8' r='0.54' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='-33.7' cy='867.9' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='579.8' cy='164.3' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='68.1' cy='714.4' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='552.9' cy='99.3' r='1.71' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='348.8' cy='415.7' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='172.8' cy='588.4' r='0.58' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='-42.5' cy='947.2' r='1.11' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='53.5' cy='696.3' r='0.62' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='171.2' cy='601.3' r='0.36' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='343.4' cy='520.4' r='0.50' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='450.3' cy='155.0' r='0.35' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='20.6' cy='857.9' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='286.6' cy='435.9' r='0.38' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='94.2' cy='808.3' r='0.36' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='698.7' cy='-14.1' r='0.36' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='424.5' cy='288.7' r='0.38' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='232.6' cy='587.8' r='0.59' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='534.1' cy='177.4' r='1.41' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='223.3' cy='598.1' r='0.74' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='-18.2' cy='973.4' r='1.69' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='60.4' cy='750.5' r='0.46' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='268.0' cy='502.9' r='0.39' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='-61.7' cy='930.3' r='0.75' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='645.4' cy='41.8' r='0.36' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-117.6' cy='896.8' r='0.38' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='470.4' cy='264.0' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='55.3' cy='672.9' r='0.40' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='311.2' cy='530.1' r='0.56' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='624.3' cy='129.1' r='0.63' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='606.0' cy='29.0' r='0.68' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='308.3' cy='451.5' r='0.40' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='518.1' cy='176.3' r='0.40' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='463.7' cy='370.2' r='0.76' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='153.5' cy='694.4' r='0.43' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='541.0' cy='226.4' r='0.80' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='525.3' cy='156.1' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='3.1' cy='894.8' r='1.53' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='592.7' cy='48.2' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='201.5' cy='537.2' r='1.34' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='193.8' cy='659.1' r='1.48' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='301.3' cy='474.7' r='0.82' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='571.9' cy='23.5' r='0.65' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-100.7' cy='970.0' r='0.59' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='101.4' cy='778.8' r='0.35' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='492.8' cy='249.9' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='475.2' cy='195.8' r='1.61' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='659.4' cy='70.2' r='0.40' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='74.5' cy='745.6' r='0.43' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='-93.3' cy='961.5' r='0.48' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='528.4' cy='139.9' r='1.09' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='494.4' cy='155.6' r='0.35' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='4.5' cy='787.3' r='1.74' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='-4.7' cy='768.6' r='1.58' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='445.9' cy='287.1' r='0.65' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='382.2' cy='326.3' r='0.35' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='-91.1' cy='950.3' r='1.24' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='460.6' cy='306.2' r='1.49' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='530.2' cy='101.8' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='248.5' cy='550.1' r='0.63' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='715.0' cy='15.0' r='0.64' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='-65.4' cy='922.5' r='0.35' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='382.9' cy='662.5' r='0.37' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='593.5' cy='119.2' r='0.45' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='547.2' cy='225.5' r='0.60' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='592.2' cy='48.3' r='1.20' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='89.3' cy='763.9' r='0.35' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='474.9' cy='86.1' r='1.26' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='510.3' cy='301.0' r='0.36' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='597.5' cy='178.2' r='1.14' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='103.3' cy='645.0' r='1.45' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='578.9' cy='131.1' r='0.47' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='627.7' cy='7.8' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='375.7' cy='319.4' r='0.38' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='183.5' cy='649.6' r='0.68' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='103.5' cy='401.0' r='0.42' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='22.4' cy='777.6' r='0.46' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='187.4' cy='566.9' r='0.74' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='344.1' cy='357.9' r='0.46' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='342.7' cy='422.3' r='0.36' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='319.8' cy='224.0' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='295.8' cy='476.7' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='174.8' cy='538.7' r='1.32' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='618.6' cy='44.1' r='0.44' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='603.9' cy='144.0' r='0.41' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='305.1' cy='455.2' r='0.35' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='179.0' cy='587.3' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='590.5' cy='67.4' r='0.37' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='347.4' cy='405.5' r='0.36' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='271.6' cy='521.6' r='0.72' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='570.6' cy='207.4' r='0.41' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-103.5' cy='943.7' r='1.29' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='213.1' cy='572.9' r='0.92' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='580.0' cy='181.1' r='0.59' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='53.6' cy='837.6' r='0.37' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='511.5' cy='52.1' r='0.49' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='252.9' cy='561.1' r='0.59' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='530.9' cy='121.0' r='0.84' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='159.7' cy='854.9' r='0.35' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='187.3' cy='550.0' r='0.47' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='543.7' cy='98.0' r='0.74' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='469.0' cy='161.7' r='0.36' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='270.0' cy='424.1' r='0.36' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='135.7' cy='752.1' r='0.51' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-66.6' cy='800.9' r='0.74' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='566.0' cy='123.9' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='147.5' cy='679.0' r='0.35' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='511.7' cy='341.5' r='0.37' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='315.3' cy='265.8' r='0.83' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='39.5' cy='887.8' r='0.69' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='345.5' cy='423.2' r='0.37' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='428.1' cy='312.6' r='0.35' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='376.8' cy='418.2' r='0.36' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='-12.2' cy='844.3' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='16.9' cy='800.2' r='0.40' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='63.5' cy='805.2' r='0.36' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-14.2' cy='937.2' r='0.61' fill='%23ffe7c4' opacity='0.6'/%3E%3Ccircle cx='5.4' cy='842.3' r='1.15' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='141.7' cy='610.5' r='1.13' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='451.9' cy='341.3' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='235.1' cy='609.5' r='0.37' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='634.5' cy='22.5' r='0.53' fill='%23ffe7c4' opacity='0.6'/%3E%3Ccircle cx='-17.3' cy='844.6' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='244.0' cy='607.5' r='0.35' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='632.8' cy='38.6' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='576.0' cy='215.0' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='84.8' cy='744.5' r='0.35' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='362.3' cy='404.7' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='337.2' cy='468.8' r='0.43' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='260.5' cy='787.3' r='0.36' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='-74.1' cy='986.2' r='1.47' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='-20.7' cy='777.0' r='1.22' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='81.4' cy='674.6' r='0.96' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='509.0' cy='227.0' r='0.44' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='403.4' cy='273.8' r='0.43' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='451.6' cy='301.8' r='0.65' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='281.0' cy='507.8' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='505.2' cy='226.1' r='1.03' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='71.6' cy='745.7' r='0.35' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='447.2' cy='117.1' r='1.08' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='24.0' cy='823.3' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='633.1' cy='40.6' r='0.43' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='222.3' cy='450.5' r='1.12' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='43.1' cy='769.5' r='0.40' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='-10.1' cy='867.3' r='0.48' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='58.5' cy='713.6' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='468.4' cy='272.0' r='0.51' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='163.7' cy='556.0' r='0.41' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='217.3' cy='547.8' r='0.88' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='440.7' cy='337.8' r='0.38' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='646.5' cy='10.9' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='183.6' cy='889.3' r='0.38' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='333.1' cy='397.3' r='0.43' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='155.2' cy='642.1' r='0.84' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='454.6' cy='160.4' r='1.28' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='400.3' cy='245.7' r='0.35' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-105.4' cy='967.6' r='1.49' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-15.4' cy='881.5' r='0.57' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='15.6' cy='673.7' r='0.88' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='135.2' cy='641.4' r='0.53' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='282.7' cy='589.8' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='580.0' cy='90.6' r='0.98' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='159.2' cy='652.5' r='0.85' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='593.8' cy='157.8' r='0.36' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='-86.2' cy='952.5' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='289.0' cy='279.1' r='0.87' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='40.0' cy='760.5' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='574.6' cy='107.7' r='0.65' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='652.6' cy='40.4' r='1.40' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='232.6' cy='658.7' r='0.44' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='303.0' cy='428.6' r='0.39' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='318.8' cy='556.6' r='0.37' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='646.7' cy='42.5' r='0.77' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='574.6' cy='42.4' r='0.41' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='228.1' cy='619.5' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='117.1' cy='860.0' r='0.35' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='-92.4' cy='846.6' r='0.60' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='518.5' cy='103.1' r='1.46' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='387.3' cy='319.1' r='0.49' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='-3.9' cy='934.9' r='0.39' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='553.7' cy='109.5' r='0.45' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='5.6' cy='785.1' r='0.48' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='175.1' cy='588.5' r='0.38' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='656.3' cy='1.0' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='365.6' cy='445.9' r='0.94' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='73.4' cy='718.9' r='0.36' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='530.5' cy='215.7' r='0.42' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='416.5' cy='305.4' r='1.15' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='65.3' cy='720.8' r='0.36' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='261.0' cy='511.4' r='0.66' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='652.5' cy='-2.8' r='1.07' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='432.0' cy='221.7' r='0.37' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='640.5' cy='32.0' r='0.73' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='469.7' cy='300.8' r='0.36' fill='%23ffe7c4' opacity='0.6'/%3E%3Ccircle cx='29.7' cy='864.5' r='1.26' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='386.2' cy='435.3' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='281.2' cy='498.3' r='1.33' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='483.8' cy='194.8' r='0.65' fill='%23ffe7c4' opacity='0.6'/%3E%3Ccircle cx='-43.5' cy='913.0' r='0.75' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='439.1' cy='294.3' r='0.54' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='455.5' cy='247.7' r='0.68' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='611.2' cy='57.0' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='231.4' cy='547.8' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='507.6' cy='236.7' r='0.37' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='589.7' cy='47.9' r='0.89' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='197.9' cy='736.8' r='0.51' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='161.3' cy='654.1' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='64.6' cy='796.0' r='1.07' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='681.1' cy='8.2' r='0.47' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='218.5' cy='791.2' r='0.36' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='58.6' cy='813.1' r='0.39' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='180.9' cy='512.1' r='0.74' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='8.9' cy='842.9' r='0.60' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='630.8' cy='45.1' r='0.37' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='95.3' cy='596.6' r='0.47' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='410.4' cy='309.3' r='0.44' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='575.3' cy='18.7' r='0.46' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='-70.7' cy='947.5' r='0.35' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='379.1' cy='409.2' r='0.60' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='446.1' cy='308.3' r='1.25' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='-63.7' cy='763.2' r='0.55' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='68.8' cy='806.8' r='0.35' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='-24.6' cy='847.0' r='1.11' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='59.5' cy='855.6' r='0.39' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='622.3' cy='34.2' r='1.37' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='97.1' cy='686.0' r='0.36' fill='%23ffe7c4' opacity='0.6'/%3E%3Ccircle cx='338.6' cy='433.0' r='1.59' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='563.8' cy='141.3' r='0.87' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='147.1' cy='571.3' r='0.37' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='352.0' cy='353.3' r='0.36' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='408.8' cy='400.1' r='0.35' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-117.1' cy='1013.6' r='0.36' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='546.4' cy='149.0' r='1.64' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='161.3' cy='669.3' r='0.63' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='512.0' cy='187.2' r='0.70' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-17.1' cy='848.6' r='0.35' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='78.0' cy='853.4' r='1.48' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='510.5' cy='211.0' r='1.31' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='331.3' cy='430.8' r='1.34' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='662.7' cy='43.6' r='0.45' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='91.4' cy='746.9' r='0.35' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='520.7' cy='117.2' r='0.41' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='-66.1' cy='934.6' r='1.53' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='235.6' cy='595.5' r='0.35' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='702.5' cy='1.6' r='0.36' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='565.3' cy='163.7' r='0.48' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='350.0' cy='443.3' r='1.00' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='652.4' cy='-15.7' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='-110.7' cy='1004.2' r='0.40' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='256.3' cy='484.0' r='1.36' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='17.2' cy='788.3' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='637.1' cy='56.4' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='18.5' cy='912.0' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='111.2' cy='692.0' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='-52.8' cy='980.9' r='0.79' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='515.5' cy='262.4' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='181.0' cy='622.8' r='0.36' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='164.1' cy='647.2' r='0.96' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='103.6' cy='655.4' r='0.44' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='-41.9' cy='850.6' r='0.35' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='-77.5' cy='970.0' r='1.34' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='180.8' cy='553.9' r='0.44' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='537.7' cy='228.7' r='1.40' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='311.5' cy='544.2' r='0.67' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='292.9' cy='535.7' r='0.35' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='545.1' cy='94.3' r='0.41' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='552.3' cy='210.2' r='0.95' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-102.6' cy='849.5' r='0.85' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='70.0' cy='788.8' r='0.38' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='542.1' cy='231.1' r='1.29' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='-66.7' cy='816.3' r='0.77' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='423.3' cy='311.3' r='0.39' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='-98.2' cy='927.2' r='0.41' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='243.2' cy='463.6' r='0.98' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='271.7' cy='616.7' r='1.42' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='222.1' cy='459.0' r='0.76' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='243.0' cy='433.8' r='0.81' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='552.8' cy='235.8' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='587.3' cy='130.0' r='0.36' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='276.8' cy='465.9' r='1.00' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='4.6' cy='882.4' r='0.68' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='554.8' cy='177.7' r='0.59' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='130.2' cy='732.6' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='108.3' cy='745.7' r='0.36' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='195.8' cy='657.6' r='1.00' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='486.5' cy='179.5' r='0.64' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='255.5' cy='568.5' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='526.3' cy='126.7' r='0.35' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='250.9' cy='546.6' r='0.36' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='538.4' cy='268.1' r='1.05' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='109.6' cy='729.8' r='0.82' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='96.5' cy='788.1' r='0.35' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='-49.9' cy='821.6' r='0.35' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='284.7' cy='573.4' r='1.23' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='534.1' cy='226.2' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='492.8' cy='255.7' r='0.41' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='543.9' cy='167.3' r='1.05' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='503.3' cy='206.8' r='1.35' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='233.8' cy='602.5' r='0.91' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='50.4' cy='853.3' r='0.40' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='243.4' cy='435.0' r='0.42' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='-99.6' cy='948.1' r='0.36' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='270.0' cy='504.5' r='0.45' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='444.1' cy='216.9' r='0.41' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='137.3' cy='697.8' r='1.29' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='64.7' cy='686.2' r='0.84' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='647.9' cy='-0.1' r='1.19' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='108.5' cy='714.0' r='0.38' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='10.8' cy='886.3' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='469.3' cy='314.3' r='0.39' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='533.1' cy='173.2' r='0.85' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='351.8' cy='464.9' r='0.48' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='4.7' cy='796.4' r='0.43' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='-78.0' cy='939.7' r='0.64' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-8.7' cy='705.7' r='0.69' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='329.3' cy='448.0' r='0.37' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='-46.4' cy='967.8' r='0.35' fill='%23ffe7c4' opacity='0.5'/%3E%3Ccircle cx='605.9' cy='90.1' r='0.45' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='477.0' cy='202.4' r='1.07' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='25.1' cy='894.4' r='0.39' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='-81.6' cy='1015.5' r='0.81' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='677.5' cy='-12.5' r='1.13' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='616.7' cy='182.9' r='0.83' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='17.9' cy='896.2' r='0.90' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='8.7' cy='838.0' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='222.7' cy='566.7' r='0.81' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='-44.7' cy='850.7' r='0.45' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='632.2' cy='109.4' r='0.37' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='504.1' cy='221.9' r='1.06' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='210.5' cy='576.8' r='1.18' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='27.1' cy='795.0' r='0.36' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='170.8' cy='645.5' r='1.27' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='708.2' cy='33.0' r='0.35' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='250.3' cy='612.6' r='1.33' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='87.9' cy='782.4' r='0.92' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='312.3' cy='604.3' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='-43.8' cy='846.2' r='0.35' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='488.3' cy='206.9' r='0.53' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='86.1' cy='808.0' r='0.52' fill='%23ffe7c4' opacity='0.6'/%3E%3Ccircle cx='37.4' cy='837.8' r='0.36' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='-65.2' cy='856.0' r='1.52' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='225.1' cy='525.2' r='1.30' fill='%23ffe7c4' opacity='0.6'/%3E%3Ccircle cx='672.0' cy='61.8' r='0.42' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='326.7' cy='426.8' r='0.91' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='-103.2' cy='962.7' r='0.42' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='409.8' cy='298.3' r='0.77' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='-64.0' cy='683.9' r='0.47' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='449.1' cy='300.1' r='1.08' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='506.6' cy='57.0' r='0.52' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='36.7' cy='754.1' r='0.73' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='377.1' cy='413.6' r='0.35' fill='%23eaf3ff' opacity='0.4'/%3E%3Ccircle cx='79.3' cy='788.9' r='0.35' fill='%23eaf3ff' opacity='0.9'/%3E%3Ccircle cx='515.2' cy='233.3' r='0.40' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='467.0' cy='241.8' r='0.35' fill='%23ffe7c4' opacity='0.7'/%3E%3Ccircle cx='393.3' cy='344.2' r='0.49' fill='%23eaf3ff' opacity='0.7'/%3E%3Ccircle cx='357.1' cy='413.1' r='0.38' fill='%23eaf3ff' opacity='0.8'/%3E%3Ccircle cx='593.1' cy='148.4' r='0.68' fill='%23eaf3ff' opacity='0.6'/%3E%3Ccircle cx='415.6' cy='425.7' r='0.68' fill='%23ffe7c4' opacity='0.6'/%3E%3Ccircle cx='649.1' cy='23.8' r='0.59' fill='%23ffe7c4' opacity='0.4'/%3E%3Ccircle cx='168.8' cy='618.1' r='0.39' fill='%23ffe7c4' opacity='0.8'/%3E%3Ccircle cx='-26.1' cy='984.8' r='0.51' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='-67.2' cy='998.7' r='0.35' fill='%23ffe7c4' opacity='0.9'/%3E%3Ccircle cx='5.2' cy='921.9' r='0.54' fill='%23eaf3ff' opacity='0.5'/%3E%3Ccircle cx='607.5' cy='70.7' r='1.30' fill='%23eaf3ff' opacity='0.8'/%3E %3Ccircle cx='-99.9' cy='25.4' r='0.6' fill='%23ffd9a8' opacity='0.8' class='tw' style='animation-delay:-0.2s%3Banimation-duration:2.3s'/%3E%3Ccircle cx='399.1' cy='497.9' r='1.5' fill='%23ffffff' opacity='0.5' class='tw' style='animation-delay:-4.0s%3Banimation-duration:2.8s'/%3E%3Ccircle cx='249.1' cy='177.1' r='1.5' fill='%23ffd9a8' opacity='0.9'/%3E%3Ccircle cx='337.2' cy='400.0' r='0.7' fill='%23ffffff' opacity='0.5' class='tw' style='animation-delay:-0.2s%3Banimation-duration:4.0s'/%3E%3Ccircle cx='649.9' cy='530.6' r='0.5' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='340.5' cy='397.4' r='1.4' fill='%239ff5ee' opacity='0.8'/%3E%3Ccircle cx='397.0' cy='327.2' r='2.2' fill='%23ffc2d6' opacity='0.6'/%3E%3Ccircle cx='117.9' cy='37.5' r='0.9' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='110.5' cy='829.7' r='0.5' fill='%23ffd9a8' opacity='0.6'/%3E%3Ccircle cx='545.6' cy='604.0' r='1.7' fill='%239ff5ee' opacity='0.6'/%3E%3Ccircle cx='-2.9' cy='86.9' r='1.4' fill='%23ffc2d6' opacity='0.9'/%3E%3Ccircle cx='198.3' cy='17.8' r='0.5' fill='%23ffc2d6' opacity='0.5'/%3E%3Ccircle cx='311.9' cy='714.7' r='0.5' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='675.7' cy='479.5' r='2.0' fill='%23ffc2d6' opacity='0.7'/%3E%3Ccircle cx='190.8' cy='45.4' r='0.5' fill='%23ffc2d6' opacity='0.7'/%3E%3Ccircle cx='282.3' cy='354.7' r='0.5' fill='%23ffd9a8' opacity='0.9'/%3E%3Ccircle cx='384.7' cy='101.5' r='0.8' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='133.9' cy='465.0' r='2.2' fill='%23bfe6ff' opacity='0.7'/%3E%3Ccircle cx='197.2' cy='366.9' r='1.1' fill='%23ffffff' opacity='1.0'/%3E%3Ccircle cx='-25.8' cy='315.5' r='0.5' fill='%23ffd9a8' opacity='0.6'/%3E%3Ccircle cx='357.3' cy='517.9' r='0.5' fill='%23bfe6ff' opacity='1.0'/%3E%3Ccircle cx='266.2' cy='671.0' r='1.7' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='304.2' cy='448.2' r='0.8' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='392.8' cy='401.6' r='0.5' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='438.2' cy='105.2' r='1.8' fill='%23ffd9a8' opacity='0.7'/%3E%3Ccircle cx='631.5' cy='978.8' r='0.5' fill='%239ff5ee' opacity='1.0'/%3E%3Ccircle cx='663.4' cy='674.8' r='1.0' fill='%23ffc2d6' opacity='0.6'/%3E%3Ccircle cx='533.8' cy='437.2' r='0.5' fill='%239ff5ee' opacity='0.6' class='tw' style='animation-delay:-3.7s%3Banimation-duration:4.2s'/%3E%3Ccircle cx='556.3' cy='107.5' r='0.5' fill='%239ff5ee' opacity='0.7' class='tw' style='animation-delay:-2.0s%3Banimation-duration:4.1s'/%3E%3Ccircle cx='690.3' cy='950.7' r='1.0' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='571.2' cy='637.0' r='1.5' fill='%23ffc2d6' opacity='0.8'/%3E%3Ccircle cx='605.2' cy='553.0' r='0.5' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='463.5' cy='951.5' r='0.8' fill='%23ffd9a8' opacity='0.9'/%3E%3Ccircle cx='203.2' cy='522.7' r='0.5' fill='%23ffffff' opacity='0.7' class='tw' style='animation-delay:-3.9s%3Banimation-duration:5.5s'/%3E%3Ccircle cx='233.3' cy='250.3' r='0.5' fill='%239ff5ee' opacity='0.4'/%3E%3Ccircle cx='425.1' cy='499.5' r='0.6' fill='%23bfe6ff' opacity='0.8'/%3E%3Ccircle cx='371.8' cy='82.6' r='1.9' fill='%239ff5ee' opacity='0.5'/%3E%3Ccircle cx='186.4' cy='755.3' r='2.1' fill='%23bfe6ff' opacity='0.5' class='tw' style='animation-delay:-4.2s%3Banimation-duration:3.0s'/%3E%3Ccircle cx='502.6' cy='552.9' r='0.6' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='301.0' cy='176.1' r='0.5' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='172.9' cy='607.6' r='1.1' fill='%23ffd9a8' opacity='0.5'/%3E%3Ccircle cx='144.1' cy='60.3' r='0.5' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='634.9' cy='911.6' r='1.7' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='673.3' cy='191.9' r='1.9' fill='%23ffd9a8' opacity='0.4'/%3E%3Ccircle cx='473.3' cy='489.6' r='0.7' fill='%23bfe6ff' opacity='0.8'/%3E%3Ccircle cx='390.6' cy='853.7' r='0.5' fill='%23ffffff' opacity='0.4'/%3E%3Ccircle cx='-58.3' cy='627.8' r='1.2' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='-62.8' cy='598.5' r='0.5' fill='%23bfe6ff' opacity='0.7' class='tw' style='animation-delay:-1.6s%3Banimation-duration:3.4s'/%3E%3Ccircle cx='138.5' cy='759.0' r='0.5' fill='%23bfe6ff' opacity='0.5' class='tw' style='animation-delay:-3.5s%3Banimation-duration:3.9s'/%3E%3Ccircle cx='492.0' cy='523.7' r='0.9' fill='%23bfe6ff' opacity='0.9' class='tw' style='animation-delay:-3.6s%3Banimation-duration:2.6s'/%3E%3Ccircle cx='464.1' cy='807.2' r='2.3' fill='%23bfe6ff' opacity='0.7' class='tw' style='animation-delay:-0.8s%3Banimation-duration:2.5s'/%3E%3Ccircle cx='632.7' cy='909.5' r='2.1' fill='%23ffd9a8' opacity='1.0' class='tw' style='animation-delay:-1.4s%3Banimation-duration:5.3s'/%3E%3Ccircle cx='239.0' cy='800.1' r='0.7' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='556.4' cy='758.0' r='0.8' fill='%23ffc2d6' opacity='0.8'/%3E%3Ccircle cx='216.7' cy='590.0' r='1.8' fill='%23bfe6ff' opacity='0.7' class='tw' style='animation-delay:-4.6s%3Banimation-duration:4.4s'/%3E%3Ccircle cx='229.8' cy='907.8' r='0.7' fill='%23ffffff' opacity='0.9' class='tw' style='animation-delay:-1.7s%3Banimation-duration:3.1s'/%3E%3Ccircle cx='348.9' cy='110.5' r='0.5' fill='%23bfe6ff' opacity='0.6'/%3E%3Ccircle cx='670.0' cy='482.3' r='1.4' fill='%23ffd9a8' opacity='0.6'/%3E%3Ccircle cx='124.0' cy='42.7' r='0.6' fill='%23bfe6ff' opacity='0.4'/%3E%3Ccircle cx='243.0' cy='338.8' r='2.0' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='500.7' cy='775.9' r='0.5' fill='%23bfe6ff' opacity='1.0' class='tw' style='animation-delay:-0.7s%3Banimation-duration:3.6s'/%3E%3Ccircle cx='330.0' cy='512.5' r='2.1' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='26.6' cy='314.4' r='0.6' fill='%239ff5ee' opacity='0.7'/%3E%3Ccircle cx='524.3' cy='133.9' r='0.5' fill='%239ff5ee' opacity='0.9'/%3E%3Ccircle cx='-39.4' cy='271.4' r='0.9' fill='%23ffc2d6' opacity='0.9'/%3E%3Ccircle cx='31.1' cy='989.5' r='0.7' fill='%23ffffff' opacity='0.5' class='tw' style='animation-delay:-2.3s%3Banimation-duration:4.0s'/%3E%3Ccircle cx='699.7' cy='288.8' r='1.0' fill='%23ffd9a8' opacity='0.4' class='tw' style='animation-delay:-3.5s%3Banimation-duration:3.7s'/%3E%3Ccircle cx='453.9' cy='675.2' r='1.1' fill='%23bfe6ff' opacity='0.6' class='tw' style='animation-delay:-5.0s%3Banimation-duration:4.2s'/%3E%3Ccircle cx='554.8' cy='817.7' r='0.6' fill='%23bfe6ff' opacity='0.9' class='tw' style='animation-delay:-0.6s%3Banimation-duration:5.4s'/%3E%3Ccircle cx='472.7' cy='942.7' r='0.5' fill='%23bfe6ff' opacity='1.0'/%3E%3Ccircle cx='528.1' cy='759.7' r='1.1' fill='%23ffd9a8' opacity='0.7'/%3E%3Ccircle cx='685.4' cy='392.6' r='0.5' fill='%23bfe6ff' opacity='0.9'/%3E%3Ccircle cx='391.6' cy='580.4' r='0.5' fill='%23ffffff' opacity='1.0'/%3E%3Ccircle cx='618.1' cy='810.5' r='1.0' fill='%23bfe6ff' opacity='0.6'/%3E%3Ccircle cx='445.3' cy='848.1' r='0.6' fill='%23ffc2d6' opacity='0.9'/%3E%3Ccircle cx='117.7' cy='689.6' r='0.7' fill='%23bfe6ff' opacity='0.8'/%3E%3Ccircle cx='224.6' cy='836.5' r='0.6' fill='%23ffffff' opacity='0.4'/%3E%3Ccircle cx='45.6' cy='543.7' r='0.5' fill='%239ff5ee' opacity='0.8' class='tw' style='animation-delay:-4.1s%3Banimation-duration:2.4s'/%3E%3Ccircle cx='-23.4' cy='225.9' r='1.7' fill='%23ffc2d6' opacity='0.6' class='tw' style='animation-delay:-1.4s%3Banimation-duration:2.1s'/%3E%3Ccircle cx='421.2' cy='603.0' r='0.6' fill='%23bfe6ff' opacity='0.7' class='tw' style='animation-delay:-4.7s%3Banimation-duration:4.6s'/%3E%3Ccircle cx='47.3' cy='475.1' r='1.3' fill='%23ffd9a8' opacity='1.0' class='tw' style='animation-delay:-0.5s%3Banimation-duration:4.5s'/%3E%3Ccircle cx='354.4' cy='613.7' r='0.5' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='-15.4' cy='681.9' r='1.8' fill='%239ff5ee' opacity='0.7'/%3E%3Ccircle cx='499.6' cy='526.2' r='0.6' fill='%23bfe6ff' opacity='0.5' class='tw' style='animation-delay:-2.2s%3Banimation-duration:2.8s'/%3E%3Ccircle cx='658.7' cy='510.6' r='1.9' fill='%23bfe6ff' opacity='0.7'/%3E%3Ccircle cx='91.1' cy='530.1' r='1.9' fill='%23ffc2d6' opacity='0.8'/%3E%3Ccircle cx='231.4' cy='976.9' r='0.7' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='385.0' cy='366.0' r='0.5' fill='%23ffc2d6' opacity='0.7'/%3E%3Ccircle cx='184.8' cy='293.1' r='0.5' fill='%23ffffff' opacity='0.6' class='tw' style='animation-delay:-1.4s%3Banimation-duration:4.7s'/%3E%3Ccircle cx='28.0' cy='82.9' r='0.6' fill='%23ffc2d6' opacity='1.0'/%3E%3Ccircle cx='274.0' cy='992.3' r='1.2' fill='%23ffc2d6' opacity='0.5'/%3E%3Ccircle cx='466.6' cy='577.0' r='0.7' fill='%23ffd9a8' opacity='0.8' class='tw' style='animation-delay:-4.8s%3Banimation-duration:3.8s'/%3E%3Ccircle cx='235.9' cy='944.0' r='0.6' fill='%23ffffff' opacity='0.4'/%3E%3Ccircle cx='-25.7' cy='248.6' r='0.6' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='391.9' cy='350.0' r='0.5' fill='%23ffc2d6' opacity='0.7'/%3E%3Ccircle cx='79.2' cy='787.6' r='0.5' fill='%23ffc2d6' opacity='0.7' class='tw' style='animation-delay:-3.0s%3Banimation-duration:5.2s'/%3E%3Ccircle cx='170.2' cy='340.2' r='1.8' fill='%23bfe6ff' opacity='0.5'/%3E%3Ccircle cx='349.8' cy='952.8' r='0.5' fill='%239ff5ee' opacity='0.8'/%3E%3Ccircle cx='512.6' cy='434.0' r='1.8' fill='%23ffc2d6' opacity='0.5'/%3E%3Ccircle cx='429.6' cy='740.8' r='1.8' fill='%23ffd9a8' opacity='0.9'/%3E%3Ccircle cx='324.4' cy='220.4' r='2.0' fill='%23ffd9a8' opacity='0.8'/%3E%3Ccircle cx='611.1' cy='514.1' r='2.1' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='246.2' cy='955.0' r='0.8' fill='%23bfe6ff' opacity='0.7' class='tw' style='animation-delay:-0.5s%3Banimation-duration:4.6s'/%3E%3Ccircle cx='578.6' cy='605.8' r='1.8' fill='%23ffd9a8' opacity='0.9'/%3E%3Ccircle cx='352.5' cy='286.6' r='0.6' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='13.9' cy='837.7' r='1.0' fill='%23ffffff' opacity='0.5' class='tw' style='animation-delay:-3.6s%3Banimation-duration:3.6s'/%3E%3Ccircle cx='127.8' cy='222.8' r='0.5' fill='%239ff5ee' opacity='0.6' class='tw' style='animation-delay:-3.1s%3Banimation-duration:2.2s'/%3E%3Ccircle cx='210.3' cy='146.4' r='0.8' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='557.1' cy='728.1' r='0.5' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='410.6' cy='465.2' r='1.5' fill='%23ffc2d6' opacity='0.4'/%3E%3Ccircle cx='308.6' cy='756.7' r='1.4' fill='%23bfe6ff' opacity='0.4'/%3E%3Ccircle cx='198.7' cy='197.5' r='0.5' fill='%239ff5ee' opacity='0.7' class='tw' style='animation-delay:-1.8s%3Banimation-duration:5.2s'/%3E%3Ccircle cx='42.0' cy='201.3' r='0.9' fill='%239ff5ee' opacity='0.8'/%3E%3Ccircle cx='-92.8' cy='165.8' r='1.1' fill='%23ffffff' opacity='0.8' class='tw' style='animation-delay:-1.5s%3Banimation-duration:3.1s'/%3E%3Ccircle cx='526.2' cy='984.8' r='0.5' fill='%23ffd9a8' opacity='0.9'/%3E%3Ccircle cx='232.3' cy='905.9' r='1.0' fill='%23ffc2d6' opacity='0.5'/%3E%3Ccircle cx='-68.6' cy='478.0' r='0.9' fill='%23bfe6ff' opacity='0.7' class='tw' style='animation-delay:-4.6s%3Banimation-duration:4.9s'/%3E%3Ccircle cx='528.6' cy='607.4' r='0.5' fill='%23bfe6ff' opacity='0.6' class='tw' style='animation-delay:-3.3s%3Banimation-duration:4.2s'/%3E%3Ccircle cx='608.8' cy='312.3' r='0.7' fill='%23ffd9a8' opacity='0.8'/%3E%3Ccircle cx='162.1' cy='432.8' r='1.3' fill='%23ffc2d6' opacity='1.0' class='tw' style='animation-delay:-3.8s%3Banimation-duration:3.7s'/%3E %3Cg transform='translate(170 772) rotate(-28) scale(1 .45)'%3E %3Ccircle r='113' fill='url(%23ghalo)'/%3E %3Cg filter='url(%23blurS)'%3E%3Cpath d='M8.0 0.0 L10.0 2.1 L11.4 4.9 L11.9 8.4 L11.5 12.2 L9.9 16.2 L7.2 19.9 L3.3 23.2 L-1.6 25.5 L-7.3 26.8 L-13.6 26.7 L-20.1 25.1 L-26.5 21.9 L-32.3 17.1 L-37.3 10.8 L-40.9 3.2 L-42.9 -5.4 L-43.0 -14.7 L-41.0 -24.2 L-36.8 -33.5 L-30.6 -42.1 L-22.3 -49.4 L-12.3 -55.0 L-0.9 -58.6 L11.4 -59.7 L24.1 -58.2 L36.6 -53.9 L48.4 -46.9 L58.8 -37.3 L67.2 -25.4 L73.1 -11.6 L76.1 3.6 L75.9 19.5 L72.4 35.5 L65.4 50.7 L55.2 64.6 L42.0 76.4 L26.3 85.4 L8.6 91.2 L-10.3 93.2 L-29.7 91.3' fill='none' stroke='%23a9c8ff' stroke-width='18' stroke-linecap='round' opacity='.2'/%3E%3Cpath d='M0.0 8.0 L-2.1 10.0 L-4.9 11.4 L-8.4 11.9 L-12.2 11.5 L-16.2 9.9 L-19.9 7.2 L-23.2 3.3 L-25.5 -1.6 L-26.8 -7.3 L-26.7 -13.6 L-25.1 -20.1 L-21.9 -26.5 L-17.1 -32.3 L-10.8 -37.3 L-3.2 -40.9 L5.4 -42.9 L14.7 -43.0 L24.2 -41.0 L33.5 -36.8 L42.1 -30.6 L49.4 -22.3 L55.0 -12.3 L58.6 -0.9 L59.7 11.4 L58.2 24.1 L53.9 36.6 L46.9 48.4 L37.3 58.8 L25.4 67.2 L11.6 73.1 L-3.6 76.1 L-19.5 75.9 L-35.5 72.4 L-50.7 65.4 L-64.6 55.2 L-76.4 42.0 L-85.4 26.3 L-91.2 8.6 L-93.2 -10.3 L-91.3 -29.7' fill='none' stroke='%23a9c8ff' stroke-width='18' stroke-linecap='round' opacity='.2'/%3E%3Cpath d='M-8.0 0.0 L-10.0 -2.1 L-11.4 -4.9 L-11.9 -8.4 L-11.5 -12.2 L-9.9 -16.2 L-7.2 -19.9 L-3.3 -23.2 L1.6 -25.5 L7.3 -26.8 L13.6 -26.7 L20.1 -25.1 L26.5 -21.9 L32.3 -17.1 L37.3 -10.8 L40.9 -3.2 L42.9 5.4 L43.0 14.7 L41.0 24.2 L36.8 33.5 L30.6 42.1 L22.3 49.4 L12.3 55.0 L0.9 58.6 L-11.4 59.7 L-24.1 58.2 L-36.6 53.9 L-48.4 46.9 L-58.8 37.3 L-67.2 25.4 L-73.1 11.6 L-76.1 -3.6 L-75.9 -19.5 L-72.4 -35.5 L-65.4 -50.7 L-55.2 -64.6 L-42.0 -76.4 L-26.3 -85.4 L-8.6 -91.2 L10.3 -93.2 L29.7 -91.3' fill='none' stroke='%23a9c8ff' stroke-width='18' stroke-linecap='round' opacity='.2'/%3E%3Cpath d='M-0.0 -8.0 L2.1 -10.0 L4.9 -11.4 L8.4 -11.9 L12.2 -11.5 L16.2 -9.9 L19.9 -7.2 L23.2 -3.3 L25.5 1.6 L26.8 7.3 L26.7 13.6 L25.1 20.1 L21.9 26.5 L17.1 32.3 L10.8 37.3 L3.2 40.9 L-5.4 42.9 L-14.7 43.0 L-24.2 41.0 L-33.5 36.8 L-42.1 30.6 L-49.4 22.3 L-55.0 12.3 L-58.6 0.9 L-59.7 -11.4 L-58.2 -24.1 L-53.9 -36.6 L-46.9 -48.4 L-37.3 -58.8 L-25.4 -67.2 L-11.6 -73.1 L3.6 -76.1 L19.5 -75.9 L35.5 -72.4 L50.7 -65.4 L64.6 -55.2 L76.4 -42.0 L85.4 -26.3 L91.2 -8.6 L93.2 10.3 L91.3 29.7' fill='none' stroke='%23a9c8ff' stroke-width='18' stroke-linecap='round' opacity='.2'/%3E%3C/g%3E %3Ccircle cx='65.3' cy='45.6' r='0.69' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='64.1' cy='59.6' r='0.51' fill='%23d6ecff' opacity='0.73'/%3E%3Ccircle cx='15.3' cy='-59.8' r='0.37' fill='%23ffffff' opacity='0.63'/%3E%3Ccircle cx='0.5' cy='25.9' r='0.41' fill='%23ffe6c2' opacity='0.56'/%3E%3Ccircle cx='-25.8' cy='98.7' r='0.60' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='-11.0' cy='30.4' r='0.45' fill='%23ffe6c2' opacity='0.86'/%3E%3Ccircle cx='73.8' cy='34.3' r='0.36' fill='%23ffffff' opacity='0.91'/%3E%3Ccircle cx='-36.7' cy='-17.6' r='0.58' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='35.2' cy='93.6' r='0.53' fill='%23d6ecff' opacity='0.89'/%3E%3Ccircle cx='1.5' cy='-49.1' r='0.62' fill='%23ffe6c2' opacity='0.62'/%3E%3Ccircle cx='43.4' cy='73.8' r='0.75' fill='%23d6ecff' opacity='0.53'/%3E%3Ccircle cx='60.5' cy='-41.7' r='0.72' fill='%23d6ecff' opacity='0.42'/%3E%3Ccircle cx='68.9' cy='-4.6' r='0.46' fill='%23ffe6c2' opacity='0.62'/%3E%3Ccircle cx='-40.8' cy='-28.3' r='0.58' fill='%23d6ecff' opacity='0.91'/%3E%3Ccircle cx='6.7' cy='0.7' r='0.72' fill='%23ffe6c2' opacity='0.87'/%3E%3Ccircle cx='11.3' cy='11.5' r='0.40' fill='%23ffe6c2' opacity='0.42'/%3E%3Ccircle cx='-32.4' cy='-47.6' r='0.60' fill='%23d6ecff' opacity='0.83'/%3E%3Ccircle cx='41.6' cy='-36.2' r='0.63' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='8.6' cy='98.4' r='0.72' fill='%23d6ecff' opacity='0.80'/%3E%3Ccircle cx='53.7' cy='63.7' r='0.45' fill='%23d6ecff' opacity='0.49'/%3E%3Ccircle cx='-6.3' cy='26.0' r='0.60' fill='%23ffe6c2' opacity='0.82'/%3E%3Ccircle cx='-10.9' cy='-47.1' r='0.71' fill='%23ffe6c2' opacity='0.41'/%3E%3Ccircle cx='0.0' cy='-63.0' r='0.61' fill='%23d6ecff' opacity='0.62'/%3E%3Ccircle cx='15.9' cy='-57.0' r='0.56' fill='%23d6ecff' opacity='0.90'/%3E%3Ccircle cx='-10.7' cy='35.7' r='0.92' fill='%23ffe6c2' opacity='0.38'/%3E%3Ccircle cx='52.8' cy='-26.5' r='0.81' fill='%23ffffff' opacity='0.52'/%3E%3Ccircle cx='40.4' cy='-46.1' r='0.83' fill='%23ffe6c2' opacity='0.92'/%3E%3Ccircle cx='85.9' cy='-13.7' r='0.73' fill='%23d6ecff' opacity='0.83'/%3E%3Ccircle cx='8.6' cy='106.6' r='0.59' fill='%23d6ecff' opacity='0.41'/%3E%3Ccircle cx='4.9' cy='-60.6' r='0.69' fill='%23d6ecff' opacity='0.79'/%3E%3Ccircle cx='60.9' cy='-56.4' r='0.42' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='-36.3' cy='13.1' r='0.69' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='-24.3' cy='30.7' r='0.52' fill='%23ffe6c2' opacity='0.85'/%3E%3Ccircle cx='9.9' cy='3.3' r='0.88' fill='%23ffe6c2' opacity='0.72'/%3E%3Ccircle cx='-37.7' cy='16.2' r='0.44' fill='%23d6ecff' opacity='0.71'/%3E%3Ccircle cx='37.9' cy='73.8' r='0.56' fill='%23d6ecff' opacity='0.45'/%3E%3Ccircle cx='-36.0' cy='-18.8' r='0.90' fill='%23d6ecff' opacity='0.93'/%3E%3Ccircle cx='1.9' cy='24.5' r='0.81' fill='%23ffe6c2' opacity='0.44'/%3E%3Ccircle cx='-24.9' cy='-43.1' r='0.76' fill='%23ffffff' opacity='0.75'/%3E%3Ccircle cx='48.6' cy='53.2' r='0.60' fill='%23d6ecff' opacity='0.71'/%3E%3Ccircle cx='11.1' cy='9.4' r='0.66' fill='%23ffe6c2' opacity='0.84'/%3E%3Ccircle cx='2.2' cy='106.6' r='0.38' fill='%23ffffff' opacity='0.44'/%3E%3Ccircle cx='58.6' cy='62.0' r='0.67' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='68.7' cy='4.2' r='0.64' fill='%23d6ecff' opacity='0.83'/%3E%3Ccircle cx='-40.2' cy='12.7' r='0.68' fill='%23d6ecff' opacity='0.58'/%3E%3Ccircle cx='45.0' cy='66.8' r='0.38' fill='%23d6ecff' opacity='0.74'/%3E%3Ccircle cx='31.6' cy='96.6' r='0.60' fill='%23ffffff' opacity='0.71'/%3E%3Ccircle cx='8.3' cy='108.7' r='0.65' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='-42.4' cy='-1.1' r='0.49' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='60.6' cy='-38.2' r='0.72' fill='%23d6ecff' opacity='0.39'/%3E%3Ccircle cx='-37.8' cy='-43.0' r='0.38' fill='%23d6ecff' opacity='0.55'/%3E%3Ccircle cx='33.1' cy='96.0' r='0.72' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='11.9' cy='103.2' r='0.70' fill='%23ffe6c2' opacity='0.41'/%3E%3Ccircle cx='14.6' cy='12.6' r='1.04' fill='%23ffe6c2' opacity='0.94'/%3E%3Ccircle cx='-27.1' cy='19.9' r='0.52' fill='%23ffffff' opacity='0.51'/%3E%3Ccircle cx='-28.0' cy='15.4' r='0.49' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='-33.0' cy='13.0' r='0.58' fill='%23d6ecff' opacity='0.47'/%3E%3Ccircle cx='80.4' cy='-7.7' r='0.72' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='-41.3' cy='-16.8' r='0.84' fill='%23d6ecff' opacity='0.40'/%3E%3Ccircle cx='36.6' cy='-44.6' r='0.84' fill='%23d6ecff' opacity='0.36'/%3E%3Ccircle cx='81.9' cy='7.9' r='0.60' fill='%23d6ecff' opacity='0.36'/%3E%3Ccircle cx='-41.8' cy='-10.4' r='0.65' fill='%23d6ecff' opacity='0.60'/%3E%3Ccircle cx='90.5' cy='12.6' r='0.72' fill='%23d6ecff' opacity='0.54'/%3E%3Ccircle cx='-35.5' cy='25.8' r='0.59' fill='%23d6ecff' opacity='0.71'/%3E%3Ccircle cx='52.3' cy='-52.6' r='0.58' fill='%23ffffff' opacity='0.90'/%3E%3Ccircle cx='95.9' cy='7.8' r='0.61' fill='%23d6ecff' opacity='0.64'/%3E%3Ccircle cx='-16.2' cy='20.1' r='0.53' fill='%23ffe6c2' opacity='0.87'/%3E%3Ccircle cx='-9.6' cy='-57.4' r='0.74' fill='%23ffffff' opacity='0.84'/%3E%3Ccircle cx='-16.1' cy='-45.8' r='0.52' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='-25.6' cy='21.8' r='0.39' fill='%23ffffff' opacity='0.71'/%3E%3Ccircle cx='63.5' cy='61.3' r='0.37' fill='%23d6ecff' opacity='0.86'/%3E%3Ccircle cx='48.5' cy='-65.2' r='0.36' fill='%23ffffff' opacity='0.95'/%3E%3Ccircle cx='65.9' cy='-55.5' r='0.76' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='10.6' cy='7.7' r='0.67' fill='%23ffe6c2' opacity='0.87'/%3E%3Ccircle cx='60.9' cy='70.4' r='0.76' fill='%23ffe6c2' opacity='0.46'/%3E%3Ccircle cx='49.5' cy='79.2' r='0.44' fill='%23d6ecff' opacity='0.65'/%3E%3Ccircle cx='71.3' cy='52.4' r='0.39' fill='%23ffe6c2' opacity='0.49'/%3E%3Ccircle cx='-14.3' cy='88.3' r='0.45' fill='%23d6ecff' opacity='0.50'/%3E%3Ccircle cx='-13.9' cy='-56.7' r='0.75' fill='%23d6ecff' opacity='0.92'/%3E%3Ccircle cx='-45.7' cy='-8.4' r='0.37' fill='%23ffffff' opacity='0.39'/%3E%3Ccircle cx='-15.0' cy='-56.0' r='0.60' fill='%23d6ecff' opacity='0.59'/%3E%3Ccircle cx='70.4' cy='31.5' r='0.50' fill='%23d6ecff' opacity='0.48'/%3E%3Ccircle cx='43.7' cy='-33.6' r='0.55' fill='%23d6ecff' opacity='0.35'/%3E%3Ccircle cx='36.1' cy='-58.8' r='0.60' fill='%23ffffff' opacity='0.59'/%3E%3Ccircle cx='-23.1' cy='-62.9' r='0.88' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='-41.7' cy='-0.0' r='0.69' fill='%23ffffff' opacity='0.89'/%3E%3Ccircle cx='-29.3' cy='17.3' r='0.40' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='-26.0' cy='25.7' r='0.41' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='-6.6' cy='-53.8' r='0.67' fill='%23ffffff' opacity='0.91'/%3E%3Ccircle cx='-28.9' cy='108.7' r='0.62' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='67.7' cy='59.0' r='0.54' fill='%23ffe6c2' opacity='0.83'/%3E%3Ccircle cx='76.3' cy='8.8' r='0.68' fill='%23d6ecff' opacity='0.52'/%3E%3Ccircle cx='33.6' cy='92.9' r='0.71' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='-14.0' cy='25.1' r='0.84' fill='%23ffe6c2' opacity='0.61'/%3E%3Ccircle cx='73.3' cy='0.5' r='0.78' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='-14.4' cy='31.9' r='0.45' fill='%23d6ecff' opacity='0.80'/%3E%3Ccircle cx='-10.4' cy='20.5' r='0.60' fill='%23ffe6c2' opacity='0.80'/%3E%3Ccircle cx='61.4' cy='-31.0' r='0.81' fill='%23d6ecff' opacity='0.48'/%3E%3Ccircle cx='-1.3' cy='27.9' r='0.79' fill='%23ffe6c2' opacity='0.70'/%3E%3Ccircle cx='75.3' cy='-12.6' r='0.78' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='-19.3' cy='-55.6' r='0.41' fill='%23d6ecff' opacity='0.88'/%3E%3Ccircle cx='-19.2' cy='94.8' r='0.56' fill='%23ffe6c2' opacity='0.92'/%3E%3Ccircle cx='-43.9' cy='-4.9' r='0.94' fill='%23d6ecff' opacity='0.73'/%3E%3Ccircle cx='10.9' cy='-54.5' r='0.45' fill='%23ffffff' opacity='0.84'/%3E%3Ccircle cx='-12.6' cy='23.7' r='0.82' fill='%23ffe6c2' opacity='0.41'/%3E%3Ccircle cx='-41.1' cy='-10.2' r='0.60' fill='%23ffffff' opacity='0.67'/%3E%3Ccircle cx='-26.6' cy='21.6' r='0.84' fill='%23ffffff' opacity='0.93'/%3E%3Ccircle cx='-36.2' cy='-23.5' r='0.64' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='51.7' cy='-48.7' r='0.70' fill='%23d6ecff' opacity='0.93'/%3E%3Ccircle cx='68.8' cy='-23.7' r='0.62' fill='%23ffffff' opacity='0.89'/%3E%3Ccircle cx='-20.9' cy='12.7' r='0.36' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='34.0' cy='75.2' r='0.40' fill='%23d6ecff' opacity='0.86'/%3E%3Ccircle cx='-43.7' cy='2.4' r='0.71' fill='%23d6ecff' opacity='0.93'/%3E%3Ccircle cx='-9.3' cy='85.4' r='0.62' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='10.6' cy='-0.3' r='0.62' fill='%23ffe6c2' opacity='0.91'/%3E%3Ccircle cx='-33.2' cy='15.0' r='0.46' fill='%23ffe6c2' opacity='0.87'/%3E%3Ccircle cx='10.7' cy='95.5' r='0.44' fill='%23ffffff' opacity='0.59'/%3E%3Ccircle cx='-37.6' cy='-37.2' r='0.72' fill='%23d6ecff' opacity='0.71'/%3E%3Ccircle cx='14.2' cy='15.7' r='0.76' fill='%23ffe6c2' opacity='0.48'/%3E%3Ccircle cx='73.2' cy='-31.7' r='0.60' fill='%23d6ecff' opacity='0.59'/%3E%3Ccircle cx='66.3' cy='-17.1' r='0.54' fill='%23ffffff' opacity='0.42'/%3E%3Ccircle cx='15.0' cy='80.4' r='0.66' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='-35.0' cy='-7.5' r='0.83' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='78.0' cy='11.1' r='0.76' fill='%23ffffff' opacity='0.68'/%3E%3Ccircle cx='13.5' cy='11.4' r='1.02' fill='%23ffe6c2' opacity='0.76'/%3E%3Ccircle cx='17.3' cy='7.8' r='0.87' fill='%23ffe6c2' opacity='0.89'/%3E%3Ccircle cx='41.8' cy='72.1' r='0.56' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='45.2' cy='-43.9' r='0.59' fill='%23d6ecff' opacity='0.72'/%3E%3Ccircle cx='-12.8' cy='20.1' r='0.86' fill='%23ffe6c2' opacity='0.41'/%3E%3Ccircle cx='-10.8' cy='-51.4' r='0.88' fill='%23d6ecff' opacity='0.48'/%3E%3Ccircle cx='76.8' cy='44.8' r='0.47' fill='%23ffffff' opacity='0.55'/%3E%3Ccircle cx='54.7' cy='-25.0' r='0.65' fill='%23d6ecff' opacity='0.42'/%3E%3Ccircle cx='4.8' cy='21.3' r='0.44' fill='%23ffe6c2' opacity='0.66'/%3E%3Ccircle cx='64.6' cy='-25.0' r='0.40' fill='%23d6ecff' opacity='0.87'/%3E%3Ccircle cx='-14.9' cy='22.6' r='0.96' fill='%23ffe6c2' opacity='0.53'/%3E%3Ccircle cx='74.8' cy='-28.1' r='0.72' fill='%23ffe6c2' opacity='0.66'/%3E%3Ccircle cx='73.5' cy='-22.4' r='0.82' fill='%23ffe6c2' opacity='0.92'/%3E%3Ccircle cx='10.7' cy='9.4' r='0.44' fill='%23ffe6c2' opacity='0.90'/%3E%3Ccircle cx='47.5' cy='-55.6' r='0.51' fill='%23ffe6c2' opacity='0.55'/%3E%3Ccircle cx='-28.2' cy='12.6' r='0.56' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='-8.0' cy='98.4' r='0.51' fill='%23d6ecff' opacity='0.49'/%3E%3Ccircle cx='31.8' cy='76.0' r='0.61' fill='%23d6ecff' opacity='0.83'/%3E%3Ccircle cx='6.3' cy='86.8' r='0.37' fill='%23d6ecff' opacity='0.45'/%3E%3Ccircle cx='62.1' cy='-9.5' r='0.38' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='-22.1' cy='25.6' r='0.74' fill='%23ffe6c2' opacity='0.59'/%3E%3Ccircle cx='29.4' cy='85.4' r='0.51' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='-36.3' cy='22.9' r='0.76' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='-28.3' cy='24.3' r='0.47' fill='%23ffffff' opacity='0.84'/%3E%3Ccircle cx='-7.0' cy='-48.0' r='0.40' fill='%23d6ecff' opacity='0.51'/%3E%3Ccircle cx='73.2' cy='-3.6' r='0.77' fill='%23ffffff' opacity='0.71'/%3E%3Ccircle cx='-9.2' cy='-59.7' r='0.64' fill='%23d6ecff' opacity='0.38'/%3E%3Ccircle cx='45.2' cy='-48.5' r='0.48' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='10.9' cy='6.3' r='1.07' fill='%23ffe6c2' opacity='0.58'/%3E%3Ccircle cx='-40.3' cy='-24.0' r='0.66' fill='%23ffffff' opacity='0.38'/%3E%3Ccircle cx='4.1' cy='21.3' r='0.95' fill='%23ffe6c2' opacity='0.56'/%3E%3Ccircle cx='51.8' cy='88.6' r='0.53' fill='%23ffe6c2' opacity='0.75'/%3E%3Ccircle cx='29.7' cy='77.0' r='0.52' fill='%23d6ecff' opacity='0.40'/%3E%3Ccircle cx='29.4' cy='86.9' r='0.45' fill='%23ffffff' opacity='0.40'/%3E%3Ccircle cx='14.2' cy='5.5' r='0.47' fill='%23ffe6c2' opacity='0.39'/%3E%3Ccircle cx='77.0' cy='39.6' r='0.42' fill='%23d6ecff' opacity='0.41'/%3E%3Ccircle cx='72.7' cy='22.4' r='0.66' fill='%23d6ecff' opacity='0.62'/%3E%3Ccircle cx='58.1' cy='-20.3' r='0.70' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='65.7' cy='8.0' r='0.41' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='-20.0' cy='23.2' r='0.71' fill='%23d6ecff' opacity='0.64'/%3E%3Ccircle cx='-30.9' cy='21.6' r='0.62' fill='%23d6ecff' opacity='0.80'/%3E%3Ccircle cx='-19.6' cy='-47.2' r='0.86' fill='%23d6ecff' opacity='0.54'/%3E%3Ccircle cx='-15.7' cy='23.7' r='0.54' fill='%23ffe6c2' opacity='0.81'/%3E%3Ccircle cx='61.5' cy='51.4' r='0.40' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='66.0' cy='38.6' r='0.39' fill='%23d6ecff' opacity='0.77'/%3E%3Ccircle cx='18.4' cy='-62.3' r='0.81' fill='%23ffffff' opacity='0.63'/%3E%3Ccircle cx='-9.0' cy='-61.1' r='0.70' fill='%23ffffff' opacity='0.44'/%3E%3Ccircle cx='13.6' cy='10.8' r='0.84' fill='%23ffe6c2' opacity='0.57'/%3E%3Ccircle cx='-42.1' cy='18.4' r='0.84' fill='%23ffffff' opacity='0.41'/%3E%3Ccircle cx='60.3' cy='-22.0' r='0.49' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='72.8' cy='49.9' r='0.36' fill='%23d6ecff' opacity='0.48'/%3E%3Ccircle cx='-38.5' cy='113.8' r='0.48' fill='%23ffe6c2' opacity='0.94'/%3E%3Ccircle cx='4.4' cy='-54.3' r='0.50' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='10.0' cy='-0.9' r='0.64' fill='%23ffe6c2' opacity='0.42'/%3E%3Ccircle cx='69.2' cy='8.1' r='0.57' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='21.4' cy='92.7' r='0.49' fill='%23ffffff' opacity='0.48'/%3E%3Ccircle cx='-41.4' cy='-13.3' r='0.58' fill='%23d6ecff' opacity='0.89'/%3E%3Ccircle cx='-41.3' cy='-36.6' r='0.48' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='-36.5' cy='-27.4' r='0.49' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-40.0' cy='9.7' r='0.50' fill='%23ffe6c2' opacity='0.59'/%3E%3Ccircle cx='7.9' cy='-0.5' r='0.35' fill='%23ffe6c2' opacity='0.61'/%3E%3Ccircle cx='65.5' cy='-26.8' r='0.44' fill='%23d6ecff' opacity='0.39'/%3E%3Ccircle cx='65.1' cy='30.6' r='0.40' fill='%23d6ecff' opacity='0.38'/%3E%3Ccircle cx='69.8' cy='-24.0' r='0.81' fill='%23d6ecff' opacity='0.73'/%3E%3Ccircle cx='83.8' cy='1.8' r='0.79' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='3.3' cy='18.8' r='0.53' fill='%23ffe6c2' opacity='0.50'/%3E%3Ccircle cx='43.0' cy='60.7' r='0.42' fill='%23ffffff' opacity='0.36'/%3E%3Ccircle cx='-60.7' cy='47.7' r='0.50' fill='%23ffe6c2' opacity='0.60'/%3E%3Ccircle cx='65.2' cy='26.4' r='0.60' fill='%23d6ecff' opacity='0.71'/%3E%3Ccircle cx='40.7' cy='61.5' r='0.50' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='-14.5' cy='70.0' r='0.37' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='-6.3' cy='-46.7' r='0.53' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='-25.6' cy='1.0' r='0.80' fill='%23ffe6c2' opacity='0.38'/%3E%3Ccircle cx='52.4' cy='41.4' r='0.61' fill='%23d6ecff' opacity='0.50'/%3E%3Ccircle cx='-5.7' cy='9.5' r='0.71' fill='%23ffe6c2' opacity='0.94'/%3E%3Ccircle cx='1.7' cy='81.1' r='0.43' fill='%23ffffff' opacity='0.91'/%3E%3Ccircle cx='7.7' cy='-43.5' r='0.71' fill='%23d6ecff' opacity='0.61'/%3E%3Ccircle cx='57.0' cy='21.7' r='0.47' fill='%23d6ecff' opacity='0.87'/%3E%3Ccircle cx='20.9' cy='76.3' r='0.76' fill='%23ffffff' opacity='0.42'/%3E%3Ccircle cx='-61.0' cy='63.4' r='0.41' fill='%23ffffff' opacity='0.63'/%3E%3Ccircle cx='31.8' cy='68.0' r='0.69' fill='%23d6ecff' opacity='0.54'/%3E%3Ccircle cx='-15.1' cy='12.5' r='0.90' fill='%23ffe6c2' opacity='0.56'/%3E%3Ccircle cx='45.6' cy='-16.9' r='0.65' fill='%23ffe6c2' opacity='0.86'/%3E%3Ccircle cx='-9.9' cy='-39.5' r='0.75' fill='%23d6ecff' opacity='0.35'/%3E%3Ccircle cx='15.5' cy='-44.7' r='0.65' fill='%23ffffff' opacity='0.89'/%3E%3Ccircle cx='-85.2' cy='-6.8' r='0.65' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='28.0' cy='-47.1' r='0.61' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='-93.0' cy='32.0' r='0.74' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='-7.7' cy='13.2' r='0.37' fill='%23ffe6c2' opacity='0.89'/%3E%3Ccircle cx='36.1' cy='63.6' r='0.56' fill='%23ffffff' opacity='0.53'/%3E%3Ccircle cx='37.6' cy='69.9' r='0.78' fill='%23d6ecff' opacity='0.71'/%3E%3Ccircle cx='48.6' cy='-15.0' r='0.55' fill='%23d6ecff' opacity='0.76'/%3E%3Ccircle cx='49.3' cy='-33.9' r='0.42' fill='%23ffffff' opacity='0.38'/%3E%3Ccircle cx='24.2' cy='-40.7' r='0.36' fill='%23ffffff' opacity='0.61'/%3E%3Ccircle cx='45.0' cy='33.6' r='0.41' fill='%23d6ecff' opacity='0.51'/%3E%3Ccircle cx='51.5' cy='56.7' r='0.70' fill='%23d6ecff' opacity='0.78'/%3E%3Ccircle cx='24.7' cy='-40.7' r='0.68' fill='%23d6ecff' opacity='0.89'/%3E%3Ccircle cx='-2.8' cy='11.8' r='0.40' fill='%23ffe6c2' opacity='0.74'/%3E%3Ccircle cx='-80.5' cy='31.9' r='0.52' fill='%23ffffff' opacity='0.51'/%3E%3Ccircle cx='20.4' cy='-43.4' r='0.43' fill='%23ffffff' opacity='0.37'/%3E%3Ccircle cx='-20.5' cy='2.6' r='0.76' fill='%23ffe6c2' opacity='0.74'/%3E%3Ccircle cx='64.8' cy='33.8' r='0.77' fill='%23d6ecff' opacity='0.93'/%3E%3Ccircle cx='-14.8' cy='-32.5' r='0.82' fill='%23d6ecff' opacity='0.35'/%3E%3Ccircle cx='-53.1' cy='54.0' r='0.45' fill='%23d6ecff' opacity='0.85'/%3E%3Ccircle cx='3.2' cy='81.2' r='0.55' fill='%23ffffff' opacity='0.48'/%3E%3Ccircle cx='-6.7' cy='-32.4' r='0.56' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='-1.7' cy='74.6' r='0.81' fill='%23d6ecff' opacity='0.42'/%3E%3Ccircle cx='-92.7' cy='-1.0' r='0.52' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='6.6' cy='-43.5' r='0.45' fill='%23ffffff' opacity='0.77'/%3E%3Ccircle cx='-77.0' cy='54.9' r='0.49' fill='%23d6ecff' opacity='0.81'/%3E%3Ccircle cx='-100.6' cy='0.4' r='0.38' fill='%23d6ecff' opacity='0.71'/%3E%3Ccircle cx='46.2' cy='-32.8' r='0.43' fill='%23d6ecff' opacity='0.77'/%3E%3Ccircle cx='58.4' cy='-15.5' r='0.53' fill='%23d6ecff' opacity='0.85'/%3E%3Ccircle cx='-76.8' cy='32.1' r='0.65' fill='%23d6ecff' opacity='0.88'/%3E%3Ccircle cx='8.9' cy='-49.4' r='0.39' fill='%23ffffff' opacity='0.36'/%3E%3Ccircle cx='-75.6' cy='26.9' r='0.63' fill='%23d6ecff' opacity='0.56'/%3E%3Ccircle cx='-43.0' cy='69.2' r='0.56' fill='%23ffffff' opacity='0.40'/%3E%3Ccircle cx='11.9' cy='79.0' r='0.72' fill='%23ffe6c2' opacity='0.66'/%3E%3Ccircle cx='-21.8' cy='-28.1' r='0.90' fill='%23ffffff' opacity='0.85'/%3E%3Ccircle cx='-88.8' cy='-39.6' r='0.51' fill='%23ffe6c2' opacity='0.86'/%3E%3Ccircle cx='-29.0' cy='-18.4' r='0.44' fill='%23ffe6c2' opacity='0.92'/%3E%3Ccircle cx='-27.3' cy='1.3' r='0.83' fill='%23ffe6c2' opacity='0.39'/%3E%3Ccircle cx='-94.8' cy='13.0' r='0.38' fill='%23d6ecff' opacity='0.52'/%3E%3Ccircle cx='-67.7' cy='58.1' r='0.42' fill='%23d6ecff' opacity='0.53'/%3E%3Ccircle cx='65.1' cy='0.5' r='0.87' fill='%23d6ecff' opacity='0.69'/%3E%3Ccircle cx='51.3' cy='-1.9' r='0.89' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='34.4' cy='37.3' r='0.39' fill='%23ffe6c2' opacity='0.87'/%3E%3Ccircle cx='6.4' cy='68.5' r='0.38' fill='%23ffffff' opacity='0.35'/%3E%3Ccircle cx='35.6' cy='64.9' r='0.78' fill='%23ffe6c2' opacity='0.81'/%3E%3Ccircle cx='52.9' cy='30.7' r='0.80' fill='%23d6ecff' opacity='0.41'/%3E%3Ccircle cx='-88.1' cy='-39.7' r='0.48' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='-23.8' cy='75.5' r='0.55' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='-68.2' cy='15.4' r='0.59' fill='%23d6ecff' opacity='0.53'/%3E%3Ccircle cx='-23.1' cy='4.6' r='0.85' fill='%23ffe6c2' opacity='0.64'/%3E%3Ccircle cx='-50.2' cy='79.6' r='0.48' fill='%23ffe6c2' opacity='0.72'/%3E%3Ccircle cx='16.1' cy='66.5' r='0.58' fill='%23d6ecff' opacity='0.43'/%3E%3Ccircle cx='-78.8' cy='34.2' r='0.61' fill='%23d6ecff' opacity='0.37'/%3E%3Ccircle cx='-83.6' cy='50.2' r='0.50' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='-64.3' cy='40.4' r='0.71' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='-8.3' cy='66.6' r='0.78' fill='%23ffe6c2' opacity='0.77'/%3E%3Ccircle cx='-97.3' cy='0.5' r='0.62' fill='%23ffe6c2' opacity='0.80'/%3E%3Ccircle cx='47.1' cy='39.9' r='0.35' fill='%23ffe6c2' opacity='0.49'/%3E%3Ccircle cx='32.4' cy='61.5' r='0.57' fill='%23d6ecff' opacity='0.39'/%3E%3Ccircle cx='28.8' cy='-34.1' r='0.50' fill='%23d6ecff' opacity='0.94'/%3E%3Ccircle cx='-48.8' cy='62.8' r='0.46' fill='%23ffe6c2' opacity='0.94'/%3E%3Ccircle cx='-22.5' cy='1.6' r='0.36' fill='%23ffe6c2' opacity='0.88'/%3E%3Ccircle cx='-28.8' cy='6.0' r='0.77' fill='%23ffe6c2' opacity='0.40'/%3E%3Ccircle cx='-15.9' cy='10.7' r='0.84' fill='%23ffe6c2' opacity='0.75'/%3E%3Ccircle cx='-17.3' cy='1.6' r='0.89' fill='%23ffe6c2' opacity='0.77'/%3E%3Ccircle cx='-27.2' cy='-4.2' r='0.72' fill='%23ffe6c2' opacity='0.61'/%3E%3Ccircle cx='-1.2' cy='9.7' r='0.59' fill='%23ffe6c2' opacity='0.53'/%3E%3Ccircle cx='31.2' cy='46.5' r='0.64' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='-94.7' cy='-7.3' r='0.72' fill='%23ffe6c2' opacity='0.95'/%3E%3Ccircle cx='54.8' cy='6.8' r='0.80' fill='%23d6ecff' opacity='0.74'/%3E%3Ccircle cx='-0.1' cy='-46.0' r='0.91' fill='%23ffffff' opacity='0.54'/%3E%3Ccircle cx='61.3' cy='10.2' r='0.61' fill='%23ffffff' opacity='0.38'/%3E%3Ccircle cx='-19.1' cy='4.0' r='0.41' fill='%23ffe6c2' opacity='0.91'/%3E%3Ccircle cx='-26.4' cy='-29.7' r='0.62' fill='%23d6ecff' opacity='0.44'/%3E%3Ccircle cx='-17.8' cy='13.1' r='0.40' fill='%23ffe6c2' opacity='0.87'/%3E%3Ccircle cx='-25.9' cy='-31.3' r='0.58' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='51.5' cy='-27.3' r='0.61' fill='%23ffffff' opacity='0.39'/%3E%3Ccircle cx='49.3' cy='57.9' r='0.76' fill='%23ffffff' opacity='0.84'/%3E%3Ccircle cx='-7.5' cy='8.1' r='0.49' fill='%23ffe6c2' opacity='0.38'/%3E%3Ccircle cx='-15.4' cy='6.2' r='0.89' fill='%23ffe6c2' opacity='0.47'/%3E%3Ccircle cx='53.7' cy='20.6' r='0.74' fill='%23d6ecff' opacity='0.56'/%3E%3Ccircle cx='53.7' cy='0.5' r='0.61' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='-99.9' cy='-3.1' r='0.69' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='43.1' cy='-20.5' r='0.66' fill='%23d6ecff' opacity='0.35'/%3E%3Ccircle cx='-10.7' cy='-35.8' r='0.50' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='2.0' cy='61.9' r='0.71' fill='%23ffffff' opacity='0.91'/%3E%3Ccircle cx='-103.6' cy='-14.8' r='0.62' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='-0.8' cy='-47.9' r='0.48' fill='%23d6ecff' opacity='0.85'/%3E%3Ccircle cx='50.6' cy='4.7' r='0.52' fill='%23d6ecff' opacity='0.61'/%3E%3Ccircle cx='-95.5' cy='-20.2' r='0.64' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='46.8' cy='-14.5' r='0.44' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='-89.3' cy='3.6' r='0.42' fill='%23ffffff' opacity='0.53'/%3E%3Ccircle cx='-39.0' cy='63.9' r='0.77' fill='%23d6ecff' opacity='0.93'/%3E%3Ccircle cx='59.9' cy='65.4' r='0.51' fill='%23d6ecff' opacity='0.94'/%3E%3Ccircle cx='-100.6' cy='15.5' r='0.62' fill='%23d6ecff' opacity='0.84'/%3E%3Ccircle cx='-89.6' cy='29.8' r='0.71' fill='%23d6ecff' opacity='0.64'/%3E%3Ccircle cx='11.5' cy='-38.5' r='0.36' fill='%23d6ecff' opacity='0.72'/%3E%3Ccircle cx='-22.3' cy='76.9' r='0.36' fill='%23d6ecff' opacity='0.66'/%3E%3Ccircle cx='10.4' cy='69.7' r='0.52' fill='%23ffffff' opacity='0.86'/%3E%3Ccircle cx='54.7' cy='38.5' r='0.86' fill='%23d6ecff' opacity='0.61'/%3E%3Ccircle cx='-7.0' cy='7.6' r='0.91' fill='%23ffe6c2' opacity='0.88'/%3E%3Ccircle cx='23.6' cy='60.3' r='0.47' fill='%23d6ecff' opacity='0.89'/%3E%3Ccircle cx='66.1' cy='-5.9' r='0.57' fill='%23ffffff' opacity='0.39'/%3E%3Ccircle cx='-13.1' cy='-27.4' r='0.89' fill='%23d6ecff' opacity='0.75'/%3E%3Ccircle cx='-25.4' cy='-14.6' r='0.40' fill='%23d6ecff' opacity='0.48'/%3E%3Ccircle cx='-75.0' cy='33.6' r='0.46' fill='%23ffffff' opacity='0.86'/%3E%3Ccircle cx='50.6' cy='40.2' r='0.35' fill='%23ffffff' opacity='0.71'/%3E%3Ccircle cx='9.2' cy='-36.5' r='0.72' fill='%23d6ecff' opacity='0.42'/%3E%3Ccircle cx='-15.2' cy='9.4' r='0.38' fill='%23ffe6c2' opacity='0.36'/%3E%3Ccircle cx='0.3' cy='9.5' r='0.56' fill='%23ffe6c2' opacity='0.84'/%3E%3Ccircle cx='-10.0' cy='8.6' r='0.73' fill='%23ffe6c2' opacity='0.85'/%3E%3Ccircle cx='-26.7' cy='-22.6' r='0.65' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='-18.8' cy='-30.8' r='0.87' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='-15.5' cy='-43.3' r='0.58' fill='%23d6ecff' opacity='0.38'/%3E%3Ccircle cx='-31.8' cy='84.3' r='0.42' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='-96.5' cy='-26.2' r='0.51' fill='%23d6ecff' opacity='0.60'/%3E%3Ccircle cx='37.6' cy='58.0' r='0.66' fill='%23d6ecff' opacity='0.42'/%3E%3Ccircle cx='-9.6' cy='-28.7' r='0.62' fill='%23ffffff' opacity='0.51'/%3E%3Ccircle cx='42.6' cy='-31.5' r='0.55' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='-10.9' cy='-36.0' r='0.88' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='31.2' cy='-44.3' r='0.44' fill='%23d6ecff' opacity='0.87'/%3E%3Ccircle cx='-52.9' cy='77.5' r='0.75' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='-58.7' cy='65.1' r='0.73' fill='%23ffe6c2' opacity='0.62'/%3E%3Ccircle cx='-4.7' cy='7.7' r='0.68' fill='%23ffe6c2' opacity='0.79'/%3E%3Ccircle cx='40.6' cy='-37.4' r='0.54' fill='%23ffffff' opacity='0.78'/%3E%3Ccircle cx='-32.1' cy='-11.6' r='0.48' fill='%23ffe6c2' opacity='0.50'/%3E%3Ccircle cx='-73.8' cy='48.1' r='0.59' fill='%23ffffff' opacity='0.52'/%3E%3Ccircle cx='-93.8' cy='-6.5' r='0.60' fill='%23d6ecff' opacity='0.45'/%3E%3Ccircle cx='76.0' cy='11.0' r='0.60' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='56.1' cy='-23.7' r='0.42' fill='%23ffffff' opacity='0.71'/%3E%3Ccircle cx='-1.2' cy='13.6' r='0.61' fill='%23ffe6c2' opacity='0.38'/%3E%3Ccircle cx='-81.5' cy='58.9' r='0.76' fill='%23d6ecff' opacity='0.60'/%3E%3Ccircle cx='0.9' cy='12.4' r='0.79' fill='%23ffe6c2' opacity='0.61'/%3E%3Ccircle cx='57.1' cy='31.9' r='0.43' fill='%23ffffff' opacity='0.75'/%3E%3Ccircle cx='61.9' cy='5.4' r='0.62' fill='%23ffffff' opacity='0.66'/%3E%3Ccircle cx='51.8' cy='-16.5' r='0.40' fill='%23ffffff' opacity='0.41'/%3E%3Ccircle cx='-15.2' cy='-32.4' r='0.59' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='-4.0' cy='68.8' r='0.38' fill='%23ffffff' opacity='0.52'/%3E%3Ccircle cx='56.6' cy='7.7' r='0.48' fill='%23ffffff' opacity='0.67'/%3E%3Ccircle cx='-41.3' cy='77.8' r='0.39' fill='%23ffe6c2' opacity='0.88'/%3E%3Ccircle cx='-94.6' cy='28.2' r='0.36' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='-23.3' cy='76.2' r='0.44' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='-3.1' cy='79.1' r='0.59' fill='%23d6ecff' opacity='0.92'/%3E%3Ccircle cx='47.7' cy='-20.4' r='0.49' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='48.6' cy='-0.1' r='0.82' fill='%23ffffff' opacity='0.68'/%3E%3Ccircle cx='11.7' cy='-46.6' r='0.44' fill='%23d6ecff' opacity='0.82'/%3E%3Ccircle cx='-79.0' cy='8.9' r='0.47' fill='%23d6ecff' opacity='0.87'/%3E%3Ccircle cx='-3.0' cy='-41.6' r='0.45' fill='%23ffffff' opacity='0.40'/%3E%3Ccircle cx='62.5' cy='9.2' r='0.69' fill='%23d6ecff' opacity='0.82'/%3E%3Ccircle cx='13.8' cy='67.3' r='0.59' fill='%23d6ecff' opacity='0.38'/%3E%3Ccircle cx='-94.1' cy='-1.2' r='0.43' fill='%23ffe6c2' opacity='0.66'/%3E%3Ccircle cx='-86.0' cy='-11.4' r='0.70' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='29.5' cy='-38.8' r='0.85' fill='%23d6ecff' opacity='0.87'/%3E%3Ccircle cx='62.9' cy='10.2' r='0.46' fill='%23ffffff' opacity='0.61'/%3E%3Ccircle cx='0.5' cy='9.4' r='0.83' fill='%23ffe6c2' opacity='0.45'/%3E%3Ccircle cx='3.1' cy='68.4' r='0.69' fill='%23d6ecff' opacity='0.65'/%3E%3Ccircle cx='-0.6' cy='-49.1' r='0.36' fill='%23d6ecff' opacity='0.77'/%3E%3Ccircle cx='-21.5' cy='-25.4' r='0.88' fill='%23ffe6c2' opacity='0.55'/%3E%3Ccircle cx='8.8' cy='-31.8' r='0.51' fill='%23ffffff' opacity='0.61'/%3E%3Ccircle cx='-1.8' cy='-41.8' r='0.76' fill='%23d6ecff' opacity='0.78'/%3E%3Ccircle cx='-82.8' cy='20.7' r='0.48' fill='%23ffffff' opacity='0.52'/%3E%3Ccircle cx='23.8' cy='66.8' r='0.76' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='-9.3' cy='-37.2' r='0.37' fill='%23d6ecff' opacity='0.65'/%3E%3Ccircle cx='-19.9' cy='-23.8' r='0.52' fill='%23ffffff' opacity='0.71'/%3E%3Ccircle cx='-76.7' cy='70.1' r='0.61' fill='%23ffffff' opacity='0.63'/%3E%3Ccircle cx='-9.8' cy='11.4' r='0.48' fill='%23ffe6c2' opacity='0.85'/%3E%3Ccircle cx='60.7' cy='16.4' r='0.50' fill='%23ffffff' opacity='0.47'/%3E%3Ccircle cx='-52.8' cy='53.5' r='0.68' fill='%23d6ecff' opacity='0.94'/%3E%3Ccircle cx='-19.0' cy='-31.8' r='0.66' fill='%23d6ecff' opacity='0.48'/%3E%3Ccircle cx='27.1' cy='74.4' r='0.40' fill='%23ffe6c2' opacity='0.46'/%3E%3Ccircle cx='7.1' cy='-52.7' r='0.89' fill='%23d6ecff' opacity='0.82'/%3E%3Ccircle cx='-111.1' cy='-15.3' r='0.40' fill='%23d6ecff' opacity='0.58'/%3E%3Ccircle cx='12.3' cy='-27.0' r='0.77' fill='%23ffe6c2' opacity='0.71'/%3E%3Ccircle cx='-67.4' cy='36.7' r='0.38' fill='%23ffe6c2' opacity='0.41'/%3E%3Ccircle cx='39.3' cy='0.3' r='0.86' fill='%23d6ecff' opacity='0.54'/%3E%3Ccircle cx='-28.8' cy='-85.5' r='0.40' fill='%23ffe6c2' opacity='0.42'/%3E%3Ccircle cx='-9.9' cy='-10.9' r='1.06' fill='%23ffe6c2' opacity='0.81'/%3E%3Ccircle cx='-72.8' cy='15.4' r='0.50' fill='%23ffe6c2' opacity='0.89'/%3E%3Ccircle cx='-72.9' cy='9.5' r='0.51' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='43.5' cy='-78.6' r='0.54' fill='%23ffffff' opacity='0.78'/%3E%3Ccircle cx='-1.5' cy='47.6' r='0.75' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='-41.3' cy='55.8' r='0.73' fill='%23d6ecff' opacity='0.82'/%3E%3Ccircle cx='-76.2' cy='-40.9' r='0.68' fill='%23d6ecff' opacity='0.51'/%3E%3Ccircle cx='-64.1' cy='-41.3' r='0.69' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='20.9' cy='-20.0' r='0.61' fill='%23d6ecff' opacity='0.58'/%3E%3Ccircle cx='-58.5' cy='-49.8' r='0.67' fill='%23d6ecff' opacity='0.61'/%3E%3Ccircle cx='24.9' cy='-20.8' r='0.57' fill='%23ffffff' opacity='0.47'/%3E%3Ccircle cx='5.4' cy='-26.8' r='0.92' fill='%23ffe6c2' opacity='0.73'/%3E%3Ccircle cx='19.9' cy='53.9' r='0.57' fill='%23ffe6c2' opacity='0.83'/%3E%3Ccircle cx='-13.3' cy='-13.7' r='0.47' fill='%23ffe6c2' opacity='0.38'/%3E%3Ccircle cx='-67.9' cy='-27.1' r='0.70' fill='%23ffe6c2' opacity='0.45'/%3E%3Ccircle cx='-11.1' cy='-12.4' r='0.87' fill='%23ffe6c2' opacity='0.85'/%3E%3Ccircle cx='-80.7' cy='-15.6' r='0.75' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='40.8' cy='24.7' r='0.63' fill='%23d6ecff' opacity='0.77'/%3E%3Ccircle cx='29.9' cy='-10.2' r='0.72' fill='%23ffffff' opacity='0.39'/%3E%3Ccircle cx='10.3' cy='69.0' r='0.58' fill='%23d6ecff' opacity='0.64'/%3E%3Ccircle cx='41.3' cy='12.4' r='0.82' fill='%23ffe6c2' opacity='0.35'/%3E%3Ccircle cx='-11.4' cy='-2.0' r='0.58' fill='%23ffe6c2' opacity='0.84'/%3E%3Ccircle cx='-56.9' cy='15.0' r='0.77' fill='%23d6ecff' opacity='0.66'/%3E%3Ccircle cx='-5.7' cy='-22.0' r='0.65' fill='%23ffe6c2' opacity='0.38'/%3E%3Ccircle cx='-78.1' cy='-28.1' r='0.47' fill='%23d6ecff' opacity='0.72'/%3E%3Ccircle cx='46.5' cy='8.9' r='0.49' fill='%23d6ecff' opacity='0.45'/%3E%3Ccircle cx='12.1' cy='-24.2' r='0.67' fill='%23ffe6c2' opacity='0.90'/%3E%3Ccircle cx='-8.4' cy='1.1' r='0.81' fill='%23ffe6c2' opacity='0.49'/%3E%3Ccircle cx='-9.0' cy='-85.8' r='0.68' fill='%23ffffff' opacity='0.43'/%3E%3Ccircle cx='-30.2' cy='-83.3' r='0.63' fill='%23ffe6c2' opacity='0.36'/%3E%3Ccircle cx='-70.9' cy='-26.9' r='0.52' fill='%23ffe6c2' opacity='0.46'/%3E%3Ccircle cx='-59.2' cy='-68.0' r='0.52' fill='%23ffffff' opacity='0.67'/%3E%3Ccircle cx='-54.1' cy='-67.6' r='0.75' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='-56.7' cy='33.0' r='0.39' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='36.2' cy='-12.9' r='0.60' fill='%23d6ecff' opacity='0.47'/%3E%3Ccircle cx='-20.1' cy='-80.5' r='0.64' fill='%23ffffff' opacity='0.47'/%3E%3Ccircle cx='43.8' cy='6.9' r='0.57' fill='%23d6ecff' opacity='0.39'/%3E%3Ccircle cx='-19.2' cy='59.6' r='0.48' fill='%23d6ecff' opacity='0.74'/%3E%3Ccircle cx='-14.8' cy='62.3' r='0.43' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='5.7' cy='-32.0' r='0.41' fill='%23ffe6c2' opacity='0.64'/%3E%3Ccircle cx='-3.2' cy='-16.4' r='0.75' fill='%23ffe6c2' opacity='0.36'/%3E%3Ccircle cx='27.9' cy='-20.2' r='0.76' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='3.7' cy='-86.4' r='0.53' fill='%23ffffff' opacity='0.68'/%3E%3Ccircle cx='-7.6' cy='54.0' r='0.41' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='41.8' cy='23.0' r='0.54' fill='%23d6ecff' opacity='0.71'/%3E%3Ccircle cx='-8.2' cy='49.8' r='0.40' fill='%23d6ecff' opacity='0.65'/%3E%3Ccircle cx='-3.7' cy='60.6' r='0.46' fill='%23ffffff' opacity='0.47'/%3E%3Ccircle cx='-47.6' cy='-87.4' r='0.71' fill='%23d6ecff' opacity='0.65'/%3E%3Ccircle cx='-5.1' cy='53.3' r='0.38' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='-12.3' cy='-1.1' r='0.82' fill='%23ffe6c2' opacity='0.76'/%3E%3Ccircle cx='26.5' cy='-24.3' r='0.44' fill='%23d6ecff' opacity='0.83'/%3E%3Ccircle cx='29.9' cy='-10.0' r='0.43' fill='%23ffe6c2' opacity='0.57'/%3E%3Ccircle cx='33.4' cy='36.8' r='0.60' fill='%23ffffff' opacity='0.59'/%3E%3Ccircle cx='-65.1' cy='-23.2' r='0.75' fill='%23d6ecff' opacity='0.93'/%3E%3Ccircle cx='-64.8' cy='10.0' r='0.49' fill='%23d6ecff' opacity='0.62'/%3E%3Ccircle cx='21.9' cy='-22.8' r='0.56' fill='%23d6ecff' opacity='0.59'/%3E%3Ccircle cx='-2.8' cy='52.6' r='0.49' fill='%23d6ecff' opacity='0.44'/%3E%3Ccircle cx='-6.3' cy='65.4' r='0.66' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='27.9' cy='-16.8' r='0.50' fill='%23ffe6c2' opacity='0.42'/%3E%3Ccircle cx='-61.9' cy='-46.2' r='0.44' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='46.2' cy='23.0' r='0.42' fill='%23d6ecff' opacity='0.59'/%3E%3Ccircle cx='-81.3' cy='-18.4' r='0.57' fill='%23d6ecff' opacity='0.51'/%3E%3Ccircle cx='6.7' cy='47.6' r='0.65' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='32.6' cy='-22.2' r='0.88' fill='%23d6ecff' opacity='0.60'/%3E%3Ccircle cx='15.8' cy='52.9' r='0.56' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='17.7' cy='-29.9' r='0.94' fill='%23ffe6c2' opacity='0.67'/%3E%3Ccircle cx='-40.7' cy='56.3' r='0.39' fill='%23ffffff' opacity='0.91'/%3E%3Ccircle cx='31.8' cy='5.3' r='0.70' fill='%23d6ecff' opacity='0.82'/%3E%3Ccircle cx='-67.7' cy='47.0' r='0.59' fill='%23ffffff' opacity='0.54'/%3E%3Ccircle cx='-42.0' cy='40.1' r='0.74' fill='%23ffe6c2' opacity='0.82'/%3E%3Ccircle cx='30.3' cy='-86.6' r='0.51' fill='%23d6ecff' opacity='0.40'/%3E%3Ccircle cx='-60.5' cy='-66.7' r='0.44' fill='%23d6ecff' opacity='0.48'/%3E%3Ccircle cx='35.3' cy='21.7' r='0.42' fill='%23d6ecff' opacity='0.93'/%3E%3Ccircle cx='-19.4' cy='60.6' r='0.68' fill='%23d6ecff' opacity='0.81'/%3E%3Ccircle cx='-12.5' cy='-6.3' r='0.45' fill='%23ffe6c2' opacity='0.54'/%3E%3Ccircle cx='-80.0' cy='25.7' r='0.77' fill='%23d6ecff' opacity='0.79'/%3E%3Ccircle cx='-83.7' cy='-20.8' r='0.58' fill='%23ffffff' opacity='0.37'/%3E%3Ccircle cx='-69.0' cy='6.7' r='0.47' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='23.6' cy='55.3' r='0.76' fill='%23d6ecff' opacity='0.45'/%3E%3Ccircle cx='-70.2' cy='-34.1' r='0.47' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='-15.8' cy='-9.7' r='1.03' fill='%23ffe6c2' opacity='0.87'/%3E%3Ccircle cx='15.8' cy='38.2' r='0.46' fill='%23d6ecff' opacity='0.46'/%3E%3Ccircle cx='-0.4' cy='-22.6' r='0.45' fill='%23ffe6c2' opacity='0.79'/%3E%3Ccircle cx='-64.2' cy='-5.6' r='0.77' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='-4.5' cy='-22.1' r='1.01' fill='%23ffe6c2' opacity='0.87'/%3E%3Ccircle cx='-5.6' cy='-19.3' r='0.74' fill='%23ffe6c2' opacity='0.45'/%3E%3Ccircle cx='41.1' cy='7.4' r='0.60' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='-17.5' cy='54.0' r='0.71' fill='%23d6ecff' opacity='0.68'/%3E%3Ccircle cx='-40.2' cy='-91.6' r='0.75' fill='%23ffe6c2' opacity='0.73'/%3E%3Ccircle cx='-58.6' cy='28.5' r='0.41' fill='%23d6ecff' opacity='0.71'/%3E%3Ccircle cx='23.0' cy='37.1' r='0.50' fill='%23d6ecff' opacity='0.56'/%3E%3Ccircle cx='-58.1' cy='28.8' r='0.45' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='-18.4' cy='-13.9' r='1.01' fill='%23ffe6c2' opacity='0.68'/%3E%3Ccircle cx='31.6' cy='46.3' r='0.88' fill='%23ffe6c2' opacity='0.68'/%3E%3Ccircle cx='-36.9' cy='-82.9' r='0.55' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='29.9' cy='-8.5' r='0.82' fill='%23d6ecff' opacity='0.77'/%3E%3Ccircle cx='-46.8' cy='-69.7' r='0.40' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='15.7' cy='-26.5' r='0.86' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='-6.0' cy='62.2' r='0.87' fill='%23d6ecff' opacity='0.50'/%3E%3Ccircle cx='-77.7' cy='-11.0' r='0.51' fill='%23ffffff' opacity='0.56'/%3E%3Ccircle cx='-13.6' cy='-16.4' r='1.00' fill='%23ffe6c2' opacity='0.49'/%3E%3Ccircle cx='15.3' cy='47.0' r='0.76' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='-52.7' cy='63.4' r='0.81' fill='%23d6ecff' opacity='0.91'/%3E%3Ccircle cx='-66.5' cy='15.4' r='0.35' fill='%23d6ecff' opacity='0.63'/%3E%3Ccircle cx='-69.1' cy='-49.3' r='0.49' fill='%23d6ecff' opacity='0.75'/%3E%3Ccircle cx='-78.9' cy='-21.3' r='0.51' fill='%23d6ecff' opacity='0.74'/%3E%3Ccircle cx='30.9' cy='-17.5' r='0.87' fill='%23ffffff' opacity='0.75'/%3E%3Ccircle cx='-79.2' cy='-27.0' r='0.51' fill='%23ffffff' opacity='0.62'/%3E%3Ccircle cx='-20.9' cy='46.1' r='0.64' fill='%23d6ecff' opacity='0.71'/%3E%3Ccircle cx='32.7' cy='41.5' r='0.63' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='-20.0' cy='52.0' r='0.47' fill='%23ffffff' opacity='0.41'/%3E%3Ccircle cx='20.0' cy='46.0' r='0.68' fill='%23d6ecff' opacity='0.80'/%3E%3Ccircle cx='31.5' cy='-99.1' r='0.53' fill='%23ffffff' opacity='0.77'/%3E%3Ccircle cx='-85.0' cy='-16.0' r='0.73' fill='%23ffe6c2' opacity='0.46'/%3E%3Ccircle cx='14.2' cy='-101.9' r='0.56' fill='%23d6ecff' opacity='0.87'/%3E%3Ccircle cx='38.0' cy='28.8' r='0.51' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='-78.5' cy='-0.2' r='0.44' fill='%23ffffff' opacity='0.77'/%3E%3Ccircle cx='37.2' cy='45.0' r='0.58' fill='%23ffffff' opacity='0.61'/%3E%3Ccircle cx='-3.7' cy='-80.1' r='0.66' fill='%23ffffff' opacity='0.93'/%3E%3Ccircle cx='33.6' cy='-20.7' r='0.76' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='-82.3' cy='4.3' r='0.63' fill='%23d6ecff' opacity='0.42'/%3E%3Ccircle cx='43.1' cy='18.5' r='0.67' fill='%23d6ecff' opacity='0.35'/%3E%3Ccircle cx='-3.7' cy='-21.7' r='0.49' fill='%23ffe6c2' opacity='0.89'/%3E%3Ccircle cx='-29.6' cy='58.4' r='0.64' fill='%23ffffff' opacity='0.35'/%3E%3Ccircle cx='27.8' cy='56.4' r='0.52' fill='%23d6ecff' opacity='0.80'/%3E%3Ccircle cx='-38.4' cy='-72.8' r='0.64' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='25.8' cy='36.0' r='0.82' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='-56.1' cy='-43.7' r='0.65' fill='%23ffffff' opacity='0.36'/%3E%3Ccircle cx='11.4' cy='-29.4' r='0.52' fill='%23ffe6c2' opacity='0.46'/%3E%3Ccircle cx='9.1' cy='-28.2' r='0.83' fill='%23ffe6c2' opacity='0.70'/%3E%3Ccircle cx='4.2' cy='-90.3' r='0.43' fill='%23d6ecff' opacity='0.77'/%3E%3Ccircle cx='46.1' cy='-8.8' r='0.74' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='-55.4' cy='7.8' r='0.61' fill='%23ffffff' opacity='0.75'/%3E%3Ccircle cx='-34.2' cy='57.1' r='0.84' fill='%23d6ecff' opacity='0.89'/%3E%3Ccircle cx='29.4' cy='-16.8' r='0.50' fill='%23ffffff' opacity='0.53'/%3E%3Ccircle cx='-15.8' cy='46.5' r='0.66' fill='%23d6ecff' opacity='0.85'/%3E%3Ccircle cx='1.1' cy='55.7' r='0.37' fill='%23ffffff' opacity='0.54'/%3E%3Ccircle cx='-40.1' cy='42.4' r='0.36' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='5.4' cy='-92.4' r='0.71' fill='%23ffffff' opacity='0.70'/%3E%3Ccircle cx='-62.0' cy='-50.2' r='0.48' fill='%23ffe6c2' opacity='0.64'/%3E%3Ccircle cx='-6.5' cy='-95.1' r='0.61' fill='%23ffffff' opacity='0.40'/%3E%3Ccircle cx='-57.5' cy='38.0' r='0.40' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='31.2' cy='-21.1' r='0.91' fill='%23ffffff' opacity='0.61'/%3E%3Ccircle cx='-41.0' cy='52.5' r='0.78' fill='%23d6ecff' opacity='0.82'/%3E%3Ccircle cx='-0.3' cy='59.2' r='0.62' fill='%23d6ecff' opacity='0.42'/%3E%3Ccircle cx='-8.2' cy='-26.6' r='0.57' fill='%23ffe6c2' opacity='0.86'/%3E%3Ccircle cx='-3.1' cy='-23.6' r='0.57' fill='%23ffe6c2' opacity='0.93'/%3E%3Ccircle cx='28.8' cy='-16.1' r='0.88' fill='%23ffffff' opacity='0.86'/%3E%3Ccircle cx='-27.6' cy='-79.1' r='0.49' fill='%23d6ecff' opacity='0.92'/%3E%3Ccircle cx='-29.0' cy='43.5' r='0.55' fill='%23ffffff' opacity='0.37'/%3E%3Ccircle cx='-69.1' cy='-28.7' r='0.41' fill='%23d6ecff' opacity='0.35'/%3E%3Ccircle cx='45.4' cy='23.2' r='0.73' fill='%23ffe6c2' opacity='0.68'/%3E%3Ccircle cx='-80.1' cy='-11.6' r='0.65' fill='%23d6ecff' opacity='0.73'/%3E%3Ccircle cx='50.3' cy='3.9' r='0.84' fill='%23ffffff' opacity='0.36'/%3E%3Ccircle cx='34.9' cy='-17.7' r='0.56' fill='%23d6ecff' opacity='0.72'/%3E%3Ccircle cx='-13.6' cy='49.4' r='0.57' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='39.8' cy='38.5' r='0.40' fill='%23d6ecff' opacity='0.83'/%3E%3Ccircle cx='43.1' cy='-7.2' r='0.58' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='-18.4' cy='55.4' r='0.72' fill='%23ffffff' opacity='0.55'/%3E%3Ccircle cx='6.2' cy='-86.8' r='0.42' fill='%23d6ecff' opacity='0.38'/%3E%3Ccircle cx='44.2' cy='-16.7' r='0.37' fill='%23d6ecff' opacity='0.82'/%3E%3Ccircle cx='-14.2' cy='-104.5' r='0.39' fill='%23ffe6c2' opacity='0.93'/%3E%3Ccircle cx='-21.8' cy='-85.9' r='0.69' fill='%23d6ecff' opacity='0.56'/%3E%3Ccircle cx='30.4' cy='-20.5' r='0.60' fill='%23ffffff' opacity='0.38'/%3E%3Ccircle cx='-70.2' cy='-63.0' r='0.76' fill='%23d6ecff' opacity='0.81'/%3E%3Ccircle cx='27.1' cy='44.2' r='0.61' fill='%23ffe6c2' opacity='0.59'/%3E%3Ccircle cx='19.6' cy='-25.8' r='0.49' fill='%23d6ecff' opacity='0.41'/%3E%3Ccircle cx='-10.3' cy='-10.3' r='0.55' fill='%23ffe6c2' opacity='0.92'/%3E%3Ccircle cx='-51.9' cy='49.7' r='0.73' fill='%23d6ecff' opacity='0.61'/%3E%3Ccircle cx='-60.0' cy='21.7' r='0.74' fill='%23ffe6c2' opacity='0.45'/%3E%3Ccircle cx='-12.0' cy='69.9' r='0.80' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='-47.1' cy='40.4' r='0.57' fill='%23ffffff' opacity='0.47'/%3E%3Ccircle cx='-3.7' cy='-23.3' r='0.74' fill='%23ffe6c2' opacity='0.52'/%3E%3Ccircle cx='-5.0' cy='-82.0' r='0.74' fill='%23ffffff' opacity='0.92'/%3E%3Ccircle cx='-10.5' cy='-97.5' r='0.69' fill='%23d6ecff' opacity='0.78'/%3E%3Ccircle cx='-17.7' cy='36.5' r='0.81' fill='%23ffffff' opacity='0.35'/%3E%3Ccircle cx='-25.0' cy='-85.6' r='0.74' fill='%23ffffff' opacity='0.89'/%3E%3Ccircle cx='-64.3' cy='-15.3' r='0.48' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='-15.1' cy='-6.8' r='0.61' fill='%23ffe6c2' opacity='0.87'/%3E%3Ccircle cx='-39.5' cy='42.6' r='0.83' fill='%23ffe6c2' opacity='0.69'/%3E%3Ccircle cx='-67.0' cy='12.9' r='0.64' fill='%23ffffff' opacity='0.54'/%3E%3Ccircle cx='37.2' cy='-13.5' r='0.49' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='26.1' cy='-99.3' r='0.64' fill='%23d6ecff' opacity='0.76'/%3E%3Ccircle cx='-0.2' cy='-19.4' r='0.89' fill='%23ffe6c2' opacity='0.38'/%3E%3Ccircle cx='-10.4' cy='-4.9' r='0.78' fill='%23ffe6c2' opacity='0.72'/%3E%3Ccircle cx='44.6' cy='13.7' r='0.91' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='14.1' cy='37.9' r='0.39' fill='%23d6ecff' opacity='0.68'/%3E%3Ccircle cx='92.4' cy='-14.7' r='0.56' fill='%23d6ecff' opacity='0.59'/%3E%3Ccircle cx='30.7' cy='10.7' r='0.43' fill='%23d6ecff' opacity='0.52'/%3E%3Ccircle cx='56.3' cy='-51.4' r='0.48' fill='%23d6ecff' opacity='0.72'/%3E%3Ccircle cx='4.6' cy='-8.8' r='0.55' fill='%23ffe6c2' opacity='0.40'/%3E%3Ccircle cx='5.7' cy='34.0' r='0.82' fill='%23ffe6c2' opacity='0.54'/%3E%3Ccircle cx='43.9' cy='-54.3' r='0.51' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='-42.7' cy='28.9' r='0.71' fill='%23ffe6c2' opacity='0.87'/%3E%3Ccircle cx='86.2' cy='24.6' r='0.58' fill='%23ffffff' opacity='0.58'/%3E%3Ccircle cx='49.9' cy='-80.9' r='0.55' fill='%23d6ecff' opacity='0.60'/%3E%3Ccircle cx='-63.6' cy='-7.3' r='0.74' fill='%23ffe6c2' opacity='0.54'/%3E%3Ccircle cx='27.2' cy='-3.9' r='0.69' fill='%23ffe6c2' opacity='0.83'/%3E%3Ccircle cx='20.0' cy='2.6' r='0.40' fill='%23ffe6c2' opacity='0.55'/%3E%3Ccircle cx='-55.7' cy='-29.1' r='0.36' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='4.2' cy='-12.9' r='0.81' fill='%23ffe6c2' opacity='0.44'/%3E%3Ccircle cx='21.4' cy='-0.3' r='0.86' fill='%23ffe6c2' opacity='0.71'/%3E%3Ccircle cx='23.4' cy='-3.7' r='0.56' fill='%23ffe6c2' opacity='0.73'/%3E%3Ccircle cx='-48.9' cy='-51.3' r='0.62' fill='%23ffffff' opacity='0.60'/%3E%3Ccircle cx='-20.7' cy='35.8' r='0.53' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='15.4' cy='-73.0' r='0.45' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='-36.9' cy='-57.0' r='0.51' fill='%23d6ecff' opacity='0.70'/%3E%3Ccircle cx='77.2' cy='-21.7' r='0.64' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='-63.6' cy='-3.9' r='0.48' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='73.4' cy='-35.1' r='0.51' fill='%23d6ecff' opacity='0.85'/%3E%3Ccircle cx='-59.8' cy='-28.0' r='0.49' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='13.1' cy='39.8' r='0.69' fill='%23d6ecff' opacity='0.55'/%3E%3Ccircle cx='21.6' cy='-2.9' r='1.00' fill='%23ffe6c2' opacity='0.72'/%3E%3Ccircle cx='-22.3' cy='-69.4' r='0.50' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='-29.2' cy='28.9' r='0.76' fill='%23ffffff' opacity='0.39'/%3E%3Ccircle cx='-15.6' cy='47.6' r='0.52' fill='%23ffffff' opacity='0.66'/%3E%3Ccircle cx='96.5' cy='25.1' r='0.40' fill='%23ffffff' opacity='0.90'/%3E%3Ccircle cx='102.9' cy='9.0' r='0.45' fill='%23ffe6c2' opacity='0.41'/%3E%3Ccircle cx='3.6' cy='-9.8' r='0.86' fill='%23ffe6c2' opacity='0.78'/%3E%3Ccircle cx='-42.3' cy='24.2' r='0.75' fill='%23ffffff' opacity='0.95'/%3E%3Ccircle cx='-32.7' cy='-61.4' r='0.49' fill='%23ffffff' opacity='0.64'/%3E%3Ccircle cx='-45.2' cy='-0.1' r='0.76' fill='%23d6ecff' opacity='0.45'/%3E%3Ccircle cx='-0.1' cy='-70.6' r='0.40' fill='%23d6ecff' opacity='0.84'/%3E%3Ccircle cx='27.0' cy='3.5' r='0.74' fill='%23ffe6c2' opacity='0.72'/%3E%3Ccircle cx='4.5' cy='37.7' r='0.39' fill='%23ffe6c2' opacity='0.79'/%3E%3Ccircle cx='96.4' cy='27.5' r='0.41' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='-0.1' cy='-91.5' r='0.42' fill='%23ffffff' opacity='0.43'/%3E%3Ccircle cx='11.9' cy='26.3' r='0.75' fill='%23ffffff' opacity='0.43'/%3E%3Ccircle cx='-3.9' cy='-84.6' r='0.61' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='26.7' cy='10.8' r='0.80' fill='%23ffe6c2' opacity='0.51'/%3E%3Ccircle cx='93.2' cy='7.9' r='0.46' fill='%23d6ecff' opacity='0.88'/%3E%3Ccircle cx='-26.1' cy='42.0' r='0.37' fill='%23d6ecff' opacity='0.55'/%3E%3Ccircle cx='16.9' cy='-13.1' r='0.80' fill='%23ffe6c2' opacity='0.57'/%3E%3Ccircle cx='2.8' cy='-68.1' r='0.73' fill='%23d6ecff' opacity='0.76'/%3E%3Ccircle cx='11.2' cy='33.0' r='0.80' fill='%23ffe6c2' opacity='0.66'/%3E%3Ccircle cx='6.0' cy='-13.8' r='0.53' fill='%23ffe6c2' opacity='0.70'/%3E%3Ccircle cx='4.2' cy='43.2' r='0.77' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='20.8' cy='4.4' r='0.41' fill='%23ffe6c2' opacity='0.88'/%3E%3Ccircle cx='-52.7' cy='-42.7' r='0.76' fill='%23d6ecff' opacity='0.56'/%3E%3Ccircle cx='29.8' cy='16.0' r='0.77' fill='%23d6ecff' opacity='0.51'/%3E%3Ccircle cx='16.8' cy='42.5' r='0.61' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='18.5' cy='18.8' r='0.52' fill='%23ffffff' opacity='0.47'/%3E%3Ccircle cx='-63.6' cy='-32.0' r='0.63' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='0.6' cy='-73.1' r='0.41' fill='%23d6ecff' opacity='0.93'/%3E%3Ccircle cx='23.5' cy='19.5' r='0.99' fill='%23d6ecff' opacity='0.54'/%3E%3Ccircle cx='82.8' cy='-32.6' r='0.74' fill='%23ffffff' opacity='0.42'/%3E%3Ccircle cx='-41.7' cy='41.9' r='0.72' fill='%23d6ecff' opacity='0.82'/%3E%3Ccircle cx='0.8' cy='-68.4' r='0.37' fill='%23ffffff' opacity='0.55'/%3E%3Ccircle cx='0.2' cy='-80.2' r='0.35' fill='%23ffffff' opacity='0.52'/%3E%3Ccircle cx='-3.9' cy='-66.7' r='0.81' fill='%23ffe6c2' opacity='0.81'/%3E%3Ccircle cx='12.2' cy='27.7' r='0.51' fill='%23d6ecff' opacity='0.62'/%3E%3Ccircle cx='19.4' cy='-4.4' r='0.54' fill='%23ffe6c2' opacity='0.94'/%3E%3Ccircle cx='-52.8' cy='-39.9' r='0.79' fill='%23ffffff' opacity='0.47'/%3E%3Ccircle cx='-23.0' cy='37.8' r='0.77' fill='%23d6ecff' opacity='0.78'/%3E%3Ccircle cx='2.4' cy='-85.9' r='0.51' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-4.5' cy='43.6' r='0.70' fill='%23d6ecff' opacity='0.84'/%3E%3Ccircle cx='24.6' cy='23.5' r='0.80' fill='%23d6ecff' opacity='0.35'/%3E%3Ccircle cx='23.7' cy='19.0' r='0.41' fill='%23d6ecff' opacity='0.86'/%3E%3Ccircle cx='21.8' cy='-6.0' r='0.94' fill='%23ffe6c2' opacity='0.54'/%3E%3Ccircle cx='23.8' cy='-57.9' r='0.69' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='-33.6' cy='-79.0' r='0.61' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='20.1' cy='-82.1' r='0.61' fill='%23ffe6c2' opacity='0.90'/%3E%3Ccircle cx='-40.4' cy='41.4' r='0.68' fill='%23d6ecff' opacity='0.70'/%3E%3Ccircle cx='20.5' cy='26.9' r='0.93' fill='%23ffe6c2' opacity='0.47'/%3E%3Ccircle cx='47.1' cy='-62.0' r='0.40' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='-27.4' cy='42.1' r='0.38' fill='%23ffe6c2' opacity='0.36'/%3E%3Ccircle cx='-20.1' cy='-69.6' r='0.76' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='0.8' cy='-69.9' r='0.42' fill='%23ffffff' opacity='0.50'/%3E%3Ccircle cx='21.8' cy='22.6' r='0.56' fill='%23d6ecff' opacity='0.41'/%3E%3Ccircle cx='22.0' cy='-6.0' r='0.62' fill='%23ffe6c2' opacity='0.79'/%3E%3Ccircle cx='-66.8' cy='11.6' r='0.42' fill='%23d6ecff' opacity='0.59'/%3E%3Ccircle cx='21.2' cy='14.7' r='0.45' fill='%23ffe6c2' opacity='0.43'/%3E%3Ccircle cx='-41.4' cy='35.9' r='0.56' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='-41.8' cy='-60.3' r='0.46' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='82.3' cy='-45.3' r='0.53' fill='%23d6ecff' opacity='0.52'/%3E%3Ccircle cx='10.5' cy='42.2' r='0.35' fill='%23d6ecff' opacity='0.81'/%3E%3Ccircle cx='9.8' cy='-64.6' r='0.46' fill='%23ffe6c2' opacity='0.77'/%3E%3Ccircle cx='21.7' cy='6.3' r='0.91' fill='%23ffe6c2' opacity='0.78'/%3E%3Ccircle cx='23.6' cy='23.0' r='1.00' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='92.7' cy='-10.6' r='0.68' fill='%23ffe6c2' opacity='0.44'/%3E%3Ccircle cx='25.9' cy='0.9' r='0.58' fill='%23ffe6c2' opacity='0.71'/%3E%3Ccircle cx='52.2' cy='-70.2' r='0.57' fill='%23ffffff' opacity='0.49'/%3E%3Ccircle cx='82.4' cy='-31.2' r='0.74' fill='%23d6ecff' opacity='0.93'/%3E%3Ccircle cx='-20.4' cy='35.0' r='0.36' fill='%23d6ecff' opacity='0.94'/%3E%3Ccircle cx='-59.3' cy='-41.7' r='0.78' fill='%23ffffff' opacity='0.42'/%3E%3Ccircle cx='-28.1' cy='33.3' r='0.61' fill='%23d6ecff' opacity='0.78'/%3E%3Ccircle cx='23.5' cy='14.2' r='0.91' fill='%23ffffff' opacity='0.44'/%3E%3Ccircle cx='15.7' cy='-80.8' r='0.36' fill='%23ffffff' opacity='0.54'/%3E%3Ccircle cx='-51.7' cy='22.6' r='0.82' fill='%23ffffff' opacity='0.89'/%3E%3Ccircle cx='17.6' cy='-10.4' r='0.58' fill='%23ffe6c2' opacity='0.72'/%3E%3Ccircle cx='101.1' cy='31.4' r='0.61' fill='%23ffffff' opacity='0.91'/%3E%3Ccircle cx='86.3' cy='6.8' r='0.67' fill='%23d6ecff' opacity='0.62'/%3E%3Ccircle cx='26.7' cy='15.8' r='0.95' fill='%23ffe6c2' opacity='0.46'/%3E%3Ccircle cx='6.9' cy='-12.3' r='0.38' fill='%23ffe6c2' opacity='0.88'/%3E%3Ccircle cx='103.7' cy='-10.4' r='0.39' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='-13.6' cy='50.0' r='0.36' fill='%23d6ecff' opacity='0.72'/%3E%3Ccircle cx='85.4' cy='-33.9' r='0.52' fill='%23d6ecff' opacity='0.88'/%3E%3Ccircle cx='-32.2' cy='-68.5' r='0.69' fill='%23ffe6c2' opacity='0.75'/%3E%3Ccircle cx='-57.3' cy='-8.1' r='0.81' fill='%23d6ecff' opacity='0.44'/%3E%3Ccircle cx='24.9' cy='32.8' r='0.72' fill='%23ffffff' opacity='0.61'/%3E%3Ccircle cx='-60.4' cy='-26.6' r='0.70' fill='%23d6ecff' opacity='0.50'/%3E%3Ccircle cx='70.2' cy='-20.5' r='0.37' fill='%23d6ecff' opacity='0.89'/%3E%3Ccircle cx='12.8' cy='-62.7' r='0.55' fill='%23d6ecff' opacity='0.75'/%3E%3Ccircle cx='-17.2' cy='38.0' r='0.84' fill='%23d6ecff' opacity='0.42'/%3E%3Ccircle cx='76.3' cy='-35.2' r='0.69' fill='%23d6ecff' opacity='0.82'/%3E%3Ccircle cx='13.2' cy='30.5' r='0.43' fill='%23ffffff' opacity='0.75'/%3E%3Ccircle cx='6.1' cy='-11.8' r='0.51' fill='%23ffe6c2' opacity='0.75'/%3E%3Ccircle cx='-6.6' cy='44.1' r='0.75' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='-62.4' cy='-22.1' r='0.60' fill='%23d6ecff' opacity='0.82'/%3E%3Ccircle cx='-36.9' cy='24.4' r='0.51' fill='%23d6ecff' opacity='0.66'/%3E%3Ccircle cx='85.6' cy='-22.8' r='0.44' fill='%23d6ecff' opacity='0.73'/%3E%3Ccircle cx='10.4' cy='-12.3' r='0.94' fill='%23ffe6c2' opacity='0.39'/%3E%3Ccircle cx='-53.3' cy='25.0' r='0.51' fill='%23d6ecff' opacity='0.72'/%3E%3Ccircle cx='21.7' cy='-60.9' r='0.39' fill='%23d6ecff' opacity='0.91'/%3E%3Ccircle cx='10.6' cy='35.5' r='0.79' fill='%23ffe6c2' opacity='0.71'/%3E%3Ccircle cx='36.9' cy='-61.5' r='0.63' fill='%23d6ecff' opacity='0.66'/%3E%3Ccircle cx='94.8' cy='-19.7' r='0.57' fill='%23ffe6c2' opacity='0.89'/%3E%3Ccircle cx='-56.3' cy='-45.8' r='0.62' fill='%23d6ecff' opacity='0.72'/%3E%3Ccircle cx='-44.3' cy='-53.9' r='0.84' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='-58.5' cy='4.5' r='0.56' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='96.2' cy='22.5' r='0.56' fill='%23d6ecff' opacity='0.71'/%3E%3Ccircle cx='24.6' cy='-3.4' r='0.93' fill='%23ffe6c2' opacity='0.65'/%3E%3Ccircle cx='65.3' cy='-10.5' r='0.58' fill='%23d6ecff' opacity='0.61'/%3E%3Ccircle cx='-7.4' cy='39.7' r='0.69' fill='%23ffffff' opacity='0.92'/%3E%3Ccircle cx='21.4' cy='-3.7' r='0.99' fill='%23ffe6c2' opacity='0.36'/%3E%3Ccircle cx='18.1' cy='-77.0' r='0.57' fill='%23d6ecff' opacity='0.88'/%3E%3Ccircle cx='-49.6' cy='-35.8' r='0.40' fill='%23d6ecff' opacity='0.51'/%3E%3Ccircle cx='-32.9' cy='42.0' r='0.49' fill='%23d6ecff' opacity='0.47'/%3E%3Ccircle cx='0.2' cy='-8.7' r='0.51' fill='%23ffe6c2' opacity='0.74'/%3E%3Ccircle cx='56.4' cy='-65.2' r='0.67' fill='%23d6ecff' opacity='0.37'/%3E%3Ccircle cx='28.8' cy='19.8' r='0.63' fill='%23d6ecff' opacity='0.82'/%3E%3Ccircle cx='3.5' cy='39.8' r='0.41' fill='%23d6ecff' opacity='0.74'/%3E%3Ccircle cx='23.5' cy='20.4' r='0.85' fill='%23d6ecff' opacity='0.53'/%3E%3Ccircle cx='-24.5' cy='-75.4' r='0.79' fill='%23d6ecff' opacity='0.91'/%3E%3Ccircle cx='43.1' cy='-87.6' r='0.69' fill='%23ffffff' opacity='0.84'/%3E%3Ccircle cx='54.2' cy='-70.9' r='0.40' fill='%23ffffff' opacity='0.38'/%3E%3Ccircle cx='-38.1' cy='-63.7' r='0.56' fill='%23d6ecff' opacity='0.50'/%3E%3Ccircle cx='-29.2' cy='-64.1' r='0.35' fill='%23d6ecff' opacity='0.80'/%3E%3Ccircle cx='76.7' cy='-41.8' r='0.36' fill='%23ffffff' opacity='0.43'/%3E%3Ccircle cx='17.3' cy='-64.0' r='0.51' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='-20.1' cy='38.5' r='0.80' fill='%23ffe6c2' opacity='0.87'/%3E%3Ccircle cx='58.0' cy='-65.7' r='0.45' fill='%23ffe6c2' opacity='0.38'/%3E%3Ccircle cx='94.3' cy='27.0' r='0.59' fill='%23ffffff' opacity='0.44'/%3E%3Ccircle cx='17.2' cy='-13.3' r='0.43' fill='%23ffe6c2' opacity='0.66'/%3E%3Ccircle cx='62.5' cy='-52.9' r='0.44' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='3.6' cy='-11.3' r='0.60' fill='%23ffe6c2' opacity='0.78'/%3E%3Ccircle cx='61.9' cy='-56.0' r='0.40' fill='%23ffffff' opacity='0.80'/%3E%3Ccircle cx='94.6' cy='26.4' r='0.41' fill='%23ffe6c2' opacity='0.95'/%3E%3Ccircle cx='-45.3' cy='-63.1' r='0.54' fill='%23d6ecff' opacity='0.92'/%3E%3Ccircle cx='25.2' cy='-65.0' r='0.49' fill='%23d6ecff' opacity='0.87'/%3E%3Ccircle cx='-6.8' cy='47.2' r='0.71' fill='%23ffffff' opacity='0.91'/%3E%3Ccircle cx='21.5' cy='-8.2' r='0.83' fill='%23ffe6c2' opacity='0.44'/%3E%3Ccircle cx='91.7' cy='0.4' r='0.64' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='2.1' cy='-81.5' r='0.55' fill='%23d6ecff' opacity='0.63'/%3E%3Ccircle cx='-21.1' cy='33.0' r='0.59' fill='%23d6ecff' opacity='0.75'/%3E%3Ccircle cx='-50.7' cy='-27.4' r='0.79' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='12.6' cy='-77.0' r='0.75' fill='%23d6ecff' opacity='0.66'/%3E%3Ccircle cx='-24.6' cy='44.1' r='0.40' fill='%23d6ecff' opacity='0.39'/%3E%3Ccircle cx='-45.2' cy='14.7' r='0.54' fill='%23d6ecff' opacity='0.88'/%3E%3Ccircle cx='40.4' cy='-50.4' r='0.70' fill='%23ffffff' opacity='0.39'/%3E%3Ccircle cx='-17.5' cy='-74.4' r='0.62' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='32.2' cy='19.1' r='0.59' fill='%23ffe6c2' opacity='0.50'/%3E%3Ccircle cx='77.0' cy='-37.3' r='0.64' fill='%23d6ecff' opacity='0.58'/%3E%3Ccircle cx='-4.9' cy='38.1' r='0.92' fill='%23ffe6c2' opacity='0.94'/%3E%3Ccircle cx='13.1' cy='-2.3' r='0.64' fill='%23ffe6c2' opacity='0.36'/%3E%3Ccircle cx='-3.9' cy='41.9' r='0.69' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='23.9' cy='-73.4' r='0.42' fill='%23ffffff' opacity='0.38'/%3E%3Ccircle cx='21.0' cy='24.5' r='0.48' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='85.6' cy='-6.4' r='0.35' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='-48.8' cy='30.4' r='0.84' fill='%23d6ecff' opacity='0.45'/%3E%3Ccircle cx='0.5' cy='-12.1' r='0.56' fill='%23ffe6c2' opacity='0.70'/%3E%3Ccircle cx='88.1' cy='-15.3' r='0.63' fill='%23ffffff' opacity='0.51'/%3E%3Ccircle cx='59.8' cy='-64.6' r='0.45' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='2.4' cy='-85.5' r='0.65' fill='%23ffffff' opacity='0.84'/%3E%3Ccircle cx='84.6' cy='5.4' r='0.41' fill='%23d6ecff' opacity='0.70'/%3E%3Ccircle cx='-38.1' cy='-55.5' r='0.53' fill='%23d6ecff' opacity='0.93'/%3E %3Cg filter='url(%23blurD)'%3E%3Cpath d='M11.3 5.5 L11.7 9.0 L11.1 12.9 L9.3 16.8 L6.4 20.4 L2.3 23.5 L-2.8 25.7 L-8.6 26.7 L-14.9 26.3 L-21.4 24.4 L-27.6 20.9 L-33.3 15.8 L-37.9 9.2 L-41.2 1.4 L-42.8 -7.3 L-42.4 -16.7 L-40.0 -26.1 L-35.5 -35.3 L-28.8 -43.5 L-20.2 -50.5 L-9.9 -55.7 L1.7 -58.8 L14.1 -59.4 L26.7 -57.3 L39.1 -52.4 L50.6 -44.9 L60.5 -34.8 L68.4 -22.4' fill='none' stroke='%2305040a' stroke-width='3.4' stroke-linecap='round' opacity='.22'/%3E%3Cpath d='M-5.5 11.3 L-9.0 11.7 L-12.9 11.1 L-16.8 9.3 L-20.4 6.4 L-23.5 2.3 L-25.7 -2.8 L-26.7 -8.6 L-26.3 -14.9 L-24.4 -21.4 L-20.9 -27.6 L-15.8 -33.3 L-9.2 -37.9 L-1.4 -41.2 L7.3 -42.8 L16.7 -42.4 L26.1 -40.0 L35.3 -35.5 L43.5 -28.8 L50.5 -20.2 L55.7 -9.9 L58.8 1.7 L59.4 14.1 L57.3 26.7 L52.4 39.1 L44.9 50.6 L34.8 60.5 L22.4 68.4' fill='none' stroke='%2305040a' stroke-width='3.4' stroke-linecap='round' opacity='.22'/%3E%3Cpath d='M-11.3 -5.5 L-11.7 -9.0 L-11.1 -12.9 L-9.3 -16.8 L-6.4 -20.4 L-2.3 -23.5 L2.8 -25.7 L8.6 -26.7 L14.9 -26.3 L21.4 -24.4 L27.6 -20.9 L33.3 -15.8 L37.9 -9.2 L41.2 -1.4 L42.8 7.3 L42.4 16.7 L40.0 26.1 L35.5 35.3 L28.8 43.5 L20.2 50.5 L9.9 55.7 L-1.7 58.8 L-14.1 59.4 L-26.7 57.3 L-39.1 52.4 L-50.6 44.9 L-60.5 34.8 L-68.4 22.4' fill='none' stroke='%2305040a' stroke-width='3.4' stroke-linecap='round' opacity='.22'/%3E%3Cpath d='M5.5 -11.3 L9.0 -11.7 L12.9 -11.1 L16.8 -9.3 L20.4 -6.4 L23.5 -2.3 L25.7 2.8 L26.7 8.6 L26.3 14.9 L24.4 21.4 L20.9 27.6 L15.8 33.3 L9.2 37.9 L1.4 41.2 L-7.3 42.8 L-16.7 42.4 L-26.1 40.0 L-35.3 35.5 L-43.5 28.8 L-50.5 20.2 L-55.7 9.9 L-58.8 -1.7 L-59.4 -14.1 L-57.3 -26.7 L-52.4 -39.1 L-44.9 -50.6 L-34.8 -60.5 L-22.4 -68.4' fill='none' stroke='%2305040a' stroke-width='3.4' stroke-linecap='round' opacity='.22'/%3E%3C/g%3E %3Cg filter='url(%23blurXS)'%3E%3Ccircle cx='37.2' cy='-53.7' r='1.9' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='36.1' cy='-54.2' r='2.3' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='65.7' cy='-27.8' r='2.0' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='76.3' cy='15.2' r='1.8' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='-42.6' cy='-17.7' r='1.9' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='-36.1' cy='72.2' r='2.1' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='52.0' cy='-18.4' r='1.6' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='55.2' cy='-12.0' r='2.1' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='20.6' cy='69.6' r='2.3' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='39.6' cy='56.6' r='1.5' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='-62.7' cy='-55.1' r='2.4' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='12.2' cy='55.1' r='2.4' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='40.7' cy='-3.7' r='1.5' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='-26.2' cy='57.7' r='1.6' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='35.1' cy='36.2' r='1.6' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='-34.8' cy='36.1' r='2.5' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='-57.7' cy='-26.2' r='1.7' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='-27.9' cy='39.6' r='2.0' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='-44.9' cy='27.8' r='1.9' fill='%23ff7fb0' opacity='.75'/%3E%3Ccircle cx='31.5' cy='-73.6' r='2.5' fill='%23ff7fb0' opacity='.75'/%3E%3C/g%3E %3Cellipse rx='30' ry='26' fill='url(%23gcore)'/%3E %3Cellipse rx='12' ry='10' fill='url(%23gcore2)'/%3E %3Ccircle r='2.6' fill='%23ffffff'/%3E %3C/g%3E %3Cg class='tw' style='animation-duration:4s' opacity='.9'%3E%3Cpath d='M120 111 L121.2 118.8 L129 120 L121.2 121.2 L120 129 L118.8 121.2 L111 120 L118.8 118.8Z' fill='%23ffffff'/%3E%3Ccircle cx='120' cy='120' r='5' fill='url(%23glow)'/%3E%3C/g%3E%3Cg class='tw' style='animation-duration:4s' opacity='.9'%3E%3Cpath d='M470 321 L471.2 328.8 L479 330 L471.2 331.2 L470 339 L468.8 331.2 L461 330 L468.8 328.8Z' fill='%23ffffff'/%3E%3Ccircle cx='470' cy='330' r='5' fill='url(%23glow)'/%3E%3C/g%3E%3Cg class='tw' style='animation-duration:4s' opacity='.9'%3E%3Cpath d='M90 631 L91.2 638.8 L99 640 L91.2 641.2 L90 649 L88.8 641.2 L81 640 L88.8 638.8Z' fill='%23ffffff'/%3E%3Ccircle cx='90' cy='640' r='5' fill='url(%23glow)'/%3E%3C/g%3E %3Cg class='comet'%3E%3Cg transform='translate(660 100) rotate(-5)'%3E %3Cg class='ctail'%3E %3Cpath d='M0 -3 C60 -10 140 -22 230 -44 C150 -14 70 -2 0 4Z' fill='url(%23dusttail)' filter='url(%23blurXS)'/%3E %3Cpath d='M0 -1.4 L260 -6 L260 6 L0 1.4Z' fill='url(%23iontail)' filter='url(%23blurXS)'/%3E %3Cpath d='M0 -0.6 L200 -2 L200 2 L0 0.6Z' fill='url(%23iontail)' opacity='.8'/%3E %3Ccircle cx='13.1' cy='0.0' r='1.06' fill='%23e8f6ff' opacity='0.86'/%3E%3Ccircle cx='81.9' cy='2.0' r='0.45' fill='%23ffe7c4' opacity='0.46'/%3E%3Ccircle cx='133.4' cy='13.0' r='0.58' fill='%23e8f6ff' opacity='0.72'/%3E%3Ccircle cx='168.8' cy='27.0' r='0.85' fill='%23ffe7c4' opacity='0.70'/%3E%3Ccircle cx='13.5' cy='-0.6' r='0.86' fill='%23ffe7c4' opacity='0.79'/%3E%3Ccircle cx='162.4' cy='12.5' r='0.69' fill='%23ffe7c4' opacity='0.82'/%3E%3Ccircle cx='126.7' cy='2.3' r='0.62' fill='%23e8f6ff' opacity='0.55'/%3E%3Ccircle cx='152.6' cy='-2.9' r='0.95' fill='%23e8f6ff' opacity='0.61'/%3E%3Ccircle cx='159.5' cy='0.1' r='0.83' fill='%23ffe7c4' opacity='0.31'/%3E%3Ccircle cx='143.5' cy='-3.0' r='1.02' fill='%23ffe7c4' opacity='0.61'/%3E%3Ccircle cx='89.1' cy='3.1' r='0.43' fill='%23ffe7c4' opacity='0.87'/%3E%3Ccircle cx='70.7' cy='0.2' r='1.04' fill='%23ffe7c4' opacity='0.87'/%3E%3Ccircle cx='69.9' cy='3.2' r='0.64' fill='%23ffe7c4' opacity='0.63'/%3E%3Ccircle cx='84.8' cy='-7.6' r='0.77' fill='%23e8f6ff' opacity='0.69'/%3E%3Ccircle cx='19.0' cy='4.9' r='0.41' fill='%23ffe7c4' opacity='0.82'/%3E%3Ccircle cx='71.0' cy='3.0' r='1.04' fill='%23ffe7c4' opacity='0.89'/%3E%3Ccircle cx='116.6' cy='-9.4' r='1.12' fill='%23ffe7c4' opacity='0.65'/%3E%3Ccircle cx='54.1' cy='9.0' r='0.42' fill='%23e8f6ff' opacity='0.30'/%3E%3Ccircle cx='135.7' cy='13.4' r='0.49' fill='%23e8f6ff' opacity='0.33'/%3E%3Ccircle cx='165.1' cy='-11.2' r='0.72' fill='%23e8f6ff' opacity='0.82'/%3E%3Ccircle cx='81.8' cy='-0.2' r='1.03' fill='%23e8f6ff' opacity='0.66'/%3E%3Ccircle cx='93.3' cy='-4.5' r='1.21' fill='%23ffe7c4' opacity='0.50'/%3E%3Ccircle cx='141.8' cy='28.2' r='0.65' fill='%23e8f6ff' opacity='0.56'/%3E%3Ccircle cx='106.8' cy='-0.9' r='1.25' fill='%23ffe7c4' opacity='0.59'/%3E%3Ccircle cx='113.8' cy='13.2' r='0.77' fill='%23ffe7c4' opacity='0.57'/%3E%3Ccircle cx='72.2' cy='-7.7' r='0.56' fill='%23e8f6ff' opacity='0.46'/%3E %3C/g%3E %3Ccircle r='16' fill='url(%23coma)' class='chead'/%3E %3Ccircle r='3.4' fill='%23ffffff'/%3E %3Ccircle r='7' fill='%23e9fbff' opacity='.45'/%3E %3C/g%3E%3C/g%3E %3C!-- ringed planet: back half of ring, body, front half of ring --%3E %3Cg transform='rotate(-18 505 845)' class='ring'%3E %3Cpath d='M255 845 A250 52 0 0 1 755 845' fill='none' stroke='url(%23ringg)' stroke-width='10' opacity='.55'/%3E %3Cpath d='M280 845 A225 44 0 0 1 730 845' fill='none' stroke='url(%23ringg)' stroke-width='4' opacity='.4'/%3E %3C/g%3E %3Ccircle cx='505' cy='845' r='164' fill='url(%23atmo)'/%3E %3Ccircle cx='505' cy='845' r='150' fill='url(%23planet)'/%3E %3Cg clip-path='url(%23pclip)'%3E%3Crect x='355' y='695' width='300' height='300' fill='url(%23bands)' transform='rotate(-18 505 845)'/%3E%3C/g%3E %3Cg transform='rotate(-18 505 845)' class='ring'%3E %3Cpath d='M255 845 A250 52 0 0 0 755 845' fill='none' stroke='url(%23ringg)' stroke-width='10'/%3E %3Cpath d='M280 845 A225 44 0 0 0 730 845' fill='none' stroke='url(%23ringg)' stroke-width='4' opacity='.7'/%3E %3C/g%3E %3C/svg%3E") 50% 100%/cover no-repeat}
:root[data-theme="space"] body::after{top:0;height:calc(100vh + 300px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='300'%3E%3Ccircle cx='191.2' cy='206.4' r='0.7' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='72.2' cy='74.3' r='1.7' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='203.3' cy='134.0' r='1.3' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='250.4' cy='173.7' r='1.2' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='5.8' cy='42.9' r='1.2' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='234.1' cy='22.7' r='0.8' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='28.0' cy='259.4' r='0.9' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='21.9' cy='50.4' r='1.2' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='132.7' cy='297.1' r='1.5' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='27.4' cy='95.2' r='0.9' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='247.0' cy='215.7' r='0.6' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='148.6' cy='250.3' r='1.5' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='71.4' cy='91.4' r='1.4' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='195.4' cy='136.8' r='1.5' fill='%23ffffff' opacity='0.9'/%3E%3C/svg%3E");background-size:260px 300px;will-change:transform;animation:rt-space-drift 60s linear infinite}
@keyframes rt-space-drift{from{transform:translateY(-300px)}to{transform:translateY(0)}}
:root[data-theme="space"] .topnav{background:color-mix(in oklab,var(--bg) 60%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
:root[data-theme="space"] .sticky-save{background:transparent}
:root[data-theme="space"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card){background:rgba(11,12,18,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:rgba(63,210,199,.42);box-shadow:0 12px 30px -14px rgba(63,210,199,.55)}
@property --space-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
:root[data-theme="space"] :is(.log-box,.tips-card){border-color:transparent;background:linear-gradient(rgba(11,12,18,.9),rgba(11,12,18,.9)) padding-box,conic-gradient(from var(--space-angle),rgba(63,210,199,.45),#bff2ff 10%,rgba(243,214,160,.7) 20%,rgba(63,210,199,.45) 32%,rgba(63,210,199,.45)) border-box;animation:rt-space-orbit 9s linear infinite}
@keyframes rt-space-orbit{to{--space-angle:360deg}}
:root[data-theme="space"] h1{background:linear-gradient(90deg,#ffffff,#9ff0e6 45%,#ffc98a);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="space"] .nav-btn.active{box-shadow:0 0 14px 2px rgba(63,210,199,.6)}
.win-card.unlock-space{border-color:#3fd2c7;background:linear-gradient(180deg,rgba(63,210,199,.3),transparent 65%),var(--card-bg)}
.win-card.unlock-space .win-btn.primary{background:var(--accent);color:var(--on-color)}
@media (prefers-reduced-motion:reduce){:root[data-theme="space"] body::after,:root[data-theme="space"] :is(.log-box,.tips-card){animation:none}}

/* Progress > Muscle Group Growth: dashed average line for the shown period */
.chart-avg-line { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.8; }
.chart-avg-label { fill: var(--muted); font-size: 9px; font-weight: 600; paint-order: stroke; stroke: var(--card-bg); stroke-width: 3px; stroke-linejoin: round; }
.chart-summary:empty { display: none; }

/* Leaderboard: title row, fortnight day tracker, solid table card */
.lb-title-row { display: flex; align-items: center; gap: 0.5rem; position: relative; }
.lb-title-row h1 { margin-right: 0.1rem; }

.lb-fortnight { padding: 0.75rem 0.85rem 0.6rem; }
.lb-fortnight-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.lb-days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; }
/* a gap between the two weeks */
.lb-day:nth-child(8) { margin-left: 6px; }
.lb-day { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.lb-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--accent) 55%, transparent); background: transparent;
}
.lb-day.past .lb-dot { background: var(--accent); border-color: var(--accent); }
.lb-day.today .lb-dot {
  background: var(--accent); border-color: var(--fg);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
  animation: lb-today 2s ease-in-out infinite;
}
@keyframes lb-today { 50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 15%, transparent); } }
.lb-day-letter { font-size: 0.62rem; color: var(--muted); font-weight: 600; }
.lb-day.today .lb-day-letter { color: var(--fg); }
.lb-fortnight-ends { display: flex; justify-content: space-between; font-size: 0.72rem; margin-top: 0.35rem; }
@media (prefers-reduced-motion: reduce) { .lb-day.today .lb-dot { animation: none; } }

/* Table in a solid card -- never frosted/see-through, whatever the theme */
.lb-table-card { padding: 0.5rem 0.6rem; }
:root .card.lb-table-card,
:root .card.lb-fortnight {
  background: color-mix(in oklab, var(--phase-growing) 7%, var(--card-bg)) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Feed: "Share your week" confirm pop-up previewing the post */
.share-preview-card { text-align: left; max-width: 24rem; border-color: var(--accent); background: var(--card-bg); box-shadow: 0 18px 40px -16px color-mix(in oklab, var(--accent) 60%, transparent); }
.share-preview-card .win-btn.primary { background: var(--accent); color: var(--on-color); }
.share-preview-card h2 { text-align: center; }
.share-preview-hint { margin: 0.2rem 0 0.6rem !important; font-size: 0.88rem; }
.share-preview-post .feed-post { margin-bottom: 0.75rem; pointer-events: none; }

/* Another user's profile card in THEIR theme (the rest of the page stays in
   the viewer's). Tokens come from the .theme-scope selectors on each theme. */
.theme-scope { color: var(--fg); }
.theme-scope .muted { color: var(--muted); }
/* Header on another user's profile page: in the viewer's own theme. */
.topnav.theme-scope[data-theme] { background: var(--bg); color: var(--fg); border-color: var(--border); }
/* Fully the OWNER's card: beat the viewer's theme-specific card styling
   (frosted backgrounds, animated borders, ...) with their own tokens. */
:root .card.theme-scope[data-theme] {
  background: color-mix(in oklab, var(--phase-growing) 7%, var(--card-bg)) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 10px 26px -14px color-mix(in oklab, var(--accent) 70%, transparent) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  animation: none !important;
}

/* ===== Pine Forest: living scene (static/forest_scene.js) =====
   The script adds .forest-live to <html> and replaces the static
   body::before/::after scene above with #forest-scene (inline SVG) and
   #forest-particles. Colours follow <html data-tod> (dawn/day/golden/night,
   Brisbane time) and data-season (southern hemisphere). */
:root.forest-live[data-theme="pine_forest"] body::before,
:root.forest-live[data-theme="pine_forest"] body::after { display: none; }
#forest-scene { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
#forest-scene svg { display: block; width: 100%; height: 100%; }
#forest-scene > svg { position: absolute; inset: 0; overflow: visible; }
#forest-scene > .fs-layer { will-change: transform, opacity; }
#forest-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* -- palette per time of day -- */
:root[data-theme="pine_forest"] {
  --fs-sky1: #f9f1d2; --fs-sky2: #eef3df; --fs-sky3: #e2ecd2;
  --fs-sun: #fff3c4; --fs-sun-op: .95;
  --fs-beam: #fff2b8; --fs-beam-op: .7;
  --fs-far: #dfe8cf; --fs-mid: #c3d7aa; --fs-near1: #a3c287; --fs-near2: #86ad69; --fs-edge: #7aa45e;
  --fs-fog: #f1f5e6; --fs-mist: #ffffff; --fs-mist-op: .75;
  --fs-deer: #3e4a32; --fs-bird: #4a5a3c;
}
:root[data-theme="pine_forest"][data-tod="dawn"] {
  --fs-sky1: #e7c4cc; --fs-sky2: #f6dccb; --fs-sky3: #ebe9db;
  --fs-sun: #ffd3bd; --fs-sun-op: .95;
  --fs-beam: #ffd6c0; --fs-beam-op: .5;
  --fs-far: #d9dccf; --fs-mid: #b9c6ad; --fs-near1: #98ad8a; --fs-near2: #7e9a72; --fs-edge: #728f66;
  --fs-fog: #f3ebe4; --fs-mist: #fff6f2; --fs-mist-op: .9;
  --fs-deer: #44443c; --fs-bird: #5a5450;
}
:root[data-theme="pine_forest"][data-tod="golden"] {
  --fs-sky1: #f6bf80; --fs-sky2: #f6d6a2; --fs-sky3: #efe0b8;
  --fs-sun: #ffc66e; --fs-sun-op: 1;
  --fs-beam: #ffc46e; --fs-beam-op: .7;
  --fs-far: #d9cf9e; --fs-mid: #bdb67c; --fs-near1: #969859; --fs-near2: #7d844a; --fs-edge: #6f7a40;
  --fs-fog: #f6e2bd; --fs-mist: #fff1d6; --fs-mist-op: .7;
  --fs-deer: #3b3420; --fs-bird: #4a3a22;
}
:root[data-theme="pine_forest"][data-tod="night"] {
  --fs-sky1: #050d18; --fs-sky2: #0c1c2a; --fs-sky3: #11231c;
  --fs-sun: #000; --fs-sun-op: 0;
  --fs-beam: #bcd4ff; --fs-beam-op: .07;
  --fs-far: #1a3328; --fs-mid: #13281e; --fs-near1: #0e2018; --fs-near2: #0b1a13; --fs-edge: #09150f;
  --fs-fog: #10241c; --fs-mist: #9fc2b4; --fs-mist-op: .18;
  --fs-deer: #0a120d; --fs-bird: #0a120d;
}
/* seasons: misty winters, warmer autumn tones */
:root[data-theme="pine_forest"][data-season="winter"] { --fs-mist-op: .95; }
:root[data-theme="pine_forest"][data-season="winter"][data-tod="night"] { --fs-mist-op: .3; }
/* (autumn: pines stay green -- no tree tint) */

#forest-scene .fs-s1 { stop-color: var(--fs-sky1); }
#forest-scene .fs-s2 { stop-color: var(--fs-sky2); }
#forest-scene .fs-s3 { stop-color: var(--fs-sky3); }
#forest-scene .fs-sun1 { stop-color: #fffaf0; stop-opacity: var(--fs-sun-op); }
#forest-scene .fs-sun2 { stop-color: var(--fs-sun); stop-opacity: calc(var(--fs-sun-op) * .75); }
#forest-scene .fs-sun3 { stop-color: var(--fs-sun); stop-opacity: 0; }
#forest-scene .fs-beam1 { stop-color: var(--fs-beam); stop-opacity: var(--fs-beam-op); }
#forest-scene .fs-beam2 { stop-color: var(--fs-beam); stop-opacity: 0; }
#forest-scene .fs-fog0 { stop-color: var(--fs-fog); stop-opacity: 0; }
#forest-scene .fs-fog1 { stop-color: var(--fs-fog); stop-opacity: 1; }
#forest-scene .fs-ground { fill: var(--fs-fog); }
#forest-scene .fs-far { fill: var(--fs-far); transition: fill 1.5s; }
#forest-scene .fs-mid { fill: var(--fs-mid); transition: fill 1.5s; }
#forest-scene .fs-near1 { fill: var(--fs-near1); transition: fill 1.5s; }
#forest-scene .fs-near2 { fill: var(--fs-near2); transition: fill 1.5s; }
#forest-scene .fs-edge { fill: var(--fs-edge); transition: fill 1.5s; }
#forest-scene .fs-mistfill { fill: var(--fs-mist); }
#forest-scene .fs-mist { opacity: var(--fs-mist-op); animation: fs-mist linear infinite; }
@keyframes fs-mist { to { transform: translateX(calc(-900 * var(--fs-u, 1px))); } }

/* night sky */
#forest-scene .fs-night-only { opacity: 0; transition: opacity 1.5s; }
:root[data-tod="night"] #forest-scene .fs-night-only { opacity: 1; }
#forest-scene .fs-star { fill: #fffbe8; }
#forest-scene .fs-twinkle { animation: fs-tw ease-in-out infinite alternate; }
@keyframes fs-tw { from { opacity: .15; } to { opacity: 1; } }

/* wind: framing pines sway, beams flicker through the canopy */
#forest-scene .fs-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: fs-sway 7s ease-in-out infinite alternate; }
@keyframes fs-sway { from { transform: rotate(-0.7deg); } to { transform: rotate(0.7deg); } }
#forest-scene .fs-beam { animation: fs-beam 5s ease-in-out infinite alternate; }
#forest-scene .fs-beam-b { animation-delay: -2s; }
#forest-scene .fs-beam-c { animation-delay: -3.5s; opacity: .7; }
@keyframes fs-beam { from { opacity: .45; } to { opacity: 1; } }

/* deer */
#forest-scene .fs-deer { fill: var(--fs-deer); }
#forest-scene .fs-antler { stroke: var(--fs-deer); }
#forest-scene .fs-deer-leg { transform-box: fill-box; transform-origin: 50% 0; }
#forest-scene .walking .fs-leg-a { animation: fs-leg .55s ease-in-out infinite alternate; }
#forest-scene .walking .fs-leg-b { animation: fs-leg .55s ease-in-out infinite alternate-reverse; }
@keyframes fs-leg { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
/* (pausing mid-walk = standing still: legs stop when .walking is removed) */

/* birds */
#forest-scene .fs-bird { fill: none; stroke: var(--fs-bird); stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: fs-flap .42s ease-in-out infinite alternate; }
@keyframes fs-flap { from { transform: scaleY(1); } to { transform: scaleY(-0.5); } }

/* swooping owl (night; Lab "Owl" sends one any time) */
#forest-scene .fs-owl-body { fill: #4a3826; }
#forest-scene .fs-owl-wing { fill: #3b2c1e; transform-box: fill-box; transform-origin: 100% 60%; animation: fs-owl-flap .9s ease-in-out infinite alternate; }
#forest-scene .fs-owl-wing-back { fill: #2c2116; animation-delay: -.12s; }
:root:not([data-tod="night"]) #forest-scene .fs-owl-body { fill: #6b5236; }
:root:not([data-tod="night"]) #forest-scene .fs-owl-wing { fill: #5a4430; }
@keyframes fs-owl-flap { from { transform: scaleY(1); } to { transform: scaleY(-0.35); } }
#forest-scene .fs-owl-eye { fill: #ffe066; }
:root[data-tod="night"] #forest-scene .fs-owl-eye { filter: drop-shadow(0 0 2px #ffd84a); }

/* particles */
#forest-particles .fp { position: absolute; left: var(--x); top: -6vh; will-change: transform; }
/* autumn: pine needles tumbling down (slow spin) */
#forest-particles .fp-needle { width: 13px; height: 2px; border-radius: 2px; background: var(--c); opacity: .9; animation: fp-needle calc(var(--dur) * .9) linear var(--delay) infinite; }
#forest-particles .fp-needle:nth-child(3n) { width: 9px; }
@keyframes fp-needle {
  0% { transform: translate(0, 0) rotate(20deg); }
  25% { transform: translate(calc(var(--sway) * .3), 28vh) rotate(200deg); }
  50% { transform: translate(calc(var(--sway) * .7), 56vh) rotate(330deg); }
  75% { transform: translate(calc(var(--sway) * .4), 84vh) rotate(520deg); }
  100% { transform: translate(var(--sway), 112vh) rotate(700deg); }
}
/* autumn pine cones: hang on the framing pines, fall + regrow (forest_scene.js dropCone) */
#forest-scene .fs-cone, #forest-scene .fs-fallen { display: none; }
:root[data-season="autumn"] #forest-scene .fs-cone, :root[data-season="autumn"] #forest-scene .fs-fallen { display: inline; }
#forest-scene .fs-cone-body { fill: #8a5a2e; }
#forest-scene .fs-cone > *, #forest-scene .fs-cone-falling > * { transform-box: fill-box; }
#forest-scene .fs-cone { transition: opacity 3s ease; }
#forest-scene .fs-cone.gone { opacity: 0; transition: none; }
#forest-particles .fp-petal { width: 8px; height: 6px; background: #f6c3d2; border-radius: 60% 0 60% 0; animation: fp-fall var(--dur) linear var(--delay) infinite; opacity: .85; }
#forest-particles .fp-drop { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .75); animation: fp-fall calc(var(--dur) * 1.4) linear var(--delay) infinite; }
/* winter: snowflakes, snow-capped pines, white ground */
#forest-particles .fp-snow { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px rgba(255, 255, 255, .9); opacity: .9; animation: fp-snow calc(var(--dur) * 1.3) linear var(--delay) infinite; }
#forest-particles .fp-snow:nth-child(3n) { width: 4px; height: 4px; opacity: .7; }
#forest-particles .fp-snow:nth-child(4n) { width: 8px; height: 8px; filter: blur(.6px); }
@keyframes fp-snow {
  0% { transform: translate(0, 0); }
  50% { transform: translate(calc(var(--sway) * .6), 56vh); }
  100% { transform: translate(var(--sway), 112vh); }
}
#forest-scene .fs-snow { fill: #f7fbff; opacity: 0; transition: opacity 1.5s; }
:root[data-season="winter"] #forest-scene .fs-snow { opacity: .95; }
:root[data-season="winter"][data-tod="night"] #forest-scene .fs-snow { fill: #c9d7e6; opacity: .85; }
:root[data-theme="pine_forest"][data-season="winter"]:not([data-tod="night"]) { --fs-fog: #f4f8fb; --fs-mist: #ffffff; }
:root[data-theme="pine_forest"][data-season="winter"][data-tod="night"] { --fs-fog: #22334a; }
@keyframes fp-fall {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(var(--sway), 112vh) rotate(560deg); }
}
#forest-particles .fp-mote, #forest-particles .fp-firefly { top: var(--y); border-radius: 50%; animation: fp-float var(--dur) ease-in-out var(--delay) infinite alternate, fp-blink var(--blink) ease-in-out var(--delay) infinite alternate; }
#forest-particles .fp-mote { width: 7px; height: 7px; background: radial-gradient(circle, #fffbe0 0 30%, rgba(255, 233, 160, .7) 45%, rgba(255, 224, 138, 0) 70%); }
#forest-particles .fp-firefly { width: 5px; height: 5px; background: #f4ff9e; box-shadow: 0 0 8px 3px rgba(215, 245, 90, .75); }
@keyframes fp-float { from { transform: translate(0, 0); } to { transform: translate(calc(var(--sway) / 3), -7vh); } }
@keyframes fp-blink { from { opacity: .15; } to { opacity: 1; } }

/* -- the app itself at night: the whole theme goes dark -- */
:root[data-theme="pine_forest"][data-tod="night"] {
  color-scheme: dark;
  --bg: #0b1711; --fg: #e9f1df; --muted: #93a985; --border: #22402c;
  --accent: #8bc34a; --accent-active: #5f9a35; --card-bg: #11231a; --on-color: #0b1606;
  --dumbbell-grey: #dfe9c8; --outline-grey: #c5e08a;
}
:root[data-theme="pine_forest"][data-tod="night"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card) {
  background: linear-gradient(180deg, rgba(20, 42, 29, .9), rgba(13, 29, 20, .9)) !important;
  border-color: #3e6b3a;
}
:root[data-theme="pine_forest"][data-tod="night"] .log-box :is(input, select, button.secondary, .block) { background: rgba(10, 24, 16, .85); }
:root[data-theme="pine_forest"][data-tod="night"] h1 { background: linear-gradient(90deg, #f1f6d8, #b6d96a 55%, #e3c45a); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* warm card tint at golden hour, rosy at dawn */
:root[data-theme="pine_forest"][data-tod="golden"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card) {
  background: linear-gradient(180deg, rgba(236, 226, 184, .86), rgba(242, 236, 206, .84)) !important;
}
:root[data-theme="pine_forest"][data-tod="dawn"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card) {
  background: linear-gradient(180deg, rgba(234, 226, 214, .86), rgba(238, 240, 226, .84)) !important;
}

/* -- forest touches on the UI (live scene only) -- */
/* cards: clean, fairly solid green tint (the old wood-grain texture read as
   blurry streaks with a tile seam) + a moss edge along the bottom */
:root.forest-live[data-theme="pine_forest"]:not([data-tod="night"]) :is(.card,.chart-card,.settings-section,.log-box,.tips-card) {
  background: var(--fs-card-grad, linear-gradient(180deg, rgba(220, 236, 200, .93), rgba(236, 244, 222, .92))) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root.forest-live[data-theme="pine_forest"][data-tod="golden"] { --fs-card-grad: linear-gradient(180deg, rgba(238, 229, 192, .94), rgba(244, 238, 212, .93)); }
:root.forest-live[data-theme="pine_forest"][data-tod="dawn"] { --fs-card-grad: linear-gradient(180deg, rgba(238, 230, 220, .94), rgba(241, 242, 230, .93)); }
:root.forest-live[data-theme="pine_forest"] :is(.card,.chart-card,.settings-section,.log-box,.tips-card) {
  box-shadow: inset 0 -3px 0 -1px rgba(122, 168, 90, .55), 0 10px 26px -16px rgba(74, 138, 58, .55);
}
/* a little leaf on the selected tab */
:root.forest-live[data-theme="pine_forest"] .nav-btn { position: relative; }
:root.forest-live[data-theme="pine_forest"] .nav-btn.active::after {
  content: ""; position: absolute; right: -3px; top: -4px; width: 15px; height: 15px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20 C4 9 11 4 21 3 C20 13 15 20 4 20Z' fill='%236cb043' stroke='%233f7a2a' stroke-width='1.2'/%3E%3Cpath d='M5 19 L15 9' stroke='%233f7a2a' stroke-width='1.1'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-10deg);
}
/* streak shown as a growing sapling */
:root.forest-live[data-theme="pine_forest"] .streak-badge .streak-flame { display: none; }
.forest-sapling { display: inline-flex; align-items: flex-end; margin-right: 2px; animation: fs-sprout .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fs-sprout { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* -- Forest Lab (lab accounts only) -- */
#forest-lab-btn {
  position: fixed; left: 10px; top: calc(74px + env(safe-area-inset-top)); z-index: 1500;
  width: auto; padding: 0.4rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
  background: #2f5a2a; color: #f1f6e6; border: 1.5px solid #8bc34a; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
}
#forest-lab {
  position: fixed; left: 10px; top: calc(112px + env(safe-area-inset-top)); z-index: 1500;
  width: min(300px, calc(100vw - 20px)); padding: 0.75rem; border-radius: 14px;
  background: #13261b; color: #eef4e4; border: 1.5px solid #8bc34a; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.85rem;
}
#forest-lab[hidden] { display: none; }
#forest-lab .fl-head { display: flex; justify-content: space-between; align-items: baseline; }
#forest-lab .fl-note { font-size: 0.72rem; opacity: 0.7; }
#forest-lab label { display: flex; flex-direction: column; gap: 0.25rem; }
#forest-lab select, #forest-lab input[type=range] { width: 100%; }
#forest-lab select { background: #0c1a12; color: #eef4e4; border: 1px solid #3e6b3a; padding: 0.35rem; font-size: 0.85rem; }
#forest-lab .fl-row { display: flex; gap: 0.4rem; }
#forest-lab button { flex: 1; width: auto; margin: 0; padding: 0.45rem 0.3rem; font-size: 0.8rem; border-radius: 8px; background: #23422c; color: #eef4e4; border: 1px solid #4f7f3f; }
#forest-lab .fl-reset { background: transparent; }
#forest-lab .fl-peek { flex: none; }
/* Lab "peek": fade the page away to watch the scene unobstructed */
:root.forest-peek main, :root.forest-peek .sticky-save { opacity: 0.04; pointer-events: none; transition: opacity .4s; }

@media (prefers-reduced-motion: reduce) {
  #forest-scene *, #forest-particles * { animation: none !important; }
}

/* Pine Forest floor (forest_scene.js buildFloor): one variant per season */
#forest-scene .fs-floor > [class^="fs-floor-"] { display: none; }
:root[data-season="summer"] #forest-scene .fs-floor-summer,
:root[data-season="spring"] #forest-scene .fs-floor-spring,
:root[data-season="autumn"] #forest-scene .fs-floor-autumn,
:root[data-season="winter"] #forest-scene .fs-floor-winter { display: inline; }
#forest-scene .fs-grass { transform-box: fill-box; transform-origin: 50% 100%; animation: fs-grass 4.5s ease-in-out infinite alternate; }
@keyframes fs-grass { from { transform: skewX(-4deg); } to { transform: skewX(4deg); } }
#forest-scene .fs-sparkle { animation: fs-tw 2.4s ease-in-out infinite alternate; }
:root[data-tod="night"] #forest-scene .fs-floor, :root[data-tod="night"] #forest-scene .fs-fallen { filter: url(#fs-f-night); }
:root[data-tod="night"][data-season="winter"] #forest-scene .fs-floor { filter: url(#fs-f-night-snow); }
:root[data-tod="golden"] #forest-scene .fs-floor { filter: url(#fs-f-golden); }
:root[data-tod="dawn"] #forest-scene .fs-floor { filter: url(#fs-f-dawn); }
:root[data-tod="night"] #forest-scene .fs-cone-body { fill: #3a2616; }

/* ===== Beach living scene (static/beach_scene.js, theme "sunlit_beach") =====
   Sits above the theme's CSS rays (body::before) and under the bubbles
   (body::after): seabed, water surface, fish / turtle / jellyfish / whale. */
#beach-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
#beach-scene svg { display: block; width: 100%; height: 100%; }
#beach-scene .bs-wave { animation: bs-wave linear infinite; }
@keyframes bs-wave { to { transform: translateX(-200px); } }
#beach-scene .bs-glint { animation: bs-glint 2.6s ease-in-out infinite alternate; }
@keyframes bs-glint { from { opacity: .1; } to { opacity: 1; } }
#beach-scene .bs-kelp { transform-box: fill-box; transform-origin: 50% 100%; animation: bs-kelp ease-in-out infinite alternate; }
@keyframes bs-kelp { from { transform: skewX(-5deg); } to { transform: skewX(5deg); } }
#beach-scene .bs-bob { animation: bs-bob 1.6s ease-in-out infinite alternate; }
@keyframes bs-bob { from { transform: translateY(-1.5px); } to { transform: translateY(1.5px); } }
#beach-scene .bs-fish-tail { transform-box: fill-box; transform-origin: 100% 50%; animation: bs-tail .35s ease-in-out infinite alternate; }
@keyframes bs-tail { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
#beach-scene .bs-flip { transform-box: fill-box; animation: bs-flip 2.2s ease-in-out infinite alternate; }
#beach-scene .bs-flip-front { transform-origin: 0% 100%; }
#beach-scene .bs-flip-front2 { transform-origin: 0% 0%; animation-delay: -1.1s; }
#beach-scene .bs-flip-back { transform-origin: 100% 0%; animation-delay: -.6s; }
@keyframes bs-flip { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
#beach-scene .bs-bell { transform-box: fill-box; transform-origin: 50% 100%; animation: bs-pulse 1.8s ease-in-out infinite; }
@keyframes bs-pulse { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(.86, 1.08); } }
#beach-scene .bs-tentacles { transform-box: fill-box; transform-origin: 50% 0%; animation: bs-tent 1.8s ease-in-out infinite; }
@keyframes bs-tent { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.8) skewX(4deg); } }
#beach-scene .bs-whale { opacity: .2; }

/* streak as a growing coral; a little shell on the selected tab */
:root.beach-live[data-theme="sunlit_beach"] .streak-badge .streak-flame { display: none; }
.beach-coral { display: inline-flex; align-items: flex-end; margin-right: 2px; animation: fs-sprout .5s cubic-bezier(.2, 1.4, .4, 1) both; }
:root.beach-live[data-theme="sunlit_beach"] .nav-btn { position: relative; }
:root.beach-live[data-theme="sunlit_beach"] .nav-btn.active::after {
  content: ""; position: absolute; right: -3px; top: -4px; width: 15px; height: 15px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 L3 9 Q12 1 21 9Z' fill='%23ffd9e2' stroke='%23e48aa3' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M12 21 L7.5 6 M12 21 L12 4.5 M12 21 L16.5 6' stroke='%23e48aa3' stroke-width='1.1'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-12deg);
}

/* Scene Lab (lab accounts only) -- shared look for the Beach lab */
.scene-lab-btn {
  position: fixed; left: 10px; top: calc(74px + env(safe-area-inset-top)); z-index: 1500;
  width: auto; padding: 0.4rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
  background: #0a5f6b; color: #f0fbfc; border: 1.5px solid #5fd3de; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
}
.scene-lab {
  position: fixed; left: 10px; top: calc(112px + env(safe-area-inset-top)); z-index: 1500;
  width: min(300px, calc(100vw - 20px)); padding: 0.75rem; border-radius: 14px;
  background: #0b2f38; color: #eefafc; border: 1.5px solid #5fd3de; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.85rem;
}
.scene-lab[hidden] { display: none; }
.scene-lab .fl-head { display: flex; justify-content: space-between; align-items: baseline; }
.scene-lab .fl-note { font-size: 0.72rem; opacity: 0.7; }
.scene-lab label { display: flex; flex-direction: column; gap: 0.25rem; }
.scene-lab input[type=range] { width: 100%; }
.scene-lab .fl-row { display: flex; gap: 0.4rem; }
.scene-lab button { flex: 1; width: auto; margin: 0; padding: 0.45rem 0.3rem; font-size: 0.8rem; border-radius: 8px; background: #11505c; color: #eefafc; border: 1px solid #3fa9b5; }
.scene-lab .fl-reset { background: transparent; }
:root.scene-peek main, :root.scene-peek .sticky-save { opacity: 0.04; pointer-events: none; transition: opacity .4s; }

@media (prefers-reduced-motion: reduce) { #beach-scene * { animation: none !important; } }

/* ===== Inferno living scene (static/inferno_scene.js) =====
   Volcano + lava river + ash/embers, scaled by --inf-k (0.35 low .. 1 max)
   from the user's streak (html data-inferno-level: low/mid/high/max). */
:root.inferno-live[data-theme="inferno"] body::before,
:root.inferno-live[data-theme="inferno"] body::after { display: none; }
/* Layered for scroll performance (see the top of inferno_scene.js): the
   base SVG is static; pulses, smoke and plume are separate layers that only
   animate opacity/transform with fixed values (compositor work). */
#inferno-scene { position: fixed; inset: 0; z-index: -2; pointer-events: none; contain: layout paint; }
#inferno-scene svg { display: block; width: 100%; height: 100%; }
#inferno-scene .is-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#inferno-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: layout paint; }
#inferno-scene .is-haze { opacity: calc(0.25 + 0.55 * var(--inf-k, 1)); transition: opacity 1.5s; }
#inferno-scene .is-crater { transform-box: fill-box; transform-origin: 50% 50%; opacity: calc(0.35 + 0.65 * var(--inf-k, 1)); }
#inferno-scene .is-rim { opacity: calc(0.3 + 0.7 * var(--inf-k, 1)); }
#inferno-scene .is-streaks { opacity: calc(0.3 + 0.7 * var(--inf-k, 1)); transition: opacity 1.5s; }
/* lava field: the molten layer glows through the plate seams (brighter
   with the fire level); .is-pulse-lava makes it breathe */
#inferno-scene .is-molten { opacity: calc(0.4 + 0.5 * var(--inf-k, 1)); }
#inferno-scene .is-pulse-fire { opacity: calc(0.3 + 0.7 * var(--inf-k, 1)); }
#inferno-scene .is-pulse-lava { opacity: calc(0.35 + 0.65 * var(--inf-k, 1)); }
#inferno-scene .is-pulse { position: absolute; inset: 0; opacity: 0; will-change: opacity; animation: is-pulse 6.5s ease-in-out infinite alternate; }
#inferno-scene .is-pulse-lava .is-pulse { animation-duration: 7s; animation-delay: -2s; }
@keyframes is-pulse { to { opacity: .6; } }
#inferno-scene .is-smoke-strip { position: absolute; inset: 0; will-change: transform; }
#inferno-scene .is-smoke-bank { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(58, 21, 18, .55) 40%, rgba(58, 21, 18, 0)); }
#inferno-scene .is-plume-puff { position: absolute; opacity: 0; transform-origin: 50% 100%; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(74, 36, 32, .95) 35%, rgba(74, 36, 32, 0)); }
#inferno-scene .is-hairline { opacity: calc(0.3 + 0.6 * var(--inf-k, 1)); }
#inferno-scene .is-ph-wing { transform-box: fill-box; transform-origin: 10% 100%; animation: is-flap .7s ease-in-out infinite alternate; }
#inferno-scene .is-ph-wing-back { animation-delay: -.1s; }
@keyframes is-flap { from { transform: scaleY(1); } to { transform: scaleY(-0.45); } }
#inferno-scene .is-phoenix { filter: drop-shadow(0 0 6px #ff8a1a); }

/* Embers/ash drift via Web Animations (inferno_scene.js buildParticles). */
#inferno-particles .ip-ember { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: #ffc46b; box-shadow: 0 0 6px 2px rgba(255, 106, 31, .8); }
#inferno-particles .ip-ash { position: absolute; top: -10px; width: 3px; height: 3px; border-radius: 50%; will-change: transform;
  background: rgba(150, 140, 135, .7); }
#inferno-particles .ip-spark { position: fixed; width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: #ffd36b; box-shadow: 0 0 8px 3px rgba(255, 106, 31, .85); pointer-events: none; }

/* UI: obsidian cards with a glowing lava edge; a flame on the selected tab;
   the streak flame grows (and flickers) with the fire level. */
:root.inferno-live[data-theme="inferno"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card) {
  background: linear-gradient(180deg, #1d0d0a, #140807) !important;
  box-shadow: inset 0 -2px 0 rgba(255, 106, 31, calc(0.25 + 0.5 * var(--inf-k, 1))), 0 10px 26px -14px rgba(255, 90, 31, .75);
}
:root.inferno-live[data-theme="inferno"] .nav-btn { position: relative; }
:root.inferno-live[data-theme="inferno"] .nav-btn.active::after {
  content: ""; position: absolute; right: -3px; top: -5px; width: 14px; height: 16px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 1 C13 7 18 9 18 15 A8 8 0 0 1 2 15 C2 11 5 9 6 5 C7 8 9 9 10 9 C10 6 9 4 10 1Z' fill='%23ff6a1f'/%3E%3Cpath d='M10 10 C12 13 14 14 14 17 A4 4 0 0 1 6 17 C6 15 8 14 10 10Z' fill='%23ffd36b'/%3E%3C/svg%3E") no-repeat center / contain;
}
@keyframes is-tabflame { from { transform: scale(.92) rotate(-4deg); } to { transform: scale(1.08) rotate(4deg); } }
:root.inferno-live[data-theme="inferno"] .streak-flame { display: inline-block; transition: transform .6s; transform-origin: 50% 90%; }
:root.inferno-live[data-inferno-level="low"] .streak-flame { transform: scale(.85); filter: saturate(.5) brightness(.8); }
:root.inferno-live[data-inferno-level="mid"] .streak-flame { transform: scale(1.1); animation: is-flicker 2.2s ease-in-out infinite alternate; }
:root.inferno-live[data-inferno-level="high"] .streak-flame { transform: scale(1.3); animation: is-flicker 1.8s ease-in-out infinite alternate; filter: drop-shadow(0 0 4px #ff6a1f); }
:root.inferno-live[data-inferno-level="max"] .streak-flame { transform: scale(1.5); animation: is-flicker 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 7px #ff8a1a); }
@keyframes is-flicker { from { rotate: -3deg; } to { rotate: 3deg; } }

.inferno-lab-btn { background: #6b1a08; border-color: #ff8a3d; }
.inferno-lab { background: #1d0a07; border-color: #ff8a3d; }
.inferno-lab button { background: #3a140b; border-color: #a8461f; }
.inferno-lab .fl-check { flex-direction: row; align-items: center; gap: 0.4rem; }
.inferno-lab .fl-level { font-size: 0.8rem; opacity: .85; }

@media (prefers-reduced-motion: reduce) { #inferno-scene *, #inferno-particles * { animation: none !important; } #inferno-scene .is-pulse { opacity: .3; } }

/* Progress range controls in their own solid cards (never see-through,
   whatever the theme): the 1M/3M/1Y switcher and the "‹ Oct 2026 ›" stepper. */
.range-tabs, .range-step {
  background: color-mix(in oklab, var(--phase-growing) 7%, var(--card-bg)) !important;
  border: 1.5px solid color-mix(in oklab, var(--accent) 55%, var(--border));
  border-radius: 999px;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.range-step { padding: 0.2rem 0.3rem; }
.range-step .range-arrow { border-color: transparent; background: transparent; }

/* Inferno / Diamond: the sticky Save bar normally paints solid --bg, which
   shows as a dark box over the animated scene -- keep only the button. */
:root[data-theme="inferno"] .sticky-save,
:root[data-theme="diamond"] .sticky-save { background: transparent; }
#inferno-scene .is-jet { transform-box: fill-box; transform-origin: 50% 100%; }

/* Profile: each section (average growth, this month, achievements) sits in
   its own card with its label inside. The growth chart's own box is flattened
   so it isn't a card-in-a-card; badges become divided rows. */
.profile-section-card { margin-bottom: 0.85rem; }
.profile-section-card > .profile-section-label { margin-top: 0; }
:root .profile-section-card .chart-card {
  background: transparent !important; border: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0; margin: 0.25rem 0 0;
  animation: none !important;
}
.profile-section-card .profile-badge-row { margin: 0; padding: 0.55rem 0.1rem; border: none; border-top: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; }
.profile-section-card .profile-section-label + .profile-badge-row { border-top: none; }
.profile-section-card > p.muted:last-child { margin-bottom: 0; }

/* Log page: "Ready for more" nudge when re-adding an exercise whose last
   session hit 3+ sets of 12+ (static/app.js showReadyNudge) */
.ready-nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin: 0.5rem 0; padding: 0.55rem 0.7rem; border-radius: 10px; font-size: 0.85rem;
  background: color-mix(in oklab, var(--phase-growing) 14%, var(--card-bg));
  border: 1.5px solid color-mix(in oklab, var(--phase-growing) 55%, transparent);
  animation: ready-in .3s ease both;
}
.ready-nudge-text strong { display: block; font-size: 0.82rem; }
.ready-nudge-actions { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.ready-nudge-bump { width: auto; margin: 0; padding: 0.4rem 0.6rem; font-size: 0.78rem; font-weight: 700; border-radius: 8px;
  background: var(--phase-growing); color: #fff; border: none; }
.ready-nudge-close { width: auto; margin: 0; padding: 0.2rem 0.4rem; background: transparent; border: none; color: var(--muted); font-size: 1.1rem; }
.ready-nudge.applied { border-color: var(--phase-growing); }
@keyframes ready-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ===== Premium scene themes (static/premium_scenes.js) ===== */
.premium-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.premium-scene svg { display: block; width: 100%; height: 100%; }
:root.scene-live .streak-badge .streak-flame { display: none; }
.scene-streak-icon { display: inline-flex; align-items: flex-end; margin-right: 2px; animation: fs-sprout .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@media (prefers-reduced-motion: reduce) { .premium-scene * { animation: none !important; } }

/* --- Summit: alpine light theme --- */
:root[data-theme="summit"], .theme-scope[data-theme="summit"] {
  color-scheme: light;
  --bg: #e6eef6; --fg: #1d2a3a; --muted: #5f6f82; --border: #c6d3e0;
  --accent: #2f6db5; --accent-active: #1f4f8a; --danger: #c0392b; --card-bg: #f8fafc; --on-color: #ffffff;
  --phase-growing: #0ca30c; --phase-ready: #2a78d6; --phase-detraining: #fab219; --phase-atrophying: #d03b3b;
  --dumbbell-grey: #e3ebf4; --scroll-yellow: #f2b33d; --outline-grey: #1f4f8a;
}
:root[data-theme="summit"] body { background: transparent; }
:root[data-theme="summit"] .sticky-save { background: transparent; }
:root[data-theme="summit"] .topnav { background: color-mix(in oklab, var(--bg) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-theme="summit"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card) {
  background: rgba(250, 252, 255, .93) !important; box-shadow: 0 10px 26px -16px rgba(31, 79, 138, .55);
}
:root[data-theme="summit"] h1 { background: linear-gradient(90deg, #1f4f8a, #2f6db5 55%, #e8742c); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="summit"] .nav-btn.active { box-shadow: 0 0 12px 2px rgba(242, 179, 61, .55); }
.premium-scene-summit .sm-clouds { animation: sm-clouds 160s linear infinite; }
@keyframes sm-clouds { to { transform: translateX(-900px); } }
.premium-scene-summit .sm-camp-label { font: 700 11px system-ui, sans-serif; fill: #ffffff; paint-order: stroke; stroke: rgba(29, 42, 58, .6); stroke-width: 3px; }
.premium-scene-summit .sm-pill { font: 700 11px system-ui, sans-serif; fill: #ffffff; }
.premium-scene-summit .sm-pulse { transform-box: fill-box; transform-origin: 50% 50%; animation: sm-pulse 2.4s ease-in-out infinite; }
@keyframes sm-pulse { 0%, 100% { transform: scale(.8); opacity: .25; } 50% { transform: scale(1.3); opacity: .45; } }
.premium-scene-summit .sm-flag.reached .sm-cloth { transform-box: fill-box; transform-origin: 0% 50%; animation: sm-wave 1.6s ease-in-out infinite alternate; }
@keyframes sm-wave { from { transform: skewY(-6deg) scaleX(.94); } to { transform: skewY(6deg) scaleX(1.05); } }
.win-card.unlock-summit { border-color: #2f6db5; background: linear-gradient(180deg, rgba(47, 109, 181, .25), transparent 65%), var(--card-bg); }
.win-card.unlock-summit .win-btn.primary { background: var(--accent); color: var(--on-color); }

/* --- Storm: dark stormy night, lighthouse-yellow accent --- */
:root[data-theme="storm"], .theme-scope[data-theme="storm"] {
  color-scheme: dark;
  --bg: #0c1420; --fg: #e4ecf4; --muted: #8fa1b5; --border: #22324a;
  --accent: #f2c94c; --accent-active: #c9a227; --danger: #ff6b6b; --card-bg: #121c2b; --on-color: #10151d;
  --phase-growing: #0ca30c; --phase-ready: #3987e5; --phase-detraining: #fab219; --phase-atrophying: #d03b3b;
  --dumbbell-grey: #d9e4ef; --scroll-yellow: #f2c94c; --outline-grey: #f2c94c;
}
:root[data-theme="storm"] body { background: transparent; }
:root[data-theme="storm"] .sticky-save { background: transparent; }
:root[data-theme="storm"] .topnav { background: color-mix(in oklab, var(--bg) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-theme="storm"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card) {
  background: rgba(16, 26, 40, .9) !important; box-shadow: 0 10px 26px -14px rgba(242, 201, 76, .35);
}
:root[data-theme="storm"] h1 { background: linear-gradient(90deg, #e4ecf4, #9fc2ff 55%, #f2c94c); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="storm"] .nav-btn.active { box-shadow: 0 0 12px 2px rgba(242, 201, 76, .5); }
.premium-scene-storm .st-clouds { animation: st-drift linear infinite; }
@keyframes st-drift { to { transform: translateX(-900px); } }
.premium-scene-storm .st-waves { animation: st-wave linear infinite; }
@keyframes st-wave { to { transform: translateX(-160px); } }
.premium-scene-storm .st-rain { animation: st-rain 1.6s linear infinite; }
@keyframes st-rain { from { transform: translate(0, 0); } to { transform: translate(-333px, 1000px); } }
.premium-scene-storm .st-beam { animation: st-sweep 10s ease-in-out infinite alternate; transition: opacity 1s; }
@keyframes st-sweep { from { transform: rotate(-18deg); } to { transform: rotate(22deg); } }
.premium-scene-storm .st-lampglow { animation: st-lamp 3s ease-in-out infinite alternate; }
@keyframes st-lamp { from { filter: brightness(.9); } to { filter: brightness(1.15); } }
.win-card.unlock-storm { border-color: #f2c94c; background: linear-gradient(180deg, rgba(242, 201, 76, .22), transparent 65%), var(--card-bg); }
.win-card.unlock-storm .win-btn.primary { background: var(--accent); color: var(--on-color); }

/* --- Neon City: rainy cyberpunk night, neon pink + cyan --- */
:root[data-theme="neon_city"], .theme-scope[data-theme="neon_city"] {
  color-scheme: dark;
  --bg: #0a0814; --fg: #f1ecff; --muted: #9b94b8; --border: #2a2342;
  --accent: #ff3fa4; --accent-active: #c92b80; --danger: #ff5a5a; --card-bg: #120f22; --on-color: #1a0612;
  --phase-growing: #0ca30c; --phase-ready: #3987e5; --phase-detraining: #fab219; --phase-atrophying: #d03b3b;
  --dumbbell-grey: #e7defa; --scroll-yellow: #ffe14a; --outline-grey: #3ff0ff;
}
:root[data-theme="neon_city"] body { background: transparent; }
:root[data-theme="neon_city"] .sticky-save { background: transparent; }
:root[data-theme="neon_city"] .topnav { background: color-mix(in oklab, var(--bg) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-theme="neon_city"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card) {
  background: rgba(18, 14, 34, .9) !important; border-color: rgba(255, 63, 164, .45);
  box-shadow: 0 0 0 1px rgba(63, 240, 255, .12), 0 10px 26px -14px rgba(255, 63, 164, .55);
}
:root[data-theme="neon_city"] h1 { background: linear-gradient(90deg, #ff3fa4, #b56bff 50%, #3ff0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="neon_city"] .nav-btn.active { box-shadow: 0 0 12px 2px rgba(255, 63, 164, .6); }
.premium-scene-neon_city .nc-flicker { animation: nc-flicker 6s steps(1) infinite; }
@keyframes nc-flicker { 0%, 40%, 44%, 100% { opacity: .75; } 42% { opacity: .05; } 70% { opacity: .2; } 72% { opacity: .75; } }
.premium-scene-neon_city .nc-sign { animation: nc-sign 5s ease-in-out infinite alternate; }
@keyframes nc-sign { from { opacity: .82; } to { opacity: 1; } }
.premium-scene-neon_city .nc-rain { animation: nc-rain 2.2s linear infinite; }
@keyframes nc-rain { from { transform: translate(0, 0); } to { transform: translate(-188px, 1000px); } }
.premium-scene-neon_city .nc-refl { animation: nc-refl 4s ease-in-out infinite alternate; }
@keyframes nc-refl { from { opacity: .7; } to { opacity: 1; } }
.win-card.unlock-neon_city { border-color: #ff3fa4; background: linear-gradient(180deg, rgba(255, 63, 164, .25), transparent 65%), var(--card-bg); }
.win-card.unlock-neon_city .win-btn.primary { background: var(--accent); color: var(--on-color); }

/* --- Zen Garden: soft pastel light theme, blossom pink --- */
:root[data-theme="zen_garden"], .theme-scope[data-theme="zen_garden"] {
  color-scheme: light;
  --bg: #f6f1ec; --fg: #3a2f2a; --muted: #8a7a70; --border: #e6d8cf;
  --accent: #d9668a; --accent-active: #b44a6e; --danger: #c0392b; --card-bg: #fffaf6; --on-color: #ffffff;
  --phase-growing: #0ca30c; --phase-ready: #2a78d6; --phase-detraining: #fab219; --phase-atrophying: #d03b3b;
  --dumbbell-grey: #f3e6e9; --scroll-yellow: #e0b84a; --outline-grey: #b44a6e;
}
:root[data-theme="zen_garden"] body { background: transparent; }
:root[data-theme="zen_garden"] .sticky-save { background: transparent; }
:root[data-theme="zen_garden"] .topnav { background: color-mix(in oklab, var(--bg) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-theme="zen_garden"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card) {
  background: rgba(255, 251, 247, .93) !important; box-shadow: 0 10px 26px -16px rgba(180, 74, 110, .45);
}
:root[data-theme="zen_garden"] h1 { background: linear-gradient(90deg, #6b4a33, #b44a6e 55%, #d9668a); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="zen_garden"] .nav-btn.active { box-shadow: 0 0 12px 2px rgba(217, 102, 138, .45); }
.premium-scene-zen_garden .zg-swim { animation: zg-swim linear infinite; }
.premium-scene-zen_garden .zg-swim.rev { animation-direction: reverse; }
@keyframes zg-swim { to { transform: rotate(360deg); } }
/* koi: slow tail sweep + a gentle body wiggle */
.premium-scene-zen_garden .zg-tail { transform-box: fill-box; transform-origin: 50% 0%; animation: zg-tail 1.6s ease-in-out infinite alternate; }
@keyframes zg-tail { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.premium-scene-zen_garden .zg-koi { transform-box: fill-box; transform-origin: 50% 30%; animation: zg-wiggle 3.2s ease-in-out infinite alternate; }
@keyframes zg-wiggle { from { transform: skewX(-4deg); } to { transform: skewX(4deg); } }
.premium-scene-zen_garden .zg-petals { animation: zg-petals 40s linear infinite; }
@keyframes zg-petals { from { transform: translate(0, 0); } to { transform: translate(260px, 1000px); } }
.premium-scene-zen_garden .zg-canopy, .premium-scene-zen_garden .zg-tree { transform-box: fill-box; transform-origin: 30% 100%; animation: zg-sway 9s ease-in-out infinite alternate; }
@keyframes zg-sway { from { transform: rotate(-0.8deg); } to { transform: rotate(0.8deg); } }
.premium-scene-zen_garden .zg-glow { animation: zg-glow 4s ease-in-out infinite alternate; }
@keyframes zg-glow { from { opacity: .55; } to { opacity: .95; } }
.win-card.unlock-zen_garden { border-color: #d9668a; background: linear-gradient(180deg, rgba(217, 102, 138, .2), transparent 65%), var(--card-bg); }
.win-card.unlock-zen_garden .win-btn.primary { background: var(--accent); color: var(--on-color); }

/* --- Aurora: arctic night, aurora green --- */
:root[data-theme="aurora"], .theme-scope[data-theme="aurora"] {
  color-scheme: dark;
  --bg: #070d18; --fg: #e6f6f2; --muted: #8fb0b0; --border: #1b2d3a;
  --accent: #5dfcae; --accent-active: #2fc27e; --danger: #ff6b6b; --card-bg: #0d1724; --on-color: #04140d;
  --phase-growing: #0ca30c; --phase-ready: #3987e5; --phase-detraining: #fab219; --phase-atrophying: #d03b3b;
  --dumbbell-grey: #dff5ee; --scroll-yellow: #b06bff; --outline-grey: #5dfcae;
}
:root[data-theme="aurora"] body { background: transparent; }
:root[data-theme="aurora"] .sticky-save { background: transparent; }
:root[data-theme="aurora"] .topnav { background: color-mix(in oklab, var(--bg) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-theme="aurora"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card) {
  background: rgba(12, 22, 36, .9) !important; box-shadow: 0 10px 26px -14px rgba(93, 252, 174, .45);
}
:root[data-theme="aurora"] h1 { background: linear-gradient(90deg, #e6f6f2, #5dfcae 50%, #b06bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="aurora"] .nav-btn.active { box-shadow: 0 0 12px 2px rgba(93, 252, 174, .5); }
.premium-scene-aurora .au-drift { animation: au-drift linear infinite; }
@keyframes au-drift { to { transform: translateX(-800px); } }
.premium-scene-aurora .au-breathe { animation: au-breathe 9s ease-in-out infinite alternate; }
@keyframes au-breathe { from { opacity: .65; } to { opacity: 1; } }
.premium-scene-aurora .au-tw { animation: au-tw 3s ease-in-out infinite alternate; }
@keyframes au-tw { from { opacity: .15; } to { opacity: .95; } }
.premium-scene-aurora .au-snowfall { animation: au-snow 45s linear infinite; }
@keyframes au-snow { from { transform: translate(0, 0); } to { transform: translate(60px, 1000px); } }
.premium-scene-aurora .au-leg { transform-box: fill-box; transform-origin: 50% 0; }
.premium-scene-aurora .au-leg-a { animation: au-leg .32s ease-in-out infinite alternate; }
.premium-scene-aurora .au-leg-b { animation: au-leg .32s ease-in-out infinite alternate-reverse; }
@keyframes au-leg { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.premium-scene-aurora .au-trot { animation: au-trot .32s ease-in-out infinite alternate; }
@keyframes au-trot { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
.win-card.unlock-aurora { border-color: #5dfcae; background: linear-gradient(180deg, rgba(93, 252, 174, .2), transparent 65%), var(--card-bg); }
.win-card.unlock-aurora .win-btn.primary { background: var(--accent); color: var(--on-color); }

/* --- First Flight: dawn above the clouds (TestFlight testers; static/first_flight_scene.js) --- */
:root[data-theme="first_flight"], .theme-scope[data-theme="first_flight"] {
  color-scheme: dark;
  --bg: #0a1530; --fg: #eef1f8; --muted: #a9b3cf; --border: #263661;
  --accent: #f4b46a; --accent-active: #e09a4c; --danger: #ff6b6b; --card-bg: #101c3d; --on-color: #2a1a0c;
  --phase-growing: #0ca30c; --phase-ready: #3987e5; --phase-detraining: #fab219; --phase-atrophying: #d03b3b;
  --dumbbell-grey: #f6f3ee; --scroll-yellow: #d77f8e; --outline-grey: #f4b46a;
}
:root[data-theme="first_flight"] body { background: transparent; }
:root[data-theme="first_flight"] .sticky-save { background: transparent; }
:root[data-theme="first_flight"] .topnav { background: color-mix(in oklab, var(--bg) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-theme="first_flight"] :is(.card,.chart-card,.muscle-diagram,.settings-section,.profile-stat,.log-box,.tips-card) {
  background: rgba(14, 24, 56, .86) !important; box-shadow: 0 10px 26px -14px rgba(244, 180, 106, .45);
}
:root[data-theme="first_flight"] h1 { background: linear-gradient(90deg, #f6f3ee, #f4b46a 55%, #d77f8e); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="first_flight"] .nav-btn.active { box-shadow: 0 0 12px 2px rgba(244, 180, 106, .5); }
#ff-scene { position: fixed; inset: 0; z-index: -2; pointer-events: none; contain: layout paint; background: #0a1530; overflow: hidden; }
#ff-scene .ff-layer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
#ff-scene canvas { display: block; }
#ff-scene .ff-twinkle { will-change: opacity; animation: ff-twinkle 4s ease-in-out infinite alternate; }
@keyframes ff-twinkle { from { opacity: .25; } to { opacity: 1; } }
#ff-scene .ff-band { bottom: auto; overflow: hidden; opacity: 0; transition: opacity 1.2s; }
#ff-scene .ff-band.is-in { opacity: 1; }
#ff-scene .ff-strip { display: flex; will-change: transform; }
#ff-scene .ff-sunlight { background: radial-gradient(60% 22% at 62% 66%, rgba(255, 214, 160, .28), rgba(255, 214, 160, 0)); mix-blend-mode: screen; will-change: opacity; animation: ff-sun 9s ease-in-out infinite alternate; }
@keyframes ff-sun { from { opacity: .7; } to { opacity: 1; } }
#ff-scene .ff-flight { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
#ff-scene .ff-trail-wrap { position: absolute; left: 0; top: -1.5px; height: 3px; transform-origin: 0 50%; will-change: transform, opacity; }
#ff-scene .ff-trail { height: 100%; border-radius: 2px; transform-origin: 0 50%; transform: scaleX(0); will-change: transform;
  background: linear-gradient(90deg, rgba(246, 243, 238, 0), rgba(246, 243, 238, .55) 40%, rgba(246, 243, 238, .85)); }
#ff-scene .ff-jet { position: absolute; left: -9px; top: 0; transform: translate3d(0, -50%, 0); will-change: transform; overflow: visible; }
#ff-scene .ff-beacon { animation: ff-beacon 1.6s steps(1) infinite; }
@keyframes ff-beacon { 50% { opacity: 0; } }
:root.ff-scrolling #ff-scene :is(.ff-twinkle, .ff-sunlight, .ff-beacon) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { #ff-scene * { animation: none !important; transition: none !important; } #ff-scene .ff-band { opacity: 1; } }
.win-card.unlock-first_flight { border-color: #f4b46a; background: linear-gradient(180deg, rgba(244, 180, 106, .28), rgba(215, 127, 142, .12) 45%, transparent 75%), var(--card-bg); }
.win-card.unlock-first_flight .win-btn.primary { background: linear-gradient(90deg, #f4b46a, #d77f8e); color: #2a1a0c; }

/* Combined "N new themes unlocked" pop-up (templates/log.html) */
.win-card.unlock-multi { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%), var(--card-bg); text-align: left; }
.win-card.unlock-multi h2, .win-card.unlock-multi .win-trophy, .win-card.unlock-multi > .win-period { text-align: center; }
.unlock-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0 0.8rem; max-height: 46vh; overflow-y: auto; }
.unlock-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.5rem; border-radius: 10px; background: color-mix(in oklab, var(--accent) 8%, transparent); }
.unlock-row-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.unlock-row-text { flex: 1; min-width: 0; font-size: 0.85rem; line-height: 1.3; }
.unlock-premium { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--accent); }
.unlock-row .unlock-use { width: auto; margin: 0; padding: 0.35rem 0.7rem; font-size: 0.8rem; flex-shrink: 0; }

/* Zen Garden: a little cherry blossom on the selected tab */
:root.scene-live[data-theme="zen_garden"] .nav-btn { position: relative; }
:root.scene-live[data-theme="zen_garden"] .nav-btn.active::after {
  content: ""; position: absolute; right: -3px; top: -4px; width: 15px; height: 15px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23f7bccb' stroke='%23e48aa3' stroke-width='.8'%3E%3Cellipse cx='0' cy='-6' rx='4.2' ry='5.4'/%3E%3Cellipse cx='0' cy='-6' rx='4.2' ry='5.4' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-6' rx='4.2' ry='5.4' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-6' rx='4.2' ry='5.4' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-6' rx='4.2' ry='5.4' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='2.6' fill='%23e8728e'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: zg-tabbloom 6s ease-in-out infinite alternate;
}
@keyframes zg-tabbloom { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

/* Zen Garden calm moments (premium_scenes.js): fountain, butterfly, crane, koi, lantern */
.premium-scene-zen_garden .zg-tube { transform: rotate(-14deg); }
.premium-scene-zen_garden .zg-drip { animation: zg-drip 1.2s linear infinite; }
@keyframes zg-drip { from { transform: translateY(0); opacity: .9; } to { transform: translateY(14px); opacity: 0; } }
.premium-scene-zen_garden .zg-wing { animation: zg-flutter .45s ease-in-out infinite alternate; }
.premium-scene-zen_garden .resting .zg-wing { animation-duration: 1.6s; }
@keyframes zg-flutter { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
.premium-scene-zen_garden .zg-cranewing { animation: zg-craneflap 2.6s ease-in-out infinite alternate; }
@keyframes zg-craneflap { from { transform: scaleY(1); } to { transform: scaleY(-0.55); } }
.premium-scene-zen_garden .zg-firefly { filter: drop-shadow(0 0 3px #e6ff7a); }
.scene-lab .fl-row { flex-wrap: wrap; }
.scene-lab .fl-row button { flex: 1 1 30%; }

/* Aurora extras: lake mirror shimmer, cabin glow + chimney smoke, ridge glow */
.premium-scene-aurora #au-curtains { transform-box: fill-box; transform-origin: 50% 0%; }
.premium-scene-aurora .au-mirror { animation: au-mirror 6s ease-in-out infinite alternate; }
@keyframes au-mirror { from { opacity: .14; } to { opacity: .24; } }
.premium-scene-aurora .au-cabin-glow { animation: au-cabin 5s ease-in-out infinite alternate; }
@keyframes au-cabin { from { opacity: .35; } to { opacity: .6; } }
.premium-scene-aurora .au-smoke { animation: au-smoke 8s ease-out infinite; }
@keyframes au-smoke { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .5; } 100% { transform: translate(18px, -90px) scale(2.6); opacity: 0; } }
.premium-scene-aurora .au-ridge { animation: au-ridge 9s ease-in-out infinite alternate; }
@keyframes au-ridge { from { opacity: .2; } to { opacity: .45; } }

/* Overscroll peek in progress (overscroll_peek.js): drop backdrop blurs so
   moving cards don't re-blur the scene every frame. */
html.peeking main *, html.peeking .sticky-save { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Goals: individual-exercises day ("Bench Press, Squat +3 · Edit") sits on
   its own line under the day row, lined up with the time input. */
.goals-day { flex-wrap: wrap; }
.goals-day-items {
  flex: 0 0 calc(100% - 4.1rem); max-width: calc(100% - 4.1rem); min-width: 0;
  margin: -0.1rem 0 0.2rem 4.1rem; width: auto; padding: 0;
  white-space: normal; overflow-wrap: anywhere;
  background: none; border: none; color: var(--muted); font-size: 0.8rem; text-align: left; cursor: pointer;
}
.goals-day-items[hidden] { display: none; }
.goals-day-items-edit { color: var(--accent); font-weight: 600; margin-left: 0.25rem; }
.goals-draft-note {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.85rem; margin: 0 0 0.5rem; padding: 0.45rem 0.6rem; border-radius: 8px;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
}
.goals-draft-note[hidden] { display: none; }
.goals-draft-note button { width: auto; flex-shrink: 0; margin: 0; }

/* Plan mode of the Log screen (/goals/plan-day, static/plan_day.js). */
.plan-intro { font-size: 0.85rem; text-align: center; margin: 0 0 0.75rem; }
.plan-summary { margin-bottom: 0.75rem; }
.plan-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.plan-stat { display: flex; flex-direction: column; gap: 0.1rem; }
.plan-stat-label { font-size: 0.75rem; }
.plan-stat-value { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.plan-stat-value strong { font-size: 1.35rem; }
.plan-arrow { color: var(--muted); font-size: 0.85rem; }
.plan-stats-key { font-size: 0.72rem; margin: 0.25rem 0 0.5rem; }
.plan-context { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.plan-context li { font-size: 0.8rem; padding: 0.35rem 0.55rem; border-radius: 8px; background: color-mix(in oklab, var(--border) 45%, transparent); }
.plan-context li.plan-ctx-later { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.plan-date-fixed { padding: 0.55rem 0; font-weight: 600; }
.plan-recommend { margin: 0 0 0.75rem; }
.plan-recommend[hidden] { display: none; }
.plan-recommend-row { display: flex; gap: 0.4rem; align-items: center; }
.plan-recommend-row select { flex: 1 1 auto; min-width: 0; width: auto; }
.plan-recommend-row button { flex: 0 0 auto; width: auto; margin: 0; }
.plan-rec-status { font-size: 0.8rem; margin: 0.35rem 0 0; }

/* Settings > Appearance: previewing a locked theme (page-only). */
.theme-preview-banner {
  position: sticky; top: 0.5rem; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin: 0 0 0.75rem; padding: 0.6rem 0.75rem; border-radius: 10px;
  background: var(--card-bg); border: 1.5px solid var(--accent);
  box-shadow: 0 4px 14px -8px color-mix(in oklab, var(--fg) 50%, transparent);
}
.theme-preview-text { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.85rem; min-width: 0; }
.theme-preview-text strong { font-size: 0.95rem; }
.theme-preview-text span { color: var(--muted); }
.theme-preview-stop { flex-shrink: 0; width: auto; text-decoration: none; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; color: var(--fg); font-size: 0.85rem; }
.theme-preview-hint { font-size: 0.8rem; margin: 0.35rem 0 0; }
.theme-unlocked { margin-top: 0.6rem; font-size: 0.85rem; }
.theme-unlocked-title { margin: 0 0 0.25rem; font-weight: 600; }
.theme-unlocked ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.theme-unlocked-name { font-weight: 600; }
/* inferno_scene.js pauses the ambient motion while the page is scrolling. */
:root.inferno-scrolling #inferno-scene .is-pulse,
:root.inferno-scrolling :is(.log-box, .tips-card, .profile-identity-card)::after,
:root.inferno-scrolling .streak-flame { animation-play-state: paused !important; }


/* Plan mode: the little figure opens a detailed projection (log.html #plan-detail). */
.plan-bubble .progress-bubble-link::after {
  content: "\2922"; position: absolute; left: 6px; bottom: 4px; font-size: 0.8rem; line-height: 1;
  color: var(--muted); pointer-events: none;
}
.plan-bubble .progress-bubble-link { position: relative; }
.plan-detail {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, #000 50%, transparent);
}
.plan-detail[hidden] { display: none; }
.plan-detail-card { width: 100%; max-width: 30rem; max-height: 88vh; overflow-y: auto; margin: 0; animation: plan-detail-up 0.2s ease-out both; }
@keyframes plan-detail-up { from { transform: translateY(24px); opacity: 0; } }
.plan-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.plan-detail-sub { font-size: 0.8rem; }
.plan-detail-close { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; flex-shrink: 0; font-size: 1.2rem; line-height: 1; background: var(--card-bg); border: 1px solid var(--border); color: var(--fg); }
.plan-detail-views { max-width: 18rem; margin: 0 auto; }
.plan-detail .legend-headers .legend-col-last { white-space: nowrap; letter-spacing: 0; }
.plan-muscle-row.plan-up { background: color-mix(in oklab, var(--phase-growing) 14%, transparent); border-radius: 6px; }
.plan-muscle-row.plan-up .legend-name { font-weight: 700; }
/* Solid even on themes with see-through cards (Beach, Forest, Inferno...). */
.plan-detail .plan-detail-card { background: color-mix(in oklab, var(--card-bg) 92%, var(--bg)) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Exercise search (static/app.js openExerciseSearch): full-screen picker.
   Above the floating figure / lab buttons (z 1500). Solid surfaces even on
   the see-through photo themes. */
.ex-search {
  position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column;
  background: var(--bg); padding-top: env(safe-area-inset-top);
}
.ex-search[hidden] { display: none; }
:root.ex-search-open body { overflow: hidden; }
:root.ex-search-open, :root.ex-search-open body { overscroll-behavior: none; }
/* The header never scrolls vertically: a slightly diagonal swipe on the
   chips used to drag the whole page behind the sheet on iOS. */
.ex-search-top { touch-action: pan-x; }
.ex-search-top {
  flex: 0 0 auto; padding: 0.6rem 1rem 0.55rem; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--card-bg) 94%, var(--bg)); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ex-search-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.ex-search-title strong { font-size: 1.1rem; }
.ex-search .ex-search-cancel {
  width: auto; margin: 0; padding: 0.3rem 0.1rem; background: none; border: none; box-shadow: none;
  color: var(--accent); font-weight: 600; font-size: 1rem;
}
.ex-search-field {
  display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0 0.6rem; height: 2.75rem;
  border-radius: 12px; border: 1px solid var(--border); background: var(--bg);
}
.ex-search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.ex-search-icon { font-size: 0.95rem; opacity: 0.6; flex: 0 0 auto; }
.ex-search .ex-search-input {
  flex: 1 1 0; width: auto; min-width: 0; height: 100%; margin: 0; padding: 0; font-size: 1rem;
  border: none; background: transparent; box-shadow: none; outline: none; color: var(--fg); -webkit-appearance: none; appearance: none;
}
.ex-search .ex-search-input::-webkit-search-cancel-button { display: none; }
.ex-search .ex-search-clear {
  flex: 0 0 auto; width: 1.4rem; height: 1.4rem; margin: 0; padding: 0; border-radius: 50%; border: none;
  background: color-mix(in oklab, var(--fg) 25%, transparent); color: var(--bg); font-size: 1rem; line-height: 1;
}
.ex-search .ex-search-clear[hidden] { display: none; }
.ex-search-chips {
  display: flex; gap: 0.4rem; margin: 0.55rem -1rem 0; padding: 0 1rem 0.1rem; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; touch-action: pan-x;
}
.ex-search-chips::-webkit-scrollbar { display: none; }
.ex-search .ex-search-chip {
  flex: 0 0 auto; width: auto; margin: 0; padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg); box-shadow: none; white-space: nowrap;
}
.ex-search .ex-search-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-color); }
.ex-search-results {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 0.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
}
.ex-search-group {
  position: sticky; top: -0.25rem; z-index: 1; padding: 0.7rem 0 0.35rem; background: var(--bg);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.ex-search .ex-search-row {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; margin: 0 0 0.45rem; padding: 0.45rem 0.6rem 0.45rem 0.45rem;
  background: color-mix(in oklab, var(--card-bg) 94%, var(--bg)); border: 1px solid var(--border); border-radius: 14px; box-shadow: none;
  color: var(--fg); text-align: left; font-weight: 400; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ex-search .ex-search-row:active { background: color-mix(in oklab, var(--accent) 14%, var(--card-bg)); }
.ex-search .ex-search-row.is-current { border-color: var(--accent); }
.ex-search-thumb {
  flex: 0 0 auto; width: 4.5rem; height: 4.5rem; border-radius: 10px; overflow: hidden; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ex-search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-search-thumb.is-empty {
  font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em;
  background: color-mix(in oklab, var(--accent) 16%, var(--card-bg)); color: var(--accent);
}
.ex-search-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.ex-search-name { font-weight: 650; font-size: 1rem; line-height: 1.25; }
.ex-search-meta { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-search-last { font-size: 0.78rem; color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-search-tick { flex: 0 0 auto; color: var(--accent); font-weight: 800; font-size: 1.1rem; }
.ex-search-empty { margin: 1.2rem 0 0.5rem; text-align: center; color: var(--muted); }
.ex-search .ex-search-create { margin-top: 0.8rem; }

/* Magnifier beside each exercise dropdown -- opens the search screen in one tap. */
.block-header .block-search-btn {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; margin: 0; padding: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
  background: var(--card-bg); border: 1px solid var(--border); box-shadow: none;
}
@media (max-width: 480px) {
  .block-header .exercise-select { flex: 1 1 calc(100% - 5.3rem); }
}
body.block-dragging #blocks .block-header > .block-search-btn { display: none !important; }

.feed-post-time { display: block; font-size: 0.75rem; margin-top: 0.15rem; }

/* "Your idea made it into the app" pop-up (log.html #idea-overlay). */
.idea-list { text-align: left; margin: 0.4rem auto 0.8rem; padding-left: 1.2rem; max-width: 18rem; }
.idea-list li { margin: 0.2rem 0; font-weight: 600; }

/* Goals: Make a program card (templates/goals.html, static/goals_program.js). */
.goals-program { margin-top: 0; }
.goals-or {
  display: flex; align-items: center; gap: 0.9rem; margin: 1rem 0.5rem;
  font-size: 1.6rem; font-weight: 800; letter-spacing: 0.12em; color: var(--accent);
}
.goals-or::before, .goals-or::after { content: ""; flex: 1 1 auto; height: 2px; border-radius: 1px; background: color-mix(in oklab, var(--accent) 45%, transparent); }
.goals-program > summary::after { content: "Start \25BE"; }
.goals-program[open] > summary::after { content: "Collapse \25B4"; }
.prog-field { margin: 0.75rem 0; }
.prog-field-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.prog-field-row input[type="time"] { width: 7rem; max-width: 7rem; margin: 0; font-size: 0.9rem; -webkit-appearance: none; appearance: none; }
.prog-label { display: block; font-size: 0.85rem; font-weight: 600; }
.prog-field-row .prog-label { display: inline; }
.prog-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.prog-chip {
  width: auto; min-width: 2.4rem; margin: 0; padding: 0.35rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--fg); font-size: 0.85rem;
}
.prog-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-color); font-weight: 600; }
.prog-week-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 0.9rem; }
.goals-program .goals-dots-weekdays { margin-top: 0.3rem; }
.prog-count { font-size: 0.8rem; }
.prog-result { border-top: 1px solid var(--border); margin-top: 0.75rem; padding-top: 0.5rem; }
.prog-week { margin-bottom: 0.75rem; }
.prog-week-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem; margin: 0.5rem 0 0.4rem; }
.prog-growth { font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.prog-day {
  padding: 0.5rem 0.6rem; margin-bottom: 0.4rem; border-radius: 10px;
  background: color-mix(in oklab, var(--border) 35%, transparent);
}
.prog-day-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.prog-day-head::-webkit-details-marker { display: none; }
.prog-day-head::after { content: "\25BE"; color: var(--accent); margin-left: auto; flex-shrink: 0; }
.prog-day[open] > .prog-day-head::after { content: "\25B4"; }
.prog-day[open] > .prog-day-head { margin-bottom: 0.35rem; }
.prog-day-line { display: flex; flex-direction: column; min-width: 0; }
.prog-day-name { font-weight: 700; }
.prog-day-groups { font-size: 0.78rem; overflow-wrap: anywhere; }
.prog-ex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.prog-ex { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; min-width: 0; }
.prog-ex-name { min-width: 0; overflow-wrap: anywhere; }
.prog-ex-group { font-size: 0.75rem; margin-left: 0.35rem; }
.prog-ex-sets { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--muted); }
.prog-saved-note { margin-bottom: 0.75rem; }
.prog-own-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; margin: 0 0 0.4rem;
  padding: 0.5rem 0.6rem; border: none; border-radius: 10px; text-align: left; color: var(--fg); font-weight: 400;
  background: color-mix(in oklab, var(--border) 35%, transparent);
}
.prog-own-row.is-off { opacity: 0.55; }
.prog-own-text { display: flex; flex-direction: column; min-width: 0; }
.prog-own-day { font-size: 0.85rem; font-weight: 700; }
.prog-own-items { font-size: 0.8rem; overflow-wrap: anywhere; }
.prog-own-edit { flex-shrink: 0; color: var(--accent); font-size: 0.8rem; font-weight: 600; }
.prog-own-add { width: auto; margin: 0.2rem 0 0; }
/* Own-workout builder sheet: full screen like the exercise search (which opens above it). */
.prog-builder {
  position: fixed; inset: 0; z-index: 1900; display: flex; flex-direction: column;
  background: var(--bg); padding-top: env(safe-area-inset-top);
}
.prog-builder[hidden] { display: none; }
.prog-builder-top {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--card-bg) 94%, var(--bg));
}
.prog-builder-top strong { font-size: 1.1rem; }
.prog-builder-cancel { width: auto; margin: 0; padding: 0.3rem 0; border: none; background: none; color: var(--accent); font-weight: 600; }
.prog-builder-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.75rem 1rem 1rem; }
.prog-builder-week { font-size: 0.8rem; margin-top: 0.5rem; }
.prog-builder .goals-dots-weekdays { margin-top: 0.2rem; }
.prog-builder-ex-label { margin-top: 0.75rem; }
.prog-builder-ex { list-style: none; margin: 0.35rem 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.prog-builder-row {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.4rem 0.4rem 0.6rem; border-radius: 10px;
  background: color-mix(in oklab, var(--border) 35%, transparent);
}
.prog-builder-name { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.prog-builder-amount { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; font-size: 0.8rem; }
.prog-builder-amount input { width: 3.6rem; margin: 0; padding: 0.3rem 0.4rem; font-size: 0.9rem; text-align: center; }
.prog-builder-remove { width: 2rem; height: 2rem; margin: 0; padding: 0; flex-shrink: 0; border: none; background: none; color: var(--muted); font-size: 1.2rem; }
.prog-builder-add-ex { margin: 0 0 0.75rem; }
.prog-builder-fill { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; }
.prog-builder-fill input { width: auto; margin: 0.15rem 0 0; flex-shrink: 0; }
.prog-builder-actions {
  flex: 0 0 auto; display: flex; gap: 0.5rem; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: color-mix(in oklab, var(--card-bg) 94%, var(--bg));
}
.prog-builder-actions button { flex: 1 1 0; margin: 0; }
.prog-builder-actions button[hidden] { display: none; }
.prog-week-rows[hidden] { display: none; }

/* Goals: "Add to which calendar?" sheet (static/goals.js). */
.goals-cal-sheet {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.goals-cal-panel {
  width: 100%; max-width: 32rem; max-height: 80vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; background: var(--bg);
}
.goals-cal-panel > strong { font-size: 1.05rem; margin-bottom: 0.35rem; }
.goals-cal-option {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; margin: 0; padding: 0.6rem 0.7rem; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--fg); font-weight: 400;
}
.goals-cal-option.is-current { border-color: var(--accent); }
.goals-cal-dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.goals-cal-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.goals-cal-text > span:first-child { font-weight: 600; overflow-wrap: anywhere; }
.goals-cal-source { font-size: 0.78rem; }
.goals-cal-tick { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.goals-cal-cancel { margin: 0.35rem 0 0; }

/* Settings > Social: auto-post toggles heading. */
.settings-subhead { font-size: 1rem; margin: 1.2rem 0 0.4rem; }

/* History "Nice work!" pop-up: highlights vs full workout (static/highlights.js). */
.highlights-share { margin: 0.5rem 0; }
/* The share choice stands out on the last page: an accent panel with
   filled buttons and a soft glow (it's the one thing worth doing there). */
.highlights-share-row { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.65rem; border-radius: 14px;
  border: 1.5px solid var(--accent); background: color-mix(in oklab, var(--accent) 14%, var(--card-bg));
  animation: share-glow 2.4s ease-in-out 0.4s 3; }
.highlights-share-row[hidden] { display: none; }
.highlights-share-title { flex-basis: 100%; margin: 0 0 0.1rem; text-align: center; font-weight: 800; font-size: 0.95rem; color: var(--fg); }
.highlights-dialog .highlights-share-row button { flex: 1; margin: 0; background: var(--accent); border-color: var(--accent); color: var(--on-color); font-weight: 800; }
@keyframes share-glow { 50% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent), 0 8px 24px -8px var(--accent); } }
@media (prefers-reduced-motion: reduce) { .highlights-share-row { animation: none; } }
.highlights-share-preview .share-preview-post { max-height: 45vh; overflow-y: auto; }
.highlights-share-confirm { display: flex; gap: 0.5rem; }
.highlights-share-confirm button { flex: 1; margin: 0; }
.highlights-share-error { margin: 0.4rem 0 0; font-size: 0.85rem; }
.highlights-unshare { width: 100%; }
.share-choice { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.5rem 0; }
.share-choice-title { margin: 0; font-weight: 600; }
.share-choice-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; width: 100%; margin: 0;
  padding: 0.65rem 0.8rem; text-align: left; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card-bg); color: var(--fg); font-weight: 400;
}
.share-choice-option strong { font-weight: 700; }
.share-choice-option .muted { font-size: 0.82rem; }
.share-choice-option:hover, .share-choice-option:focus-visible { border-color: var(--accent); }
.share-choice-cancel { align-self: center; }

/* Feed: milestones, full workouts, comments (static/feed.js). */
.feed-milestone { display: flex; align-items: center; gap: 0.6rem; }
.feed-milestone-icon { font-size: 1.9rem; line-height: 1; }
.feed-workout { margin-top: 0.45rem; }
.feed-workout summary { cursor: pointer; font-weight: 600; }
.feed-workout-list { margin: 0.35rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.feed-workout-name { font-weight: 600; }
.do-workout-btn { margin: 0.6rem 0 0.2rem; }
.feed-comments { margin-top: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.feed-comment-list { list-style: none; margin: 0 0 0.45rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.feed-comment { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.92rem; }
.feed-comment-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.feed-comment-author { font-weight: 600; }
.feed-comment-reported { font-size: 0.82rem; }
.feed-comment-more { position: relative; flex-shrink: 0; }
.comment-menu-btn {
  margin: 0; padding: 0 0.4rem; min-height: 0; line-height: 1.4; background: none; border: none;
  color: var(--muted); font-size: 1.1rem; font-weight: 700;
}
.comment-menu {
  position: absolute; right: 0; top: 100%; z-index: 20; min-width: 7rem; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.comment-menu[hidden] { display: none; }
.feed-comment-main { flex: 1 1 auto; min-width: 0; }
.feed-comment-main .feed-comment-text { flex: none; }
.feed-comment-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.15rem; }
.feed-comments button.comment-reaction-chip {
  margin: 0; padding: 0.05rem 0.45rem; min-height: 0; width: auto; font-size: 0.78rem; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--fg); font-weight: 500;
}
.feed-comments button.comment-react-btn {
  margin: 0; padding: 0.05rem 0.2rem; min-height: 0; width: auto; font-size: 0.75rem; line-height: 1.5;
  background: none; border: none; color: var(--muted); font-weight: 600;
}
.comment-reaction-picker { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.comment-reaction-picker[hidden] { display: none; }
.feed-comments button.comment-reaction-pick {
  margin: 0; padding: 0.15rem 0.4rem; min-height: 0; width: auto; font-size: 1rem; line-height: 1.3;
  border: 1px solid var(--border); border-radius: 8px; background: none;
}
.feed-comments button.comment-reaction-chip.active-reaction,
.feed-comments button.comment-reaction-pick.active-reaction {
  background: color-mix(in oklab, var(--accent) 25%, var(--card-bg));
  border-color: var(--accent);
}
.comment-menu-item {
  margin: 0; padding: 0.5rem 0.75rem; text-align: left; background: none; border: none; border-radius: 0;
  color: var(--fg); font-weight: 500;
}
.comment-menu-item + .comment-menu-item { border-top: 1px solid var(--border); }
.feed-comment-form { display: flex; gap: 0.4rem; align-items: center; }
.feed-comment-form input { flex: 1 1 auto; min-width: 0; margin: 0; }
.feed-comment-form button { margin: 0; flex-shrink: 0; }
.feed-comment-error { margin: 0.3rem 0 0; font-size: 0.82rem; }
.shared-workout-note p { margin: 0 0 0.2rem; }

/* /moderation queue. */
.moderation-body { font-size: 1rem; margin: 0 0 0.35rem; overflow-wrap: anywhere; white-space: pre-line; }
.moderation-meta { font-size: 0.82rem; margin: 0 0 0.5rem; }
.moderation-item .friend-row-actions form { display: inline; }

/* Multi-page save celebration (static/celebrate.js):
   the highlights dialog goes full-screen and pages through the session's
   wins; share/template/notes/close only show on the last page. */
.celebrate-demo-btn { display: block; margin: -0.4rem auto 0.8rem; }
.highlights-dialog.celebrate-v2[open] {
  box-sizing: border-box; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; border-radius: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    var(--bg);
  animation: cel-fade 0.3s ease-out;
}
.highlights-dialog.celebrate-v2.on-final[open] { overflow-y: auto; }
@keyframes cel-fade { from { opacity: 0; } to { opacity: 1; } }
.highlights-dialog.celebrate-v2:not(.on-final) > :not(#highlights-content):not(#review-story-content):not(.story-content):not(.cel-confetti) { display: none !important; }
.celebrate-v2 #highlights-content, .celebrate-v2 #review-story-content, .celebrate-v2 .story-content { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
.celebrate-v2.on-final #highlights-content, .celebrate-v2.on-final #review-story-content, .celebrate-v2.on-final .story-content { flex: 0 0 auto; }
.cel-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; }

.cel-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cel-x { background: none; border: none; color: var(--muted); font-size: 1.3rem; padding: 4px 6px; margin: 0; width: auto; }
.cel-progress { flex: 1; display: flex; gap: 5px; }
.cel-seg { flex: 1; height: 7px; border-radius: 99px; background: color-mix(in oklab, var(--fg) 14%, transparent); overflow: hidden; }
.cel-seg-fill { height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
.cel-seg.done .cel-seg-fill { width: 100%; }

.cel-stage { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.celebrate-v2.on-final .cel-stage { flex: 0 0 auto; padding: 1.5rem 0 0.5rem; }
.cel-page { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; animation: cel-in 0.38s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.cel-page.out { position: absolute; inset: 0; justify-content: center; animation: cel-out 0.25s ease-in both; }
@keyframes cel-in { from { transform: translateX(40px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cel-out { to { transform: translateX(-40px) scale(0.96); opacity: 0; } }

.cel-big-emoji { font-size: 4.2rem; line-height: 1.1; animation: cel-emoji 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 0.05s both; }
@keyframes cel-emoji { from { transform: scale(0.2) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.15) rotate(6deg); opacity: 1; } to { transform: none; } }
.cel-kicker { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.cel-title { font-size: 1.7rem; font-weight: 900; margin: 0.2rem 0 0; line-height: 1.15; }
.cel-sub { color: var(--muted); font-size: 0.9rem; }
.cel-sub b { color: var(--fg); }
.cel-freeze-how { margin-top: 0.8rem; font-size: 0.82rem; max-width: 18rem; margin-left: auto; margin-right: auto; }
.cel-note { color: var(--fg); font-weight: 700; opacity: 0; transform: translateY(6px); transition: all 0.35s ease-out; margin-top: 0.4rem; }
.cel-note.in { opacity: 1; transform: none; }

.cel-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 22rem; margin-top: 1.2rem; }
.cel-stat { background: var(--card-bg); border: 2px solid var(--border); border-radius: 16px; padding: 0.8rem 0.3rem; opacity: 0; transform: translateY(14px) scale(0.9); transition: all 0.4s cubic-bezier(0.3, 1.5, 0.5, 1); }
.cel-stat.in { opacity: 1; transform: none; border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); }
.cel-stat-num { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cel-stat-label { font-size: 0.72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

.cel-hero-num { font-size: 3.4rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 0.4rem; }
.cel-hero-num.bump { animation: cel-bump 0.45s cubic-bezier(0.3, 1.8, 0.5, 1); color: var(--accent); }
@keyframes cel-bump { 40% { transform: scale(1.18); } to { transform: none; } }
.cel-hero-unit { font-size: 1.3rem; color: var(--muted); font-weight: 800; }
.cel-pill { display: inline-block; padding: 0.35rem 0.9rem; border-radius: 99px; background: var(--phase-growing); color: #fff; font-weight: 900; opacity: 0; transform: scale(0.4); margin-top: 0.4rem; }
.cel-pill.in { animation: cel-pop 0.45s cubic-bezier(0.3, 1.8, 0.5, 1) both; }
@keyframes cel-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

.cel-chart { width: 100%; max-width: 22rem; margin-top: 1rem; background: var(--card-bg); border: 2px solid var(--border); border-radius: 16px; padding: 0.6rem 0.6rem 0.4rem; box-sizing: border-box; }
.cel-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.cel-chart-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* line + area are driven per-frame by celebrate.js (in step with the count) */
.cel-chart-area { opacity: 0; }
.cel-chart-best { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.7; }
.cel-chart-dot { fill: var(--scroll-yellow, #fcd34d); stroke: var(--bg); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cel-chart-ring { fill: none; stroke: var(--scroll-yellow, #fcd34d); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cel-chart.done .cel-chart-dot { animation: cel-pop 0.4s cubic-bezier(0.3, 1.8, 0.5, 1) both; }
.cel-chart.done .cel-chart-ring { animation: cel-ring 1.4s ease-out 0.1s 2; }
@keyframes cel-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
.cel-chart-legend { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); margin-top: 0.3rem; }

.cel-bar { width: 100%; max-width: 20rem; height: 16px; border-radius: 99px; background: color-mix(in oklab, var(--fg) 12%, transparent); overflow: hidden; margin-top: 0.8rem; }
.cel-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in oklab, var(--phase-growing) 55%, #fff), var(--phase-growing)); box-shadow: 0 0 12px color-mix(in oklab, var(--phase-growing) 60%, transparent); }
.cel-chips-label { margin-top: 1rem; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.cel-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 0.4rem; max-width: 22rem; }
.cel-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0.4rem 0.75rem; border-radius: 99px; background: var(--card-bg); border: 2px solid var(--border); font-size: 0.85rem; font-weight: 700; opacity: 0; transform: scale(0.6); transition: all 0.35s cubic-bezier(0.3, 1.7, 0.5, 1); }
.cel-chip.in { opacity: 1; transform: none; }
.cel-chip b { color: var(--phase-growing); }
.cel-chip-dot { width: 12px; height: 12px; border-radius: 50%; }

.cel-ladder { position: relative; width: 100%; max-width: 20rem; margin-top: 1rem; }
.cel-rung { position: absolute; left: 0; right: 0; top: 0; height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 14px; background: var(--card-bg); border: 2px solid var(--border); font-weight: 700; transition: transform 0.7s cubic-bezier(0.6, 0, 0.4, 1.35); }
.cel-rung.me { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 18%, var(--card-bg)); z-index: 2; }
.cel-rung.me.moving { box-shadow: 0 10px 24px color-mix(in oklab, var(--accent) 45%, transparent); }
.cel-rung-rank { min-width: 2.4rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cel-rung.me .cel-rung-rank { color: var(--accent); }
.cel-rung-name { flex: 1; text-align: left; }
.cel-rung-arrow { color: var(--phase-growing); }

.cel-cards { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 22rem; margin-top: 0.8rem; }
.cel-card { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 0.75rem 0.9rem; border-radius: 14px; background: var(--card-bg); border: 2px solid var(--border); opacity: 0; transform: translateY(12px); transition: all 0.35s ease-out; }
.cel-card.in { opacity: 1; transform: none; }
.cel-card span { color: var(--muted); font-size: 0.85rem; }

.cel-continue { margin-top: 1rem; width: 100%; padding: 0.95rem; font-size: 1.05rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 16px; box-shadow: 0 4px 0 var(--accent-active); }
.cel-continue:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-active); }
.cel-continue.waiting { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .cel-page, .cel-page.out, .cel-big-emoji, .cel-hero-num.bump, .cel-pill.in, .cel-chart.done .cel-chart-ring { animation: none; }
  .cel-pill { opacity: 1; transform: none; }
  .cel-rung { transition: none; }
}

/* Leaderboard overtake: the passed row gets knocked back and dims. Uses the
   individual scale/rotate properties so it never fights the translateY hop. */
.cel-rung.passed { animation: cel-knock 0.38s ease-out; opacity: 0.6; }
@keyframes cel-knock { 25% { scale: 0.93; rotate: -2deg; } 60% { scale: 1.02; rotate: 1deg; } 100% { scale: 1; rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .cel-rung.passed { animation: none; } }
/* Leaderboard ladder: each row's average growth (what the board ranks by). */
.cel-ladder-head { width: 100%; max-width: 20rem; margin: 0.8rem 0 -0.6rem; padding-right: 2.6rem; box-sizing: border-box; text-align: right; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.cel-rung-score { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 2.2rem; text-align: right; }
.cel-rung:not(.me) .cel-rung-score { margin-right: 1.1rem; }
.cel-rung.me .cel-rung-score { color: var(--phase-growing); font-weight: 900; }

/* Settings > Appearance "Reduce Motion" (<html data-reduce-motion>, static/scene_still.js):
   scene animations are paused here from the first paint, then the script
   poses them on an "action shot". Theme card decorations take the same
   static look as prefers-reduced-motion. */
:root[data-reduce-motion="1"] :is(#forest-scene, #forest-particles, #beach-scene, #inferno-scene, #inferno-particles, .premium-scene, #ff-scene) *,
:root[data-reduce-motion="1"] body::before,
:root[data-reduce-motion="1"] body::after { animation-play-state: paused !important; }
:root[data-reduce-motion="1"][data-theme="inferno"] :is(.log-box, .tips-card, .profile-identity-card)::after,
:root[data-reduce-motion="1"][data-theme="diamond"] :is(.log-box, .profile-identity-card),
:root[data-reduce-motion="1"]:is([data-theme="sunlit_beach"], [data-theme="pine_forest"], [data-theme="campfire"], [data-theme="space"]) :is(.log-box, .tips-card) { animation: none !important; }

/* Streak group cards (templates/_group_card.html) -- Log page + Friends.
   Compact: one row of name / flame / a dot per member (filled = trained
   this week), then a status line with Nudge chips. */
/* Section wrapper styled like the Tips card (themed accent wash + chip). */
.gs-section {
  margin: 0.6rem 0 0.8rem; padding: 0.45rem 0.6rem 0.5rem; border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 70%),
    color-mix(in oklab, var(--accent) 5%, var(--card-bg));
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  box-shadow: 0 6px 18px -12px color-mix(in oklab, var(--accent) 70%, transparent);
}
.gs-summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; font-size: 0.78rem; }
.gs-summary::-webkit-details-marker { display: none; }
.gs-summary::after { content: "▾"; color: var(--muted); font-size: 0.9rem; transition: transform 0.2s; }
.gs-section:not([open]) .gs-summary::after { transform: rotate(-90deg); }
.gs-summary-title {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: 999px; color: var(--fg);
  background: color-mix(in oklab, var(--accent) 22%, transparent);
}
.gs-summary-info { margin-left: auto; font-weight: 600; color: var(--muted); }
.gs-summary-info.my-turn { color: var(--accent); font-weight: 800; }
.gs-list { margin-top: 0.4rem; }
/* Inside the section the group cards sit a step back from it. */
.gs-section .gs-card { background: color-mix(in oklab, var(--card-bg) 75%, transparent); box-shadow: none; }
.gs-section .gs-card:last-child { margin-bottom: 0; }
.gs-card { padding: 0.45rem 0.65rem; margin-bottom: 0.4rem; }
.gs-card.gs-my-turn { border-color: var(--accent); }
.gs-card.gs-kept { border-color: var(--phase-growing); }
.gs-head { display: flex; align-items: center; gap: 0.45rem; }
.gs-name { font-weight: 800; font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-flame { flex-shrink: 0; font-weight: 800; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.gs-flame-new { filter: grayscale(1); opacity: 0.55; }
.gs-members { display: flex; gap: 0.2rem; margin-left: auto; flex-shrink: 0; }
.gs-av { width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.65rem; font-weight: 800; border: 1.5px dashed var(--muted); color: var(--muted); }
.gs-av.done { border: 1.5px solid var(--phase-growing); background: var(--phase-growing); color: #fff; }
.gs-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted); }
.gs-status strong { color: var(--accent); }
.gs-kept .gs-status { color: var(--phase-growing); font-weight: 700; }
.gs-nudge { width: auto; margin: 0; padding: 0.05rem 0.45rem; font-size: 0.68rem; font-weight: 700; border-radius: 99px;
  background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.gs-nudge.sent, .gs-nudge:disabled { border-color: var(--border); color: var(--muted); }
.gs-leave { width: auto; margin: 0 0 0 auto; padding: 0; background: none; border: none; color: var(--muted); font-size: 0.7rem; text-decoration: underline; }

/* Save celebration: streak group page (celebrate.js groupPage). */
.cel-crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin: 1rem 0 0.4rem; }
.cel-mate { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.cel-mate-av { position: relative; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.3rem; font-weight: 900; border: 3px dashed var(--border); color: var(--muted); transition: all 0.3s ease-out; }
.cel-mate-tick { position: absolute; right: -0.3rem; bottom: -0.3rem; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 900; background: var(--card-bg); color: var(--phase-growing);
  border: 2px solid var(--phase-growing); opacity: 0; transform: scale(0.3); transition: all 0.3s cubic-bezier(0.3, 1.8, 0.5, 1); }
.cel-mate.done .cel-mate-av { border: 3px solid var(--phase-growing); background: var(--phase-growing); color: #fff; }
.cel-mate.done .cel-mate-tick { opacity: 1; transform: none; }
.cel-mate.pop .cel-mate-av { animation: cel-bump 0.45s cubic-bezier(0.3, 1.8, 0.5, 1); }
.cel-mate-name { font-size: 0.8rem; font-weight: 700; }
.cel-nudges { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 18rem; margin-top: 0.8rem; }
.cel-nudge { opacity: 0; transform: translateY(8px); transition: all 0.3s ease-out; }
.cel-nudge.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cel-mate.pop .cel-mate-av { animation: none; }
}

/* Streak group card extras: link to the group page, banked freezes, and
   this week's challenge bar. */
.gs-name { color: var(--fg); text-decoration: none; }
.gs-chev { color: var(--muted); font-weight: 700; }
.gs-freeze { flex-shrink: 0; font-size: 0.78rem; font-weight: 800; color: #5ab4f0; }
.gs-challenge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.45rem;
  margin-top: 0.3rem; font-size: 0.72rem; color: var(--fg); text-decoration: none; }
.gs-challenge-label { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 13rem; }
.gs-challenge-bar { height: 6px; border-radius: 99px; background: color-mix(in oklab, var(--muted) 25%, transparent); overflow: hidden; }
.gs-challenge-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.gs-challenge.done .gs-challenge-bar span { background: #5ab4f0; }
.gs-challenge-count { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.gs-challenge.done .gs-challenge-count { color: #5ab4f0; }

/* Streak group page (templates/streak_group.html). */
.sg-back { display: inline-block; margin: 0.3rem 0 0.4rem; }
.sg-hero { text-align: center; padding: 0.6rem 0 0.2rem; }
.sg-title { margin: 0 0 0.6rem; }
.sg-stats { display: flex; justify-content: center; gap: 2.2rem; }
.sg-stat { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.sg-stat-num { font-size: 1.9rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sg-stat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.sg-dim { filter: grayscale(1); opacity: 0.55; }
.sg-freeze { filter: grayscale(1); opacity: 0.3; }
.sg-freeze.on { filter: none; opacity: 1; }
.sg-weeks { display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.9rem; flex-wrap: wrap; }
.sg-week { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; width: 2.3rem; }
.sg-week-dot { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.9rem;
  border: 1.5px solid var(--border); color: var(--muted); }
.sg-week-kept .sg-week-dot { border-color: color-mix(in oklab, #ff8a00 60%, var(--border)); background: color-mix(in oklab, #ff8a00 14%, transparent); }
.sg-week-frozen .sg-week-dot { border-color: #5ab4f0; background: color-mix(in oklab, #5ab4f0 15%, transparent); }
.sg-week-missed .sg-week-dot { font-weight: 900; }
.sg-week-current .sg-week-dot { border-style: dashed; border-color: var(--accent); }
.sg-week-label { font-size: 0.6rem; color: var(--muted); white-space: nowrap; }
.sg-h { font-size: 0.95rem; margin: 1.1rem 0 0.45rem; }
.sg-roster { padding: 0.5rem 0.75rem; }
.sg-member { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.sg-member:last-of-type { border-bottom: none; }
.sg-member .gs-av { width: 1.9rem; height: 1.9rem; font-size: 0.85rem; }
.sg-member-name { font-weight: 700; flex: 1; }
/* Crew levels + trophy shelf (group_streaks.CREW_LEVELS / TROPHIES) */
/* Crew frames by level (group_streaks.CREW_LEVELS) -- the reward-theme
   unlock colours: bronze, silver, gold, diamond. */
.crew-frame { --crew: transparent; border-color: var(--crew) !important; box-shadow: 0 0 0 1px var(--crew), 0 0 16px -6px var(--crew); }
.crew-frame-1, .crew-ring-1, .crew-chip-1 { --crew: #cd7f32; }
.crew-frame-2, .crew-ring-2, .crew-chip-2 { --crew: #aab4be; }
.crew-frame-3, .crew-ring-3, .crew-chip-3 { --crew: #e8b34a; }
.crew-frame-4, .crew-ring-4, .crew-chip-4 { --crew: #6fd6ff; }
.crew-frame-4 { box-shadow: 0 0 0 1px var(--crew), 0 0 22px -4px var(--crew); }
.sg-crew-chip[class*="crew-chip-"]:not(.crew-chip-0) { display: inline-block; padding: 0.15rem 0.7rem; border-radius: 999px; border: 1.5px solid var(--crew); }
.crew-card-badge[class*="crew-ring-"]:not(.crew-ring-0) { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  border: 2.5px solid var(--crew); box-shadow: 0 0 10px -3px var(--crew); font-size: 1.3rem; }
.av-crew-pick { margin-top: 0.6rem; }
.feed-crew-av { display: inline-grid; place-items: center; font-size: 1.2rem; vertical-align: middle; margin-right: 0.35rem; }
.av-crew-chip { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0.35rem 0.35rem 0; padding: 0.2rem 0.6rem 0.2rem 0.25rem;
  border-radius: 999px; border: 1.5px solid var(--border); background: none; color: inherit; font-size: 0.8rem; font-weight: 700; }
.av-crew-chip.on { border-color: var(--accent); }
.av-crew-ini { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); color: var(--on-color); font-size: 0.72rem; font-weight: 900; }
/* A friend already in MAX_GROUPS_PER_USER groups can't be invited. */
.sg-add-row.sg-full { opacity: 0.5; }
/* Group confirm screen (friends.html #group-confirm) */
.gc-overlay[hidden] { display: none; }
.gc-card { border-color: var(--accent); background: var(--card-bg); text-align: left; }
.gc-card h2 { text-align: center; margin: 0.2rem 0 0.8rem; }
.gc-card .av-intro-new { display: table; margin: 0.2rem auto 0 !important; }
.gc-card .win-btn.primary { background: var(--accent); color: var(--on-color); }
.gc-members { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.9rem; margin-bottom: 0.9rem; }
.gc-member { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-size: 0.78rem; font-weight: 700; }
.gc-member .gs-av { width: 2.4rem; height: 2.4rem; font-size: 0.9rem; }
.gc-rules { margin-bottom: 0.9rem; }
.sg-cap-note { font-size: 0.85rem; }
.sg-crew-chip { margin: 0.1rem 0 0.4rem; font-weight: 800; font-size: 0.9rem; }
.gs-crew { font-size: 0.9em; }
.sg-crew-levels { display: flex; justify-content: space-between; margin-bottom: 0.6rem; }
.sg-crew-step { font-size: 1.4rem; filter: grayscale(1); opacity: 0.35; transition: transform 0.2s; }
.sg-crew-step.on { filter: none; opacity: 1; }
.sg-crew-step.now { transform: scale(1.3); }
.sg-crew-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.9rem; }
.sg-crew .sg-bar { margin-top: 0.35rem; height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.sg-crew .sg-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.sg-crew-next { margin: 0.45rem 0 0; font-size: 0.8rem; }
.sg-stretch-goal { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.sg-trophies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.sg-trophy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; padding: 0.5rem 0.25rem;
  border-radius: 12px; border: 1px solid var(--border); }
.sg-trophy-icon { font-size: 1.6rem; filter: grayscale(1); opacity: 0.35; }
.sg-trophy-name { font-size: 0.74rem; font-weight: 800; color: var(--muted); }
.sg-trophy-how { font-size: 0.64rem; color: var(--muted); line-height: 1.25; }
.sg-trophy.on { border-color: #e8b34a; background: rgba(232, 179, 74, 0.1); }
.sg-trophy.on .sg-trophy-icon { filter: none; opacity: 1; }
.sg-trophy.on .sg-trophy-name { color: var(--fg); }
/* Profile: a user's crews */
.crew-card { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.1rem; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.profile-section-label + .crew-card { border-top: none; }
.crew-card-badge { font-size: 1.7rem; line-height: 1; }
.crew-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.85rem; }
.crew-card-text .muted { font-size: 0.74rem; }
.crew-card-members { display: flex; }
.crew-card-members .gs-av { margin-left: -0.3rem; }
/* Avatar + name open that member's profile (the row's Nudge stays outside the link). */
.sg-member-link { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
a.gs-av { text-decoration: none; }
a.sg-contrib-who { color: inherit; text-decoration: none; }
.sg-member-state { font-size: 0.78rem; color: var(--muted); }
.sg-member.done .sg-member-state { color: var(--phase-growing); font-weight: 700; }
.sg-roster-status { margin-top: 0.4rem; }
.sg-challenge-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.sg-challenge-label { font-weight: 800; }
.sg-challenge-count { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-bar { height: 10px; border-radius: 99px; margin: 0.5rem 0; background: color-mix(in oklab, var(--muted) 25%, transparent); overflow: hidden; }
.sg-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.6s ease-out; }
.sg-challenge.done { border-color: #5ab4f0; }
.sg-challenge.done .sg-bar span { background: #5ab4f0; }
.sg-contrib { list-style: none; margin: 0.2rem 0 0.4rem; padding: 0; font-size: 0.82rem; }
.sg-contrib li { display: flex; justify-content: space-between; padding: 0.15rem 0; }
.sg-contrib b { font-variant-numeric: tabular-nums; }
.sg-challenge-foot { margin: 0.3rem 0 0; font-size: 0.82rem; font-weight: 600; }
.sg-how { margin: 0.35rem 0 0; font-size: 0.72rem; }
.sg-past { padding: 0.4rem 0.75rem; }
.sg-past-row { display: flex; justify-content: space-between; padding: 0.25rem 0; font-size: 0.82rem; }
.sg-members-note { margin: 1.2rem 0 0.3rem; font-size: 0.78rem; text-align: center; }
.sg-leave { display: block; margin: 0 auto 1.5rem; }

/* Save celebration: group challenge box on the group page. */
.cel-gch { width: 100%; max-width: 20rem; margin-top: 0.9rem; padding: 0.6rem 0.8rem; border-radius: 14px;
  background: var(--card-bg); border: 2px solid var(--border); text-align: left; opacity: 0; transform: translateY(8px); transition: all 0.35s ease-out; }
.cel-gch.in { opacity: 1; transform: none; }
.cel-gch.complete { border-color: #5ab4f0; }
.cel-gch.complete .cel-bar-fill { background: #5ab4f0; }
.cel-gch-top { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; }
.cel-gch-num { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.cel-gch-num b { color: var(--fg); }
.cel-gch-bar { margin-top: 0.4rem; height: 10px; max-width: none; }
.cel-gch-done { margin-top: 0.45rem; font-weight: 900; color: #5ab4f0; font-size: 0.85rem; }

/* Streak group page: Manage group button + the manage page. */
.sg-manage-btn { display: block; width: 100%; box-sizing: border-box; margin: 1.3rem 0 1.5rem; padding: 0.7rem;
  text-align: center; text-decoration: none; font-weight: 700; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--fg); }
.sg-manage-title { text-align: center; }
.sg-add { padding: 0.6rem 0.75rem; }
.sg-add-note { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--fg); }
.sg-add-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.sg-add-row:last-of-type { border-bottom: none; }
.sg-add-row input { width: auto; margin: 0; }
.sg-add-row .gs-av { width: 1.9rem; height: 1.9rem; font-size: 0.85rem; }
.sg-add-btn { margin-top: 0.6rem; }
.sg-leave-card { padding: 0.6rem 0.75rem; margin-bottom: 1.5rem; }
.sg-leave-btn { width: 100%; margin: 0; padding: 0.6rem; font-weight: 700; border-radius: 10px;
  background: transparent; border: 1px solid #e5484d; color: #e5484d; }
.sg-leave-btn[data-armed] { background: #e5484d; color: #fff; }

/* Avatar Lab (templates/avatar_lab.html, static/avatar.js) -- prototype. */
.av-intro { text-align: center; font-size: 0.82rem; margin: -0.3rem 0 0.8rem; }
.av-stage { display: flex; flex-direction: column; align-items: center; padding: 0.8rem;
  background: radial-gradient(ellipse at 50% 85%, color-mix(in oklab, var(--accent) 22%, var(--card-bg)), var(--card-bg) 70%); }
.av-figure { width: 190px; max-width: 60vw; border-radius: 50%; box-shadow: 0 6px 22px -10px rgba(0,0,0,0.6); }
.av-figure .avatar-svg { width: 100%; display: block; }
@keyframes av-bob { 50% { transform: scaleY(1.012) translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .av-figure .avatar-svg { animation: none; } }
.av-stage-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 0.5rem; }
.av-stage-btns button { width: auto; margin: 0; }
.av-h { font-size: 0.95rem; margin: 1rem 0 0.4rem; }
.av-h-note { font-size: 0.72rem; font-weight: 500; }
.av-panel { padding: 0.55rem 0.7rem; }
.av-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.av-gear-row { align-items: flex-start; border-bottom: 1px solid var(--border); padding: 0.45rem 0; }
.av-gear-row:last-child { border-bottom: none; }
.av-label { flex-shrink: 0; width: 5.6rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.av-chips, .av-swatches { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.av-chip { width: auto; margin: 0; padding: 0.3rem 0.6rem; border-radius: 10px; font-size: 0.78rem; font-weight: 700;
  background: transparent; border: 1.5px solid var(--border); color: var(--fg); display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.av-chip small { font-size: 0.62rem; font-weight: 600; color: var(--muted); }
.av-chip.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, transparent); }
.av-chip.r-rare { box-shadow: inset 3px 0 0 #3d7bfd; }
.av-chip.r-epic { box-shadow: inset 3px 0 0 #8b5cf6; }
.av-chip.r-legendary { box-shadow: inset 3px 0 0 #f5c33b; }
.av-swatch { width: 1.7rem; height: 1.7rem; margin: 0; padding: 0; border-radius: 50%; border: 2px solid var(--border); }
.av-swatch.on { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.av-slider input { flex: 1; margin: 0; }
.av-slider b { width: 1.8rem; text-align: right; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.av-mock { margin: 0.3rem 0 0.8rem; }
.av-head { width: 1.7rem; height: 1.7rem; border-radius: 50%; overflow: hidden; border: 1.5px dashed var(--muted); display: block; opacity: 0.55; }
.av-head.done { opacity: 1; }
.av-head.done { border: 2px solid var(--phase-growing); }
.av-head .avatar-svg { width: 100%; height: 100%; display: block; }
.av-lineup { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.av-lineup .avatar-svg { width: 100%; display: block; }
p.av-label { width: auto; margin: 0 0 0.3rem; }

/* Avatar on the profile (prototype) + Avatar Lab save controls. */
.profile-figure { width: 112px; margin: 0 auto 0.4rem; border-radius: 50%; box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--accent); }
.profile-figure .avatar-svg { width: 100%; display: block; }
.profile-avatar-edit { display: inline-block; width: auto; margin-top: 0.5rem; padding: 0.35rem 0.9rem; text-decoration: none; font-size: 0.8rem; font-weight: 700; border-radius: 99px; border: 1.5px solid var(--accent); color: var(--accent); }
.av-auto { display: flex; align-items: center; gap: 0.45rem; margin: 0.7rem 0 0.2rem; font-size: 0.78rem; color: var(--fg); }
.av-auto input { width: auto; margin: 0; }
.av-save { margin-top: 0.5rem; }
.av-save-note { margin: 0.4rem 0 0; font-size: 0.8rem; text-align: center; }

/* Avatar Lab v2: sticky preview, picture tiles, gear inventory. */
.av-sticky { position: sticky; z-index: 20; display: flex; align-items: center; gap: 0.9rem; margin: 0 -1rem 0.6rem;
  padding: 0.6rem 1rem; background: var(--bg); border-bottom: 1px solid var(--border); }
.av-sticky .av-figure { width: 104px; flex-shrink: 0; border-radius: 50%; box-shadow: 0 4px 16px -8px rgba(0,0,0,0.6); }
.av-sticky-side { flex: 1; min-width: 0; }
.av-sticky-title { margin: 0 0 0.3rem; font-weight: 800; }
.av-trying { margin: 0 0 0.35rem; font-size: 0.72rem; color: var(--accent); font-weight: 700; }
.av-sticky .av-save { margin: 0; padding: 0.55rem; }
.av-sub { margin: 0.5rem 0 0.35rem; font-size: 0.78rem; font-weight: 800; color: var(--muted); }
.av-slot-head { display: flex; justify-content: space-between; margin-top: 0.1rem; }
.av-slot-head .muted { font-weight: 600; }
.av-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.45rem; margin-bottom: 0.4rem; }
.av-tile { width: auto; margin: 0; padding: 0.3rem 0.2rem 0.35rem; display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  background: transparent; border: 1.5px solid var(--border); border-radius: 12px; color: var(--fg); }
.av-tile-pic { width: 3.6rem; height: 3.6rem; border-radius: 50%; overflow: hidden; display: block; }
.av-tile-pic .avatar-svg { width: 100%; height: 100%; display: block; }
.av-tile-name { font-size: 0.68rem; font-weight: 700; }
.av-tile.on, .av-item.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); box-shadow: 0 0 0 1px var(--accent); }
.av-toggle { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.4rem; font-size: 0.78rem; }
.av-toggle input { width: auto; margin: 0; }
.av-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.45rem; }
.av-item { position: relative; width: auto; margin: 0; padding: 0.35rem 0.3rem 0.45rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  background: color-mix(in oklab, var(--fg) 4%, transparent); border: 1.5px solid var(--border); border-radius: 12px; color: var(--fg); text-align: center; }
.av-item.r-rare { border-bottom: 3px solid #3d7bfd; }
.av-item.r-epic { border-bottom: 3px solid #8b5cf6; }
.av-item.r-legendary { border-bottom: 3px solid #f5c33b; }
.av-item-pic { width: 100%; height: 3.4rem; display: flex; align-items: center; justify-content: center; }
.av-item-pic .avatar-icon { max-width: 100%; max-height: 100%; }
.av-none { font-size: 1.8rem; color: var(--muted); }
.av-item-name { font-size: 0.7rem; font-weight: 800; line-height: 1.15; }
.av-item-earn { font-size: 0.58rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.av-earned { color: var(--phase-growing); }
.av-item.locked .av-item-pic { filter: grayscale(1); opacity: 0.4; }
.av-lock { position: absolute; top: 0.25rem; right: 0.3rem; font-size: 0.75rem; }
.av-prog { width: 80%; height: 4px; border-radius: 99px; background: color-mix(in oklab, var(--muted) 30%, transparent); overflow: hidden; margin: 0.1rem 0; }
.av-prog span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* Avatars around the app (prototype, static/avatar_hydrate.js). */
.has-avatar .avatar-svg { width: 100%; height: 100%; display: block; }
.nav-account-avatar { padding: 0; }
.nav-avatar { display: block; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.gs-av.has-avatar { overflow: hidden; padding: 0; }
.sg-member .gs-av.has-avatar, .sg-add-row .gs-av.has-avatar { width: 2.2rem; height: 2.2rem; }
.mini-av { display: none; }
.mini-av.has-avatar { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; overflow: hidden; vertical-align: middle; margin-right: 0.35rem; flex-shrink: 0; }
.feed-comment-text .mini-av.has-avatar { width: 1.15rem; height: 1.15rem; margin-right: 0.25rem; }
.cel-mate-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: none; }
.cel-mate-face.has-avatar { display: block; }
.cel-mate-av:has(.cel-mate-face.has-avatar) { color: transparent; }
.cel-rung-av.has-avatar { width: 1.8rem; height: 1.8rem; }

/* "Introducing avatars" pop-up (templates/log.html). */
.av-intro-card { border-color: var(--accent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 24%, transparent) 0%, transparent 60%), var(--card-bg);
  box-shadow: 0 18px 40px -16px color-mix(in oklab, var(--accent) 80%, transparent); }
.av-intro-card .win-btn.primary { background: var(--accent); color: var(--on-color); }
.av-intro-row { display: flex; justify-content: center; margin: -0.2rem 0 0.4rem; }
.av-intro-row span { width: 4.6rem; height: 4.6rem; border-radius: 50%; overflow: hidden; margin: 0 -0.45rem;
  box-shadow: 0 0 0 3px var(--card-bg); animation: av-intro-pop 0.45s cubic-bezier(.2, 1.5, .4, 1) both; }
.av-intro-row span:nth-child(2) { width: 5.4rem; height: 5.4rem; z-index: 1; margin-top: -0.4rem; animation-delay: 0.08s; }
.av-intro-row span:nth-child(3) { animation-delay: 0.16s; }
.av-intro-row .avatar-svg { width: 100%; height: 100%; display: block; }
@keyframes av-intro-pop { from { opacity: 0; transform: scale(0.5) translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .av-intro-row span { animation: none; } }
.av-intro-new { display: inline-block; margin: 0.2rem 0 0 !important; padding: 0.1rem 0.55rem; border-radius: 99px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: var(--accent); color: var(--on-color); }
.av-intro-list { list-style: none; padding: 0; margin: 0 0 0.9rem; text-align: left; font-size: 0.86rem; }
.av-intro-list li { display: flex; gap: 0.55rem; margin: 0.45rem 0; line-height: 1.35; }

/* "Introducing group streaks" pop-up (templates/log.html). */
.gi-hero { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 0.3rem; }
.gi-row { display: flex; gap: 0.35rem; justify-content: center; }
.gi-mate { position: relative; width: 3.3rem; height: 3.3rem; border-radius: 50%; border: 2.5px dashed var(--muted);
  animation: av-intro-pop 0.45s cubic-bezier(.2, 1.5, .4, 1) both; }
.gi-mate:nth-child(2) { animation-delay: 0.07s; } .gi-mate:nth-child(3) { animation-delay: 0.14s; } .gi-mate:nth-child(4) { animation-delay: 0.21s; }
.gi-mate.done { border: 2.5px solid var(--phase-growing); }
.gi-mate:not(.done) .gi-face { opacity: 0.5; filter: grayscale(0.6); }
.gi-face { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.gi-face .avatar-svg { width: 100%; height: 100%; display: block; }
.gi-tick { position: absolute; right: -0.25rem; bottom: -0.25rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.65rem; font-weight: 900; background: var(--card-bg); color: var(--phase-growing);
  border: 2px solid var(--phase-growing); }
.gi-flame { margin-top: 0.45rem; padding: 0.15rem 0.7rem; border-radius: 99px; font-weight: 900; font-size: 0.95rem;
  background: color-mix(in oklab, #ff8a00 22%, var(--card-bg)); border: 1.5px solid color-mix(in oklab, #ff8a00 60%, transparent); }
.gi-card .av-intro-list li { margin: 0.38rem 0; font-size: 0.83rem; }
@media (prefers-reduced-motion: reduce) { .gi-mate { animation: none; } }

/* Friends: "Start a streak group" form, in a card. */
.create-group-card { padding: 0; overflow: hidden; }
.create-group-summary { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.85rem;
  font-weight: 800; cursor: pointer; list-style: none; }
.create-group-summary::-webkit-details-marker { display: none; }
.create-group-chev { color: var(--muted); transition: transform 0.2s; }
.create-group-card:not([open]) .create-group-chev { transform: rotate(-90deg); }
.create-group-body { padding: 0 0.85rem 0.85rem; border-top: 1px solid var(--border); }
.create-group-body .field { margin-top: 0.7rem; }
.create-group-label { margin: 0.6rem 0 0.2rem; font-size: 0.85rem; font-weight: 700; }
.create-group-btn { margin-top: 0.7rem; }

/* Challenge bars, stacked: one coloured slice per member. */
.sg-bar-stack, .gs-challenge-bar { display: flex; }
.sg-bar-stack span, .gs-challenge-bar span { flex-shrink: 0; border-radius: 0; box-shadow: inset -2px 0 0 var(--card-bg); }
.sg-bar-stack span:last-child, .gs-challenge-bar span:last-child { box-shadow: none; }
.sg-challenge.done .sg-bar span, .gs-challenge.done .gs-challenge-bar span { filter: saturate(1.15); }
.sg-bar-stack { height: 14px; }
.sg-contrib-who { display: inline-flex; align-items: center; gap: 0.4rem; }
.sg-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex-shrink: 0; }
.sg-contrib .mini-av.has-avatar { width: 1.3rem; height: 1.3rem; margin-right: 0; }
.sg-contrib-share { display: inline-block; min-width: 2.6rem; text-align: right; font-weight: 600; color: var(--muted); font-size: 0.75rem; }

/* Over a challenge's target: the bar is the team total, with a marker where
   the target was. */
.sg-bar-wrap { position: relative; margin: 0.5rem 0 1.1rem; }
.sg-bar-wrap .sg-bar { margin: 0; }
.sg-target { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px solid var(--fg); }
.sg-target span { position: absolute; top: 100%; left: 0; transform: translateX(-50%); margin-top: 2px;
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.sg-over { margin-left: 0.25rem; padding: 0.05rem 0.4rem; border-radius: 99px; font-size: 0.72rem; background: #5ab4f0; color: #0b2233; }
.gs-challenge-bar { position: relative; }
.gs-target { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--fg); transform: translateX(-1px); }

/* Member colours (group_streaks.member_color) as avatar rings: solid once
   they've trained this week, dashed + faded until then. */
.gs-av[style*="--mc"] { border: 2px dashed var(--mc); color: var(--mc); opacity: 0.6; background: transparent; }
.gs-av[style*="--mc"].done { border: 2px solid var(--mc); background: var(--mc); color: #fff; opacity: 1; }
.gs-av[style*="--mc"].has-avatar { background: transparent; box-shadow: 0 0 0 1px var(--card-bg) inset; }
.sg-cav { width: 1.6rem !important; height: 1.6rem !important; font-size: 0.72rem; border-style: solid !important; opacity: 1 !important;
  background: var(--mc) !important; color: #fff !important; }
.sg-cav.has-avatar { background: transparent !important; }
.gs-members .gs-av[style*="--mc"] { border-width: 2px; }

/* Celebration leaderboard: the 2 people still ahead, and who's next. */
.cel-rung.ahead { opacity: 0.6; border-style: dashed; }
.cel-chase { margin-top: 0.35rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); opacity: 0; transform: translateY(6px); transition: all 0.35s ease-out; }
.cel-chase.in { opacity: 1; transform: none; }

.av-slot-colors { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.av-slot-colors .av-swatches { gap: 0.3rem; }
.av-slot-colors .av-swatch { width: 1.5rem; height: 1.5rem; }

/* Avatar editor: hexagon colour picker. */
.hexpick { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; }
.hexpick-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; }
.hexpick-presets .av-swatch { width: 1.55rem; height: 1.55rem; }
.hexpick-svg { width: 100%; max-width: 15rem; display: block; }
.hexpick-svg polygon { stroke: var(--card-bg); stroke-width: 1.4; cursor: pointer; transition: transform 0.12s; transform-box: fill-box; transform-origin: center; }
.hexpick-svg polygon:hover { transform: scale(1.12); }
.hexpick-svg polygon.on { stroke: var(--fg); stroke-width: 2.6; transform: scale(1.18); paint-order: stroke; }
.av-slot-colors { margin-top: 0.5rem; padding-top: 0.2rem; border-top: 1px solid var(--border); }

/* Colour wheel pop-up (avatar editor). */
.hexpick-more { position: relative; display: grid; place-items: center; font-size: 0.85rem;
  background: conic-gradient(#ff4d4d, #ffd84d, #4dff7a, #4dd8ff, #6b4dff, #ff4dd8, #ff4d4d); }
.hexpick-more span { filter: drop-shadow(0 0 2px rgba(0,0,0,0.5)); }
.hexpick-more.on span { display: none; }
.hexpop[hidden] { display: none; }
.hexpop-card { max-width: 21rem; padding: 0.9rem 0.9rem 0.8rem; background: var(--card-bg); border: 1.5px solid var(--border); box-shadow: 0 18px 40px -16px rgba(0,0,0,0.7); }
.hexpop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.hexpop-x { width: auto; margin: 0; padding: 0 0.4rem; background: none; border: none; color: var(--muted); font-size: 1.5rem; line-height: 1; }
.hexpop .hexpick-svg { max-width: 18rem; margin: 0 auto; }
.hexpop-now { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.8rem; }
.hexpop-chip { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--border); }

.hexpop-tabs { display: flex; gap: 0.3rem; justify-content: center; margin-bottom: 0.5rem; }
.hexpop-tabs[hidden] { display: none; }
.hexpop-tabs button { width: auto; margin: 0; padding: 0.3rem 0.8rem; border-radius: 99px; font-size: 0.78rem; font-weight: 700;
  background: transparent; border: 1.5px solid var(--border); color: var(--fg); }
.hexpop-tabs button.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 18%, transparent); }
.hexpop-wheel[hidden] { display: none; }

/* --- Onboarding (app/onboarding.py) -------------------------------------- */
a.button-link { display: block; text-align: center; text-decoration: none; border-radius: 8px; font-weight: 600; }
a.button-link.primary { background: var(--accent); color: var(--on-color); padding: 0.9rem; }

/* Register: one password field with show/hide. */
.pw-field { position: relative; }
.pw-field input { width: 100%; padding-right: 4.2rem; }
.pw-toggle { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); width: auto; margin: 0;
  padding: 0.3rem 0.6rem; font-size: 0.8rem; background: transparent; color: var(--accent); }
.pw-hint { font-size: 0.78rem; margin: 0.25rem 0 0.8rem; }

/* /welcome steps */
.welcome { max-width: 32rem; margin: 0 auto; }
.welcome h1 { margin-bottom: 0.3rem; }
.welcome-dots { display: flex; gap: 0.4rem; justify-content: center; margin: 0.4rem 0 1rem; }
.welcome-dot { width: 0.5rem; height: 0.5rem; border-radius: 99px; background: var(--border); transition: width 0.2s; }
.welcome-dot.done { background: color-mix(in oklab, var(--accent) 55%, var(--border)); }
.welcome-dot.on { width: 1.4rem; background: var(--accent); }
.welcome-card { margin-top: 0.8rem; }
.welcome-card label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.welcome-card #friend-search { width: 100%; }
.welcome-card #search-results { margin-top: 0.5rem; }
.welcome-friends-now { margin: 0.6rem 0 0; }
.welcome-next { margin-top: 1.2rem; }
.welcome-skip { display: block; text-align: center; margin-top: 1rem; }
.invite-status { margin: 0.4rem 0 0; font-size: 0.8rem; word-break: break-all; }

.welcome-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; margin-top: 1rem; }
.welcome-theme { position: relative; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.55rem;
  border-radius: 12px; border: 2px solid var(--border); background: var(--bg); color: var(--fg); cursor: pointer; }
.welcome-theme input { position: absolute; opacity: 0; pointer-events: none; }
.welcome-theme:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }
.welcome-theme:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.welcome-theme-swatch { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem; border-radius: 8px;
  background: var(--card-bg); border: 1px solid var(--border); }
.wt-bar { height: 0.45rem; width: 55%; border-radius: 99px; background: var(--fg); opacity: 0.85; }
.wt-line { height: 0.3rem; border-radius: 99px; background: var(--muted); opacity: 0.6; }
.wt-line.short { width: 60%; }
.wt-btn { height: 0.85rem; border-radius: 5px; background: var(--accent); margin-top: 0.15rem; }
.welcome-theme-name { font-size: 0.85rem; font-weight: 700; text-align: center; }

/* Log page, first visit */
.streak-badge-start { flex-direction: column; gap: 0.1rem; padding: 0.25rem 0.6rem; }
.streak-badge-start .streak-longest { font-size: 0.72rem; font-weight: 700; color: var(--accent); }
.starter-card { border: 1.5px dashed color-mix(in oklab, var(--accent) 55%, var(--border)); border-radius: 12px;
  padding: 0.8rem; margin: 0.6rem 0 0.9rem; background: color-mix(in oklab, var(--accent) 6%, var(--card-bg)); }
.starter-card p { margin: 0.2rem 0 0.6rem; font-size: 0.85rem; }
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; }
.starter-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left; margin: 0;
  padding: 0.6rem 0.7rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; }
.starter-btn:hover, .starter-btn:focus-visible { border-color: var(--accent); }
.starter-name { font-weight: 700; }
.starter-desc { font-size: 0.74rem; font-weight: 500; line-height: 1.3; }

/* Friends: invite card */
.invite-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.invite-card p { margin: 0.15rem 0 0; font-size: 0.82rem; }
.invite-card .invite-status { flex-basis: 100%; }

/* Progress, nothing logged yet */
.progress-empty { text-align: center; }
.progress-empty p { margin: 0.35rem 0 0.8rem; font-size: 0.88rem; }

/* After the first workout: the notifications ask (history.html) */
.push-ask[hidden] { display: none; }
.push-ask-card { text-align: left; }
.push-ask-card h2, .push-ask-card .win-trophy { text-align: center; }
.push-ask-list { list-style: none; padding: 0; margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.push-ask-list li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.88rem; line-height: 1.35; }
.push-ask-list li > span:first-child { font-size: 1.1rem; line-height: 1.2; }
.push-ask-small { font-size: 0.78rem; text-align: center; }
.push-ask-status { font-size: 0.82rem; text-align: center; }
.push-ask-card .win-btn.primary { background: var(--accent); color: var(--on-color); }

/* Section guides (app/guides.py, templates/_guide.html) */
.guide-overlay[hidden] { display: none; }
.guide-q { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; padding: 0; margin: 0 0 0 0.35rem;
  vertical-align: middle; border-radius: 50%; border: 1.5px solid var(--border); background: var(--card-bg);
  color: var(--muted); font-size: 0.78rem; font-weight: 800; line-height: 1; cursor: pointer; }
.guide-q:hover, .guide-q:focus-visible { border-color: var(--accent); color: var(--accent); }
.guide-q-inline { width: 1.05rem; height: 1.05rem; font-size: 0.65rem; margin: 0 0.1rem; }
/* On a centred title the "?" takes no width, so the words sit dead centre
   and the button hangs just after them. */
.centered-header > .guide-q, .log-title-centered > .guide-q { position: absolute; margin: 0.2em 0 0 0.4rem; }
.guide-card { max-width: 26rem; text-align: left; max-height: calc(100dvh - 2.5rem); display: flex; flex-direction: column; }
.guide-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; }
.guide-icon { font-size: 1.8rem; line-height: 1; }
.guide-head h2 { margin: 0; font-size: 1.2rem; }
.guide-body { overflow-y: auto; margin: 0 -0.25rem; padding: 0 0.25rem; }
.guide-sec h3 { margin: 0.75rem 0 0.15rem; font-size: 0.92rem; color: var(--accent); }
.win-card .guide-sec p { margin: 0; font-size: 0.88rem; line-height: 1.45; }
.win-card .guide-foot { font-size: 0.75rem; margin: 0.8rem 0 0.2rem; text-align: center; }

/* History after the first workout: what it unlocked */
.next-steps { display: flex; flex-direction: column; gap: 0.5rem; }
.next-step { display: flex; gap: 0.6rem; align-items: center; padding: 0.55rem 0.65rem; border-radius: 10px;
  border: 1px solid var(--border); color: var(--fg); text-decoration: none; font-size: 0.88rem; line-height: 1.3; }
.next-step > span:first-child { font-size: 1.3rem; }
.next-step:hover { border-color: var(--accent); }
.next-step .muted { font-size: 0.8rem; }

/* "How Keep Lifting works" tour (welcome_intro.html) */
.intro { max-width: 30rem; margin: 0 auto; }
.intro-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.intro-track::-webkit-scrollbar { display: none; }
.intro-slide { flex: 0 0 100%; scroll-snap-align: start; padding: 0.5rem 0.25rem 0.25rem; box-sizing: border-box; }
.intro-icon { width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.1rem;
  margin: 0.6rem auto 0.8rem; background: color-mix(in oklab, var(--accent) 18%, var(--card-bg)); border: 1.5px solid color-mix(in oklab, var(--accent) 45%, var(--border)); }
.intro-kicker { text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0; }
.intro-slide h1 { text-align: center; margin: 0.2rem 0 0.4rem; }
.intro-slide .intro-kicker { margin-top: 0.6rem; }
.intro-lead { text-align: center; margin: 0 0 0.9rem; }
.intro-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.intro-points li { position: relative; padding: 0.6rem 0.7rem 0.6rem 2rem; border-radius: 10px; background: var(--card-bg);
  border: 1px solid var(--border); font-size: 0.9rem; line-height: 1.4; }
.intro-points li::before { content: "\2713"; position: absolute; left: 0.75rem; top: 0.6rem; color: var(--accent); font-weight: 800; }
.intro-dots { display: flex; gap: 0.35rem; justify-content: center; margin: 1rem 0 0.8rem; }
.intro-dots span { width: 0.45rem; height: 0.45rem; border-radius: 99px; background: var(--border); transition: width 0.2s, background 0.2s; }
.intro-dots span.on { width: 1.3rem; background: var(--accent); }
.intro-nav { display: flex; align-items: center; gap: 1rem; }
.intro-nav .intro-next { flex: 1; }
.legend-phase.phase-none { background: transparent; border: 1px solid var(--border); color: var(--muted); }

/* Custom equipment + "already built in" hints (create custom exercise) */
.custom-equip-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.custom-equip-add input { flex: 1; min-width: 0; }
.custom-equip-add button { margin: 0; }
.new-ex-hint { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0; padding: 0.55rem 0.65rem; border-radius: 8px;
  background: color-mix(in oklab, var(--accent) 10%, var(--card-bg)); border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border)); }
.new-ex-hint-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; font-size: 0.85rem; }
.new-ex-hint-row span { min-width: 0; flex: 1 1 12rem; }
.new-ex-hint-row button { margin: 0; }
.new-ex-needs { width: 100%; margin: 0.4rem 0; }

/* Tour pictures (welcome_intro.html .intro-pic) -- small drawings of the
   real screens, in the viewer's theme. */
.intro-pic { height: 11.5rem; margin: 0.8rem 0 0.2rem; border-radius: 16px; display: grid; place-items: center; padding: 0.8rem;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--accent) 22%, var(--card-bg)), var(--card-bg));
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); overflow: hidden; box-sizing: border-box; }
.intro-pic b { font-weight: 700; }
.ip-gym { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; width: 100%; }
.ip-equip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.68rem; text-align: center; line-height: 1.15; }
.ip-equip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid var(--accent); background: #fff; }
.ip-tick { position: absolute; top: -0.3rem; right: -0.3rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-color); font-size: 0.75rem; font-weight: 800; }
.ip-equip-add .ip-plus { width: 100%; aspect-ratio: 1; border-radius: 10px; border: 2px dashed var(--muted); display: grid; place-items: center;
  font-size: 1.6rem; color: var(--muted); box-sizing: border-box; }
.ip-log { width: 100%; max-width: 17rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ip-log-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.ip-log-head img { width: 2.3rem; height: 2.3rem; border-radius: 8px; object-fit: cover; background: #fff; }
.ip-set { display: grid; grid-template-columns: 3.2rem 1fr 1.6rem; align-items: center; padding: 0.35rem 0.55rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); font-size: 0.82rem; }
.ip-set.done { border-color: color-mix(in oklab, var(--phase-growing) 60%, var(--border)); background: color-mix(in oklab, var(--phase-growing) 10%, var(--bg)); }
.ip-check { width: 1.3rem; height: 1.3rem; border-radius: 6px; border: 2px solid var(--border); display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; }
.ip-set.done .ip-check { background: var(--phase-growing); border-color: var(--phase-growing); color: #fff; }
.ip-body { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 100%; }
/* Fixed size (1:2, the diagram's viewBox): a % height inside the flex box
   collapses to nothing on iOS Safari. */
.ip-body-views { display: flex; justify-content: center; gap: 0.6rem; }
.ip-body-views .body-svg { width: 3.9rem; height: 7.8rem; max-width: none; flex: none; }
.ip-body-views .body-label { display: none; }
.ip-scale { width: 70%; display: flex; flex-direction: column; gap: 0.15rem; }
.ip-scale-bar { height: 0.4rem; border-radius: 99px;
  background: linear-gradient(90deg, var(--phase-atrophying) 0%, var(--phase-detraining) 16%, var(--phase-ready) 30%, var(--phase-growing) 100%); }
/* -3..+10: zero sits 3/13 (23%) of the way along. */
.ip-scale-labels { position: relative; height: 0.9rem; font-size: 0.66rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ip-scale-labels span { position: absolute; top: 0; }
.ip-scale-labels span:nth-child(1) { left: 0; }
.ip-scale-labels span:nth-child(2) { left: 23%; transform: translateX(-50%); }
.ip-scale-labels span:nth-child(3) { right: 0; }
.ip-progress { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.5rem 0.8rem; align-items: center; }
.ip-chart { grid-column: 1 / -1; width: 100%; height: 5rem; }
.ip-chart-grid { stroke: var(--border); stroke-width: 1; }
.ip-chart-area { fill: color-mix(in oklab, var(--phase-growing) 22%, transparent); }
.ip-chart-line { fill: none; stroke: var(--phase-growing); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ip-chart-dot { fill: var(--phase-growing); stroke: var(--card-bg); stroke-width: 2; }
.ip-cal { display: grid; grid-template-columns: repeat(7, 0.85rem); gap: 0.25rem; }
.ip-cal span { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--border); }
.ip-cal span.on { background: var(--accent); }
.ip-streak { font-weight: 800; font-size: 0.95rem; }
.ip-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; width: 100%; }
.ip-day { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.45rem 0.1rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); font-size: 0.66rem; color: var(--muted); min-height: 5.5rem; }
.ip-day.planned { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, var(--bg)); color: var(--fg); }
.ip-day b { font-size: 0.72rem; margin-top: auto; }
.ip-day i { font-style: normal; color: var(--muted); }
.ip-board { width: 100%; max-width: 17rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ip-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.55rem; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); font-size: 0.88rem; }
.ip-row.me { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, var(--bg)); }
.ip-rank { width: 1rem; font-weight: 800; color: var(--muted); }
.ip-av { width: 2rem; height: 2rem; flex: none; display: block; }
.ip-av svg { width: 100%; height: 100%; display: block; }
.ip-up { color: var(--phase-growing); font-size: 0.72rem; font-weight: 800; }
.ip-avg { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.ip-friends { width: 100%; max-width: 17rem; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.ip-avs { display: flex; }
.ip-avs .ip-av { width: 3.4rem; height: 3.4rem; margin: 0 -0.35rem; border-radius: 50%; box-shadow: 0 0 0 3px var(--card-bg); }
.ip-group { width: 100%; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.55rem 0.65rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); font-size: 0.85rem; }
.ip-bar { display: flex; height: 0.45rem; border-radius: 99px; overflow: hidden; background: var(--border); }
.ip-bar i:nth-child(1) { background: #3d7bfd; } .ip-bar i:nth-child(2) { background: #ff8a1f; } .ip-bar i:nth-child(3) { background: #2fb36d; }
.ip-sub { font-size: 0.72rem; color: var(--muted); }

/* History: new personal bests -- a flame on the calendar day, a PR tag on
   the workout and on each exercise that set one. */
.mini-calendar-day.pr-day { position: relative; overflow: visible; }
.pr-flame { position: absolute; top: -0.35rem; right: -0.3rem; font-size: 0.62rem; line-height: 1;
  filter: drop-shadow(0 0 1px var(--card-bg)); pointer-events: none; }
.pr-tag { display: inline-flex; align-items: center; gap: 0.15rem; white-space: nowrap; flex: none; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border-radius: 99px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; vertical-align: middle;
  color: color-mix(in oklab, #ff8a1f 65%, var(--fg)); background: color-mix(in oklab, #ff8a1f 18%, var(--card-bg)); border: 1px solid color-mix(in oklab, #ff8a1f 45%, var(--border)); }
.pr-tag.small { font-size: 0.64rem; padding: 0 0.32rem; margin-left: 0.25rem; }

/* Tour: the nav tab the current card is about (welcome_intro.html). */
.topnav .tour-hl { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent);
  animation: tour-hl-pulse 1.6s ease-in-out infinite; }
@keyframes tour-hl-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent); }
  50% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent), 0 0 18px 6px color-mix(in oklab, var(--accent) 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .topnav .tour-hl { animation: none; } }
:root[data-reduce-motion="1"] .topnav .tour-hl { animation: none; }

/* Avatar editor as a welcome step */
.av-welcome { margin-bottom: 0.6rem; }
.av-welcome h1 { margin: 0 0 0.3rem; }
.av-welcome p { margin: 0; }
.av-welcome-skip { display: block; text-align: center; margin-top: 0.4rem; }

/* Spotlight tours (static/coach.js): everything dark except one element,
   with a short note beside it. */
.coach { position: fixed; inset: 0; z-index: 3000; }
.coach-hole { position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.62), 0 0 0 3px var(--accent), 0 0 24px 4px color-mix(in oklab, var(--accent) 60%, transparent);
  transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, height 0.28s ease; }
.coach-tip { position: fixed; box-sizing: border-box; padding: 0.85rem 0.95rem 0.75rem; border-radius: 14px;
  background: var(--card-bg); color: var(--fg); border: 1.5px solid var(--accent); box-shadow: 0 14px 34px -12px rgba(0,0,0,0.7);
  transition: top 0.28s ease, left 0.28s ease; }
.coach-count { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.coach-title { margin: 0.15rem 0 0.25rem; font-size: 1.02rem; }
.coach-text { margin: 0; font-size: 0.9rem; line-height: 1.4; }
.coach-btns { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem; }
.coach-gap { flex: 1; }
.coach-btns button { width: auto; margin: 0; }
.coach-skip { background: none; border: none; color: var(--muted); font-size: 0.82rem; padding: 0.3rem 0.2rem; }
@media (prefers-reduced-motion: reduce) { .coach-hole, .coach-tip { transition: none; } }
:root[data-reduce-motion="1"] .coach-hole, :root[data-reduce-motion="1"] .coach-tip { transition: none; }

/* Login: a big "Create an account" under the form. */
.login-or { display: flex; align-items: center; gap: 0.6rem; margin: 1.2rem 0 0.7rem; font-size: 0.82rem; color: var(--muted); }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
a.register-big { padding: 0.9rem; font-size: 1.05rem; color: var(--accent); background: transparent;
  border: 2px solid var(--accent); }
a.register-big:hover, a.register-big:focus-visible { background: color-mix(in oklab, var(--accent) 14%, transparent); }

/* Header icons (base.html): their own nav tokens, defaulting to each theme's
   icon colours. Per-theme lines below swap only the ones that didn't stand
   out from their button (>= 4:1 against the normal and active button) for a
   lighter or darker version of the same colour -- generated from a contrast
   check of every theme (2026-10-23). The Progress bars keep their real
   red/amber/green and get an outline in the line colour instead, so they
   show even where the fill is close to the button (a red bar on red). */
.topnav { --nav-grey: var(--dumbbell-grey); --nav-yellow: var(--scroll-yellow); --nav-line: var(--on-color);
  --nav-bar-r: var(--phase-atrophying); --nav-bar-a: var(--phase-detraining); --nav-bar-g: var(--phase-growing); }
.topnav .nav-goals { --nav-red: var(--goals-target-red); }
:root[data-theme="dark"] .topnav, .topnav.theme-scope[data-theme="dark"], :root[data-theme="dark"] .topnav .nav-goals, .topnav.theme-scope[data-theme="dark"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; --nav-line: #ffffff; }
:root[data-theme="light"] .topnav, .topnav.theme-scope[data-theme="light"], :root[data-theme="light"] .topnav .nav-goals, .topnav.theme-scope[data-theme="light"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; }
:root[data-theme="pinkify"] .topnav, .topnav.theme-scope[data-theme="pinkify"], :root[data-theme="pinkify"] .topnav .nav-goals, .topnav.theme-scope[data-theme="pinkify"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; }
:root[data-theme="ocean"] .topnav, .topnav.theme-scope[data-theme="ocean"], :root[data-theme="ocean"] .topnav .nav-goals, .topnav.theme-scope[data-theme="ocean"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; }
:root[data-theme="forest"] .topnav, .topnav.theme-scope[data-theme="forest"], :root[data-theme="forest"] .topnav .nav-goals, .topnav.theme-scope[data-theme="forest"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; }
:root[data-theme="lavender"] .topnav, .topnav.theme-scope[data-theme="lavender"], :root[data-theme="lavender"] .topnav .nav-goals, .topnav.theme-scope[data-theme="lavender"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; }
:root[data-theme="neon"] .topnav, .topnav.theme-scope[data-theme="neon"], :root[data-theme="neon"] .topnav .nav-goals, .topnav.theme-scope[data-theme="neon"] .nav-goals { --nav-grey: #0f1218; --nav-yellow: #4a2f00; --nav-red: #6b0f0f; }
:root[data-theme="coffee"] .topnav, .topnav.theme-scope[data-theme="coffee"], :root[data-theme="coffee"] .topnav .nav-goals, .topnav.theme-scope[data-theme="coffee"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; }
:root[data-theme="fire"] .topnav, .topnav.theme-scope[data-theme="fire"], :root[data-theme="fire"] .topnav .nav-goals, .topnav.theme-scope[data-theme="fire"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; --nav-line: #ffffff; }
:root[data-theme="steel"] .topnav, .topnav.theme-scope[data-theme="steel"], :root[data-theme="steel"] .topnav .nav-goals, .topnav.theme-scope[data-theme="steel"] .nav-goals { --nav-grey: #0f1218; --nav-yellow: #4a2f00; --nav-red: #6b0f0f; }
:root[data-theme="bronze"] .topnav, .topnav.theme-scope[data-theme="bronze"], :root[data-theme="bronze"] .topnav .nav-goals, .topnav.theme-scope[data-theme="bronze"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; --nav-line: #ffffff; }
:root[data-theme="silver"] .topnav, .topnav.theme-scope[data-theme="silver"], :root[data-theme="silver"] .topnav .nav-goals, .topnav.theme-scope[data-theme="silver"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; }
:root[data-theme="gold"] .topnav, .topnav.theme-scope[data-theme="gold"], :root[data-theme="gold"] .topnav .nav-goals, .topnav.theme-scope[data-theme="gold"] .nav-goals { --nav-grey: #0f1218; --nav-yellow: #4a2f00; --nav-red: #6b0f0f; }
:root[data-theme="diamond"] .topnav, .topnav.theme-scope[data-theme="diamond"], :root[data-theme="diamond"] .topnav .nav-goals, .topnav.theme-scope[data-theme="diamond"] .nav-goals { --nav-grey: #0f1218; --nav-yellow: #4a2f00; --nav-red: #6b0f0f; }
:root[data-theme="inferno"] .topnav, .topnav.theme-scope[data-theme="inferno"], :root[data-theme="inferno"] .topnav .nav-goals, .topnav.theme-scope[data-theme="inferno"] .nav-goals { --nav-grey: #0f1218; --nav-yellow: #4a2f00; --nav-red: #6b0f0f; --nav-line: #0f1218; }
:root[data-theme="sunlit_beach"] .topnav, .topnav.theme-scope[data-theme="sunlit_beach"], :root[data-theme="sunlit_beach"] .topnav .nav-goals, .topnav.theme-scope[data-theme="sunlit_beach"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; --nav-line: #ffffff; }
:root[data-theme="pine_forest"] .topnav, .topnav.theme-scope[data-theme="pine_forest"], :root[data-theme="pine_forest"] .topnav .nav-goals, .topnav.theme-scope[data-theme="pine_forest"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; }
:root[data-theme="campfire"] .topnav, .topnav.theme-scope[data-theme="campfire"], :root[data-theme="campfire"] .topnav .nav-goals, .topnav.theme-scope[data-theme="campfire"] .nav-goals { --nav-grey: #0f1218; --nav-yellow: #4a2f00; --nav-red: #6b0f0f; }
:root[data-theme="space"] .topnav, .topnav.theme-scope[data-theme="space"], :root[data-theme="space"] .topnav .nav-goals, .topnav.theme-scope[data-theme="space"] .nav-goals { --nav-grey: #0f1218; --nav-yellow: #4a2f00; --nav-red: #6b0f0f; }
:root[data-theme="summit"] .topnav, .topnav.theme-scope[data-theme="summit"], :root[data-theme="summit"] .topnav .nav-goals, .topnav.theme-scope[data-theme="summit"] .nav-goals { --nav-yellow: #fff3b0; --nav-red: #ffd0d0; }
:root[data-theme="storm"] .topnav, .topnav.theme-scope[data-theme="storm"], :root[data-theme="storm"] .topnav .nav-goals, .topnav.theme-scope[data-theme="storm"] .nav-goals { --nav-grey: #0f1218; --nav-yellow: #4a2f00; --nav-red: #6b0f0f; }
:root[data-theme="neon_city"] .topnav, .topnav.theme-scope[data-theme="neon_city"], :root[data-theme="neon_city"] .topnav .nav-goals, .topnav.theme-scope[data-theme="neon_city"] .nav-goals { --nav-grey: #0f1218; --nav-yellow: #4a2f00; --nav-red: #6b0f0f; --nav-line: #0f1218; }
:root[data-theme="zen_garden"] .topnav, .topnav.theme-scope[data-theme="zen_garden"], :root[data-theme="zen_garden"] .topnav .nav-goals, .topnav.theme-scope[data-theme="zen_garden"] .nav-goals { --nav-grey: #ffffff; --nav-yellow: #fff3b0; --nav-red: #ffd0d0; --nav-line: #ffffff; }
:root[data-theme="aurora"] .topnav, .topnav.theme-scope[data-theme="aurora"], :root[data-theme="aurora"] .topnav .nav-goals, .topnav.theme-scope[data-theme="aurora"] .nav-goals { --nav-grey: #0f1218; --nav-yellow: #4a2f00; --nav-red: #6b0f0f; }
:root[data-theme="first_flight"] .topnav, .topnav.theme-scope[data-theme="first_flight"], :root[data-theme="first_flight"] .topnav .nav-goals, .topnav.theme-scope[data-theme="first_flight"] .nav-goals { --nav-grey: #0f1218; --nav-yellow: #4a2f00; --nav-red: #6b0f0f; }

/* Avatar editor: theme-scene backgrounds */
.av-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.5rem; margin-top: 0.3rem; }
.av-scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin: 0; padding: 0.35rem 0.2rem;
  background: transparent; border: 1.5px solid transparent; border-radius: 12px; color: var(--fg); }
.av-scene-pic { width: 3.6rem; height: 3.6rem; display: block; }
.av-scene-pic svg { width: 100%; height: 100%; display: block; }
.av-scene-name { font-size: 0.7rem; font-weight: 600; text-align: center; line-height: 1.15; }
.av-scene.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.av-scene.locked .av-scene-pic { filter: grayscale(1); opacity: 0.4; }
.av-scene .av-lock { position: absolute; top: 1.6rem; left: 50%; transform: translateX(-50%); font-size: 1rem; }

/* Recommend: the set-up sits in its own card */
.recommend-setup { margin-bottom: 1rem; }
.recommend-setup > .muted:first-child { margin-top: 0; }
.recommend-setup .recommend-form { margin-bottom: 0; }
/* Reviews: jump back to Log / Plans from the bottom of any review */
.rv-jump { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1rem; }
.rv-jump-btn { display: block; text-align: center; padding: 0.75rem 0.5rem; border-radius: 12px; font-weight: 700; text-decoration: none; border: 1px solid var(--border); background: var(--card-bg); color: var(--fg); }

/* Group streaks: the raised weekly bar (app.group_streaks.RAISED_BAR) */
.gs-bar-chip { font-size: 0.72rem; font-weight: 800; padding: 0.05rem 0.4rem; border-radius: 999px; background: color-mix(in oklab, #ff8a1f 25%, transparent); color: var(--fg); }
.sg-bar-note { margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.4; padding: 0.55rem 0.7rem; border-radius: 10px; background: color-mix(in oklab, #ff8a1f 14%, transparent); }

/* Text that used to sit loose on the background now lives in cards */
.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; }
.goals-reviews-card { margin-top: 1rem; }
.rv-headline-period { margin: 0 0 0.3rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.card.sg-weeks { padding: 0.6rem 0.5rem; margin-top: 0.8rem; }

/* Group page: "Keep your streak" -- a flame ring filling with the team's
   progress, then a pip per workout each person needs this week. */
.sg-keep { padding: 0.75rem 0.85rem; }
.sg-keep-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.sg-keep-ring { --p: 0; width: 3.4rem; height: 3.4rem; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: conic-gradient(#ff8a1f calc(var(--p) * 1%), color-mix(in oklab, var(--border) 70%, transparent) 0); }
.sg-keep-ring span { width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.45rem; background: var(--card-bg); }
.sg-keep:not(.kept) .sg-keep-ring span { filter: grayscale(0.6); }
.sg-keep.kept .sg-keep-ring { box-shadow: 0 0 18px -2px #ff8a1f; }
.sg-keep-title { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.sg-keep-title b { font-size: 1.05rem; }
.sg-keep-title .muted { font-size: 0.8rem; }
.sg-pips { display: inline-flex; align-items: center; gap: 0.25rem; }
.sg-pip { width: 1.6rem; height: 0.55rem; border-radius: 999px; background: color-mix(in oklab, var(--border) 80%, transparent); }
.sg-pip.on { background: var(--mc, var(--accent)); }
.sg-extra { font-style: normal; font-size: 0.75rem; font-weight: 800; color: var(--phase-growing); }

/* Group page: last week's challenge opens up (for the week after it ends) */
.sg-past-open > summary { list-style: none; cursor: pointer; }
.sg-past-open > summary::-webkit-details-marker { display: none; }
.sg-past-open > summary .muted { color: var(--accent); font-weight: 700; }
.sg-past-detail { padding: 0.5rem 0 0.6rem; border-bottom: 1px solid var(--border); }
.sg-past-bar { display: flex; height: 0.6rem; margin: 0.35rem 0 0.5rem; }

/* Weekly review acted on: what "Use this plan" sets up, and the target it
   leaves on the Log page (static/app.js applyReviewTarget). */
.rv-changes { margin: 0.6rem 0 0.2rem; }
.rv-changes ul { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; line-height: 1.45; }
.rv-changes li::marker { content: "\2713  "; color: var(--phase-growing); }
.review-target { display: flex; flex-direction: column; gap: 0.1rem; margin: 0.4rem 0; padding: 0.5rem 0.65rem; border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent); background: color-mix(in oklab, var(--accent) 12%, var(--card-bg)); font-size: 0.85rem; }
.review-target strong { font-size: 0.8rem; }

/* New avatar gear: red dots (account icon, Edit avatar, the item), the
   one-time pop-up (static/new_gear.js) and the celebration page. */
.nav-account { position: relative; }
.nav-account.has-notification::after, .has-dot::after, .av-item.is-new::after {
  content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger); border: 1.5px solid var(--bg);
}
.has-dot, .av-item.is-new { position: relative; }
.av-item.is-new::after { top: 6px; right: 6px; width: 10px; height: 10px; }
.new-gear-pic, .cel-gear-pic { width: 8rem; height: 8rem; margin: 0 auto 0.4rem; border-radius: 50%; overflow: hidden; }
.new-gear-pic svg, .cel-gear-pic svg { width: 100%; height: 100%; display: block; }
.new-gear-kicker { margin: 0.2rem 0 0 !important; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #c9a227; }
.new-gear-why { margin: 0.2rem 0 0.8rem !important; font-size: 0.88rem; }
a.win-btn.new-gear-try { display: block; text-decoration: none; padding: 0.75rem; border-radius: 12px; font-weight: 800; box-sizing: border-box; }
.cel-gear-try { display: inline-block; margin-top: 0.9rem; padding: 0.6rem 1.2rem; border-radius: 999px; text-decoration: none; font-weight: 800; }

/* Programs: "Keep things fresh" / "I like my exercises" */
.prog-variety-hint { margin: 0.35rem 0 0; font-size: 0.8rem; }
#prog-variety .prog-chip { flex: 1; }

/* Plans & Programs step by step (static/program_story.js) */
.prog-story-open { width: 100%; margin: 0.2rem 0 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; font-weight: 800; }
.prog-story-open span { font-size: 0.75rem; font-weight: 600; opacity: 0.85; }
.ps-stepper { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: 1rem 0 0.4rem; }
.ps-step { width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.6rem; font-weight: 800; padding: 0; margin: 0; display: grid; place-items: center; background: var(--card-bg); border: 1.5px solid var(--accent); color: var(--accent); }
.ps-step:disabled { opacity: 0.35; }
.ps-num { margin: 0 !important; min-width: 6rem; text-align: center; }
.ps-weeks { display: flex; flex-direction: column; gap: 0.9rem; width: 100%; max-width: 24rem; margin-top: 0.9rem; }
.ps-week-label { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.35rem; text-align: left; }
.ps-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.ps-dot { margin: 0; padding: 0.45rem 0 0.4rem; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; background: var(--card-bg); border: 1.5px solid var(--border); color: var(--fg); }
.ps-dot.on { background: var(--accent); border-color: var(--accent); color: var(--on-color); transform: scale(1.05); transition: transform 0.15s; }
.ps-dot.past { opacity: 0.3; }
.ps-dot.today:not(.on) { border-color: var(--accent); }
.ps-dot-wd { font-size: 0.68rem; font-weight: 700; }
.ps-dot-n { font-size: 1rem; font-weight: 800; }
.ps-note { min-height: 1.2em; }
.ps-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; width: 100%; max-width: 20rem; margin: 1rem 0 0.8rem; }
.ps-chip { margin: 0; padding: 1rem 0; border-radius: 14px; font-size: 1.1rem; font-weight: 800; background: var(--card-bg); border: 1.5px solid var(--border); color: var(--fg); }
.ps-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-color); }
.ps-time { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; width: 100%; max-width: 20rem; font-weight: 700; }
.ps-time input { width: auto; margin: 0; }
.ps-styles { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; max-width: 22rem; margin-top: 1rem; }
.ps-style-opt { margin: 0; padding: 0.9rem 1rem; border-radius: 16px; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center;
  background: var(--card-bg); border: 1.5px solid var(--border); color: var(--fg); font-weight: 400; }
.ps-style-opt .ps-style-icon { grid-row: span 2; font-size: 1.8rem; }
.ps-style-opt b { font-size: 1rem; }
.ps-style-opt span:last-child { font-size: 0.82rem; color: var(--muted); line-height: 1.35; }
.ps-style-opt.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, var(--card-bg)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); }
.ps-spin { animation: ps-spin 1.6s linear infinite; }
@keyframes ps-spin { to { transform: rotate(360deg); } }
.ps-checks { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; max-width: 20rem; margin-top: 1rem; text-align: left; }
.ps-check { display: flex; align-items: center; gap: 0.6rem; opacity: 0.35; transition: opacity 0.25s; font-size: 0.92rem; }
.ps-check .ps-tick { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 900; border: 1.5px solid var(--border); color: transparent; flex-shrink: 0; }
.ps-check.in { opacity: 1; }
.ps-check.in .ps-tick { background: var(--phase-growing); border-color: var(--phase-growing); color: #fff; }
.ps-err { color: var(--danger) !important; min-height: 1em; }
.ps-day { text-align: left; }
.ps-day-head { display: flex; justify-content: space-between; align-items: baseline; }
.ps-day-time { font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.ps-groups { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.35rem 0; }
.ps-group { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; background: color-mix(in oklab, var(--accent) 18%, transparent); }
.ps-ex { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.ps-ex li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.12rem 0; }
.ps-ex-sets { color: var(--muted); white-space: nowrap; font-size: 0.78rem; }
.ps-ex-more { color: var(--muted); font-size: 0.78rem; }
.ps-proj-row { flex-direction: row !important; justify-content: space-between; align-items: center; }
.ps-proj-num { font-size: 1.4rem; color: var(--phase-growing); }
@media (prefers-reduced-motion: reduce) { .ps-spin { animation: none; } }
.ps-week-tabs { margin: 0.8rem 0 0; max-width: 22rem; grid-template-columns: repeat(3, 1fr); }
.ps-week-tabs .ps-chip { padding: 0.55rem 0; font-size: 0.9rem; }
.ps-week-tabs .ps-chip:disabled { opacity: 0.35; }
.ps-own-list { display: flex; flex-direction: column; gap: 0.45rem; width: 100%; max-width: 22rem; margin-top: 0.9rem; text-align: left; }
.ps-own-day { padding: 0.5rem 0.65rem; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card-bg); }
.ps-own-day.training { border-color: color-mix(in oklab, var(--accent) 60%, var(--border)); }
.ps-own-day.has:not(.training) { border-color: var(--phase-growing); }
.ps-own-head { display: flex; align-items: center; gap: 0.5rem; }
.ps-own-head b { min-width: 3.4rem; }
.ps-own-tag { flex: 1; font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.ps-own-day.training .ps-own-tag { color: var(--accent); }
.ps-own-add { width: 2rem; height: 2rem; margin: 0; padding: 0; border-radius: 50%; font-size: 1.2rem; font-weight: 800; background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
.ps-own-items { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.ps-own-item { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.2rem 0.15rem 0.55rem; border-radius: 999px; background: color-mix(in oklab, var(--accent) 18%, transparent); }
.ps-own-x { width: 1.3rem; height: 1.3rem; margin: 0; padding: 0; border-radius: 50%; background: transparent; border: 0; color: var(--muted); font-size: 1rem; line-height: 1; }
.story-content .ex-search { z-index: 3000; }
.ps-own-tpl { width: auto; max-width: 8.5rem; margin: 0; padding: 0.3rem 0.4rem; font-size: 0.78rem; border-radius: 999px; }
.ps-own-tplname { margin-top: 0.35rem; font-size: 0.8rem; font-weight: 700; color: var(--phase-growing); }
.ps-check-body { display: flex; flex-direction: column; min-width: 0; }
.ps-check-sub { font-size: 0.75rem; color: var(--muted); min-height: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-check.now { opacity: 1; }
.ps-check.now .ps-tick { border-color: var(--accent); border-top-color: transparent; animation: ps-spin 0.8s linear infinite; }
/* Step-by-step builder: projected growth chart + muscles grid */
.ps-proj-card { width: 100%; max-width: 24rem; text-align: left; }
.ps-proj-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.82rem; }
.ps-chart { width: 100%; height: auto; display: block; margin-top: 0.3rem; overflow: visible; }
.ps-grid { stroke: var(--border); stroke-width: 1; }
.ps-axis { font-size: 9px; fill: var(--muted); }
.ps-axis-on { fill: var(--accent); font-weight: 800; }
.ps-base { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.7; }
.ps-line { fill: none; stroke: var(--phase-growing); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease-in-out; }
.ps-area { fill: url(#ps-area); opacity: 0; transition: opacity 0.8s 1s; }
.ps-dot-w { fill: var(--card-bg); stroke: var(--phase-growing); stroke-width: 2.5; opacity: 0; transition: opacity 0.2s; }
.ps-end { font-size: 11px; font-weight: 800; fill: var(--phase-growing); opacity: 0; transition: opacity 0.4s 1.5s; }
.go .ps-line { stroke-dashoffset: 0; }
.go .ps-area, .go .ps-dot-w, .go .ps-end { opacity: 1; }
.ps-legend { font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; }
.ps-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--phase-growing); }
.ps-key.off { background: transparent; border-top: 2px dashed var(--muted); height: 0; }
.ps-sec { width: 100%; max-width: 24rem; text-align: left; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0.9rem 0 0.35rem; }
.ps-muscles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; width: 100%; max-width: 24rem; }
.ps-muscle { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.45rem; border-radius: 8px; font-size: 0.7rem; font-weight: 700; opacity: 0; transform: scale(0.9); transition: all 0.2s; background: color-mix(in oklab, var(--border) 50%, transparent); }
.ps-muscle.in { opacity: 1; transform: none; }
.ps-muscle.h0 { color: var(--muted); }
.ps-muscle.h1 { background: color-mix(in oklab, var(--phase-growing) 28%, transparent); }
.ps-muscle.h2, .ps-muscle.h3 { background: color-mix(in oklab, var(--phase-growing) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .ps-line { transition: none; stroke-dashoffset: 0; } }
.cel-back { font-size: 1.9rem; line-height: 1; padding: 0 8px 4px; }
.cel-back[hidden] { display: none; }
/* Plans & Programs: the two ways in (build it with me / plan it myself) */
.plan-paths { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.4rem 0 1rem; }
.plan-path { display: flex; align-items: center; gap: 0.8rem; width: 100%; margin: 0; padding: 0.9rem 1rem; border-radius: 16px; text-align: left;
  background: var(--card-bg); border: 1.5px solid var(--border); color: var(--fg); font-weight: 400; }
.plan-path-build { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, var(--card-bg)); box-shadow: 0 10px 24px -16px var(--accent); }
.plan-path-icon { font-size: 1.7rem; }
.plan-path-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.plan-path-text strong { font-size: 1.02rem; }
.plan-path-text span { font-size: 0.8rem; color: var(--muted); }
.plan-path-go { font-size: 1.6rem; color: var(--accent); }
input.ps-day-time { width: auto; margin: 0; padding: 0.15rem 0.35rem; font-size: 0.8rem; font-weight: 700; border-radius: 8px; }
/* Builder plan pages: muscles lit on the body diagram */
.ps-body { display: flex; justify-content: center; gap: 0.4rem; }
.ps-body .body-svg { width: 46%; max-width: 120px; }
.ps-body polygon[data-group] { fill: color-mix(in oklab, var(--border) 85%, transparent); transition: fill 0.45s ease; }
.ps-body polygon.on { fill: color-mix(in oklab, var(--phase-growing) 55%, var(--card-bg)); }
.ps-body polygon.on2 { fill: var(--phase-growing); }
.ps-body-week { width: 100%; max-width: 17rem; margin: 0.3rem auto 0; }
.ps-body-legend { display: flex; justify-content: center; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--muted); margin: 0.2rem 0 0.6rem; }
.ps-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.ps-sw.on { background: color-mix(in oklab, var(--phase-growing) 55%, var(--card-bg)); }
.ps-sw.on2 { background: var(--phase-growing); margin-left: 0.4rem; }
.ps-day { position: relative; padding-right: 5.6rem !important; }
.ps-body-mini { position: absolute; top: 2.2rem; right: 0.4rem; width: 5rem; gap: 0.1rem; }
.ps-body-mini .body-svg { width: 50%; }
.ps-body-mini .body-label { display: none; }
.ps-body { align-items: center; }
.ps-cardio { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-size: 0.7rem; color: var(--muted); }
.ps-cardio-dot { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; color: var(--card-bg);
  background: color-mix(in oklab, var(--border) 85%, transparent); transition: background 0.45s ease; }
.ps-cardio.on .ps-cardio-dot { background: color-mix(in oklab, var(--phase-growing) 55%, var(--card-bg)); }
.ps-cardio.on2 .ps-cardio-dot { background: var(--phase-growing); }
.ps-cardio.on, .ps-cardio.on2 { color: var(--fg); }
.ps-body-mini .ps-cardio-label { display: none; }
.ps-body-mini .ps-cardio-dot { width: 0.9rem; height: 0.9rem; font-size: 0.5rem; }
.ps-body-mini { width: 5.6rem; right: 0.2rem; }
.ps-body-mini .body-svg { width: 40%; }