:root{
  --ink:#111;--mid:#555;--soft:#8a8a8a;--faint:#b6b6b2;--line:#dcdcdc;
  --bg:#fff;--panel:#f5f5f4;--red:#E23D22;--link:#C42E14;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#ececea;--mid:#a9a9a5;--soft:#77776f;--faint:#4a4a46;--line:#2c2c2a;
        --bg:#0d0d0c;--panel:#161615;--link:#F0603F}
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:Archivo,"Noto Sans TC",-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--link) 30%,transparent)}
a:hover{border-bottom-color:var(--link)}
html.only-en .zh,html.only-zh .en2{display:none}

/* 左側直排標記:不是 logo 左 + 選單右的那套公式 */
.rail{position:fixed;left:0;top:0;bottom:0;width:58px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding:22px 0;z-index:5;background:var(--bg)}
.rail .vert{writing-mode:vertical-rl;font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--soft);white-space:nowrap}
.rail .tick{width:9px;height:9px;background:var(--red)}
.rail .ver{writing-mode:vertical-rl;font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.1em}
@media (max-width:760px){.rail{display:none}}

.page{margin-left:58px;padding:34px 30px 90px;max-width:1180px}
@media (max-width:760px){.page{margin-left:0;padding:22px 18px 70px}}

.bar{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  border-bottom:1px solid var(--line);padding-bottom:9px}
.kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.kick b{color:var(--red);font-weight:600}
.lang{font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:default}
.lang button{background:none;border:none;padding:0 0 2px;font:inherit;letter-spacing:inherit;
  color:var(--soft);cursor:pointer}
.lang button.on{color:var(--ink);border-bottom:2px solid var(--red)}

/* 主體:非對稱兩欄,右欄是規格說明,不是插圖 */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:56px;margin-top:44px}
@media (max-width:940px){.grid{grid-template-columns:1fr;gap:36px}}

h1{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(30px,5.4vw,58px)}
h1 .q{color:var(--red)}
.lede{margin:18px 0 0;font-size:16px;color:var(--mid);max-width:46em}

/* 輸入框本身就是 hero:一條打字用的線 */
form{margin:40px 0 0}
.field{display:flex;align-items:baseline;gap:0;border-bottom:2px solid var(--ink);padding-bottom:8px}
.field .scheme{font-family:var(--mono);font-size:clamp(15px,2.4vw,22px);color:var(--faint);
  padding-right:8px;user-select:none}
.field input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);
  font-family:var(--mono);font-size:clamp(18px,3.6vw,34px);letter-spacing:-.02em;padding:0}
.field input::placeholder{color:var(--faint)}
.field button{background:none;border:none;color:var(--red);font:inherit;font-weight:600;
  font-size:clamp(13px,1.6vw,16px);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  padding:0 0 0 14px;white-space:nowrap}
.field button:disabled{color:var(--faint);cursor:default}
.hint{margin:10px 0 0;font-size:12px;color:var(--soft);min-height:1.4em}
.hint.err{color:var(--red)}
.samples{margin:16px 0 0;font-size:12px;color:var(--soft);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline}
.samples button{background:none;border:none;padding:0;font-family:var(--mono);font-size:12.5px;
  color:var(--link);border-bottom:1px solid color-mix(in srgb,var(--link) 30%,transparent);cursor:pointer}

/* 進度帳本:逐項亮起,不是轉圈圈 */
.ledger{margin:46px 0 0;border-top:1px solid var(--line)}
.ledger.idle{opacity:.42}
.st{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line)}
.st .g{font-family:var(--mono);font-size:13px;color:var(--faint)}
.st .n{font-size:14px}
.st .t{font-family:var(--mono);font-size:11px;color:var(--faint)}
.st.running .g{color:var(--red)}
.st.running .n{color:var(--ink)}
.st.done .g{color:var(--ink)}
.st.error .g,.st.error .t{color:var(--red)}

/* 結果摘要 */
.out{margin:34px 0 0;display:none}
.out.on{display:block}
.tally{display:flex;gap:30px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tally div{font-size:11px;color:var(--soft);letter-spacing:.06em;text-transform:uppercase}
.tally b{display:block;font-size:30px;color:var(--ink);font-weight:600;line-height:1.25}
.tally .w b{color:var(--red)}
.flags{margin:20px 0 0;padding:0;list-style:none;font-size:13.5px}
.flags li{padding:7px 0;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:24px 1fr;gap:8px}
.flags li span{color:var(--mid)}
.open{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:baseline}
.open a.go{font-size:17px;font-weight:600;border-bottom:2px solid var(--red);padding-bottom:2px}
.open .url{font-family:var(--mono);font-size:11.5px;color:var(--soft);word-break:break-all}

/* 右欄規格 */
.spec h2{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);
  margin:0 0 10px;font-weight:600;border-top:1px solid var(--line);padding-top:12px}
.spec h2:not(:first-child){margin-top:30px}
.spec ul{margin:0;padding:0;list-style:none;font-size:12.5px;color:var(--mid);line-height:1.72}
.spec li{padding-left:14px;position:relative}
.spec li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--faint)}
.spec li.no::before{background:var(--red)}
.foot{margin:66px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:11px;color:var(--soft);line-height:1.9;max-width:60em}