:root{--ink:#633d82;--rose:#834968;--paper:#fff4df;--gold:#cf9849}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#303671;color:var(--ink);font-family:"Noto Serif CJK SC","Songti SC","STSong",serif;-webkit-font-smoothing:antialiased}
.screen{position:relative;width:min(100vw,440px);height:100dvh;min-height:600px;max-height:956px;margin:0 auto;overflow:hidden;background:#303671}
.status-bar{position:absolute;inset:0 0 auto;z-index:9;height:54px;padding:16px 27px 0 27px;color:#fff;display:flex;justify-content:space-between;align-items:flex-start;font:700 17px/1.25 -apple-system,BlinkMacSystemFont,Arial,sans-serif;letter-spacing:-.5px}
.status-symbols{display:flex;align-items:center;gap:6px}.status-symbols b{font-size:15px}.reception{display:flex;gap:2px;align-items:flex-end;height:16px}.reception i{width:3px;border-radius:2px;background:#fff}.reception i:nth-child(1){height:6px}.reception i:nth-child(2){height:9px}.reception i:nth-child(3){height:13px}.reception i:nth-child(4){height:16px}.battery{height:17px;min-width:28px;border:1.5px solid #fff;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;position:relative}.battery:after{content:'';position:absolute;right:-4px;width:2px;height:8px;background:#fff;border-radius:0 1px 1px 0}
.scene-image{position:absolute;z-index:0;top:54px;left:0;width:100%;height:auto;pointer-events:none}
.scene-wash{z-index:1;position:absolute;inset:54px 0 0;pointer-events:none;background:linear-gradient(to bottom,rgba(48,54,113,0.0) 0%,rgba(75,66,146,0.03) 45%,rgba(79,59,157,.06) 100%)}
.parchment{position:absolute;z-index:3;left:50%;top:170px;transform:translateX(-50%);width:460px;height:690px;filter:drop-shadow(0 11px 14px rgba(24,12,55,.16))}
.parchment-image{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.on-paper{position:absolute;inset:0;padding:65px 33px 61px;display:flex;flex-direction:column;align-items:center}
.paper-head{width:100%;height:36px;display:grid;grid-template-columns:130px 1fr 110px;gap:0;align-items:center}
.return-paper{position:relative;width:113px;height:37px;color:#79506e;display:grid;place-items:center;background:url('assets/return_button.webp') center/contain no-repeat;font:700 13.5px/1 sans-serif}
.paper-counter{text-align:center;color:#7d468f;font:700 25px/1 Georgia,serif;white-space:nowrap}.paper-counter small{font-size:20px;padding:0 4px;font-weight:400}.paper-corner-title{font-size:16px;white-space:nowrap;font-weight:700;text-align:center;letter-spacing:1px}
.track{margin-top:14px;width:93%;height:8px;border-radius:100px;background:linear-gradient(90deg,#decaa2,#e7cd87);box-shadow:inset 0 0 0 1px rgba(161,111,83,.35),0 1px 1px rgba(255,255,255,.8);position:relative}
.track-fill{position:absolute;left:0;top:0;bottom:0;width:35%;border-radius:100px;background:linear-gradient(90deg,#9453cb,#bd8bdf)}.track-dot{position:absolute;top:50%;left:35%;width:18px;height:18px;border-radius:50%;border:2px solid #e1b354;background:#8e4ebd;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(101,46,130,.25)}
.stage-label{font-size:15.5px;font-weight:700;letter-spacing:1px;margin-top:14px;height:22px}
.prompt-card{position:relative;width:94%;height:122px;margin-top:10px;flex:0 0 122px}
.prompt-card>img{width:100%;height:100%;object-fit:fill;position:absolute;inset:0}
.prompt-body{position:absolute;inset:24px 0 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}.part-of-speech{font-size:17px;font-weight:700;color:#956690}.prompt-body strong{font-size:43px;letter-spacing:3px;color:#684085;line-height:1.28}
.source-line{margin-top:5px;text-align:center;font:500 12px/20px -apple-system,BlinkMacSystemFont,"Noto Sans CJK SC",sans-serif;color:#987d81}
.support-controls{display:flex;justify-content:center;gap:12px;margin-top:14px;width:100%}
.support-pill{height:35px;min-width:119px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 9px;border:1px solid #c99e64;border-radius:18px;color:#684579;background:linear-gradient(#fff9e9,#fbe6be);box-shadow:inset 0 1px 1px #fff,0 2px 4px rgba(85,56,77,.12);font:700 12.5px/1 -apple-system,BlinkMacSystemFont,"Noto Sans CJK SC",sans-serif}
.support-pill.muted{background:linear-gradient(#fff8e8,#f4dfc9);color:#81607d}.speaker{font-size:19px;color:#a875b2}
.typing-area{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:18px}
.field-heading{font-size:14px;font-weight:700;color:#71496f;align-self:flex-start;margin-left:26px;margin-bottom:8px}
.answer-field{width:86%;height:52px;display:flex;align-items:center;padding:0 16px;border-radius:13px;border:1.5px solid #c49a7c;background:rgba(255,251,241,.84);box-shadow:inset 0 1px 4px rgba(102,65,71,.12),0 1px 3px rgba(175,132,87,.14);font:600 19px/1 Georgia,serif;color:#603b81}
.answer-placeholder{font:500 15px -apple-system,BlinkMacSystemFont,"Noto Sans CJK SC",sans-serif;color:#b4a0a6}.answer-written{display:none}.fake-caret{display:none;width:2px;height:24px;background:#834aa9;margin-left:3px}
.input-note{font:500 11.5px/1.3 -apple-system,BlinkMacSystemFont,"Noto Sans CJK SC",sans-serif;color:#a18789;margin-top:9px}
.main-action{width:224px;height:61px;margin-top:16px;position:relative;display:flex;align-items:center;justify-content:center}.main-action img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.main-action strong{position:relative;color:#fff4d5;text-shadow:0 1px 2px rgba(36,12,62,.45);font:700 18px/1 "Noto Serif CJK SC",serif;letter-spacing:.5px}
.result-area{display:none;margin-top:19px;width:90%;flex-direction:column;align-items:center}
.result-title{display:flex;gap:10px;align-items:center;justify-content:center;font-size:21px;font-weight:700;color:#5b7a50}.result-title .wrong-message{display:none}.result-mark{border:2px solid currentColor;border-radius:50%;width:31px;height:31px;display:grid;place-items:center;font:800 20px/1 -apple-system,Arial,sans-serif}
.result-answer{width:100%;margin-top:18px;padding:14px 16px;background:rgba(255,252,244,.58);border:1px solid rgba(198,153,95,.45);border-radius:12px;display:flex;flex-direction:column;gap:11px;font:500 14px/1.5 -apple-system,BlinkMacSystemFont,"Noto Sans CJK SC",sans-serif;color:#76596a}.result-answer div{display:flex;justify-content:space-between;align-items:baseline}.result-answer strong{font:700 19px Georgia,serif;color:#633d82}
.next-action{margin-top:18px;width:235px;height:62px}
.foreground{position:absolute;z-index:6;left:50%;bottom:-5px;width:118%;max-width:none;height:auto;transform:translateX(-50%);pointer-events:none}
.state-typing .answer-placeholder{display:none}.state-typing .answer-written,.state-typing .fake-caret{display:inline-block}
.state-typing .input-note{color:#8d708e}
.state-correct .typing-area,.state-wrong .typing-area{display:none}.state-correct .result-area,.state-wrong .result-area{display:flex}
.state-wrong .result-title{color:#ad6170}.state-wrong .result-title .correct-message{display:none}.state-wrong .result-title .wrong-message{display:block}.state-wrong .result-mark{border-color:#ad6170}.state-wrong .result-mark:after{content:'×'}.state-wrong .result-mark{font-size:0}.state-wrong .result-mark:after{font-size:24px}
@media(max-width:420px){.parchment{width:calc(100vw + 20px);height:auto;aspect-ratio:2/3;top:17.5vh}.on-paper{padding:14% 7.2% 12.2%}.paper-head{grid-template-columns:120px 1fr 99px}.return-paper{width:103px}.paper-corner-title{font-size:14px}.foreground{width:119%}}

/* V2 — reviewed growth-page result panel; no changes to the broadcast scenery. */
/* The screen keeps its initial height when the software keyboard is shown.
   No focus handlers, autofocus, scripted scroll, or viewport-driven transforms. */
.screen{height:100svh;min-height:600px;max-height:956px}
.answer-input{appearance:none;-webkit-appearance:none;width:100%;height:100%;min-width:0;outline:none;border:0;background:transparent;color:#603b81;caret-color:#834aa9;font:600 19px/1.2 Georgia,serif;letter-spacing:.15px;padding:0;margin:0;border-radius:0}
.answer-input::placeholder{color:#b4a0a6;opacity:1;font:500 15px/1.2 -apple-system,BlinkMacSystemFont,'Noto Sans CJK SC',sans-serif}
.answer-field:focus-within{border-color:#a579b8;box-shadow:0 0 0 2px rgba(167,116,182,.14),inset 0 1px 4px rgba(102,65,71,.12)}
.result-answer{
  width:100%;margin-top:15px;min-height:113px;
  padding:16px 19px 14px;
  border:15px solid transparent;border-radius:0;
  border-image-source:url('assets/review_chart_frame.webp');
  border-image-slice:46 62 46 62 fill;
  border-image-width:15px;
  border-image-repeat:stretch;
  background:none;box-shadow:none;
  display:flex;flex-direction:column;gap:0;
  font:500 14px/1.5 -apple-system,BlinkMacSystemFont,'Noto Sans CJK SC',sans-serif;color:#76596a;
  box-sizing:border-box;
}
.result-row{min-height:33px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.result-row strong{font:700 19px/1.2 Georgia,serif;color:#633d82;white-space:nowrap}
.result-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(180,133,88,.28),transparent);margin:3px 0}
/* Match the initial overall position when switching between typing and checking. */
.result-area{margin-top:19px}
.result-area .next-action{margin-top:18px}
@media(max-width:420px){.result-answer{padding:13px 12px 12px;border-width:12px;border-image-width:12px}.result-row strong{font-size:17px}}
/* Keep the progress track stable when the result panel occupies more vertical space. */
.track{flex:0 0 8px;min-height:8px}

/* V3 — exact V64 Dictation Footprints four-corner parchment (nine-slice).
   Do not stretch the source as a flat background image; preserve corner artwork. */
.result-answer{
  border:12px solid transparent;
  border-image-source:url('assets/review_chart_frame.webp');
  border-image-slice:45 fill;
  border-image-width:12px;
  border-image-repeat:stretch;
  border-radius:12px;
  background:none;
  padding:19px 18px 14px;
  min-height:123px;
  margin-top:14px;
  width:100%;
  gap:0;
  overflow:visible;
}
.result-row{min-height:34px;padding:0 2px}
.result-row strong{font-size:18px}
.result-divider{margin:4px 0;background:rgba(182,139,88,.26)}
/* Reuse the current broadcast page's authentic gold IPA capsule for both support controls.
   594×156 art is displayed at 134×35 preserving its width/height ratio. */
.support-controls{gap:12px;margin-top:14px}
.support-pill.speech-gold{
  flex:none;width:134px;height:35px;min-width:0;border:0;border-radius:0;padding:0 10px;
  background:transparent url('assets/ipa_button_gold.webp') center/contain no-repeat;
  box-shadow:none;color:#6b467a;gap:6px;
  font:700 12.2px/1 -apple-system,BlinkMacSystemFont,'Noto Sans CJK SC',sans-serif;
}
.speech-gold.muted{background:transparent url('assets/ipa_button_gold.webp') center/contain no-repeat}
.audio-glyph{display:block;width:18px;height:18px;flex:0 0 18px;stroke:#78508b}
.ipa-glyph{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:#79548c;color:#fff4d8;font:700 12px/1 Georgia,serif}
@media(max-width:420px){
  .support-pill.speech-gold{width:128px;height:34px}
  .result-answer{border-width:11px;border-image-width:11px;padding:16px 12px 12px;min-height:116px}
  .result-row strong{font-size:17px}
}