*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;transition:opacity .45s ease;}
.screen.off{opacity:0;pointer-events:none;}

/* ═══════════════════════════════════════
   INTRO
═══════════════════════════════════════ */
#intro{
  background:#080808;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:10;
  padding:0 clamp(32px,8vw,120px);
}
#intro-logo{
  width:clamp(260px,45vw,480px);
  max-width:85vw;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 1s ease, transform 1s ease;
}
#intro-logo.visible{
  opacity:1;
  transform:translateY(0);
}
#intro-still.visible,
#intro-tempo.visible{
  opacity:1;
  transform:translateY(0);
}

/* ═══════════════════════════════════════
   MENU
═══════════════════════════════════════ */
#detail{flex-direction:column;background:#080808;color:#F0EDE4;}

#detail-body{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,5vw,64px) clamp(24px,5vw,64px);
  max-width:680px;align-self:center;width:100%;
  overflow:hidden;
}
#detail-sub{
  font-family:'Oswald',sans-serif;font-size:clamp(36px,7vw,80px);
  font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  margin-bottom:clamp(2px,.4vh,6px);
}
#detail-name{
  font-family:'Oswald',sans-serif;
  font-size:clamp(36px,7vw,80px);font-weight:700;
  line-height:.88;letter-spacing:.01em;
  margin-bottom:clamp(14px,2.5vh,28px);
}
#detail-benefit{
  font-family:'Inter',sans-serif;font-weight:400;
  font-size:clamp(15px,1.6vw,21px);line-height:1.65;
  color:rgba(240,237,228,.82);
  margin-bottom:clamp(20px,3.5vh,40px);
}
#detail-pattern{
  display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  margin-bottom:clamp(16px,2.5vh,32px);
}
.dp{display:flex;flex-direction:column;gap:6px;}
.dp-label{
  font-family:'Inter',sans-serif;font-size:clamp(12px,1.2vw,15px);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  /* color set per-element in JS to technique color */
}
.dp-val{font-family:'Oswald',sans-serif;font-size:clamp(28px,4vw,52px);font-weight:700;letter-spacing:.01em;}

/* Duration selector */
#detail-duration{
  margin-bottom:clamp(20px,3.5vh,44px);
}
#dur-label{
  font-family:'Inter',sans-serif;font-size:clamp(10px,1vw,12px);
  letter-spacing:.18em;text-transform:uppercase;color:rgba(240,237,228,.5);
  margin-bottom:clamp(10px,1.4vh,16px);display:block;
}
#dur-options{
  display:flex;
  flex-direction:column;
  gap:0;
}
.dur-btn{
  font-family:'Inter',sans-serif;
  background:none;border:none;cursor:pointer;
  display:flex;align-items:baseline;justify-content:space-between;
  padding:clamp(8px,1.2vh,13px) 0;
  border-bottom:1px solid rgba(240,237,228,.07);
  -webkit-tap-highlight-color:transparent;
  transition:opacity .12s;
  width:100%;
}
.dur-btn:last-child{border-bottom:none;}
.dur-btn:active{opacity:.6;}
.dur-label-text{
  font-size:clamp(15px,1.8vw,20px);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:rgba(240,237,228,.28);
  transition:color .15s;
}
.dur-meta{
  font-size:clamp(11px,1.1vw,13px);font-weight:400;
  color:rgba(240,237,228,.22);letter-spacing:.06em;
  transition:color .15s;
}
.dur-btn.sel .dur-label-text{color:#F0EDE4;}
.dur-btn.sel .dur-meta{color:rgba(240,237,228,.55);}
.dur-btn:hover .dur-label-text{color:rgba(240,237,228,.7);}
.dur-btn:hover .dur-meta{color:rgba(240,237,228,.4);}

#detail-begin{
  font-family:'Inter',sans-serif;
  font-size:clamp(16px,2vw,22px);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  padding:clamp(16px,2.5vh,24px) clamp(32px,5vw,64px);
  cursor:pointer;border:none;
  align-self:flex-start;
  transition:opacity .15s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
#detail-begin:hover{opacity:.85;transform:translateY(-2px);}
#detail-begin:active{opacity:.7;transform:none;}

#detail-footer{
  border-top:2px solid rgba(240,237,228,.1);
  padding:clamp(12px,2vh,20px) clamp(24px,5vw,72px);
  flex-shrink:0;
}
#detail-back{
  font-family:'Inter',sans-serif;font-size:clamp(11px,1vw,13px);
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(240,237,228,.45);cursor:pointer;background:none;border:none;
  -webkit-tap-highlight-color:transparent;
  padding:8px 0;
}
#detail-back:hover{color:rgba(240,237,228,.85);}

