/* Air: this stop's own drawings (05-17 sections.air). Shared looks are in living/explain.css. */
.ar-breath { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.ar-lung { max-width: 380px; width: 100%; justify-self: center; }
.ar-lung canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.ar-read { display: grid; gap: 10px; padding: 22px; border-radius: 16px; background: rgba(255,255,255,0.62); border: 1px solid var(--rule); }
.ar-gases { display: grid; gap: 9px; margin-top: 6px; }
.ar-gas { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 14px; }
.ar-gas i { width: 14px; height: 14px; border-radius: 50%; }
.ar-gas span { font: 600 13px/1 var(--wum-mono); color: var(--muted); }
.ar-gas em { grid-column: 2 / 4; height: 6px; border-radius: 4px; background: rgba(0,0,0,0.07); overflow: hidden; }
.ar-gas u { display: block; height: 100%; border-radius: inherit; text-decoration: none; transition: width 0.9s cubic-bezier(.3,.7,.2,1); }
.ar-safe { margin: 4px 0 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.ar-cols, .ar-day { display: block; width: 100%; height: auto; }
.ar-note { margin: 14px 0 0; max-width: 64ch; }
.ar-rise { animation: ar-rise 2.4s linear infinite; transform-box: fill-box; }
@keyframes ar-rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }
.ar-out { animation: ar-out 2.4s linear infinite; transform-box: fill-box; }
@keyframes ar-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(60px); opacity: 0; } }
.ar-mist { animation: pulse 3s ease-in-out infinite; }
@media (max-width: 960px) { .ar-breath { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ar-rise, .ar-out, .ar-mist { animation: none; } }

.ar-machine-cta { margin: 24px 0 0; }
.ar-machine-cta a { display: inline-flex; align-items: center; gap: 18px; padding: 16px 20px; background: #223448; color: #fff; font-weight: 600; border-radius: 8px; text-decoration: none; }
.ar-machine-cta a:hover { background: #305473; }
.ar-machine-cta a:focus-visible { outline: 3px solid #D99160; outline-offset: 4px; }