:root {
  color-scheme: dark;
  --ink: #070713;
  --panel: rgba(18, 18, 42, .78);
  --panel-solid: #11112a;
  --line: rgba(211, 211, 255, .14);
  --soft-line: rgba(211, 211, 255, .08);
  --text: #f6f4ff;
  --muted: #aaa8c0;
  --violet: #755b9f;
  --violet-bright: #aa91c2;
  --blue: #5e7fa9;
  --cyan: #8ce7ff;
  --mood-glow: rgba(126, 95, 255, .18);
  --mood-deep: #0a0a1d;
  --phase: 0;
  --breath-scale: .78;
  --font-display: "Archivo Black", Impact, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 75% 7%, rgba(78, 67, 184, .18), transparent 28rem),
    radial-gradient(circle at 10% 35%, rgba(33, 81, 165, .1), transparent 30rem),
    var(--ink);
  color: var(--text);
  font: 400 1rem/1.55 var(--font-body);
  transition: background-color .5s ease, color .5s ease;
}
button, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .12;
  pointer-events: none;
}
.ambient-one { background: #4a3269; top: 25%; right: -16rem; }
.ambient-two { background: #29456b; bottom: 5%; left: -20rem; }

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 74px;
  padding: 0 4vw;
  border-bottom: 1px solid var(--soft-line);
  background: rgba(7, 7, 19, .76);
  backdrop-filter: blur(22px);
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:.62rem;
  width: max-content;
  white-space:nowrap;
  text-decoration: none;
  font: 400 1.7rem/1 var(--font-display);
  letter-spacing: -.07em;
}
.brth-mark {
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  width:30px;
  height:30px;
  border:1.5px solid currentColor;
  border-radius:50%;
  color:var(--violet);
}
.brth-mark i,.brth-mark b {
  position:absolute;
  border:1.5px solid currentColor;
  border-radius:50%;
}
.brth-mark i:nth-child(1){inset:5px}
.brth-mark i:nth-child(2){inset:10px}
.brth-mark i:nth-child(3){inset:13px;background:currentColor}
.brth-mark b{display:none}
.brand:hover .brth-mark i:nth-child(1){animation:brand-breathe 1.8s ease-in-out infinite}
@keyframes brand-breathe{50%{inset:3px;opacity:.55}}
.topbar nav { display: flex; gap: 1.8rem; }
.nav-link {
  position: relative;
  padding: 1.7rem 0;
  color: var(--muted);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
}
.nav-link::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--violet);
  content: "";
  transition: width .25s ease;
}
.nav-link:hover, .nav-link.active { color: white; }
.nav-link.active::after { width: 100%; }
.streak-chip {
  justify-self: end;
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  padding: .6rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  font-size: .76rem;
  cursor: pointer;
}
.streak-flame { color: var(--violet-bright); }

.section-shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}
.today { padding: clamp(3rem, 6vw, 6rem) 0 5rem; }
.intro-row, .section-heading-row {
  display: grid;
  grid-template-columns: 1.45fr .55fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.4rem;
}
.eyebrow, .kicker, .section-label, .option-label {
  margin: 0 0 .8rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.live-dot {
  display: inline-block;
  width: .44rem;
  height: .44rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 14px var(--violet);
}
h1, h2, p { margin-top: 0; }
h1, .section-heading-row h2, .learn-card h2, .completion h2 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.065em;
}
h1 { font-size: clamp(3.6rem, 9vw, 8rem); }
h1 span, .section-heading-row h2 span { color: var(--violet); }
.breath-word { display:inline-block; color:#6e538f; }
h1 .quiet-vowels {
  color:color-mix(in srgb,var(--violet) 58%,var(--ink));
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.055),
    1px 1px 0 rgba(0,0,0,.72),
    0 0 18px color-mix(in srgb,var(--violet),transparent 88%);
}
.intro-copy, .section-heading-row > p {
  max-width: 30rem;
  margin: 0 0 .4rem;
  color: var(--muted);
  font-size: 1.03rem;
}
.intro-side { display:flex; flex-direction:column; align-items:flex-start; gap:1.2rem; }
.intro-mark { width:58px; height:58px; opacity:.9; box-shadow:0 0 32px color-mix(in srgb,var(--violet),transparent 68%); }
.intro-mark i:nth-child(1){inset:9px}.intro-mark i:nth-child(2){inset:19px}.intro-mark i:nth-child(3){inset:26px}
.intro-mark { animation:mark-breath 5s ease-in-out infinite; }
@keyframes mark-breath{50%{transform:scale(1.12);opacity:.55}}

