:root {
    color-scheme: light;
    --color-primary: #16775c;
    --color-primary-dark: #0d5d47;
    --color-primary-soft: #e8f5f0;
    --color-accent: #e7b94c;
    --color-background: #f5f7f4;
    --color-surface: #ffffff;
    --color-text: #17342c;
    --color-muted: #61736d;
    --color-border: #dce5e1;
    --color-danger: #b42318;
    --color-danger-soft: #fff1f0;
    --color-success: #087443;
    --color-success-soft: #eaf8f0;
    --shadow-soft: 0 10px 30px rgb(22 55 45 / 7%);
    --radius-large: 1.25rem;
    --radius-medium: .85rem;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--color-background);
    color: var(--color-text);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 20rem; background: var(--color-background); color: var(--color-text); }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 55%, white);
    outline-offset: 3px;
}

.site-header {
    width: min(100% - 2rem, 42rem);
    min-height: 4.5rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--color-text); text-decoration: none; font-weight: 850; }
.brand__mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .65rem; background: var(--color-primary); color: white; }
.election-tag { padding: .4rem .65rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-muted); background: var(--color-surface); font-size: .78rem; font-weight: 750; }
.builder-shell { width: min(100% - 2rem, 42rem); margin: 1.5rem auto 4rem; }
.intro { margin-bottom: 1.6rem; }
.intro h1 { margin: .2rem 0 .65rem; font-size: clamp(2rem, 10vw, 3.4rem); line-height: .98; letter-spacing: -.045em; }
.intro > p:last-child { max-width: 32rem; margin: 0; color: var(--color-muted); line-height: 1.55; }
.eyebrow { margin: 0; color: var(--color-primary); font-size: .75rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.notice { display: grid; gap: .35rem; padding: 1rem; border-radius: var(--radius-medium); }
.notice--error { border: 1px solid #f2b8b5; background: var(--color-danger-soft); color: var(--color-danger); }
.site-footer { width: min(100% - 2rem, 42rem); margin: 0 auto 2rem; color: var(--color-muted); font-size: .78rem; text-align: center; }

@media (min-width: 40rem) {
    .site-header { min-height: 5.5rem; }
    .builder-shell { margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}