/* HELEN compact system 260718.
   Reference density: JOY IELTS pages. Keep pages readable, not poster-sized. */
:root{
  --helen-ink:#1f1a2e;
  --helen-text:#675f72;
  --helen-muted:#8b8394;
  --helen-panel:#fff;
  --helen-paper:#fff;
  --helen-line:rgba(55,43,78,.115);
  --helen-exam:#40506f;
  --helen-brand:#7b4fe8;
  --helen-blue:#eef4f4;
  --helen-blue-ink:#40506f;
  --helen-mint:#e9fbef;
  --helen-mint-ink:#43845b;
  --helen-warm:#fff7ef;
  --helen-warm-ink:#d46b34;
  --helen-danger:#ffe5ed;
  --helen-danger-ink:#b6535e;
  --helen-shadow:none;
}

*{box-sizing:border-box}
html{overflow-x:hidden}
body{
  margin:0 !important;
  min-height:100vh !important;
  overflow-x:hidden !important;
  background:#fff !important;
  color:var(--helen-ink) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Microsoft YaHei",Arial,sans-serif !important;
  font-size:13px !important;
  line-height:1.42 !important;
}
button,input,select,textarea,a{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}

.page{
  min-height:100vh !important;
  display:flex !important;
  justify-content:center !important;
  padding:22px !important;
}
.app{
  width:min(100%,1060px) !important;
  margin:0 auto !important;
  border:1px solid var(--helen-line) !important;
  border-radius:18px !important;
  background:var(--helen-paper) !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
.inner,main{
  padding:16px 18px 22px !important;
}
.topbar{
  min-height:48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:0 !important;
  padding:12px 18px !important;
  border-bottom:1px solid rgba(31,26,46,.06) !important;
  background:transparent !important;
  color:var(--helen-ink) !important;
  position:relative !important;
  top:auto !important;
  z-index:3 !important;
  backdrop-filter:none !important;
}
.brand,.title,.brand span,.title b{
  min-width:0 !important;
  color:var(--helen-ink) !important;
  font-weight:850 !important;
  letter-spacing:0 !important;
}
.brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.title b,.brand span:last-child{
  display:block !important;
  font-size:15px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.title span{
  display:block !important;
  margin-top:2px !important;
  color:var(--helen-muted) !important;
  font-size:11px !important;
}
.dot,.mark,.brand-mark{
  width:32px !important;
  height:32px !important;
  flex:0 0 auto !important;
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  border-radius:8px !important;
  background:var(--helen-warm) !important;
  color:var(--helen-warm-ink) !important;
  border:1px solid rgba(212,107,52,.16) !important;
  font-weight:900 !important;
  font-size:13px !important;
}
.nav,.nav-mini,.top-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
  flex-wrap:wrap !important;
}
.nav a,.nav-mini a,.nav-mini button,.home,.reset,.link,.lang-link{
  min-height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 11px !important;
  border:1px solid rgba(55,43,78,.165) !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#645b70 !important;
  font-size:11.5px !important;
  font-weight:780 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}
.nav .lang-link,.nav-mini button,.lang-link{
  background:var(--helen-warm) !important;
  color:var(--helen-warm-ink) !important;
  border-color:rgba(212,107,52,.16) !important;
}

.hero,.intro,.mission,.panel,.word-card,.task-card,.stat,.card,.portrait-card,.mini-card,.progress-card,.reward-card,.reward-panel,details,.round,.info-card,.acceptance-strip article{
  border:1px solid #cfd7e3 !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:none !important;
}
.hero,.intro{
  padding:13px !important;
  margin-bottom:11px !important;
}
.eyebrow{
  margin:0 0 7px !important;
  color:var(--helen-blue-ink) !important;
  font-size:10.5px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
}
h1,h2,h3,p{margin-top:0}
h1,.hero h1,.mission h1{
  max-width:760px !important;
  margin:0 0 8px !important;
  color:var(--helen-ink) !important;
  font-size:22px !important;
  line-height:1.08 !important;
  letter-spacing:-.025em !important;
  font-weight:820 !important;
}
h2,.panel h2,.card h2,.queue h2{
  margin:0 0 9px !important;
  color:var(--helen-ink) !important;
  font-size:17px !important;
  line-height:1.15 !important;
  letter-spacing:-.02em !important;
}
h3,.info-card h3{
  margin:0 0 7px !important;
  color:var(--helen-ink) !important;
  font-size:15px !important;
}
.lead,.mission-copy,.summary,.example,.item,.rule,.coach-text,.mini-card p,.portrait-body small,.reward-card span,.reward-card a,.reward-panel small,.reward-panel span,.info-card p,.footer{
  color:var(--helen-text) !important;
  font-size:12.5px !important;
  line-height:1.42 !important;
}

.home-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 260px !important;
  gap:12px !important;
  align-items:start !important;
}
.mission{
  min-height:auto !important;
  height:auto !important;
  display:grid !important;
  grid-template-rows:auto auto !important;
  gap:10px !important;
  padding:13px !important;
  background:#fff !important;
}
.mission h1{
  font-size:23px !important;
}
.mission-copy{
  max-width:620px !important;
}
.plan-choice{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  margin-top:10px !important;
}
.plan-button,.pill,.mini-pill,.chip,.tag,.type{
  min-height:26px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 9px !important;
  border:1px solid #d8dee8 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#3f4b5c !important;
  font-size:11px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}
.plan-button.active,.round.active,.queue-item.current,.tag.now{
  border-color:#f0d2a7 !important;
  background:var(--helen-warm) !important;
  color:var(--helen-warm-ink) !important;
}
.big-task{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:10px !important;
  align-items:center !important;
  margin-top:10px !important;
  padding:10px !important;
  border:1px solid #f0d2a7 !important;
  border-radius:10px !important;
  background:var(--helen-warm) !important;
}
.big-task strong{
  display:block !important;
  color:var(--helen-ink) !important;
  font-size:15px !important;
  letter-spacing:0 !important;
}
.big-task span{
  display:block !important;
  margin-top:2px !important;
  color:var(--helen-text) !important;
  font-size:12px !important;
}
.primary,.btn.primary,.check{
  min-height:34px !important;
  border:0 !important;
  border-radius:8px !important;
  background:var(--helen-brand) !important;
  color:#fff !important;
  padding:0 13px !important;
  font-size:12px !important;
  font-weight:820 !important;
  box-shadow:none !important;
}

.side{
  display:grid !important;
  gap:10px !important;
  align-content:start !important;
}
.portrait-card,.progress-card,.mini-card,.reward-card,.reward-panel{
  overflow:hidden !important;
}
.portrait{
  width:100% !important;
  max-height:150px !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  background:transparent !important;
  display:block !important;
}
.portrait-body,.mini-card,.progress-card,.reward-card,.reward-panel{
  padding:10px !important;
}
.portrait-body strong,.progress-card span,.mini-card strong,.reward-card strong,.reward-panel strong{
  display:block !important;
  font-size:12.5px !important;
}
.reward-card{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  align-items:center !important;
}
.reward-card a{
  grid-column:1 / -1 !important;
  min-height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(38,55,77,.18) !important;
  border-radius:8px !important;
  color:var(--helen-exam) !important;
  font-weight:820 !important;
}
.reward-panel{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:10px !important;
  align-items:center !important;
  margin-top:12px !important;
  background:var(--helen-warm) !important;
  border-color:#f1d8ba !important;
}
.reward-panel img{
  display:none !important;
  width:58px !important;
  height:76px !important;
  object-fit:contain !important;
}
.coach-head img,.coach-reward img{
  display:none !important;
}
.coach-reward{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
  align-items:start !important;
}
.progress-card strong{
  display:block !important;
  margin-top:3px !important;
  font-size:21px !important;
  letter-spacing:-.02em !important;
}
.progress-track,.progress,.bar{
  height:6px !important;
  margin-top:8px !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:#e5eaf1 !important;
}
.progress-fill,.bar div,.bar .fill{
  height:100% !important;
  border-radius:inherit !important;
  background:var(--helen-warm-ink) !important;
}
.mini-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:7px !important;
  margin-top:8px !important;
}
.mini-actions a{
  min-height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #d8dee8 !important;
  border-radius:8px !important;
  color:var(--helen-exam) !important;
  font-size:11px !important;
  font-weight:800 !important;
}
.round-strip,.acceptance-strip{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  margin-top:11px !important;
}
.round,.acceptance-strip article{
  min-height:auto !important;
  padding:10px !important;
}
.round span,.acceptance-strip span{
  display:block !important;
  color:var(--helen-muted) !important;
  font-size:10.5px !important;
  font-weight:820 !important;
}
.round strong,.acceptance-strip strong{
  display:block !important;
  margin-top:4px !important;
  color:var(--helen-ink) !important;
  font-size:13px !important;
  line-height:1.25 !important;
}
.acceptance-strip{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.teacher-info,.footer{
  padding:0 18px 18px !important;
}
summary{
  padding:12px 14px !important;
  cursor:pointer !important;
  font-weight:850 !important;
}
.info-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:9px !important;
  padding:0 12px 12px !important;
}
.info-card{
  min-height:auto !important;
  padding:10px !important;
}

