:root{
  --bg:#EEF1F8; --card:#FFFFFF; --ink:#1E2B33; --muted:#5A6E78;
  --jade:#2E6DB4; --jade-ink:#FFFFFF; --mark:#F7C548; --mark-ink:#1E2B33; --line:#D5DDEA; --now:#F3F6FB; --mine:#E3ECF8;
  --ok:#1e8449; --ok-bg:#eafaf1; --bad:#922b21; --bad-bg:#fdedec;
  --scene-dim:1;
  --ui:"Baloo 2","Segoe UI",system-ui,sans-serif;
  --py:"Noto Sans","Segoe UI",Arial,sans-serif;
  --han:"Kaiti SC","STKaiti","KaiTi","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11161E; --card:#1A222D; --ink:#E5ECF4; --muted:#9AAABD; --jade:#7FB0EC; --jade-ink:#0E1622;
  --mark:#F2C04A; --mark-ink:#1A1A1A; --line:#2B3746; --now:#202A37; --mine:#1E2E44;
  --ok:#7DDCA3; --ok-bg:#163326; --bad:#F5A39A; --bad-bg:#3A1D1A; --scene-dim:.88; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11161E; --card:#1A222D; --ink:#E5ECF4; --muted:#9AAABD; --jade:#7FB0EC; --jade-ink:#0E1622;
  --mark:#F2C04A; --mark-ink:#1A1A1A; --line:#2B3746; --now:#202A37; --mine:#1E2E44;
  --ok:#7DDCA3; --ok-bg:#163326; --bad:#F5A39A; --bad-bg:#3A1D1A; --scene-dim:.88; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.5}
[hidden]{display:none!important}
.wrap{max-width:860px;margin:0 auto;padding:20px 16px 40px;display:grid;gap:16px}
header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
h1{margin:0;font-family:var(--han);font-size:clamp(28px,5vw,38px);font-weight:600}
h1 small{font-family:var(--ui);font-size:16px;font-weight:500;color:var(--muted);margin-left:8px}
.back{font-weight:600;color:var(--jade);text-decoration:none;font-size:15px}
.lede{margin:0;font-size:17px;max-width:62ch}
.tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tag{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--jade);font-weight:700}
.level-chip{display:inline-block;justify-self:start;font-size:12.5px;font-weight:700;border-radius:999px;padding:1px 10px;color:#fff}
.level-chip.lv-k2{background:#C8601C}
.level-chip.lv-p2{background:#2471A3}
.level-chip.lv-p4{background:#7D3C98}

/* the list of sets: one tab per level */
.shelf h2{margin:8px 0 10px;font-size:18px}
.shelf h2 small{color:var(--muted);font-weight:500;margin-left:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.set-card{display:grid;align-content:start;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:inherit;text-decoration:none}
.set-card:hover{border-color:var(--jade)}
.set-card:focus-visible{outline:3px solid var(--jade);outline-offset:3px}
.set-card img{display:block;width:100%;height:auto;aspect-ratio:800/300;filter:brightness(var(--scene-dim))}
.card-body{padding:10px 14px 14px;display:grid;gap:2px}
.card-title{font-family:var(--han);font-size:24px;line-height:1.3}
.card-en{color:var(--muted)}
.card-meta{font-size:13px;color:var(--jade);font-weight:700}
.card-badge{display:inline-block;justify-self:start;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--jade);background:var(--now);border-radius:999px;padding:2px 10px}
.set-card.is-done{border:2px solid var(--jade)}
.set-card.is-done .card-badge{background:var(--jade);color:var(--jade-ink)}
.tier-count{margin-left:10px;font-size:14px;color:var(--jade);font-weight:700}
.tier-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.tier-tab{font:inherit;cursor:pointer;display:grid;justify-items:center;padding:8px 14px;border-radius:14px;border:2px solid var(--jade);background:transparent;color:var(--jade);font-weight:700;font-size:17px;line-height:1.25;flex:1 1 140px}
.tier-tab small{font-size:12.5px;font-weight:500;opacity:.85}
.tier-tab .tab-count{font-size:12px;font-weight:700}
.tier-tab .tab-count:empty{display:none}
.tier-tab[aria-selected="true"]{background:var(--jade);color:var(--jade-ink)}
.tier-tab:focus-visible{outline:3px solid var(--jade);outline-offset:3px}
.tabbed .tier-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.progress-summary{margin:0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-weight:600}
.link-btn{font:inherit;font-size:14px;font-weight:500;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ctl{font:inherit;font-weight:600;font-size:15px;border-radius:999px;padding:8px 16px;cursor:pointer;border:2px solid var(--jade);background:transparent;color:var(--jade);display:inline-flex;gap:6px;align-items:center;text-decoration:none}
.ctl.primary,.ctl[aria-pressed="true"]{background:var(--jade);color:var(--jade-ink)}
.ctl:disabled{opacity:.4;cursor:default}
.ctl small{font-size:12px;font-weight:500;opacity:.85}
.ctl:focus-visible,.word:focus-visible,.opt:focus-visible{outline:3px solid var(--jade);outline-offset:3px}
.modebar{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 16px;display:grid;gap:8px}
.modebar .label{font-weight:700;color:var(--muted);font-size:14px}
.mode-note{margin:0;font-size:15px;color:var(--muted)}
.note,.novoice{font-size:13px;color:var(--muted);margin:0}

/* one question: the clip, the question and its options */
.clip{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:12px}
.clip-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.clip-num{font-size:20px;font-weight:700}
.clip-kind{font-size:13px;font-weight:700;color:var(--jade);background:var(--now);border-radius:999px;padding:1px 10px}
.scene{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);max-width:520px}
.scene svg.bg{display:block;width:100%;height:auto;filter:brightness(var(--scene-dim))}
.scene.plain{display:flex;gap:10px;align-items:center;border:0;max-width:none}
.cast{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:space-evenly;align-items:flex-end;pointer-events:none}
.member{display:grid;justify-items:center;gap:2px}
.member .av{width:clamp(44px,10vw,72px)}
.scene.plain .member .av{width:52px}
.member .tagname{background:var(--card);color:var(--ink);border-radius:999px;padding:0 10px;font-size:12.5px;font-weight:700;white-space:nowrap}
.member.talking .av{animation:bob .3s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-6px)}}
.av{display:block;border-radius:50%;overflow:hidden;aspect-ratio:1;height:auto}
.play-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.plays{font-size:14px;color:var(--muted);font-weight:600}
.q{font-family:var(--han);font-size:clamp(21px,4.4vw,27px);line-height:2;margin:0}
.q-en{font-size:14px;color:var(--muted);margin:0;display:none}
.show-en .q-en,.show-en .opt-en,.show-en .s-en{display:block}
rt{font-family:var(--py);font-size:.4em;color:var(--muted)}
.nopy rt{visibility:hidden}
.opts{display:grid;gap:8px}
.opts.pics{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:12px;padding:8px 12px;cursor:pointer;text-align:left;display:flex;gap:10px;align-items:center}
.opt:hover:not(:disabled){border-color:#3498db}
.opt:disabled{cursor:default}
.opt .letter{font-weight:700;color:var(--muted);flex:none;width:1.6em}
.opt .opt-zh{font-family:var(--han);font-size:clamp(19px,4vw,23px);line-height:2}
.opt .opt-en{font-size:13px;color:var(--muted);display:none}
.opt .opt-text{display:grid}
.pics .opt{flex-direction:column;text-align:center;padding:10px 6px;gap:2px}
.pics .pic{font-size:clamp(40px,11vw,64px);line-height:1.15}
.pics .letter{width:auto}
.opt.picked{border-color:#3498db;background:#d6eaf8;color:#1E2B33}
.opt.picked rt,.opt.picked .opt-en,.opt.picked .letter{color:#1E2B33}
.opt.correct{border-color:#27ae60;background:var(--ok-bg);color:var(--ok)}
.opt.wrong{border-color:#e74c3c;background:var(--bad-bg);color:var(--bad)}
.verdict{margin:0;font-weight:700}
.verdict.ok{color:var(--ok)}
.verdict.bad{color:var(--bad)}

/* the script of a clip: hidden until marked (exam) or opened (practice) */
.script{background:var(--now);border-radius:12px;padding:10px 14px;display:grid;gap:8px}
.script h3{margin:0;font-size:15px;color:var(--jade)}
.s-line{display:grid;gap:0}
.s-who{font-size:13px;font-weight:700;color:var(--muted)}
.s-zh{font-family:var(--han);font-size:clamp(20px,4.2vw,25px);line-height:2.05;margin:0}
.s-line.now .s-zh{background:var(--mark);color:var(--mark-ink);border-radius:8px}
.s-line.now rt{color:var(--mark-ink)}
.s-en{margin:0;font-size:15px;color:var(--muted);display:none}
.s-q{border-top:1px dashed var(--line);padding-top:6px}
.word{font:inherit;color:inherit;background:none;border:0;padding:0 .03em;margin:0;border-radius:8px;cursor:pointer;border-bottom:3px solid transparent}
.word:hover{border-bottom-color:var(--line)}
.word.active{background:var(--mark);color:var(--mark-ink)}
.wgroup{white-space:nowrap}
.punct{color:var(--muted)}
.wordcard{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;width:min(828px,calc(100% - 32px));z-index:5;display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 16px;min-height:60px;box-shadow:0 4px 18px rgba(0,0,0,.10)}
.wc-han{font-family:var(--han);font-size:40px;line-height:1}
.wc-text{display:grid;min-width:0}
.wc-py{font-family:var(--py);font-size:20px;color:var(--jade);font-weight:700}
.wc-close{margin-left:auto;font:inherit;font-size:20px;line-height:1;border:0;background:none;color:var(--muted);cursor:pointer;padding:4px 6px;border-radius:8px}

.finish{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:10px}
.score{font-size:24px;font-weight:700;color:var(--jade);margin:0}
.best-score{margin:0;font-weight:700;color:var(--jade)}

/* the printed paper */
#printSheet{display:none}
@media print{
  @page{size:A4;margin:14mm}
  body.has-sheet{background:#fff}
  body.has-sheet > .wrap,body.has-sheet > .site-head,body.has-sheet > .wordcard{display:none!important}
  body.has-sheet #printSheet{display:block!important}
}
.ws{color:#000;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:12pt}
.ws-head{display:flex;justify-content:space-between;align-items:flex-end;gap:8mm;border-bottom:2px solid #000;padding-bottom:3mm;margin-bottom:4mm}
.ws-head h1{font-family:var(--han);font-size:22pt;margin:0;font-weight:600}
.ws-head h1 small{font-family:sans-serif;font-size:11pt;font-weight:400;margin-left:3mm;white-space:nowrap}
.ws-name{font-size:11pt;white-space:nowrap}
.ws h2{font-size:13pt;margin:5mm 0 3mm;border-left:4px solid #2E6DB4;padding-left:3mm}
.ws-instr{margin:0 0 3mm;font-size:10.5pt}
.ws-q{break-inside:avoid;margin:0 0 5mm}
.ws-qt{font-family:var(--han);font-size:14pt;line-height:2}
.ws-qt rt{font-family:var(--py);font-size:7pt;color:#333}
.ws-opts{display:grid;gap:1mm 6mm;margin:1mm 0 0 7mm;font-family:var(--han);font-size:13pt;line-height:1.9}
.ws-opts.pics{grid-template-columns:repeat(3,1fr);text-align:center}
.ws-opts .ws-pic{font-size:30pt;line-height:1.2;display:block}
.ws-opts rt{font-family:var(--py);font-size:6.5pt;color:#333}
.ws-box{display:inline-block;width:9mm;height:7mm;border:1.5px solid #000;vertical-align:middle;margin-left:3mm}
.ws-key{break-before:page}
.ws-key ol{margin:0;padding-left:8mm;font-size:13pt}
.ws-script{break-before:page}
.ws-clip{break-inside:avoid;margin:0 0 4mm}
.ws-clip h3{margin:0 0 1mm;font-size:12pt}
.ws-line{display:grid;grid-template-columns:22mm 1fr;gap:3mm;align-items:baseline}
.ws-line b{font-family:var(--han);font-size:12pt;text-align:right}
.ws-line span{font-family:var(--han);font-size:13pt;line-height:1.8}
.ws-foot{margin-top:5mm;font-size:9pt;color:#555}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.site-head{background:#1B2A4A;color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap}
.site-head a{color:#C9A84C;text-decoration:none;font-size:14px}
.site-head .site-name{color:#fff;font-weight:700;font-size:17px}
.guide{display:grid;gap:6px;margin-top:8px}
.guide h2{font-size:22px;margin:18px 0 2px}
.guide p,.guide li{max-width:72ch;margin:0}
.guide ul{margin:0;padding-left:22px;display:grid;gap:4px}
.guide table{border-collapse:collapse;width:100%;max-width:72ch;font-size:15px}
.guide th,.guide td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.fulltext{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 20px}
.fulltext summary{cursor:pointer;font-weight:700;color:var(--jade)}
.fulltext h3{margin:14px 0 2px;font-size:16px}
.fulltext .ft-zh{font-family:var(--han);font-size:20px;margin:0}
.fulltext .ft-py{font-family:var(--py);color:var(--muted);margin:0;font-size:14px}
.fulltext .ft-en{margin:0;font-size:15px}
.fulltext .ft-a{margin:4px 0 0;font-weight:700;color:var(--jade)}