:root {
  --bg: #f4f1ea;
  --paper: #fffdf8;
  --ink: #1c1916;
  --muted: #6b645c;
  --line: #ddd6cb;
  --taxi: #c45c26;
  --ferry: #1d6b8a;
  --walk: #2f6b4f;
  --warn: #8a4b12;
  --danger: #8a2d2d;
  --ok: #2f6b4f;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  line-height: 1.55;
}
a { color: var(--ferry); }
.wrap { max-width: 920px; margin: 0 auto; padding: 28px 20px 64px; }
.topnav {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin-bottom: 22px; font-size: 14px;
}
.topnav a { text-decoration: none; border-bottom: 1px solid transparent; }
.topnav a:hover, .topnav a.on { border-bottom-color: var(--ink); color: var(--ink); }
h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.02em; }
h2 { font-size: 20px; margin: 28px 0 10px; }
h3 { font-size: 16px; margin: 20px 0 8px; }
.sub { color: var(--muted); margin: 0 0 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 18px 0; }
.card, .callout, .stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.card { padding: 16px 16px 14px; text-decoration: none; color: inherit; display: block; }
.card:hover { border-color: #c9c0b3; }
.card b { display: block; font-size: 17px; margin-bottom: 4px; }
.card span { color: var(--muted); font-size: 13px; }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.stat { padding: 10px 14px; min-width: 140px; }
.stat strong { display: block; font-size: 18px; }
.stat em { font-style: normal; color: var(--muted); font-size: 12px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.tab {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--ink);
}
.tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.callout { padding: 12px 14px; margin: 14px 0; font-size: 14px; }
.callout.info { border-left: 4px solid var(--ferry); }
.callout.warn { border-left: 4px solid var(--taxi); }
.callout.ok { border-left: 4px solid var(--walk); }
.callout.bad { border-left: 4px solid var(--danger); }
.callout b { display: block; margin-bottom: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--paper); }
th, td { border: 1px solid var(--line); padding: 8px 9px; text-align: left; vertical-align: top; }
th { background: #efe8dc; position: sticky; top: 0; }
tr:nth-child(even) td { background: #faf7f1; }
.note { color: var(--muted); font-size: 13px; margin-top: 18px; }
.addr {
  background: #efe8dc; padding: 12px 14px; border-radius: 10px;
  font-size: 14px;
}
.addr div { margin: 4px 0; }
.panel { display: none; }
.panel.on { display: block; }
.home-hero { margin-bottom: 8px; }
.copy-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 12px; }
.copy-btn {
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 14px;
}
.copy-btn:hover { opacity: 0.9; }
.copy-status { color: var(--ok); font-size: 13px; }
.prompt-box {
  width: 100%; min-height: 280px;
  background: #1c1916; color: #f4f1ea;
  border: 1px solid #3a342e; border-radius: 12px;
  padding: 14px 16px; font-size: 13.5px; line-height: 1.55;
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  resize: vertical;
}
@media (max-width: 640px) {
  h1 { font-size: 24px; }
  th, td { font-size: 12.5px; }
}