:root {
    --bg: #fafafa;
    --fg: #1a1a1a;
    --muted: #666;
    --border: #ddd;
    --accent: #0a5;
    --card: #ececec;
    --card-header: #dcdcdc;
    --card-hover: #e3e3e3;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: var(--fg);
    line-height: 1.5;
    /* Solid color is the fallback if lane.png isn't present. */
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(250, 250, 250, 0.43), rgba(250, 250, 250, 0.43)),
        url('/assets/images/lane.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

header {
    text-align: center;
    padding: 2rem 1rem 1rem;
}

header h1 {
    margin: 0 0 1rem;
    font-size: 2.5rem;
}

img.hero {
    max-width: min(640px, 90vw);
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

section {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
}

section h2 {
    margin-bottom: 0.25rem;
    font-size: 1.4rem;
}

.subtitle {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: 0.95rem;
}

#chart {
    width: 100%;
    min-height: 400px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

#chart .vega-embed,
#chart svg { display: block; max-width: 100%; height: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

th, td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    background: var(--card-header);
    user-select: none;
    position: sticky;
    top: 0;
}

th[data-dir="asc"]::after { content: " ▲"; color: var(--muted); }
th[data-dir="desc"]::after { content: " ▼"; color: var(--muted); }

td.num, th.num { text-align: center; font-variant-numeric: tabular-nums; }

tbody tr:hover { background: var(--card-hover); }

footer { text-align: center; padding: 2rem; color: var(--muted); }