.speak-mirror{
  --mirror-progress:0;
  --mirror-node:0;
  position:relative;
  overflow:hidden;
  margin-top:10px;
  border:1px solid rgba(196,215,239,.94);
  border-radius:18px;
  padding:12px 13px;
  background:
    radial-gradient(circle at 8% 18%,rgba(31,155,208,.14),transparent 28%),
    radial-gradient(circle at 96% 88%,rgba(245,130,32,.12),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(244,249,255,.94) 100%);
  box-shadow:0 14px 26px rgba(45,62,121,.09),inset 0 1px 0 rgba(255,255,255,.94);
}
.speak-mirror::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#1f9bd0 0%,#23b6a6 42%,#f58220 72%,#2f61c9 100%);
  opacity:.9;
}
.speak-mirror-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.speak-mirror-kicker{
  display:flex;
  align-items:center;
  gap:7px;
  color:#244d92;
  font-size:10px;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.speak-mirror-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#23b6a6;
  box-shadow:0 0 0 5px rgba(35,182,166,.10);
}
.speak-mirror-title{
  margin:2px 0 0;
  color:#243067;
  font-size:13px;
  font-weight:850;
  line-height:1.25;
}
.speak-mirror-purpose{
  margin:5px 0 0;
  color:#5a6888;
  font-size:12px;
  font-weight:690;
  line-height:1.35;
}
.speak-mirror-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
}
.speak-mirror-btn{
  border:1px solid rgba(47,97,201,.22);
  border-radius:999px;
  padding:7px 10px;
  background:linear-gradient(180deg,#ffffff 0%,#eef6ff 100%);
  color:#244d92;
  font-size:11px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 8px 16px rgba(47,97,201,.09);
  transition:transform .16s ease,box-shadow .16s ease;
}
.speak-mirror-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(47,97,201,.13);
}
.speak-mirror-btn.secondary{
  border-color:rgba(196,210,231,.9);
  background:rgba(255,255,255,.78);
  color:#53617f;
  box-shadow:none;
}
.speak-mirror-btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.speak-mirror-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  align-items:start;
  padding-top:12px;
}
.speak-mirror-track::before,
.speak-mirror-track::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:25px;
  height:5px;
  border-radius:999px;
}
.speak-mirror-track::before{
  background:rgba(204,218,239,.75);
}
.speak-mirror-track::after{
  right:auto;
  width:calc(80% * var(--mirror-progress));
  background:linear-gradient(90deg,#1f9bd0,#23b6a6,#f58220,#2f61c9);
  box-shadow:0 0 16px rgba(31,155,208,.22);
  transition:width .28s linear;
}
.speak-mirror-step{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:7px;
  min-width:0;
}
.speak-mirror-dot{
  width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  border:2px solid rgba(188,207,234,.96);
  box-shadow:0 5px 12px rgba(44,58,109,.10),inset 0 1px 0 rgba(255,255,255,.9);
}
.speak-mirror-step.is-active .speak-mirror-dot{
  border-color:#1f9bd0;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#8defff 32%,#1f9bd0 100%);
  box-shadow:0 0 0 6px rgba(31,155,208,.11),0 8px 18px rgba(31,155,208,.18);
  animation:speakMirrorPulse 1.2s ease-in-out infinite;
}
.speak-mirror-step.is-done .speak-mirror-dot{
  border-color:#23b6a6;
  background:linear-gradient(135deg,#23b6a6,#1f9bd0);
}
.speak-mirror-label{
  display:block;
  max-width:100%;
  color:#53617f;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.025em;
  text-align:center;
  text-transform:uppercase;
  white-space:normal;
  line-height:1.1;
}
.speak-mirror-step.is-active .speak-mirror-label{
  color:#244d92;
}
.speak-mirror-coach{
  position:relative;
  z-index:1;
  margin:10px 0 0;
  color:#50617f;
  font-size:12.5px;
  font-weight:720;
  line-height:1.35;
}
.speak-mirror.is-running .speak-mirror-coach{
  color:#263a66;
}
.speak-mirror.is-paused .speak-mirror-coach{
  color:#8a4b10;
}
.my-c-replay{
  --replay-active:#1f9bd0;
  position:relative;
  overflow:hidden;
  margin-top:8px;
  border:1px solid rgba(196,215,239,.92);
  border-radius:16px;
  padding:10px 11px;
  background:
    radial-gradient(circle at 4% 22%,rgba(245,130,32,.10),transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(248,251,255,.94) 100%);
  box-shadow:0 10px 20px rgba(45,62,121,.07),inset 0 1px 0 rgba(255,255,255,.92);
}
.my-c-replay::before{
  content:"";
  position:absolute;
  left:11px;
  right:11px;
  top:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#f58220,#23b6a6,#1f9bd0);
  opacity:.88;
}
.my-c-replay-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.my-c-replay-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#8a4b10;
  font-size:10px;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.my-c-replay-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#f58220;
  box-shadow:0 0 0 5px rgba(245,130,32,.10);
}
.my-c-replay-title{
  margin:2px 0 0;
  color:#243067;
  font-size:13px;
  font-weight:850;
  line-height:1.24;
}
.my-c-replay-purpose{
  margin:4px 0 0;
  color:#5a6888;
  font-size:11.7px;
  font-weight:690;
  line-height:1.3;
}
.my-c-replay-flow{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  justify-content:flex-end;
}
.my-c-replay-flow span{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border:1px solid rgba(196,210,231,.88);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:#53617f;
  font-size:9.8px;
  font-weight:900;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.my-c-replay-options{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  margin-top:9px;
}
.my-c-replay-choice{
  position:relative;
  min-height:36px;
  border:1px solid rgba(196,210,231,.95);
  border-radius:13px;
  padding:7px 7px 8px;
  background:linear-gradient(180deg,#ffffff 0%,#f6faff 100%);
  color:#40517d;
  font-size:10.7px;
  font-weight:900;
  line-height:1.1;
  cursor:pointer;
  box-shadow:0 7px 14px rgba(44,58,109,.045);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.my-c-replay-choice::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:0;
  height:3px;
  border-radius:999px;
  background:var(--replay-accent,#1f9bd0);
  opacity:.82;
}
.my-c-replay-choice:hover{
  transform:translateY(-1px);
  border-color:rgba(31,155,208,.34);
  box-shadow:0 10px 18px rgba(47,97,201,.10);
}
.my-c-replay-choice.is-active{
  background:linear-gradient(180deg,#f9fcff 0%,#edf7ff 100%);
  border-color:rgba(31,155,208,.42);
  box-shadow:0 0 0 3px rgba(31,155,208,.10),0 11px 18px rgba(47,97,201,.10);
  color:#243067;
}
.my-c-replay-note{
  position:relative;
  z-index:1;
  margin:8px 0 0;
  padding:9px 10px;
  border:1px solid rgba(196,210,231,.88);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  color:#53617f;
  font-size:12px;
  font-weight:690;
  line-height:1.34;
}
.my-c-replay-note strong{
  color:#243067;
  font-weight:900;
}
.my-c-replay.is-ready .my-c-replay-note strong{
  color:#0b7f6d;
}
.my-c-replay-board{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:8px;
  margin-top:8px;
}
.my-c-replay-mini-map,
.my-c-replay-build{
  position:relative;
  overflow:hidden;
  min-height:112px;
  border:1px solid rgba(196,210,231,.88);
  border-radius:16px;
  padding:10px;
  background:
    radial-gradient(circle at 8% 16%,color-mix(in srgb,var(--replay-active) 12%,transparent),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(247,251,255,.88) 100%);
}
.my-c-replay-mini-map::before,
.my-c-replay-build::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:0;
  height:3px;
  border-radius:999px;
  background:var(--replay-active);
  opacity:.82;
}
.my-c-replay-mini-map strong,
.my-c-replay-build strong{
  display:block;
  color:#243067;
  font-size:10.4px;
  font-weight:950;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.my-c-replay-mini-map p,
.my-c-replay-build p{
  margin:5px 0 0;
  color:#5b6886;
  font-size:11.4px;
  font-weight:680;
  line-height:1.28;
}
.my-c-replay-path{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px;
  margin-top:9px;
}
.my-c-replay-path span{
  position:relative;
  min-height:42px;
  border:1px solid rgba(196,210,231,.76);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  color:#697796;
  font-size:8.8px;
  font-weight:950;
  letter-spacing:.04em;
  text-align:center;
  text-transform:uppercase;
  display:grid;
  place-items:center;
  padding:4px;
}
.my-c-replay-path span.is-active{
  border-color:color-mix(in srgb,var(--replay-active) 48%,#ffffff);
  background:linear-gradient(180deg,#ffffff 0%,color-mix(in srgb,var(--replay-active) 10%,#f8fbff) 100%);
  color:#243067;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--replay-active) 13%,transparent),0 8px 14px rgba(44,58,109,.07);
}
.my-c-replay-build{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:9px;
  align-items:center;
}
.my-c-replay-build-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--replay-active),#23b6a6);
  color:#fff;
  font-size:17px;
  font-weight:950;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--replay-active) 12%,transparent),0 10px 18px rgba(31,155,208,.14);
}
.my-c-replay-build em{
  display:block;
  margin-top:5px;
  color:#2f3f68;
  font-size:13px;
  font-style:normal;
  font-weight:850;
  line-height:1.28;
}
.my-c-replay-launch{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  align-items:center;
  margin-top:8px;
  padding:9px 10px;
  border:1px solid rgba(31,155,208,.20);
  border-radius:16px;
  background:
    radial-gradient(circle at 2% 20%,rgba(31,155,208,.10),transparent 30%),
    linear-gradient(180deg,rgba(250,253,255,.98) 0%,rgba(240,248,255,.92) 100%);
}
.my-c-replay-launch-dot{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:12px;
  background:linear-gradient(135deg,#1f9bd0,#23b6a6);
  color:#fff;
  font-size:14px;
  font-weight:950;
  box-shadow:0 0 0 5px rgba(31,155,208,.10),0 8px 14px rgba(31,155,208,.14);
}
.my-c-replay-launch strong{
  display:block;
  color:#243067;
  font-size:11px;
  font-weight:950;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.my-c-replay-launch em{
  display:block;
  margin-top:3px;
  color:#35466e;
  font-size:12.4px;
  font-style:normal;
  font-weight:800;
  line-height:1.32;
}
.my-c-replay-launch span:last-child{
  display:block;
  margin-top:3px;
  color:#687695;
  font-size:11.4px;
  font-weight:680;
  line-height:1.28;
}
.my-c-replay.is-ready .my-c-replay-launch{
  border-color:rgba(35,182,166,.28);
  box-shadow:0 0 0 3px rgba(35,182,166,.08),0 10px 18px rgba(35,182,166,.08);
}
@keyframes speakMirrorPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@media (max-width:760px){
  .speak-mirror-head{
    grid-template-columns:1fr;
  }
  .speak-mirror-controls{
    justify-self:start;
  }
  .speak-mirror-track{
    gap:4px;
  }
  .speak-mirror-label{
    font-size:9.2px;
  }
  .my-c-replay-head{
    grid-template-columns:1fr;
  }
  .my-c-replay-flow{
    justify-content:flex-start;
  }
  .my-c-replay-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .my-c-replay-board{
    grid-template-columns:1fr;
  }
}