/* ═══════════════════════════════
   SESSION
═══════════════════════════════ */
#session{flex-direction:column;background:#080808;color:#F0EDE4;}
#sess-head{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:3px solid #F0EDE4;padding:clamp(10px,1.5vh,18px) clamp(16px,3vw,40px) clamp(8px,1.2vh,14px);flex-shrink:0;gap:12px;}
#sh-left{flex:1;min-width:0;}
#sh-eyebrow{font-family:'Inter',sans-serif;font-size:clamp(10px,1vw,13px);font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:3px;}
#sh-title{font-size:clamp(20px,3.5vw,42px);font-weight:700;line-height:.9;letter-spacing:-.02em;color:#F0EDE4;}
#sh-right{flex-shrink:0;padding-top:2px;}
#spi{display:flex;flex-direction:column;gap:5px;align-items:flex-end;}
.sr{display:flex;align-items:center;gap:7px;opacity:.18;transition:opacity .32s;}
.sr.on{opacity:1;}
.slbl{font-family:'Inter',sans-serif;font-size:clamp(11px,1.1vw,14px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#F0EDE4;}
.snum{font-size:clamp(12px,1.2vw,16px);font-weight:700;min-width:16px;text-align:right;color:#F0EDE4;}
.stk{width:14px;height:3px;transition:width .22s;}
.sr.on .stk{width:28px;}

#stage{flex:1;position:relative;overflow:hidden;min-height:0;}
#c{position:absolute;inset:0;width:100%;height:100%;}

/* Settle overlay — Settle + countdown, no Begin button here */
#settle-overlay{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s ease;}
#settle-overlay.show{opacity:1;}
#settle-word{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(1);
  font-family:'Oswald',sans-serif;
  font-size:clamp(72px,14vw,180px);font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;
  color:#F0EDE4;line-height:1;opacity:0;transition:opacity 0.6s ease;
  white-space:nowrap;transform-origin:center center;
}
#settle-nums{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(32px,8vw,120px);pointer-events:none;
}
.sn{
  font-family:'Oswald',sans-serif;
  font-size:clamp(100px,20vw,240px);font-weight:700;
  letter-spacing:.01em;line-height:1;
  opacity:0;transition:opacity 0.35s ease;text-align:center;
  text-transform:uppercase;
}

#lbl{position:absolute;bottom:clamp(10px,1.8vh,22px);left:clamp(16px,3vw,40px);z-index:3;pointer-events:none;}
#pw{font-size:clamp(22px,4vw,48px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1;transition:opacity .2s;min-height:1em;color:#F0EDE4;}
#aw{font-family:'Inter',sans-serif;font-size:clamp(10px,1vw,13px);letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-top:5px;transition:opacity .2s;min-height:14px;color:#F0EDE4;}
#kb{position:absolute;top:clamp(10px,1.5vh,16px);right:clamp(16px,3vw,40px);font-family:'Inter',sans-serif;font-size:clamp(9px,.9vw,11px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:0;z-index:3;transition:opacity .5s;}
#kb.on{opacity:.38;}
#sbar{position:absolute;bottom:0;left:0;right:0;height:2px;z-index:4;background:rgba(240,237,228,.07);}
#sbf{height:100%;width:0%;}

#sess-bot{border-top:3px solid #F0EDE4;padding:clamp(8px,1.3vh,14px) clamp(16px,3vw,40px) clamp(10px,1.6vh,18px);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;}
#ctr{font-family:'Inter',sans-serif;font-size:clamp(9px,.9vw,11px);letter-spacing:.16em;text-transform:uppercase;opacity:.3;}
#stopbtn{font-family:'Inter',sans-serif;font-size:clamp(10px,1vw,12px);font-weight:700;letter-spacing:.22em;text-transform:uppercase;background:transparent;color:#F0EDE4;padding:clamp(7px,1vh,10px) clamp(16px,2vw,28px);cursor:pointer;border:1.5px solid rgba(240,237,228,.35);opacity:.7;transition:opacity .15s;-webkit-tap-highlight-color:transparent;}
#stopbtn:hover{opacity:1;}

/* ═══════════════════════════════
   COMPLETION
═══════════════════════════════ */
#completion{background:#080808;color:#F0EDE4;justify-content:space-between;}
#comp-header{padding:clamp(20px,3.5vh,44px) clamp(20px,4vw,52px) clamp(12px,2vh,24px);border-bottom:3px solid rgba(240,237,228,.12);flex-shrink:0;}
#comp-overline{font-family:'Inter',sans-serif;font-size:clamp(9px,.9vw,12px);font-weight:700;letter-spacing:.28em;text-transform:uppercase;opacity:.35;margin-bottom:clamp(6px,1vh,10px);}
#comp-title{font-size:clamp(52px,10vw,110px);font-weight:700;line-height:.82;letter-spacing:-.03em;}
#comp-tagline{
  font-family:'Inter',sans-serif;font-weight:300;
  font-size:clamp(14px,1.4vw,18px);
  color:rgba(240,237,228,.55);
  margin-top:clamp(10px,1.8vh,20px);
  letter-spacing:.02em;
}
#comp-stats{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,4vh,52px) clamp(20px,4vw,52px);gap:clamp(20px,3.5vh,40px);}
.cstat{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid rgba(240,237,228,.1);padding-bottom:clamp(12px,2vh,20px);}
.cstat:last-child{border-bottom:none;padding-bottom:0;}
.cstat-label{font-family:'Inter',sans-serif;font-size:clamp(10px,1vw,13px);letter-spacing:.22em;text-transform:uppercase;opacity:.35;}
.cstat-val{font-size:clamp(28px,5vw,60px);font-weight:700;letter-spacing:-.02em;}
#comp-actions{padding:clamp(16px,2.5vh,32px) clamp(20px,4vw,52px);border-top:3px solid rgba(240,237,228,.12);flex-shrink:0;display:flex;gap:clamp(10px,2vw,20px);}
.cbtn{font-family:'Inter',sans-serif;font-size:clamp(13px,1.4vw,18px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:clamp(14px,2.2vh,22px) clamp(20px,3vw,36px);cursor:pointer;transition:opacity .15s;flex:1;text-align:center;min-height:clamp(52px,8vh,72px);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
.cbtn:hover{opacity:.8;}
.cbtn:active{opacity:.6;}
#again{background:#F0EDE4;color:#080808;border:none;}
#tomenu{background:transparent;color:#F0EDE4;border:2px solid rgba(240,237,228,.3);}


/* Accessible controls and resilient layouts. */
body{background:#080808;color:#F0EDE4;}
.screen.off{visibility:hidden;}
.screen{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
button:focus-visible,a:focus-visible{outline:3px solid #F0EDE4;outline-offset:5px;}
#detail{overflow-y:auto;}
#detail-body{overflow:visible;flex:1 0 auto;}
#detail-footer{position:sticky;bottom:0;background:#080808;}
.dur-btn{min-height:44px;}
.dur-label-text{color:#aaa79f;}
.dur-meta{color:#aaa79f;}
.dur-btn.sel .dur-meta{color:#c9c6bd;}
#detail-back{min-height:44px;color:#b7b4ac;}
.breathing-note{font-size:12px;color:#b7b4ac;line-height:1.6;margin-bottom:20px;}
.sound-toggle{border:1px solid #55534e;background:none;color:#c9c6bd;padding:10px 14px;font:500 12px 'Inter',sans-serif;min-height:44px;cursor:pointer;}
#sess-bot{gap:12px;flex-wrap:wrap;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.no-script{position:fixed;inset:0;z-index:100;background:#080808;padding:40px;line-height:1.8;}
.no-script a{color:#8AAE8A;}
@media(max-width:700px){#detail-body{padding:28px 24px;}#detail-name{font-size:clamp(32px,8vw,52px);line-height:1.1;}#detail-pattern{gap:18px;}#sess-bot{padding-bottom:max(12px,env(safe-area-inset-bottom));}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;}.card:hover,#detail-begin:hover{transform:none;}}

.dur-btn:hover .dur-label-text,.dur-btn:hover .dur-meta{color:#F0EDE4;}

/* Circle-led home: large desktop choices, compact phone rows. */
#menu{background:#080808;overflow-y:auto;display:block;padding:clamp(24px,4vh,48px) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom));}
.home-shell{width:min(100%,1120px);margin-inline:auto;min-height:calc(100dvh - 96px);display:flex;flex-direction:column;justify-content:center;}
.home-header{margin-bottom:clamp(24px,4vh,40px);}
#menu-logo{display:block;width:240px;max-width:100%;height:auto;}
.home-heading{margin-bottom:32px;}
#m-title{font-family:'Inter',sans-serif;font-size:clamp(64px,8vw,112px);font-weight:700;line-height:1.05;letter-spacing:-.065em;color:#F0EDE4;}
#m-subtitle{margin-top:12px;font-size:clamp(22px,3vw,36px);line-height:1.2;font-weight:500;letter-spacing:-.035em;color:#F0EDE4;}
.home-intro{margin-top:14px;font-size:16px;line-height:1.5;color:#aaa79f;}
#menu-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0;padding:24px 28px;border:1px solid #32312c;border-radius:18px;background:#0d0d0d;color:#F0EDE4;text-align:left;font:inherit;cursor:pointer;transition:border-color .25s,background .25s;}
.card[data-t="deep"]{--mode-color:#D19A55;--breath-animation:deep-preview;--breath-duration:19s;}
.card[data-t="balance"]{--mode-color:#7E9D72;--breath-animation:balance-preview;--breath-duration:12s;}
.card[data-t="focus"]{--mode-color:#667FAE;--breath-animation:focus-preview;--breath-duration:16s;}
.card:hover,.card:focus-visible{border-color:var(--mode-color);background:#111;}
.card:focus-visible{outline:3px solid #F0EDE4;outline-offset:5px;}
.mode-circle{display:block;width:clamp(100px,10vw,144px);height:auto;overflow:visible;color:var(--mode-color);flex-shrink:0;align-self:center;}
.circle-turn,.circle-breathe{transform-origin:57px 58px;}
.circle-turn{animation:circle-drift 48s linear infinite;}
.circle-breathe{transform:scale(.82);}
.card:hover .circle-breathe,.card:focus-visible .circle-breathe,.detail-preview .circle-breathe{animation:var(--breath-animation) var(--breath-duration) ease-in-out infinite;}
.card:hover .circle-turn,.card:focus-visible .circle-turn,.detail-preview .circle-turn{animation-play-state:paused;}
@keyframes circle-drift{to{transform:rotate(360deg);}}
@keyframes deep-preview{0%,100%{transform:scale(.64);}21.0526%,57.8947%{transform:scale(1);}}
@keyframes balance-preview{0%,100%{transform:scale(.64);}50%{transform:scale(1);}}
@keyframes focus-preview{0%,75%,100%{transform:scale(.64);}25%,50%{transform:scale(1);}}
.card-copy,.card-bottom{display:block;width:100%;}
.card-name{display:block;font-size:clamp(28px,3vw,38px);font-weight:700;line-height:1.15;letter-spacing:-.04em;}
.card-description{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:#b7b4ac;}
.card-bottom{border-top:1px solid #32312c;padding-top:14px;}
.card-clinical{display:block;font-size:11px;line-height:1.5;color:#aaa79f;}
.card-beats{display:block;font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.045em;line-height:1.5;margin-top:4px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mode-color);}
.timing-unit{font-size:11px;font-weight:400;letter-spacing:0;color:#aaa79f;}
#repeat-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;}
#repeat-row[hidden]{display:none;}
#repeat-session{background:none;border:0;border-bottom:1px solid #55534e;color:#F0EDE4;font:500 13px 'Inter',sans-serif;padding:12px 0;min-height:44px;cursor:pointer;}
#repeat-session:hover{border-color:#F0EDE4;}
#last-session-details{font-size:12px;color:#aaa79f;line-height:1.5;}
.home-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;padding-top:12px;}
.home-footer .sound-toggle{border:0;padding:10px 0;font-size:12px;}
.creator{font-size:11px;line-height:1.5;color:#aaa79f;text-decoration:none;padding-block:12px;}
.creator:hover{color:#F0EDE4;}
.detail-preview{margin-bottom:20px;}
.detail-preview .mode-circle{width:64px;}
#detail[data-t="deep"]{--mode-color:#D19A55;--breath-animation:deep-preview;--breath-duration:19s;}
#detail[data-t="balance"]{--mode-color:#7E9D72;--breath-animation:balance-preview;--breath-duration:12s;}
#detail[data-t="focus"]{--mode-color:#667FAE;--breath-animation:focus-preview;--breath-duration:16s;}
#menu.off .circle-turn,#menu.off .circle-breathe,#detail.off .circle-breathe{animation-play-state:paused;}
@media(max-width:700px){
 #menu{padding:calc(24px + env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));}
 .home-shell{min-height:calc(100dvh - 60px);justify-content:flex-start;}
 .home-header{margin-bottom:28px;}
 #menu-logo{width:200px;}
 .home-heading{margin-bottom:24px;}
 #m-title{font-size:clamp(58px,16vw,88px);}
 #m-subtitle{font-size:24px;margin-top:8px;}
 .home-intro{font-size:13px;margin-top:12px;}
 #menu-cards{grid-template-columns:1fr;gap:12px;}
 .card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;min-height:104px;gap:12px;padding:16px;border-radius:16px;}
 .mode-circle{width:44px;}
 .card-name{font-size:22px;}
 .card-description{margin-top:5px;font-size:12px;line-height:1.4;}
 .card-bottom{width:auto;border:0;padding:0;text-align:right;}
 .card-clinical{display:none;}
 .card-beats{font-size:17px;letter-spacing:-.04em;margin:0;}
 .timing-unit{display:block;font-size:10px;}
 .home-footer{margin-top:20px;gap:10px;flex-wrap:wrap;}
 #repeat-row{margin-top:12px;gap:10px;}
}
@media(max-width:360px){.card{padding:12px;gap:9px;grid-template-columns:36px minmax(0,1fr) auto;}.mode-circle{width:36px;}.card-name{font-size:20px;}.card-beats{font-size:14px;}.card-description{font-size:11px;}}
@media(max-height:760px){.detail-preview{display:none;}}
@media(min-width:701px) and (max-height:720px){.home-shell{justify-content:flex-start;}.home-header{margin-bottom:20px;}.home-heading{margin-bottom:24px;}.mode-circle{width:90px;}.card{gap:12px;padding:20px 24px;}}
@media(prefers-reduced-motion:reduce){.circle-breathe{transform:scale(.82);}}

/* Programmatically focused screen headings are not interactive controls. */
.screen h1[tabindex="-1"]:focus,.screen h2[tabindex="-1"]:focus{outline:none;}
#intro-logo{width:clamp(260px,64vw,620px);height:auto;max-width:85vw;}

#m-title,#m-title:focus,#m-title:focus-visible{outline:none!important;box-shadow:none!important;}