:root{--bg:#f6f4ef;--fg:#2b2b2b;--sub:#6b6b6b;--accent:#4f7c82;--soft:#dbe7e8;--card:#ffffff;--line:#e2ded5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#15191a;--fg:#e8e6e1;--sub:#a3a3a0;--accent:#8fb9be;--soft:#24363a;--card:#1d2324;--line:#2e3638}}
:root[data-theme="dark"]{--bg:#15191a;--fg:#e8e6e1;--sub:#a3a3a0;--accent:#8fb9be;--soft:#24363a;--card:#1d2324;--line:#2e3638}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Hiragino Sans","Yu Gothic UI","Noto Sans JP",sans-serif;line-height:1.8}
a{color:var(--accent)}
header,main,footer{max-width:760px;margin:0 auto;padding:0 16px}
header{display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:8px;flex-wrap:wrap;gap:8px}
header .logo{font-weight:700;text-decoration:none;color:var(--fg)}
nav a{margin-left:14px;font-size:.95rem}
h1{font-size:1.6rem;line-height:1.4}
h2{font-size:1.25rem;margin-top:2.2em;border-left:4px solid var(--accent);padding-left:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:16px 0}
.note{font-size:.9rem;color:var(--sub)}
.warn{border-left:4px solid #c08a3e}
footer{padding:32px 16px;font-size:.85rem;color:var(--sub)}
button{font:inherit;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:999px;padding:8px 22px;cursor:pointer}
button.ghost{background:transparent;color:var(--accent)}
.modes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.modes button{background:transparent;color:var(--accent)}
.modes button[aria-pressed="true"]{background:var(--accent);color:#fff}
.theme{margin-left:10px;background:transparent;border:1px solid var(--line);color:var(--fg);border-radius:999px;padding:3px 8px;line-height:0;cursor:pointer}
.theme svg{width:18px;height:18px}