@font-face{font-family:"Lexend Giga";src:url("fonts/LexendGiga.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/Archivo.ttf") format("truetype");font-weight:100 900;font-display:swap}
@property --sweep{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  --forest:#172724; --forest2:#1F332E; --deep:#0F1C19; --line:#2E403A;
  --cream:#EDE9DE; --muted:#B9C2BB; --sage:#98A49A; --copper:#B5562E; --copper-h:#9A4826; --glow:rgba(181,86,46,.55);
  --display:"Lexend Giga","Arial Black",Arial,sans-serif;
  --body:"Archivo",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--deep);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
[hidden]{display:none!important}

.app{position:relative;height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;background:var(--forest);overflow:hidden}

/* ---------- top ---------- */
.top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px 10px;padding-top:max(12px,env(safe-area-inset-top));flex:none;position:relative;z-index:5}
.lockup{display:flex;align-items:center;gap:8px;color:var(--cream)}
.lockup svg{width:26px;height:26px;display:block}
.lockup span{display:flex;flex-direction:column;line-height:1;text-align:left}
.lockup b{font-family:var(--display);font-weight:600;font-size:15px}
.lockup i{font-family:var(--display);font-style:normal;font-size:5.8px;letter-spacing:.08em;margin-top:3px}
.chips{list-style:none;display:flex;justify-content:center;gap:6px}
.chips li{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:10.5px;border:1.5px solid var(--line);color:var(--sage);transition:all .4s var(--ease)}
.chips li.done{background:var(--cream);border-color:var(--cream);color:var(--forest)}
.chips li.on{border-color:var(--copper);color:var(--cream);background:var(--copper);box-shadow:0 0 0 4px rgba(181,86,46,.2)}
.snd{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--cream)}
.snd svg{width:18px;height:18px}
.snd .x{display:none}.snd[aria-pressed="false"] .x{display:block}.snd[aria-pressed="false"] .w{display:none}
.snd[aria-pressed="false"]{color:var(--sage)}

/* ---------- stage ---------- */
.stage{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative;overscroll-behavior:contain}
.screen{min-height:100%;display:flex;flex-direction:column;animation:in .6s var(--ease) both}
.screen.rev{animation-name:inRev}
@keyframes in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes inRev{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.r{opacity:0;animation:rise .7s var(--ease) forwards}

/* ---------- splash ---------- */
.splash{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 22px;padding-bottom:max(26px,env(safe-area-inset-bottom));overflow:hidden}
.splash .bg{position:absolute;left:0;right:0;top:0;height:54%;background:url(img/welcome.jpg) 50% 40%/cover;animation:kb 18s ease-out both;transform-origin:50% 30%}
@keyframes kb{from{transform:scale(1.18)}to{transform:scale(1.02)}}
.splash::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,28,25,.35) 0%,rgba(15,28,25,0) 18%,rgba(23,39,36,0) 34%,rgba(23,39,36,.8) 48%,var(--forest) 56%)}
.splash>*:not(.bg){position:relative;z-index:2}
.mark{width:58px;height:58px;margin-bottom:18px;color:var(--cream)}
.mark .loopd{-webkit-mask:conic-gradient(from -90deg,#000 var(--sweep),transparent 0);mask:conic-gradient(from -90deg,#000 var(--sweep),transparent 0);animation:sweep 1.6s .3s var(--ease) forwards}
@keyframes sweep{to{--sweep:360deg}}
.splash .eyebrow{color:var(--cream);opacity:.8}
.splash h1{font-size:clamp(34px,10vw,50px);margin:10px 0 12px}
.splash p{color:rgba(237,233,222,.85);font-size:17px;max-width:34ch}
.meta{display:flex;gap:14px;margin:16px 0 22px;flex-wrap:wrap}
.meta span{display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--copper)}
.go{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:60px;background:var(--copper);color:var(--cream);font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border-radius:2px;box-shadow:0 14px 40px rgba(181,86,46,.35);position:relative;overflow:hidden}
.go::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);animation:shine 2.8s 2.2s ease-in-out infinite}
@keyframes shine{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}
.go svg{width:20px;height:20px}
.quiet{display:block;margin:14px auto 0;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px}

