:root{
  /* yoga.com brand palette — ochre / ink / cream */
  --cream:#f4f1ea; --cream-2:#ece7db; --sage:#cf8a3c; --sage-d:#9c5a22;
  --ink:#1a1a1e; --ink-soft:#6f6f77; --terra:#cf8a3c; --line:rgba(26,26,30,.12);
  --shadow:0 24px 60px -24px rgba(26,26,30,.42);
  --serif:'DM Serif Display',Georgia,serif; --sans:'Outfit',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans); color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
#app{position:relative; height:100vh; width:100vw}

/* screens */
.screen{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .8s ease; padding:24px}
.screen.is-active{opacity:1; pointer-events:auto}

/* ambient warm gradient backdrop */
.ambient{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 20% 0%, #FBF7EE 0%, transparent 55%),
    radial-gradient(120% 100% at 90% 100%, #DfE3D2 0%, transparent 50%),
    linear-gradient(160deg,#F4EFE6 0%,#E7E0D0 100%);
}
.ambient::after{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 42%, rgba(140,154,123,.18), transparent 70%);
  animation:drift 14s ease-in-out infinite alternate;}
@keyframes drift{from{transform:translateY(-2%) scale(1)}to{transform:translateY(2%) scale(1.05)}}

/* ───────── welcome ───────── */
.welcome-card{position:relative; z-index:1; text-align:center; max-width:560px;
  background:rgba(255,253,248,.72); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6); border-radius:28px; padding:54px 48px;
  box-shadow:var(--shadow); animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.mark{font-size:40px; line-height:1}
.eyebrow{font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--sage-d);
  margin-top:16px; font-weight:500}
.display{font-family:var(--serif); font-weight:500; font-size:74px; line-height:.95;
  letter-spacing:.5px; margin:6px 0 4px}
.lede{color:var(--ink-soft); font-size:16.5px; line-height:1.6; max-width:42ch; margin:14px auto 0;
  font-weight:300}
#name-form{margin-top:34px}
#name-form label{display:block; font-size:13.5px; color:var(--ink-soft); margin-bottom:12px;
  letter-spacing:.02em}
.field-row{display:flex; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:7px 7px 7px 18px; box-shadow:0 8px 24px -16px rgba(58,58,51,.5);
  transition:border-color .25s, box-shadow .25s}
.field-row:focus-within{border-color:var(--sage); box-shadow:0 10px 30px -16px rgba(110,124,94,.6)}
#name-input{flex:1; border:0; outline:0; font-family:var(--sans); font-size:17px; color:var(--ink);
  background:transparent}
#name-input::placeholder{color:#B3AE9F}
#begin-btn{border:0; cursor:pointer; font-family:var(--sans); font-weight:500; font-size:15px;
  color:#fff; background:linear-gradient(135deg,var(--sage) 0%,var(--sage-d) 100%);
  padding:0 22px; height:46px; border-radius:12px; display:inline-flex; align-items:center; gap:8px;
  transition:transform .2s, filter .2s; white-space:nowrap}
#begin-btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
#begin-btn .arrow{transition:transform .25s}
#begin-btn:hover .arrow{transform:translateX(3px)}
.fineprint{margin-top:14px; font-size:12.5px; color:#A39E90}

/* ───────── loading / breath ───────── */
.loading-wrap{position:relative; z-index:1; text-align:center; display:flex; flex-direction:column;
  align-items:center}
.breath{position:relative; width:260px; height:260px; display:grid; place-items:center}
.breath-core{width:120px; height:120px; border-radius:50%; overflow:hidden; position:relative; z-index:3;
  box-shadow:0 10px 30px -8px rgba(58,58,51,.5); animation:breathe 9s ease-in-out infinite}
.breath-core img{width:100%; height:100%; object-fit:cover; filter:saturate(1.02)}
.breath-ring{position:absolute; width:200px; height:200px; border-radius:50%;
  border:1px solid rgba(110,124,94,.45); z-index:2; animation:breathe 9s ease-in-out infinite}
.breath-glow{position:absolute; width:240px; height:240px; border-radius:50%; z-index:1;
  background:radial-gradient(circle, rgba(140,154,123,.45), transparent 65%);
  animation:breatheGlow 9s ease-in-out infinite}
@keyframes breathe{
  0%,100%{transform:scale(.82)} 44%{transform:scale(1.12)} 56%{transform:scale(1.12)}}
@keyframes breatheGlow{
  0%,100%{transform:scale(.7); opacity:.5} 50%{transform:scale(1.15); opacity:.9}}
.breath-cue{font-family:var(--serif); font-size:30px; color:var(--sage-d); margin-top:30px;
  font-style:italic; min-height:38px; transition:opacity .6s}
.loading-status{color:var(--ink-soft); font-size:14.5px; margin-top:6px; font-weight:300}
.dots{display:flex; gap:7px; margin-top:18px}
.dots span{width:7px; height:7px; border-radius:50%; background:var(--sage);
  animation:pulse 1.4s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.2s} .dots span:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,100%{opacity:.3; transform:scale(.8)}50%{opacity:1; transform:scale(1)}}

/* ───────── player ───────── */
#screen-player{flex-direction:column; gap:14px; padding:18px 18px 22px}
.player-top{position:relative; z-index:2; width:100%; max-width:430px; display:flex;
  align-items:center; justify-content:space-between}
