/* Coherence — Mystic design language (shared with Game of Life).
   Tokens verbatim from ../mystic-design-language.md. One accent: gold. Breath-paced motion. */

/* Self-hosted variable fonts — same-origin, cached by the service worker. */
@font-face{
  font-family:"Fraunces"; src:url("fonts/fraunces.woff2") format("woff2");
  font-weight:300 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk"; src:url("fonts/space-grotesk.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}

/* atmosphere hue vars are registered so intention/daypart shifts crossfade (progressive enhancement) */
@property --atmo-a{syntax:"<color>"; inherits:true; initial-value:#d9b45c22}
@property --atmo-b{syntax:"<color>"; inherits:true; initial-value:#6b7fd61e}

:root{
  --m-bg:#0e0c1a; --m-bg-raise:#16132a; --m-bg-card:#1b1836;
  --m-line:#2b2750; --m-ink:#efeafc; --m-ink-dim:#b3a9d6; --m-ink-faint:#8075ad;
  --m-accent:#d9b45c; --m-accent-2:#c8a24a; --m-glow:#d9b45c33;
  --m-accent-soft:#d9b45c66;
  --atmo-a:#d9b45c22; --atmo-b:#6b7fd61e;
  transition:--atmo-a 2.4s ease, --atmo-b 2.4s ease;
  --m-serif:"Fraunces","Hoefler Text",Georgia,"Times New Roman",serif;
  --m-sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --m-ease:cubic-bezier(.4,0,.2,1); --m-dur-slow:4s; --m-dur-med:900ms; --m-dur-in:600ms;
  --m-r-card:20px; --m-r-pill:999px;
  --m-fs-hero:2.75rem; --m-fs-h1:1.75rem; --m-fs-h2:1.25rem;
  --m-fs-lead:1.0625rem; --m-fs-body:.9375rem; --m-fs-meta:.8125rem; --m-fs-label:.6875rem;
}
[data-mode="light"]{
  --m-bg:#f4efe4; --m-bg-raise:#efe7d6; --m-bg-card:#fbf7ee;
  --m-line:#e0d5bf; --m-ink:#2a2440; --m-ink-dim:#6a608a; --m-ink-faint:#71668d;
  --m-accent:#b8912f; --m-accent-2:#a67f26; --m-glow:#b8912f22;
  --m-accent-soft:#b8912f55;
  --atmo-a:#b8912f1c; --atmo-b:#6b7fd616;
}

/* ---- atmosphere hue whispers (ambient light ONLY — UI chrome stays gold; no red, ever) ---- */
/* daypart first so a chosen intention overrides it by cascade */
[data-daypart="dawn"]{--atmo-b:#d98f5c18}
[data-daypart="dusk"]{--atmo-b:#b48ad61a}
[data-daypart="night"]{--atmo-a:#d9b45c1a; --atmo-b:#4a5fb61e}
[data-intent="calm"]{--atmo-a:#6b7fd626; --atmo-b:#8a9fe01c}
[data-intent="focus"]{--atmo-a:#d9b45c26; --atmo-b:#e0c88a1c}
[data-intent="presence"]{--atmo-a:#cdd3e822; --atmo-b:#9fb0d61c}
[data-intent="gratitude"]{--atmo-a:#d98f5c24; --atmo-b:#e0b08a1a}
[data-intent="release"]{--atmo-a:#9b7fd626; --atmo-b:#b49ae01c}
[data-intent="clarity"]{--atmo-a:#7fc2d626; --atmo-b:#9adce01c}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--m-bg); color:var(--m-ink);
  font-family:var(--m-sans); font-size:var(--m-fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; min-height:100dvh;
  transition:background var(--m-dur-in) var(--m-ease), color var(--m-dur-in) var(--m-ease);
  overscroll-behavior-y:none;
}
/* single top-center aura — never competing glows */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(600px 400px at 50% -8%, var(--m-glow), transparent 65%);
}
/* ---- persistent atmosphere: lives OUTSIDE #app, so screens change but the world stays ---- */
.atmo{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.atmo i{position:absolute; display:block; border-radius:50%}
.atmo .a1{width:80vmax; height:80vmax; left:-28vmax; top:-32vmax; background:radial-gradient(circle, var(--atmo-a), transparent 62%); animation:atmo-drift 53s ease-in-out infinite alternate}
.atmo .a2{width:70vmax; height:70vmax; right:-32vmax; bottom:-30vmax; background:radial-gradient(circle, var(--atmo-b), transparent 60%); animation:atmo-drift 67s ease-in-out infinite alternate-reverse}
.atmo .a3{width:48vmax; height:48vmax; left:26%; top:38%; background:radial-gradient(circle, var(--atmo-a), transparent 65%); opacity:.5; animation:atmo-drift 41s ease-in-out infinite alternate}
@keyframes atmo-drift{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(4vmax,-3vmax,0) scale(1.07)}}
#app{position:relative; z-index:1; max-width:640px; margin:0 auto; padding:24px 20px 96px; min-height:100dvh}

h1,h2,h3{font-family:var(--m-serif); font-weight:400; margin:0}
button{font-family:var(--m-sans); cursor:pointer}
a{color:var(--m-accent)}
.serif{font-family:var(--m-serif)}
.label{font-size:var(--m-fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--m-ink-faint); font-weight:500}
.meta{font-size:var(--m-fs-meta); color:var(--m-ink-dim)}
.faint{color:var(--m-ink-faint)}
.center{text-align:center}
.hairline{height:1px; background:var(--m-accent); opacity:.2; border:0; margin:22px 0}

/* ---- top bar ---- */
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.brand{display:flex; align-items:center; gap:10px}
.brand .sigil{width:26px; height:26px; flex:0 0 auto}
.brand .name{font-family:var(--m-serif); font-size:1.05rem; letter-spacing:.02em}
.iconbtn{
  background:transparent; border:1px solid var(--m-line); color:var(--m-ink-dim);
  width:44px; height:44px; border-radius:var(--m-r-pill); display:grid; place-items:center;
  transition:border-color var(--m-dur-in) var(--m-ease), color var(--m-dur-in) var(--m-ease);
}
.iconbtn:hover{border-color:var(--m-accent); color:var(--m-accent)}
.iconbtn svg{width:18px; height:18px}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:var(--m-r-pill); padding:14px 26px; font-size:var(--m-fs-body); font-weight:500;
  border:1px solid var(--m-accent); background:transparent; color:var(--m-accent);
  transition:background var(--m-dur-in) var(--m-ease), color var(--m-dur-in) var(--m-ease), border-color var(--m-dur-in) var(--m-ease), opacity var(--m-dur-in) var(--m-ease);
}
.btn:hover{background:var(--m-glow)}
.btn.solid{background:var(--m-accent); color:var(--m-bg); font-weight:600}
.btn.solid:hover{background:var(--m-accent-2)}
.btn.ghost{border-color:var(--m-line); color:var(--m-ink-dim)}
.btn.ghost:hover{border-color:var(--m-ink-dim); color:var(--m-ink); background:transparent}
.btn:disabled{opacity:.4; cursor:not-allowed; pointer-events:none}
.btn.wide{width:100%}
.btnrow{display:flex; gap:12px; flex-wrap:wrap}
.btnrow .btn{flex:1 1 auto; min-width:120px}

:focus-visible{outline:2px solid var(--m-accent); outline-offset:3px; border-radius:6px}

/* ---- cards ---- */
.card{
  background:var(--m-bg-card); border:1px solid var(--m-line);
  border-radius:var(--m-r-card); padding:22px;
}
.card + .card{margin-top:14px}
.stack{display:flex; flex-direction:column; gap:14px}

/* ---- home orb ---- */
.hero{display:flex; flex-direction:column; align-items:center; text-align:center; padding:18px 0 8px}
.orbwrap{position:relative; width:230px; height:230px; margin:14px 0 26px}
.orb{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, var(--m-glow), transparent 62%);
  animation:breathe var(--m-dur-slow) var(--m-ease) infinite;
}
/* organic drift layers — irregular contours counter-rotating at co-prime periods (transform-only) */
.orb-blob{position:absolute; inset:9% 7% 8% 11%; border-radius:44% 56% 61% 39% / 56% 43% 57% 44%; border:1px solid var(--m-accent-soft); opacity:.45; animation:ob-drift 37s linear infinite}
.orb-blob.ob2{inset:16% 18% 15% 14%; border-radius:59% 41% 44% 56% / 43% 60% 40% 57%; animation:ob-drift 47s linear infinite reverse; opacity:.35}
@keyframes ob-drift{to{transform:rotate(360deg)}}
.orb-ring{position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid var(--m-accent); opacity:.5}
.orb-ring.r1{width:100%; height:100%; opacity:.18}
.orb-ring.r2{width:72%; height:72%; opacity:.32}
.orb-ring.r3{width:44%; height:44%; opacity:.5}
.orb-core{
  position:absolute; inset:0; margin:auto; width:9px; height:9px; border-radius:50%;
  background:var(--m-accent); box-shadow:0 0 18px 4px var(--m-glow);
}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.06); opacity:1}}
.hero h1{font-size:var(--m-fs-hero); font-weight:300; line-height:1.1; letter-spacing:-.01em}
.hero .sub{color:var(--m-ink-dim); font-size:var(--m-fs-lead); max-width:34ch; margin:12px auto 0}

/* ---- coherence ring (mandala) ---- */
.ring{position:relative; display:inline-grid; place-items:center}
.ring svg{transform:rotate(-90deg)}
.ring .rtxt{position:absolute; text-align:center}
.ring .rtxt .big{font-family:var(--m-serif); font-size:1.9rem; line-height:1; display:block; font-variant-numeric:lining-nums}
.ring .rtxt .small{font-size:var(--m-fs-meta); color:var(--m-ink-dim)}

/* ---- session (breath) screen ---- */
.session{min-height:78dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px}
.breath-stage{position:relative; width:min(74vw,300px); height:min(74vw,300px); display:grid; place-items:center; margin:10px 0}
/* ambient time-remaining ring — unifies the session with the Insights mandala */
.breath-ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none}
.breath-ring circle{fill:none; stroke-width:1.5}
.breath-ring .track{stroke:var(--m-line); opacity:.6}
.breath-ring .prog{stroke:var(--m-accent); stroke-linecap:round; transition:stroke-dashoffset 300ms linear}
/* ---- the living orb: layered organism, breath-scaled as one body ----
   #breathOrb carries the qm-breathe scale keyframe (JS-synced to the chime clock).
   Children are texture: blobs rotate at co-prime periods so no two cycles look alike;
   the glow layer's opacity runs qm-glow — luminance swells with the inhale. */
.breath-orb{
  position:relative; width:84%; height:84%; border-radius:50%;
  will-change:transform; transform-origin:center;
}
.breath-orb i{position:absolute; display:block; border-radius:50%}
.ob{
  inset:4%;
  background:radial-gradient(circle at 46% 40%, var(--m-glow), transparent 66%);
  border:1px solid var(--m-accent-soft);
}
.ob.b1{border-radius:42% 58% 62% 38% / 55% 42% 58% 45%; animation:ob-drift 29s linear infinite; opacity:.85}
.ob.b2{border-radius:61% 39% 43% 57% / 44% 59% 41% 56%; animation:ob-drift 41s linear infinite reverse; opacity:.55; inset:8% 5% 6% 9%}
.ob.b3{border-radius:53% 47% 39% 61% / 60% 43% 57% 40%; animation:ob-drift 53s linear infinite; opacity:.42; inset:1% 3% 2% 0%}
.o-glow{
  inset:10%; will-change:opacity; opacity:.5;
  background:radial-gradient(circle at 50% 45%, var(--m-glow) 0%, var(--m-glow) 18%, transparent 64%);
}
.breath-stage.paused .ob{animation-play-state:paused}
.breath-phase{position:absolute; font-family:var(--m-serif); font-size:1.5rem; color:var(--m-ink); transform:translateY(-.4em)}
/* phase countdown lives INSIDE the orb, under the phase word — not floating over the timer */
.breath-count{position:absolute; top:50%; margin-top:1.05em; font-size:var(--m-fs-meta); color:var(--m-accent); letter-spacing:.14em; opacity:.85; font-variant-numeric:lining-nums tabular-nums}
.timer-big{font-family:var(--m-serif); font-size:2.4rem; letter-spacing:.02em; font-variant-numeric:lining-nums tabular-nums}
.session .intent-name{color:var(--m-accent); font-family:var(--m-serif); font-size:var(--m-fs-h2)}

/* session materializes out of the veil, slower than a normal view */
.settle-in{animation:settleIn 1.15s var(--m-ease)}
@keyframes settleIn{from{opacity:0; transform:scale(.975)} to{opacity:1; transform:none}}

/* hush: long-press the orb — numbers and chrome fade, breath and light stay */
.breath-stage{touch-action:manipulation; -webkit-user-select:none; user-select:none}
.session .fadeable{transition:opacity .9s var(--m-ease)}
.session.hush .fadeable{opacity:0; pointer-events:none}

/* settle veil (Begin → session) — the world fades away, then returns around the orb */
.veil{
  position:fixed; inset:0; z-index:45; background:var(--m-bg); opacity:0;
  pointer-events:none; transition:opacity 1.1s var(--m-ease);
}
.veil.in{opacity:1; transition:opacity .42s var(--m-ease)}

/* completion bloom — one radial gold breath at session end */
.bloom{
  position:fixed; left:50%; top:42%; width:44vmax; height:44vmax; margin:-22vmax 0 0 -22vmax;
  border-radius:50%; background:radial-gradient(circle, var(--m-glow), transparent 60%);
  opacity:0; transform:scale(.2); pointer-events:none; z-index:30;
}
.bloom.go{animation:bloomburst 1.25s var(--m-ease)}
@keyframes bloomburst{0%{opacity:0; transform:scale(.2)} 30%{opacity:.95} 100%{opacity:0; transform:scale(1.55)}}

/* ---- intention grid ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px}
.chip{
  background:var(--m-bg-card); border:1px solid var(--m-line); border-radius:var(--m-r-card);
  padding:16px 14px; text-align:left; color:var(--m-ink);
  transition:border-color var(--m-dur-in) var(--m-ease), background var(--m-dur-in) var(--m-ease);
}
.chip:hover{border-color:var(--m-accent)}
.chip[aria-pressed="true"], .chip.sel{border-color:var(--m-accent); background:var(--m-glow)}
.chip .cg{font-size:1.3rem; display:block; margin-bottom:6px; color:var(--m-accent)}
.chip .cn{font-family:var(--m-serif); font-size:1.05rem}
.chip .cd{display:block; font-size:var(--m-fs-meta); color:var(--m-ink-dim); margin-top:2px}

/* ---- alignment scale (one unbroken row of 7 — a scale should never wrap) ---- */
.scale{display:flex; gap:6px; justify-content:center; flex-wrap:nowrap; margin:8px 0}
.scale button{
  flex:1 1 0; min-width:40px; max-width:46px; aspect-ratio:1/1; height:auto;
  border-radius:50%; border:1px solid var(--m-line);
  background:transparent; color:var(--m-ink-dim); font-family:var(--m-serif); font-size:1rem;
  font-variant-numeric:lining-nums; padding:0;
  transition:all var(--m-dur-in) var(--m-ease);
}
.scale button:hover{border-color:var(--m-accent)}
.scale button.sel{border-color:var(--m-accent); background:var(--m-accent); color:var(--m-bg); font-weight:600}
.scale-ends{display:flex; justify-content:space-between; font-size:var(--m-fs-meta); color:var(--m-ink-faint); margin-top:2px; padding:0 4px}

textarea{
  width:100%; background:var(--m-bg-raise); color:var(--m-ink); border:1px solid var(--m-line);
  border-radius:14px; padding:12px 14px; font-family:var(--m-sans); font-size:var(--m-fs-body);
  line-height:1.55; resize:vertical; min-height:84px;
}
textarea:focus{outline:none; border-color:var(--m-accent)}
.charcount{font-size:var(--m-fs-meta); color:var(--m-ink-faint); text-align:right; margin-top:4px}
.charcount.warn{color:var(--m-accent)}

/* ---- journal ---- */
.entry{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--m-line)}
.entry:last-child{border-bottom:0}
.entry .shift{flex:0 0 auto; width:52px; text-align:center}
.entry .shift .d{font-family:var(--m-serif); font-size:1.4rem; line-height:1; font-variant-numeric:lining-nums}
.entry .shift .dl{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--m-ink-faint)}
.entry .body{flex:1 1 auto; min-width:0}
.entry .body .top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.entry .body .note{color:var(--m-ink-dim); font-size:var(--m-fs-meta); margin-top:4px; white-space:pre-wrap; overflow-wrap:anywhere}

/* ---- insights ---- */
.statrow{display:flex; gap:12px; flex-wrap:wrap}
.stat{flex:1 1 120px; background:var(--m-bg-card); border:1px solid var(--m-line); border-radius:var(--m-r-card); padding:16px}
.stat .n{font-family:var(--m-serif); font-size:1.9rem; line-height:1; font-variant-numeric:lining-nums}
.stat .l{font-size:var(--m-fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--m-ink-faint); margin-top:6px}
.spark{display:flex; align-items:flex-end; gap:4px; height:64px; margin-top:6px}
/* clean gold gradient, never a muddy khaki wash — keep the accent hue at full saturation */
.spark .bar{flex:1 1 auto; background:linear-gradient(var(--m-accent), var(--m-accent-2)); opacity:.85; border-radius:4px 4px 0 0; min-height:4px; transition:height var(--m-dur-med) var(--m-ease)}
.spark .bar:last-child{opacity:1; box-shadow:0 0 12px -2px var(--m-glow)}

/* ---- return rhythm (shame-free cadence mirror, never a streak) ---- */
.rhythm .dots{display:flex; gap:10px; justify-content:space-between; max-width:280px}
.rhythm .dot{width:22px; height:22px; border-radius:50%; border:1px solid var(--m-line); background:transparent; transition:background var(--m-dur-in) var(--m-ease), border-color var(--m-dur-in) var(--m-ease)}
.rhythm .dot.on{border-color:var(--m-accent); background:var(--m-accent); box-shadow:0 0 10px -2px var(--m-glow)}

/* ---- reflect completion beat ---- */
.reflect-complete{animation:bloom var(--m-dur-med) var(--m-ease)}
@keyframes bloom{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none}}

/* ---- afterglow: the sitting's actual breath rhythm as a wave ---- */
.afterglow svg{display:block; width:100%; height:46px; margin-top:12px}
.afterglow .wave{stroke:var(--m-accent); stroke-width:1.6; fill:none; stroke-linecap:round}
.afterglow .wavefill{fill:var(--m-glow); stroke:none}

/* ---- empty state ---- */
.empty{text-align:center; padding:40px 16px; color:var(--m-ink-dim)}
.empty .g{font-size:2rem; display:block; margin-bottom:10px; opacity:.7}

/* ---- bottom nav ---- */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:5;
  display:flex; justify-content:center; gap:6px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--m-bg) 88%, transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--m-line);
}
.nav a{
  display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none;
  color:var(--m-ink-faint); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  min-width:72px; min-height:48px; padding:6px 16px; border-radius:14px; transition:color var(--m-dur-in) var(--m-ease);
}
.nav a svg{width:20px; height:20px}
.nav a{position:relative}
.nav a::after{content:""; position:absolute; bottom:1px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:transparent; transition:background var(--m-dur-in) var(--m-ease)}
.nav a.active{color:var(--m-accent)}
.nav a.active::after{background:var(--m-accent)}
.nav.hidden{display:none}

