:root{--bg:#f8f7f3;--card:#fff;--ink:#1f2933;--muted:#5f6b76;--rule:#e2e0d8;--teal:#0f766e;--teal-soft:#e6f2f0;--red:#b91c1c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 system-ui,-apple-system,"PingFang TC","Noto Sans TC",sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
header{padding:20px 0;border-bottom:1px solid var(--rule)}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--ink)}.logo span{color:var(--teal)}.logo small{font-weight:600;color:var(--muted);font-size:.8rem;margin-left:4px}
nav a{color:var(--muted);text-decoration:none;font-size:.92rem}
main{padding:34px 0 20px}
h1{font-size:clamp(1.5rem,4vw,2rem);line-height:1.3;margin:0 0 8px}h1 small{font-size:.55em;color:var(--muted);font-weight:600;margin-left:6px}
.lead{color:var(--muted);margin:0 0 22px}.lead b{color:var(--ink)}
.muted{color:var(--muted)}
a{color:var(--teal)}
footer{border-top:1px solid var(--rule);padding:24px 0 40px;color:var(--muted);font-size:.86rem;margin-top:30px}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tool{display:block;background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:18px;text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.tool h2{font-size:1.1rem;margin:6px 0 4px}.tool p{margin:0;color:var(--muted);font-size:.92rem}
.tool .tag{font-size:.74rem;font-weight:700;color:var(--teal);border:1px solid var(--teal);border-radius:99px;padding:1px 9px}
@media (hover:hover){.tool:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08);border-color:var(--teal)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
nav a+a{margin-left:16px}
.lang-switch{font-weight:700;color:var(--teal)!important;border:1px solid var(--teal);border-radius:999px;padding:2px 10px}