.layout{
  display:grid !important;
  grid-template-columns:210px minmax(0,1fr) 250px !important;
  gap:12px !important;
  align-items:start !important;
}
.panel,.word-card,.task-card{
  padding:12px !important;
}
.stat{
  min-height:auto !important;
  display:grid !important;
  gap:3px !important;
  padding:9px !important;
  margin-bottom:7px !important;
  background:#fff !important;
}
.stat span{
  color:var(--helen-muted) !important;
  font-size:11px !important;
  font-weight:800 !important;
}
.stat strong,.stat b{
  color:var(--helen-ink) !important;
  font-size:20px !important;
  line-height:1 !important;
  letter-spacing:-.02em !important;
}
.rules{
  display:grid !important;
  gap:7px !important;
  margin-top:10px !important;
}
.rule{
  padding:8px !important;
  border:1px solid #d8dee8 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--helen-text) !important;
  font-size:12px !important;
}
.rule.active{
  border-color:#f0d2a7 !important;
  background:var(--helen-warm) !important;
  color:var(--helen-ink) !important;
}
.word-card{
  min-height:auto !important;
  display:grid !important;
  grid-template-rows:auto auto auto !important;
  background:#fff !important;
}
.meta{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:10px !important;
  color:var(--helen-muted) !important;
  font-size:11.5px !important;
  font-weight:850 !important;
}
.word-main{
  align-self:start !important;
  text-align:left !important;
  padding:12px 0 !important;
}
.word{
  margin:0 !important;
  color:var(--helen-ink) !important;
  font-size:26px !important;
  line-height:1 !important;
  letter-spacing:-.02em !important;
  font-weight:850 !important;
}
.ipa{
  margin-top:7px !important;
  color:var(--helen-blue-ink) !important;
  font-size:12px !important;
  font-weight:800 !important;
}
.meaning{
  margin-top:5px !important;
  color:var(--helen-ink) !important;
  font-size:13px !important;
  font-weight:780 !important;
}
.example{
  margin:8px 0 0 !important;
  max-width:none !important;
  padding:8px !important;
  border:1px solid #e5eaf1 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--helen-text) !important;
  font-size:12px !important;
}
.task-card{
  background:var(--helen-warm) !important;
  border-color:#f0d2a7 !important;
}
.task-card h2{
  margin:0 0 5px !important;
  font-size:16px !important;
  letter-spacing:0 !important;
}
.task-card p{
  margin:0 !important;
  color:var(--helen-text) !important;
  font-size:12px !important;
}
.actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  margin-top:10px !important;
}
.btn,.listen,.audio-btn,.action,.secondary{
  min-height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 11px !important;
  border:1px solid #d8dee8 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--helen-exam) !important;
  font-size:11.5px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
.btn.aqua,.listen,.audio-btn{
  background:var(--helen-blue) !important;
  border-color:#cbdcf5 !important;
  color:var(--helen-blue-ink) !important;
}
.btn.done,.queue-item.done,.tag.done{
  background:var(--helen-mint) !important;
  border-color:#cbe9d8 !important;
  color:var(--helen-mint-ink) !important;
}
.spell-box{
  margin-top:10px !important;
  padding:9px !important;
  border:1px solid #d8dee8 !important;
  border-radius:9px !important;
  background:#fff !important;
}
.spell-box input,input,select,textarea{
  width:100% !important;
  min-height:34px !important;
  border:1px solid #cfd7e3 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--helen-ink) !important;
  outline:none !important;
  padding:8px 10px !important;
  font-size:12.5px !important;
}
.feedback{
  margin-top:8px !important;
  padding:8px !important;
  border-radius:8px !important;
  font-size:12px !important;
}
.feedback.ok{
  background:var(--helen-mint) !important;
  color:var(--helen-mint-ink) !important;
}
.feedback.bad,.chip.bad{
  background:var(--helen-danger) !important;
  color:var(--helen-danger-ink) !important;
}
.coach-head{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  margin-bottom:9px !important;
}
.coach-head img{
  width:46px !important;
  height:58px !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}
.coach-head strong{
  display:block !important;
  font-size:12.5px !important;
}
.coach-head small{
  color:var(--helen-muted) !important;
  font-size:11px !important;
}
.coach-text{
  margin:0 !important;
  font-size:12.5px !important;
  font-weight:820 !important;
}
.queue{
  display:grid !important;
  gap:5px !important;
  max-height:300px !important;
  overflow:auto !important;
  padding-right:2px !important;
}
.queue-item{
  min-height:30px !important;
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) 50px !important;
  gap:7px !important;
  align-items:center !important;
  padding:0 7px !important;
  border:1px solid #d8dee8 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--helen-text) !important;
  font-size:11.5px !important;
}
.queue-word{
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-weight:850 !important;
}
.reset{
  width:100% !important;
  margin-top:10px !important;
  border-color:#d8dee8 !important;
  background:#fff !important;
  color:var(--helen-exam) !important;
}

.controls{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 150px !important;
  gap:8px !important;
  margin-bottom:10px !important;
}
.summary{
  display:flex !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:10px !important;
  color:var(--helen-muted) !important;
  font-size:11.5px !important;
}
.list{
  display:grid !important;
  gap:7px !important;
}
.list .card{
  min-height:auto !important;
  display:grid !important;
  grid-template-columns:minmax(128px,.78fr) minmax(0,1.4fr) 148px !important;
  gap:10px !important;
  align-items:center !important;
  padding:9px !important;
  border-radius:10px !important;
}
.word-row{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  min-width:0 !important;
}
.meaning-block,.audio-actions,.word-row{max-width:100%}
.word-row .word,.list .word{
  color:var(--helen-ink) !important;
  font-size:16px !important;
  font-weight:850 !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.word-row .ipa,.list .ipa{
  color:var(--helen-blue-ink) !important;
  font-size:11px !important;
  margin-top:2px !important;
}
.meaning-block{
  min-width:0 !important;
}
.audio,.audio-actions{
  min-width:140px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
}

.grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-bottom:12px !important;
}
.cards{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}
.card{
  padding:11px !important;
}
.item{
  min-height:34px !important;
  padding:8px !important;
  border:1px solid #e5eaf1 !important;
  border-radius:8px !important;
  background:#fff !important;
}
.chips{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}

/* Floating coach stays a helper, never a hero image. */
.coach,.floating-coach{
  max-width:116px !important;
}
.coach img,.floating-coach img{
  max-width:58px !important;
}

input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:3px solid rgba(29,79,145,.18) !important;
  outline-offset:2px !important;
}

