/* Breathe-up · "Contour": warm graphite, topographic line art, riso-style overprinted washes,
   Cormorant Garamond for display, Hanken Grotesk for text. */

@property --c1 { syntax: '<color>'; inherits: true; initial-value: #ffd9c4; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #e5aa55; }

:root {
  --bg: #1c1b1e;
  --bg-2: #232226;
  --ink: #f0ebe3;
  --muted: #ada79f; /* ≈ 7:1 on --bg */
  --dim: #98928a; /* ≈ 5.3:1 on --bg */
  --line: rgba(240, 235, 227, 0.1);
  --line-2: rgba(240, 235, 227, 0.2);
  --glass: rgba(30, 29, 33, 0.94);

  /* Inks */
  --aqua: #8adbe0;
  --lilac: #b7a4ff;
  --apricot: #ffb38a;
  --sun: #ffd46b;
  --pink: #ff8fbf;
  --cobalt: #7da2ff;
  --verdigris: #62c2ae;
  --ochre: #e5aa55;
  --tangerine: #ff9e6b;
  --accent: var(--apricot);

  /* Washes behind the contour art; each section and practice sets its own pair. */
  --sky1: var(--apricot);
  --sky2: var(--lilac);

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: max(16px, env(safe-area-inset-left));
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Paper ───────────────────────────────────────────── */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.grain {
  position: absolute; inset: -50%; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body[data-section='arrive'] { --sky1: var(--apricot); --sky2: var(--lilac); }
body[data-section='hum'] { --sky1: var(--pink); --sky2: var(--cobalt); }
body[data-section^='round'] { --sky1: var(--tangerine); --sky2: var(--pink); }
body[data-section='close'] { --sky1: var(--verdigris); --sky2: var(--aqua); }
body[data-section^='fire'], body[data-section^='heat'] { --sky1: var(--tangerine); --sky2: var(--sun); }
body[data-section^='calm'], body[data-section^='wave'] { --sky1: var(--aqua); --sky2: var(--verdigris); }
body[data-section^='night'], body[data-section^='sleep'] { --sky1: var(--lilac); --sky2: var(--cobalt); }
body[data-section^='clear'], body[data-section^='nose'] { --sky1: var(--verdigris); --sky2: var(--cobalt); }
body[data-section^='table'], body[data-section^='deep'] { --sky1: var(--cobalt); --sky2: var(--lilac); }
body[data-section^='balance'] { --sky1: var(--lilac); --sky2: var(--aqua); }
body[data-section^='seat'] { --sky1: var(--sun); --sky2: var(--aqua); }

/* Contour art behind the library and practice headers */
.topo {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 680px); aspect-ratio: 420 / 340; z-index: 0; pointer-events: none; overflow: hidden;
  /* Feathered edges, so the map dissolves instead of stopping at its box. */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 97%), linear-gradient(to right, transparent, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 55%, transparent 97%), linear-gradient(to right, transparent, #000 14%);
  mask-composite: intersect;
}
#detail .topo { aspect-ratio: 420 / 300; }
@media (min-width: 700px) {
  .topo {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 97%), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 97%), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  }
}
.topo svg { display: block; width: 100%; height: 100%; }
.topo .w1, .topo .w2 { mix-blend-mode: screen; transition: fill 1.2s ease; }
.topo .w1 { fill: var(--sky1); opacity: 0.5; }
.topo .w2 { fill: var(--sky2); opacity: 0.45; }
.topo path { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: var(--o); stroke-linejoin: round; }
.topo path.ix { stroke: var(--sky1); stroke-width: 2.2; opacity: 0.75; transition: stroke 1.2s ease; }

