:root { color-scheme: light dark; font: 17px/1.7 system-ui, sans-serif; color: #173344; background: #f3f7fa; }
* { box-sizing: border-box; }
.public-city { max-width: 1120px; margin: 0 auto; padding: clamp(16px, 4vw, 40px); }
header { background: linear-gradient(130deg, #dceff3, #fff); padding: clamp(20px,4vw,40px); border-radius: 24px; margin-bottom: 24px; }
h1 { font-size: clamp(28px,4vw,44px); line-height: 1.3; margin: 18px 0; }
h2 { font-size: 24px; margin: 0 0 16px; }
header p { max-width: 75ch; }
.city-brand { display:inline-flex; align-items:center; gap:14px; font-weight:700; text-decoration:none; }
.city-brand img { object-fit:contain; }
a { color: #075f72; text-underline-offset: 4px; }
nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
nav a { background: #fff; padding: 8px 18px; border: 1px solid #bad6df; border-radius: 10px; text-decoration: none; }
section { background: #fff; padding: 24px; border: 1px solid #dae6ed; border-radius: 18px; margin: 18px 0; }
dl { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px 24px; margin: 0; }
dt { color: #4c6575; }
dd { margin: 0; font-weight: 650; }
time { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.station-track { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; padding-inline-start:22px; }
.station-track li { padding:12px; border:1px solid #a5bdc9; border-radius:10px; }
.station-track span { display:block; font-size:14px; }
.station-track .moon-active { outline:2px solid #16879b; }
.station-track .sun-active { box-shadow:inset 0 3px #c68d28; }
a:focus-visible { outline: 3px solid #16879b; outline-offset: 4px; }
@media(prefers-color-scheme:dark) { :root { background:#10222d; color:#e3edf3; } header { background:linear-gradient(130deg,#17404d,#18313e); } section,nav a { background:#18313e; border-color:#345465; } a { color:#82d5e6; } dt { color:#bfd3e0; } }