/* 方向：「答案卡與印章」— 多益畫卡紙的綠色印刷、鉛筆塗黑的圓圈、紅色批改印章 */
:root{
  --paper:#EEF2EC; --surface:#FBFCF9; --ink:#17211C; --muted:#4A5650;
  --print:#2E6A55; --print-2:#24574A; --print-soft:#DCE8E1; --print-line:#B9CFC3;
  --stamp:#B3302A; --stamp-soft:#F7E2DE; --graphite:#262A2E;
  --line:color-mix(in srgb,var(--print) 22%,transparent);
  --shadow:0 1px 0 rgba(36,87,74,.10),0 8px 24px -12px rgba(23,33,28,.22);
  --r-s:6px; --r-m:12px;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;
  --en:"Newsreader","Iowan Old Style","Georgia",serif;
  --tab-h:64px; --safe-b:env(safe-area-inset-bottom,0px);
  --gut:clamp(14px,4.5vw,32px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;width:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.8;letter-spacing:.02em;
  min-height:100vh;width:100%;padding-bottom:calc(var(--tab-h) + var(--safe-b) + 32px);overflow-x:hidden;overflow-x:clip;
  background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(46,106,85,.055) 31px 32px);}
img,svg{display:block;max-width:100%}
a{color:var(--print-2)}
b,strong{font-weight:700}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-s)}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--stamp);outline-offset:3px;border-radius:4px}
main:focus{outline:none}
.noscript{padding:24px}

/* 左側定位刻度（畫卡紙的 timing marks） */
.timing{display:none}
@media (min-width:900px){.timing{display:block;position:fixed;top:0;bottom:0;left:calc(50% - 410px - 28px);width:8px;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,var(--print) 0 6px,transparent 6px 32px);background-position:0 13px;opacity:.28}}

.masthead{position:relative;z-index:2;width:100%;padding:calc(env(safe-area-inset-top,0px) + 14px) max(var(--gut),env(safe-area-inset-right,0px)) 6px max(var(--gut),env(safe-area-inset-left,0px));max-width:820px;margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:44px}
.brand-mark{display:inline-flex;gap:4px}
.brand-mark i{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--print)}
.brand-mark i+i{background:var(--graphite);border-color:var(--graphite)}
.brand-text{font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:.06em}
.brand-text b{color:var(--print);font-weight:900;margin-left:2px}

main{position:relative;z-index:2;display:block;width:100%;min-width:0;max-width:820px;margin:0 auto;padding:0 max(var(--gut),env(safe-area-inset-right,0px)) 24px max(var(--gut),env(safe-area-inset-left,0px))}
main>*{min-width:0;max-width:100%}
/* 頁面有浮動「開始練習」時，底部再多留出它的高度 */
body[data-view=topic]{padding-bottom:calc(var(--tab-h) + var(--safe-b) + 110px)}

/* ---------- Home ---------- */
.hero{padding:22px 0 26px}
.hero-kicker{margin:0;font-family:var(--en);font-style:italic;color:var(--print);font-size:18px;letter-spacing:.01em}
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(30px,8.4vw,54px);line-height:1.28;letter-spacing:.04em;margin:6px 0 14px}
.hero-sub{margin:0;max-width:34em;color:var(--muted)}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:15px;color:var(--muted)}
.hero-meta b{font-variant-numeric:tabular-nums;color:var(--ink);font-size:18px}

