/* 尺度對齊 aimii-prereq-deck。那份是投影片,用 .slide{width:1280px;
   transform:scale(--s)} 把整張連字帶框一起縮放——所以原始碼裡的 17px
   內文,在 2000px 螢幕上實際看到的是 17×1.5625 ≈ 26px。

   靜態網頁不能照抄那個 transform(會壓壞捲動與選字),改用浮動根字級:
   全站尺寸都是 rem,根字級隨視窗在 16px↔25px 之間移動,得到同一個
   等比放大。1280px 視窗 = 原設計尺寸;2000px 視窗 = 全部 ×1.5625。

   斷點條件維持 px——那是比對視窗寬度,用 rem 會跟著根字級浮動,
   斷點自己就跑掉了。 */
:root { --canvas:#fbfdfd; --surface:#fff; --ink:#262b35; --muted:#69717d;
  --line:#e8eef0; --teal:#58c5bd; --teal-strong:#31aaa1; --teal-soft:#eafafa;
  --coral:#f27f87; --sand:#d7ad79; --sand-soft:#fff7ed; --sky-soft:#eef8ff;
  --radius:22px; --shadow:0 12px 30px rgba(49,79,90,.08);
  --content-max:min(1800px,94vw); --gutter:2.125rem; --measure:66ch;
  /* 字級沿用參考頁的級距:內文 17、輔助 14.5、註記 13 */
  --fs-body:1.0625rem; --fs-lead:1.15rem; --fs-small:0.90625rem; --fs-micro:0.8125rem; }
*{box-sizing:border-box}
/* 這一行是整站尺度的來源。改它等於改全站。 */
html{font-size:clamp(16px,1.25vw,25px)}
body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  font-size:var(--fs-body);line-height:1.8;-webkit-text-size-adjust:100%}
a{color:var(--teal-strong);text-underline-offset:3px}
.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter) 4.5rem}
.small{font-size:var(--fs-small)}
header.top{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:1.625rem 0 1.125rem;flex-wrap:wrap}
.brand{font-family:"Noto Serif TC","Songti TC",serif;font-size:1.3125rem;font-weight:900;
  text-decoration:none;color:inherit}
