/* Nasal cycle lesson. All rules scoped under .nas-* */
.nas-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.nas-stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 16px; }

/* The face and its two plumes of breath. */
.nas-face { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 300px; }
.nas-head { width: 100%; aspect-ratio: 624 / 640; }
.nas-head img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The cold glass she breathes on, just under her chin, with one fog patch per nostril. */
.nas-glass { position: relative; margin-top: -26%; width: 74%; aspect-ratio: 3 / 1; border-radius: 18px; z-index: 1;
  background: linear-gradient(160deg, #3a4660, #1c2233 60%, #2b3550); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 10px 22px rgba(0,0,0,.5); transform: perspective(500px) rotateX(38deg); }
.nas-fog { position: absolute; top: 18%; width: 34%; height: 64%; border-radius: 50%; transition: transform .3s, opacity .3s;
  background: radial-gradient(closest-side, rgba(235,240,255,.95), rgba(220,230,255,.55) 60%, rgba(220,230,255,0)); filter: blur(2px); }
.nas-fa { left: 12%; box-shadow: 0 0 0 0 transparent; }
.nas-fb { right: 12%; }
.nas-fa::after, .nas-fb::after { content: ''; position: absolute; left: 50%; bottom: -16%; width: 10px; height: 10px; margin-left: -5px; border-radius: 3px; }
.nas-fa::after { background: #fcc050; } .nas-fb::after { background: #8f78ff; }
.nas-face.nas-small { max-width: 210px; }

.nas-hero { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nas-hero img { display: block; height: 230px; width: auto; max-width: 100%; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }
.nas-hero.nas-wide img { height: auto; width: 100%; max-width: 330px; }
.nas-hero figcaption { font: 600 13px var(--sans); color: var(--dim); text-align: center; animation: nasIn .4s ease-out both; }
@keyframes nasIn { from { opacity: 0; transform: translateY(6px); } }

/* The day. */
.nas-day { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.nas-time { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.nas-time b { font: 800 24px var(--serif); color: var(--text); font-variant-numeric: tabular-nums; min-width: 96px; text-align: center; }
.nas-z { font: 700 12px var(--sans); color: var(--dim); padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.06); }
.nas-z.on { color: #c9bcff; background: rgba(123,92,253,.22); }
.nas-track { position: relative; height: 48px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); touch-action: none; cursor: pointer; }
.nas-night { position: absolute; top: 0; bottom: 0; left: 62.5%; width: 33.3%; background: rgba(60,50,140,.35); border-radius: 0; pointer-events: none; }
.nas-strip { position: absolute; left: 0; top: 8px; width: 100%; height: 32px; pointer-events: none; opacity: .9; }
.nas-knob { position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid #fff; background: var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,.45); padding: 0; pointer-events: none; }
.nas-key { display: flex; justify-content: center; align-items: center; gap: 6px; font: 600 12px var(--sans); color: var(--dim); }
.nas-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.nas-key .ka { background: #fcc050; } .nas-key .kb { background: #8f78ff; }
.nas-ends { display: flex; justify-content: space-between; font: 600 12px var(--sans); color: var(--dim); }

/* The inside. */
.nas-in { position: relative; width: 100%; max-width: 320px; }
.nas-cut { display: block; width: 100%; height: auto; }
.nas-wall { fill: #f1b9a2; }
.nas-way { fill: #3a2236; }
.nas-sept { fill: #e8a690; }
.nas-t { stroke: rgba(255,255,255,.45); stroke-width: 1.5; }
.nas-curl { fill: none; stroke: #f7e3d6; stroke-width: 5; stroke-linecap: round; }
.nas-zoom { position: relative; width: 100%; max-width: 320px; aspect-ratio: 300 / 240; overflow: hidden; }
.nas-zface { position: absolute; left: 50%; top: 0; height: 100%; width: auto; transform-origin: 50% 51%; translate: -50% 0; }
.nas-zring { position: absolute; left: 50%; top: 51%; width: 44px; height: 30px; margin: -15px 0 0 -22px; border: 2px solid var(--gold); border-radius: 14px; transition: opacity .3s; }
.nas-zoom .nas-in { position: absolute; inset: 0; max-width: none; }
.nas-flip img { transform: scaleX(-1); }
.nas-flow path { stroke: #9fe0ff; stroke-width: 5; stroke-linecap: round; fill: none; stroke-dasharray: 14 12; animation: nasUp 0.9s linear infinite; }
.nas-flow { transition: opacity .4s; }
@keyframes nasUp { to { stroke-dashoffset: 26; } }
.nas-noflow .nas-flow { opacity: 0 !important; }
.nas-lab { font: 700 15px var(--sans); fill: #d8d0f0; text-anchor: middle; }
.nas-hit { position: absolute; top: 8%; height: 84%; width: 46%; border: 0; padding: 0; background: transparent; border-radius: 40px; cursor: pointer; }
.nas-hit-a { left: 3%; }
.nas-hit-b { right: 3%; }
@media (max-height: 700px) {
  .nas-hero img { height: 190px; }
  .nas-face.nas-small { max-width: 165px; }
  .nas-in { max-width: 280px; }
}