/* ---------- hero ---------- */
.hero{position:relative;height:clamp(210px,34vh,300px);flex:none;overflow:hidden;background:var(--deep)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 16s ease-out both}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,28,25,.25) 0%,rgba(23,39,36,0) 30%,rgba(23,39,36,.7) 70%,var(--forest) 100%)}
.hcopy{position:absolute;left:20px;right:20px;bottom:14px;z-index:2;transition:opacity .35s,transform .35s var(--ease)}
.eyebrow{font-family:var(--display);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:#C9D0CA}
h1{font-family:var(--display);font-weight:600;font-size:clamp(28px,8vw,40px);line-height:1.04;letter-spacing:-.035em;margin-top:8px;text-wrap:balance}
h1 em{font-style:normal;color:var(--copper)}
h1 .l{display:block}
.live{position:absolute;right:14px;top:14px;z-index:3;display:flex;align-items:center;gap:8px;background:var(--copper);color:var(--cream);font-family:var(--display);font-size:10.5px;letter-spacing:.16em;padding:6px 12px 6px 9px;border-radius:999px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--cream);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(237,233,222,.6)}50%{box-shadow:0 0 0 6px rgba(237,233,222,0)}}

/* captions over the hero */
.cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;font-family:var(--display);font-weight:600;font-size:clamp(17px,5vw,22px);line-height:1.28;letter-spacing:-.02em;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s var(--ease);pointer-events:none;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.cap .w{color:rgba(237,233,222,.38);transition:color .18s}
.cap .w.on{color:var(--cream)}
.cap .w.now{color:var(--copper)}
.hero.talking .cap{opacity:1;transform:none}
.hero.talking .hcopy{opacity:0;transform:translateY(-8px)}

