/* Breath Meditation Guide (BMG), 10 Oct 2026, Jason DM 1360: the 8O8 breath page as a product of its own. Same ground,
   same light, the 16 s cycle (4 in, 2 hold, 8 out, 2 hold) by default; since DM 1387 the timing is set on the page and bmg.js
   lays the keyframes on it with the Web Animations API (the @keyframes that were here are in its restartLight). The centre ring teal at rest and on the holds (DM 1364),
   maroon on the inhale, blue on the exhale. One screen, built for a phone's home screen. */
@font-face { font-family: "Jost"; src: url(/fonts/jost-normal-300.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url(/fonts/jost-normal-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --ground: #1A1714; --ink: #EAE2D3; --dim: #9C9285; --gold: #C9A227; --teal: #3FA7A3; --maroon: #A3303F; --blue: #3A6FC4;
  --gold-soft: rgba(201,162,39,.42); --teal-soft: rgba(63,167,163,.45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; min-height: 100%; background: var(--ground); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--ground); color: var(--ink);
  font: 300 17px/1.6 "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  padding: calc(16px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  position: relative; overflow-x: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201,162,39,.12), rgba(201,162,39,.04) 45%, transparent 70%),
    radial-gradient(ellipse 120% 70% at 50% 110%, rgba(0,0,0,.5), transparent 60%);
}
.app { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; min-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.kicker { font-size: 12px; font-weight: 400; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin: 0; }
.quiet { color: var(--dim); font-size: 14px; }
/* the light */
.breath { position: relative; padding: 0; margin-top: 6px; }
.mark-wrap { position: relative; width: 300px; height: 300px; margin: -24px auto 0; z-index: 2; }
.halo { position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vw; margin: -50vw 0 0 -50vw; pointer-events: none; z-index: 1;
  border-radius: 50%; opacity: .10; transform: scale(.62); will-change: opacity, transform;
  background: radial-gradient(circle, rgba(255,214,120,.55) 0%, rgba(232,164,52,.34) 18%, rgba(217,146,42,.14) 36%, rgba(217,146,42,.04) 52%, transparent 66%); }
.mark, .glow { position: absolute; left: -53.333%; top: -53.333%; width: 206.667%; height: 206.667%; display: block; z-index: 2;
  pointer-events: none; transform: scale(1); will-change: transform; }
/* DM 1449: the glow is baked (bake_glow.py; mark_lo = rest, mark_hi = full, each padded 160 px a side) and cross-faded by opacity;
   an animated drop-shadow filter is repainted every frame and crashed a friend's iPhone 30 s in */
.glow { opacity: 0; will-change: opacity, transform; }
.reflection { width: 300px; height: 300px; display: block; margin: -213px auto -175px; pointer-events: none; user-select: none;
  transform: scaleY(-1); opacity: .22; filter: blur(1.6px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 36%, rgba(0,0,0,0) 62%); mask-image: linear-gradient(to top, rgba(0,0,0,1) 36%, rgba(0,0,0,0) 62%); }
/* the centre ring's colour follows the phase: a layer masked to the O glyph, animated from bmg.js. Every change is a 2 s blend
   centred on the boundary; at rest, and through the prelude count, it is teal. */
.ring { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--teal);
  -webkit-mask: url(/img/mark_o.png) center / contain no-repeat; mask: url(/img/mark_o.png) center / contain no-repeat;
  will-change: background-color, transform; transition: background-color 2s linear; }
/* at rest (before Begin, after Stop or the close) the light is the exhalation hold: the base styles above */
/* DM 1749-1782: the seated figure for Chakra and Kriya (index.html .fig-wrap). The halo is a gold disc behind the figure that rests at a
   third of its full brightness and swells on the inhale (mock14, DM 1778: the rest must be dark so the inhale shows); the active chakra's glow,
   ring and dot breathe with it. Keyframes come from bmg.js strike(); the values here are the rest. Nothing is filtered or repainted per frame. */
.fig-wrap { position: relative; width: 260px; margin: 36px auto -30px; z-index: 2; }   /* DM 1784: the head was in the intro text; 60 px lower, two returns and a little */
.fig-halo { position: absolute; left: 50%; top: 47.7%; width: 136%; aspect-ratio: 1 / 1; margin: -68% 0 0 -68%; border-radius: 50%; pointer-events: none; z-index: 1;
  opacity: .32; transform: scale(.84); will-change: opacity, transform;
  background: radial-gradient(circle closest-side, rgba(255,214,120,.62) 0%, rgba(232,164,52,.40) 30%, rgba(217,146,42,.16) 62%, rgba(217,146,42,.04) 85%, transparent 100%); }
.fig { position: relative; display: block; width: 100%; height: auto; z-index: 2; overflow: visible; }
.fig-shade { fill: var(--ground); stroke: none; }
.fig-rings circle { fill: none; stroke-width: 5.5; }
.fig-glow { opacity: .3; transform: scale(.5); transform-box: fill-box; transform-origin: center; will-change: opacity, transform; }
.fig-ring-on { fill: none; stroke-width: 9; transform: scale(.86); transform-box: fill-box; transform-origin: center; will-change: transform, opacity; }
.fig-rings circle, .fig-dot { will-change: opacity; }
.fig-dot { fill-opacity: .9; }
/* DM 1807 (12 Oct 2026): before the first bowl and after Stop no chakra is lit: the seven small rings all show, the big ring, dot and glow do not */
.fig-wrap.rest .fig-glow, .fig-wrap.rest .fig-ring-on, .fig-wrap.rest .fig-dot { opacity: 0; }
.fig-wrap.rest .fig-rings circle { opacity: 1; }
@media (min-width: 700px) { .fig-wrap { width: 320px; margin-top: 32px; } }
/* the words */
.phase { margin: 26px 0 0; font-size: 13px; font-weight: 400; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); min-height: 1.4em; }
.remaining { margin: 10px 0 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); animation: flash 1.2s ease-out both; }
.count { margin: 6px 0 14px; letter-spacing: .04em; color: var(--dim); font-size: 15px; }
.minutes { margin: 0 0 22px; letter-spacing: .04em; }
.sound { margin: -8px 0 18px; color: var(--teal); font-size: 15px; letter-spacing: .04em; }
.soundtoggle { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 6px 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }   /* DM 1601: tap to turn sound off and on */
.soundtoggle[aria-pressed="false"] { color: var(--dim); }   /* Jason DM 1518: users did not know there is sound */
.soundtoggle:disabled { cursor: default; }   /* DM 1682: the breath switch sits idle while Sound is off */
.timing { margin: 4px 0 0; letter-spacing: .04em; }
.timing label { color: var(--dim); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; margin: 0 2px 0 8px; }
.timing label:first-child { margin-left: 0; }
.timing input[type] { width: 2.2em; }
.minutes label { color: var(--dim); font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; margin-right: 6px; }
.minutes input, .timing input { width: 3.2em; margin: 0 .25em; padding: 4px 6px; font: inherit; font-size: 20px; text-align: center; color: var(--teal); background: transparent;
  border: 0; border-bottom: 1px solid var(--teal-soft); border-radius: 0; -moz-appearance: textfield; appearance: textfield; }