/* ── Screens ─────────────────────────────────────────── */
.screen { display: none; position: relative; min-height: 100svh; padding: max(20px, env(safe-area-inset-top)) var(--gutter) max(24px, env(safe-area-inset-bottom)); }
.screen.is-active { display: flex; flex-direction: column; animation: rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.wrap { position: relative; z-index: 1; width: 100%; max-width: 560px; margin: 0 auto; }

/* ── Header ──────────────────────────────────────────── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mark { white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1; color: var(--ink); }
.top-actions { display: flex; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px;
  border: 1px solid var(--line-2); background: rgba(28, 27, 30, 0.62); border-radius: 999px;
  padding: 7px 16px; font-size: 13.5px; color: var(--ink); white-space: nowrap;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .2s, background .2s;
}
.chip:hover { border-color: rgba(240, 235, 227, 0.36); background: rgba(40, 39, 43, 0.75); }
.chip.icon { padding: 0; width: 44px; justify-content: center; }
.chip svg { width: 18px; height: 18px; display: block; }
a.chip { text-decoration: none; }

/* ── Type ────────────────────────────────────────────── */
.hero { margin-top: clamp(120px, 20vh, 180px); }
#detail .hero { margin-top: clamp(84px, 13vh, 130px); }
.eyebrow { margin: 0 0 12px; font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(52px, 15vw, 88px); line-height: 0.95; letter-spacing: -0.01em; margin: 0; }
h1 em { font-style: italic; font-weight: 400; }
.lede { color: var(--muted); font-size: 15.5px; line-height: 1.55; max-width: 36ch; margin: 18px 0 0; }
.hint { color: var(--dim); font-size: 13.5px; text-align: center; margin: 14px 0 0; }

/* ── Library ─────────────────────────────────────────── */
#library .wrap { padding-bottom: 12px; }
.shelf { margin-top: clamp(28px, 5vh, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.moment { grid-column: 1 / -1; margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.moment:first-child { margin-top: 0; }
.moment h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 300; line-height: 1.1; }
.moment p { margin: 0; font-size: 13px; color: var(--muted); }
.tile {
  --rx: 0deg; --ry: 0deg;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  min-height: 172px; padding: 16px; border: 1px solid var(--line-2); border-radius: 22px;
  color: inherit; text-decoration: none; background: rgba(28, 27, 30, 0.4);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s, background .3s, box-shadow .45s;
}
@media (hover: hover) {
  .tile:hover {
    border-color: color-mix(in oklab, var(--wash, #fff) 45%, var(--line-2));
    background: radial-gradient(240px circle at var(--mx, 75%) var(--my, 25%), color-mix(in oklab, var(--wash, #fff) 17%, transparent), transparent 72%), rgba(40, 39, 43, 0.55);
    transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px);
    box-shadow: 0 22px 44px -28px color-mix(in oklab, var(--wash, #fff) 70%, transparent);
  }
}
.tile:focus-visible { border-color: color-mix(in oklab, var(--wash, #fff) 60%, var(--line-2)); outline: none; }
.tile:active { transform: scale(0.985); transition-duration: .1s; }
.tile.wide { grid-column: span 2; flex-direction: row; align-items: stretch; min-height: 190px; padding: 20px; }
.tile-art svg { display: block; width: 48px; height: 48px; overflow: visible; }
.tile.wide .tile-art { align-self: center; flex-shrink: 0; }
.tile.wide .tile-art svg { width: 116px; height: 116px; }
.tile-art path, .tile-art rect, .tile-art circle:not(.wash) { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tile.wide .tile-art svg :is(path, rect, circle:not(.wash)) { stroke-width: 0.6; }
.tile-art .wash { opacity: 0.6; }
.tile-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tile.wide .tile-text { justify-content: flex-end; }
.tile-title { font-family: var(--serif); font-size: 25px; line-height: 1; }
.tile.wide .tile-title { font-size: 38px; font-weight: 300; }
.tile-title em { font-style: italic; font-weight: 400; }
.tile-meta { font-size: 10.5px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.tile-blurb { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
#library .hint { margin-top: 28px; font-family: var(--serif); font-style: italic; font-size: 18px; }

/* ── Practice page ───────────────────────────────────── */
.outline { margin-top: clamp(20px, 4vh, 32px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.outline.notes { margin-top: 0; border-top: 0; }
.outline summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; min-height: 52px; padding-top: 12px; white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: 22px; }
.outline summary::-webkit-details-marker { display: none; }
.outline summary::after { content: '+'; margin-left: auto; font-family: var(--sans); font-style: normal; font-size: 20px; line-height: 1; color: var(--muted); transition: transform .2s; }
.outline[open] summary::after { transform: rotate(45deg); }
.outline summary .muted { font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.map { list-style: none; padding: 0; margin: 0; display: grid; counter-reset: part; }
.map li { counter-increment: part; display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 6px; padding: 9px 0; border-top: 1px solid var(--line); }
.map .dot::before { content: counter(part, lower-roman); font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--muted); }
.map .name { font-size: 15px; }
.map .what { display: block; font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.3; color: var(--dim); }
.map .len { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--muted); }

.cta { margin-top: auto; padding-top: 28px; }
.intensity-row { margin-top: 22px; display: grid; gap: 4px; justify-items: start; }
.cta .intensity-row { margin: 0 0 12px; }
.intensity-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; min-height: 1.45em; }
.speaker-row .intensity-note:empty { display: none; }
.cta .seg { border: 0; border-radius: 0; padding: 0; gap: 2px 10px; }
.cta .seg button { border-radius: 0; min-height: 44px; padding: 6px 2px; font-size: 14.5px; color: var(--muted); }
.cta .seg button[aria-pressed='true'] { background: none; color: var(--ink); font-weight: 500; box-shadow: inset 0 -1.5px 0 var(--sky1); }

.begin {
  width: 100%; border: 0; border-radius: 999px; padding: 12px 24px 12px 30px; min-height: 64px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ink); color: var(--bg);
  box-shadow: 0 18px 44px -22px var(--sky1);
  transition: transform .2s, box-shadow .2s, opacity .3s;
}
.begin > span:first-child { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1; }
.begin:hover { transform: translateY(-1px); }
.begin:active { transform: translateY(1px) scale(0.995); }
.begin[disabled] { opacity: 0.6; cursor: progress; }
.begin-sub { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: #4a4744; font-variant-numeric: tabular-nums; }
.begin-sub::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--sky1); }
.voice-note { color: var(--dim); font-size: 12.5px; text-align: center; margin: 6px 0 0; }
.voice-note.warn { color: var(--sun); }
.play-error { margin: 12px 0 0; color: #ffb7a8; font-size: 14.5px; text-align: center; }

/* Teacher's notes */
.notes-body { padding: 0 0 14px; }
.notes-body h4 { margin: 14px 0 4px; font: 500 11px/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.notes-body ul { margin: 0; padding-left: 18px; }
.notes-body li { color: #ddd7ce; font-size: 15px; margin: 5px 0; }
.notes-body .fixes { list-style: none; padding-left: 0; }
.notes-body .fixes li { display: grid; gap: 1px; padding: 6px 0; border-top: 1px solid var(--line); }
.notes-body .fixes li:first-child { border-top: 0; }
.notes-body .fixes em { color: var(--aqua); font-style: normal; }
.notes-body .fixes em::before { content: '→ '; }
.listen-row { margin: 2px 0 6px; }
.listen-row audio { width: 100%; height: 40px; margin-top: 4px; color-scheme: dark; }

/* ── Session ─────────────────────────────────────────── */
#session { --ink-a: var(--apricot); padding-left: 0; padding-right: 0; overflow: hidden; touch-action: manipulation; }
.progress { display: flex; gap: 4px; padding: 0 var(--gutter); }
.progress span { position: relative; height: 1.5px; background: var(--line-2); overflow: hidden; }
.progress i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--ink-a); }
.session-top { display: flex; justify-content: space-between; align-items: baseline; padding: 14px var(--gutter) 0; }
#section-name { font-family: var(--serif); font-style: italic; font-size: 21px; }
#time-left { font-size: 12px; letter-spacing: 0.18em; color: var(--muted); font-variant-numeric: tabular-nums; }

.stage { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; }
.orb-wrap { position: relative; width: min(78vw, 400px); aspect-ratio: 1; display: grid; place-items: center; }
.orb-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; text-shadow: 0 1px 20px rgba(20, 19, 22, 0.7); }
.phase { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 7.5vw, 36px); line-height: 1.1; color: var(--ink-a); min-height: 1.15em; transition: color 1s ease; }
.count { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 2px; min-height: 1.4em; font-variant-numeric: tabular-nums; }
.count b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 17vw, 84px); line-height: 0.95; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 4px; }

/* Contour (default): the map, with the words beneath it */
.contour, .bloom { position: absolute; inset: -8%; width: 116%; height: 116%; pointer-events: none; }
#session[data-visual='contour'] .orb-wrap { width: min(80vw, 46svh, 400px); }
/* The session map, feathered out at the edges: a little past its box on phones, well past it (the
   home page's scale) on larger screens. */
#session[data-visual='contour'] .contour {
  inset: -18%; width: 136%; height: 136%;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
@media (min-width: 700px) and (min-height: 700px) {
  #session[data-visual='contour'] .contour { inset: -48%; width: 196%; height: 196%; }
}
#session[data-visual='contour'] .orb-text, #session[data-visual='contour'] .caption { position: relative; z-index: 1; text-shadow: 0 1px 18px rgba(20, 19, 22, 0.9), 0 0 4px rgba(20, 19, 22, 0.6); }
/* Fixed heights under the map, so a count or a longer caption never moves the rings. */
#session[data-visual='contour'] .orb-text { position: static; margin-top: 10px; text-shadow: none; height: 148px; align-content: start; }
#session[data-visual='contour'] .orb, #session[data-visual='contour'] .bloom, #session[data-visual='contour'] .ring { display: none; }
#session[data-visual='bloom'] .orb, #session[data-visual='bloom'] .contour { display: none; }
#session[data-visual='orb'] .bloom, #session[data-visual='orb'] .contour { display: none; }

/* Orb */
#session { --c1: #ffd9c4; --c2: #e5aa55; transition: --c1 1.4s ease, --c2 1.4s ease; }
#session[data-phase='in'] { --c1: #d4f4f6; --c2: #8adbe0; }
#session[data-phase='top'], #session[data-phase='full'] { --c1: #ffe9c9; --c2: #ffb38a; }
#session[data-phase='out'] { --c1: #e6dcff; --c2: #b7a4ff; }
#session[data-phase='hum'] { --c1: #ffd3e6; --c2: #ff7eb6; }
#session[data-phase='empty'], #session[data-phase='bottom'] { --c1: #c4ece3; --c2: #3f8f80; }
#session[data-phase='pump'] { --c1: #ffd9c4; --c2: #ff9e6b; }
.orb { position: absolute; inset: 9%; border-radius: 50%; will-change: transform; transform: scale(var(--s, 0.6)); }
.orb .glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--c2) 45%, transparent) 0%, color-mix(in oklab, var(--c2) 15%, transparent) 40%, transparent 70%); }
.orb .body {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in oklab, var(--c1) 92%, white) 0%, transparent 42%), radial-gradient(circle at 50% 55%, var(--c1) 0%, var(--c2) 62%, color-mix(in oklab, var(--c2) 60%, #1c1b1e) 100%);
  box-shadow: inset -18px -24px 60px rgba(20, 19, 22, 0.35), inset 10px 14px 40px rgba(255, 255, 255, 0.12);
}
.orb .sheen { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.10), transparent 30%); animation: spin 18s linear infinite; mix-blend-mode: soft-light; }
@keyframes spin { to { transform: rotate(1turn); } }
#session[data-phase='hum'] .orb .body { animation: shimmer 0.12s steps(2) infinite; }
@keyframes shimmer { 50% { transform: scale(1.004); } }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); opacity: 0; transition: opacity .8s; }
#session[data-phase='empty'] .ring, #session[data-phase='full'] .ring { opacity: 1; }
.ring circle { fill: none; stroke-width: 1.6; }
.ring .track { stroke: var(--line); }
.ring .fill { stroke: color-mix(in oklab, var(--c1) 70%, white); stroke-opacity: 0.4; stroke-linecap: round; }

.caption {
  height: 5.2em; margin: 0 auto; padding: 0 calc(var(--gutter) + 12px); max-width: 30em; text-align: center;
  font-family: var(--serif); font-size: clamp(19px, 5vw, 23px); line-height: 1.32; color: #ddd7ce;
  opacity: 0; transform: translateY(6px); transition: opacity .7s ease, transform .7s ease;
}
.caption.show { opacity: 1; transform: none; }
.caption .tag { display: block; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-a); margin-bottom: 6px; }