.sheet{background:var(--surface);border:1.5px solid var(--print);border-radius:var(--r-m);box-shadow:var(--shadow);overflow:hidden}
.sheet-head{padding:14px 16px 12px;border-bottom:1.5px solid var(--print);background:var(--print-soft)}
.sheet-head h2{margin:0;font-family:var(--serif);font-size:20px;color:var(--print-2);letter-spacing:.08em}
.sheet-head p{margin:2px 0 0;font-size:14px;color:var(--muted);line-height:1.7}
.key{display:inline-block;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--print);vertical-align:-1px;margin:0 3px 0 6px}
.key.ok,.row-dots i.ok{background:var(--graphite);border-color:var(--graphite)}
.key.ng,.row-dots i.ng{border-color:var(--stamp);background:var(--stamp-soft);box-shadow:inset 0 0 0 2px var(--surface)}
.rows{list-style:none;margin:0;padding:0}
.rows li+li{border-top:1px dashed var(--print-line)}
.row{display:grid;grid-template-columns:2.6em 1fr;grid-template-areas:"no title" "no dots";column-gap:10px;row-gap:6px;align-items:center;padding:14px 16px;text-decoration:none;color:var(--ink);min-height:64px;
  transition:background-color .15s ease}
.row:hover{background:color-mix(in srgb,var(--print-soft) 55%,transparent)}
.row:active{background:var(--print-soft)}
.row-no{grid-area:no;align-self:start;font-family:var(--en);font-weight:600;font-size:26px;line-height:1.2;color:var(--print);font-variant-numeric:tabular-nums}
.row-title{grid-area:title;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.row-title b{font-size:18px;letter-spacing:.04em}
.row-title small{font-family:var(--en);font-style:italic;color:var(--muted);font-size:15px;letter-spacing:0}
.row-dots{grid-area:dots;display:flex;flex-wrap:wrap;gap:5px}
.row-dots i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--print);display:block}
@media (min-width:640px){
  .row{grid-template-columns:3em 1fr auto;grid-template-areas:"no title dots"}
  .row-dots{max-width:260px;justify-content:flex-end;gap:4px}
}

/* ---------- Topic notes ---------- */
.topic-head{position:relative;padding:18px 0 8px;overflow:hidden;overflow:clip;isolation:isolate}
.topic-num{position:absolute;right:0;top:-8px;font-family:var(--en);font-weight:600;font-size:clamp(110px,32vw,210px);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--print-line);z-index:-1;letter-spacing:-.04em;user-select:none}
.crumb{margin:0;font-size:14px;color:var(--muted)}
.crumb a{color:var(--print-2);text-underline-offset:3px;display:inline-block;padding:10px 0;margin:-10px 0}
.topic h1{font-family:var(--serif);font-weight:900;font-size:clamp(32px,9vw,50px);line-height:1.25;margin:6px 0 0;letter-spacing:.05em}
.topic-en{margin:2px 0 0;font-family:var(--en);font-style:italic;color:var(--print);font-size:19px;letter-spacing:0}
.lead{margin:14px 0 0;max-width:36em;font-size:17px}
.sec{font-family:var(--serif);font-size:21px;letter-spacing:.1em;color:var(--print-2);margin:34px 0 12px;display:flex;align-items:center;gap:12px}
.sec::after{content:"";flex:1;height:1.5px;background:var(--print)}
.note-p{max-width:36em}
.formula{margin:14px 0;background:var(--surface);border:1.5px solid var(--print);border-left-width:6px;border-radius:var(--r-s);padding:12px 14px 10px}
.formula figcaption,.table-wrap figcaption{font-weight:700;color:var(--print-2);font-size:15px;letter-spacing:.06em;margin-bottom:4px}
.formula ul{margin:0;padding:0;list-style:none}
.formula li{padding:6px 0;border-top:1px dashed var(--print-line);line-height:1.7;overflow-wrap:anywhere}
.formula li:first-child{border-top:0}
.formula b,.note-p b,.traps b,.examples b{color:var(--print-2)}
.table-wrap{margin:14px 0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1.5px solid var(--print);border-radius:var(--r-s);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.6}
th,td{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--print-line)}
thead th{background:var(--print-soft);color:var(--print-2);font-weight:700;white-space:nowrap}
tbody th{font-weight:700;white-space:nowrap}
tbody tr:last-child>*{border-bottom:0}
td{font-family:var(--en),var(--sans);letter-spacing:0;min-width:7em}
.examples{list-style:none;margin:0;padding:0;counter-reset:ex}
.examples li{position:relative;padding:12px 0 12px 34px;border-top:1px dashed var(--print-line);counter-increment:ex}
.examples li::before{content:counter(ex);position:absolute;left:0;top:14px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--print);color:var(--print);font:600 14px/21px var(--en);text-align:center}
.examples .en{margin:0;font-family:var(--en);font-size:19px;line-height:1.55;letter-spacing:0}
.examples .zh{margin:4px 0 0;color:var(--muted);font-size:15.5px}
.traps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.traps li{display:grid;gap:2px;padding:12px 14px;background:var(--stamp-soft);border-radius:var(--r-s);border-left:4px solid var(--stamp)}
.traps li>b{color:var(--stamp)!important}
.traps span{font-size:16px;overflow-wrap:anywhere}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:34px 0 8px}
.pager a{display:block;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-s);text-decoration:none;color:var(--ink);font-weight:700;min-height:44px;background:var(--surface)}
.pager a.nx{text-align:right}
.pager small{display:block;font-weight:400;color:var(--muted);font-size:13px}