.session-card {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(420px, 1.14fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 610px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(27,25,62,.92), rgba(12,12,30,.93));
  box-shadow: 0 35px 90px rgba(0,0,0,.35);
}
.session-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.6rem, 4vw, 3.6rem);
  border-right: 1px solid var(--line);
}
.session-heading { display: flex; justify-content: space-between; gap: 1rem; }
.session-heading h2 { margin: 0; font: 400 clamp(2.4rem, 4vw, 4.2rem)/.98 var(--font-display); letter-spacing: -.055em; }
.kicker { color: var(--violet-bright); }
.info-button {
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.info-button:hover { border-color: var(--violet); color: white; }
.session-description {
  max-width: 34rem;
  margin: 1.25rem 0 1.8rem;
  color: #c7c4d8;
  font-size: 1rem;
}
.pattern-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.6rem;
}
.pattern-step {
  display: grid;
  grid-template-columns: auto auto;
  gap: .1rem .45rem;
  align-items: center;
  padding: .66rem .78rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.pattern-step i {
  grid-row: span 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 10px rgba(154,124,255,.75);
}
.pattern-step b { font-size: .74rem; line-height: 1; text-transform: uppercase; }
.pattern-step span { color: var(--muted); font-size: .68rem; line-height: 1; }
.session-options {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: end;
  margin-top: auto;
}
.customize-block { min-width:0; max-width:100%; margin-bottom:1.15rem; }
.motion-options {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  min-width:0;
  max-width:100%;
  gap:.4rem;
}
.motion-options button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-width:0;
  min-height:58px;
  padding:.35rem .2rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:.62rem;
  cursor:pointer;
}
.motion-options button.selected { border-color:var(--violet); background:color-mix(in srgb,var(--violet),transparent 88%); color:white; }
.motion-options i { position:relative; display:block; width:22px; height:22px; }
.mini-native::before,.mini-native::after,.mini-cloud::before,.mini-cloud::after,.mini-orbit::before,.mini-ripple::before,.mini-ripple::after {
  position:absolute; border:1px solid currentColor; border-radius:50%; content:"";
}
.mini-native::before{inset:1px}.mini-native::after{inset:6px}
.mini-cloud::before{width:13px;height:13px;left:1px;top:6px}.mini-cloud::after{width:14px;height:14px;right:0;top:2px}
.mini-orbit::before{inset:1px;border-style:dashed}
.mini-ripple::before{inset:1px}.mini-ripple::after{inset:6px}
.mini-flow::before,.mini-flow::after { position:absolute; left:0; width:100%; height:8px; border-top:1px solid currentColor; border-radius:50%; content:""; }
.mini-flow::before{top:5px;transform:rotate(8deg)}.mini-flow::after{top:13px;transform:rotate(-8deg)}
.mood-options { display:flex; min-width:0; max-width:100%; gap:.45rem; flex-wrap:wrap; }
.mood-options button {
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .52rem;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:.62rem;
  cursor:pointer;
}
.mood-options button i { width:13px; height:13px; border-radius:50%; background:var(--swatch); box-shadow:0 0 12px color-mix(in srgb,var(--swatch),transparent 45%); }
.mood-options button.selected { border-color:var(--line); background:rgba(255,255,255,.04); color:white; }
.soundscape-block { margin-top:.2rem; }
.option-heading { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.option-heading .option-label { flex:0 0 auto; }
.option-label em { margin-left:.35rem; color:var(--violet-bright); font-size:.58rem; font-style:normal; letter-spacing:.08em; }
.soundscape-now { overflow:hidden; color:var(--muted); font-size:.66rem; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.soundscape-options {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  min-width:0;
  max-width:100%;
  gap:.4rem;
}
.soundscape-options button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-width:0;
  min-height:62px;
  padding:.45rem .2rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:.6rem;
  line-height:1.15;
  cursor:pointer;
}
.soundscape-options button:hover { border-color:color-mix(in srgb,var(--violet),transparent 40%); color:white; }
.soundscape-options button.selected { border-color:var(--violet); background:color-mix(in srgb,var(--violet),transparent 88%); color:white; box-shadow:inset 0 0 18px color-mix(in srgb,var(--violet),transparent 90%); }
.soundscape-options button.playing .soundscape-icon { animation:sound-playing 1.15s ease-in-out infinite; filter:drop-shadow(0 0 7px var(--violet-bright)); }
@keyframes sound-playing { 50% { opacity:.45; transform:scale(.82); } }
.soundscape-icon { position:relative; display:block; width:25px; height:19px; }
.soundscape-icon::before,.soundscape-icon::after { position:absolute; content:""; }
.silence-icon::before { inset:3px 11px; border-left:1px solid currentColor; transform:rotate(45deg); }
.silence-icon::after { inset:3px 11px; border-left:1px solid currentColor; transform:rotate(-45deg); }
.deep-icon::before { right:1px; bottom:3px; left:1px; height:8px; border:1px solid currentColor; border-width:1px 0; border-radius:50%; box-shadow:0 -4px 0 -3px currentColor,0 4px 0 -3px currentColor; }
.ocean-icon::before,.ocean-icon::after { right:0; left:0; height:7px; border-top:1px solid currentColor; border-radius:50%; }
.ocean-icon::before { top:4px; transform:rotate(7deg); }
.ocean-icon::after { top:11px; transform:rotate(-7deg); }
.rain-icon { background:radial-gradient(circle,currentColor 1px,transparent 1.5px) 0 0/8px 8px; opacity:.85; }
.night-icon::before { top:1px; left:6px; width:14px; height:14px; border:1px solid currentColor; border-top-color:transparent; border-radius:50%; transform:rotate(-25deg); }
.option-label { display: block; margin-bottom: .5rem; }
.segmented { display: flex; padding: .25rem; border-radius: 12px; background: rgba(3,3,12,.45); }
.segmented button {
  width: 2.6rem;
  height: 2.35rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  cursor: pointer;
}
.segmented button.selected { background: var(--violet); color: #080712; font-weight: 800; }
.sound-toggle {
  display: flex;
  gap: .45rem;
  align-items: center;
  padding: .65rem 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  cursor: pointer;
}
.sound-toggle[aria-pressed="false"] { opacity: .45; }
.controls { display: grid; grid-template-columns: 1fr auto; gap: .65rem; margin-top: 1.3rem; }
.activation-note {
  display:flex;
  align-items:center;
  gap:.65rem;
  width:100%;
  min-height:58px;
  padding:0 1rem;
  border:1px solid color-mix(in srgb,var(--violet),transparent 58%);
  border-radius:13px;
  background:color-mix(in srgb,var(--violet),transparent 91%);
  color:#d9d2ef;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.activation-note i { width:8px; height:8px; border-radius:50%; background:var(--violet); box-shadow:0 0 14px var(--violet); animation:cue-pulse 2s ease-in-out infinite; }
.activation-note:hover { border-color:var(--violet); background:color-mix(in srgb,var(--violet),transparent 84%); }
.activation-note:active { transform:scale(.992); }
.activation-note:focus-visible { outline:2px solid var(--violet-bright); outline-offset:3px; }
.primary-control, .secondary-control {
  min-height: 58px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 13px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
}
.primary-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--violet);
  color: #090815;
}
.primary-control:hover { background: #ad96ff; }
.secondary-control { border: 1px solid var(--line); background: transparent; color: var(--muted); }
.button-arrow { font-size: 1.1rem; }

.breath-stage {
  position: relative;
  display: grid;
  place-items: center;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height: 610px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle, var(--mood-glow), transparent 31%),
    radial-gradient(circle at 55% 45%, rgba(73, 154, 255, .12), transparent 48%),
    var(--mood-deep);
  cursor:pointer;
  transition:background .55s ease;
}
.stage-activation { position:absolute; inset:0; z-index:5; width:100%; height:100%; border:0; background:transparent; cursor:pointer; }
.stage-activation:focus-visible { outline:2px solid white; outline-offset:-8px; border-radius:24px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.immersive-header {
  position:absolute;
  z-index:8;
  top:max(1.25rem,env(safe-area-inset-top));
  right:max(1.25rem,env(safe-area-inset-right));
  left:max(1.25rem,env(safe-area-inset-left));
  display:none;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}
.immersive-brand { display:flex; align-items:center; gap:.7rem; }
.immersive-brand .brth-mark { width:38px; height:38px; }
.immersive-brand .brth-mark i:nth-child(1){inset:6px}
.immersive-brand .brth-mark i:nth-child(2){inset:12px}
.immersive-brand .brth-mark i:nth-child(3){inset:17px}
.immersive-brand div { display:flex; flex-direction:column; }
.immersive-brand strong { font:400 1rem/1 var(--font-display); letter-spacing:-.05em; }
.immersive-brand div span { margin-top:.22rem; color:var(--muted); font-size:.66rem; }
.immersive-brand small { margin-top:.18rem; color:var(--violet-bright); font-size:.52rem; font-weight:700; letter-spacing:.12em; }
.immersive-exit {
  position:relative;
  z-index:9;
  display:flex;
  align-items:center;
  gap:.55rem;
  min-height:44px;
  padding:0 .85rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(7,7,19,.45);
  color:white;
  font-size:1.05rem;
  cursor:pointer;
  pointer-events:auto;
  backdrop-filter:blur(12px);
}
.immersive-exit span { font-size:.65rem; font-weight:800; letter-spacing:.12em; }
body.immersive-brth { overflow:hidden; overscroll-behavior:none; }
body.immersive-brth .breath-stage {
  position:fixed;
  z-index:100;
  inset:0;
  width:100vw;
  height:100dvh;
  min-height:100dvh;
  border-radius:0;
}
body.immersive-brth .breath-stage::after { inset:min(10vw,8vh); }
body.immersive-brth .immersive-header { display:flex; }
body.immersive-brth .visual { width:min(72vmin,620px); }
body.immersive-brth .counter strong { font-size:clamp(6rem,24vmin,13rem); }
body.immersive-brth .phase-label { font-size:.86rem; }
body.immersive-brth .phase-help { font-size:.82rem; }
body.immersive-brth .stage-footer {
  z-index:7;
  right:max(1.6rem,env(safe-area-inset-right));
  bottom:max(1.6rem,env(safe-area-inset-bottom));
  left:max(1.6rem,env(safe-area-inset-left));
}
.breath-stage::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(255,255,255,.18) .7px, transparent .7px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle, black, transparent 72%);
  content: "";
  opacity: .3;
}
.breath-stage::after {
  position: absolute;
  inset: 8%;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 50%;
  content: "";
}
.visual {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  width: min(64%, 370px);
  aspect-ratio: 1;
  transform-origin: center;
}
[data-visual="cloud"] .cloud-visual,
[data-visual="spiral"] .spiral-visual,
[data-visual="box"] .box-visual,
[data-visual="wave"] .wave-visual,
[data-visual="moon"] .moon-visual,
[data-visual="twin"] .twin-visual,
[data-visual="ribbon"] .ribbon-visual,
[data-visual="rings"] .rings-visual { display: block; }