@media(max-width:980px){
  .app{width:min(100%,720px) !important}
  .home-grid,.layout,.grid,.cards,.controls,.acceptance-strip,.info-grid{
    grid-template-columns:1fr !important;
  }
  .reward-layout{
    grid-template-columns:1fr !important;
  }
  .list .card{
    grid-template-columns:1fr !important;
  }
  .word-card,.mission{
    min-height:auto !important;
  }
}
@media(max-width:640px){
  .page{padding:0 !important}
  .app{
    width:100% !important;
    min-height:100vh !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .topbar{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .nav,.nav-mini{justify-content:flex-start !important}
  .inner,main{padding:14px !important}
  h1,.hero h1,.mission h1{font-size:21px !important}
  .big-task{grid-template-columns:1fr !important}
  .word{font-size:24px !important}
  .portrait{max-height:120px !important}
}

.chakra-float{
  position:fixed !important;
  right:24px !important;
  bottom:50px !important;
  width:204px !important;
  z-index:80 !important;
  display:grid !important;
  justify-items:end !important;
  gap:7px !important;
  pointer-events:none !important;
}
.chakra-bubble{
  width:176px !important;
  padding:10px 12px !important;
  border:1px solid rgba(38,55,77,.18) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:var(--helen-ink) !important;
  box-shadow:0 14px 34px rgba(38,55,77,.16) !important;
  font-size:12.5px !important;
  line-height:1.35 !important;
  font-weight:760 !important;
  pointer-events:auto !important;
}
.chakra-body{
  position:relative !important;
  width:154px !important;
  height:188px !important;
  display:grid !important;
  place-items:end center !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  pointer-events:auto !important;
  overflow:visible !important;
  cursor:grab !important;
  touch-action:none !important;
  user-select:none !important;
}
.chakra-float.is-dragging .chakra-body{
  cursor:grabbing !important;
  filter:drop-shadow(0 12px 18px rgba(64,80,111,.22)) !important;
}
.chakra-float.is-dragging .chakra-bubble{
  opacity:.88 !important;
}
.chakra-body img{
  width:150px !important;
  height:184px !important;
  object-fit:contain !important;
  transform-origin:50% 90% !important;
  animation:chakra-breathe 3.2s ease-in-out infinite !important;
}
.chakra-status{
  position:absolute !important;
  top:4px !important;
  left:-8px !important;
  min-height:20px !important;
  padding:0 7px !important;
  display:inline-flex !important;
  align-items:center !important;
  border-radius:999px !important;
  background:var(--helen-brand) !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:900 !important;
}
.chakra-controls{
  display:flex !important;
  gap:5px !important;
  justify-content:flex-end !important;
  pointer-events:auto !important;
}
.chakra-controls button{
  min-height:24px !important;
  padding:0 6px !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.92) !important;
  color:var(--helen-exam) !important;
  font-size:10.5px !important;
  font-weight:850 !important;
}
.chakra-float[data-motion="wave"] .chakra-body img{animation:chakra-wave .9s ease-in-out 1 !important}
.chakra-float[data-motion="nod"] .chakra-body img{animation:chakra-nod .75s ease-in-out 1 !important}
.chakra-float[data-motion="cheer"] .chakra-body img{animation:chakra-cheer .85s ease-in-out 1 !important}
.chakra-float[data-motion="alert"] .chakra-body img{animation:chakra-alert .65s ease-in-out 1 !important}
.chakra-float[data-motion="focus"] .chakra-body{filter:drop-shadow(0 8px 14px rgba(212,107,52,.22)) !important}
.chakra-float[data-motion="run"] .chakra-body img{animation:chakra-run .95s ease-in-out 1 !important}
.chakra-float[data-motion="spin"] .chakra-body img{animation:chakra-spin .9s ease-in-out 1 !important}
.chakra-float[data-motion="salute"] .chakra-body img{animation:chakra-salute .95s ease-in-out 1 !important}
.chakra-float[data-motion="flash"] .chakra-body img{animation:chakra-flash .85s ease-in-out 1 !important}
.chakra-float[data-motion="flash"] .chakra-body{filter:drop-shadow(0 0 16px rgba(123,79,232,.35)) !important}

@keyframes chakra-breathe{
  0%,100%{transform:translateY(2px) scale(1)}
  50%{transform:translateY(-3px) scale(1.012)}
}
@keyframes chakra-wave{
  0%,100%{transform:rotate(0deg) translateY(0)}
  25%{transform:rotate(-5deg) translateY(-4px)}
  55%{transform:rotate(5deg) translateY(-6px)}
}
@keyframes chakra-nod{
  0%,100%{transform:translateY(0) scale(1)}
  45%{transform:translateY(7px) scale(.985)}
}
@keyframes chakra-cheer{
  0%,100%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-12px) scale(1.05)}
  65%{transform:translateY(-4px) scale(1.02)}
}
@keyframes chakra-alert{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  50%{transform:translateX(5px)}
  75%{transform:translateX(-3px)}
}
@keyframes chakra-run{
  0%,100%{transform:translateX(0) rotate(0deg)}
  20%{transform:translateX(-8px) rotate(-3deg)}
  45%{transform:translateX(9px) rotate(4deg)}
  70%{transform:translateX(-4px) rotate(-2deg)}
}
@keyframes chakra-spin{
  0%{transform:rotate(0deg) scale(1)}
  55%{transform:rotate(360deg) scale(1.03)}
  100%{transform:rotate(360deg) scale(1)}
}
@keyframes chakra-salute{
  0%,100%{transform:rotate(0deg) translateY(0)}
  30%{transform:rotate(-7deg) translateY(-5px)}
  65%{transform:rotate(-7deg) translateY(-5px)}
}
@keyframes chakra-flash{
  0%,100%{transform:translateY(0) scale(1);opacity:1}
  25%{transform:translateY(-8px) scale(1.08);opacity:.92}
  50%{transform:translateY(1px) scale(.98);opacity:1}
  75%{transform:translateY(-5px) scale(1.04);opacity:.95}
}

@media (prefers-reduced-motion: reduce){
  .chakra-body img,
  .chakra-float[data-motion] .chakra-body img{
    animation:none !important;
  }
}
@media(max-width:640px){
  .chakra-float{
    right:14px !important;
    bottom:14px !important;
    width:54px !important;
    pointer-events:none !important;
  }
  .chakra-body{
    pointer-events:auto !important;
  }
  .chakra-body img{
    width:54px !important;
    height:auto !important;
  }
  .chakra-bubble,
  .chakra-shadow,
  .chakra-voice{
    display:none !important;
  }
  body{
    padding-bottom:78px !important;
  }
}

@media(max-width:420px){
  .chakra-float{
    right:10px !important;
    bottom:10px !important;
    width:46px !important;
  }
  .chakra-body img{
    width:46px !important;
  }
}

@media(max-width:640px){
  .chakra-body{
    width:54px !important;
    height:62px !important;
    border-radius:12px !important;
  }
  .chakra-body img{
    width:54px !important;
    height:auto !important;
  }
  .chakra-bubble{
    display:none !important;
  }
  .chakra-controls button{
    min-height:24px !important;
    padding:0 5px !important;
  }
}

