/* BreatheFirst — standalone tool pages (vagus-nerve-reset, box-breathing, physiological-sigh)
   Self-contained: these pages do not load app.js or style.css. */
:root {
  --bg: #0A1628; --bg2: #122444; --mint: #7ECFB3; --mint-deep: #4AA88A; --lav: #B8AEDD; --coral: #F4845F;
  --text: #fff; --text2: rgba(255,255,255,0.72); --muted: rgba(255,255,255,0.45);
  --glass: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.10);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --head: 'DM Serif Display', Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 50% 20%, #13284d 0%, var(--bg) 55%); color: var(--text); font-family: var(--font); line-height: 1.55; min-height: 100vh; }
a { color: var(--mint); }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 20px 64px; }
.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--head); font-size: 1.15rem; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.top-link { color: var(--text2); text-decoration: none; font-size: 0.85rem; border: 1px solid var(--border); padding: 6px 12px; border-radius: 100px; }
h1 { font-family: var(--head); font-weight: 400; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.15; margin: 22px 0 8px; }
.lede { color: var(--text2); font-size: 1.02rem; margin: 0 0 22px; }

/* Tool */
.tool { background: var(--glass); border: 1px solid var(--border); border-radius: 28px; padding: 26px 20px 22px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.step { color: var(--mint); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; min-height: 1.2em; margin-bottom: 14px; }
.ring { position: relative; width: min(66vw, 260px); height: min(66vw, 260px); margin: 0 auto; display: grid; place-items: center; }
.ring::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.14); }
.circle { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, rgba(126,207,179,0.55), rgba(126,207,179,0.15) 65%, rgba(126,207,179,0.08)); border: 2px solid rgba(126,207,179,0.55); transform: scale(0.72); transition: transform 4s cubic-bezier(.4,0,.2,1), background 1s, border-color 1s; box-shadow: 0 0 60px rgba(126,207,179,0.18); }
.circle.inhale { transform: scale(1); }
.circle.hold { transform: scale(1); background: radial-gradient(circle at 40% 35%, rgba(184,174,221,0.6), rgba(184,174,221,0.2) 65%, rgba(184,174,221,0.1)); border-color: rgba(184,174,221,0.7); }
.circle.hold-low { transform: scale(0.72); background: radial-gradient(circle at 40% 35%, rgba(184,174,221,0.6), rgba(184,174,221,0.2) 65%, rgba(184,174,221,0.1)); border-color: rgba(184,174,221,0.7); }
.circle.exhale { transform: scale(0.72); background: radial-gradient(circle at 40% 35%, rgba(244,132,95,0.45), rgba(244,132,95,0.14) 65%, rgba(244,132,95,0.08)); border-color: rgba(244,132,95,0.6); }
.circle.sip { transform: scale(1.08); transition-duration: 0.9s; }
.label { font-family: var(--head); font-size: 1.5rem; line-height: 1.1; }
.count { display: block; font-size: 2.2rem; font-weight: 300; margin-top: 4px; min-height: 1.2em; font-variant-numeric: tabular-nums; }
.tip { color: var(--text2); font-size: 0.95rem; margin: 18px 0 4px; min-height: 1.4em; }
.round { color: var(--muted); font-size: 0.82rem; min-height: 1.2em; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; }
.chip { background: rgba(255,255,255,0.07); border: 1px solid var(--border); color: #fff; border-radius: 100px; padding: 7px 14px; font-size: 0.82rem; cursor: pointer; font-family: inherit; }
.chip.on { background: rgba(126,207,179,0.22); border-color: var(--mint); }
.start { margin-top: 16px; width: 100%; max-width: 320px; padding: 15px 20px; border: none; border-radius: 100px; background: linear-gradient(135deg, var(--mint), var(--mint-deep)); color: var(--bg); font-weight: 700; font-size: 1.05rem; cursor: pointer; box-shadow: 0 10px 30px rgba(126,207,179,0.25); font-family: inherit; }
.start:active { transform: scale(0.98); }
.done { display: none; margin-top: 16px; color: var(--text2); font-size: 0.95rem; }
.done.show { display: block; }
.done strong { color: #fff; }

/* Copy */
.how { margin-top: 30px; }
.how h2 { font-family: var(--head); font-weight: 400; font-size: 1.35rem; margin: 0 0 10px; }
.how ol, .how ul { padding-left: 20px; color: var(--text2); margin: 0; }
.how li { margin: 6px 0; }
.how li strong { color: #fff; font-weight: 600; }
.cite { color: var(--muted); font-size: 0.8rem; margin-top: 12px; }
.cite a { color: var(--muted); }

/* Store banner */
.get { margin-top: 30px; background: linear-gradient(135deg, rgba(126,207,179,0.14), rgba(184,174,221,0.14)); border: 1px solid rgba(126,207,179,0.3); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.get p { margin: 0; color: var(--text2); font-size: 0.95rem; }
.get p strong { color: #fff; }
.get-links { display: flex; flex-wrap: wrap; gap: 8px; }
.get-links a { text-decoration: none; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid var(--border); border-radius: 100px; padding: 9px 14px; font-size: 0.88rem; }
.get-links a.primary { background: linear-gradient(135deg, var(--mint), var(--mint-deep)); color: var(--bg); font-weight: 700; border: none; }
.more { margin-top: 18px; color: var(--muted); font-size: 0.85rem; }
.more a { color: var(--text2); margin-right: 12px; }
footer { margin-top: 36px; color: var(--muted); font-size: 0.78rem; border-top: 1px solid var(--border); padding-top: 14px; }
footer a { color: var(--text2); }
@media (prefers-reduced-motion: reduce) { .circle { transition-duration: 0.3s !important; } }