/* ---------- listen row ---------- */
.listen{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin:4px 16px 0;padding:10px 12px;background:var(--forest2);border:1px solid var(--line)}
.pbtn{position:relative;width:46px;height:46px;border-radius:50%;background:var(--copper);display:grid;place-items:center;flex:none}
.pbtn svg.ring{position:absolute;inset:-4px;width:54px;height:54px;transform:rotate(-90deg)}
.pbtn svg.ring circle{fill:none;stroke-width:2.4}
.pbtn .ic{width:16px;height:16px;fill:var(--cream)}
.lmeta{min-width:0}
.lmeta .k{font-family:var(--display);font-size:9.5px;letter-spacing:.15em;color:var(--sage);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.lmeta .t{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.bars{display:inline-flex;gap:2px;align-items:flex-end;height:9px}
.bars i{width:2px;height:30%;background:var(--copper)}
.playing .bars i{animation:eq .9s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:.2s}.bars i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.ltime{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- modules ---------- */
.mod{margin:14px 16px 0;position:relative}
.lede{margin:14px 20px 0;color:rgba(237,233,222,.88);font-size:15.5px;max-width:52ch}
.lede b{color:var(--cream);font-weight:600}
.hint{font-family:var(--display);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--sage);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.hint::before{content:"";width:14px;height:1.5px;background:var(--copper)}

/* loop ring */
.ringwrap{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
.ringwrap svg{width:150px;height:150px;overflow:visible}
.node{cursor:pointer}
.node circle{transition:all .35s var(--ease)}
.node.lit circle.d{fill:var(--cream);stroke:var(--cream)}
.node.hot circle.d{fill:var(--copper);stroke:var(--copper)}
.node.hot circle.h{opacity:.5}
.node text{font-family:var(--display);font-size:11px;fill:var(--sage);pointer-events:none}
.node.hot text{fill:var(--forest)}
.node.lit text{fill:var(--forest)}
.rcenter{font-family:var(--display)}
.sname{min-height:86px}
.sname .n{font-size:44px;font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--copper)}
.sname .t{font-size:15px;font-weight:600;letter-spacing:.02em;margin-top:6px;text-transform:uppercase}
.sname .d{font-family:var(--body);color:var(--muted);font-size:13.5px;margin-top:4px}

/* breathing */
.breath{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;padding:14px;border:1px solid var(--line);background:linear-gradient(160deg,var(--forest2),var(--forest))}
.orb{position:relative;width:132px;height:132px;display:grid;place-items:center}
.orb .o{position:absolute;inset:18px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d17a52,var(--copper) 55%,#7e3a1f);box-shadow:0 0 40px var(--glow);transform:scale(.55);transition:transform 4s cubic-bezier(.45,0,.55,1)}
.orb .o2{position:absolute;inset:4px;border-radius:50%;border:1.5px solid rgba(237,233,222,.2)}
.orb .cnt{position:relative;font-family:var(--display);font-weight:600;font-size:26px;color:var(--cream)}
.breath.in .o{transform:scale(1)}
.breath.out .o{transform:scale(.55);transition-duration:6s}
.bcopy .t{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.01em}
.bcopy .s{color:var(--muted);font-size:13.5px;margin:4px 0 12px}
.pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--cream);font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-radius:999px}
.pill:hover{background:rgba(237,233,222,.08)}
.streak{display:flex;gap:6px;margin-top:12px}
.streak i{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background .5s}
.streak i.on{background:var(--copper)}
.streakl{display:flex;justify-content:space-between;font-family:var(--display);font-size:9px;letter-spacing:.14em;color:var(--sage);margin-top:6px;text-transform:uppercase}

/* challenge */
.weeks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wk{padding:12px 10px;border:1px solid var(--line);background:var(--forest2);position:relative;overflow:hidden}
.wk b{display:block;font-family:var(--display);font-size:9.5px;letter-spacing:.14em;color:var(--sage);font-weight:400}
.wk span{display:block;font-weight:600;font-size:13.5px;margin-top:4px;line-height:1.25}
.wk::after{content:"";position:absolute;left:0;bottom:0;height:3px;background:var(--copper);width:0;animation:fillw 1s var(--ease) forwards}
.wk:nth-child(1)::after{animation-delay:.4s}.wk:nth-child(2)::after{animation-delay:.9s}.wk:nth-child(3)::after{animation-delay:1.4s}
@keyframes fillw{to{width:100%}}
.coaches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.coaches::-webkit-scrollbar{display:none}
.coach{text-align:center;min-width:0}
.av{width:64px;height:64px;margin:0 auto;border-radius:50%;opacity:0;animation:rise .5s var(--ease) forwards;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:14px;background:var(--forest2);border:1.5px solid var(--line);background-size:cover;background-position:center}
.coach.lead .av{border-color:var(--copper);box-shadow:0 0 0 3px rgba(181,86,46,.2)}
.coach small{display:block;font-size:11px;color:var(--muted);margin-top:6px;line-height:1.2}

/* chat */
.chat{border:1px solid var(--line);background:linear-gradient(180deg,var(--forest2),var(--forest));padding:12px;min-height:150px;display:flex;flex-direction:column;gap:8px}
.chat .who{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:9.5px;letter-spacing:.14em;color:var(--sage);padding-bottom:8px;border-bottom:1px solid var(--line)}
.chat .who i{width:7px;height:7px;border-radius:50%;background:#5fbf7a;box-shadow:0 0 0 3px rgba(95,191,122,.2)}
.msg{max-width:88%;padding:9px 12px;font-size:14px;line-height:1.35;border-radius:14px;animation:rise .35s var(--ease) both}
.msg.me{align-self:flex-end;background:var(--cream);color:var(--forest);border-radius:14px 14px 4px 14px}
.msg.ai{align-self:flex-start;background:var(--deep);border:1px solid var(--line);border-radius:14px 14px 14px 4px}
.dots{display:inline-flex;gap:4px}.dots i{width:6px;height:6px;border-radius:50%;background:var(--sage);animation:dt 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dt{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.qs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.q{padding:9px 13px;border:1px solid var(--line);border-radius:999px;font-size:13px;background:var(--forest2);text-align:left}
.q:hover,.q.sel{border-color:var(--copper)}
.note{font-size:11.5px;color:var(--sage);margin-top:8px}

/* quiz */
.quiz{border:1px solid var(--line);background:var(--forest2);padding:14px}
.quiz .qq{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1.3;margin-bottom:12px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border:1px solid var(--line);background:var(--forest);margin-top:6px;font-size:14.5px;transition:border-color .2s,transform .15s}
.opt b{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--sage);display:grid;place-items:center;font-family:var(--display);font-size:11px;flex:none}
.opt:hover{border-color:var(--sage)}
.opt.sel{border-color:var(--copper)}.opt.sel b{background:var(--copper);border-color:var(--copper)}
.reveal{margin-top:12px;padding:14px;background:var(--deep);border-left:3px solid var(--copper);animation:rise .45s var(--ease) both}
.reveal .k{font-family:var(--display);font-size:9.5px;letter-spacing:.15em;color:var(--sage);text-transform:uppercase}
.reveal .s{font-family:var(--display);font-weight:600;font-size:20px;margin:4px 0;letter-spacing:-.02em}
.reveal .s em{font-style:normal;color:var(--copper)}
.reveal p{font-size:13.5px;color:var(--muted)}
.track9{display:flex;justify-content:space-between;margin-top:12px;position:relative}
.track9::before{content:"";position:absolute;left:5px;right:5px;top:50%;height:1.5px;background:rgba(237,233,222,.2)}
.track9 i{position:relative;width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(237,233,222,.55);background:var(--deep);transition:all .4s var(--ease)}
.track9 i.hot{background:var(--copper);border-color:var(--copper);transform:scale(1.5);box-shadow:0 0 14px var(--glow)}

/* cta */
.cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 16px 0;padding:16px 18px;background:var(--cream);color:var(--forest);text-decoration:none;font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.cta:hover{background:#fff}
.cta svg{width:18px;height:18px;flex:none;transition:transform .2s}
.cta:hover svg{transform:translateX(3px)}
.more{margin:12px 16px 0}
.more summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-family:var(--display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}
.more summary::-webkit-details-marker{display:none}
.more summary b{color:var(--copper);font-weight:400;font-size:17px;transition:transform .25s}
.more[open] summary b{transform:rotate(45deg)}
.more img{display:block;width:100%;height:auto}
.spacer{flex:1;min-height:18px}

/* finish */
.finish{padding:22px 20px 24px;position:relative}
.finish .burst{position:relative;width:120px;height:120px;margin:6px 0 18px}
.finish .burst svg{position:absolute;inset:0;width:100%;height:100%}
.finish .burst .mk{inset:22px;color:var(--cream)}
.finish h1{font-size:clamp(32px,9vw,44px)}
.finish .sub{color:rgba(237,233,222,.85);margin:12px 0 18px}
.plan{display:grid;gap:8px}
.plan a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 14px;background:var(--forest2);border:1px solid var(--line);text-decoration:none;animation:rise .5s var(--ease) both}
.plan a:hover{border-color:var(--copper)}
.plan .when{font-family:var(--display);font-size:9px;letter-spacing:.14em;color:var(--copper);text-transform:uppercase;width:70px}
.plan .what{font-weight:600;font-size:14.5px}
.plan svg{width:16px;height:16px;color:var(--sage)}
.again{margin-top:16px;color:var(--muted);font-size:13.5px;text-decoration:underline;text-underline-offset:3px}

/* nav */
.nav{flex:none;display:grid;grid-template-columns:96px 1fr;gap:10px;padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--forest);position:relative;z-index:5}
.btn{height:52px;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;border-radius:2px}
.btn svg{width:18px;height:18px}
.btn.ghost{border:1px solid var(--line);color:var(--muted)}
.btn.ghost:disabled{opacity:.3;cursor:default}
.btn.next{background:var(--copper);color:var(--cream);font-weight:600;transition:background .2s}
.btn.next:hover{background:var(--copper-h)}
.btn.next.nudge{animation:nudge 1.4s ease-in-out 2}
@keyframes nudge{0%,100%{transform:none}30%{transform:translateX(4px)}60%{transform:translateX(-2px)}}

.toast{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);background:var(--cream);color:var(--forest);padding:10px 16px;font-size:13.5px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.4);white-space:nowrap;z-index:20}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.r{opacity:1}.mark .loopd{-webkit-mask:none;mask:none}}

.coach:nth-child(1) .av{animation-delay:.5s}.coach:nth-child(2) .av{animation-delay:.62s}.coach:nth-child(3) .av{animation-delay:.74s}.coach:nth-child(4) .av{animation-delay:.86s}
.coach small{font-size:11.5px}