/* Finwise: shared styles, then tablet and phone layouts. */
:root {
  --bg:#fafbf6; --paper:#fffefa; --ink:#263b30; --muted:#697661;
  --green:#DDC050; --line:#dfe5d6; --soft:#edf1e5; --accent:#d9e7bb; --wide:1200px;
  --header-height:84px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:16px; color:var(--ink); background:var(--bg); font-synthesis:none;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 24px); }
body { margin:0; padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); }
button,input { font:inherit; }
button,a,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:not-allowed; opacity:.45; }
a { color:inherit; text-decoration:none; }
svg { flex-shrink:0; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #829f60; outline-offset:4px; }
main:focus { outline:none; }
main { min-height:45vh; }
h1,h2,h3,p { overflow-wrap:break-word; }
h1,h2,h3 { text-wrap:pretty; }
[hidden] { display:none!important; }
.wrap { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
.adv { max-width:var(--wide); margin:20px auto; padding:0 24px; min-height:0; }
.adv > p { text-align:center; }
.icon { width:20px; height:20px; vertical-align:middle; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:50px; padding:13px 24px; border:1px solid transparent; border-radius:9px; font-size:14px; font-weight:600; line-height:1.5; text-align:center; transition:background .18s,box-shadow .18s,transform .18s; }
.primary { background:var(--green); color:#fff; }
.outline { border-color:#bfcdaf; background:transparent; color:var(--green); }
.text-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; background:none; border:0; padding:4px 0; font-size:13px; font-weight:600; color:var(--green); line-height:1.5; }
.full { width:100%; margin-top:16px; }
.eyebrow { display:inline-block; color:#718062; font-size:10px; line-height:1.7; letter-spacing:1.8px; font-weight:600; }
.lead { font-size:15px; line-height:1.85; color:var(--muted); }
.pill { background:#eaf0df; border:1px solid #dae3cc; color:#526e3e; display:inline-flex; align-items:center; gap:8px; border-radius:24px; font-size:12px; line-height:1.7; padding:7px 13px; }
.green { background:#e6eddc; color:#456443; }
.sand { background:#f1ebda; color:#8a703e; }
.lilac { background:#eae8f0; color:#79658d; }
.peach { background:#f4e7dd; color:#9e684b; }
/* Header */
.header { min-height:var(--header-height); padding-top:env(safe-area-inset-top,0px); background:rgba(250,251,246,.97); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.header-inner { min-height:var(--header-height); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; min-height:44px; }
.brand>span:last-child { font-size:26px; font-weight:800; letter-spacing:-.8px; line-height:1; }
.brand-en { display:block; margin-top:8px; font-size:6px; font-weight:600; letter-spacing:1.8px; white-space:nowrap; }
.brand-mark { display:flex; align-items:flex-end; gap:4px; padding:11px; width:43px; height:43px; border-radius:13px; background:var(--green); transform:rotate(-3deg); }
.brand-mark i { display:block; width:5px; background:#d9e7b9; border-radius:3px; }
.brand-mark i:nth-child(1) { height:10px; }
.brand-mark i:nth-child(2) { height:16px; }
.brand-mark i:nth-child(3) { height:22px; }
.nav { display:flex; align-items:center; justify-content:center; gap:32px; align-self:stretch; }
.nav a { display:flex; align-items:center; position:relative; font-size:13px; color:var(--muted); white-space:nowrap; min-height:44px; }
.nav a.active { font-weight:600; color:var(--green); }
.nav a.active:after { content:''; position:absolute; width:18px; height:3px; border-radius:4px; background:var(--green); bottom:15px; left:calc(50% - 9px); }
.header-cta { display:inline-flex; align-items:center; gap:17px; min-height:44px; border:1px solid #c8d2bc; border-radius:8px; padding:10px 17px; font-size:12px; line-height:1.5; font-weight:600; white-space:nowrap; }
.mobile-menu { display:none; place-items:center; width:44px; height:44px; padding:10px; border:1px solid var(--line); border-radius:8px; background:transparent; flex-shrink:0; }
/* Home */
.hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:30px; padding-top:56px; padding-bottom:45px; min-height:510px; }
.hero-copy,.hero-visual { min-width:0; }
.overline { display:flex; align-items:center; gap:9px; font-size:10px; letter-spacing:1.5px; line-height:1.6; color:var(--green); font-weight:600; margin-bottom:23px; }
.overline>span { width:7px; height:7px; border-radius:50%; background:#829f60; flex-shrink:0; }
.hero h1 { position:relative; isolation:isolate; font-size:clamp(38px,4.05vw,58px); line-height:1.17; letter-spacing:-2px; font-weight:800; margin:0 0 25px; }
.hero-word { color:var(--green); position:relative; white-space:nowrap; }
.hero-word svg { position:absolute; width:100%; height:16px; left:0; bottom:-8px; z-index:-1; }
.hero p { max-width:49ch; font-size:15px; line-height:1.9; color:var(--muted); margin:0 0 27px; }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.hero-small { display:flex; gap:17px; flex-wrap:wrap; margin-top:20px; font-size:11px; line-height:1.7; color:#6f7d63; }
.hero-small span { display:flex; align-items:center; gap:5px; }
.hero-small svg { width:14px; height:14px; color:#6e8d4f; }
.hero-visual { display:flex; align-items:center; justify-content:center; align-self:stretch; position:relative; padding-bottom:20px; }
.hero-art { display:block; width:100%; height:auto; max-height:420px; }
.visual-caption { position:absolute; bottom:0; text-align:center; width:100%; font-size:8px; line-height:1.6; letter-spacing:2.5px; color:#7b886d; }
.benefits { background:#f1f4e9; border-block:1px solid var(--line); }
.benefit-inner { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding-block:24px; }
.benefit-inner>div { display:flex; align-items:center; gap:16px; padding-inline:25px; border-right:1px solid #dbe2ce; }
.benefit-inner>div:first-child { padding-left:0; }
.benefit-inner>div:last-child { border:0; padding-right:0; }
.benefit-inner svg { width:26px; height:26px; color:#6a8554; }
.benefit-inner strong { display:block; font-size:13px; line-height:1.5; font-weight:600; }
.benefit-inner small { display:block; font-size:11px; line-height:1.7; color:var(--muted); margin-top:5px; }
.section { padding-top:60px; padding-bottom:42px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
.section-head>div { min-width:0; }
.section-head h2 { font-size:clamp(25px,2.5vw,33px); line-height:1.3; font-weight:700; letter-spacing:-.8px; margin:11px 0 12px; }
.section-head p { font-size:14px; line-height:1.8; color:var(--muted); margin:0; max-width:65ch; }
.small-dot { color:#8da962; margin-left:2px; }
.section-aside { display:flex; align-items:center; gap:9px; color:#718062; font-size:11px; line-height:1.7; white-space:nowrap; }
.section-aside svg { width:17px; }
.filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:26px 0 24px; }
.filter { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; border:1px solid var(--line); border-radius:7px; padding:10px 16px; font-size:12px; line-height:1.5; background:transparent; color:#66755b; }
.filter.selected { background:var(--green); color:#fff; border-color:var(--green); }
.filter span { font-size:10px; color:inherit; opacity:.75; }
.topic-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.topic-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); background:var(--paper); border-radius:14px; overflow:hidden; transition:transform .18s,box-shadow .18s; }
.topic-cover { min-height:175px; position:relative; overflow:hidden; }
.topic-art { display:flex; align-items:center; justify-content:center; position:absolute; inset:0; isolation:isolate; background:none; }
.topic-art>.icon { width:74px; height:74px; stroke-width:1.15; transform:rotate(-10deg); filter:drop-shadow(0 6px 0 #ffffff70); z-index:2; }
.art-ring { position:absolute; width:145px; height:145px; border:1px solid currentColor; border-radius:50%; opacity:.12; transform:translateY(10px); }
.art-ring.r2 { width:200px; height:200px; opacity:.08; }
.art-dot { position:absolute; width:12px; height:12px; border-radius:50%; background:currentColor; opacity:.2; right:21%; top:27%; }
.cover-label { position:absolute; bottom:15px; left:18px; font-size:8px; line-height:1.5; letter-spacing:1.25px; opacity:.85; }
.card-tag { position:absolute; top:12px; right:12px; max-width:calc(100% - 24px); background:#ffffffa6; border-radius:5px; padding:5px 8px; font-size:10px; line-height:1.5; }
.topic-body { display:flex; flex-direction:column; flex:1; min-width:0; padding:22px 18px 17px; }
.topic-body h3 { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; font-size:17px; line-height:1.5; font-weight:650; margin:0 0 10px; letter-spacing:-.25px; }
.topic-body h3 svg { width:18px; height:18px; margin-top:3px; }
.topic-body p { font-size:13px; line-height:1.85; color:var(--muted); margin:0 0 20px; flex:1; }
.card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 13px; font-size:10px; line-height:1.5; color:#6b795e; border-top:1px solid #e7ebdf; padding-top:14px; margin-top:auto; }
.card-meta span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.card-meta svg { width:13px; height:13px; }
.card-meta span:last-child { display:none; }
.daily { display:flex; align-items:center; gap:24px; padding:32px; background:#eef2e3; border:1px solid #dce4cd; border-radius:14px; margin-top:12px; }
.daily>div:nth-child(2) { min-width:0; flex:1; }
.daily-stamp { width:64px; height:64px; display:grid; place-items:center; position:relative; flex-shrink:0; border:1px solid #bfd0a4; border-radius:50%; }
.daily-stamp:after { content:''; position:absolute; inset:6px; border:1px dashed #bfd0a4; border-radius:50%; }
.daily-stamp svg { width:30px; height:30px; color:#738e52; }
.daily h2 { font-size:23px; font-weight:650; letter-spacing:-.5px; line-height:1.4; margin:8px 0 10px; }
.daily p { font-size:13px; line-height:1.85; color:var(--muted); margin:0; }
.daily .btn { font-size:12px; padding-inline:18px; flex-shrink:0; }
.notes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.note-card { display:flex; align-items:flex-start; gap:14px; min-width:0; border-top:1px solid var(--line); padding:24px 0; }
.note-card>div { min-width:0; }
.note-icon { width:43px; height:43px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; }
.note-card .eyebrow { font-size:9px; letter-spacing:.4px; }
.note-card h3 { font-size:15px; line-height:1.65; letter-spacing:-.2px; font-weight:600; margin:9px 0; }
.note-card p { font-size:12px; line-height:1.85; color:var(--muted); margin:0; }
.note-card>svg { width:17px; height:17px; align-self:center; margin-left:auto; color:#6d8055; }
.bottom-quote { padding:10px 0 50px; text-align:center; }
.bottom-quote>span { display:block; font:62px/1 Georgia,serif; color:#a9bd82; }
.bottom-quote p { font-size:22px; line-height:1.6; letter-spacing:-.5px; margin:0 0 18px; }
.bottom-quote small { font-size:9px; letter-spacing:2.5px; color:#77866a; line-height:1.8; }
/* Footer */
footer { background:#f1f3ea; border-top:1px solid var(--line); margin-top:24px; padding-bottom:env(safe-area-inset-bottom,0px); }
.footer-main { display:flex; align-items:center; justify-content:space-between; gap:36px; padding-block:34px; }
.footer-main p { font-size:12px; line-height:1.8; color:var(--muted); margin:12px 0 0; }
.footer-main .brand>span:last-child { font-size:24px; }
.footer-main nav { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.footer-main nav a { display:flex; align-items:center; min-height:44px; font-size:12px; color:#657559; }
.footer-bottom { display:flex; justify-content:space-between; gap:16px; padding-block:19px; border-top:1px solid #dce3d1; font-size:11px; line-height:1.85; color:#6f7e61; }
/* Quiz overview */
.breadcrumb { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:12px; line-height:1.8; padding-top:25px; color:#6e7e61; }
.breadcrumb a { display:inline-flex; align-items:center; min-height:36px; }
.quiz-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:64px; padding-top:35px; padding-bottom:45px; }
.intro-visual { min-width:0; min-height:440px; position:relative; overflow:hidden; border-radius:18px; }
.intro-visual .topic-art { inset:0 0 90px; }
.intro-visual .topic-art>.icon { width:140px; height:140px; }
.intro-visual .art-ring { width:235px; height:235px; }
.intro-visual .art-ring.r2 { width:340px; height:340px; }
.intro-en { position:absolute; left:30px; top:28px; font-size:10px; line-height:1.7; letter-spacing:1.8px; }
.intro-caption { position:absolute; left:32px; bottom:30px; right:25px; font-size:26px; line-height:1.5; letter-spacing:-.6px; font-weight:600; }
.intro-copy { min-width:0; }
.intro-copy h1 { font-size:clamp(30px,3vw,42px); line-height:1.25; letter-spacing:-1px; font-weight:750; margin:20px 0 16px; }
.intro-copy>p { font-size:15px; line-height:1.9; color:var(--muted); margin:0; }
.intro-meta { display:flex; flex-wrap:wrap; gap:14px 24px; margin-top:23px; color:#627651; font-size:12px; line-height:1.7; }
.intro-meta span { display:flex; align-items:center; gap:8px; }
.intro-meta svg { width:17px; height:17px; }
.intro-steps { margin:27px 0; }
.intro-steps>div { display:flex; align-items:center; gap:13px; font-size:13px; line-height:1.7; margin-bottom:14px; color:var(--muted); }
.intro-steps b { display:grid; place-items:center; width:27px; height:27px; flex-shrink:0; border-radius:50%; background:#edf1e3; color:#647d47; font-size:10px; }
.restart { margin-left:20px; }
.intro-hint { display:block; font-size:11px; line-height:1.85; color:#728263; margin-top:15px; }
.info-strip { display:flex; align-items:flex-start; gap:13px; border:1px solid #dfe6d3; background:#f1f5e9; border-radius:10px; padding:19px 22px; margin-top:15px; margin-bottom:45px; }
.info-strip>svg { width:20px; height:20px; color:#7b915f; margin-top:3px; }
.info-strip p { font-size:13px; line-height:1.9; color:var(--muted); margin:0; }
/* Active quiz */
.quiz-shell { padding-top:24px; padding-bottom:55px; }
.quiz-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:23px; color:#6c7e5e; font-size:12px; line-height:1.7; }
.quiz-top>span:last-child { display:flex; align-items:center; gap:6px; }
.quiz-top>span svg { width:16px; height:16px; }
.quiz-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; align-items:start; }
.quiz-sidebar { padding:25px 0; position:sticky; top:calc(var(--header-height) + 25px); min-width:0; }
.quiz-sidebar h2 { font-size:26px; line-height:1.4; letter-spacing:-.5px; margin:16px 0; }
.quiz-sidebar p { font-size:13px; line-height:1.9; color:var(--muted); margin:0; }
.quiz-sidebar ol { list-style:none; margin:0; padding:22px 0; }
.quiz-sidebar li { display:flex; align-items:center; gap:15px; font-size:12px; line-height:1.6; padding:11px 0; color:#7a896b; }
.quiz-sidebar li>span { display:grid; place-items:center; width:31px; height:31px; border:1px solid #d7dfcb; border-radius:50%; font-size:11px; }
.quiz-sidebar li>span svg { width:14px; height:14px; }
.quiz-sidebar li.current { color:var(--green); font-weight:600; }
.quiz-sidebar li.current>span { background:var(--green); color:white; border-color:var(--green); }
.quiz-sidebar li.done>span { color:#5f7c43; background:#e6edd9; }
.quiz-sidebar>small { display:block; border-top:1px solid var(--line); padding-top:22px; font-size:11px; line-height:1.95; color:#718362; }
.quiz-sidebar>small svg { width:15px; height:15px; margin-right:6px; }
.question-card { min-width:0; border:1px solid var(--line); border-radius:16px; background:var(--paper); padding:36px 42px; scroll-margin-top:calc(var(--header-height) + 20px); }
.question-progress { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#6f815e; font-size:12px; line-height:1.6; }
.question-progress b { font-size:21px; margin-inline:5px; font-weight:600; }
.progress-track { height:6px; border-radius:8px; background:#edf0e5; overflow:hidden; margin:15px 0 30px; }
.progress-track i { display:block; height:100%; background:#86a35f; transition:width .2s; }
.question-label { letter-spacing:.9px; }
.question-card h1 { font-size:clamp(24px,2.3vw,31px); line-height:1.45; letter-spacing:-.6px; margin:13px 0 12px; }
.question-context { font-size:14px; line-height:1.9; color:var(--muted); margin:0 0 26px; }
.scenario { display:grid; grid-template-columns:repeat(var(--scenario-columns,1),minmax(0,1fr)); gap:22px; padding:26px; border-radius:11px; margin-bottom:28px; }
.scenario-item { min-width:0; text-align:center; }
.scenario-item+div { border-left:1px solid #ffffffa6; padding-left:22px; }
.scenario-item>span { display:block; font-size:12px; line-height:1.6; }
.scenario-item>strong { display:block; font-size:23px; line-height:1.4; margin:12px 0; overflow-wrap:break-word; }
.scenario-item>small { display:block; font-size:12px; line-height:1.7; }
.scenario-bar { height:6px; border-radius:8px; overflow:hidden; background:#ffffff80; margin-top:17px; }
.scenario-bar i { display:block; height:100%; background:currentColor; opacity:.6; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
.answer { position:relative; display:flex; align-items:center; gap:13px; min-height:60px; padding:14px 16px; border:1px solid #dce3d2; border-radius:9px; margin-bottom:12px; cursor:pointer; font-size:15px; line-height:1.7; }
.answer input { position:absolute; width:19px; height:19px; margin:0; left:20px; opacity:0; }
.answer-letter { width:30px; height:30px; display:grid; place-items:center; flex-shrink:0; background:#f1f4e9; border:1px solid #dfe5d5; border-radius:6px; font-size:12px; }
.answer-state { color:var(--green); margin-left:auto; display:flex; }
.answer-state svg { width:18px; height:18px; }
.answer.selected { background:#f0f5e7; border-color:#668754; box-shadow:inset 0 0 0 1px #668754; }
.answer.selected .answer-letter { background:var(--green); color:#fff; border-color:var(--green); }
.answer:focus-within { outline:3px solid #92ac70; outline-offset:3px; }
.answer.correct { background:#edf5e4; border-color:#88a868; box-shadow:none; }
.answer.wrong { background:#fff0e8; border-color:#ce9678; box-shadow:none; }
.answer.wrong .answer-state { color:#a56143; }
fieldset:disabled .answer { cursor:default; }
.explanation { border:1px solid #d7e4c5; border-radius:11px; padding:22px 24px; background:#eef5e4; margin-top:24px; scroll-margin-top:calc(var(--header-height) + 20px); }
.explanation.incorrect { background:#f8f0de; border-color:#e5d7b3; }
.explanation>strong { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.7; }
.explanation>strong svg { width:19px; height:19px; margin-top:3px; }
.explanation p { font-size:14px; line-height:1.95; color:#647552; margin:13px 0; }
.explanation small { display:block; font-size:12px; line-height:1.8; color:#58783b; }
.question-tip { display:block; text-align:center; font-size:11px; line-height:1.8; color:#738362; margin-top:13px; }
/* Results and history */
.result-wrap { max-width:940px; padding-top:25px; padding-bottom:50px; }
.result-card { text-align:center; border:1px solid var(--line); border-radius:18px; background:var(--paper); padding:36px; margin:20px 0 46px; }
.score-circle { display:grid; place-items:center; width:164px; height:164px; margin:28px auto; border-radius:50%; background:conic-gradient(#789957 var(--score),#e9eedf 0); }
.score-circle>div { width:145px; height:145px; display:flex; flex-direction:column; justify-content:center; border-radius:50%; background:var(--paper); }
.score-circle b { color:var(--green); font:600 60px/1.1 Georgia,serif; }
.score-circle span { font-size:11px; color:#6a7d59; margin-top:10px; }
.result-card h1 { font-size:clamp(26px,2.8vw,34px); line-height:1.4; letter-spacing:-.6px; margin:0 0 14px; }
.result-card p { font-size:15px; line-height:1.85; color:var(--muted); max-width:56ch; margin:0 auto; }
.result-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; margin:26px 0; }
.result-card>small { display:block; font-size:12px; line-height:1.85; color:#6f805f; }
.review-heading h2 { font-size:28px; }
.review-heading .filter { flex-shrink:0; }
.review-item { background:var(--paper); border:1px solid var(--line); border-radius:11px; margin-bottom:13px; }
.review-item summary { display:flex; align-items:center; gap:13px; list-style:none; padding:20px; cursor:pointer; font-size:14px; line-height:1.8; min-height:62px; }
.review-item summary::-webkit-details-marker { display:none; }
.review-state { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.review-state svg { width:16px; height:16px; }
.review-item summary>b { font-size:11px; color:#6f815d; }
.review-plus { margin-left:auto; font-size:23px; color:#6c8353; }
.review-item[open] .review-plus { transform:rotate(45deg); }
.review-body { border-top:1px solid var(--line); padding:22px 26px; color:var(--muted); font-size:14px; line-height:1.95; }
.review-answers { display:flex; flex-direction:column; gap:7px; font-size:13px; line-height:1.9; }
.review-answers strong { color:#526f3d; font-weight:600; }
.review-body small { font-size:12px; color:#5f7e43; }
.empty-note { color:#65794f; font-size:14px; line-height:1.9; text-align:center; padding:20px; }
.next-topic { margin-top:35px; }
.next-topic h3 { font-size:18px; line-height:1.6; font-weight:600; }
.next-topic>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.next-topic a { display:flex; align-items:center; gap:11px; padding:20px 16px; background:#ecf1e2; border-radius:10px; font-size:13px; line-height:1.7; }
.next-topic a>svg { width:18px; height:18px; }
.next-topic a>svg:last-child { margin-left:auto; }
.learning-page { min-height:620px; }
.learning-page>h1,.notes-page>h1 { font-size:clamp(30px,3.3vw,44px); line-height:1.3; letter-spacing:-.9px; margin:19px 0 16px; }
.learning-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:35px 0 45px; }
.learning-stats>div { border:1px solid #dce4ce; border-radius:12px; background:#eef3e4; padding:28px 15px; text-align:center; }
.learning-stats b { display:block; font:44px/1.2 Georgia,serif; color:#516f3e; }
.learning-stats small { font:13px/1.5 Arial,sans-serif; }
.learning-stats span { display:block; margin-top:12px; font-size:13px; line-height:1.8; color:#687c56; }
.learning-page .section-head h2 { font-size:26px; }
.record { display:grid; grid-template-columns:43px minmax(0,1fr) auto auto; align-items:center; gap:20px; padding:22px 0; border-top:1px solid var(--line); }
.record>div { min-width:0; }
.record h3 { font-size:15px; line-height:1.7; margin:0 0 6px; }
.record div>span { color:#6e805e; font-size:12px; line-height:1.8; }
.record>strong { color:#567640; font:29px/1.3 Georgia,serif; white-space:nowrap; }
.record strong small { font-size:11px; }
.record .text-link { font-size:12px; margin-left:15px; }
.learning-page .info-strip { margin-top:35px; }
.empty-state { text-align:center; border:1px dashed #cad7b7; border-radius:14px; padding:45px 24px; margin-bottom:35px; }
.empty-state>svg { width:40px; height:40px; color:#809a60; }
.empty-state h2 { font-size:23px; line-height:1.6; font-weight:600; }
.empty-state p { color:var(--muted); font-size:14px; line-height:1.85; margin-bottom:25px; }
/* Legal and learning notes */
.legal-layout { display:grid; grid-template-columns:205px minmax(0,1fr); gap:65px; padding-top:32px; padding-bottom:60px; align-items:start; }
.legal-layout aside { position:sticky; top:calc(var(--header-height) + 24px); min-width:0; padding-top:10px; }
.legal-layout aside>.eyebrow { display:block; margin-bottom:23px; }
.legal-layout aside a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:48px; padding:13px 15px; margin-bottom:7px; border-radius:8px; color:#667959; font-size:13px; line-height:1.7; }
.legal-layout aside a.current { background:#e9f0dd; font-weight:600; color:#456638; }
.legal-layout aside svg { width:16px; height:16px; }
.legal-article { min-width:0; max-width:760px; }
.legal-article h1 { font-size:42px; line-height:1.3; letter-spacing:-.9px; margin:16px 0 12px; }
.legal-meta { display:flex; flex-wrap:wrap; gap:9px 25px; border-bottom:1px solid var(--line); padding:17px 0 25px; font-size:12px; line-height:1.8; color:#718362; }
.legal-article section { margin-top:32px; }
.legal-article section h2 { font-size:19px; line-height:1.65; font-weight:600; margin:0 0 13px; }
.legal-article section p { font-size:15px; line-height:1.95; color:var(--muted); margin:0; }
.legal-article>.btn { margin-top:35px; }
.notes-page { min-height:560px; }
.notes-page .notes-grid { margin-top:40px; }
.notes-page .info-strip { margin-top:35px; }
.note-article { max-width:790px; padding-top:35px; padding-bottom:55px; }
.note-article h1 { font-size:clamp(30px,3.4vw,44px); line-height:1.25; letter-spacing:-.9px; margin:22px 0 15px; }
.article-cover { display:flex; align-items:center; justify-content:center; gap:32px; border-radius:14px; padding:40px 32px; margin:32px 0; }
.article-cover svg { width:65px; height:65px; stroke-width:1.2; }
.article-cover span { font-size:22px; line-height:1.5; letter-spacing:-.4px; }
.note-article section { margin-top:30px; }
.note-article section h2 { font-size:21px; line-height:1.6; }
.note-article section p { font-size:15px; line-height:1.95; color:var(--muted); }
.source { background:#edf3e2; border-radius:11px; padding:26px; margin:35px 0; }
.source b { display:block; font-size:14px; line-height:1.8; margin-bottom:12px; }
.source a { font-size:13px; line-height:1.9; overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:4px; }
.source small { display:block; font-size:12px; line-height:1.8; color:#6b7f59; margin-top:13px; }
/* Utility and dialogs */
.empty { min-height:500px; text-align:center; padding-block:95px; }
.empty h1 { font-size:30px; line-height:1.5; }
.empty p { color:var(--muted); font-size:15px; line-height:1.85; margin:24px 0; }
.skip { position:fixed; top:-100px; left:10px; z-index:100; padding:13px 20px; background:var(--green); color:#fff; border-radius:5px; }
.skip:focus { top:10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#toast { position:fixed; bottom:calc(24px + env(safe-area-inset-bottom,0px)); left:50%; transform:translate(-50%,15px); z-index:100; opacity:0; pointer-events:none; width:max-content; max-width:calc(100% - 32px); padding:15px 22px; background:#244932; color:white; border-radius:10px; box-shadow:0 8px 26px #17332222; font-size:13px; line-height:1.8; transition:opacity .18s,transform .18s; }
#toast.show { opacity:1; transform:translate(-50%,0); }
dialog { width:min(460px,calc(100% - 32px)); max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); overflow:auto; padding:30px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:16px; }
dialog::backdrop { background:#1b372b66; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
dialog h2 { font-size:23px; line-height:1.5; margin-top:0; }
dialog p { font-size:14px; line-height:1.9; color:var(--muted); }
dialog>div { display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin-top:25px; }
@media(hover:hover) and (pointer:fine) {
  .primary:hover { background:color-mix(in srgb, var(--green) 82%, #000); box-shadow:0 5px 15px color-mix(in srgb, var(--green) 16%, transparent); }
  .outline:hover,.header-cta:hover { background:#edf2e3; }
  .btn:hover { transform:translateY(-2px); }
  .text-link:hover,.footer-main nav a:hover,.breadcrumb a:hover { text-decoration:underline; text-underline-offset:4px; }
  .topic-card:hover { transform:translateY(-5px); box-shadow:0 15px 30px #263b3010; }
  .filter:hover:not(.selected) { background:#edf1e5; }
  .note-card:hover h3 { color:#5e803f; }
}
/* Tablet / small laptop: two cards per row and comfortable gutters. */
@media(max-width:1120px) {
  .wrap { width:calc(100% - 64px); }
  .nav { gap:22px; }
  .header-inner { gap:18px; }
  .hero { gap:20px; min-height:470px; }
  .hero h1 { font-size:clamp(38px,4.3vw,48px); }
  .hero-actions { gap:14px; }
  .hero-actions .btn { padding-inline:18px; font-size:13px; }
  .hero-actions .text-link { font-size:12px; }
  .hero-small { gap:10px 16px; }
  .topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .topic-cover { min-height:190px; }
  .topic-body { padding:24px; }
  .topic-body p { max-width:38ch; }
  .topic-body h3 { font-size:20px; }
  .card-meta { font-size:12px; }
  .card-meta span:last-child { display:inline-flex; margin-left:auto; font-size:10px; border:1px solid #dce4ce; padding:2px 6px; border-radius:4px; }
  .benefit-inner>div { padding-inline:18px; gap:13px; }
  .benefit-inner strong { font-size:12px; }
  .section-aside { display:none; }
  .daily { gap:20px; padding:27px; flex-wrap:wrap; }
  .daily>div:nth-child(2) { flex-basis:calc(100% - 100px); }
  .daily .btn { margin-left:84px; }
  .notes-grid { gap:20px; }
  .note-card { flex-wrap:wrap; }
  .note-card>div { flex:1 1 calc(100% - 62px); }
  .note-card>svg { display:none; }
  .quiz-intro { gap:38px; }
  .intro-visual { min-height:430px; }
  .intro-copy h1 { font-size:34px; }
  .intro-caption { font-size:23px; }
  .quiz-layout { grid-template-columns:185px minmax(0,1fr); gap:30px; }
  .quiz-sidebar h2 { font-size:23px; }
  .question-card { padding:30px; }
  .legal-layout { grid-template-columns:175px minmax(0,1fr); gap:40px; }
  .footer-main nav { gap:14px 20px; justify-content:flex-end; }
}
/* Tablet portrait and mobile navigation. */
@media(max-width:900px) {
  :root { --header-height:74px; }
  .header-inner { gap:12px; }
  .mobile-menu { display:grid; }
  .header-cta { margin-left:auto; }
  .nav { display:none; position:absolute; top:100%; left:0; right:0; max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px); overflow:auto; background:var(--bg); box-shadow:0 14px 20px #1e3c2512; border-bottom:1px solid var(--line); padding:12px 32px 18px; flex-direction:column; align-items:stretch; gap:4px; }
  .nav.open { display:flex; }
  .nav a { min-height:48px; padding:12px 15px; font-size:15px; border-radius:7px; }
  .nav a.active { background:#eaf0df; }
  .nav a.active:after { display:none; }
  .hero { grid-template-columns:minmax(0,1fr); gap:20px; padding-top:40px; padding-bottom:30px; min-height:0; }
  .hero-copy { width:100%; max-width:650px; margin-inline:auto; }
  .hero h1 { font-size:clamp(39px,6.1vw,54px); }
  .hero p { max-width:55ch; }
  .hero-visual { width:min(480px,100%); height:285px; margin-inline:auto; }
  .hero-art { height:275px; width:auto; max-width:100%; }
  .benefit-inner { padding-block:20px; }
  .benefit-inner>div { align-items:flex-start; }
  .benefit-inner small { font-size:11px; }
  .benefit-inner svg { width:21px; height:21px; }
  .section { padding-top:44px; padding-bottom:32px; }
  .notes-grid { grid-template-columns:1fr; gap:0; }
  .note-card { flex-wrap:nowrap; align-items:center; gap:18px; padding-block:22px; }
  .note-card>div { flex:1; }
  .note-card>svg { display:block; }
  .note-card h3 { font-size:17px; margin-block:8px; }
  .note-card .eyebrow { font-size:10px; }
  .note-card p { font-size:13px; }
  .quiz-layout { display:block; }
  .quiz-sidebar { display:none; }
  .question-card { max-width:740px; margin-inline:auto; padding:32px; }
  .quiz-top>span:last-child { display:none; }
  .quiz-top { max-width:740px; margin-inline:auto; }
  .quiz-intro { gap:30px; }
  .intro-copy h1 { font-size:30px; }
  .intro-copy>p { font-size:14px; }
  .intro-visual { min-height:400px; }
  .intro-caption { font-size:20px; left:25px; bottom:25px; }
  .intro-visual .topic-art>.icon { width:115px; height:115px; }
  .intro-visual .art-ring { width:195px; height:195px; }
  .intro-visual .art-ring.r2 { width:280px; height:280px; }
  .intro-steps>div { font-size:12px; }
  .intro-meta { font-size:11px; gap:13px; }
  .intro-en { font-size:8px; left:25px; }
  .legal-layout { grid-template-columns:minmax(0,1fr); gap:28px; }
  .legal-layout aside { position:static; display:flex; gap:8px; padding:0 0 13px; border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .legal-layout aside>.eyebrow { display:none; }
  .legal-layout aside a { flex-shrink:0; margin:0; min-height:44px; padding:10px 15px; white-space:nowrap; }
  .legal-layout aside svg { display:none; }
  .legal-article { max-width:720px; margin-inline:auto; width:100%; }
  .footer-main { flex-direction:column; align-items:flex-start; gap:22px; }
  .footer-main nav { justify-content:flex-start; gap:10px 30px; }
  .footer-main nav a { font-size:13px; }
  .next-topic>div { grid-template-columns:1fr; }
}
/* Phones: readable content, full-size controls and no squeezed columns. */
@media(max-width:640px) {
  :root { --header-height:70px; }
  .wrap { width:calc(100% - 40px); }
  .brand-mark { width:37px; height:37px; padding:8px; }
  .brand>span:last-child { font-size:24px; }
  .brand-en { font-size:5px; margin-top:7px; letter-spacing:1.7px; }
  .header-cta { font-size:11px; padding:10px 12px; min-height:44px; gap:9px; }
  .header-cta svg { width:16px; height:16px; }
  .header-inner { gap:10px; }
  .mobile-menu { width:44px; height:44px; }
  .nav { padding-inline:20px; }
  .hero { padding-top:32px; padding-bottom:28px; gap:15px; }
  .hero h1 { font-size:clamp(36px,7.8vw,46px); letter-spacing:-1.5px; line-height:1.15; margin-bottom:23px; }
  .hero .overline { font-size:9px; letter-spacing:1.15px; margin-bottom:20px; }
  .hero p { font-size:15px; line-height:1.8; margin-bottom:23px; }
  .hero-actions { gap:10px 20px; }
  .hero-actions .btn { font-size:14px; }
  .hero-actions .text-link { font-size:13px; }
  .hero-small { font-size:11px; gap:9px 15px; margin-top:16px; }
  .hero-small svg { width:13px; height:13px; }
  .hero-visual { height:235px; }
  .hero-art { height:225px; }
  .visual-caption { font-size:7px; letter-spacing:2px; }
  .benefit-inner { grid-template-columns:1fr; padding-block:4px; }
  .benefit-inner>div,.benefit-inner>div:first-child,.benefit-inner>div:last-child { padding:17px 0; border-right:0; border-bottom:1px solid #dce3d1; gap:16px; align-items:center; }
  .benefit-inner>div:last-child { border-bottom:0; }
  .benefit-inner strong { font-size:13px; }
  .benefit-inner small { font-size:12px; line-height:1.6; margin-top:3px; }
  .benefit-inner svg { width:24px; height:24px; }
  .section-head { align-items:flex-start; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
  .section-head h2 { font-size:29px; line-height:1.25; letter-spacing:-.7px; }
  .section-head p { font-size:14px; line-height:1.8; }
  .eyebrow { font-size:9px; letter-spacing:1.4px; }
  .filters { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; gap:8px; padding:3px 2px 10px; margin:20px -2px 20px; }
  .filter { font-size:12px; padding:11px 15px; flex-shrink:0; white-space:nowrap; }
  .filters::-webkit-scrollbar { height:3px; }
  .filters::-webkit-scrollbar-thumb { background:#c2d0ac; border-radius:4px; }
  .topic-grid { gap:16px; }
  .topic-cover { min-height:160px; }
  .topic-body { padding:19px 16px 17px; }
  .topic-body h3 { font-size:17px; line-height:1.4; min-height:48px; }
  .topic-body p { font-size:13px; line-height:1.8; }
  .card-meta { font-size:10px; gap:8px 10px; }
  .card-meta span:last-child { display:none; }
  .cover-label { font-size:7px; letter-spacing:1px; left:13px; bottom:13px; }
  .card-tag { font-size:9px; right:9px; top:9px; }
  .daily { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:start; gap:18px 15px; padding:24px 20px; }
  .daily-stamp { width:44px; height:44px; margin-top:5px; }
  .daily-stamp svg { width:25px; height:25px; }
  .daily .eyebrow { font-size:8px; letter-spacing:1px; }
  .daily h2 { font-size:21px; line-height:1.4; }
  .daily p { font-size:13px; line-height:1.8; }
  .daily .btn { grid-column:1/-1; width:100%; margin:0; font-size:14px; }
  .notes-home .section-head>.text-link { min-height:44px; font-size:13px; }
  .note-card { align-items:flex-start; gap:14px; padding-block:22px; }
  .note-icon { width:40px; height:40px; }
  .note-card .eyebrow { font-size:9px; letter-spacing:.35px; }
  .note-card h3 { font-size:16px; line-height:1.6; }
  .note-card p { font-size:13px; }
  .note-card>svg { display:none; }
  .bottom-quote { padding:12px 0 35px; }
  .bottom-quote>span { font-size:50px; }
  .bottom-quote p { font-size:20px; line-height:1.6; }
  .bottom-quote small { font-size:8px; letter-spacing:1.6px; }
  .footer-main { padding-block:29px; gap:18px; }
  .footer-main p { font-size:13px; max-width:30ch; margin-top:10px; }
  .footer-main nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:5px 18px; }
  .footer-main nav a { font-size:13px; padding-block:10px; }
  .footer-bottom { flex-direction:column; font-size:11px; gap:8px; }
  .breadcrumb { padding-top:18px; font-size:11px; gap:8px; }
  .quiz-intro { grid-template-columns:minmax(0,1fr); gap:28px; padding-top:20px; padding-bottom:25px; }
  .intro-visual { min-height:220px; }
  .intro-visual .topic-art { inset:0 0 0 49%; }
  .intro-visual .topic-art>.icon { width:100px; height:100px; }
  .intro-visual .art-ring { width:155px; height:155px; }
  .intro-visual .art-ring.r2 { width:225px; height:225px; }
  .intro-en { left:21px; top:21px; font-size:8px; letter-spacing:1.2px; }
  .intro-caption { left:22px; bottom:25px; right:auto; max-width:46%; font-size:20px; line-height:1.45; }
  .intro-copy h1 { font-size:34px; line-height:1.25; margin:18px 0 15px; }
  .intro-copy>p { font-size:15px; line-height:1.85; }
  .intro-meta { font-size:12px; gap:13px 20px; margin-top:20px; }
  .intro-steps { margin-block:24px; }
  .intro-steps>div { font-size:13px; }
  .intro-copy .btn { width:100%; min-height:52px; }
  .intro-copy .restart { display:flex; justify-content:center; margin:10px auto 0; }
  .intro-hint { font-size:11px; text-align:center; }
  .info-strip { gap:11px; padding:17px; margin-bottom:30px; }
  .info-strip p { font-size:12px; line-height:1.9; }
  .info-strip>svg { width:18px; height:18px; }
  .quiz-shell { padding-top:15px; padding-bottom:30px; }
  .quiz-top { margin-bottom:14px; flex-wrap:wrap; gap:0 12px; }
  .quiz-top .text-link { font-size:12px; }
  .quiz-top>span { font-size:11px; }
  .question-card { border-radius:12px; padding:24px 20px; }
  .question-progress { font-size:11px; }
  .question-progress b { font-size:20px; }
  .progress-track { margin:13px 0 24px; }
  .question-label { font-size:9px; line-height:1.8; letter-spacing:.65px; }
  .question-card h1 { font-size:25px; line-height:1.4; margin-top:12px; }
  .question-context { font-size:14px; line-height:1.85; margin-bottom:22px; }
  .scenario { padding:22px 16px; gap:15px; margin-bottom:22px; }
  .scenario-item+div { padding-left:15px; }
  .scenario-item>strong { font-size:20px; line-height:1.45; margin:11px 0; }
  .scenario-item>small { font-size:11px; line-height:1.7; }
  .scenario-item>span { font-size:11px; }
  .answer { font-size:14px; line-height:1.8; gap:11px; padding:14px 13px; min-height:60px; }
  .answer-letter { width:28px; height:28px; font-size:12px; }
  .answer input { left:17px; }
  .explanation { padding:19px; }
  .explanation>strong { font-size:14px; line-height:1.7; }
  .explanation p { font-size:14px; line-height:1.9; }
  .explanation small { font-size:12px; line-height:1.8; }
  .question-card .full { min-height:52px; }
  .question-tip { font-size:11px; }
  .result-wrap { padding-top:18px; padding-bottom:30px; }
  .result-card { padding:27px 20px; margin-top:16px; margin-bottom:32px; }
  .result-card h1 { font-size:28px; line-height:1.35; }
  .result-card p { font-size:14px; line-height:1.85; }
  .result-card>small { font-size:11px; }
  .score-circle { width:150px; height:150px; margin-block:25px; }
  .score-circle>div { width:133px; height:133px; }
  .score-circle b { font-size:55px; }
  .result-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-block:24px; }
  .result-actions>.btn { min-width:0; width:100%; padding-inline:14px; gap:10px; font-size:13px; }
  .result-actions>.text-link { grid-column:1/-1; justify-content:center; }
  .review-heading h2 { font-size:27px; }
  .review-heading .eyebrow { font-size:8px; letter-spacing:1px; }
  .review-heading .filter { font-size:12px; }
  .review-item summary { font-size:14px; line-height:1.8; padding:17px 15px; gap:11px; }
  .review-item summary>b { display:none; }
  .review-state { width:27px; height:27px; }
  .review-body { padding:20px; font-size:14px; line-height:1.9; }
  .review-answers { font-size:13px; }
  .review-body small { font-size:12px; }
  .next-topic h3 { font-size:17px; }
  .next-topic a { font-size:14px; min-height:56px; padding:16px; }
  .learning-page,.notes-page { min-height:540px; }
  .learning-page>h1,.notes-page>h1 { font-size:34px; line-height:1.25; }
  .lead { font-size:15px; }
  .learning-stats { gap:10px; margin:27px 0 30px; }
  .learning-stats>div { padding:23px 10px; }
  .learning-stats b { font-size:34px; }
  .learning-stats small { font-size:11px; }
  .learning-stats span { font-size:11px; line-height:1.7; }
  .learning-page .section-head { align-items:center; }
  .learning-page .section-head h2 { font-size:24px; }
  .learning-page .section-head .text-link { font-size:12px; }
  .record { grid-template-columns:40px minmax(0,1fr) auto; gap:10px 13px; padding:20px 0; }
  .record .text-link { grid-column:2/-1; justify-self:start; margin:0; min-height:40px; font-size:12px; }
  .record h3 { font-size:14px; }
  .record div>span { font-size:11px; }
  .record>strong { font-size:25px; }
  .record strong small { font-size:10px; }
  .empty-state { padding:32px 20px; }
  .empty-state h2 { font-size:22px; }
  .empty-state p { font-size:14px; }
  .legal-layout { padding-top:20px; padding-bottom:35px; gap:25px; }
  .legal-layout aside a { font-size:12px; padding:11px 13px; }
  .legal-article h1 { font-size:35px; margin-top:13px; }
  .legal-article section { margin-top:28px; }
  .legal-article section h2 { font-size:19px; line-height:1.6; }
  .legal-article section p { font-size:15px; line-height:1.95; }
  .legal-meta { font-size:11px; gap:8px 18px; padding-bottom:23px; }
  .legal-article>.btn { width:100%; }
  .notes-page .notes-grid { margin-top:27px; }
  .note-article { padding-top:25px; padding-bottom:40px; }
  .note-article h1 { font-size:34px; line-height:1.25; }
  .note-article section h2 { font-size:21px; }
  .note-article section p { font-size:15px; line-height:1.95; }
  .article-cover { padding:28px 22px; gap:23px; margin-block:27px; }
  .article-cover svg { width:47px; height:47px; }
  .article-cover span { font-size:19px; }
  .source { padding:22px; }
  .source a { font-size:13px; }
  .source small { font-size:12px; }
  .note-article>.btn { width:100%; padding-inline:16px; }
  .empty { padding-block:65px; }
  dialog { padding:24px; }
  dialog>div>.btn { flex:1; padding-inline:14px; font-size:13px; }
}
/* Narrow phones: prioritize one readable card over two cramped cards. */
@media(max-width:480px) {
  .header-cta { display:none; }
  .mobile-menu { margin-left:auto; }
  .hero h1 { font-size:clamp(34px,9.1vw,43px); }
  .hero-actions { flex-direction:column; align-items:stretch; gap:6px; }
  .hero-actions .btn { width:100%; min-height:52px; }
  .hero-actions .text-link { justify-content:center; }
  .hero-small { justify-content:flex-start; gap:8px 14px; }
  .hero-visual { height:205px; }
  .hero-art { height:195px; }
  .topic-grid { grid-template-columns:minmax(0,1fr); gap:22px; }
  .topic-cover { min-height:175px; }
  .topic-body { padding:22px; }
  .topic-body h3 { font-size:21px; min-height:0; }
  .topic-body p { font-size:14px; line-height:1.85; }
  .card-meta { font-size:12px; }
  .card-meta span:last-child { display:inline-flex; margin-left:auto; font-size:10px; border:1px solid #dce4ce; border-radius:4px; padding:2px 6px; }
  .cover-label { font-size:9px; left:22px; bottom:17px; }
  .card-tag { font-size:11px; top:14px; right:14px; }
  .topic-art>.icon { width:80px; height:80px; }
  .intro-caption { font-size:18px; }
  .result-actions { grid-template-columns:minmax(0,1fr); }
  .result-actions>.text-link { grid-column:auto; }
}
@media(max-width:360px) {
  .wrap { width:calc(100% - 32px); }
  .hero h1 { font-size:34px; }
  .hero .overline { font-size:8px; letter-spacing:.9px; }
  .hero-small { font-size:10px; gap:8px 12px; }
  .topic-body { padding:20px; }
  .card-meta { gap:8px 10px; font-size:11px; }
  .card-meta span:last-child { display:none; }
  .question-card { padding:22px 16px; }
  .question-card h1 { font-size:23px; }
  .scenario { padding:20px 13px; gap:12px; }
  .scenario-item+div { padding-left:12px; }
  .scenario-item>strong { font-size:18px; }
  .scenario-item>small { font-size:11px; }
  .learning-stats>div { padding-inline:7px; }
  .learning-stats span { font-size:10px; }
  .learning-stats b { font-size:30px; }
  .daily { grid-template-columns:minmax(0,1fr); }
  .daily-stamp { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { transition:none!important; animation:none!important; }
}
/* Content-first homepage: compact quiz cards without category navigation. */
.compact-home { padding-top:20px; }
.compact-intro { display:flex; align-items:center; justify-content:space-between; gap:35px; padding-top:12px; padding-bottom:27px; border-bottom:1px solid var(--line); }
.compact-intro>div:first-child { min-width:0; }
.compact-intro .eyebrow { font-size:9px; letter-spacing:1.5px; }
.compact-intro h1 { font-size:clamp(30px,3.2vw,42px); line-height:1.2; letter-spacing:-1.3px; margin:10px 0 11px; font-weight:750; }
.compact-intro h1>span { color:#8ca669; }
.compact-intro p { color:var(--muted); font-size:14px; line-height:1.8; margin:0; }
.compact-intro-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px 25px; padding-left:30px; border-left:1px solid var(--line); flex-shrink:0; }
.compact-intro-facts>span { font-size:11px; color:#708061; line-height:1.6; }
.compact-intro-facts b { display:block; font-size:27px; font-weight:500; line-height:1.3; color:#4b6c39; letter-spacing:-.7px; margin-bottom:4px; }
.compact-intro-facts>small { grid-column:1/-1; display:flex; align-items:center; gap:5px; font-size:10px; line-height:1.6; color:#7a876d; }
.compact-intro-facts .icon { width:12px; height:12px; }
.compact-home .home-collection { padding-top:23px; padding-bottom:10px; scroll-margin-top:8px; }
.compact-collection-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.compact-collection-heading h2 { font-size:21px; line-height:1.4; letter-spacing:-.45px; font-weight:650; margin:0; }
.compact-collection-heading>span { color:#7b886f; font-size:11px; line-height:1.7; white-space:nowrap; }
.quiz-collection { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.compact-quiz { display:flex; flex-direction:column; min-width:0; min-height:218px; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--paper); transition:transform .18s,box-shadow .18s,border-color .18s; }
.compact-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.compact-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; flex-shrink:0; }
.compact-icon .icon { width:19px; height:19px; }
.compact-number { color:#94a187; font-size:10px; line-height:1.5; letter-spacing:.8px; }
.compact-quiz h3 { font-size:18px; line-height:1.3; letter-spacing:-.4px; margin:0; font-weight:650; min-height:47px; }
.compact-description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:var(--muted); font-size:12px; line-height:1.75; margin:10px 0 13px; }
.compact-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; border-top:1px solid #e7ebdf; padding-top:11px; min-height:30px; }
.compact-card-footer>span { display:inline-flex; align-items:center; gap:5px; font-size:10px; line-height:1.5; color:#7a886c; white-space:nowrap; }
.compact-card-footer>span .icon { width:12px; height:12px; }
.compact-card-footer>strong { display:inline-flex; align-items:center; gap:7px; font-size:11px; line-height:1.5; color:var(--green); font-weight:600; }
.compact-card-footer>strong .icon { width:15px; height:15px; }
.compact-learning-note { display:flex; align-items:center; justify-content:center; gap:7px; color:#75866a; font-size:11px; line-height:1.8; padding:19px 0 7px; }
.compact-learning-note .icon { width:15px; height:15px; }
.compact-home .home-reading { padding-top:24px; padding-bottom:20px; }
.compact-home .home-reading .section-head { margin-bottom:15px; }
.compact-home .home-reading .section-head h2 { font-size:25px; margin-top:7px; }
.compact-home .notes-grid { gap:24px; }
.compact-home .note-card { padding-top:18px; padding-bottom:15px; }
.compact-home .note-card h3 { font-size:14px; }
.compact-home .note-card p { font-size:12px; }
@media(hover:hover) and (pointer:fine) {
 .compact-quiz:hover { border-color:#b3c49e; transform:translateY(-3px); box-shadow:0 9px 22px #263b300c; }
 .compact-quiz:hover .compact-card-footer>strong .icon { transform:translateX(3px); }
}
@media(max-width:1120px) {
 .quiz-collection { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .compact-intro h1 { font-size:36px; }
 .compact-intro-facts { padding-left:24px; gap:10px 20px; }
 .compact-quiz h3 { font-size:18px; }
}
@media(max-width:900px) {
 .compact-home { padding-top:16px; }
 .compact-intro { gap:20px; padding-top:5px; padding-bottom:22px; }
 .compact-intro h1 { font-size:32px; }
 .compact-intro p { font-size:13px; }
 .compact-intro-facts { padding-left:20px; gap:8px 16px; }
 .compact-intro-facts>span { font-size:10px; }
 .compact-intro-facts b { font-size:24px; }
 .compact-quiz { min-height:188px; padding:17px; }
 .compact-quiz h3 { font-size:17px; line-height:1.35; min-height:46px; }
 .compact-description { display:none; }
 .compact-card-top { margin-bottom:15px; }
 .compact-card-footer { margin-top:18px; padding-top:12px; }
 .compact-home .notes-grid { gap:0; }
}
@media(max-width:760px) {
 .quiz-collection { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
 .compact-intro-facts { display:none; }
 .compact-intro h1 { font-size:34px; }
 .compact-collection-heading>span { font-size:10px; }
}
@media(max-width:640px) {
 .compact-home { padding-top:12px; }
 .compact-intro { padding-top:8px; padding-bottom:19px; }
 .compact-intro .eyebrow { font-size:8px; letter-spacing:1.2px; }
 .compact-intro h1 { font-size:32px; line-height:1.16; letter-spacing:-1px; margin:10px 0; }
 .compact-intro p { font-size:13px; line-height:1.8; max-width:36ch; }
 .compact-home .home-collection { padding-top:19px; }
 .compact-collection-heading { display:block; margin-bottom:15px; }
 .compact-collection-heading h2 { font-size:20px; line-height:1.4; letter-spacing:-.4px; }
 .compact-collection-heading>span { display:block; margin-top:5px; font-size:11px; }
 .quiz-collection { gap:12px; }
 .compact-quiz { min-height:184px; padding:15px; border-radius:10px; }
 .compact-card-top { margin-bottom:13px; }
 .compact-icon { width:30px; height:30px; border-radius:8px; }
 .compact-icon .icon { width:17px; height:17px; }
 .compact-number { font-size:9px; }
 .compact-quiz h3 { font-size:16px; line-height:1.35; letter-spacing:-.25px; min-height:44px; }
 .compact-card-footer { gap:6px; margin-top:auto; padding-top:12px; min-height:31px; }
 .compact-card-footer>span { font-size:9px; gap:3px; }
 .compact-card-footer>span .icon { display:none; }
 .compact-card-footer>strong { font-size:10px; gap:3px; }
 .compact-card-footer>strong .icon { width:13px; height:13px; }
 .compact-learning-note { align-items:flex-start; font-size:11px; padding-top:17px; }
 .compact-learning-note .icon { margin-top:3px; flex-shrink:0; }
 .compact-home .home-reading { padding-top:20px; padding-bottom:14px; }
 .compact-home .home-reading .section-head h2 { font-size:25px; }
 .compact-home .note-card h3 { font-size:15px; }
}
@media(max-width:360px) {
 .compact-intro h1 { font-size:29px; }
 .compact-quiz { padding:13px; min-height:190px; }
 .compact-quiz h3 { font-size:15px; line-height:1.35; }
 .compact-card-footer { gap:4px; }
 .compact-card-footer>strong .icon { display:none; }
 .compact-card-footer>strong { font-size:10px; }
 .quiz-collection { gap:10px; }
 .compact-collection-heading h2 { font-size:19px; }
}

/* Each question owns a compact, accessible scene illustration. */
.question-illustration { width:min(100%,320px); margin:0 0 18px; overflow:hidden; border:1px solid #e2e8d8; border-radius:13px; background:#f0f3e6; }
.question-illustration img { display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:contain; }
@media(max-width:600px) {
 .question-illustration { width:min(100%,280px); margin-bottom:17px; border-radius:10px; }
 .question-context { margin-bottom:19px; }
}

/* A focused answer page: centered art and a compact phone reading flow. */
.question-illustration { margin-inline:auto; }
.question-back { display:none; }
@media(max-width:640px) {
 .quiz-active { --header-height:52px; }
 .quiz-active .header-inner { min-height:52px; }
 .quiz-active .header .wrap { width:calc(100% - 24px); }
 .quiz-active .header-cta,.quiz-active .brand-en { display:none; }
 .quiz-active .brand { gap:8px; }
 .quiz-active .brand>span:last-child { font-size:21px; }
 .quiz-active .brand-mark { width:30px; height:30px; padding:6px; gap:3px; border-radius:9px; }
 .quiz-active .brand-mark i { width:4px; }
 .quiz-active .brand-mark i:nth-child(1) { height:8px; }
 .quiz-active .brand-mark i:nth-child(2) { height:13px; }
 .quiz-active .brand-mark i:nth-child(3) { height:18px; }
 .quiz-active .mobile-menu { width:44px; height:44px; border:0; }
 .quiz-active .quiz-shell { width:calc(100% - 20px); padding-top:8px; padding-bottom:20px; }
 .quiz-active .quiz-top,.quiz-active .quiz-sidebar,.quiz-active .question-label { display:none; }
 .quiz-active .quiz-layout { display:block; }
 .quiz-active .question-card { padding:10px 13px 14px; border-radius:12px; scroll-margin-top:60px; }
 .quiz-active .question-progress { gap:8px; min-height:36px; font-size:11px; line-height:1.4; }
 .quiz-active .question-progress b { font-size:17px; margin-inline:3px; }
 .quiz-active .question-progress>span:last-child { margin-left:auto; }
 .quiz-active .question-back { display:grid; place-items:center; width:44px; height:36px; margin-left:-9px; flex-shrink:0; border-radius:6px; color:var(--green); }
 .quiz-active .question-back .icon { width:19px; height:19px; }
 .quiz-active .progress-track { height:4px; margin:4px 0 12px; }
 .quiz-active .question-card h1 { font-size:20px; line-height:1.3; letter-spacing:-.35px; margin:0 0 8px; }
 .quiz-active .question-context { font-size:13px; line-height:1.45; margin:0 0 10px; }
 .quiz-active .question-illustration { width:min(100%,224px); margin:0 auto 12px; border-radius:9px; }
 .quiz-active .answer { gap:8px; padding:8px 10px; min-height:44px; font-size:14px; line-height:1.45; margin-bottom:7px; }
 .quiz-active .answer:last-child { margin-bottom:0; }
 .quiz-active .answer-letter { width:24px; height:24px; font-size:11px; border-radius:5px; }
 .quiz-active .answer input { left:13px; }
 .quiz-active .answer-state .icon { width:16px; height:16px; }
 .quiz-active .question-card .full { min-height:44px; margin-top:10px; padding:10px 16px; font-size:13px; }
 .quiz-active .question-tip { display:none; }
 .quiz-active .explanation { padding:14px; margin-top:15px; }
 .quiz-active .explanation p { font-size:13px; line-height:1.65; }
}
@media(max-width:640px) and (max-height:740px) {
 .quiz-active .question-illustration { width:min(100%,184px); margin-bottom:10px; }
 .quiz-active .progress-track { margin-bottom:10px; }
}
@media(max-width:360px) {
 .quiz-active .question-card { padding-inline:11px; }
 .quiz-active .question-card h1 { font-size:19px; }
}
@media(max-width:360px) and (max-height:600px) {
 .quiz-active .question-illustration { width:min(100%,128px); margin-bottom:8px; }
 .quiz-active .question-context { margin-bottom:8px; }
}

/* After submission, phones focus on the answer and the next step. */
.feedback-mobile-title,.feedback-correct-answer,.feedback-review { display:none; }
@media(max-width:640px) {
 .quiz-active .is-answered .question-content { display:none; }
 .quiz-active .feedback-mobile-title { display:block; font-size:22px; line-height:1.25; margin:2px 0 12px; }
 .quiz-active .feedback-mobile-title:focus { outline:none; }
 .quiz-active .answer-feedback .explanation { padding:13px 14px; margin:0; border-radius:10px; }
 .quiz-active .answer-feedback .feedback-desktop-status,.quiz-active .answer-feedback .feedback-key { display:none; }
 .quiz-active .feedback-correct-answer { display:block; padding-bottom:11px; border-bottom:1px solid #d8e2cb; }
 .quiz-active .feedback-correct-answer>span { display:block; font-size:11px; line-height:1.5; font-weight:600; color:#65804e; margin-bottom:5px; }
 .quiz-active .feedback-correct-answer>strong { display:block; font-size:15px; line-height:1.45; font-weight:650; color:var(--ink); overflow-wrap:break-word; }
 .quiz-active .answer-feedback .explanation p { font-size:14px; line-height:1.55; margin:11px 0 0; color:#4e6244; }
 .quiz-active .question-card .feedback-next { min-height:46px; margin-top:12px; }
 .quiz-active .feedback-review { display:block; margin-top:9px; }
 .quiz-active .feedback-review>summary { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; padding:8px 2px; font-size:12px; line-height:1.5; color:var(--green); cursor:pointer; list-style:none; }
 .quiz-active .feedback-review>summary::-webkit-details-marker { display:none; }
 .quiz-active .feedback-review>summary>span { font-size:20px; }
 .quiz-active .feedback-review[open]>summary>span { transform:rotate(45deg); }
 .quiz-active .feedback-review-body { padding:12px 0 3px; border-top:1px solid var(--line); }
 .quiz-active .feedback-review-body h2 { font-size:17px; line-height:1.4; margin:0 0 8px; letter-spacing:-.2px; }
 .quiz-active .feedback-review-body p { font-size:13px; line-height:1.6; color:var(--muted); margin:0 0 12px; }
 .quiz-active .feedback-review-image { display:block; width:min(100%,184px); height:auto; margin:0 auto 12px; border-radius:8px; }
 .quiz-active .feedback-review-body ol { list-style:none; padding:0; margin:0 0 12px; }
 .quiz-active .feedback-review-body li { display:flex; flex-wrap:wrap; gap:4px 9px; padding:10px 11px; margin-bottom:7px; border:1px solid var(--line); border-radius:7px; font-size:13px; line-height:1.5; }
 .quiz-active .feedback-review-body li>span { flex-basis:100%; }
 .quiz-active .feedback-review-body li>b { font-size:10px; font-weight:600; }
 .quiz-active .feedback-review-body .review-correct { border-color:#90ad75; background:#edf5e4; }
 .quiz-active .feedback-review-body .review-selected { border-color:#c99a79; background:#fff0e8; }
 .quiz-active .feedback-review-body>small { display:block; font-size:12px; line-height:1.6; color:#58783b; }
}
@media(max-width:640px) and (max-height:640px) {
 .quiz-active .feedback-mobile-title { font-size:20px; margin-bottom:10px; }
 .quiz-active .answer-feedback .explanation { padding:11px 12px; }
 .quiz-active .answer-feedback .explanation p { font-size:13px; line-height:1.5; margin-top:9px; }
 .quiz-active .feedback-correct-answer { padding-bottom:9px; }
 .quiz-active .question-card .feedback-next { margin-top:10px; }
}