.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px var(--gutter) 0; }
.ghost { background: none; border: 0; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 20px; min-height: 44px; padding: 8px 14px; margin-left: -14px; justify-self: start; }
.ghost:hover { color: var(--ink); }
.round-btn { width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; display: grid; place-items: center; }
.round-btn svg { width: 20px; height: 20px; }
.breathe { justify-self: end; min-height: 44px; border: 1px solid var(--ink-a); background: transparent; color: var(--ink-a); border-radius: 999px; padding: 10px 18px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .5s; }
#session[data-phase='empty'] .breathe, #session[data-phase='full'] .breathe { opacity: 1; pointer-events: auto; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 15px; }

/* ── Done ───────────────────────────────────────────── */
#done .wrap { margin-top: clamp(48px, 12vh, 120px); }
.hold-head { margin: 26px 0 -14px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.hold-head span { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--dim); }
.holds { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.holds li { border: 1px solid var(--line-2); border-radius: 18px; padding: 14px; }
.holds .k { color: var(--dim); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.holds .v { font-family: var(--serif); font-size: 36px; font-weight: 300; font-variant-numeric: tabular-nums; }
.after { color: var(--muted); }
.after li { margin: 6px 0; }
.primary { width: 100%; margin-top: 18px; border: 0; border-radius: 999px; min-height: 56px; padding: 14px; background: var(--ink); color: var(--bg); font-family: var(--serif); font-style: italic; font-size: 24px; }

/* ── Sheets ─────────────────────────────────────────── */
dialog.sheet {
  width: min(640px, 100%); max-width: 100%; max-height: min(88svh, 900px); margin: auto auto 0; padding: 0;
  border: 1px solid var(--line-2); border-bottom: 0; border-radius: 26px 26px 0 0;
  background: var(--glass); color: var(--ink); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 26px; border-bottom: 1px solid var(--line-2); } }
dialog.sheet[open] { animation: sheet .45s cubic-bezier(.2,.8,.2,1); }
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } }
dialog::backdrop { background: rgba(12, 11, 14, 0.6); backdrop-filter: blur(3px); }
.sheet-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 12px; background: linear-gradient(var(--glass) 70%, transparent); z-index: 1; }
.sheet-head h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 0; }
.sheet-body { padding: 0 22px 28px; overflow-y: auto; max-height: calc(min(88svh, 900px) - 64px); }
.sheet-body h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 23px; margin: 26px 0 6px; color: var(--accent); }
.sheet-body p, .sheet-body li { color: #ddd7ce; font-size: 15.5px; }
.sheet-body ul { padding-left: 18px; }
.sheet-body .muted { color: var(--dim); font-size: 13.5px; }
.sheet-body a { color: var(--aqua); text-underline-offset: 2px; }
.sheet-body .sources li { font-size: 13.5px; color: var(--muted); margin: 4px 0; }
.evidence { display: inline-block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; border: 1px solid currentColor; }
.evidence.solid { color: var(--verdigris); }
.evidence.some { color: var(--ochre); }
.evidence.spec { color: var(--pink); }

.setting { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.setting:first-child { border-top: 0; }
.setting.stack { flex-direction: column; align-items: stretch; }
.setting.stack .seg { align-self: flex-start; }
.setting small { display: block; color: var(--dim); font-size: 13.5px; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 24px; padding: 3px; flex-shrink: 0; }
.seg button { border: 0; background: none; min-height: 40px; padding: 6px 14px; border-radius: 999px; font-size: 14.5px; color: var(--muted); }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.seg button[hidden] { display: none; }
.switch { appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); transition: transform .2s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); background: var(--bg); }
.range { width: 100%; accent-color: var(--accent); min-height: 32px; }
.safety-list li { margin: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  .orb .sheen, #session[data-phase='hum'] .orb .body { animation: none; }
  .screen.is-active, dialog.sheet[open] { animation: none; }
  .caption { transform: none; transition: opacity .3s; }
  .tile, .begin, .chip { transition: none; }
  .tile:hover, .begin:hover { transform: none; }
}

