:root{
  --navy:#130a22;
  --purple:#7c3aed;
  --purple-dark:#5b21b6;
  --purple-tint:#f1eefc;
  --purple-tint-border:#e3daf9;
  --teal:#0d9488;
  --teal-tint:#ecfdf5;
  --red:#c0392b;
  --red-tint:#fdf1f0;
  --amber:#f59e0b;
  --ink:#1c1530;
  --gray:#6b6478;
  --gray-line:#e6e1f0;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background:#fbfaff;
  color:var(--ink);
  min-height:100vh;
}

.topbar{
  background:var(--navy);
  border-bottom:4px solid var(--purple);
  padding:14px 20px;
  text-align:center;
}
.brand-mark{color:#b9a9e8; font-style:italic; font-size:13px;}

main{max-width:640px; margin:0 auto; padding:28px 20px 8px;}

.eyebrow{color:var(--purple); font-weight:700; font-size:11px; letter-spacing:1.5px; margin:0 0 8px;}
h1{font-size:28px; font-weight:800; color:var(--navy); margin:0 0 10px; line-height:1.2;}
.subtitle{color:var(--gray); font-size:14.5px; line-height:1.5; margin:0 0 20px;}

.mechanism-box{
  background:var(--purple-tint);
  border-radius:12px;
  padding:20px 20px 18px;
  font-size:13.5px;
  line-height:1.65;
  color:#2c2340;
}
.mechanism-box p{margin:0 0 10px;}
.mechanism-box p:last-child{margin-bottom:0;}

.link-btn{
  background:none;
  border:none;
  color:var(--purple-dark);
  font-weight:700;
  font-size:13px;
  padding:4px 0;
  cursor:pointer;
  text-decoration:underline;
}

.more-text{margin-top:12px; padding-top:12px; border-top:1px solid var(--purple-tint-border);}
.more-text p{font-size:13.5px; line-height:1.65; margin:0 0 12px; color:#2c2340;}

.compare{display:flex; gap:10px; margin-top:8px;}
.compare-col{flex:1; border-radius:8px; padding:10px 12px; font-size:12px; line-height:1.5;}
.compare-col p{margin:0 0 5px;}
.compare-col.teal{background:var(--teal-tint);}
.compare-col.red{background:var(--red-tint);}
.compare-title{font-weight:800; margin-bottom:8px !important;}
.compare-col.teal .compare-title{color:var(--teal);}
.compare-col.red .compare-title{color:var(--red);}

.exercises{margin-top:34px;}
.exercises h2{font-size:18px; font-weight:800; color:var(--navy); margin:0 0 4px;}
.exercises-sub{color:var(--gray); font-size:13px; margin:0 0 16px;}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:20px;
}
@media (max-width:420px){
  .grid{grid-template-columns:1fr;}
}

.card{
  background:#fff;
  border:1px solid var(--gray-line);
  border-radius:14px;
  padding:18px 16px;
  text-align:left;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.card:active{transform:scale(.98);}
.card:hover{border-color:var(--purple); box-shadow:0 6px 20px rgba(124,58,237,.12);}
.card .icon{font-size:26px;}
.card .num{font-size:11px; font-weight:800; color:var(--purple); letter-spacing:.5px;}
.card .title{font-size:14px; font-weight:700; color:var(--navy); line-height:1.3;}
.card .dur{font-size:11.5px; color:var(--gray); font-weight:600;}

footer{
  text-align:center;
  color:var(--gray);
  font-size:12px;
  font-style:italic;
  padding:26px 20px 40px;
}

.hidden{display:none !important;}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(19,10,34,.55);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:50;
}
@media (min-width:600px){
  .overlay{align-items:center;}
}

.exercise-panel{
  background:#fff;
  width:100%;
  max-width:460px;
  border-radius:20px 20px 0 0;
  padding:28px 24px 34px;
  position:relative;
  text-align:center;
  max-height:92vh;
  overflow-y:auto;
}
@media (min-width:600px){
  .exercise-panel{border-radius:20px;}
}

.close-btn{
  position:absolute;
  top:14px; right:16px;
  background:var(--purple-tint);
  border:none;
  width:32px; height:32px;
  border-radius:50%;
  font-size:14px;
  color:var(--purple-dark);
  cursor:pointer;
}

.ex-icon{font-size:34px; margin:4px 0 2px;}
.ex-duration{color:var(--purple); font-weight:800; font-size:12px; letter-spacing:1px; margin:0 0 6px;}
.exercise-panel h2{font-size:20px; font-weight:800; color:var(--navy); margin:0 0 12px;}
.ex-instructions{font-size:13.5px; line-height:1.65; color:#3a3350; margin:0 0 22px;}

.timer-wrap{position:relative; width:150px; height:150px; margin:0 auto 14px;}
.timer-ring{width:150px; height:150px; transform:rotate(-90deg);}
.ring-bg{fill:none; stroke:var(--purple-tint-border); stroke-width:8;}
.ring-progress{
  fill:none;
  stroke:var(--purple);
  stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:339.29;
  stroke-dashoffset:0;
  transition:stroke-dashoffset .2s linear;
}
.timer-number{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  font-weight:800;
  color:var(--navy);
}

.step-text{
  font-size:13.5px;
  font-weight:700;
  color:var(--purple-dark);
  background:var(--purple-tint);
  border-radius:8px;
  padding:10px 14px;
  margin:0 0 18px;
}

.primary-btn{
  background:var(--purple);
  color:#fff;
  border:none;
  font-size:15px;
  font-weight:700;
  padding:13px 32px;
  border-radius:999px;
  cursor:pointer;
  width:100%;
}
.primary-btn:active{background:var(--purple-dark);}
.primary-btn:disabled{opacity:.55; cursor:default;}

.done-text{
  margin-top:16px;
  font-size:13.5px;
  font-weight:700;
  color:var(--teal);
}
#replayBtn{margin-top:10px;}