*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{--bg:#faf8f4;--card:#fff;--gold:#c8a44d;--gold-d:#a8842d;--sage:#8a9a6b;--sage-d:#6d7d50;
  --text:#2a2a2a;--sub:#666;--border:#e0dbd0;--shadow:0 2px 10px rgba(0,0,0,.06);}
body{font-family:'Helvetica Neue','PingFang TC','Microsoft JhengHei',sans-serif;background:var(--bg);
  color:var(--text);font-size:18px;line-height:1.75;}
.nav{position:sticky;top:0;z-index:50;background:var(--text);display:flex;justify-content:center;gap:6px;
  padding:10px 14px;flex-wrap:wrap;}
.nav a{color:#c8c0b0;text-decoration:none;font-size:15px;font-weight:700;padding:7px 16px;border-radius:18px;transition:.15s;}
.nav a:hover{color:#faf8f4;background:rgba(255,255,255,.08);}
.nav a.on{background:var(--gold);color:#2a2a2a;}
.demo-bar{background:#f6efdd;color:var(--gold-d);text-align:center;font-size:14px;padding:8px 16px;
  border-bottom:1px solid var(--border);}
.hero{background:var(--text);color:#faf8f4;padding:38px 24px 30px;text-align:center;}
.hero .ey{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.hero h1{font-size:clamp(22px,4vw,32px);font-weight:700;color:#faf8f4;}
.hero h1 span{color:var(--gold);}
.hero p{font-size:15px;color:#c8c0b0;max-width:680px;margin:8px auto 0;}
.wrap{max-width:860px;margin:0 auto;padding:26px 20px 50px;display:flex;flex-direction:column;gap:18px;}
.blk{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px 26px;box-shadow:var(--shadow);}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.sec-no{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;
  font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;align-self:center;}
.sec-title{font-size:20px;font-weight:700;}
.blk p{margin-bottom:10px;}
.blk p:last-child{margin-bottom:0;}
.quote{margin:12px 0;padding:12px 18px;border-left:4px solid var(--gold);background:#fffdf8;
  border-radius:0 10px 10px 0;font-size:16px;color:var(--sub);}
.plist{list-style:none;display:flex;flex-direction:column;gap:10px;margin:6px 0;}
.plist li{padding:11px 15px;background:#fbfcf7;border:1px solid #dfe5d4;border-left:4px solid var(--sage);
  border-radius:10px;font-size:16px;}
.plist li b{color:var(--sage-d);}
.glist{list-style:none;display:flex;flex-direction:column;gap:10px;margin:6px 0;}
.glist li{padding:11px 15px;background:#fffdf8;border:1px solid var(--gold);border-left:4px solid var(--gold);
  border-radius:10px;font-size:16px;}
.glist li b{color:var(--gold-d);}
.result{border:2px solid var(--gold);background:#fffdf8;border-radius:12px;padding:16px 20px;font-size:17px;}
.result b{color:var(--gold-d);}
.note{font-size:14px;color:var(--sub);}
.next{display:block;text-align:center;background:var(--gold);color:#fff;font-weight:700;font-size:16px;
  text-decoration:none;padding:13px;border-radius:12px;transition:.16s;}
.next:hover{background:var(--gold-d);}
footer{text-align:center;font-size:13px;color:#bbb;padding:18px;border-top:1px solid var(--border);}
table.cmp{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0;}
table.cmp th{background:#f6efdd;color:var(--gold-d);text-align:left;padding:8px 10px;border-bottom:2px solid var(--gold);}
table.cmp td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
.tbl-x{overflow-x:auto;}
@media(max-width:600px){body{font-size:17px;}.blk{padding:18px 16px;}}