:root {
  color-scheme: light;
  --ink: #202632;
  --muted: #626b7a;
  --accent: #284fc5;
  --line: #e5e8ef;
  --hover: #f5f7fc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: #a0a8b5 #fff;
}

* { box-sizing: border-box; }
body { margin: 0; }
::selection { color: var(--ink); background: #dbe4ff; }
.page { width: min(100% - 48px, 600px); margin: max(80px, env(safe-area-inset-top)) auto 40px; }
h1 { margin: 0 0 32px; font-size: 28px; font-weight: 600; line-height: 1.4; }
.destinations { margin: 0; padding: 0; list-style: none; }
.destinations li + li { border-top: 1px solid var(--line); }
.destination { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 100px; padding: 24px 16px; color: inherit; text-decoration: none; border-radius: 8px; }
.destination-info { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.destination-name { font-size: 18px; font-weight: 500; line-height: 1.5; }
.address { color: var(--muted); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.destination svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.destination:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; background: var(--hover); }
.destination:active { background: var(--hover); }
@media (hover: hover) {
  .destination:hover { background: var(--hover); }
  .destination:hover .destination-name { color: var(--accent); }
}
@media (max-width: 640px) {
  .page { margin-top: max(48px, env(safe-area-inset-top)); }
  h1 { margin-bottom: 24px; font-size: 26px; }
  .destination { padding-inline: 8px; }
  .address { font-size: 13px; }
}