/* thumb feedback — a soft press on every touch target, transform-only */
.btn,.iconbtn,.chip,.scale button,.seg button,.nav a,.toggle{-webkit-tap-highlight-color:transparent}
.btn:not(:disabled):active,.iconbtn:active,.chip:active,.scale button:active{transform:scale(.965)}
.nav a:active{transform:translateY(1px)}

/* ---- modal ---- */
.scrim{position:fixed; inset:0; z-index:40; background:rgba(6,4,16,.6); backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); overscroll-behavior:contain}
.scrim[hidden]{display:none}
.modal{background:var(--m-bg-card); border:1px solid var(--m-line); border-radius:var(--m-r-card); padding:24px; max-width:440px; width:100%; max-height:86dvh; overflow:auto; animation:rise var(--m-dur-in) var(--m-ease)}
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.setting-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--m-line)}
.setting-row:last-child{border-bottom:0}
.setting-row .rl{font-size:var(--m-fs-body)} .setting-row .rd{font-size:var(--m-fs-meta); color:var(--m-ink-dim)}
.toggle{position:relative; width:46px; height:44px; border-radius:var(--m-r-pill); border:0; background:transparent; flex:0 0 auto}
.toggle::before{content:""; position:absolute; left:0; top:9px; width:46px; height:26px; border-radius:var(--m-r-pill); border:1px solid var(--m-line); background:var(--m-bg-raise)}
.toggle::after{content:""; position:absolute; top:12px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--m-ink-faint); transition:transform var(--m-dur-in) var(--m-ease), background var(--m-dur-in) var(--m-ease)}
.toggle[aria-checked="true"]::before{border-color:var(--m-accent)}
.toggle[aria-checked="true"]::after{transform:translateX(20px); background:var(--m-accent)}
.seg{display:inline-flex; border:1px solid var(--m-line); border-radius:var(--m-r-pill); overflow:hidden}
.seg button{background:transparent; border:0; color:var(--m-ink-dim); min-height:44px; padding:7px 14px; font-size:var(--m-fs-meta)}
.seg button.sel{background:var(--m-accent); color:var(--m-bg); font-weight:600}

/* ---- toast ---- */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%,20px);
  z-index:60; display:inline-flex; align-items:center; gap:9px;
  background:var(--m-bg-card); border:1px solid var(--m-accent); color:var(--m-ink);
  padding:11px 18px; border-radius:var(--m-r-pill); font-size:var(--m-fs-meta);
  opacity:0; pointer-events:none; transition:opacity var(--m-dur-in) var(--m-ease), transform var(--m-dur-in) var(--m-ease);
  max-width:88vw;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast .glyph{color:var(--m-accent)}

.fade-in{animation:fadeIn var(--m-dur-in) var(--m-ease)}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

@media (max-width:420px){
  #app{padding:18px 16px 96px}
  .hero h1{font-size:2.1rem}
  .orbwrap{width:190px; height:190px}
  .card{padding:18px}
  .scale{gap:4px}
  .scale button{min-width:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}
[data-reduce="1"] :is(.orb,.breath-orb,.ob,.o-glow,.orb-blob,.atmo i,.settle-in,.bloom){animation:none !important}
[data-reduce="1"] :is(.session .fadeable,.veil){transition:none !important}