.target-text{
  word-break:keep-all;
  overflow-wrap:normal;
  white-space:pre-wrap;
  line-height:2.25!important;
  padding:30px 28px 28px!important;
  font-family:'Pyidaungsu','Myanmar Text','Noto Sans Myanmar',sans-serif!important;
  color:#fff!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  display:grid;
  gap:22px;
  position:relative;
}
.target-base-text{
  position:relative;
  color:inherit;
  opacity:.48;
  white-space:pre-wrap;
  word-break:keep-all;
  overflow-wrap:normal;
  padding:28px 18px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  text-align:center;
}
.target-base-text::before{
  content:'စာမူ';
  position:absolute;
  top:-13px;
  left:22px;
  padding:4px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:#1d1b2a;
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.4;
  letter-spacing:0;
}
.typing-feedback{
  position:relative;
  margin:0 auto;
  width:min(900px,100%);
  text-align:left;
}
.typing-feedback::before{
  content:'';
  position:absolute;
  top:-23px;
  left:50%;
  width:2px;
  height:20px;
  border-radius:999px;
  background:linear-gradient(to bottom,rgba(85,215,165,.16),rgba(85,215,165,.68));
  transform:translateX(-50%);
}
.typing-feedback::after{
  content:'သင်ရိုက်နေသောစာ';
  position:absolute;
  top:-14px;
  left:18px;
  z-index:2;
  padding:4px 12px;
  border:1px solid rgba(84,102,255,.16);
  border-radius:999px;
  background:#eef0ff;
  color:#595a86;
  font-size:12px;
  line-height:1.4;
}
.typed-preview{
  min-height:58px;
  padding:22px 16px 10px;
  border:2px solid #c5c8e2;
  border-radius:14px;
  background:linear-gradient(180deg,#f4f5ff,#ecefff);
  color:#111322;
  font-family:'Pyidaungsu','Myanmar Text','Noto Sans Myanmar',sans-serif;
  font-size:clamp(21px,2.45vw,31px);
  line-height:1.55;
  white-space:pre-wrap;
  word-break:keep-all;
  overflow-wrap:normal;
  caret-color:#111322;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.82),0 10px 26px rgba(27,22,82,.08);
}
.typed-empty{color:rgba(17,19,34,.4);font-size:14px}
.typed-correct{color:#111322}
.typed-pending-dotted{
  color:#111322;
  margin-left:1px;
}
.typed-pending-leading-mark{
  position:relative;
  display:inline-block;
  color:#55d7a5;
  margin-left:1px;
  isolation:isolate;
}
.typed-pending-leading-mark::after{
  content:'';
  position:absolute;
  z-index:1;
  top:.12em;
  right:-.08em;
  bottom:.12em;
  width:72%;
  border-radius:4px;
  background:var(--typed-preview-bg);
}
.typed-pending-caret{
  display:inline-block;
  width:7px;
  height:1.45em;
  margin-left:4px;
  border-radius:999px;
  background:#55d7a5;
  vertical-align:-.22em;
  opacity:.78;
  box-shadow:0 0 0 4px rgba(85,215,165,.12);
  animation:pendingCaretPulse 1s ease-in-out infinite;
}
.typed-wrong{
  color:#ff7373;
  background:rgba(255,84,84,.12);
  border-radius:5px;
  padding:0 2px;
  animation:wrongPulse .7s ease;
}
.typed-progress{
  height:7px;
  margin-top:8px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.typed-progress i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:#55d7a5;
  transition:width .16s ease,background .16s ease;
}
.typed-progress i.has-error{background:#ff7373}
@keyframes wrongPulse{
  0%,100%{transform:none}
  35%{transform:translateY(-1px)}
}
@keyframes pendingCaretPulse{
  0%,100%{opacity:.78}
  50%{opacity:.28}
}
html:not(.theme-dark) .target-text{color:#262338!important}
html:not(.theme-dark) .target-base-text{opacity:.46;background:rgba(118,102,234,.035);border-color:#eeeafb}
html:not(.theme-dark) .target-base-text::before{background:#fff;color:#77748e;border-color:#ece8ff}
html:not(.theme-dark) .typed-preview{background:linear-gradient(180deg,#f8f9ff,#eef0ff);border-color:#c5c8e2}
html:not(.theme-dark) .typed-empty{color:#8b879c}
html:not(.theme-dark) .typed-pending-caret{background:#28b77f;box-shadow:0 0 0 4px rgba(40,183,127,.12)}