/* ---------- Dock & buttons ---------- */
.dock{position:sticky;bottom:calc(var(--tab-h) + var(--safe-b) + 10px);z-index:5;margin-top:22px;display:flex}
.dock .btn{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;gap:0;min-height:48px;padding:10px 20px;border-radius:999px;border:2px solid var(--print);font:700 17px/1.3 var(--sans);letter-spacing:.06em;text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,color .15s ease,transform .12s ease,box-shadow .15s ease}
.btn.primary{background:var(--print);color:#fff;box-shadow:0 2px 0 var(--print-2),0 10px 20px -10px rgba(36,87,74,.6)}
.btn.primary:hover{background:var(--print-2)}
.btn.primary:active{transform:translateY(2px);box-shadow:0 0 0 var(--print-2)}
.btn.ghost{background:var(--surface);color:var(--print-2)}
.btn.ghost:hover{background:var(--print-soft)}
.btn.small{min-height:44px;padding:6px 16px;font-size:15px}
.btn.wide{width:100%}
.btn[hidden]{display:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.dock-sub{font-weight:400;font-size:13px;opacity:.88;letter-spacing:.02em}
.linkbtn{background:none;border:0;color:var(--print-2);font:500 15px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;padding:0 6px}

/* ---------- Pages ---------- */
.page{padding-top:16px}
.page-title{font-family:var(--serif);font-weight:900;font-size:clamp(30px,8vw,44px);margin:6px 0 6px;letter-spacing:.05em}
.page-sub{color:var(--muted);max-width:36em;margin:0 0 18px}
.mixform fieldset{border:0;padding:0;margin:0 0 22px}
.mixform legend{font-weight:700;font-size:16px;color:var(--print-2);margin-bottom:8px;display:flex;align-items:center;gap:8px;letter-spacing:.06em}
.seg{display:grid;grid-template-columns:repeat(5,1fr);border:1.5px solid var(--print);border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.seg label{position:relative}
.seg label+label{border-left:1px solid var(--print-line)}
.seg input,.chip input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:flex;align-items:center;justify-content:center;min-height:48px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.seg input:checked+span{background:var(--print);color:#fff}
.seg input:focus-visible+span,.chip input:focus-visible+span{outline:3px solid var(--stamp);outline-offset:-3px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 10px;border:1.5px solid var(--print-line);border-radius:999px;background:var(--surface);font-size:15px;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.chip span::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--print);flex:none;transition:background-color .15s ease,box-shadow .15s ease}
.chip input:checked+span{border-color:var(--print);background:var(--print-soft)}
.chip input:checked+span::before{background:var(--graphite);border-color:var(--graphite)}
.avail{color:var(--muted);font-size:15px;margin:0 0 12px}

.wrong-actions,.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.wlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.wlist li{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-m);padding:14px 14px 12px;position:relative}
.wl-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.wl-meta{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.wl-stem{font-family:var(--en);font-size:18px;line-height:1.6;letter-spacing:0;margin:8px 0}
.wl-ans{margin:6px 0 0}
.wl-ex{margin:4px 0 0;font-size:15.5px;color:var(--ink)}
details summary{cursor:pointer;color:var(--print-2);font-weight:700;min-height:44px;display:flex;align-items:center;font-size:15px}
.wlist .rm{margin-top:6px}
.tag{display:inline-block;font-size:13px;font-weight:700;color:var(--print-2);background:var(--print-soft);border-radius:4px;padding:1px 8px;letter-spacing:.06em}
.empty{text-align:center;padding:36px 12px;background:var(--surface);border:1.5px dashed var(--print-line);border-radius:var(--r-m)}
.empty p{margin:4px 0}
.muted{color:var(--muted)}
.empty .btn{margin-top:14px}
.empty-mark{display:inline-flex;gap:6px;margin-bottom:10px}
.empty-mark i{width:20px;height:20px;border-radius:50%;border:2px solid var(--print)}

/* ---------- Quiz ---------- */
body[data-view=quiz] .masthead{display:none}
.quiz{padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
.qbar{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;margin-bottom:14px}
.qback{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-size:18px}
.qtitle{display:block;font-size:13px;color:var(--muted);line-height:1.4;font-weight:500}
.track{height:10px;border:1.5px solid var(--print);border-radius:999px;overflow:hidden;background:var(--surface);margin-top:4px}
.track span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--p));background:repeating-linear-gradient(90deg,var(--print) 0 8px,var(--print-2) 8px 10px);transition:transform .3s ease}
.qscore{font-variant-numeric:tabular-nums;color:var(--muted);font-size:15px}
.qscore b{color:var(--ink);font-size:20px;font-family:var(--en)}
.card{position:relative;background:var(--surface);border:1.5px solid var(--print);border-radius:var(--r-m);box-shadow:var(--shadow);padding:16px 14px 16px;overflow:hidden}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.qno{margin:0;font-family:var(--en);font-weight:400;font-size:17px;color:var(--print);letter-spacing:.02em}
.qno b{font-weight:600;font-size:28px;font-variant-numeric:tabular-nums}
.stem{font-family:var(--en);font-size:clamp(19px,5.2vw,23px);line-height:1.6;letter-spacing:0;margin:4px 0 16px;overflow-wrap:break-word}
.blank{display:inline-block;min-width:4.5em;border-bottom:2px solid var(--ink);line-height:1.2;text-align:center;vertical-align:baseline}
.blank.filled{border-bottom-color:var(--print);min-width:0;padding:0 4px}
.blank .ink{display:inline-block;color:var(--print-2);font-weight:600}
.opts{display:grid;gap:8px}
.opt{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;width:100%;min-height:54px;padding:8px 12px 8px 10px;border:1.5px solid var(--print-line);border-radius:var(--r-s);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;font:inherit;
  transition:border-color .15s ease,background-color .15s ease,transform .1s ease}
.opt:hover:not(:disabled){border-color:var(--print);background:color-mix(in srgb,var(--print-soft) 45%,var(--surface))}
.opt:active:not(:disabled){transform:scale(.985)}
.opt:disabled{cursor:default;color:var(--ink)}
.bub{position:relative;width:34px;height:34px;border-radius:50%;border:2px solid var(--print);display:grid;place-items:center}
.lt{font:600 16px/1 var(--en);color:var(--print)}
.fill{position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a4f55,var(--graphite) 60%);transform:scale(0);opacity:0}
.opt.picked .fill{transform:scale(1);opacity:1}
.opt.picked .lt{color:#fff;position:relative;z-index:1}
.otext{font-family:var(--en);font-size:19px;letter-spacing:0;line-height:1.35;overflow-wrap:anywhere}
.omark{font-size:13px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.opt.is-right{border-color:var(--print);background:var(--print-soft)}
.opt.is-right .omark{color:var(--print-2)}
.opt.is-right:not(.picked) .bub{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--print)}
.opt.is-wrong{border-color:var(--stamp);background:var(--stamp-soft)}
.opt.is-wrong .omark{color:var(--stamp)}
.opt.is-wrong .bub{border-color:var(--stamp)}
.opts:has(.picked) .opt:not(.picked):not(.is-right){opacity:.62}
.stamp{position:absolute;right:12px;top:10px;padding:2px 12px;border:3px solid currentColor;border-radius:8px;font:900 22px/1.3 var(--serif);letter-spacing:.14em;transform:rotate(-8deg);opacity:0;pointer-events:none;mix-blend-mode:multiply}
.stamp.show{opacity:.9}
.stamp.ok{color:var(--print)}
.stamp.ng{color:var(--stamp)}
.explain{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.7,.2,1)}
.explain.open{grid-template-rows:1fr}
.explain-in{overflow:hidden}
.explain-body{margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--print-line);opacity:0;transform:translateY(-6px);transition:opacity .25s ease .08s,transform .25s ease .08s}
.explain.open .explain-body{opacity:1;transform:none}
.explain-body p{margin:6px 0}
.verdict{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-weight:700;font-size:18px}
.verdict.ok{color:var(--print-2)}
.verdict.ng{color:var(--stamp)}
.verdict span{color:var(--ink);font-weight:500;font-size:16px}
.verdict span b{font-family:var(--en);font-size:18px;letter-spacing:0}
.added{font-size:14px;color:var(--stamp);font-weight:500}
.added.ok{color:var(--print-2)}
.quiz-dock{margin-top:14px}
.kbd-hint{display:none;font-size:13px;color:var(--muted);text-align:center;margin:10px 0 0}
@media (hover:hover) and (pointer:fine){.kbd-hint{display:block}}