.minutes input::-webkit-outer-spin-button, .minutes input::-webkit-inner-spin-button, .timing input::-webkit-outer-spin-button, .timing input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.minutes input:focus, .timing input:focus { outline: none; border-bottom-color: var(--teal); }
.minutes input:disabled, .timing input:disabled { opacity: .6; }
button {
  display: inline-block; font: inherit; font-weight: 400; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); background: transparent; border: 1px solid var(--gold-soft); border-radius: 0; padding: 12px 26px 11px 30px;
  cursor: pointer; transition: background .3s, border-color .3s; text-align: center; min-width: 140px;
}
button:hover, button:focus-visible { background: rgba(201,162,39,.08); border-color: var(--gold); outline: none; }
.breath.live button { color: var(--dim); border-color: rgba(156,146,133,.35); }
.breath.closed .phase { font-size: 22px; letter-spacing: .3em; text-transform: none; animation: namaste 2.4s ease-out both; }
@keyframes namaste { from { opacity: 0; } to { opacity: 1; } }
.breath.prelude .phase { font-size: 30px; letter-spacing: .2em; text-transform: none; }
.breath.cue .phase { font-size: 15px; letter-spacing: .12em; text-transform: none; text-wrap: balance; }   /* DM 1929: "Breathe into and out of the solar plexus chakra" wraps on phones under 430 px; balanced lines */
.phase.flash { animation: flash 1s ease-out both; }
.breath.cue .phase.flash { animation: flash 4s ease-out both; }
@keyframes flash { 0% { opacity: 0; transform: scale(1.12); } 18% { opacity: 1; transform: scale(1); } 100% { opacity: .55; transform: scale(1); } }
#note { margin: 14px auto 0; max-width: 30em; }
/* the words below, and the sign-off */
.intro { max-width: 32em; margin: 14px auto 0; }   /* DM 1400: above the light */
.intro p { margin: 0 0 14px; }
footer { margin-top: auto; padding-top: 28px; }
.eight { font-size: 12px; letter-spacing: .34em; color: var(--dim); }
@media (min-width: 700px) { .mark-wrap, .reflection { width: 360px; height: 360px; } .mark-wrap { margin-top: -28px; } .reflection { margin: -255px auto -187px; } .halo { width: 680px; height: 680px; margin: -340px 0 0 -340px; } }
@media (prefers-reduced-motion: reduce) { .halo { opacity: .35; transform: scale(.8); } .fig-halo { opacity: .6; transform: scale(.95); } .fig-glow { opacity: .7; transform: scale(.8); } .ring { background: var(--teal); transition: none; } * { transition: none !important; } }
[hidden] { display: none !important; }
/* DM 1397: the three patterns, and the reason for the one in use */
.presets { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 60px 0 12px; }   /* DM 1621: three lines below the cue line (DM 1604 had two, on the timing row) */
.breath .preset { min-width: 0; padding: 7px 14px 6px 16px; font-size: 11px; letter-spacing: .2em; color: var(--dim); border-color: rgba(63,167,163,.3); }
.breath .preset.on { color: var(--teal); border-color: var(--teal); }
.breath .preset:disabled { opacity: .5; cursor: default; }
.why { max-width: 27em; margin: 0 auto 22px; font-size: 14px; line-height: 1.55; color: var(--dim); }
.why p { margin: 0 0 6px; }
.why .cite { font-size: 12px; letter-spacing: .02em; }
.why a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--teal-soft); }
.breath .preset:hover, .breath .preset:focus-visible { background: rgba(63,167,163,.08); border-color: var(--teal); }
@media (max-width: 410px) { .timing label { letter-spacing: .06em; margin-left: 4px; } .timing input[type] { width: 1.8em; margin: 0 .1em; padding: 4px 2px; } .count { font-size: 14px; } }
/* DM 1558: Bell, a chakra meditation: one singing bowl at a chosen interval; the ring takes the chakra's colour */
.more { margin-top: 40px; }   /* DM 1621: two lines between the selectors and the rest of the instructions */
.chakras { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 27em; margin: 0 auto 12px; }
.breath .chakra { min-width: 0; padding: 7px 12px 6px 12px; font-size: 11px; letter-spacing: .14em; color: var(--dim); border-color: rgba(156,146,133,.3); }
.breath .chakra.on { color: var(--ink, #EAE2D3); border-color: var(--gold); }
.breath .chakra:disabled { opacity: .5; cursor: default; }
.chakra .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 7px 1px 0; vertical-align: middle; }
.dot-root { background: #C0392B; } .dot-sacral { background: #E67E22; } .dot-solar { background: #F1C40F; } .dot-heart { background: #27AE60; }
.dot-throat { background: #3498DB; } .dot-third { background: #4B3F9E; } .dot-crown { background: #8E44AD; }
.build { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .08em; color: var(--dim); opacity: .6; }   /* DM 1607: which deploy the phone is running */
.kriyatotal { margin: 4px 0 14px; letter-spacing: .04em; color: var(--dim); font-size: 15px; }