/* /box-breathing-timer only: the breathing guide. Scoped under #bbtApp. Movement is set
   from script on each tick (no CSS animation), so reduced motion simply stops it. */
#bbtApp .bbt-guide { max-width: 280px; margin: 4px auto 12px; }
#bbtApp .bbt-guide svg { width: 100%; height: auto; display: block; }
#bbtApp .bbt-path { fill: none; stroke: var(--bm-line-2, var(--bm-line)); stroke-width: 6; stroke-linejoin: round; }
#bbtApp .bbt-side { fill: none; stroke: var(--bm-accent); stroke-width: 6; stroke-linecap: round; }
#bbtApp .bbt-dot { fill: var(--bm-accent-strong, var(--bm-accent)); }
#bbtApp .bbt-ring { fill: none; stroke: var(--bm-line-2, var(--bm-line)); stroke-width: 2; }
#bbtApp .bbt-lung { fill: var(--bm-accent-soft); stroke: var(--bm-accent); stroke-width: 3; }
#bbtApp .bbt-label { font-size: 13px; fill: var(--bm-ink-3); }
#bbtApp .bbt-hero { justify-content: center; text-align: center; }
#bbtApp .bbt-secs { grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }
#bbtApp .ic-fieldset { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
#bbtApp .ic-fieldset legend { font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
@media (forced-colors: active) {
    #bbtApp .bbt-path, #bbtApp .bbt-ring { stroke: GrayText; }
    #bbtApp .bbt-side, #bbtApp .bbt-lung { stroke: Highlight; fill: none; }
    #bbtApp .bbt-dot { fill: Highlight; }
    #bbtApp .bbt-label { fill: CanvasText; }
}
@media (prefers-reduced-motion: reduce) { #bbtApp .xt-meter > span { transition: none; } }
#bbtApp .xt-meter > span { background: var(--bm-accent); }