.cloud-visual {
  transform: translate(-50%,-50%) scale(var(--breath-scale));
  filter: drop-shadow(0 0 40px rgba(139,111,255,.55));
  transition: transform .08s linear;
}
.cloud-visual i {
  position: absolute;
  border: 1px solid rgba(220,211,255,.75);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(215,204,255,.43), rgba(94,78,214,.22) 45%, rgba(22,22,58,.18) 70%);
  box-shadow: inset 0 0 30px rgba(163,139,255,.2), 0 0 30px rgba(105,86,229,.16);
}
.cloud-visual i:nth-child(1) { width: 48%; height: 48%; left: 26%; top: 7%; }
.cloud-visual i:nth-child(2) { width: 52%; height: 52%; left: 5%; top: 30%; }
.cloud-visual i:nth-child(3) { width: 56%; height: 56%; right: 2%; top: 27%; }
.cloud-visual i:nth-child(4) { width: 48%; height: 48%; left: 14%; bottom: 4%; }
.cloud-visual i:nth-child(5) { width: 50%; height: 50%; right: 12%; bottom: 3%; }

.spiral-visual {
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(var(--breath-scale)) rotate(calc(var(--phase) * 180deg));
  background: repeating-radial-gradient(circle at center, transparent 0 12px, rgba(169,145,255,.7) 13px 14px, transparent 15px 24px);
  mask-image: conic-gradient(from 40deg, #000, transparent 88%);
  filter: drop-shadow(0 0 30px rgba(130,101,255,.55));
  transition: transform .08s linear;
}
.spiral-visual i { position:absolute; inset: 18%; border:1px solid rgba(132,199,255,.35); border-radius:50%; }
.spiral-visual i:nth-child(2) { inset: 34%; }
.spiral-visual i:nth-child(3) { inset: 46%; background:#cbbdff; box-shadow:0 0 24px #997cff; }

.box-visual { transform:translate(-50%,-50%) scale(calc(.82 + var(--phase) * .12)); transition: transform .08s linear; }
.box-track {
  position:absolute;
  inset:12%;
  border: 2px solid rgba(151,130,255,.5);
  border-radius: 22px;
  box-shadow: inset 0 0 44px rgba(93,75,204,.1), 0 0 32px rgba(93,75,204,.15);
}
.box-dot {
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#d9d1ff;
  box-shadow:0 0 24px #9c80ff;
  left: var(--box-x, 0%);
  top: var(--box-y, 0%);
  transform: translate(-50%,-50%);
}

.wave-visual { transform:translate(-50%,-50%) scale(var(--breath-scale)); transition:transform .08s linear; }
.wave-visual i {
  position:absolute;
  left:0;
  right:0;
  height:22%;
  top:calc(14% + var(--i) * 18%);
  border-top:2px solid rgba(137,190,255,.55);
  border-radius:50%;
  transform: translateY(calc(sin(var(--phase)) * 10px));
  filter:drop-shadow(0 0 8px #5b8eff);
}
.wave-visual i:nth-child(1){--i:0; transform:skewY(-8deg);}
.wave-visual i:nth-child(2){--i:1; transform:skewY(6deg); opacity:.75;}
.wave-visual i:nth-child(3){--i:2; transform:skewY(-4deg); opacity:.5;}
.wave-visual i:nth-child(4){--i:3; transform:skewY(8deg); opacity:.3;}

.moon-visual { transform:translate(-50%,-50%) scale(var(--breath-scale)); transition: transform .08s linear; }
.moon-visual::before {
  position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #eee9ff, #aa94ff 45%, #5943bb 76%);
  box-shadow:0 0 70px rgba(153,120,255,.52);
  content:"";
}
.moon-visual i {
  position:absolute; inset:8%; border-radius:50%;
  background:#0a0a1d;
  transform:translateX(calc((1 - var(--phase)) * 45%));
  opacity:calc(.72 - var(--phase) * .48);
}

.twin-visual { transform:translate(-50%,-50%) scale(var(--breath-scale)); transition:transform .08s linear; }
.twin-visual i {
  position:absolute; top:24%; width:54%; height:54%; border-radius:50%;
  border:1px solid rgba(201,191,255,.68);
  background:rgba(109,82,229,.16);
  box-shadow:0 0 48px rgba(122,96,255,.28);
}
.twin-visual i:first-child { left:2%; transform:translateX(calc(var(--side-shift, 0) * 20px)); }
.twin-visual i:last-child { right:2%; transform:translateX(calc(var(--side-shift, 0) * -20px)); }

.ribbon-visual { transform:translate(-50%,-50%) scale(var(--breath-scale)); transition:transform .08s linear; }
.ribbon-visual i {
  position:absolute; left:7%; width:86%; height:38%; border-top:2px solid rgba(131,208,255,.7); border-radius:50%;
  filter:drop-shadow(0 0 10px #558dff);
  transform:scaleX(calc(.65 + var(--phase) * .35));
  transform-origin:left;
}
.ribbon-visual i:nth-child(1){top:25%;}.ribbon-visual i:nth-child(2){top:44%;opacity:.6}.ribbon-visual i:nth-child(3){top:63%;opacity:.3}

.rings-visual { transform:translate(-50%,-50%) scale(var(--breath-scale)); transition:transform .08s linear; }
.rings-visual i {
  position:absolute; border:1px solid rgba(184,160,255,.7); border-radius:50%;
  box-shadow:0 0 24px rgba(139,102,255,.18);
}
.rings-visual i:nth-child(1){inset:8%;}.rings-visual i:nth-child(2){inset:24%;}.rings-visual i:nth-child(3){inset:40%;background:rgba(182,160,255,.18)}

.counter {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(76%, 28rem);
  margin-top: .25rem;
  text-align: center;
  text-shadow: 0 2px 25px rgba(7,7,19,.8);
  transform: translate(-50%,-50%);
}
.phase-label { font-size: .75rem; font-weight: 800; letter-spacing: .18em; }
.counter strong { font: 400 clamp(4.5rem, 8vw, 7.2rem)/.95 var(--font-display); letter-spacing: -.08em; }
.phase-help { color: #bfbbd1; font-size: .74rem; }
.stage-footer {
  position:absolute;
  z-index:2;
  right:1.8rem;
  bottom:1.5rem;
  left:1.8rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  min-width:0;
}
.session-time {
  flex:0 0 auto;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-align:right;
  white-space:nowrap;
}
.tap-cue {
  min-width:0;
  color:var(--violet-bright);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.12em;
}
.breath-stage.session-active .tap-cue { opacity:.42; }

@keyframes cue-pulse { 50% { transform:scale(1.6); opacity:.45; } }
.session-time span { color: white; }

.quick-row { margin-top: 2.8rem; }
.quick-list { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }
.quick-card {
  position: relative;
  min-height: 126px;
  padding: 1.15rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255,255,255,.025);
  text-align: left;
  cursor: pointer;
}
.quick-card::after {
  position:absolute; width:90px; height:90px; right:-26px; bottom:-30px; border:1px solid var(--accent); border-radius:50%;
  box-shadow:0 0 30px color-mix(in srgb, var(--accent), transparent 65%); content:""; opacity:.7;
}
.quick-card:hover { background: rgba(255,255,255,.05); transform: translateY(-2px); }
.quick-card span { display:block; margin-bottom:.5rem; color:var(--accent); font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.quick-card strong { display:block; max-width:75%; font-size:1rem; }
.quick-card small { color:var(--muted); }

.practice-section, .progress-section { padding: clamp(5rem, 9vw, 9rem) 0; }
.practice-section { border-top: 1px solid var(--soft-line); }
.section-heading-row h2 { font-size: clamp(3rem, 6vw, 6.1rem); }
.filter-row { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.4rem; }
.filter {
  padding:.65rem 1rem; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-size:.75rem; cursor:pointer;
}
.filter.selected { background:var(--text); color:var(--ink); border-color:var(--text); font-weight:800; }
.practice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.practice-card {
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  min-height:245px;
  padding:1.6rem;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(24,23,53,.74),rgba(12,12,29,.66));
}
.practice-card:hover { border-color:rgba(169,147,255,.36); }
.practice-card.hidden { display:none; }
.practice-number { color:var(--muted); font-size:.67rem; font-weight:700; }
.practice-card h3 { margin:.8rem 0 .55rem; font:400 1.85rem/1 var(--font-display); letter-spacing:-.04em; }
.practice-card p { max-width:32rem; margin:0; color:var(--muted); font-size:.88rem; }
.practice-meta { display:flex; gap:.5rem; flex-wrap:wrap; align-self:end; margin-top:1.5rem; }
.practice-meta span { padding:.38rem .55rem; border:1px solid var(--soft-line); border-radius:6px; color:#c6c1d7; font-size:.66rem; }
.practice-art {
  position:relative;
  width:112px; height:112px; margin-left:1rem; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent),transparent 60%),transparent 68%);
}
.practice-art::before,.practice-art::after { position:absolute; border:1px solid var(--accent); border-radius:50%; content:""; }
.practice-art::before { inset:17%; box-shadow:0 0 20px color-mix(in srgb,var(--accent),transparent 60%); }
.practice-art::after { inset:34%; }
.practice-use {
  position:absolute; right:1.2rem; bottom:1.2rem; width:2.5rem; height:2.5rem; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.03); cursor:pointer;
}
.practice-use:hover { background:var(--accent); color:var(--ink); }
.practice-learn {
  position:absolute;
  left:1.6rem;
  bottom:1.45rem;
  padding:0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:#d0ccdc;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.1em;
  cursor:pointer;
}
.practice-learn:hover { color:white; border-color:var(--accent); }

.progress-section { border-top:1px solid var(--soft-line); }
.progress-heading { align-items:end; }
.goal-control { justify-self:end; }
.goal-control > span { display:block; margin-bottom:.55rem; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.13em; }
.goal-control select { min-width:150px; padding:.75rem 1rem; border:1px solid var(--line); border-radius:10px; background:#111128; color:white; }
.stats-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:.8rem; }
.stat { min-height:184px; padding:1.4rem; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); }
.stat > span, .history-head span { color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.12em; }
.stat strong { display:block; margin-top:1.1rem; font:400 1.55rem/1 var(--font-display); }
.stat strong b { font-size:3rem; font-weight:400; letter-spacing:-.06em; }
.stat p { margin-top:.7rem; color:var(--muted); font-size:.78rem; }
.hero-stat { background:linear-gradient(135deg,rgba(117,87,230,.23),rgba(29,34,84,.35)); }
.history-card { margin-top:.8rem; padding:1.5rem; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.02); }
.history-head { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1.3rem; }
.history-head strong { display:block; margin-top:.2rem; font-size:1rem; }
.legend { display:flex; align-items:center; gap:.45rem; letter-spacing:0!important; text-transform:none; }
.legend i { width:8px; height:8px; border-radius:50%; background:var(--violet); }
.day-grid { display:grid; grid-template-columns:repeat(14,1fr); gap:.45rem; }
.day {
  display:flex; flex-direction:column; align-items:center; gap:.5rem; min-width:0;
}
.day i { width:100%; aspect-ratio:1; max-width:48px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.02); }
.day.met i { background:var(--violet); border-color:var(--violet); box-shadow:0 0 20px rgba(138,106,255,.2); }
.day.partial i { background:rgba(138,106,255,.3); }
.day span { color:var(--muted); font-size:.62rem; text-transform:uppercase; }

.learn-section { padding-bottom:7rem; }
.learn-card {
  padding:clamp(2rem,5vw,4rem);
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(135deg,#171634,#0e0e24);
}
.learn-card h2 { font-size:clamp(2.7rem,5vw,5rem); }
.learn-card > p:not(.eyebrow) { max-width:64rem; margin:1.2rem 0 0; color:#bdb9ce; }
.source-links { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.8rem; }
.source-links a { padding:.6rem .8rem; border:1px solid var(--line); border-radius:8px; color:#d6d0e5; text-decoration:none; font-size:.73rem; }
.source-links a:hover { border-color:var(--violet); }

.worn-section { padding:clamp(5rem,9vw,9rem) 0; border-top:1px solid var(--soft-line); }
.tiny-mark { display:inline-block; width:10px; height:10px; margin-right:.2rem; border:1px solid currentColor; border-radius:50%; box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 3px currentColor; }
.merch-hero {
  position:relative;
  min-height:540px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  background:#0b0d1b;
}
.merch-hero img { display:block; width:100%; height:100%; min-height:540px; object-fit:cover; }
.merch-hero::after { position:absolute; inset:50% 0 0; background:linear-gradient(transparent,rgba(5,5,14,.84)); content:""; pointer-events:none; }
.merch-caption { position:absolute; z-index:2; right:2rem; bottom:1.8rem; left:2rem; display:flex; justify-content:space-between; gap:1rem; align-items:end; }
.merch-caption span,.merch-item-copy>span { color:#aaa8c0; font-size:.68rem; font-weight:800; letter-spacing:.12em; }
.merch-caption strong { max-width:24rem; text-align:right; font:400 clamp(1.4rem,3vw,2.5rem)/1 var(--font-display); letter-spacing:-.04em; }
.merch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:.8rem; }
.merch-item { min-height:260px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.022); }
.merch-item figure { aspect-ratio:1; margin:0; overflow:hidden; background:#0b0d1b; }
.merch-item figure img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.merch-item:hover figure img { transform:scale(1.025); }
.merch-item-copy { padding:1.5rem; }
.merch-item h3 { margin:1rem 0 .7rem; font:400 1.45rem/1 var(--font-display); letter-spacing:-.035em; }
.merch-item p { color:var(--muted); font-size:.82rem; }
.merch-detail { display:flex; align-items:center; gap:.55rem; margin-top:1.6rem; color:#d6d2df; font-size:.7rem; }
.merch-detail i { width:18px; height:18px; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:var(--item); box-shadow:0 0 12px color-mix(in srgb,var(--item),transparent 40%); }

footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:2.1rem 0; border-top:1px solid var(--soft-line); color:var(--muted); font-size:.74rem; }
.footer-brand { color:white; }
footer p { margin:0; }

.info-dialog {
  width:min(560px,calc(100% - 28px));
  max-height:calc(100vh - 30px);
  padding:2rem;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:24px;
  background:#111127;
  color:white;
  box-shadow:0 30px 120px #000;
}
.info-dialog::backdrop { background:rgba(3,3,10,.82); backdrop-filter:blur(8px); }
.dialog-close { float:right; width:2.5rem; height:2.5rem; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; }
.info-dialog h2 { margin:.2rem 0 1rem; font:400 2.5rem/1 var(--font-display); letter-spacing:-.05em; }
.info-dialog > p:not(.kicker) { color:var(--muted); }
.dialog-detail { padding:1rem 0; border-top:1px solid var(--line); }
.dialog-detail span { color:var(--violet-bright); font-size:.68rem; font-weight:800; letter-spacing:.12em; }
.dialog-detail p { margin:.35rem 0 0; font-size:.88rem; color:#c6c2d4; }
.dialog-detail.caution span { color:#9bdfff; }
.dialog-use { width:100%; margin-top:1rem; }

.completion {
  position:fixed; inset:0; z-index:50; display:none; place-content:center; padding:2rem; background:rgba(7,7,19,.95); text-align:center;
}
.completion.show { display:grid; animation:fade-in .4s ease both; }
.completion h2 { font-size:clamp(3rem,8vw,7rem); }
.completion > p:not(.eyebrow) { color:var(--muted); }
.completion .primary-control { width:min(320px,100%); margin:1.6rem auto 0; }
.completion-orbit { width:160px; height:160px; margin:0 auto 1.5rem; border-width:1px; box-shadow:0 0 70px color-mix(in srgb,var(--violet),transparent 58%); animation:mark-breath 4s ease-in-out infinite; }
.completion-orbit i { border-width:1px; }
.completion-orbit i:nth-child(1){inset:24px}.completion-orbit i:nth-child(2){inset:48px}.completion-orbit i:nth-child(3){inset:70px;background:var(--violet);box-shadow:0 0 35px var(--violet)}

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }

@media (max-width: 850px) {
  .topbar {
    grid-template-columns:1fr auto;
    gap:.7rem 1rem;
    min-height:0;
    padding:max(12px,env(safe-area-inset-top)) 14px 12px;
  }
  .topbar nav {
    position:static;
    grid-column:1 / -1;
    z-index:auto;
    width:100%;
    justify-content:space-around;
    gap:0;
    min-height:54px;
    padding:0 .5rem;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(14,14,34,.9);
    backdrop-filter:blur(20px);
    box-shadow:0 10px 30px rgba(0,0,0,.34);
  }
  .nav-link { padding:1rem .7rem; }
  .nav-link::after { display:none; }
  .streak-chip span:last-child { display:none; }
  .intro-row,.section-heading-row { grid-template-columns:1fr; gap:1.1rem; }
  .session-card { grid-template-columns:minmax(0,1fr); }
  .session-card > * { min-width:0; }
  .session-copy { border-right:0; border-bottom:1px solid var(--line); }
  .breath-stage { order:-1; min-height:470px; }
  .quick-list { grid-template-columns:repeat(2,1fr); }
  .practice-grid { grid-template-columns:1fr; }
  .merch-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .hero-stat { grid-column:span 2; }
  .day-grid { grid-template-columns:repeat(7,1fr); row-gap:1rem; }
  footer { margin-bottom:0; flex-wrap:wrap; }
}

@media (max-width: 520px) {
  .brand { gap:.5rem; font-size:1.45rem; }
  .section-shell { width:min(100% - 28px,1180px); }
  .today { padding-top:2.5rem; }
  h1 { font-size:3.55rem; }
  .intro-copy { font-size:.92rem; }
  .session-card { border-radius:22px; }
  .breath-stage { min-height:410px; }
  .breath-stage::after { inset:5%; }
  .visual { width:min(72%,290px); }
  .counter { width:74%; }
  .stage-footer { right:1rem; bottom:1.2rem; left:1rem; gap:.65rem; }
  .tap-cue { font-size:.58rem; letter-spacing:.07em; }
  .session-time { font-size:.58rem; letter-spacing:.06em; }
  .session-copy { padding:1.3rem; }
  .session-heading h2 { font-size:2.4rem; }
  .session-options { align-items:start; flex-direction:column; }
  .motion-options {
    display:flex;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    padding:0 0 .45rem;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .motion-options::-webkit-scrollbar,.soundscape-options::-webkit-scrollbar { display:none; }
  .motion-options button { flex:0 0 78px; min-width:78px; scroll-snap-align:start; }
  .option-heading { display:block; }
  .soundscape-now { display:block; margin:-.25rem 0 .55rem; text-align:left; white-space:normal; }
  .soundscape-options {
    display:flex;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    padding:0 0 .45rem;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .soundscape-options button { flex:0 0 82px; min-width:82px; scroll-snap-align:start; }
  .sound-toggle { padding:0; }
  .controls { grid-template-columns:1fr; }
  .secondary-control { min-height:48px; }
  .quick-list { display:flex; overflow-x:auto; padding-bottom:.4rem; scroll-snap-type:x mandatory; }
  .quick-card { flex:0 0 78%; scroll-snap-align:start; }
  .practice-card { min-height:270px; }
  .practice-art { width:84px; height:84px; }
  .section-heading-row h2 { font-size:3.25rem; }
  .goal-control { justify-self:start; }
  .stats-grid { grid-template-columns:1fr; }
  .hero-stat { grid-column:auto; }
  .history-card { padding:1rem; }
  .merch-hero,.merch-hero img { min-height:430px; }
  .merch-caption { right:1rem; bottom:1rem; left:1rem; display:block; }
  .merch-caption strong { display:block; margin-top:.45rem; text-align:left; }
  body.immersive-brth .breath-stage::after { inset:8vw; }
  body.immersive-brth .visual { width:82vmin; }
  body.immersive-brth .stage-footer { right:1rem; bottom:max(1rem,env(safe-area-inset-bottom)); left:1rem; flex-direction:column; gap:.35rem; text-align:center; }
  .immersive-exit span { display:none; }
  .day-grid { gap:.3rem; }
  footer .footer-note { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}