/* ---------- Result ---------- */
.score-sheet{position:relative;background:var(--surface);border:1.5px solid var(--print);border-radius:var(--r-m);box-shadow:var(--shadow);padding:24px 18px 18px;margin:10px 0 18px}
.score-big{font-family:var(--en);line-height:1;color:var(--ink)}
.score-big b{font-size:clamp(72px,22vw,120px);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.score-big span{font-size:28px;color:var(--muted)}
.score-pct{margin:8px 0 0;color:var(--muted)}
.score-stamp{position:absolute;right:18px;top:22px;border:4px solid currentColor;border-radius:10px;padding:4px 14px;font:900 clamp(24px,7vw,34px)/1.2 var(--serif);letter-spacing:.14em;transform:rotate(-9deg);mix-blend-mode:multiply;opacity:.92}
.score-stamp.ok{color:var(--print)}.score-stamp.mid{color:#8A5A12}.score-stamp.ng{color:var(--stamp)}

/* ---------- Tab bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(3,1fr);background:color-mix(in srgb,var(--surface) 94%,transparent);border-top:1.5px solid var(--print);padding:0 max(env(safe-area-inset-right,0px),6px) var(--safe-b) max(env(safe-area-inset-left,0px),6px);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px)}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tab-h);color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.04em;transition:color .15s ease}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.tabbar svg .fill{fill:currentColor}
.tabbar a[aria-current]{color:var(--print-2);font-weight:700}
.tabbar a[aria-current]::before{content:"";position:absolute;top:-1.5px;left:28%;right:28%;height:3px;background:var(--print);border-radius:0 0 3px 3px}
.tabbar a:hover{color:var(--ink)}
.badge{position:absolute;top:8px;left:calc(50% + 6px);min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--stamp);color:#fff;font:700 12px/20px var(--sans);font-style:normal;text-align:center;font-variant-numeric:tabular-nums}
.badge[hidden]{display:none}
@media (min-width:900px){.tabbar{padding-left:calc(50% - 300px);padding-right:calc(50% - 300px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}