:root{
  color-scheme:dark;
  --bg:#071013;
  --panel:#10191d;
  --panel-2:#142126;
  --line:#294047;
  --text:#f5f7f2;
  --muted:#9fb0ad;
  --green:#58cc02;
  --green-dark:#3f9700;
  --blue:#2f80ed;
  --red:#ff5a5f;
  --amber:#f8b84e;
  --violet:#9b7cff;
  --shadow:0 18px 50px rgba(0,0,0,.34);
  --submit-bar-space:104px;
}

*{box-sizing:border-box}

html{
  min-height:100%;
  min-height:100svh;
  background:var(--bg);
  overflow-x:hidden;
}

body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    linear-gradient(180deg,rgba(47,128,237,.13),rgba(7,16,19,0) 240px),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

button,input,textarea{
  font:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}

.hidden{
  display:none!important;
}

.runtimeShell{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding-bottom:calc(var(--submit-bar-space) + env(safe-area-inset-bottom));
}

.runtimeHeader{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(7,16,19,.94);
  border-bottom:1px solid rgba(159,176,173,.14);
  padding:12px 14px 10px;
  backdrop-filter:blur(14px);
}

.headerTop{
  width:100%;
  max-width:720px;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.brand{
  font-size:18px;
  line-height:1.1;
  font-weight:900;
}

.lessonMeta{
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.comboPill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  margin-top:7px;
  padding:4px 9px;
  border:1px solid rgba(248,184,78,.42);
  border-radius:999px;
  background:rgba(248,184,78,.13);
  color:#ffe0a6;
  font-size:12px;
  font-weight:950;
  box-shadow:0 6px 18px rgba(248,184,78,.08);
}

.metricRow{
  display:flex;
  gap:6px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.metric{
  position:relative;
  min-height:34px;
  padding:8px 9px;
  border:1px solid rgba(159,176,173,.16);
  border-radius:8px;
  background:rgba(20,33,38,.86);
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.metric:after{
  position:absolute;
  right:8px;
  top:-10px;
  opacity:0;
  pointer-events:none;
  font-size:12px;
  font-weight:950;
}

#xpMetric.pulse:after{
  content:attr(data-gain);
  color:#b7e94b;
  animation:xpFloat .72s ease;
}

.metric strong{
  margin-left:4px;
  color:var(--text);
  font-size:13px;
}

.progressWrap{
  width:100%;
  max-width:720px;
  margin:10px auto 0;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
}

.progressTrack{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:#1d2a2f;
  border:1px solid rgba(159,176,173,.12);
}

.progressBar{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),#b7e94b);
  box-shadow:0 0 18px rgba(88,204,2,.28);
  transition:width .62s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,opacity .18s ease,filter .18s ease;
}

.runtimeShell[data-state="correctionMode"] .progressBar{
  opacity:.55;
  filter:saturate(.72);
}

.progressText{
  min-width:38px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-align:right;
}

.lessonMain{
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:16px 14px 8px;
  overflow-anchor:none;
}

.runtimeNotice{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:12px;
  padding:12px;
  border-radius:8px;
  border:1px solid rgba(255,90,95,.36);
  background:rgba(255,90,95,.12);
  color:#ffd6d7;
}

.runtimeNotice.review{
  border-color:rgba(248,184,78,.36);
  background:rgba(248,184,78,.12);
  color:#ffe6b8;
}

.runtimeNotice.review.correction{
  border-color:rgba(255,126,64,.58);
  background:linear-gradient(90deg,rgba(255,90,95,.18),rgba(248,184,78,.14));
  color:#fff0d6;
}

.runtimeShell[data-state="review"] .runtimeNotice.review,
.runtimeShell[data-state="correctionMode"] .runtimeNotice.review{
  box-shadow:0 0 0 2px rgba(248,184,78,.08);
}

.runtimeNotice strong{
  font-size:13px;
}

.runtimeNotice span{
  font-size:13px;
  color:inherit;
  opacity:.86;
}

.momentumToast{
  display:flex;
  align-items:center;
  min-height:42px;
  margin-bottom:12px;
  padding:10px 12px;
  border:1px solid rgba(159,176,173,.14);
  border-radius:8px;
  background:rgba(20,33,38,.88);
  color:var(--text);
  font-size:14px;
  font-weight:900;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.momentumToast.correct{
  border-color:rgba(88,204,2,.34);
  background:linear-gradient(90deg,rgba(88,204,2,.16),rgba(20,33,38,.9));
  color:#efffe8;
}

.momentumToast.wrong{
  border-color:rgba(255,90,95,.34);
  background:linear-gradient(90deg,rgba(255,90,95,.13),rgba(20,33,38,.9));
  color:#ffe1e2;
}

.momentumToast.retry{
  border-color:rgba(248,184,78,.4);
  background:linear-gradient(90deg,rgba(248,184,78,.16),rgba(20,33,38,.9));
  color:#ffe7b8;
}

.momentumToast.correction{
  border-color:rgba(255,126,64,.46);
  background:linear-gradient(90deg,rgba(255,90,95,.16),rgba(248,184,78,.12));
  color:#fff0d6;
}

.introHero{
  display:none;
  width:100%;
  min-height:calc(100svh - 196px);
  align-items:center;
  justify-content:center;
}

.runtimeShell[data-state="intro"]{
  padding-bottom:env(safe-area-inset-bottom);
}

.runtimeShell[data-state="intro"] .lessonMain{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:18px;
  padding-bottom:18px;
}

.runtimeShell[data-state="intro"] .introHero,
.introHero.introLeaving{
  display:flex;
}

.runtimeShell[data-state="intro"] .taskSurface,
.runtimeShell[data-state="intro"] .answerArea,
.runtimeShell[data-state="intro"] .question,
.runtimeShell[data-state="intro"] .stepInfo,
.runtimeShell[data-state="intro"] .feedbackPanel,
.runtimeShell[data-state="intro"] .runtimeNotice.review,
.runtimeShell[data-state="intro"] .wordOrder,
.runtimeShell[data-state="intro"] .choiceGrid,
.runtimeShell[data-state="intro"] .submitBar,
.runtimeShell.isIntroLeaving .taskSurface,
.runtimeShell.isIntroLeaving .answerArea,
.runtimeShell.isIntroLeaving .question,
.runtimeShell.isIntroLeaving .stepInfo,
.runtimeShell.isIntroLeaving .feedbackPanel,
.runtimeShell.isIntroLeaving .runtimeNotice.review,
.runtimeShell.isIntroLeaving .wordOrder,
.runtimeShell.isIntroLeaving .choiceGrid,
.runtimeShell.isIntroLeaving .submitBar{
  display:none;
}

.introCard{
  width:min(100%,430px);
  padding:28px 20px 22px;
  border:1px solid rgba(159,176,173,.12);
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(20,33,38,.9),rgba(11,22,25,.94));
  box-shadow:0 16px 38px rgba(0,0,0,.22);
  text-align:center;
}

.introBadge{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:5px 10px;
  border:1px solid rgba(88,204,2,.24);
  border-radius:999px;
  background:rgba(88,204,2,.09);
  color:#c8f9a8;
  font-size:12px;
  font-weight:900;
}

.introTitle{
  margin:16px 0 5px;
  font-size:40px;
  line-height:1.04;
  letter-spacing:0;
}

.introSubtitle{
  margin:0;
  color:var(--muted);
  font-size:16px;
  font-weight:800;
}

.introFeatures{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:22px 0;
}

.introFeatures span{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:9px 8px;
  border:1px solid rgba(159,176,173,.13);
  border-radius:8px;
  background:rgba(8,17,20,.48);
  color:rgba(245,247,242,.9);
  font-size:13px;
  font-weight:900;
  line-height:1.15;
}

.introStartButton{
  width:100%;
  min-height:62px;
  border:0;
  border-radius:8px;
  background:linear-gradient(180deg,#70df1a,var(--green));
  color:#0c2104;
  box-shadow:0 7px 0 var(--green-dark);
  font-size:18px;
  font-weight:950;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}

.introStartButton:not(:disabled):hover{
  filter:brightness(1.04);
}

.introStartButton:active{
  transform:translateY(3px);
  box-shadow:0 4px 0 var(--green-dark);
}

.introStartButton:disabled{
  opacity:.7;
  cursor:default;
  transform:none;
}

.introIn{
  animation:introIn .24s ease;
}

.introLeaving{
  animation:introLeaving .2s ease forwards;
}

.taskSurface{
  position:relative;
  min-height:300px;
  min-height:clamp(300px,calc(100svh - 230px),430px);
  padding:18px;
  border:1px solid rgba(159,176,173,.16);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(16,25,29,.98),rgba(12,20,23,.98));
  box-shadow:var(--shadow);
  overflow:hidden;
  scroll-margin-bottom:calc(var(--submit-bar-space) + 18px);
  transform-origin:center bottom;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.runtimeShell[data-state="submitting"] .taskSurface{
  border-color:rgba(47,128,237,.34);
  box-shadow:0 0 0 2px rgba(47,128,237,.07),var(--shadow);
}

.runtimeShell[data-state="fail"] .taskSurface{
  border-color:rgba(255,90,95,.46);
  box-shadow:0 0 0 3px rgba(255,90,95,.07),var(--shadow);
}

.taskSurface.isChoice{
  background:
    radial-gradient(circle at top right,rgba(47,128,237,.16),transparent 34%),
    linear-gradient(180deg,rgba(16,25,29,.98),rgba(12,20,23,.98));
}

.taskSurface.isWordOrder{
  background:
    radial-gradient(circle at top left,rgba(248,184,78,.13),transparent 32%),
    linear-gradient(180deg,rgba(16,25,29,.98),rgba(12,20,23,.98));
}

.taskSurface.isTextChallenge{
  min-height:300px;
  min-height:clamp(300px,calc(100svh - 238px),390px);
}

.taskSurface.isSummary{
  min-height:330px;
  min-height:clamp(330px,calc(100svh - 214px),470px);
  background:
    radial-gradient(circle at 50% 0,rgba(88,204,2,.16),transparent 42%),
    linear-gradient(180deg,rgba(16,25,29,.98),rgba(12,20,23,.98));
}

.stateLabel{
  color:var(--amber);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.runtimeShell[data-state="correctionMode"] .stateLabel{
  color:#ffb37f;
}

.runtimeShell[data-state="fail"] .stateLabel{
  color:#ff9fa2;
}

.resultBurst{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  max-width:min(48%,220px);
  padding:8px 10px;
  border:1px solid rgba(159,176,173,.16);
  border-radius:8px;
  background:rgba(8,17,20,.84);
  color:var(--text);
  font-size:13px;
  font-weight:950;
  line-height:1.15;
  text-align:center;
  pointer-events:none;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}

.resultBurst.correct{
  border-color:rgba(88,204,2,.42);
  background:rgba(88,204,2,.16);
  color:#efffe8;
}

.resultBurst.retry{
  border-color:rgba(248,184,78,.42);
  background:rgba(248,184,78,.15);
  color:#ffe5b1;
}

.resultBurst.correction{
  border-color:rgba(255,126,64,.46);
  background:rgba(255,126,64,.16);
  color:#fff0d6;
}

.resultBurst.wrong{
  border-color:rgba(255,90,95,.34);
  background:rgba(255,90,95,.12);
  color:#ffd5d6;
}

.question{
  margin:10px 0 10px;
  font-size:34px;
  line-height:1.08;
  letter-spacing:0;
  overflow-wrap:anywhere;
}

.isTextChallenge .question{
  font-size:25px;
  line-height:1.16;
}

.stepInfo{
  min-height:22px;
  margin:0 0 20px;
  color:var(--muted);
  font-size:15px;
  line-height:1.4;
  white-space:pre-line;
}

.answerArea{
  margin-top:10px;
}

.answerArea.textChallenge{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.answerInput{
  width:100%;
  min-height:56px;
  padding:15px 14px;
  border:1px solid rgba(159,176,173,.22);
  border-radius:8px;
  outline:0;
  background:#081114;
  color:var(--text);
  font-size:18px;
  scroll-margin-bottom:calc(var(--submit-bar-space) + 18px);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,transform .16s ease;
}

textarea.answerInput{
  min-height:104px;
  max-height:220px;
  max-height:min(32svh,220px);
  resize:none;
  line-height:1.4;
}

textarea.answerInput.challengeInput{
  min-height:96px;
  font-size:17px;
}

.answerInput:focus{
  border-color:rgba(88,204,2,.72);
  box-shadow:0 0 0 3px rgba(88,204,2,.12);
  transform:translateY(-1px);
}

.answerInput.correct{
  border-color:rgba(88,204,2,.78);
  background:rgba(88,204,2,.08);
}

.answerInput.wrong{
  border-color:rgba(255,90,95,.74);
  background:rgba(255,90,95,.08);
}

.tokenHints{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.tokenHint{
  padding:6px 9px;
  border:1px solid rgba(155,124,255,.3);
  border-radius:8px;
  background:rgba(155,124,255,.11);
  color:#ddd5ff;
  font-size:13px;
  font-weight:850;
}

.choiceGrid{
  display:grid;
  gap:12px;
  margin-top:12px;
}

.choiceButton{
  position:relative;
  width:100%;
  min-height:66px;
  padding:15px 16px;
  border:2px solid rgba(159,176,173,.18);
  border-radius:8px;
  background:var(--panel-2);
  color:var(--text);
  font-size:17px;
  font-weight:850;
  text-align:left;
  cursor:pointer;
  box-shadow:0 5px 0 rgba(7,16,19,.95);
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease,opacity .12s ease;
  touch-action:manipulation;
}

.choiceButton:hover:not(:disabled){
  border-color:rgba(159,176,173,.34);
  background:#193038;
}

.choiceButton:active,
.choiceButton.selected,
.choiceButton.pressed{
  transform:translateY(2px);
  border-color:rgba(47,128,237,.8);
  background:#19345a;
  box-shadow:0 2px 0 rgba(7,16,19,.95);
}

.choiceButton.correct{
  border-color:rgba(88,204,2,.88);
  background:rgba(88,204,2,.17);
  color:#ecffdf;
  animation:cardPop .24s ease;
}

.choiceButton.wrong{
  border-color:rgba(255,90,95,.88);
  background:rgba(255,90,95,.14);
  color:#ffe1e2;
  animation:shake .28s ease;
}

.choiceButton:disabled{
  cursor:default;
}

.choiceButton:disabled:not(.selected):not(.correct):not(.wrong){
  opacity:.62;
}

.wordOrder{
  display:grid;
  gap:12px;
  margin-top:12px;
}

.builtAnswer{
  min-height:62px;
  padding:13px;
  border:1px dashed rgba(159,176,173,.34);
  border-radius:8px;
  background:#081114;
  color:var(--text);
  font-size:18px;
  font-weight:800;
  line-height:1.35;
  display:flex;
  align-items:flex-start;
  align-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
  transition:border-color .16s ease,background .16s ease;
}

.builtAnswer.hasWords{
  border-style:solid;
  border-color:rgba(88,204,2,.28);
}

.builtAnswer:empty:before{
  content:"Tap words in order";
  color:var(--muted);
  font-weight:700;
}

.builtAnswer.correct{
  border-style:solid;
  border-color:rgba(88,204,2,.72);
  background:rgba(88,204,2,.08);
}

.builtAnswer.wrong{
  border-style:solid;
  border-color:rgba(255,90,95,.72);
  background:rgba(255,90,95,.08);
}

.builtChip{
  max-width:100%;
  min-height:38px;
  padding:8px 10px;
  border:1px solid rgba(88,204,2,.26);
  border-radius:8px;
  background:rgba(88,204,2,.12);
  color:var(--text);
  font-weight:900;
  overflow-wrap:anywhere;
  cursor:pointer;
  animation:chipIn .16s ease;
  touch-action:manipulation;
}

.chipGrid{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  min-width:0;
  align-items:flex-start;
}

.chipButton{
  max-width:100%;
  min-height:50px;
  padding:11px 14px;
  border:2px solid rgba(159,176,173,.2);
  border-radius:8px;
  background:#1d2f35;
  color:var(--text);
  font-weight:850;
  overflow-wrap:anywhere;
  cursor:pointer;
  box-shadow:0 4px 0 #0a1518;
  transition:transform .12s ease,opacity .12s ease,background .12s ease,box-shadow .12s ease;
  touch-action:manipulation;
}

.chipButton:active{
  transform:translateY(2px);
  box-shadow:0 2px 0 #0a1518;
}

.chipButton:hover:not(.used){
  background:#264149;
}

.chipButton.used{
  opacity:.28;
  pointer-events:none;
}

.chipButton.flyOut{
  animation:chipFly .18s ease;
}

.feedbackPanel{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:12px;
  padding:14px;
  border-radius:8px;
  border:1px solid rgba(159,176,173,.14);
  background:rgba(16,25,29,.96);
  color:var(--text);
  font-size:15px;
  line-height:1.45;
  white-space:pre-line;
  overflow-wrap:anywhere;
  overflow-anchor:none;
  transition:opacity .18s ease,transform .18s ease;
}

.feedbackTitle{
  font-size:17px;
  line-height:1.2;
}

.feedbackText{
  color:rgba(245,247,242,.88);
}

.feedbackPanel.correct{
  border-color:rgba(88,204,2,.4);
  background:rgba(88,204,2,.12);
}

.feedbackPanel.wrong,
.feedbackPanel.network{
  border-color:rgba(255,90,95,.4);
  background:rgba(255,90,95,.12);
}

.feedbackPanel.retry{
  border-color:rgba(248,184,78,.42);
  background:rgba(248,184,78,.12);
}

.feedbackPanel.correction{
  border-color:rgba(255,126,64,.48);
  background:linear-gradient(90deg,rgba(255,90,95,.14),rgba(248,184,78,.11));
}

.feedbackPanel.retry .feedbackTitle{
  color:#ffe0a6;
}

.feedbackPanel.correction .feedbackTitle{
  color:#ffcf9d;
}

.feedbackPanel.correct .feedbackTitle{
  color:#b7e94b;
}

.feedbackPanel.wrong .feedbackTitle{
  color:#ffb3b5;
}

.summaryCard{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}

.summaryCard:before{
  content:"";
  grid-column:1 / -1;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--amber),var(--blue));
  box-shadow:0 0 18px rgba(88,204,2,.18);
}

.summaryStat{
  min-height:78px;
  padding:13px;
  border:1px solid rgba(159,176,173,.15);
  border-radius:8px;
  background:rgba(8,17,20,.72);
}

.summaryStat strong{
  display:block;
  color:var(--text);
  font-size:28px;
  line-height:1;
  font-weight:950;
}

.summaryStat span{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}

.summaryCloser{
  grid-column:1 / -1;
  margin:2px 0 0;
  padding:12px;
  border:1px solid rgba(88,204,2,.22);
  border-radius:8px;
  background:rgba(88,204,2,.09);
  color:#eaffdc;
  font-size:15px;
  font-weight:850;
  line-height:1.35;
}

.submitBar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:30;
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(159,176,173,.14);
  background:rgba(7,16,19,.96);
  backdrop-filter:blur(14px);
}

.primaryButton,
.secondaryButton{
  min-height:54px;
  border:0;
  border-radius:8px;
  font-size:17px;
  font-weight:950;
  cursor:pointer;
  touch-action:manipulation;
}

.primaryButton{
  background:linear-gradient(180deg,#70df1a,var(--green));
  color:#0c2104;
  box-shadow:0 6px 0 var(--green-dark);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}

.primaryButton:not(:disabled):hover{
  filter:brightness(1.04);
}

.primaryButton:active{
  transform:translateY(3px);
  box-shadow:0 3px 0 var(--green-dark);
}

.primaryButton:disabled,
.secondaryButton:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

.secondaryButton{
  min-width:84px;
  padding:0 16px;
  border:1px solid rgba(159,176,173,.18);
  background:#1d2a2f;
  color:var(--text);
}

.taskIn{
  animation:taskIn .22s ease;
}

.taskLeaving{
  animation:taskLeaving .12s ease;
}

.successFlash{
  animation:successFlash .42s ease;
}

.retryWarn{
  border-color:rgba(248,184,78,.5);
  box-shadow:0 0 0 3px rgba(248,184,78,.08),var(--shadow);
}

.correctionLock{
  border-color:rgba(255,126,64,.62);
  box-shadow:0 0 0 3px rgba(255,126,64,.09),var(--shadow);
}

.softWrong{
  border-color:rgba(255,90,95,.38);
  box-shadow:0 0 0 3px rgba(255,90,95,.06),var(--shadow);
}

.pulse{
  animation:pulse .32s ease;
}

.bump{
  animation:bump .28s ease;
}

.shake{
  animation:shake .3s ease;
}

.softNudge{
  animation:softNudge .28s ease;
}

.correctionPulse{
  animation:correctionPulse .58s ease;
}

.correctionShake{
  animation:correctionShake .22s ease;
}

.feedbackIn{
  animation:feedbackIn .18s ease;
}

.comboPop{
  animation:comboPop .34s ease;
}

.momentumIn{
  animation:momentumIn .2s ease;
}

.momentumLift{
  animation:momentumLift .28s ease;
}

.summaryIn{
  animation:summaryIn .28s ease;
}

.burstIn{
  animation:burstIn .72s ease forwards;
}

.fxLayer{
  position:fixed;
  inset:0;
  z-index:35;
  pointer-events:none;
  overflow:hidden;
}

.tapRipple{
  position:absolute;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  border-radius:999px;
  background:rgba(245,247,242,.22);
  animation:tapRipple .46s ease-out forwards;
}

@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

@keyframes xpFloat{
  0%{opacity:0;transform:translateY(4px) scale(.9)}
  25%{opacity:1}
  100%{opacity:0;transform:translateY(-18px) scale(1.08)}
}

@keyframes bump{
  0%{transform:translateY(0)}
  45%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}

@keyframes comboPop{
  0%{transform:scale(.96)}
  55%{transform:scale(1.06)}
  100%{transform:scale(1)}
}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

@keyframes softNudge{
  0%,100%{transform:translateX(0)}
  35%{transform:translateX(-3px)}
  70%{transform:translateX(3px)}
}

@keyframes correctionPulse{
  0%{box-shadow:0 0 0 3px rgba(255,126,64,.08),var(--shadow)}
  45%{box-shadow:0 0 0 7px rgba(255,126,64,.16),var(--shadow)}
  100%{box-shadow:0 0 0 3px rgba(255,126,64,.09),var(--shadow)}
}

@keyframes correctionShake{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-3px)}
  65%{transform:translateX(3px)}
}

@keyframes feedbackIn{
  from{opacity:.2;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes taskIn{
  from{opacity:.65;transform:translateY(12px) scale(.992)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes introIn{
  from{opacity:.55;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes introLeaving{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-14px)}
}

@keyframes taskLeaving{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:.72;transform:translateY(-6px) scale(.996)}
}

@keyframes successFlash{
  0%{box-shadow:var(--shadow)}
  45%{box-shadow:0 0 0 4px rgba(88,204,2,.32),var(--shadow)}
  100%{box-shadow:var(--shadow)}
}

@keyframes burstIn{
  0%{opacity:0;transform:translateY(8px) scale(.94)}
  18%{opacity:1;transform:translateY(0) scale(1.04)}
  70%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-10px) scale(.98)}
}

@keyframes tapRipple{
  from{opacity:.5;transform:scale(.7)}
  to{opacity:0;transform:scale(4)}
}

@keyframes cardPop{
  0%{transform:scale(.99)}
  55%{transform:scale(1.015)}
  100%{transform:scale(1)}
}

@keyframes chipIn{
  from{opacity:.2;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes chipFly{
  from{transform:translateY(0) scale(1);opacity:1}
  to{transform:translateY(-10px) scale(.92);opacity:.28}
}

@keyframes momentumIn{
  from{opacity:.25;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes momentumLift{
  0%{transform:translateY(0)}
  45%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}

@keyframes summaryIn{
  from{opacity:.2;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

@media (min-width:640px){
  .runtimeHeader{
    padding-left:22px;
    padding-right:22px;
  }

  .lessonMain{
    padding-top:26px;
  }

  .introCard{
    padding:34px 30px 28px;
  }

  .taskSurface{
    padding:26px;
  }

  .question{
    font-size:46px;
  }

  .isTextChallenge .question{
    font-size:30px;
  }

  .choiceGrid{
    grid-template-columns:1fr 1fr;
  }

  .submitBar{
    left:50%;
    width:min(720px,100%);
    transform:translateX(-50%);
    border-left:1px solid rgba(159,176,173,.14);
    border-right:1px solid rgba(159,176,173,.14);
  }
}

@media (max-width:420px){
  :root{
    --submit-bar-space:142px;
  }

  .runtimeHeader{
    padding:9px 12px 8px;
  }

  .headerTop{
    align-items:flex-start;
  }

  .metricRow{
    max-width:172px;
  }

  .metric{
    min-height:30px;
    padding:7px 8px;
    font-size:10px;
  }

  .metric strong{
    font-size:12px;
  }

  .question{
    font-size:30px;
    margin-top:8px;
  }

  .isTextChallenge .question{
    font-size:23px;
  }

  .choiceButton{
    min-height:58px;
    padding:13px 14px;
  }

  .lessonMain{
    padding-top:12px;
  }

  .runtimeShell[data-state="intro"] .lessonMain{
    padding-top:14px;
    padding-bottom:14px;
  }

  .introHero{
    min-height:calc(100svh - 154px);
  }

  .introCard{
    padding:24px 16px 18px;
  }

  .introTitle{
    font-size:36px;
  }

  .introFeatures{
    gap:7px;
    margin:18px 0;
  }

  .introFeatures span{
    min-height:40px;
    font-size:12px;
  }

  .taskSurface{
    min-height:280px;
    min-height:clamp(280px,calc(100svh - 214px),390px);
    padding:15px;
  }

  .stepInfo{
    margin-bottom:14px;
    font-size:14px;
  }

  .answerInput{
    min-height:52px;
    font-size:16px;
  }

  textarea.answerInput,
  textarea.answerInput.challengeInput{
    min-height:86px;
    max-height:168px;
    max-height:min(28svh,168px);
  }

  .resultBurst{
    top:12px;
    right:12px;
    max-width:52%;
  }

  .summaryCard{
    gap:8px;
  }

  .summaryStat{
    min-height:68px;
    padding:11px;
  }

  .summaryStat strong{
    font-size:24px;
  }

  .submitBar{
    grid-template-columns:1fr 1fr;
    padding-top:10px;
  }

  .primaryButton{
    grid-column:1 / -1;
  }

  .secondaryButton.hidden + .secondaryButton.hidden + .primaryButton{
    grid-column:1 / -1;
  }
}

@media (max-height:520px) and (orientation:landscape){
  .runtimeHeader{
    position:static;
  }

  .runtimeShell{
    --submit-bar-space:86px;
  }

  .introHero{
    min-height:260px;
  }

  .introCard{
    max-width:520px;
    padding:18px;
  }

  .introTitle{
    margin-top:10px;
    font-size:32px;
  }

  .introFeatures{
    grid-template-columns:repeat(4,1fr);
    margin:14px 0;
  }

  .taskSurface,
  .taskSurface.isTextChallenge{
    min-height:240px;
  }

  .question{
    font-size:26px;
  }

  textarea.answerInput{
    min-height:78px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *:before,
  *:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}