:root { color-scheme: light; --ink:#18201d; --muted:#66706b; --line:#d8dedb; --bg:#f5f7f6; --panel:#fff; --accent:#176b52; --accent-soft:#e4f0ec; --bike:#2563a6; --scooter:#b86b22; }
* { box-sizing:border-box; }
html { font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
body { margin:0; font-size:16px; line-height:1.5; }
header, main, footer { width:min(1120px,calc(100% - 32px)); margin-inline:auto; }
header { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; padding:32px 0 22px; border-bottom:1px solid var(--line); }
h1 { font-size:clamp(1.55rem,4vw,2.1rem); line-height:1.15; margin:0 0 5px; letter-spacing:-.025em; }
h2 { font-size:1rem; margin:0; }
p { margin:0; }
.subtitle,.freshness,.detail,.panel-heading p,footer { color:var(--muted); }
.freshness { font-size:.875rem; text-align:right; }
main { padding:24px 0 40px; }
.controls { display:flex; flex-wrap:wrap; gap:24px 40px; margin-bottom:24px; }
fieldset { border:0; padding:0; margin:0; }
legend { font-weight:650; font-size:.875rem; margin-bottom:7px; }
.button-group { display:flex; flex-wrap:wrap; gap:6px; }
button { appearance:none; border:1px solid #aeb8b3; background:var(--panel); color:var(--ink); border-radius:7px; padding:8px 13px; min-height:40px; font:inherit; font-size:.9rem; cursor:pointer; }
button:hover { border-color:var(--accent); }
button[aria-pressed="true"] { background:var(--accent); color:white; border-color:var(--accent); }
button:focus-visible, summary:focus-visible { outline:3px solid #80bba9; outline-offset:2px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:12px 0; }
.stats article,.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.stats article { padding:17px 18px; }
.number { font-size:clamp(1.8rem,5vw,2.5rem); font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; margin:8px 0 2px; }
.detail { font-size:.82rem; }
.panel { padding:18px; margin-top:12px; }
.panel-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:15px; }
.panel-heading p { font-size:.84rem; margin-top:2px; }
.chart { width:100%; min-height:230px; overflow:hidden; position:relative; }
.chart-tooltip { position:absolute; z-index:2; transform:translateX(-50%); max-width:min(280px,calc(100% - 16px)); padding:7px 10px; border-radius:6px; background:#18201d; color:white; box-shadow:0 2px 8px rgba(0,0,0,.2); font-size:.78rem; line-height:1.35; text-align:center; pointer-events:none; }
.bar-group { cursor:pointer; }
.bar-group:focus { outline:none; }
.bar-group:focus rect { stroke:#18201d; stroke-width:2px; }
.chart svg { display:block; width:100%; height:auto; }
.chart .grid { stroke:#e4e8e6; stroke-width:1; }
.chart .axis-label { fill:#65706b; font-size:12px; }
.chart .bike-bar { fill:var(--bike); }
.chart .scooter-bar { fill:var(--scooter); }
.chart-legend { display:flex; justify-content:flex-end; gap:16px; min-height:24px; margin:-5px 0 4px; color:var(--muted); font-size:.78rem; }
.chart-legend span { display:inline-flex; align-items:center; gap:6px; }
.chart-legend i { width:10px; height:10px; border-radius:2px; }
.chart-legend .bike-key { background:var(--bike); }
.chart-legend .scooter-key { background:var(--scooter); }
.chart .empty { fill:var(--muted); font-size:14px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th,td { text-align:right; padding:10px 8px; border-top:1px solid #e5e9e7; }
th { font-size:.78rem; color:var(--muted); font-weight:650; }
th:first-child,td:first-child { text-align:left; padding-left:0; min-width:230px; }
th:last-child,td:last-child { padding-right:0; font-weight:650; }
.station-map { display:inline-block; margin-left:8px; color:var(--muted); font-size:.72rem; font-weight:500; text-decoration-thickness:1px; text-underline-offset:2px; }
.station-map:hover { color:var(--accent); }
.method { margin-top:20px; color:#3f4945; max-width:800px; }
.method summary { cursor:pointer; font-weight:650; }
.method p { margin-top:10px; font-size:.9rem; }
footer { border-top:1px solid var(--line); padding:20px 0 32px; font-size:.82rem; }
footer a { color:var(--accent); text-underline-offset:2px; }
@media (max-width:650px) {
  header { align-items:flex-start; flex-direction:column; gap:8px; padding-top:22px; }
  .freshness { text-align:left; }
  main { padding-top:18px; }
  .controls { gap:16px; }
  .stats { grid-template-columns:1fr; }
  .stats article { display:grid; grid-template-columns:1fr auto; align-items:center; gap:0 16px; }
  .stats .number { grid-row:1 / 3; grid-column:2; margin:0; }
  .panel { padding:14px; }
  .chart { min-height:200px; }
  .chart .axis-label { font-size:14px; }
  .chart-legend { font-size:.84rem; gap:14px; }
  th,td { padding-block:9px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }