@font-face{font-family:Silkscreen;src:url('./assets/Silkscreen-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;--bg:#f6f3ee;--panel:#fffcf7;--text:#32273e;--muted:#716477;--line:#ddd5df;--accent:#624b85;--on-accent:#fffaf7;--soft:#eae3f0;--grid:#d9cedb;--shadow:#d9d0de;--lung:#d594a9;--lung-edge:#9c5c7b;--lung-light:#f7cad7;--branch:#8a4a6d;--shine:#ecdde4;font-family:Silkscreen,monospace;font-synthesis:none;color:var(--text);background:var(--bg);line-height:1.6}
:root[data-theme=dark]{color-scheme:dark;--bg:#16131e;--panel:#211b2c;--text:#f3edf7;--muted:#b9acc9;--line:#42354f;--accent:#c2a7ed;--on-accent:#20162f;--soft:#33283f;--grid:#46354d;--shadow:#0d0a12;--lung:#b781ae;--lung-edge:#80567f;--lung-light:#ebc9e3;--branch:#653e65;--shine:#55415f}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button{color:var(--text)}.pixel,.brand,.eyebrow,.time,h1,.step,.caption,.countdown>span:first-child{font-family:Silkscreen,monospace;font-weight:400}.preview-bar{padding:8px 24px;background:var(--text);color:var(--bg);font-size:11px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;letter-spacing:.07em}.site-header{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:24px 40px;gap:16px}.brand{text-decoration:none;color:var(--text);font-size:16px;white-space:nowrap}.brand-symbol{font-family:inherit;color:var(--accent);font-size:26px;vertical-align:middle;margin-right:8px}.theme-switch{display:flex;align-items:center;gap:10px;padding:10px 15px;min-height:44px;background:var(--panel);border:1px solid var(--line);font-size:13px;border-radius:4px}.theme-switch>span{font-size:20px;line-height:1}main{max-width:1100px;margin:auto;padding:12px 40px 24px}.view-nav{display:flex;justify-content:center;gap:4px;margin:0 auto 45px;border-bottom:1px solid var(--line);width:max-content;max-width:100%}.view-nav button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 16px;min-height:44px;color:var(--muted);font-size:13px}.view-nav button[aria-pressed=true]{border-bottom-color:var(--accent);color:var(--text);font-weight:400}.layout{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:center}.eyebrow{font-size:11px;letter-spacing:.05em;color:var(--accent);margin:0 0 22px}h1{font-size:clamp(30px,3.4vw,43px);line-height:1.3;letter-spacing:-.06em;margin:0 0 22px;overflow-wrap:anywhere}.title-dot{color:var(--accent)}.intro{color:var(--muted);font-size:16px;line-height:1.8;margin:0 0 24px}.session-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;margin-bottom:26px}.session-meta i{display:inline-block;background:var(--accent);height:6px;width:6px;margin-right:7px}.rhythm{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}.rhythm li{display:grid;grid-template-columns:30px 1fr 35px;gap:12px;border-bottom:1px solid var(--line);padding:12px 10px 12px 0;font-size:13px;align-items:center}.step{font-size:10px;color:var(--muted)}.rhythm b{font-weight:400;text-align:right;font-variant-numeric:tabular-nums}.rhythm li.active{background:var(--soft);box-shadow:-3px 0 var(--accent);padding-left:10px}.rhythm li.active .step{color:var(--accent)}.safety{font-size:12px;line-height:1.8;color:var(--muted);margin:24px 0 0;max-width:400px}.console{background:var(--panel);border:1px solid var(--line);padding:28px;position:relative;box-shadow:6px 6px 0 var(--shadow);border-radius:3px}.console:before,.console:after{content:'';position:absolute;width:7px;height:7px;background:var(--bg)}.console:before{top:-1px;left:-1px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.console:after{bottom:-1px;right:-1px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.console-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.tiny-label{font-size:9px;letter-spacing:.13em;color:var(--muted)}.time{font-size:17px;font-variant-numeric:tabular-nums}.artboard{height:260px;margin:20px 0 0;position:relative;display:grid;place-items:center;background-image:radial-gradient(var(--grid) .7px,transparent .7px);background-size:12px 12px;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}.lungs{width:240px;height:220px;overflow:visible}.left-lung{transform-origin:55px 47px;transform:scale(var(--inflate,.88))}.right-lung{transform-origin:65px 47px;transform:scale(var(--inflate,.88))}.lung-fill{fill:var(--lung)}.lung-shadow{fill:var(--lung-edge)}.lung-shine{fill:var(--lung-light)}.bronchi{fill:var(--branch)}.trachea{fill:var(--lung-edge)}.trachea-highlight{fill:var(--lung-light)}.spark{position:absolute;color:var(--accent);font-size:20px}.spark-a{top:40px;right:22px}.spark-b{left:15px;bottom:40px;font-family:Silkscreen;font-size:16px}.corner{position:absolute;width:15px;height:15px;border-color:var(--line);border-style:solid}.top-left{left:0;top:15px;border-width:1px 0 0 1px}.bottom-right{right:0;bottom:15px;border-width:0 1px 1px 0}.guide-caption{text-align:center;margin:10px 0 24px;min-height:56px}.caption{font-size:12px;margin:0 0 8px}.guide-caption p:last-child{font-size:12px;color:var(--muted);margin:0}.progress{height:4px;display:flex;gap:3px;background:var(--soft);margin:0 0 24px}.progress i{height:100%;width:0;background:var(--accent)}/* Comfortable controls with a satin finish and clear action hierarchy. */
.actions { display: grid; gap: 16px; }
.actions button {
  min-height: 60px;
  padding: 16px 24px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  touch-action: manipulation;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.actions .primary {
  color: #123b33;
  background: linear-gradient(160deg, #e0fff2 0%, #b3eedc 55%, #9fe1d1 100%);
  border: 1px solid #cef8e9;
  box-shadow: inset 0 1px 0 #ffffffb3, 0 4px 14px #7efce21a;
}
.secondary { background: none; color: var(--text); border: 1px solid var(--line); }
.actions .secondary {
  color: #edf3f1;
  background: linear-gradient(160deg, #222c2a, #141b19);
  border: 1px solid #64736e;
  box-shadow: inset 0 1px 0 #ffffff0d;
}
.action-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.actions button:focus-visible { outline: 3px solid #f4fff9; outline-offset: 4px; }
@media (hover: hover) {
  .actions .primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 #fff, 0 6px 22px #7efce233; }
  .actions .secondary:hover:not(:disabled) { background: #2c3934; border-color: #a4bdb3; }
}
.actions button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px #00000020; }
@media (prefers-reduced-motion: reduce) {
  .actions button { transition: none; }
  .actions button:active:not(:disabled) { transform: none; }
}
.demo-note{font-size:10px;color:var(--muted);text-align:center;margin:20px 0 0}.countdown{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 18px}.countdown>span:first-child{font-size:38px;line-height:1}.countdown>span:last-child{color:var(--muted);font-size:12px}footer{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}footer .pixel{font-size:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[data-state=running] .session-meta,[data-state=paused] .session-meta,[data-state=completed] .session-meta{display:none}[data-state=completed] .rhythm{display:none}[data-state=running] .artboard,[data-state=paused] .artboard{height:220px}[data-state=running] .guide-caption,[data-state=paused] .guide-caption{min-height:0;margin:0 0 18px}[data-state=running] .caption,[data-state=paused] .caption{font-size:11px}
@media(max-width:760px){.site-header{padding:18px 22px}.brand{font-size:12px}.brand-symbol{font-size:22px}.theme-switch{font-size:12px;padding:8px 10px}main{padding:8px 22px 24px}.view-nav{margin-bottom:26px}.view-nav button{padding:8px 13px}.layout{grid-template-columns:1fr;gap:28px;max-width:440px;margin:auto}.eyebrow{font-size:9px;margin-bottom:14px}h1{font-size:30px;margin-bottom:16px}.intro{font-size:14px;margin-bottom:18px}.session-meta{margin-bottom:20px;font-size:11px;gap:14px}.rhythm li{font-size:12px;padding-block:10px}.safety{font-size:12px;margin-top:18px}.console{padding:22px}.artboard{height:220px}.lungs{width:220px;height:202px}footer{max-width:440px;margin:36px auto 0;flex-direction:column;gap:5px}.preview-bar{font-size:9px;padding:7px 12px}.preview-bar span:last-child{display:none}[data-state=running] .rhythm,[data-state=paused] .rhythm{display:none}[data-state=running] .safety,[data-state=paused] .safety,[data-state=completed] .safety{display:none}[data-state=running] .intro,[data-state=paused] .intro{margin-bottom:0}[data-state=running] .story,[data-state=paused] .story{text-align:center}[data-state=running] h1,[data-state=paused] h1{font-size:25px;min-height:65px;display:grid;place-items:center;margin-bottom:8px}[data-state=running] .artboard,[data-state=paused] .artboard{height:185px}[data-state=running] .lungs,[data-state=paused] .lungs{width:200px;height:184px}}
@media(max-width:360px){.site-header{padding-inline:16px}main{padding-inline:16px}.brand{font-size:10px}.theme-switch{font-size:11px;gap:6px}h1{font-size:27px}.console{padding:18px}.tiny-label{font-size:8px}.view-nav button{padding-inline:11px}}
@media(prefers-reduced-motion:reduce){.left-lung,.right-lung{transform:scale(.9)}.primary:active{transform:none}}

/* Product layout and preferences. */
.preferences{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.site-header{margin-bottom:35px}main{padding-top:0}.voice-settings{max-width:480px;margin:28px auto 0}.voice-settings .safety{max-width:none;margin-top:0}.voice-settings details{margin-top:10px;color:var(--muted);font-size:13px}.voice-settings summary{cursor:pointer;min-height:44px;padding:10px 0}.voice-settings label{display:block;margin:12px 0 6px}.voice-settings select{width:100%;min-height:44px;background:var(--panel);color:var(--text);border:1px solid var(--line);padding:10px;font:inherit}.voice-settings button{padding:10px 15px;min-height:44px;margin-top:12px}.voice-settings p{font-size:12px}select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.6;cursor:not-allowed}#load-status{font-size:12px;color:var(--muted)}.countdown{margin:12px 0 24px}.countdown>span:last-child{max-width:140px}#instruction{min-height:3.9em}#home .artboard{margin-bottom:18px}.left-lung,.right-lung{transform:scale(var(--inflate,.88))}
@media(max-width:760px){.site-header{padding:16px;margin-bottom:20px;align-items:flex-start}.preferences{gap:6px}.theme-switch{font-size:11px;padding:8px}.brand{padding-top:10px}main{padding-inline:20px}.layout{gap:18px}#home .story{display:contents}#home{gap:12px}#home .eyebrow{order:0;margin:0}#home h1{order:1;margin:0}#home .intro{order:2;margin:0 0 6px}#home .console{order:3;margin:8px 0 16px}#home .session-meta{order:4;margin:0 0 4px}#home .rhythm{order:5}#home .safety{order:6;margin:4px 0 0}#home .artboard{height:180px;margin-top:12px}#home .lungs{width:195px;height:179px}#session .story{text-align:center}#instruction{font-size:26px;min-height:2.6em;margin-bottom:10px}#guidance{margin:0}#session .artboard{height:180px}#session .lungs{width:190px;height:175px}.voice-settings{max-width:440px}.countdown{margin:12px 0 20px}}
@media(max-width:359px){main{padding-inline:16px}.site-header{flex-wrap:wrap;gap:10px}.brand{padding:0}.preferences{width:100%;justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.left-lung,.right-lung{transform:scale(.9)}}

.setting-note{font-size:12px;line-height:1.7;color:var(--muted)}#away-note{display:block}

/* The marker follows the luminous perimeter, one circuit per breathing cycle. */
.console {
  --panel: #000000;
  --text: #f4f5f7;
  --muted: #c2c7d2;
  --line: #283434;
  --accent: #c2a7ed;
  --on-accent: #20162f;
  --soft: #1b2525;
  --shadow: #101616;
  --orbit-neon: #7efce2;
  color: var(--text);
}
.artboard.orbit-artboard { mask-image: none; background: #000000; }
.orbit-track { position: absolute; inset: 12px; pointer-events: none; }
.orbit-track::before { content: ''; position: absolute; inset: 0; border: 2px solid var(--orbit-neon); box-shadow: 0 0 5px #7efce2aa, 0 0 14px #7efce240, inset 0 0 7px #7efce230; }
.orbit-star { position: absolute; left: var(--orbit-x, 0%); top: var(--orbit-y, 0%); transform: translate(-50%, -50%); display: grid; place-items: center; width: 24px; height: 24px; line-height: 1; font-size: 24px; color: #f3fff9; background: transparent; z-index: 1; opacity: var(--star-opacity, .9); text-shadow: 0 0 3px #ffffff, 0 0 var(--star-glow, 10px) var(--orbit-neon); }
.orbit-artboard .lungs { max-width: calc(100% - 64px); max-height: calc(100% - 48px); }
@media (prefers-reduced-motion: reduce) { .orbit-star { left: 0%; top: 0%; } }

.orbit-star::before, .orbit-star::after { content: '+'; position: absolute; font-family: Silkscreen, monospace; font-size: 8px; color: #baffed; opacity: var(--spark-opacity, .55); text-shadow: 0 0 5px var(--orbit-neon); }
.orbit-star::before { top: -3px; right: -2px; }
.orbit-star::after { bottom: -3px; left: -2px; }
@media (prefers-reduced-motion: reduce) {
  .orbit-star { opacity: .9; text-shadow: 0 0 3px #fff, 0 0 10px var(--orbit-neon); }
  .orbit-star::before, .orbit-star::after { opacity: .55; }
}