.home-hero-v2,.hero-v2-status,.mission-v2,.mission-card,.ability-card,.route-card,.teacher-card{
  border:1px solid #cfd7e3 !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 16px 44px rgba(72,54,130,.07) !important;
}
.home-hero-v2{
  min-height:340px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.2fr) 320px !important;
  gap:16px !important;
  padding:16px !important;
  border-color:rgba(55,43,78,.115) !important;
  background:linear-gradient(145deg,#fff,#faf7ff 58%,#edfaff) !important;
  position:relative !important;
  overflow:hidden !important;
}
.home-hero-v2::before{
  content:"" !important;
  position:absolute !important;
  left:16px !important;
  top:16px !important;
  width:42px !important;
  height:4px !important;
  border-radius:999px !important;
  background:var(--helen-brand,#7b4fe8) !important;
}
.home-hero-v2 > *{
  position:relative !important;
}
.hero-v2-copy{
  display:grid !important;
  align-content:center !important;
  padding:26px 22px 22px !important;
}
.hero-v2-copy h1{
  max-width:640px !important;
  margin:0 0 10px !important;
  font-size:42px !important;
  line-height:1.02 !important;
  letter-spacing:0 !important;
  color:#1f1a2e !important;
}
.growth-copy{
  max-width:680px !important;
  color:var(--helen-text) !important;
  font-size:15px !important;
  line-height:1.45 !important;
}
.hero-v2-focus{
  width:min(100%,520px) !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  column-gap:10px !important;
  row-gap:3px !important;
  align-items:center !important;
  margin-top:18px !important;
  padding:12px 14px !important;
  border:1px solid rgba(123,79,232,.16) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.72) !important;
}
.hero-v2-focus span{
  grid-row:1 / 3 !important;
  min-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 10px !important;
  border-radius:999px !important;
  background:#dff9fb !important;
  color:#287986 !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.hero-v2-focus strong{
  font-size:15px !important;
  color:#1f1a2e !important;
}
.hero-v2-focus small{
  color:#675f72 !important;
  font-size:12px !important;
}
.hero-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:9px !important;
  margin-top:16px !important;
}
.today-loop{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:6px !important;
  width:min(100%,560px) !important;
  margin-top:18px !important;
}
.today-loop span{
  min-height:30px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(64,80,111,.14) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.72) !important;
  color:#40506f !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.today-loop span:first-child{
  background:rgba(123,79,232,.11) !important;
  border-color:rgba(123,79,232,.22) !important;
  color:#7b4fe8 !important;
}
.secondary-link{
  min-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 13px !important;
  border:1px solid #d8dee8 !important;
  border-radius:8px !important;
  color:var(--helen-exam) !important;
  font-size:12px !important;
  font-weight:850 !important;
}
.hero-v2-status{
  align-self:stretch !important;
  display:grid !important;
  align-content:center !important;
  gap:9px !important;
  padding:16px !important;
  background:rgba(255,255,255,.82) !important;
}
.hero-v2-status h2{
  margin:0 0 4px !important;
  font-size:18px !important;
  letter-spacing:0 !important;
}
.status-row{
  min-height:42px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 10px !important;
  border:1px solid rgba(55,43,78,.115) !important;
  border-radius:12px !important;
  background:#fff !important;
}
.status-row span{
  color:#675f72 !important;
  font-size:12px !important;
  font-weight:850 !important;
}
.status-row strong{
  color:#40506f !important;
  font-size:13px !important;
}
.status-row.muted{
  background:#fbfaf8 !important;
}
.mini-growth{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:7px !important;
  margin-top:4px !important;
}
.mini-growth div{
  min-height:58px !important;
  padding:8px !important;
  border-radius:12px !important;
  background:#fff1d8 !important;
}
.mini-growth span{
  display:block !important;
  color:#8b6b39 !important;
  font-size:11px !important;
  font-weight:850 !important;
}
.mini-growth strong{
  display:block !important;
  margin-top:4px !important;
  color:#1f1a2e !important;
  font-size:17px !important;
}
.mission-card:hover,.ability-card:hover,.route-card:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(123,79,232,.22) !important;
  background:#fff !important;
}
.section-title p,.ability-card span{
  color:var(--helen-muted) !important;
  font-size:11px !important;
  font-weight:850 !important;
}
.mission-v2{
  margin-top:14px !important;
  padding:14px !important;
}
.mission-v2 .section-title h2,.section-title h2{
  margin:0 !important;
  font-size:18px !important;
  line-height:1.15 !important;
}
.mission-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
  margin-top:10px !important;
}
.mission-card{
  display:grid !important;
  align-content:start !important;
  min-height:128px !important;
  padding:12px !important;
  border:1px solid rgba(55,43,78,.115) !important;
  border-radius:14px !important;
  background:#fff !important;
  transition:transform .18s ease,border-color .18s ease !important;
}
.mission-card.current{
  background:#fff1d8 !important;
  border-color:rgba(212,107,52,.24) !important;
}
.mission-card span{
  width:max-content !important;
  min-height:24px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 8px !important;
  border-radius:999px !important;
  background:#eef4f4 !important;
  color:#40506f !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.mission-card.current span{
  background:#7b4fe8 !important;
  color:#fff !important;
}
.mission-card h3{
  margin:12px 0 5px !important;
  font-size:17px !important;
  color:#1f1a2e !important;
}
.mission-card p{
  margin:0 !important;
  color:#675f72 !important;
  font-size:12px !important;
}
.mission-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  margin-top:10px !important;
}
.mission-meta b{
  min-height:22px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 7px !important;
  border-radius:999px !important;
  background:rgba(64,80,111,.07) !important;
  color:#40506f !important;
  font-size:10.5px !important;
  font-weight:900 !important;
}
.mission-card.current .mission-meta b{
  background:rgba(123,79,232,.11) !important;
  color:#7b4fe8 !important;
}
.task-progress{
  height:6px !important;
  margin-top:12px !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.72) !important;
}
.task-progress div{
  height:100% !important;
  width:0% !important;
  border-radius:inherit !important;
  background:#d46b34 !important;
  transition:width .25s ease !important;
}
/*
.today-item b{
  display:block !important;
  font-size:13px !important;
}
.today-item em{
  align-self:center !important;
  font-style:normal !important;
  color:var(--helen-warm-ink) !important;
  font-size:11px !important;
  font-weight:900 !important;
}
*/
.plan-choice.compact{
  margin-top:12px !important;
}
.ability-map,.learning-route,.teacher-board{
  margin-top:14px !important;
}
.section-title{
  display:flex !important;
  align-items:end !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:9px !important;
}
.ability-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:8px !important;
}
.ability-card{
  min-height:118px !important;
  padding:11px !important;
  position:relative !important;
  overflow:hidden !important;
  transition:transform .18s ease,border-color .18s ease !important;
}
.ability-card::before{
  content:"" !important;
  display:block !important;
  width:34px !important;
  height:3px !important;
  margin-bottom:8px !important;
  border-radius:999px !important;
  background:var(--helen-exam) !important;
}
.ability-card:nth-child(2)::before,.ability-card:nth-child(4)::before{
  background:var(--helen-warm-ink) !important;
}
.ability-card:nth-child(3)::before,.ability-card:nth-child(5)::before{
  background:#40506f !important;
}
.ability-card strong{
  display:block !important;
  margin:5px 0 !important;
  font-size:15px !important;
}
.ability-card p,.route-card p,.teacher-card p,.teacher-card li{
  margin-bottom:0 !important;
  color:var(--helen-text) !important;
  font-size:12px !important;
  line-height:1.42 !important;
}
.stars{
  color:var(--helen-exam) !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
}
.route-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
}
.route-card{
  min-height:126px !important;
  padding:12px !important;
  transition:transform .18s ease,border-color .18s ease !important;
}
.route-card .status{
  display:inline-flex !important;
  min-height:22px !important;
  align-items:center !important;
  padding:0 7px !important;
  border-radius:999px !important;
  background:var(--helen-warm) !important;
  color:var(--helen-warm-ink) !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.route-card.locked .status{
  background:#edf1f6 !important;
  color:#6c7788 !important;
}
.route-card h3{
  margin:10px 0 6px !important;
  font-size:15px !important;
}
.teacher-board{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:10px !important;
}
.teacher-card{
  padding:14px !important;
  background:linear-gradient(145deg,#fff,#fbfaf8) !important;
}
.teacher-card h2{
  margin:0 0 8px !important;
  font-size:17px !important;
}
.teacher-card ul{
  margin:0 !important;
  padding-left:18px !important;
}
@media(max-width:920px){
  .home-hero-v2,.teacher-board{
    grid-template-columns:1fr !important;
  }
  .mission-grid,.ability-grid,.route-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:560px){
  .mission-grid,.ability-grid,.route-grid{
    grid-template-columns:1fr !important;
  }
  .home-hero-v2{
    padding:16px !important;
  }
  .hero-v2-copy h1{
    font-size:28px !important;
  }
}

.desk-hero{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 280px !important;
  gap:16px !important;
  align-items:end !important;
  padding:22px 4px 18px !important;
  border-bottom:1px solid rgba(64,80,111,.1) !important;
}
.desk-kicker{
  margin:0 0 8px !important;
  color:#7b4fe8 !important;
  font-size:12px !important;
  font-weight:900 !important;
}
.desk-hero h1{
  margin:0 !important;
  color:#1f1a2e !important;
  font-size:38px !important;
  line-height:1.05 !important;
  letter-spacing:0 !important;
}
.desk-subtitle{
  max-width:680px !important;
  margin:10px 0 0 !important;
  color:#675f72 !important;
  font-size:15px !important;
}
.desk-identity{
  min-height:86px !important;
  padding:14px !important;
  border:1px solid rgba(64,80,111,.13) !important;
  border-radius:14px !important;
  background:linear-gradient(145deg,#fff,#f5fbff) !important;
}
.desk-identity span,.panel-head span{
  display:block !important;
  color:#8b8394 !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.desk-identity strong{
  display:block !important;
  margin-top:8px !important;
  color:#40506f !important;
  font-size:17px !important;
  line-height:1.25 !important;
}
.desk-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr) !important;
  gap:12px !important;
  margin-top:16px !important;
}
.desk-panel{
  border:1px solid rgba(64,80,111,.13) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 10px 30px rgba(72,54,130,.045) !important;
}
.daily-panel,.progress-panel,.roadmap-panel,.coach-panel{
  padding:16px !important;
}
.panel-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:12px !important;
}
.panel-head b{
  min-height:24px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 8px !important;
  border-radius:999px !important;
  background:#eef2f8 !important;
  color:#40506f !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.daily-panel h2{
  margin:0 0 6px !important;
  color:#1f1a2e !important;
  font-size:28px !important;
  line-height:1.1 !important;
}
.daily-panel p,.progress-note,.coach-panel p{
  margin:0 !important;
  color:#675f72 !important;
  font-size:13px !important;
  line-height:1.5 !important;
}
.mission-strip{
  display:flex !important;
  gap:6px !important;
  margin:16px 0 10px !important;
}
.mission-strip span{
  min-height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 12px !important;
  border-radius:999px !important;
  background:#dff9fb !important;
  color:#287986 !important;
  font-size:12px !important;
  font-weight:900 !important;
}
.desk-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:16px !important;
}
.progress-metrics{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
}
.progress-metrics div{
  min-height:72px !important;
  padding:10px !important;
  border-radius:12px !important;
  background:#fff1d8 !important;
}
.progress-metrics span{
  display:block !important;
  color:#8b6b39 !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.progress-metrics strong{
  display:block !important;
  margin-top:5px !important;
  color:#1f1a2e !important;
  font-size:18px !important;
  line-height:1.1 !important;
}
.progress-note{
  margin-top:14px !important;
}
.secondary-link.wide{
  width:100% !important;
  margin-top:14px !important;
}
.roadmap-panel,.coach-panel{
  margin-top:12px !important;
}
.roadmap-row{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
}
.roadmap-item{
  min-height:92px !important;
  padding:12px !important;
  border:1px solid rgba(64,80,111,.12) !important;
  border-radius:12px !important;
  background:#fbfaf8 !important;
}
.roadmap-item.current{
  border-color:rgba(123,79,232,.25) !important;
  background:linear-gradient(145deg,#f6f1ff,#fff) !important;
}
.roadmap-item span{
  color:#7b4fe8 !important;
  font-size:11px !important;
  font-weight:950 !important;
}
.roadmap-item strong{
  display:block !important;
  margin-top:8px !important;
  color:#1f1a2e !important;
  font-size:15px !important;
}
.roadmap-item p{
  margin:3px 0 0 !important;
  color:#675f72 !important;
  font-size:12px !important;
}
.coach-panel{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:12px !important;
  align-items:center !important;
}
.coach-panel .panel-head{
  grid-column:1 / -1 !important;
  margin-bottom:0 !important;
}
.coach-actions{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
}
@media(max-width:920px){
  .desk-hero,.desk-grid,.coach-panel{
    grid-template-columns:1fr !important;
  }
  .roadmap-row,.progress-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

.brand:has(+ .nav) .mark + span{
  color:#1f1a2e !important;
}
.word-card{
  min-height:430px !important;
  padding:20px !important;
  border-radius:14px !important;
  box-shadow:0 10px 30px rgba(72,54,130,.045) !important;
}
.word-card .word-main{
  align-self:center !important;
  text-align:left !important;
  padding:18px 0 14px !important;
}
.word-card .word{
  font-size:46px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}
.word-info-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:12px !important;
  color:#40506f !important;
  font-size:15px !important;
  line-height:1.35 !important;
}
.word-info-row .pos,
.word-info-row .ipa,
.word-info-row .meaning{
  display:inline-flex !important;
  align-items:center !important;
  min-height:30px !important;
  margin:0 !important;
  padding:0 10px !important;
  border:1px solid rgba(64,80,111,.14) !important;
  border-radius:999px !important;
  background:#f8fbff !important;
  color:#40506f !important;
  font-size:15px !important;
  font-weight:800 !important;
}
.word-info-row .pos{
  background:#f6f1ff !important;
  border-color:rgba(123,79,232,.2) !important;
  color:#7b4fe8 !important;
}
.word-info-row .meaning{
  max-width:100% !important;
}
.word-card .example{
  max-width:none !important;
  margin:18px 0 0 !important;
  background:#f7fbff !important;
  color:#25334d !important;
  font-size:18px !important;
  line-height:1.6 !important;
  padding:17px 18px !important;
  border-color:rgba(64,80,111,.16) !important;
  border-radius:14px !important;
  font-weight:700 !important;
}
.word-card .example::before{
  content:"Example Sentence";
  display:block;
  margin-bottom:6px;
  color:#7b4fe8;
  font-size:11px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
}
.task-card{
  border-radius:14px !important;
  background:linear-gradient(145deg,#ffffff,#f7fbff) !important;
  border-color:rgba(64,80,111,.16) !important;
}
.task-card h2{
  font-size:22px !important;
  letter-spacing:0 !important;
}
.rules .rule strong{
  color:#40506f !important;
}
.rules .rule{
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) !important;
  gap:2px 8px !important;
  min-height:68px !important;
  cursor:pointer !important;
  background:#fff !important;
  transition:border-color .18s ease, background .18s ease, transform .18s ease !important;
}
.rules .rule.active{
  border-color:rgba(123,79,232,.24) !important;
  background:#f8fbff !important;
  color:#40506f !important;
}
.rules .rule:hover{
  border-color:rgba(123,79,232,.3) !important;
  transform:translateY(-1px) !important;
}
.rules .rule span{
  grid-row:1 / span 2 !important;
  width:24px !important;
  height:24px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:#eef8ff !important;
  color:#40506f !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.rules .rule small{
  color:#726b7d !important;
  font-size:12px !important;
  line-height:1.35 !important;
}
.rules .rule.active span{
  background:#7b4fe8 !important;
  color:#fff !important;
}
.reward-panel{
  background:#f7fbff !important;
  border-color:rgba(64,80,111,.14) !important;
  color:#40506f !important;
}
.reward-panel strong{
  color:#1f1a2e !important;
}
.reward-panel span,
.reward-panel small{
  color:#5f6f91 !important;
}
.queue.collapsed{
  display:none !important;
}
.practice-group{
  margin-top:12px !important;
  padding:12px !important;
  border:1px solid rgba(64,80,111,.11) !important;
  border-radius:14px !important;
  background:#fff !important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.practice-group.active{
  border-color:rgba(123,79,232,.42) !important;
  background:#fbfdff !important;
  box-shadow:0 0 0 3px rgba(123,79,232,.08) !important;
}
.practice-head{
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:9px !important;
}
.practice-head strong{
  color:#1f1a2e !important;
  font-size:15px !important;
}
.practice-head span{
  color:#756f82 !important;
  font-size:12px !important;
  font-weight:750 !important;
}
.action-grid{
  display:grid !important;
  gap:8px !important;
}
.action-grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.listen-btn,.record-btn,.replay-btn{
  min-height:36px !important;
  padding:0 12px !important;
  border-radius:11px !important;
  border:1px solid rgba(64,80,111,.14) !important;
  background:#fff !important;
  color:#40506f !important;
  font-size:12px !important;
  font-weight:850 !important;
  box-shadow:none !important;
}
.listen-btn{
  background:#eefbfc !important;
  border-color:#cbeff3 !important;
  color:#287986 !important;
}
.listen-btn.done{
  background:#eefbfc !important;
  border-color:#8fdde7 !important;
  color:#1f6670 !important;
}
.record-btn{
  background:#f6f1ff !important;
  border-color:rgba(123,79,232,.22) !important;
}
.replay-btn{
  background:#eefbff !important;
  border-color:#cdeef8 !important;
  color:#287986 !important;
}
.record-btn.recording{
  background:#f6f1ff !important;
  border-color:#7b4fe8 !important;
  color:#7b4fe8 !important;
  box-shadow:0 0 0 3px rgba(123,79,232,.12) !important;
}
.record-btn.done,.replay-btn.ready{
  border-color:#7b4fe8 !important;
  color:#40506f !important;
}
.replay-btn:disabled{
  opacity:.55 !important;
  background:#f6f1ff !important;
  color:#8b8394 !important;
}
.mic-note{
  color:#675f72 !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
}
.feedback.show{
  background:#f7fbff !important;
  border:1px solid rgba(64,80,111,.14) !important;
  color:#40506f !important;
}
.feedback.ok{
  background:#f6f1ff !important;
  border-color:rgba(123,79,232,.22) !important;
  color:#40506f !important;
}
.feedback.bad{
  background:#fff3fa !important;
  border-color:#f3d9ea !important;
  color:#9a4770 !important;
}
.completion-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:9px !important;
  margin-top:12px !important;
}