/* Session log: this week on the library, last sessions on a practice, total held on Done. */
.week { color: var(--dim); font-size: 13px; letter-spacing: 0.04em; margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.week:empty { display: none; }
.history { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.history li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line-2); padding: 6px 0; }
.held { color: var(--muted); font-size: 15px; margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.history .chart { display: block; border: 0; padding: 4px 0 8px; }
.history .chart svg { width: 100%; height: 44px; display: block; overflow: visible; }
.history .chart polyline { fill: none; stroke: var(--ink-a, var(--ink)); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.history .chart span { font-size: 12px; letter-spacing: 0.06em; }
.reminder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; color: var(--dim); font-size: 13.5px; }
.reminder input { background: transparent; color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 12px; font: inherit; }
.again { justify-self: center; display: block; margin: 8px auto 0; }
.setting .chip { align-self: start; }

/* Motion: the hero's light runners, a staggered arrival, tiles breathing with the map. */
.topo svg { transition: opacity 0.2s linear; will-change: transform; }
.topo path.run, .topo path.run-glow { fill: none; stroke-linecap: round; mix-blend-mode: screen; }
.topo path.run { stroke: #fffaf0; stroke-width: 2.4; }
.topo path.run-glow { stroke: var(--sky1); stroke-width: 9; filter: blur(3px); }
@media (prefers-reduced-motion: no-preference) {
  .screen.is-active .hero > * { animation: rise 0.9s cubic-bezier(.16,1,.3,1) both; }
  .screen.is-active .hero > :nth-child(1) { animation-delay: 0.35s; }
  .screen.is-active .hero > :nth-child(2) { animation-delay: 0.45s; }
  .screen.is-active .hero > :nth-child(3) { animation-delay: 0.55s; }
  .screen.is-active .hero > :nth-child(4) { animation-delay: 0.65s; }
  .tile-art .wash { transform-box: fill-box; transform-origin: center; animation: tile-breathe 10s cubic-bezier(.45,0,.55,1) infinite; animation-delay: calc(var(--i, 0) * -0.35s); }
}
@keyframes tile-breathe { 0%, 100% { transform: scale(0.94); } 40% { transform: scale(1.08); } }

/* ── Tile motion ─────────────────────────────────────────
   Arrival, as each tile scrolls into view (`.in`, removed afterwards so a hover never restarts
   it): the tile wipes up out of a blur, its wash pops in, the drawing draws itself stroke by
   stroke, then the words.
   Hover: every drawing acts out its practice. */
.tile-art .m :is(path, rect, circle) { transform-box: fill-box; transform-origin: center; }
.tile-art .trace { stroke: #fffaf0; stroke-width: 2.2; stroke-dasharray: 0.14 0.86; opacity: 0; transition: opacity .3s; }
.tile.wide .tile-art .trace { stroke-width: 1.1; }
.m-steady circle:not(.wash) { fill: var(--ink); fill-opacity: 0; }
.m-breath-check .n1 { transform-box: view-box; transform-origin: 28px 40px; transform: rotate(-30deg); }
.m-clear-nose path, .m-land .n1 { transform-origin: center bottom; }

@media (prefers-reduced-motion: no-preference) {
  .shelf .pending { opacity: 0; }
  .tile.in { animation: tile-in 1.1s cubic-bezier(.16,1,.3,1) backwards; animation-delay: var(--d); }
  .tile.in .tile-art .wash { animation: wash-in 1s cubic-bezier(.34,1.56,.64,1) backwards, tile-breathe 10s cubic-bezier(.45,0,.55,1) infinite; animation-delay: calc(var(--d) + 0.25s), calc(var(--i) * -0.35s); }
  .tile.in .tile-art .m > [class^='n'] { stroke-dasharray: 1; animation: stroke-in 1s cubic-bezier(.65,0,.35,1) backwards; animation-delay: calc(var(--d) + 0.4s + var(--n) * 120ms); }
  .tile.in .tile-text > * { animation: rise 0.9s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--d) + 0.45s); }
  .moment.in h2 { animation: slide-in 1s cubic-bezier(.16,1,.3,1) backwards; animation-delay: var(--d); }
  .moment.in p { animation: slide-in 1s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--d) + 0.15s); }
}
@keyframes tile-in { from { clip-path: inset(100% 0 0 0 round 22px); translate: 0 22px; filter: blur(8px); } to { clip-path: inset(0 0 0 0 round 22px); translate: 0 0; filter: blur(0); } }
@keyframes wash-in { from { scale: 0; opacity: 0; } }
@keyframes stroke-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes slide-in { from { opacity: 0; translate: -14px 0; } }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.tile:hover, .tile:focus-visible) .tile-art .wash { animation: wash-hover 1.4s cubic-bezier(.45,0,.55,1) infinite alternate; }
  :is(.tile:hover, .tile:focus-visible) .trace { opacity: 1; animation: trace-run 1.9s cubic-bezier(.45,0,.55,1) infinite; }
  .tile:hover .m-hold-ladder .trace { stroke-dasharray: 0.22 0.78; animation-duration: 2.4s; }
  /* Reps: the tally marks tick in one by one, then the strike. */
  .tile:hover .m-reps > [class^='n'] { stroke-dasharray: 1; animation: retick 2.6s cubic-bezier(.65,0,.35,1) infinite; animation-delay: calc(var(--n) * 0.2s); }
  /* Rounds: three breaths in a row. */
  .tile:hover .m-rounds circle:not(.wash) { animation: pulse 1.8s cubic-bezier(.45,0,.55,1) infinite; animation-delay: calc(var(--n) * 0.3s); }
  /* Steady: the dots fill one after another, like tiny holds. */
  .tile:hover .m-steady circle:not(.wash) { animation: dot 2.4s ease-in-out infinite; animation-delay: calc(var(--n) * 0.32s); }
  /* Alternate Nostril: the two sides take turns. */
  .tile:hover .m-alternate .n0 { animation: sway-l 2.6s cubic-bezier(.45,0,.55,1) infinite; }
  .tile:hover .m-alternate .n1 { animation: sway-r 2.6s cubic-bezier(.45,0,.55,1) infinite; animation-delay: -1.3s; }
  /* Clear Nose: the arches hum. */
  .tile:hover .m-clear-nose path { animation: hum 0.9s ease-in-out infinite; animation-delay: calc(var(--n) * 0.15s); }
  /* Turn the Tide and Window Seat: the water rolls, the view slides by. */
  .tile:hover .m-tide path { animation: roll 2.6s cubic-bezier(.45,0,.55,1) infinite; animation-delay: calc(var(--n) * -0.45s); }
  .tile:hover .m-window-seat .n1 { animation: roll 3.2s cubic-bezier(.45,0,.55,1) infinite; }
  /* Land: the body breathes, the head settles. */
  .tile:hover .m-land .n1 { animation: breathe-y 4s cubic-bezier(.45,0,.55,1) infinite; }
  .tile:hover .m-land .n0 { animation: bob 4s cubic-bezier(.45,0,.55,1) infinite; }
  /* Ready: the arrow leans forward. */
  .tile:hover .m-ready :is(.n0, .n1) { animation: nudge 1.2s cubic-bezier(.34,1.56,.64,1) infinite; }
  /* Between Sets: the bar goes up. */
  .tile:hover .m-between-sets > [class^='n'] { animation: lift 1.7s cubic-bezier(.45,0,.55,1) infinite; }
  /* Lights Out: the moon rocks. */
  .tile:hover .m-lights-out .n0 { animation: rock 3.4s cubic-bezier(.45,0,.55,1) infinite; }
  /* Breath Check: the needle sweeps. */
  .tile:hover .m-breath-check .n1 { animation: sweep 2.8s cubic-bezier(.65,0,.35,1) infinite; }
  /* Breathe Light: the wave gets smaller and smaller. */
  .tile:hover .m-breathe-light .n0 { animation: flatten 3.2s cubic-bezier(.45,0,.55,1) infinite; }
  /* Box, Kumbhaka, Hold Ladder, Resonance, Cool-down: a light traces the line (.trace). */
}
@keyframes wash-hover { from { transform: scale(1); } to { transform: scale(1.4); } }
@keyframes trace-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes retick { 0% { stroke-dashoffset: 1; } 20%, 100% { stroke-dashoffset: 0; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.25); } }
@keyframes dot { 0%, 100% { fill-opacity: 0; } 12%, 40% { fill-opacity: 1; } 55% { fill-opacity: 0; } }
@keyframes sway-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3.5px); } }
@keyframes sway-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3.5px); } }
@keyframes hum { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes roll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes breathe-y { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(1.9); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-1.5px); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(5px); } }
@keyframes lift { 0%, 100% { transform: translateY(0); } 45%, 60% { transform: translateY(-6px); } }
@keyframes rock { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(12deg); } }
@keyframes sweep { 0%, 100% { transform: rotate(-70deg); } 55% { transform: rotate(8deg); } }
@keyframes flatten { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.2); opacity: 0.55; } }
#session .progress, #session .session-top, #session .controls { position: relative; z-index: 2; }