:root { --bg: #f6f6f3; --card: #fff; --ink: #1c1c1a; --ink2: #56554f; --muted: #8b8a84; --line: #e2e1db;
  --navy: #16325c; --accent: #1f5fbf; --red: #c0392b; --green: #1f7a45; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #181817; --card: #222220; --ink: #f1f0ec; --ink2: #c3c2bc; --muted: #8e8d87; --line: #37362f;
    --navy: #0f213d; --accent: #6ea3f0; --red: #e0665a; --green: #4cb77a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", sans-serif; line-height: 1.8; font-size: 17px; }
a { color: var(--accent); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header.site { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 10; }
header.site .wrap:first-child { padding-top: 10px; padding-bottom: 6px; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.logo .mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--navy); font-weight: 700; font-size: 1.2rem; }
.logo b { display: block; font-size: 1.15rem; letter-spacing: .04em; line-height: 1.3; }
.logo small { display: block; font-size: .72rem; opacity: .8; line-height: 1.3; }
nav.cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
nav.cats::-webkit-scrollbar { display: none; }
nav.cats a { flex: none; color: #dbe4f3; text-decoration: none; font-size: .85rem; padding: 2px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); }
nav.cats a[aria-current] { background: #fff; color: var(--navy); font-weight: 700; }
main { padding-top: 16px; padding-bottom: 40px; }
.list-title { font-size: 1.2rem; margin: 8px 0 12px; }
.breaking { background: #fff1ef; border: 1px solid #f0c4bd; border-left: 6px solid var(--red); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; }
@media (prefers-color-scheme: dark) { .breaking { background: #3a1f1c; border-color: #6a2f28; } }
.breaking h2 { margin: 0; font-size: .9rem; color: var(--red); }
.breaking ul { margin: 4px 0 0; padding-left: 1.1em; }
.breaking time { color: var(--muted); font-size: .8rem; }
ol.news { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ol.news li a { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; text-decoration: none; color: var(--ink); }
ol.news li.urgent a { border-left: 5px solid var(--red); }
ol.news .title { display: block; font-size: 1.05rem; line-height: 1.5; margin: 4px 0; }
ol.news .lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink2); font-size: .9rem; line-height: 1.6; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); }
.cat { display: inline-block; font-size: .75rem; font-weight: 700; padding: 0 8px; border-radius: 6px; background: #e8edf5; color: var(--navy); text-decoration: none; }
.cat-fire, .cat-crime, .cat-accident, .cat-disaster, .cat-suspicious_person { background: #fde6e2; color: #8e2a1c; }
.cat-weather, .cat-animal, .cat-road, .cat-railway, .cat-traffic { background: #fdf0d8; color: #7a5410; }
.cat-event, .cat-store_open, .cat-community { background: #e3f3e8; color: #1e6b3c; }
.story { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 8px; }
.story h1 { font-size: 1.45rem; line-height: 1.45; margin: 6px 0 14px; }
.story h2 { font-size: 1.05rem; margin: 18px 0 6px; }
.note, .small { color: var(--ink2); font-size: .85rem; }
.help { background: #eef6ff; border-radius: 12px; padding: 12px 14px; font-size: .92rem; margin: 14px 0; }
@media (prefers-color-scheme: dark) { .help { background: #1c2b40; } }
.help b { display: block; }
.sources { border-top: 1px solid var(--line); margin-top: 16px; }
.sources ul { padding-left: 1.2em; margin: 4px 0; font-size: .92rem; }
.check { font-size: .88rem; font-weight: 700; color: #9a6a0a; }
.check.ok { color: var(--green); }
.empty { background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 24px; text-align: center; color: var(--ink2); }
footer.site { border-top: 1px solid var(--line); color: var(--ink2); font-size: .82rem; padding: 16px 0 28px; }
form.fb { display: grid; gap: 10px; margin: 8px 0 16px; }
form.fb label { display: grid; gap: 2px; font-size: .88rem; color: var(--ink2); }
form.fb textarea, form.fb input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
form.fb textarea { min-height: 7em; }
form.fb button { font: inherit; font-weight: 700; padding: 10px; border-radius: 12px; border: 0; background: var(--navy); color: #fff; }
.hp { position: absolute; left: -9999px; }