:root { --ink:#202536; --muted:#667085; --line:#e7e9ee; --green:#a8b686; }
    * { box-sizing:border-box; }
    body { margin:0; color:var(--ink); background:#fff; font:17px/1.8 system-ui,-apple-system,"Noto Sans TC","Microsoft JhengHei",sans-serif; }
    main { max-width:1000px; margin:0 auto; padding:48px 22px 72px; }
    h1 { margin:0 0 12px; font-size:clamp(2rem,5vw,3rem); line-height:1.3; }
    .intro { margin:0 0 28px; color:var(--muted); }
    .post-list { margin:0; padding-left:1.5em; }
    .post-list li { padding:10px 0; border-bottom:1px solid var(--line); }
    .post-list a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--green); text-underline-offset:4px; }
    .post-list a:hover { color:#65764a; }
    time { margin-left:9px; color:var(--muted); font-size:.9em; }
    .empty { padding:18px; background:#f7f8f5; color:var(--muted); }
    .page-actions { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 26px; }
    .page-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 18px; border:1px solid #a8b686; border-radius:4px; background:#a8b686; color:#202536; font-size:15px; font-weight:700; text-decoration:none; transition:filter .15s ease,transform .15s ease; }
    .page-button:hover { filter:brightness(.96); transform:translateY(-1px); }
    .page-button:focus-visible { outline:3px solid rgba(61,112,183,.35); outline-offset:2px; }
    @media(max-width:560px) { .page-actions { gap:8px; } .page-button { min-height:42px; padding:8px 12px; font-size:14px; } }