/* 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 { width: 300px; height: 300px; display: block; position: relative; z-index: 2;
  transform: scale(1); filter: drop-shadow(0 0 10px rgba(217,146,42,.14)) drop-shadow(0 0 2px rgba(201,162,39,.2)); will-change: filter, transform; }
.reflection { width: 300px; height: 300px; display: block; margin: -213px auto -115px; 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 */
/* the words */
.phase { margin: 46px 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; }
.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; }
.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, .mark, .reflection { width: 360px; height: 360px; } .mark-wrap { margin-top: -28px; } .reflection { margin: -255px auto -127px; } .halo { width: 680px; height: 680px; margin: -340px 0 0 -340px; } }
@media (prefers-reduced-motion: reduce) { .halo { opacity: .35; 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: 0 0 12px; }
.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; } }