@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#201b26;--muted:#6b6570;--orange:#ff6f00;--deep:#a94200;--line:#e8e3de;--paper:#faf8f5;--purple:#20114a;--green:#206246}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.55}button,input,select{font:inherit}button,a,input,select{outline-offset:5px}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}a{color:inherit}h1,h2,h3{font-family:Manrope,sans-serif;line-height:1.15;margin:0;font-weight:800;letter-spacing:-.035em}h1{font-size:clamp(34px,4vw,56px)}h2{font-size:30px}h3{font-size:21px}p{margin:12px 0 22px}small,.muted{color:var(--muted)}.shell{display:grid;grid-template-columns:244px 1fr;min-height:100vh}.brand{display:block;width:125px;height:30px;object-fit:contain;object-position:left}nav{display:grid;gap:7px}nav button{border:0;background:none;text-align:left;padding:13px 14px;border-radius:10px;font-weight:600;color:#665e6a;display:flex;gap:13px;align-items:center}nav button.active{color:var(--deep);background:#fff0e2}nav button:hover{background:#f7f3ef}nav svg{width:19px;height:19px;flex-shrink:0}.workspace{max-width:1240px;width:100%;padding:28px 52px 60px;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:36px}.topbar .language{display:flex;align-items:center;gap:9px;font-size:14px}.flag{width:23px;height:16px;display:inline-block;background:linear-gradient(#b5262b 25%,#f5cb46 25% 75%,#b5262b 75%);border-radius:3px}.pill{display:inline-block;border-radius:30px;font-size:12px;padding:5px 10px;background:#f0ede8;color:#655a68}.toplinks{display:flex;gap:14px;align-items:center}.textbtn{padding:4px 0;border:0;background:none;color:var(--deep);font-weight:600}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border-radius:10px;border:0;font-weight:700;text-decoration:none;min-height:48px}.primary{background:var(--orange);color:#221204}.primary:hover{background:#ed6500}.secondary{background:white;color:var(--ink);border:1px solid #d9d1ca}.secondary:hover{background:#f5f1ed}.hero{max-width:700px;padding:32px 0 38px}.hero h1 span{color:var(--deep)}.hero p{font-size:18px;color:var(--muted);max-width:430px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:32px 0 20px}.section-title p{margin:8px 0 0}.section-title h2{font-size:25px}.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.setup,.question-panel,.result-panel{max-width:700px;margin:20px auto 0}.setup h1,.result-panel h1{font-size:40px}.choice-list{display:grid;gap:12px;margin:28px 0}.choice{background:white;border:1px solid #ddd6ce;border-radius:12px;padding:18px 22px;text-align:left;display:flex;align-items:center;gap:15px}.choice:hover{border-color:var(--orange);background:#fff8f1}.choice strong{display:block}.choice small{display:block;margin-top:3px}.choice .number{border:1px solid #ddd6ce;border-radius:7px;width:30px;height:30px;display:grid;place-items:center;color:var(--muted);font-size:13px;flex-shrink:0}.progress-meta{display:flex;justify-content:space-between;font-size:13px;margin-bottom:12px}.progress{height:5px;background:#e5ded7;border-radius:5px;overflow:hidden}.progress div{height:100%;background:var(--orange);}.question-card{background:white;border:1px solid var(--line);border-radius:16px;padding:35px 36px;margin:25px 0}.question-card h1{font-size:48px;text-align:center;margin:28px 0 8px}.question-card .pos{text-align:center;font-size:14px;color:var(--muted)}.question-card h2{font-family:'DM Sans',sans-serif;font-size:18px;letter-spacing:0;font-weight:500}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:35px 0 20px}.answer{padding:17px;border:1px solid #dbd4cd;background:white;border-radius:10px;text-align:left;min-height:60px}.answer:hover{border-color:var(--orange);background:#fff7ef}.skip{display:block;margin:12px auto 0;background:none;border:0;text-decoration:underline;text-underline-offset:4px;color:var(--muted)}.question-note{font-size:13px;text-align:center;color:var(--muted)}.result-mark{width:64px;height:64px;display:grid;place-items:center;background:#e5f0e8;border-radius:50%;font-size:30px;color:var(--green);margin-bottom:25px}.level-band{padding:25px 0;margin:20px 0;border-block:1px solid var(--line);display:flex;align-items:center;gap:26px}.level-band>strong{flex-shrink:0;white-space:nowrap;font-family:Manrope;font-size:50px;line-height:1}.level-band strong span{font-size:19px;color:var(--muted)}.result-panel p{max-width:560px;color:var(--muted)}.row-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.word-layout{display:grid;grid-template-columns:1fr 280px;gap:35px}.word-list{border-top:1px solid var(--line)}.word-row{padding:23px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:15px;align-items:center}.word-row h3{font-size:24px;margin-bottom:4px}.word-row .meaning{color:var(--muted);font-size:15px}.word-actions{display:flex;align-items:center;gap:13px}.iconbutton{border:1px solid #ddd5ce;border-radius:8px;background:white;width:37px;height:37px;display:grid;place-items:center}.iconbutton svg{width:17px}.iconbutton.saved{color:var(--deep);background:#fff0e2;border-color:#e8b685}.word-row .example{font-size:14px;color:var(--muted);margin:8px 0 0;grid-column:1/-1}.aside{border-top:3px solid var(--purple);padding-top:21px}.aside h3{font-size:22px}.aside p{font-size:14px;color:var(--muted)}.aside .secondary{width:100%}.promo{margin-top:30px;background:var(--purple);color:white;padding:26px;border-radius:12px}.promo h3{font-size:24px}.promo p{color:#ded5ed;font-size:14px}.promo a{display:inline-block;color:white;font-weight:700;text-underline-offset:5px}.stats{display:flex;gap:28px;padding:22px 0;color:var(--muted)}.stats strong{display:block;color:var(--ink);font-size:26px}.stats span{font-size:13px}.player-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:35px;margin:25px 0}.player-layout video{width:100%;background:#161117;border-radius:12px;display:block}.subtitle{font-size:22px;font-weight:600;line-height:1.5;margin-bottom:8px}.subtitle mark{background:#ffe2c7;color:#8b3400;padding:0 3px;border-radius:3px}.translation{color:var(--muted)}.player-info{padding-top:10px}.player-info .row-actions{margin-top:26px}.back{display:inline-flex;gap:8px;border:0;background:none;padding:0;color:var(--muted);margin-bottom:20px}.account{max-width:440px;margin:25px auto}.account h1{font-size:36px}.account label{display:block;margin:20px 0 6px;font-size:14px;font-weight:600}.account input{width:100%;padding:13px;border:1px solid #cec6bf;border-radius:9px;background:white}.account .primary{width:100%;margin:23px 0 12px}.account .benefits{padding:17px 0;border-block:1px solid var(--line);margin:24px 0;color:var(--green);font-size:14px}.error{background:#fff0ef;color:#9f2323;padding:12px;border-radius:8px;margin:15px 0}.feedback{background:#eef5ef;color:var(--green);padding:20px;border-radius:12px;margin:22px 0}.feedback.wrong{background:#fff0e2;color:#8b3d00}.empty{padding:40px 0;max-width:550px}.loading{padding:50px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 20px;border-radius:9px;z-index:10;display:none;max-width:90vw}.footer-note{font-size:12px;color:var(--muted);padding-top:35px}.plugin-shell{max-width:740px;margin:0 auto;padding:25px}.plugin-shell .topbar{padding:10px 0 22px}.plugin-shell .hero{grid-template-columns:1fr}.plugin-shell .workspace{padding:0}.plugin-shell .word-layout,.plugin-shell .player-layout{grid-template-columns:1fr}.plugin-shell .promo{display:none}.plugin-banner{font-size:13px;padding:12px;background:#ece8e3;border-radius:8px;margin-bottom:22px}.plugin-shell .hero h1{font-size:40px}.explore{max-width:700px;margin:25px 0}.explore img{width:100%;border-radius:14px}.explore h1{font-size:42px}.explore p{color:var(--muted)}.privacy{max-width:650px}.privacy h2{margin-top:25px;font-size:23px}
@media(max-width:1100px){.workspace{padding:25px 30px}.shell{grid-template-columns:205px 1fr}.hero{gap:25px}.word-layout{grid-template-columns:1fr}.aside{margin-top:15px}.promo{max-width:550px}}
@media(max-width:760px){.shell{display:block}.brand{width:105px;height:25px}.workspace{padding:20px 22px 40px}.topbar{padding-bottom:15px}.toplinks{gap:12px;font-size:13px}.hero{grid-template-columns:1fr;padding:22px 0;gap:25px}.hero h1{font-size:39px}.hero p{font-size:16px}.scenes{gap:12px;grid-template-columns:repeat(2,1fr)}.section-title{align-items:flex-start}.section-title h2{font-size:23px}.question-card{padding:25px 20px}.question-card h1{font-size:40px}.answer-grid{grid-template-columns:1fr;margin-top:25px}.question-panel{margin-top:8px}.setup h1,.result-panel h1{font-size:34px}.player-layout,.explore{grid-template-columns:1fr}.word-row{gap:8px}.word-actions{gap:7px}.word-row h3{font-size:22px}.word-actions .textbtn{font-size:14px}.plugin-shell{padding:16px}.plugin-shell .topbar .pill{display:none}.row-actions .primary{width:100%}.level-band{gap:18px}.section-title>.textbtn{font-size:13px}.explore h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
button,input,select{color:var(--ink)}
.answer{color:var(--ink);background:#fff}
.plugin-shell{max-width:520px;padding:12px;font-size:14px}
.plugin-shell>.brand{display:none}
.plugin-shell .topbar{padding:0 0 12px}
.plugin-shell .topbar .pill{display:none}
.plugin-shell .question-panel{margin:0}
.plugin-shell .progress-meta{font-size:12px;margin-bottom:6px}
.plugin-shell .progress{height:4px}
.plugin-shell .question-card{padding:16px;margin:12px 0;border-radius:12px}
.plugin-shell .question-card h2{font-size:15px}
.plugin-shell .question-card h1{font-size:30px;margin:16px 0 4px}
.plugin-shell .question-card .pos{font-size:12px}
.plugin-shell .answer-grid{grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 10px}
.plugin-shell .answer{min-height:44px;padding:10px 12px;font-size:14px;overflow-wrap:anywhere}
.plugin-shell .skip{font-size:13px;margin:8px auto 0;min-height:32px}
.plugin-shell .footer-note{padding-top:4px;margin:0;font-size:12px}
.question-context{font-size:15px;line-height:1.5;text-align:center;margin:12px 0;color:var(--ink)}
.plugin-shell .question-context{font-size:13px;margin:10px 0}
.learning-slide h2{font-size:28px}.word-definition{margin:5px 0 14px;font-size:17px;color:var(--muted)}.scene-player video{width:100%;max-height:275px;aspect-ratio:16/9;background:#171717;border-radius:10px;display:block}.scene-player #media-status{font-size:13px;margin:5px 0;min-height:20px}.dual-subtitles{min-height:90px;padding:10px 0}.l2-subtitles{font-size:18px;line-height:1.7;margin:0}.l1-subtitles{font-size:14px;color:var(--muted);margin:6px 0}.subtitle-token{border:0;border-bottom:1px dotted #a94200;background:none;padding:0 1px;color:var(--ink);font:inherit;line-height:inherit}.subtitle-token:hover,.subtitle-token:focus-visible{background:#ffe7ce}.word-meaning{padding:12px;background:#fff2e5;border:1px solid #edcba9;border-radius:9px}.word-meaning p{margin:5px 0}.scene-player .row-actions{justify-content:space-between;font-size:12px}.learning-actions{margin-top:18px;justify-content:space-between}.learning-actions .primary{margin-left:auto}.recall-card{padding:16px 0 30px}.recall-card h2{margin-top:35px;font-size:34px}.revealed-meaning{font-size:22px;padding:20px 0}.completion-words{border-block:1px solid var(--line);margin:20px 0}.completion-words p{margin:9px 0}.set-complete h2{margin-top:15px}.word-row h3{font-size:20px}.plugin-shell .word-row{padding:14px 0}.plugin-shell .section-title{margin:10px 0}.plugin-shell .primary,.plugin-shell .secondary{padding:10px 14px;min-height:42px}.plugin-shell .row-actions .primary{width:auto}.subtitle-token:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #a94200;outline-offset:3px}[hidden]{display:none!important}
.clip-controls{display:flex;gap:10px;align-items:center;margin-top:8px}.clip-controls input{flex:1;min-width:60px;accent-color:var(--orange)}.clip-controls span{font-size:12px;white-space:nowrap;color:var(--muted)}.clip-controls .secondary{min-width:65px;min-height:36px;padding:5px 10px}.scene-player #media-status:empty{display:none}

.learning-nav{display:flex;gap:24px;border-top:1px solid var(--line);margin-top:24px;padding-top:12px}.learning-nav button,.subtitle-token{min-height:40px}.target-word{background:#ffe2c7;text-decoration:underline;text-underline-offset:4px}.authorization-shell{display:block}.word-row p{margin:4px 0}.word-row small{display:block}details{margin:24px 0}summary{cursor:pointer}

.word-selection h2{font-size:26px;max-width:560px}.word-selection>p{margin:10px 0 20px;color:var(--muted)}.word-selection .word-row{padding:12px 0}.word-selection .secondary{font-size:13px;padding:8px 12px;min-height:38px}.scene-player>.row-actions{margin-top:14px}.learning-actions>span{font-size:13px;color:var(--muted)}.word-knowledge{display:flex;gap:10px;align-items:center;font-size:13px}.word-knowledge span{color:var(--muted)}

.subtitle-unit{display:inline-block;white-space:nowrap}

.tool-version{font-size:12px;font-weight:400;white-space:nowrap;color:var(--muted)}

.save-vocabulary{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.save-vocabulary h3{margin:0 0 8px;font-size:20px}.save-vocabulary p{margin:0 0 16px}

.google-signin{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:white;color:#1f1f1f;border:1px solid #747775;border-radius:4px;font:500 14px Arial,sans-serif;min-height:40px;padding:10px 16px;text-decoration:none}

.practice-context{margin:16px 0;padding:16px;background:#eee9e3;border-radius:8px;font-size:18px;line-height:1.5;white-space:pre-line}.practice-context p{margin:0}.practice-context mark{background:#ffe0b8;color:var(--ink);font-weight:600}.recall-card .answer-grid{margin:16px 0}.answer.practice-correct{background:#e3f1e5;border-color:#39844a;color:#174b24;opacity:1}.answer.practice-incorrect{background:#fbe8e4;border-color:#b94c36;color:#792b1d;opacity:1}.practice-feedback{margin:18px 0}.practice-feedback p{margin:8px 0;line-height:1.5}
/* Mini-site: approved vocabulary-first layout. Widget styles remain unchanged. */
body.mini-site{background:#f8f6f2;color:#262b23;font-family:Inter,Arial,sans-serif}.mini-site .mini-shell{max-width:1160px;margin:auto}.mini-header{display:flex;justify-content:space-between;align-items:center;padding:30px;border-bottom:1px solid #d8dccc}.mini-header nav{display:flex;gap:24px;align-items:center}.mini-header small{font-size:12px;color:#69705f}.mini-brand{border:0;background:none;padding:0;cursor:pointer}.mini-brand img{width:142px;display:block}.mini-content{padding:48px 30px 64px;min-height:65vh}.mini-site h1{font-size:42px;line-height:1.12;letter-spacing:-1.3px;margin:24px 0}.mini-site h2{font-size:30px;line-height:1.15;letter-spacing:-.6px}.mini-site .primary{background:#ff8000;color:#142519;border:0;border-radius:6px;padding:18px 24px;font-size:17px;font-weight:700;display:inline-block}.mini-site .secondary{border:1px solid #bcc3b0;background:#f0f2e8;color:#21372d;border-radius:6px;padding:16px 22px}.mini-site .textbtn{color:#29382a;text-decoration:underline;text-underline-offset:4px}.mini-site .muted,.mini-site .meaning{color:#69705f}.mini-grid{display:grid;grid-template-columns:1.05fr 1fr;grid-template-areas:'summary promo' 'words promo';gap:30px 64px;align-items:start}.mini-summary{grid-area:summary}.mini-summary>p{line-height:1.5}.mini-summary .primary{margin-top:10px}.mini-summary>.muted{font-size:15px}.mini-result{font-size:15px;color:#426437}.mini-word-list{grid-area:words}.mini-site .word-row{display:flex;justify-content:space-between;align-items:center;gap:20px;border:0;border-top:1px solid #d8dccc;border-radius:0;background:none;padding:22px 0}.mini-site .word-row h3{margin:0 0 7px;font-size:22px}.mini-site .word-row .meaning{font-size:16px}.mini-site .word-row button{font-size:14px;max-width:145px;flex-shrink:0}.mini-promo{grid-area:promo;background:#1d352b;color:white;border-radius:12px;overflow:hidden}.mini-promo>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;display:block;background:#f0f2e8}.mini-promo>div{padding:28px}.mini-promo h2{margin:0;color:white;font-size:32px;line-height:1.17;text-wrap:balance}.mini-promo p{color:#d4dfcb;font-size:17px;line-height:1.55;margin:20px 0 24px}.mini-promo .trial-link{background:#f0f2e8;color:#21372d}.promotion-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}.promotion-layout .account{margin:24px 0;max-width:none}.promotion-layout .mini-promo{grid-area:auto}.promotion-layout .result-panel{min-width:0}.lingopie-promo-compact{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #d8dccc;padding:20px 0;margin-top:20px}.lingopie-promo-compact p{margin:0;max-width:32ch;font-size:17px;line-height:1.5}.lingopie-promo-compact .trial-link{flex-shrink:0;font-size:15px;padding:14px 18px}.mini-footer{padding:20px 30px;border-top:1px solid #d8dccc}.mini-site .account{max-width:470px;margin:40px auto 100px}.mini-site .google-signin{display:flex;margin-top:30px;align-items:center;justify-content:center;gap:12px}.mini-site .recall-card,.mini-site .question-panel{max-width:670px;margin:auto}.mini-site .practice-context{background:#ebe9e0;border:0;padding:22px;border-radius:8px}.mini-site .answer{min-height:62px;background:white;border:1px solid #c8cdbd;border-radius:7px;color:#293128}.mini-site .learning-slide{max-width:850px;margin:auto}.mini-site .scene-player video{max-height:480px;background:#111}.mini-site .dual-subtitles{padding:20px;background:#eeeee5;border-radius:0 0 8px 8px}.mini-site .subtitle-token{color:#293128}.mini-site .back{margin-bottom:25px}.mini-site button:focus-visible,.mini-site a:focus-visible{outline:3px solid #bb6417;outline-offset:3px}.mini-site .practice-correct{border-color:#4b8044;background:#eef5e9}.mini-site .practice-incorrect{border-color:#ba5545;background:#f9ede7}
@media(max-width:700px){.mini-header{padding:20px}.mini-brand img{width:112px}.mini-header nav{gap:14px;font-size:14px}.mini-content{padding:28px 20px 40px}.mini-site h1{font-size:34px}.mini-grid{grid-template-columns:1fr;grid-template-areas:'summary' 'words' 'promo';gap:25px}.mini-promo{display:block}.mini-promo>img{height:auto;max-height:240px;aspect-ratio:3/2}.mini-promo>div{padding:18px}.mini-promo h2{font-size:23px}.mini-promo p{font-size:14px;margin:12px 0}.mini-promo .secondary{font-size:14px;padding:12px}.mini-promo small{display:none}.mini-summary .primary{width:100%}.mini-site .word-row h3{font-size:20px}.mini-site .word-row button{max-width:120px}.promotion-layout{grid-template-columns:1fr;gap:24px}.promotion-layout .account{margin:0 0 12px}.lingopie-promo-compact{flex-direction:column;align-items:flex-start;gap:14px}.lingopie-promo-compact p{max-width:none}.mini-site .account{margin:30px auto 60px}.mini-site .learning-actions{flex-wrap:wrap;gap:12px}.mini-site .answer-grid{grid-template-columns:1fr}}
.plugin-shell .mini-grid{display:block}.plugin-shell .mini-summary h1{font-size:28px}.plugin-shell .mini-word-list .word-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border:0;border-bottom:1px solid #dedbd5;background:none;border-radius:0}.plugin-shell .mini-word-list h3{margin:0 0 5px}.plugin-shell .mini-summary .mini-result{font-size:15px}.plugin-shell .mini-word-list{margin-top:20px}

/* Keep clip navigation in view before the player on short screens. */
.mini-site.clip-practice .mini-header{padding-top:14px;padding-bottom:14px}
.mini-site.clip-practice .mini-content{padding-top:16px}
.mini-site.clip-practice .back{margin-bottom:12px}
.mini-site.clip-practice .learning-slide{display:flex;flex-direction:column;max-width:760px}
.mini-site.clip-practice .progress-meta{margin-bottom:8px}
.mini-site.clip-practice .word-definition{margin:6px 0 12px}
.mini-site.clip-practice .learning-actions{margin:0 0 14px;flex-wrap:nowrap;gap:12px}
.mini-site.clip-practice .learning-actions button{padding:12px 18px;min-height:46px}
.mini-site.clip-practice .scene-player video{height:clamp(140px,32dvh,300px);width:100%;object-fit:contain}
.mini-site.clip-practice .dual-subtitles{padding:12px 16px}
@media(max-width:700px){.mini-site.clip-practice .learning-actions button{font-size:14px;padding:10px 12px}.mini-site.clip-practice .learning-actions>.primary{width:auto}.mini-site.clip-practice .scene-player video{height:clamp(140px,27dvh,220px)}}

.last-answer{color:var(--muted);font-size:14px;margin:10px 0 0;min-height:1.55em}.question-panel .question-card{margin-top:14px}.last-answer strong{color:var(--ink);font-weight:600}.last-answer .mark{color:var(--green)}.last-answer .note{display:block;font-size:13px}.answer-dots{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.answer-dots .dot{width:8px;height:8px;border-radius:50%;background:#e5ded7}.answer-dots .dot.known{background:var(--green)}.answer-dots .dot.missed{background:#d98c7a}.answer-dots .dot.current{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
@media(hover:none){.answer:hover{border-color:#dbd4cd;background:white}.mini-site .answer:hover{border-color:#c8cdbd;background:white}}