.home-coach-hero .chakra-float{
  display:none !important;
}

/* Word Sprint refinement: softer JOY blue-purple and tighter floating coach bounds. */
.chakra-float{
  width:164px !important;
  justify-items:center !important;
}

body:has(.word-card) .layout{
  grid-template-columns:210px minmax(520px, 1fr) 250px !important;
  gap:14px !important;
}
body:has(.word-card) main{
  padding:16px 18px 18px !important;
}
body:has(.word-card) .panel{
  padding:14px !important;
}
body:has(.word-card) .word-card{
  min-height:410px !important;
  padding:18px 20px !important;
}
body:has(.word-card) .word-card .word-main{
  padding:14px 0 12px !important;
}
body:has(.word-card) .task-card{
  padding:16px !important;
  background:linear-gradient(145deg,#ffffff,#f8fbff) !important;
}
body:has(.word-card) .btn.primary{
  background:#6377ad !important;
  border-color:rgba(99,119,173,.34) !important;
}
body:has(.word-card) .bar div{
  background:#6377ad !important;
}
body:has(.word-card) .sprint-label,
body:has(.word-card) .queue-toggle,
body:has(.word-card) .word-card .example::before{
  color:#6377ad !important;
}
body:has(.word-card) .type,
body:has(.word-card) .word-info-row .pos{
  background:#f2f6ff !important;
  border-color:rgba(99,119,173,.18) !important;
  color:#6377ad !important;
}
body:has(.word-card) .rules .rule.active{
  border-color:rgba(99,119,173,.24) !important;
  background:#f7fbff !important;
}
body:has(.word-card) .rules .rule:hover{
  border-color:rgba(99,119,173,.28) !important;
}
body:has(.word-card) .rules .rule.active span{
  background:#6377ad !important;
}
body:has(.word-card) .practice-group.active{
  border-color:rgba(99,119,173,.34) !important;
  box-shadow:0 0 0 3px rgba(99,119,173,.07) !important;
}
body:has(.word-card) .practice-group[data-section="read"]{
  background:#fbf9ff !important;
}
body:has(.word-card) .practice-group[data-section="read"].active{
  border-color:rgba(132,145,196,.36) !important;
  box-shadow:0 0 0 3px rgba(132,145,196,.08) !important;
}
body:has(.word-card) .practice-group[data-section="spell"]{
  position:relative !important;
  background:linear-gradient(135deg,#f4f8ff,#ffffff) !important;
  border-color:rgba(99,119,173,.26) !important;
  padding:14px 14px 14px 18px !important;
}
body:has(.word-card) .practice-group[data-section="spell"]::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:14px !important;
  bottom:14px !important;
  width:4px !important;
  border-radius:999px !important;
  background:#6377ad !important;
}
body:has(.word-card) .practice-group[data-section="spell"].active{
  border-color:rgba(99,119,173,.34) !important;
  box-shadow:0 0 0 3px rgba(99,119,173,.07) !important;
}
body:has(.word-card) .dictation-entry{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
body:has(.word-card) .dictation-entry div{
  display:grid !important;
  gap:4px !important;
}
body:has(.word-card) .dictation-entry b{
  color:#1f1a2e !important;
  font-size:14px !important;
}
body:has(.word-card) .dictation-entry span{
  color:#5f6f91 !important;
  font-size:12.5px !important;
  font-weight:780 !important;
}
body:has(.word-card) .dictation-btn{
  min-width:140px !important;
  min-height:42px !important;
  border-radius:12px !important;
  box-shadow:0 8px 18px rgba(64,80,111,.12) !important;
}
body:has(.word-card) .task-card > .actions{
  margin-top:12px !important;
  padding-left:2px !important;
}

/* Word list should stay in the same blue-gray system, not the old yellow/orange tags. */
body:has(.list) .mark{
  background:#f2f6ff !important;
  border-color:rgba(99,119,173,.18) !important;
  color:#6377ad !important;
}
body:has(.list) .ipa{
  color:#6377ad !important;
}
body:has(.list) .type{
  background:#f2f6ff !important;
  border:1px solid rgba(99,119,173,.18) !important;
  color:#6377ad !important;
}
body:has(.list) .hero{
  background:linear-gradient(145deg,#ffffff,#f7fbff) !important;
}

/* Site-wide visual unification after Word Sprint approval. */
:root{
  --helen-brand:#6377ad !important;
  --helen-brand-2:#40506f !important;
  --helen-brand-soft:#f2f6ff !important;
  --helen-warm:#f7fbff !important;
  --helen-warm-ink:#6377ad !important;
  --warm:#6377ad !important;
  --warm-soft:#f2f6ff !important;
}

.app{
  border-color:rgba(64,80,111,.12) !important;
  box-shadow:none !important;
}
.topbar{
  border-bottom-color:rgba(64,80,111,.08) !important;
}
.nav a{
  border-color:rgba(64,80,111,.16) !important;
  color:#40506f !important;
  background:#fff !important;
}
.nav a:hover,
.nav a[aria-current="page"]{
  background:#f2f6ff !important;
  border-color:rgba(99,119,173,.22) !important;
}
.lang-link{
  background:#f7fbff !important;
  border-color:rgba(99,119,173,.2) !important;
  color:#6377ad !important;
}
.mark,.brand-mark,.dot{
  background:#f2f6ff !important;
  border-color:rgba(99,119,173,.18) !important;
  color:#6377ad !important;
}
.hero,.intro,.mission,.desk-hero,.learning-space-hero,
.panel,.word-card,.task-card,.stat,.card,.portrait-card,.mini-card,
.progress-card,.reward-card,.reward-panel,details,.round,.info-card,
.desk-panel,.coach-panel,.roadmap-panel,.today-card,.mission-card,
.route-card,.skill-entry,.medal,.gift{
  border-color:rgba(64,80,111,.13) !important;
  box-shadow:0 10px 30px rgba(64,80,111,.045) !important;
}
.hero,.intro,.mission,.desk-hero,.learning-space-hero{
  background:linear-gradient(145deg,#ffffff,#f7fbff) !important;
}
.eyebrow,.sprint-label,.summary strong,
.today-item em,.route-card .status,.mission-meta b,
.progress-card span,.mini-card strong,.reward-card strong,
.reward-panel strong,.coach-text strong{
  color:#6377ad !important;
}
.plan-button.active,.round.active,.queue-item.current,.tag.now,
.mission-card.current,.roadmap-item.current,.route-card .status,
.type,.chip,.tag,.pill,.mini-pill{
  background:#f2f6ff !important;
  border-color:rgba(99,119,173,.18) !important;
  color:#6377ad !important;
}
.primary,.btn.primary,.check,.gift button{
  background:#6377ad !important;
  border-color:rgba(99,119,173,.34) !important;
  color:#fff !important;
}
.secondary,.secondary-link,.btn,.gift button:disabled{
  border-color:rgba(64,80,111,.15) !important;
}
.progress-fill,.bar div{
  background:#6377ad !important;
}
.gift button:disabled{
  background:#f8fafc !important;
  color:#8b96aa !important;
}
.medal.earned,.btn.done,.queue-item.done,.tag.done{
  background:#eaf4ff !important;
  border-color:#cbdcf2 !important;
  color:#40506f !important;
}
.chip.warn{
  background:#f2f6ff !important;
  border-color:rgba(99,119,173,.2) !important;
  color:#6377ad !important;
}
.coach-reward,.portrait-body{
  background:#f7fbff !important;
  border-color:rgba(64,80,111,.14) !important;
}

/* Alternating word rows: white / soft blue, with no yellow Spell labels. */
.list .card:nth-child(odd),
.queue .queue-item:nth-child(odd){
  background:#fff !important;
}
.list .card:nth-child(even),
.queue .queue-item:nth-child(even){
  background:#f7fbff !important;
}
.list .card .type,
.queue .queue-item span:last-child{
  background:#f2f6ff !important;
  border:1px solid rgba(99,119,173,.18) !important;
  color:#6377ad !important;
}
.list .card .ipa{
  color:#6377ad !important;
}
.queue .queue-item.current{
  background:#eef4ff !important;
  border-color:rgba(99,119,173,.28) !important;
}
.queue .queue-item.done{
  background:#eaf4ff !important;
  border-color:#cbdcf2 !important;
}

/* Home page alignment with the approved Word Sprint palette. */
.desk-kicker{
  color:#6377ad !important;
}
.skill-entry.active{
  background:#f7fbff !important;
  border-color:rgba(99,119,173,.24) !important;
}
.skill-entry.active span{
  background:#6377ad !important;
  color:#fff !important;
}
.skill-entry span{
  background:#eef4ff !important;
  color:#40506f !important;
}
.skill-entry b{
  background:#f2f6ff !important;
  color:#40506f !important;
}
.progress-line span,
.coach-message{
  background:#f7fbff !important;
  border:1px solid rgba(64,80,111,.12) !important;
  color:#40506f !important;
}
.progress-line strong{
  color:#1f1a2e !important;
}
.task-pills span{
  background:#eefbfc !important;
  color:#287986 !important;
}
.plan-button.active{
  background:#f2f6ff !important;
  border-color:rgba(99,119,173,.24) !important;
  color:#40506f !important;
}
body:has(.word-card) .record-btn{
  background:#f4f2ff !important;
  border-color:#ddd8f5 !important;
  color:#4d5f92 !important;
}
body:has(.word-card) .record-btn.recording{
  background:#f0edff !important;
  border-color:#8491c4 !important;
  color:#40506f !important;
  box-shadow:0 0 0 3px rgba(132,145,196,.12) !important;
}
body:has(.word-card) .record-btn.done,
body:has(.word-card) .record-btn.done{
  border-color:#8491c4 !important;
}
body:has(.word-card) .replay-btn{
  background:#f8fafc !important;
  border-color:#d8e0ec !important;
  color:#40506f !important;
}
body:has(.word-card) .replay-btn.ready{
  border-color:#9fb0d6 !important;
}
body:has(.word-card) .replay-btn:disabled{
  background:#f8fafc !important;
  color:#9aa4b5 !important;
}
body:has(.word-card) .feedback.ok{
  background:#f2f6ff !important;
  border-color:rgba(99,119,173,.2) !important;
}
.learning-space-hero{
  min-height:270px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 280px !important;
  gap:26px !important;
  align-items:center !important;
  padding:18px 4px 12px !important;
  border-bottom:1px solid rgba(64,80,111,.08) !important;
}
.space-copy h1{
  max-width:720px !important;
  margin:0 !important;
  color:#1f1a2e !important;
  font-size:50px !important;
  line-height:1.02 !important;
  letter-spacing:0 !important;
}
.space-copy .desk-subtitle{
  max-width:620px !important;
  margin-top:12px !important;
  color:#675f72 !important;
  font-size:16px !important;
}
.space-actions{
  display:flex !important;
  gap:9px !important;
  flex-wrap:wrap !important;
  margin-top:20px !important;
}
.coach-stage{
  min-height:250px !important;
  display:grid !important;
  justify-items:center !important;
  align-content:center !important;
  position:relative !important;
}
.coach-stage img{
  width:200px !important;
  height:228px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 22px 28px rgba(64,80,111,.18)) !important;
  animation:chakra-breathe 3.2s ease-in-out infinite !important;
}
.coach-stage p{
  margin:-8px 0 0 !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#40506f !important;
  box-shadow:0 10px 26px rgba(64,80,111,.12) !important;
  font-size:12px !important;
  font-weight:900 !important;
}
.focus-strip{
  display:grid !important;
  grid-template-columns:minmax(220px,.8fr) minmax(0,1fr) 170px 160px !important;
  gap:14px !important;
  align-items:center !important;
  margin:10px 0 18px !important;
  padding:12px 0 !important;
  border-bottom:1px solid rgba(64,80,111,.08) !important;
}
.focus-strip > div:first-child span,.space-section-head p{
  color:#8b8394 !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.focus-strip strong{
  display:block !important;
  margin-top:4px !important;
  color:#1f1a2e !important;
  font-size:22px !important;
}
.focus-strip small{
  display:block !important;
  color:#675f72 !important;
  font-size:12px !important;
}
.focus-flow{
  display:flex !important;
  gap:6px !important;
  flex-wrap:wrap !important;
}
.focus-flow span{
  min-height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 10px !important;
  border-radius:999px !important;
  background:#dff9fb !important;
  color:#287986 !important;
  font-size:11px !important;
  font-weight:900 !important;
}
.focus-strip .task-progress{
  margin:0 !important;
  background:#eef2f8 !important;
}
.skills-space{
  margin-top:4px !important;
  padding:0 !important;
}
.space-section-head{
  display:flex !important;
  align-items:end !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin-bottom:12px !important;
}
.space-section-head h2{
  margin:0 !important;
  color:#1f1a2e !important;
  font-size:24px !important;
}
.space-section-head p{
  max-width:440px !important;
  margin:0 !important;
  text-align:right !important;
}
.skill-entry-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
}
.skill-entry{
  min-height:96px !important;
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) auto !important;
  column-gap:12px !important;
  align-items:center !important;
  padding:14px !important;
  border:1px solid rgba(64,80,111,.1) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:none !important;
}
.skill-entry.active{
  border-color:rgba(123,79,232,.26) !important;
  background:linear-gradient(145deg,#f6f1ff,#fff) !important;
}
.skill-entry span{
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:14px !important;
  background:#eef2f8 !important;
  color:#40506f !important;
  font-weight:950 !important;
}
.skill-entry.active span{
  background:#7b4fe8 !important;
  color:#fff !important;
}
.skill-entry strong{
  display:block !important;
  color:#1f1a2e !important;
  font-size:17px !important;
}
.skill-entry p{
  margin:3px 0 0 !important;
  color:#675f72 !important;
  font-size:12px !important;
}
.skill-entry b{
  min-height:24px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 8px !important;
  border-radius:999px !important;
  background:#eef2f8 !important;
  color:#40506f !important;
  font-size:11px !important;
}
.skill-entry.active b{
  background:#e8f7ef !important;
  color:#43845b !important;
}
.space-bottom{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(280px,.72fr) !important;
  gap:18px !important;
  align-items:center !important;
  margin-top:16px !important;
  padding:12px 0 4px !important;
}
.simple-progress h2{
  margin:0 0 10px !important;
  font-size:20px !important;
}
.progress-line{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.progress-line span{
  min-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  background:#fff1d8 !important;
  color:#8b6b39 !important;
  font-size:12px !important;
  font-weight:900 !important;
}
.progress-line strong{
  color:#1f1a2e !important;
}
.coach-message{
  margin:0 !important;
  padding:14px 16px !important;
  border-radius:14px !important;
  background:#f6f1ff !important;
  color:#40506f !important;
  font-size:14px !important;
  font-weight:850 !important;
}
@media(max-width:920px){
  .learning-space-hero,.focus-strip,.space-bottom{
    grid-template-columns:1fr !important;
  }
  .skill-entry-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Final theme lock: keep all pages on the approved blue-gray system. */
.desk-kicker,
.eyebrow{
  color:#6377ad !important;
}
.skill-entry.active{
  border-color:rgba(99,119,173,.24) !important;
  background:linear-gradient(145deg,#f7fbff,#fff) !important;
}
.skill-entry.active span{
  background:#6377ad !important;
  color:#fff !important;
}
.skill-entry.active b{
  background:#eaf4ff !important;
  color:#40506f !important;
}
.progress-line span{
  background:#f7fbff !important;
  border:1px solid rgba(64,80,111,.13) !important;
  color:#40506f !important;
}
.coach-message{
  background:#f7fbff !important;
  border:1px solid rgba(64,80,111,.13) !important;
  color:#40506f !important;
}
.primary,.btn.primary,.check,.gift button,
.plan-button.active{
  background:#6377ad !important;
  border-color:rgba(99,119,173,.34) !important;
  color:#fff !important;
}
.plan-button.active{
  background:#f2f6ff !important;
  color:#40506f !important;
}
.route-card .status,
.type,.chip,.tag,.pill,.mini-pill{
  background:#f2f6ff !important;
  border-color:rgba(99,119,173,.18) !important;
  color:#6377ad !important;
}

/* Practice word header: JOY-style light metadata row, not pill boxes. */
body:has(.word-card) .word-info-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:baseline !important;
  gap:7px !important;
  margin-top:10px !important;
}
body:has(.word-card) .word-info-row .pos,
body:has(.word-card) .word-info-row .ipa,
body:has(.word-card) .word-info-row .meaning{
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:650 !important;
}
body:has(.word-card) .word-info-row .pos{
  color:#6377ad !important;
}
body:has(.word-card) .word-info-row .ipa{
  margin:0 !important;
  color:#6f7483 !important;
}
body:has(.word-card) .word-info-row .meaning{
  color:#40506f !important;
}
body:has(.word-card) .word-info-row .meaning[hidden]{
  display:none !important;
}

/* JOY sunlight pass: brighter, cleaner, more optimistic across HELEN. */
:root{
  --helen-ink:#1f1a2e !important;
  --helen-text:#5f5870 !important;
  --helen-muted:#847b92 !important;
  --helen-line:rgba(123,111,158,.14) !important;
  --helen-exam:#40506f !important;
  --helen-brand:#7b4fe8 !important;
  --helen-blue:#eef8ff !important;
  --helen-blue-ink:#2f6f8f !important;
  --helen-mint:#e9fbef !important;
  --helen-mint-ink:#287245 !important;
  --helen-warm:#eefbff !important;
  --helen-warm-ink:#287986 !important;
}
html,
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(223,249,251,.85) 0, rgba(223,249,251,0) 28%),
    radial-gradient(circle at 86% 12%, rgba(246,241,255,.95) 0, rgba(246,241,255,0) 30%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 42%,#f7fbff 100%) !important;
  color:#1f1a2e !important;
}
.page{
  background:transparent !important;
}
.app,
.shell,
.container{
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(123,111,158,.12) !important;
  box-shadow:0 18px 54px rgba(72,54,130,.08) !important;
}
.topbar,
header.topbar{
  background:rgba(255,255,255,.86) !important;
  border-bottom-color:rgba(123,111,158,.10) !important;
  backdrop-filter:blur(16px) !important;
}
.hero,.intro,.mission,.desk-hero,.learning-space-hero,
.panel,.word-card,.task-card,.stat,.card,.portrait-card,.mini-card,
.progress-card,.reward-card,.reward-panel,details,.round,.info-card,
.desk-panel,.coach-panel,.roadmap-panel,.today-card,.mission-card,
.route-card,.skill-entry,.medal,.gift{
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(123,111,158,.13) !important;
  box-shadow:0 10px 26px rgba(72,54,130,.045) !important;
}
.hero,.intro,.desk-hero,.learning-space-hero{
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,243,255,.92) 58%,rgba(238,248,255,.94)) !important;
}
.mission,.today-card,.task-card,.practice-group.active,.skill-entry.active{
  background:linear-gradient(145deg,#ffffff,#f7f3ff 58%,#eef8ff) !important;
  border-color:rgba(123,79,232,.18) !important;
}
.reward-panel,.reward-card,.medal,.gift,.progress-line span{
  background:#f6f1ff !important;
  border-color:#ded2ff !important;
  color:#40506f !important;
}
.mark,.logo-mark,.app-dot{
  background:#f6f1ff !important;
  border-color:#ded2ff !important;
  color:#7b4fe8 !important;
}
.primary,.btn.primary,.check,.gift button,
.plan-button.active,.start-btn,.submit,
button.primary,a.primary{
  background:#7b4fe8 !important;
  border-color:#7b4fe8 !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(123,79,232,.18) !important;
}
.primary:hover,.btn.primary:hover,.check:hover,
.plan-button.active:hover,.start-btn:hover,.submit:hover{
  transform:translateY(-1px);
  box-shadow:0 13px 26px rgba(123,79,232,.22) !important;
}
.route-card .status,
.type,.chip,.tag,.pill,.mini-pill,
.plan-button,.queue-toggle,.lang-link{
  background:#f6f1ff !important;
  border-color:#ded2ff !important;
  color:#6a4ec0 !important;
}
.btn,.nav a,.rule,.queue-item,input,select,textarea{
  background:#fff !important;
  border-color:rgba(123,111,158,.16) !important;
}
.listen-btn,.btn.aqua,.sound{
  background:#eef8ff !important;
  border-color:#cce8f8 !important;
  color:#286987 !important;
}
.record-btn{
  background:#f6f1ff !important;
  border-color:#ded2ff !important;
  color:#5d4aa8 !important;
}
.done,.btn.done,.record-btn.done,.replay-btn.ready,.feedback.ok{
  background:#e9fbef !important;
  border-color:#bfe8cb !important;
  color:#287245 !important;
}
.bar,.progress-track{
  background:#edf2fb !important;
}
.bar div,.progress-fill{
  background:linear-gradient(90deg,#7b4fe8,#70c8e8) !important;
}
.example,
.word-card .example,
.coach-message,
.coach-text{
  background:#f8fbff !important;
  border-color:#dcebf8 !important;
  color:#40506f !important;
}
.list .card:nth-child(even),
.queue-item:nth-child(even){
  background:#f8fbff !important;
}
.list .card:nth-child(odd),
.queue-item:nth-child(odd){
  background:#fff !important;
}

/* Dictation sunlight pass: make the spelling area feel clear and inviting. */
body:has(.word-card) .spell-box{
  margin-top:16px !important;
  padding:18px !important;
  border:1px solid #ded2ff !important;
  border-radius:16px !important;
  background:
    linear-gradient(180deg,#ffffff 0%,#fbf9ff 52%,#f4fbff 100%) !important;
  box-shadow:0 12px 28px rgba(123,79,232,.07) !important;
}
body:has(.word-card) .spell-box input{
  min-height:54px !important;
  border:2px solid #d8ccff !important;
  border-radius:14px !important;
  background:#ffffff !important;
  color:#1f1a2e !important;
  font-size:22px !important;
  font-weight:750 !important;
  letter-spacing:.02em !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 8px 18px rgba(72,54,130,.05) !important;
}
body:has(.word-card) .spell-box input::placeholder{
  color:#aaa1b7 !important;
  font-size:16px !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
}
body:has(.word-card) .spell-box input:focus{
  border-color:#7b4fe8 !important;
  box-shadow:0 0 0 4px rgba(123,79,232,.13),0 8px 18px rgba(72,54,130,.05) !important;
}
body:has(.word-card) .spell-box .actions{
  margin-top:13px !important;
  gap:9px !important;
}
body:has(.word-card) .spell-box .btn{
  min-height:42px !important;
  border-radius:13px !important;
}
body:has(.word-card) .spell-box .btn:not(.primary){
  background:#fff !important;
  border-color:#dcebf8 !important;
  color:#40506f !important;
}
body:has(.word-card) .feedback.show{
  margin-top:13px !important;
  padding:12px 13px !important;
  border-radius:14px !important;
  font-size:13.5px !important;
  font-weight:820 !important;
}
body:has(.word-card) .feedback.ok{
  background:#e9fbef !important;
  border:1px solid #bfe8cb !important;
  color:#287245 !important;
}
body:has(.word-card) .feedback.bad{
  background:#fff3fa !important;
  border:1px solid #f3d9ea !important;
  color:#9a4770 !important;
}
body:has(.word-card) .completion-actions{
  margin-top:13px !important;
  gap:9px !important;
}

/* Whole-site JOY alignment: final pass for every HELEN page. */
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(223,249,251,.88) 0, rgba(223,249,251,0) 28%),
    radial-gradient(circle at 88% 10%, rgba(246,241,255,.96) 0, rgba(246,241,255,0) 31%),
    linear-gradient(145deg,#ffffff 0%,#f8f5ff 58%,#edfaff 100%) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif !important;
}
.app{
  border:1px solid #e9e2f7 !important;
  border-radius:28px !important;
  background:#fff !important;
  box-shadow:0 24px 80px rgba(72,54,130,.10) !important;
}
.topbar{
  min-height:62px !important;
  padding:15px 20px 13px !important;
  border-bottom:1px solid #f0edf7 !important;
  background:rgba(255,255,255,.88) !important;
  color:#1f1a2e !important;
}
.brand,.brand span:last-child{
  color:#1f1a2e !important;
  font-weight:900 !important;
}
.mark,.brand-mark{
  width:30px !important;
  height:30px !important;
  border:1px solid #ded2ff !important;
  border-radius:11px !important;
  background:#f6f1ff !important;
  color:#7b4fe8 !important;
}
.nav a,.nav button,.reset,.link{
  min-height:32px !important;
  border:1px solid #e9e2f7 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#625c72 !important;
  font-size:11.5px !important;
  font-weight:780 !important;
}
.nav a:hover,.nav button:hover,.link:hover{
  border-color:#ded2ff !important;
  background:#f6f1ff !important;
  color:#6a4ec0 !important;
}
main{
  padding:18px 20px 22px !important;
}
.hero,.desk-hero,.learning-space-hero,.growth-hero{
  border:1px solid #e9e2f7 !important;
  border-radius:24px !important;
  background:linear-gradient(145deg,#fff,#f6f1ff 58%,#eef8ff) !important;
  box-shadow:none !important;
}
.hero h1,.desk-hero h1,.growth-hero h1{
  color:#171426 !important;
  letter-spacing:-.045em !important;
}
.lead,.desk-subtitle,.growth-copy,p{
  color:#625d70 !important;
}
.grid,.cards,.reward-layout,.desk-grid,.layout{
  gap:10px !important;
}
.stat,.card,.panel,.desk-panel,.today-card,.word-card,.task-card,.progress-card,.reward-panel,.medal,.gift,.item,.metric,.route-row{
  border:1px solid #f0edf7 !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:none !important;
}
.stat b,.stat strong,.metric strong{
  color:#171426 !important;
  letter-spacing:-.04em !important;
}
.stat span,.metric span,.panel-head span,.summary{
  color:#8b8499 !important;
}
.card h2,.panel h2,.task-card h2{
  color:#171426 !important;
  letter-spacing:-.03em !important;
}
.item:nth-child(even),.card:nth-child(even),.stat:nth-child(even){
  background:#fbfdff !important;
}
.primary,.btn.primary,.check,.gift button,.submit,.more{
  background:#7b4fe8 !important;
  border-color:#7b4fe8 !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(123,79,232,.16) !important;
}
.secondary,.btn.secondary,.secondary-link{
  border:1px solid #e9e2f7 !important;
  background:#fff !important;
  color:#625c72 !important;
}
.chip,.tag,.type,.pill,.mini-pill,.badge,.route-card .status{
  background:#f6f1ff !important;
  border-color:#ded2ff !important;
  color:#6a4ec0 !important;
}
.chip.warn,.badge,.reward-card,.reward-panel,.gift,.medal,.progress-line span{
  background:#f6f1ff !important;
  border-color:#ded2ff !important;
  color:#40506f !important;
}
.reward-card strong,.reward-panel strong,.gift b,.medal b{
  color:#6a4ec0 !important;
}
.chip.ok,.medal.earned,.feedback.ok{
  background:#e9fbef !important;
  border-color:#bfe8cb !important;
  color:#287245 !important;
}
input,select,textarea{
  border:1px solid #e9e2f7 !important;
  border-radius:14px !important;
  background:#fff !important;
}
.footer{
  color:#8b8499 !important;
}

@media(max-width:640px){
  .chakra-float{
    width:54px !important;
    right:14px !important;
    bottom:14px !important;
    justify-items:end !important;
    pointer-events:none !important;
  }
  .chakra-body{
    width:54px !important;
    height:62px !important;
    pointer-events:auto !important;
  }
  .chakra-body img{
    width:54px !important;
    height:auto !important;
  }
  .chakra-bubble,
  .chakra-shadow,
  .chakra-voice,
  .chakra-controls{
    display:none !important;
  }
}