.brand span{margin-left:0.625rem;color:#9aa3ad;font-size:0.8125rem;font-weight:400}
.top .note{color:#9aa3ad;font-size:var(--fs-micro)}
.hero{display:grid;grid-template-columns:11.25rem minmax(0,1fr);gap:2rem;align-items:center;
  padding:2.125rem 2.375rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow)}
.hero .big{display:flex;align-items:center;justify-content:center;height:10.25rem;
  border-radius:20px;background:linear-gradient(150deg,#f4fcfb,#fff7ed);
  font-family:"Noto Serif TC","Songti TC",serif;font-size:6.5rem;line-height:1}
.hero h1{margin:0 0 0.75rem;font-family:"Noto Serif TC","Songti TC",serif;
  font-size:clamp(1.5rem,2.2vw,2rem);font-weight:900;line-height:1.4;text-wrap:balance}
.hero p{margin:0;max-width:var(--measure);color:var(--muted);font-size:var(--fs-lead);line-height:1.9}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;
  padding:2.125rem 0.125rem 0.875rem}
.sec b{font-size:1rem} .sec span{color:#9aa3ad;font-size:var(--fs-micro)}
.card{border:1px solid var(--line);border-radius:18px;background:var(--surface);
  padding:1.125rem 1.375rem;margin-bottom:0.625rem;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:1.125rem;align-items:center}
.card .line{font-family:"Noto Serif TC","Songti TC",serif;font-size:1.3125rem;line-height:1.9}
.card .meta{color:var(--muted);font-size:0.84375rem;white-space:nowrap}
.hit{background:var(--teal-soft);color:#26938c;border-radius:4px;padding:0 0.1875rem;font-weight:700}
.pill{display:inline-block;padding:0.125rem 0.625rem;border-radius:999px;font-size:0.75rem;
  font-weight:900;background:#f4f6f7;color:#9aa3ad;margin-left:0.5rem}
.pill.j{background:var(--teal-soft);color:var(--teal-strong)}
.chips{display:flex;flex-wrap:wrap;gap:0.5625rem}
.chip{display:inline-flex;align-items:center;gap:0.375rem;padding:0.4375rem 0.875rem;
  border:1px solid #eef2f3;border-radius:999px;background:var(--surface);
  font-family:"Noto Serif TC","Songti TC",serif;font-size:1rem;text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--teal)}
.chip small{font-family:inherit;color:#b7c3c6;font-size:0.75rem}
.grp{border-radius:20px;overflow:hidden;margin-bottom:0.875rem;border:1px solid var(--line)}
.grp>h2{margin:0;padding:1rem 1.5rem;font-size:0.875rem;font-weight:900}
.grp .body{padding:1.25rem 1.5rem;background:var(--surface)}
.grp.derived{border-color:#bfe6e2} .grp.derived>h2{background:var(--teal-soft);color:#26938c}
.grp.precursor{border-color:#f0e3cc} .grp.precursor>h2{background:#fdf0dd;color:#a87a3c}
.grp.candidate>h2{background:var(--sky-soft);color:#4a90b9}
.grp.quotes>h2{background:#f4f6f7;color:var(--muted)}
.grp .full{margin:0.625rem 0 0;max-width:var(--measure);
  font-family:"Noto Serif TC","Songti TC",serif;font-size:1.0625rem;line-height:2.1;color:#4c5560}
.foot{display:flex;align-items:center;justify-content:space-between;gap:1.125rem;
  margin-top:1.625rem;padding:1.125rem 1.5rem;border:1px solid var(--line);
  border-radius:18px;background:var(--surface);font-size:0.84375rem;color:var(--muted)}
.idx{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.625rem,1fr));gap:0.5625rem}
@media(max-width:1024px){
  :root{--gutter:1.625rem;--fs-body:1rem}
  .hero{grid-template-columns:9.375rem minmax(0,1fr);gap:1.5rem;padding:1.75rem 1.875rem}
  .hero .big{height:8.75rem;font-size:5.25rem}
}
@media(max-width:768px){
  :root{--gutter:1.25rem}
  .hero{grid-template-columns:1fr;gap:1.125rem}
  .hero .big{height:7.375rem;font-size:4.375rem}
  .card{grid-template-columns:1fr;gap:0.5rem}
  .card .meta{white-space:normal}
  .foot{flex-direction:column;align-items:flex-start;gap:0.5rem}
}
@media(max-width:480px){
  :root{--gutter:1rem;--fs-body:0.96875rem}
  .idx{grid-template-columns:repeat(auto-fill,minmax(3.625rem,1fr));gap:0.4375rem}
  .card .line{font-size:1.1875rem}
}
/* 查詢框:四個索引頁共用 */
.findbar{position:sticky;top:0;z-index:5;margin:1.5rem 0 0.75rem;
  padding:0.875rem 0;background:linear-gradient(var(--canvas) 76%,rgba(251,253,253,0))}
.findbar form{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;
  padding:0.75rem 1.125rem;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);box-shadow:var(--shadow)}
.findbar svg{flex:none;width:1.25rem;height:1.25rem;stroke:var(--teal-strong);
  stroke-width:2;fill:none;stroke-linecap:round}
.findbar input{flex:1 1 12rem;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:var(--fs-lead);color:var(--ink);padding:0.25rem 0}
.findbar input::placeholder{color:#b7c3c6}
.findbar input:focus-visible{outline:0}
.findbar form:focus-within{border-color:var(--teal);
  box-shadow:0 0 0 0.1875rem rgba(88,197,189,.18),var(--shadow)}
.findbar .count{flex:none;color:var(--muted);font-size:var(--fs-small);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.findbar .clear{flex:none;border:0;background:#eef2f3;color:var(--muted);
  border-radius:999px;padding:0.25rem 0.75rem;font:inherit;
  font-size:var(--fs-micro);cursor:pointer}
.findbar .clear:hover{background:#e3ebec;color:var(--ink)}
.findbar .clear[hidden]{display:none}
.findempty{margin:1.5rem 0;padding:1.5rem 1.75rem;border:1px dashed var(--line);
  border-radius:var(--radius);color:var(--muted);font-size:var(--fs-body)}
.findempty b{color:var(--ink)}
[hidden]{display:none!important}
@media(max-width:768px){
  .findbar{margin-top:1rem}
  .findbar .count{flex:1 0 100%;order:3}
}

/* 官網導覽列。全部以 bb- 前綴,與站內樣式零交集。

   **這一條刻意用固定 px,不跟著 rem 縮放。** 站內的字級與間距都是浮動的
   (根字級隨視窗在 16↔25px 之間移動),但頁首是與官網共用的外框——同一個
   視窗下兩邊高度不一樣,切換過去就會跳動。外框固定,內容才浮動。 */
.bb-bar{position:relative;z-index:40;background:#fff;border-bottom:1px solid #e8eef0;
  font-size:15px;line-height:1.5}
.bb-in{max-width:1800px;margin:0 auto;padding:0 clamp(16px,2.6vw,52px);
  display:flex;align-items:center;gap:18px;min-height:76px}
.bb-logo{flex:none;display:flex;align-items:center}
.bb-logo img{height:36px;width:auto;display:block}
.bb-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;justify-content:center}
.bb-item{position:relative}
.bb-link{display:inline-flex;align-items:center;gap:4px;padding:9px 12px;
  border:0;background:transparent;font:inherit;font-weight:700;
  color:#2f3a41;text-decoration:none;border-radius:10px;cursor:pointer;white-space:nowrap}
.bb-link:hover{background:#f2f7f8;color:#31aaa1}
.bb-caret{font-size:11px;opacity:.55}
.bb-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:222px;
  padding:8px;border:1px solid #e8eef0;border-radius:14px;background:#fff;
  box-shadow:0 18px 45px rgba(49,79,90,.14);display:none;flex-direction:column;gap:2px}
.bb-item.open .bb-menu{display:flex}
.bb-menu a{padding:8px 12px;border-radius:9px;font-size:14px;
  color:#2f3a41;text-decoration:none;white-space:nowrap}
.bb-menu a:hover{background:#f2f7f8;color:#31aaa1}
.bb-cta{flex:none;display:flex;align-items:center;gap:10px}
.bb-cta a{padding:9px 16px;border-radius:999px;font-size:14px;
  font-weight:700;text-decoration:none;white-space:nowrap}
.bb-login{color:#2f3a41;border:1px solid #dfe8eb}
.bb-login:hover{border-color:#58c5bd;color:#31aaa1}
.bb-try{background:#31aaa1;color:#fff}
.bb-try:hover{background:#178f8a}
@media(max-width:1100px){
  .bb-nav{display:none}
  .bb-in{min-height:60px}
  .bb-logo img{height:30px}
}
@media(max-width:480px){
  .bb-login{display:none}
}