:root { color-scheme: light dark; --bg:#f5f3ec; --card:#fffef9; --ink:#273c35; --muted:#626c64; --line:#d7ddd1; --accent:#306447; --soft:#e8eee0; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 system-ui,sans-serif; }
main { max-width:760px; margin:auto; padding:56px 24px 32px; }
header { margin-bottom:28px; }
.eyebrow { font-size:.7rem; font-weight:750; letter-spacing:.17em; }
h1 { font-size:clamp(2.6rem,8vw,4rem); letter-spacing:-.06em; line-height:1.1; margin:12px 0; }
h1 span { color:var(--accent); }
h2 { font-size:1.1rem; margin:0 0 20px; }
p { margin:10px 0; }
header p, .small, footer { color:var(--muted); }
.notice { background:var(--soft); padding:14px 18px; border-radius:12px; font-size:.85rem; margin-bottom:24px; }
.card { border:1px solid var(--line); background:var(--card); border-radius:20px; padding:26px; }
button { font:inherit; font-size:.85rem; font-weight:650; border:1px solid transparent; border-radius:9px; padding:11px 16px; cursor:pointer; background:var(--accent); color:#fff; min-height:44px; }
button.secondary { background:transparent; color:var(--ink); border-color:var(--line); }
button:hover { filter:brightness(.9); }
:focus-visible { outline:3px solid #d27b1f; outline-offset:3px; }
.small, footer { font-size:.8rem; }
footer { margin-top:36px; border-top:1px solid var(--line); padding-top:18px; }
[hidden] { display:none !important; }
@media (prefers-color-scheme:dark) { :root { --bg:#18241f; --card:#202e27; --ink:#ecf0e7; --muted:#b3bfb3; --line:#425448; --accent:#367951; --soft:#293d2f; } }
@media (max-width:480px) { main { padding:32px 18px; } .card { padding:20px; } }
a { color:inherit; text-underline-offset:4px; }
.site-nav { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:32px; font-size:.85rem; }
.site-nav a { display:inline-flex; align-items:center; min-height:44px; }
.tool-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:18px; list-style:none; padding:0; margin:28px 0; }
.tool-link { display:block; height:100%; text-decoration:none; }
.tool-link:hover { border-color:var(--accent); }
.tool-link h2 { margin-bottom:8px; font-size:1.35rem; }
.tool-link p { color:var(--muted); }
.tool-link .open-tool { display:block; margin-top:24px; font-weight:650; text-decoration:underline; text-underline-offset:4px; }