.brand-mini{height:20px; width:auto; display:block}
.brand-wordmark{width:230px; max-width:62%; height:auto; display:block; margin:0 auto 2px}
.greet-name{font-size:13px; color:var(--sage-d); letter-spacing:.04em; font-weight:500}
.stage{position:relative; z-index:1}
.video-frame{position:relative; width:min(86vw,calc((100vh - 318px)*0.5625)); aspect-ratio:9/16;
  border-radius:26px; overflow:hidden; background:#1c1d19; box-shadow:var(--shadow)}
.video-frame video, .kenburns img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.kenburns{position:absolute; inset:0; overflow:hidden}
.kenburns img{animation:ken 24s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.18) translate(-2%,-3%)}}
.vignette{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,20,16,.55) 0%, transparent 32%, transparent 78%, rgba(20,20,16,.25) 100%)}
.now-label{position:absolute; top:16px; left:16px; z-index:3; color:#fff; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; opacity:.92;
  background:rgba(20,20,16,.28); backdrop-filter:blur(6px); padding:6px 12px; border-radius:20px}
.caption{position:absolute; left:0; right:0; bottom:26px; z-index:3; text-align:center; color:#fff;
  font-family:var(--serif); font-size:23px; font-style:italic; padding:0 30px; line-height:1.35;
  text-shadow:0 2px 12px rgba(0,0,0,.5); opacity:0; transition:opacity .6s}
.caption.show{opacity:1}
.play-toggle{position:absolute; right:14px; bottom:18px; z-index:4; width:42px; height:42px;
  border-radius:50%; border:0; cursor:pointer; color:#fff; font-size:13px;
  background:rgba(20,20,16,.4); backdrop-filter:blur(6px); transition:background .2s}
.play-toggle:hover{background:rgba(20,20,16,.6)}

/* elegant subtitles */
.subtitle{position:absolute; left:0; right:0; bottom:30px; z-index:5; text-align:center;
  padding:0 26px; pointer-events:none; opacity:0; transition:opacity .35s ease}
.subtitle.show{opacity:1}
.subtitle span{display:inline; color:#fff; font-family:var(--sans); font-weight:500;
  font-size:18px; line-height:1.45; letter-spacing:.01em;
  background:linear-gradient(rgba(20,20,16,.0),rgba(20,20,16,.0));
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 3px 16px rgba(0,0,0,.55);
  box-decoration-break:clone; -webkit-box-decoration-break:clone}

/* seek / controls bar */
.controls{display:flex; align-items:center; gap:11px; width:100%;
  margin-top:12px; padding:9px 14px; background:rgba(255,253,248,.85);
  border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(6px)}
.ctl-btn{flex:0 0 auto; border:0; background:transparent; cursor:pointer; color:var(--ink);
  font-size:14px; font-weight:600; padding:4px; line-height:1; font-family:var(--sans)}
.ctl-btn.cc{font-size:12px; letter-spacing:.06em; border:1.5px solid var(--line); border-radius:6px;
  padding:2px 6px; color:var(--ink-soft)}
.ctl-btn.cc.on{color:#fff; background:var(--sage); border-color:var(--sage)}
.ctl-time{flex:0 0 auto; font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; min-width:34px; text-align:center}
.seek{flex:1; -webkit-appearance:none; appearance:none; height:5px; border-radius:5px; cursor:pointer;
  background:var(--cream-2); outline:none}
.seek::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--sage); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer}
.seek::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--sage);
  border:2px solid #fff; cursor:pointer}

/* lesson rail (scrollable, with arrows, shows all lessons) */
.rail-wrap{position:relative; z-index:2; width:min(92vw,460px); display:flex; align-items:center; gap:4px}
.rail-arrow{flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--ink-soft); font-size:18px; line-height:1; cursor:pointer; display:grid;
  place-items:center; transition:opacity .2s, background .2s; box-shadow:0 4px 12px -8px rgba(0,0,0,.4)}
.rail-arrow:hover{background:var(--cream)}
.rail-arrow[disabled]{opacity:.25; cursor:default}
.rail{position:relative; z-index:2; display:flex; gap:10px; flex:1; overflow-x:auto;
  padding:4px 2px 8px; scrollbar-width:none; scroll-behavior:smooth}
.rail::-webkit-scrollbar{display:none}
.lesson-chip{flex:0 0 auto; min-width:128px; background:rgba(255,253,248,.8); border:1px solid var(--line);
  border-radius:16px; padding:12px 14px; cursor:pointer; text-align:left;
  transition:transform .2s, border-color .2s, box-shadow .2s; position:relative}
.lesson-chip:hover{transform:translateY(-2px); box-shadow:0 12px 24px -16px rgba(58,58,51,.5)}
.lesson-chip.active{border-color:var(--sage); background:#fff;
  box-shadow:0 12px 28px -16px rgba(110,124,94,.7)}
.lesson-chip.locked{opacity:.62; cursor:default}
.lesson-chip.locked:hover{transform:none; box-shadow:none}
.chip-no{font-family:var(--serif); font-size:13px; color:var(--sage-d); letter-spacing:.1em}
.chip-title{font-size:14px; font-weight:600; margin-top:3px; color:var(--ink)}
.chip-sub{font-size:11.5px; color:var(--ink-soft); margin-top:2px; line-height:1.3}
.chip-meta{display:flex; align-items:center; justify-content:space-between; margin-top:9px}
.chip-dur{font-size:11px; color:#A39E90}
.chip-lock{font-size:11px; color:#A39E90}
.lesson-chip.active .chip-lock{color:var(--terra)}

@media (max-width:520px){ .display{font-size:60px} .welcome-card{padding:42px 26px} }