/* nitlog.app のトップと 404。色はちずならべとそろえる */
:root {
  --bg: #eef1f4; --panel: #ffffff; --ink: #18212b; --muted: #5b6876; --line: #d6dde5; --accent: #1f4e8c;
  --font: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", Meiryo, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #10151b; --panel: #18202a; --ink: #e5eaf0; --muted: #9aa7b4; --line: #2b3643; --accent: #86afe8; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0 auto; max-width: 720px; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.7;
  padding: 48px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
}
h1 { font-size: 28px; font-weight: 900; letter-spacing: 0.04em; margin: 0; }
.lead { color: var(--muted); margin: 4px 0 32px; }
h2 { font-size: 13px; color: var(--muted); letter-spacing: 0.08em; margin: 0 0 10px; }
.tools { list-style: none; padding: 0; margin: 0 0 36px; display: grid; gap: 10px; }
.tool {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.tool:hover, .tool:focus-visible { border-color: var(--accent); }
.tool img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.tool b { display: block; font-size: 16px; }
.tool span { color: var(--muted); font-size: 13.5px; }
a { color: var(--accent); }
footer { color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 16px; }