/* The illustration and its timer form one stable movement card. */
body.insesh .page.active .sesh {
  background: #f2ecdf;
  color: #211b20;
  padding: max(16px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
body.insesh .seshwrap {
  width: min(100%, 440px);
  max-width: none;
  margin: 0 auto;
  color: #211b20;
  text-align: center;
}
body.insesh .seshtop {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  padding: 0;
  margin: 0 0 13px;
}
body.insesh .seshx {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #c9b9a8;
  border-radius: 50%;
  background: #fffaf2;
  color: #211b20;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}
body.insesh .seshcount {
  font-family: 'NHD', sans-serif;
  color: #315b5e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
body.insesh .seshprogress {
  height: 3px;
  margin: 0 0 17px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #d4c5b0;
}
body.insesh .seshprogress span {
  display: block;
  height: 100%;
  background: #315b5e;
  transition: width .25s ease;
}
body.insesh .seshstage {
  overflow: hidden;
  border: 1px solid #b5a38c;
  border-radius: 16px;
  background: #ead9b9;
  box-shadow: 0 8px 25px rgba(55, 39, 29, .10);
}
body.insesh .seshvisual {
  position: relative;
  overflow: hidden;
}
body.insesh .seshart {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(42dvh, 390px);
  aspect-ratio: 1.08 / 1;
  object-fit: contain;
  background: #e8d6b2;
  margin: 0;
  border: 0;
}
body.insesh .seshclock {
  position: absolute;
  bottom: 17px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  min-height: 69px;
  padding: 8px 13px 7px;
  border: 1px solid rgba(49, 91, 94, .70);
  border-radius: 13px;
  background: rgba(255, 250, 242, .94);
  box-shadow: 0 3px 14px rgba(32, 27, 25, .11);
  color: #123f45;
}
body.insesh .seshclocklabel {
  order: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  margin-top: 4px;
}
body.insesh .seshtime {
  order: 1;
  display: block;
  font-family: 'PatchDisplay', 'NHD', serif;
  font-size: 34px;
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  color: #123f45;
}
body.insesh .seshclockbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(255, 250, 242, .77);
}
body.insesh .seshclockbar span {
  display: block;
  height: 100%;
  background: #a33d33;
  transition: width .25s linear;
}
body.insesh .seshcopy {
  background: none;
  border: 0;
  padding: 19px 4px 0;
}
body.insesh .seshkicker {
  display: flex;
  justify-content: center;
  gap: 12px;
  color: #9a4036;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
body.insesh .seshstate {
  color: #486d6a;
  font-size: inherit;
  letter-spacing: inherit;
}
body.insesh .seshstate:before {
  content: '·';
  margin-right: 12px;
}
body.insesh .seshname {
  font-family: 'PatchDisplay', 'NHD', serif;
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 400;
  line-height: 1;
  margin: 0 0 10px;
  color: #211b20;
}
body.insesh .seshhow {
  max-width: 370px;
  margin: 0 auto;
  color: #544b46;
  font-size: 14.5px;
  line-height: 1.48;
}
body.insesh .seshctl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 19px 0 0;
  touch-action: manipulation;
}
body.insesh .seshbtn {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  padding: 0;
  border: 1px solid #bcae9a;
  border-radius: 50%;
  background: #fffaf2;
  color: #123f45;
  box-shadow: 0 2px 7px rgba(55, 39, 29, .08);
  cursor: pointer;
}
body.insesh .seshbtn svg {
  width: 21px;
  height: 21px;
  color: currentColor;
}
body.insesh .seshbtn.big {
  width: 78px;
  height: 78px;
  min-width: 78px;
  border-color: #123f45;
  background: #123f45;
  color: #fffaf2;
}
body.insesh .seshbtn.big svg {
  width: 29px;
  height: 29px;
}
body.insesh .seshbtn:focus-visible,
body.insesh .seshx:focus-visible {
  outline: 3px solid #a33d33;
  outline-offset: 3px;
}
body.insesh .seshbtn:active { transform: scale(.96); }
body.insesh .seshhint {
  margin: 10px 0 0;
  color: #6a6258;
  font-size: 11px;
  text-align: center;
}
@media (max-height: 700px) {
  body.insesh .seshart { max-height: 35dvh; }
  body.insesh .seshcopy { padding-top: 12px; }
  body.insesh .seshctl { padding-top: 12px; }
}
@media (min-width: 768px) {
  body.insesh .page.active .sesh { display: grid; align-content: center; }
  body.insesh .seshwrap {
    width: min(100%, 900px);
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 45px;
    align-items: center;
  }
  body.insesh .seshtop,
  body.insesh .seshprogress { grid-column: 1 / -1; }
  body.insesh .seshstage { grid-column: 1; grid-row: 3 / 6; }
  body.insesh .seshart { max-height: min(66dvh, 510px); }
  body.insesh .seshcopy { grid-column: 2; grid-row: 3; text-align: left; padding: 0; }
  body.insesh .seshkicker { justify-content: flex-start; }
  body.insesh .seshname { font-size: clamp(36px, 3vw, 46px); }
  body.insesh .seshhow { margin: 0; max-width: 380px; font-size: 16px; }
  body.insesh .seshctl { grid-column: 2; grid-row: 4; justify-content: flex-start; }
  body.insesh .seshhint { grid-column: 2; grid-row: 5; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  body.insesh .seshprogress span,
  body.insesh .seshclockbar span { transition: none; }
}
/* Breathing gives the instruction priority over the picture on a phone. */
body.insesh.breathsesh .seshcue { display:block; color:#153f43; font-family:'NHD',sans-serif; font-size:clamp(24px,7vw,32px); font-weight:800; line-height:1.17; margin:0 auto 13px; max-width:390px; text-wrap:balance; }
body.insesh .seshcue { display:none; }
body.insesh.breathsesh .seshhow { font-size:clamp(18px,4.8vw,21px); line-height:1.45; color:#292622; }
body.insesh.breathsesh .seshname { font-size:clamp(24px,6vw,30px); margin-bottom:7px; }
body.insesh.breathsesh .seshclock { min-width:82px; min-height:54px; }
body.insesh.breathsesh .seshtime { font-size:29px; }
@media(max-width:767px){
  body.insesh.breathsesh .seshwrap { display:flex; flex-direction:column; }
  body.insesh.breathsesh .seshtop { order:0; margin-bottom:7px; }
  body.insesh.breathsesh .seshprogress { order:1; margin-bottom:8px; width:100%; }
  body.insesh.breathsesh .seshcopy { order:2; padding:8px 4px 12px; }
  body.insesh.breathsesh .seshstage { order:3; }
  body.insesh.breathsesh .seshart { max-height:23dvh; aspect-ratio:2/1; object-fit:cover; object-position:center 38%; }
  body.insesh.breathsesh .seshctl { order:4; padding-top:10px; }
  body.insesh.breathsesh .seshhint { order:5; margin-top:5px; }
}
/* Movement cards share the site's quiet editorial palette. */
.cardio-grid {display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:10px}
.cardio-feature {width:100%;background:#153f43!important;color:#fff!important;border:0!important;margin:0 0 12px}
.cardio-feature b,.cardio-feature span {color:#fff!important}
.spd-art {display:block;width:100%;max-height:280px;object-fit:contain;background:#ead9b9;border-radius:12px;margin-bottom:18px}
.spd-live-art {display:block;width:100%;max-height:190px;object-fit:contain;background:#ead9b9;border-radius:12px;margin-bottom:12px}
.cardio-head {background:#153f43;color:#fff;padding:26px;border-radius:18px;margin-bottom:14px}
.cardio-head small,.cardio-player small {letter-spacing:.15em;font-weight:800}
.cardio-head h2 {font-family:'PatchDisplay',serif;font-size:clamp(32px,7vw,48px);margin:8px 0}
.cardio-head p {margin:0;line-height:1.5}
.cardio-choices {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:16px}
.cardio-choices button {font:700 16px 'NHD',sans-serif;text-align:left;min-height:82px;padding:14px;background:#f4ede2;border:1px solid #c9b9a8;border-radius:12px;color:#211b20;cursor:pointer}
.cardio-choices button span {display:block;font:400 13px 'NHD',sans-serif;margin-top:5px}
.cardio-choices button.selected {background:#dce6df;border:2px solid #153f43}
.cardio-choices button:focus-visible,.cardio-go:focus-visible {outline:3px solid #a33d33;outline-offset:3px}
.cardio-player {border:1px solid #c9b9a8;background:#fffaf2;border-radius:18px;padding:22px;color:#211b20}
.cardio-player h3 {font-family:'PatchDisplay',serif;font-size:32px;margin:7px 0}
.cardio-player p {font-size:16px;line-height:1.5}
.cardio-phase {padding:20px;background:#ead9b9;border-radius:14px;display:flex;flex-direction:column;gap:9px;margin:18px 0}
#cardio-cue {font-size:clamp(22px,5vw,30px);font-weight:800;line-height:1.25}
#cardio-clock {font-size:clamp(48px,13vw,70px);font-variant-numeric:tabular-nums;line-height:1;color:#153f43}
#cardio-next {font-size:15px}
.cardio-track {height:8px;background:#d4c5b0;border-radius:10px;overflow:hidden;margin-bottom:18px}
#cardio-fill {display:block;width:0;height:100%;background:#153f43}
.cardio-go {margin-right:10px;background:#153f43}
@media(max-width:480px){.cardio-choices{grid-template-columns:1fr 1fr}.cardio-player{padding:17px}.spd-art{max-height:195px}}

/* Separate illustrations follow the three circuit phases, never the ticking clock. */
#spd-phase .spd-phase-art {display:block;width:100%;height:clamp(175px,30vh,280px);object-fit:contain;background:#e7d5b8;border-radius:14px;margin:0 auto 16px;}
@media(max-width:480px){#spd-phase{padding:18px 16px!important}#spd-phase .spd-phase-art{height:min(31vh,245px)}#spd-phase #spd-pnum{font-size:72px!important}}
body.insesh.breathsesh .seshvoice-wrap {display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 0;flex-wrap:wrap;}
body.insesh.breathsesh .seshvoice {font:700 14px 'NHD',sans-serif;padding:11px 17px;border:1px solid #315b5e;border-radius:999px;background:#315b5e;color:#fff;cursor:pointer;min-height:44px;}
body.insesh.breathsesh .seshvoice[aria-pressed="false"]{background:#fffaf2;color:#153f43;}
body.insesh.breathsesh .seshvoice:focus-visible{outline:3px solid #a33d33;outline-offset:3px;}
body.insesh.breathsesh .seshvoice-status {color:#544b46;font:400 13px 'NHD',sans-serif;}
@media(max-width:767px){body.insesh.breathsesh .seshvoice-wrap{order:5}body.insesh.breathsesh .seshhint{order:6}}
@media(min-width:768px){body.insesh.breathsesh .seshvoice-wrap{grid-column:2;grid-row:5;justify-content:flex-start}body.insesh.breathsesh .seshhint{grid-column:2;grid-row:6}}