/* Faithful port of EstellReview/DesignSystem.swift and trainer view hierarchies. */
:root{font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;color:#3c3c3c;background:#fff;--green:#58cc02;--purple:#a78bfa;--amber:#ffbb45;--teal:#5de0cc;--line:#e5e5e5;--muted:#777;--shadow:#e5e5e5}
.green{--accent:#58cc02;--under:#46a302;--ink:#285800;--pale:#d7ffb8}.blue{--accent:#1cb0f6;--under:#008cc8;--ink:#003e58;--pale:#ddf4ff}.amber{--accent:#ffbb45;--under:#d88900;--ink:#613700;--pale:#fff4cc}.purple{--accent:#a78bfa;--under:#8b5cf6;--ink:#4c1d95;--pale:#ede9fe}.teal{--accent:#5de0cc;--under:#009e88;--ink:#005448;--pale:#dafaf3}
.native-training{width:100%;max-width:none;height:100dvh;min-height:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);gap:0;box-shadow:none;overflow:hidden;background:#fff}
.native-training button{font-weight:inherit}.native-training button:disabled{opacity:1}.native-training .train-head{flex:none;padding:6px 18px 18px;gap:12px;font-size:13px;font-weight:700;color:#777;min-height:68px}.native-training .train-head .icon-button{margin:0;width:44px;height:44px}.native-training .train-head svg{width:25px;height:25px}.training-stage-title{padding:0 24px 16px;font-size:13px;font-weight:700;color:#777}
.native-training .train-main{flex:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:0 24px 18px;gap:23px;display:flex;flex-direction:column;align-items:stretch}.native-training.stage-arrival .train-main{gap:22px}.native-training.stage-reaction .train-main,.native-training.stage-situation .train-main{gap:14px;padding-bottom:22px}.native-training.stage-listening .train-main{gap:22px;padding-bottom:20px}.native-training .train-main>*{flex-shrink:0}
.native-training .train-progress{gap:10px;min-height:44px}.native-training .train-progress .bar{height:14px}.native-training .train-progress small{font-size:12px;font-weight:600;color:#777;margin-left:4px}.native-training .train-progress .heart{width:44px;height:44px;color:#777}.native-training .heart.saved{color:#d9363e}.native-training .bar{background:#e5e5e5}.native-training .bar>i{background:var(--accent);min-width:14px}
.native-training .icon-button:hover{background:transparent}.native-training .icon-button svg{width:22px;height:22px}.native-training .button{min-height:56px;padding:16px 20px;font-size:17px;font-weight:800;border-radius:16px;background:var(--accent);color:var(--ink);border:2px solid transparent;box-shadow:0 4px 0 var(--under)}.native-training .button:disabled{opacity:.5}.native-training .button.secondary{width:60px;min-width:60px;padding:0;background:#fff;color:#3c3c3c;border-color:#e5e5e5;box-shadow:0 4px 0 #e5e5e5}.native-training .button.secondary svg{width:24px;height:24px}.native-training .train-footer{position:relative;flex:none;bottom:auto;margin:0;padding:14px 24px 20px;gap:14px;background:#fff;z-index:2}.native-training .train-footer:empty{display:none}.native-training .reserved-submit{visibility:hidden}.native-training .row{gap:12px}
.chunk-instruction{display:grid;gap:7px;color:#777;font-size:13px;font-weight:700}.chunk-instruction p{font-size:12px;font-weight:400;line-height:1.4}.native-meaning{display:grid;gap:8px}.meaning-audio{display:flex;align-items:center;gap:12px}.meaning-audio>strong{flex:1;min-width:0;font-size:28px;line-height:1.28;letter-spacing:-.8px;font-weight:700}.native-training .sentence-audio{width:44px;height:44px;flex:none;color:var(--ink)}.native-training .sentence-audio svg{width:22px;height:22px}.sentence-reading{display:grid;grid-template-columns:minmax(0,1fr);color:#777;font-size:16px;font-weight:500;line-height:1.3}.sentence-reading>span{grid-area:1/1;white-space:normal;overflow-wrap:normal;word-break:normal}.reading-reserve{visibility:hidden;pointer-events:none}
.native-training .chunk-pair{gap:12px;grid-template-columns:1fr 1fr;align-items:stretch}.native-training .chunk-pair.start-focus{grid-template-columns:3fr 2fr}.native-training .chunk-pair.end-focus{grid-template-columns:2fr 3fr}.native-training .chunk-card{border:2px solid #e5e5e5;border-radius:16px;padding:16px 12px;text-align:left;background:#fff;box-shadow:none;transition:none;align-self:stretch;display:flex;flex-direction:column;gap:12px;min-width:0;color:#3c3c3c}.native-training .chunk-card small{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;color:#777;font-size:11px;line-height:20px;font-weight:700}.native-training .chunk-card small svg{width:20px;height:20px}.native-training .chunk-card .blank-question{font-size:19px;width:20px;text-align:center;line-height:20px}.native-training .chunk-card.active{border:2px dashed color-mix(in srgb,var(--under) 70%,transparent);background:var(--pale);box-shadow:none}.native-training .chunk-card.active small,.native-training .chunk-card.active .chunk-value{color:var(--ink)}.chunk-text{display:grid;grid-template-columns:minmax(0,1fr);font-size:23px;line-height:1.2;font-weight:700;min-height:43px;align-content:start;width:100%;overflow-wrap:normal;word-break:normal}.chunk-text>span{grid-area:1/1;display:block;overflow-wrap:normal;word-break:normal;white-space:normal}.chunk-reserve{visibility:hidden;pointer-events:none}
.native-training .choices{gap:15px;display:grid}.native-training .choice{display:flex;align-items:center;justify-content:space-between;gap:14px;border-radius:16px;border:2px solid #e5e5e5;box-shadow:0 4px 0 #e5e5e5;padding:15px 17px;min-height:58px;font-size:19px;font-weight:700;line-height:1.22;text-align:left;background:#fff;color:#3c3c3c;transition:none}.native-training .choice:hover{background:inherit}.native-training .choice.selected{background:var(--pale);border-color:var(--under);box-shadow:0 4px 0 var(--under)}.native-training .choice.choice-correct{background:#d7ffb8;border-color:#46a302;box-shadow:0 4px 0 #46a302}.native-training .choice.choice-wrong{background:#ffdfE0;border-color:#d9363e;box-shadow:0 4px 0 #d9363e}.native-training .choice svg{width:20px;height:20px;flex:none}.native-training .combined-choices{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));column-gap:10px;row-gap:14px}.native-training .combined-choices .choice{padding:6px 10px;min-height:66px;text-align:center;justify-content:center;font-size:16px}.choice-category{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;color:#777;font-size:13px;font-weight:700;margin-bottom:-10px}.choice-category button{color:var(--under);font-size:12px;font-weight:600}
.native-training .correct-feedback{background:#d7ffb8}.native-training .wrong-feedback{background:#ffdfE0}.native-feedback{display:grid;gap:5px;color:#285800}.wrong-feedback .native-feedback{color:#d9363e}.native-feedback>strong{font-size:17px;font-weight:700}.native-feedback>button{display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:16px;font-weight:600;gap:12px;line-height:1.4;min-height:38px}.native-feedback svg{width:24px;height:24px;flex:none}.native-training .prompt{border-radius:18px;border:2px solid #e5e5e5;padding:22px;background:var(--pale)}.native-training .prompt small{font-size:13px;font-weight:700;color:#946900;margin-bottom:14px}.native-training .prompt strong{font-size:25px;line-height:1.3;font-weight:700;letter-spacing:0}.native-training .arena{height:210px;width:100%;aspect-ratio:auto;object-fit:contain;border-radius:22px;background:#fff9e7}.native-training.stage-reaction .choice{font-size:20px;min-height:62px;padding:9px 17px}.native-training .record-button{min-height:64px;font-size:20px;font-weight:700;background:var(--pale);border-color:var(--under);color:var(--ink)}.native-training .record-button.recording{background:#ffdfE0;border-color:#d9363e;color:#d9363e}.native-training .record-status{font-size:13px;font-weight:400;color:#777;line-height:1.4;min-height:0}.native-training .record-status:empty{display:none}.native-training .answer-card{padding:22px;border-radius:18px;border-color:#e5e5e5;gap:10px}.native-training .answer-card small{font-size:13px;color:#777}.native-training .answer-card .english-line{font-size:20px;font-weight:700}.native-training .answer-card p{font-size:17px;line-height:1.35}.native-training .answer-card strong{font-size:20px}
.native-training .segment{padding:3px;background:#eeeef0;border-radius:18px;gap:3px}.native-training .segment button{padding:6px 8px;min-height:28px;font-size:13px;border-radius:15px;font-weight:500}.native-training .segment button.active{background:#fff;box-shadow:0 1px 3px #0000000d}
.native-training .scene-top h3{font-size:16px;font-weight:700;margin-bottom:4px}.native-training .scene-top p{font-size:13px;font-weight:400;line-height:1.4}.caption-wrap{position:relative;padding-bottom:34px}.native-training .bubble{position:relative;display:grid;min-height:184px;border:1.4px solid #8b5cf666;border-radius:22px;padding:24px 28px;margin:0;background:#fff}.native-training .bubble.thought{border:1.4px dashed #8b5cf699;background:#f5f2ff}.native-training .bubble.discovery{background:#f5f2ff}.native-training .bubble::before{display:none}.native-training .bubble::after{bottom:-13px;left:calc(18% - 11px);width:21px;height:21px;border-width:1.4px;border-color:#8b5cf666;border-bottom-right-radius:7px}.native-training .bubble.partner::after{left:auto;right:calc(18% - 11px)}.native-training .bubble.thought::after{display:none}.caption-current,.caption-reserves{grid-area:1/1;display:grid;align-content:start;gap:8px}.caption-reserves{visibility:hidden;pointer-events:none}.caption-reserves>div{grid-area:1/1;display:grid;align-content:start;gap:8px}.speaker-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}.native-training .speaker-row small{font-size:13px;font-weight:700;margin:0;color:var(--ink)}.native-training .speaker-row .icon-button{position:static;width:44px;height:44px;flex:none;color:var(--ink)}.speaker-placeholder{width:44px;height:44px;display:block}.native-training .caption-text{display:block;font-size:22px;line-height:1.3;letter-spacing:0;font-weight:600}.native-training .caption-text.cut-0{font-size:21px;font-weight:500}.native-training .caption-text.cut-2{font-size:22px;font-weight:700}.native-training .caption-text.cut-3{font-size:25px;font-weight:700}.native-training .translation{font-size:16px;color:#777;font-weight:400;line-height:1.4;margin:0}.answer-reserve{height:92px}.thought-trail{position:absolute;bottom:0;left:0;width:65px;height:34px;pointer-events:none}.thought-trail i{position:absolute;border:1.4px solid #8b5cf699;border-radius:50%;background:#f5f2ff}.thought-trail i:nth-child(1){width:14px;height:14px;left:41px;top:1px}.thought-trail i:nth-child(2){width:9px;height:9px;left:30px;top:16px}.thought-trail i:nth-child(3){width:5px;height:5px;left:23px;top:28px}.native-training .scene-photo{aspect-ratio:3/2;flex:none;border-radius:20px;border:1px solid #e5e5e5;margin-top:0;background:#ede9fe}.native-training .scene-play span{width:76px;height:76px;color:#4c1d95;box-shadow:0 4px 12px #00000029}.native-training .scene-play svg{width:28px;height:28px}.native-training .story-progress{display:grid;gap:10px;color:var(--ink);font-size:13px;font-weight:600}.native-training .cuts{gap:5px;margin:0}.native-training .cuts i{height:4px;background:#e5e5e5a6}.native-training .cuts i.on{background:var(--accent)}.native-training .scene-controls{margin:0;gap:16px}.native-training .scene-controls button{min-height:44px;padding:0;font-size:15px;font-weight:600}.native-training .scene-controls button:first-child,.native-training .scene-controls button:last-child{width:44px;justify-content:center}.native-training .answer-input{margin:0;gap:10px;padding:0;min-height:46px;align-items:center}.native-training .subject{font-family:Georgia,'Times New Roman',serif;font-size:23px;font-weight:600;line-height:1.4}.native-training .answer-guide{flex:1;height:31px;border-bottom:1.5px solid #8b5cf680;min-width:0}.native-training .answer-input textarea{font-size:21px;font-weight:400;line-height:1.3;min-height:40px;max-height:66px;border-bottom:1.5px solid #8b5cf680;resize:none;padding:5px 0;overflow:auto}.caption-wrap.compact .bubble{padding-top:12px;padding-bottom:12px;min-height:0}
.native-training .panel{border:2px solid #e5e5e5;border-radius:18px;padding:22px}.listen-context-panel{display:grid;gap:14px;background:#dafaf3}.native-training .listen-context{font-size:15px;font-weight:400;color:#777;line-height:1.4}.native-training .listen-meaning{font-size:27px;font-weight:700;line-height:1.35;letter-spacing:0}.listen-playback-panel{display:grid;gap:15px;text-align:center;background:#fff}.listen-headphones{display:flex;justify-content:center;padding-top:10px;color:var(--under)}.listen-headphones svg{width:45px;height:45px;stroke-width:1.2}.listen-playback-panel #listen-cue{font-size:25px;font-weight:600;line-height:1.35;min-height:100px;display:grid;align-content:center}.listen-playback-panel .row{font-size:13px;text-align:left;color:#777}.listen-playback-panel #listen-time{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}.listen-playback-panel .bar{height:4px}.listen-playback-panel .bar>i{min-width:0;background:var(--under)}.listen-settings-row{display:flex;align-items:center;gap:10px;color:var(--under);font-size:14px;font-weight:600}.listen-settings-row>strong{font-size:13px;color:#777;font-weight:700}.listen-settings-row button{min-height:44px;display:flex;align-items:center;gap:5px}.listen-settings-row button:last-child{margin-left:auto}.listen-settings-row svg{width:18px;height:18px}.native-play-controls{display:flex;align-items:center;gap:16px}.native-play-controls>.icon-button{width:44px;height:56px;flex:none;color:var(--ink)}.native-play-controls>.icon-button:disabled{opacity:.35}.native-play-controls .button{flex:1;min-width:0}.native-training.stage-listening .train-footer{padding:16px 24px}.native-training .listen-visual{display:none}
@media(max-width:350px){.native-training .train-main,.native-training .train-footer{padding-left:18px;padding-right:18px}.native-training .combined-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.native-training .meaning-audio>strong{font-size:26px}}
.native-training .chunk-card{border:0;outline:2px solid #e5e5e5;outline-offset:-2px}
.native-training .chunk-card.active{border:0;outline:2px dashed color-mix(in srgb,var(--under) 70%,transparent)}
.native-training .panel,.native-training .prompt,.native-training .answer-card{border:0;outline:2px solid #e5e5e5;outline-offset:-2px}
.native-training .bubble{border:0;outline:1.4px solid #8b5cf666;outline-offset:-1.4px}
.native-training .bubble.thought{border:0;outline:1.4px dashed #8b5cf699}
.native-training .button{border:0;outline:2px solid var(--under);outline-offset:-2px;line-height:1.2}.native-training .button.secondary{border:0;outline-color:#e5e5e5}
.native-training .choice{border:0;outline:2px solid #e5e5e5;outline-offset:-2px}.native-training .choice.selected{outline-color:var(--under)}.native-training .choice.choice-correct{outline-color:#46a302}.native-training .choice.choice-wrong{outline-color:#d9363e}.native-training .choice:active{transform:translateY(4px);box-shadow:none}