.dict-workspace {
  --dict-ink:#25493f;--dict-jade:#dbeadd;--dict-paper:#fffcf3;
  display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;margin:20px 0 30px;
}
.dict-workspace [hidden]{display:none!important}
.dict-practice {
  min-width:0;overflow:hidden;background:var(--dict-paper);border:1.5px solid #406759;border-radius:13px;
  box-shadow:0 4px #406759;
}
.dict-practice-head {
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px 14px;
  padding:13px clamp(16px,2vw,26px);background:#dbeadd;border-bottom:1px solid #8ba994;
}
.dict-practice-head h2 {margin:0;color:#25473e;font:900 clamp(1.25rem,2.4vw,1.7rem)/1.15 TonSerif,Georgia,serif;overflow-wrap:anywhere;letter-spacing:-.03em}
.dict-meter {display:flex;gap:4px}
.dict-meter i {
  display:grid;place-items:center;width:22px;height:22px;color:#4d6959;background:#edf2e5;border:1px solid #91a895;border-radius:4px;
  font:600 .72rem/1 "Segoe UI",sans-serif;font-variant-numeric:tabular-nums;
}
.dict-meter .current {border:1.5px solid #715d34;background:#ffdfa0;color:#42361f;box-shadow:0 2px #82754f}
.dict-meter .done {background:#396650;color:#fff;border-color:#396650}
.dict-practice-body {padding:clamp(16px,2.5vw,28px);color:var(--dict-ink)}
.dict-practice-body>p {max-width:52ch;margin:0 0 13px}
.dict-practice-body>p:empty,.dict-slot-feedback:empty{display:none}
.dict-practice #listen,.dict-practice #dictNext,.dict-practice #submit,.dict-practice #sendPartial {
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:45px;padding:8px 16px;color:#fffdf0;background:#2f5a4d;border:1.5px solid #274b40;border-radius:8px;
  box-shadow:0 3px #203f36;font-weight:750;line-height:1.24;
}
.dict-practice #listen {padding:5px 14px 5px 5px;border-radius:26px 9px 9px 26px}
.dict-play-icon {
  display:inline-grid;flex:none;place-items:center;width:31px;height:31px;
  background:#f7dc97;border-radius:50%;color:#214a3c;box-shadow:inset 0 0 0 1px #e9bd63;
}
.dict-play-icon::before {content:"";display:block;margin-left:2px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
#listen[data-playing=true] .dict-play-icon::before {width:8px;height:11px;border:0;margin:0;background:linear-gradient(to right,currentColor 35%,transparent 35% 65%,currentColor 65%)}
.dict-practice :is(#listen,#dictNext,#submit,#sendPartial):not(:disabled):active {transform:translateY(2px);box-shadow:0 1px #203f36}
.dict-practice :is(#repeat,#keepWorking,#slotAdd) {
  min-height:42px;padding:8px 13px;border:1px solid #809e89;border-radius:8px;box-shadow:0 2px #9aab99;color:var(--dict-ink);background:#edf2e5;line-height:1.22;
}
.dict-sendbar {display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;border-top:1px solid #c8d5c4;padding-top:14px;margin-top:18px}
.dict-confirm {margin-top:14px;background:#fff1cf;border:1px solid #d7bb76;border-radius:8px;padding:12px 16px}
.dict-confirm p {font-weight:650;margin:0 0 7px}
.dict-workspace .dict-guide-card {margin:0;min-width:0;padding:clamp(14px,2vw,22px);background:#f5f5e9;border:1px solid #b9c8b9;border-radius:12px;color:#32483c}
.dict-guide-card h2 {font:900 clamp(1.1rem,1.8vw,1.4rem)/1.18 TonSerif,Georgia,serif;letter-spacing:-.035em}
.dict-guide-card p{font-size:.92rem;line-height:1.49}
@media(min-width:940px){.dict-workspace {grid-template-columns:minmax(0,1.65fr) minmax(265px,1fr)}}
@media(max-width:500px){.dict-practice-head {padding:11px 14px}.dict-meter i {width:19px;height:20px}.dict-practice-body{padding:14px}.dict-sendbar{align-items:stretch}.dict-sendbar button{flex:1 1 auto}}
@media(hover:hover) and (pointer:fine){
 .dict-practice :is(#listen,#dictNext,#submit,#sendPartial):not(:disabled):hover{background:#356950}
 .dict-practice :is(#repeat,#keepWorking,#slotAdd):not(:disabled):hover{background:#dcebd9}
}
@media(prefers-reduced-motion:reduce){.dict-practice button{transition:none;transform:none!important}}