:root {
  --ink: #17202a; --muted: #52606d; --paper: #f7f8f5; --surface: #fff;
  --brand: #3454d1; --brand-dark: #233a9f; --accent: #f0b429; --danger: #a61b1b;
  --line: #d9e2ec; --radius: .75rem; --shadow: 0 12px 32px #17202a18;
  --space-1: .4rem; --space-2: .75rem; --space-3: 1.15rem; --space-4: 1.8rem;
  --measure: 44rem; --font: ui-sans-serif, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.55 var(--font); }
main { width: min(var(--measure), calc(100% - 2rem)); margin: clamp(1rem, 5vw, 4rem) auto; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 4vw, 2.4rem); box-shadow: var(--shadow); }
h1, h2 { line-height: 1.15; margin-top: 0; } p { max-width: 65ch; }
.eyebrow { color: var(--brand); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
label, legend { display: block; font-weight: 700; margin-top: var(--space-3); }
input, select { width: 100%; padding: .75rem; border: 1px solid #9fb3c8; border-radius: .4rem; font: inherit; }
input[type=radio] { width: auto; } fieldset { border: 0; padding: 0; }
button { margin-top: var(--space-3); border: 0; border-radius: .45rem; padding: .75rem 1.15rem; color: white; background: var(--brand); font: 700 1rem var(--font); cursor: pointer; }
button:hover { background: var(--brand-dark); } button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.error { color: var(--danger); border-left: 4px solid var(--danger); padding-left: var(--space-2); }
.notice, .xray { background: #eef2ff; border-left: 4px solid var(--brand); padding: var(--space-3); }
.simulation { border: 2px solid var(--line); border-radius: var(--radius); padding: var(--space-4); text-align: center; background: #fbfcfe; }
.dummy { display: inline-block; padding: .7rem 1rem; border: 2px dashed #829ab1; border-radius: .35rem; color: var(--muted); user-select: none; }
.feedback { list-style: none; padding: 0; } .feedback li { margin: .5rem 0; padding: .65rem; background: #f0f4f8; }
small, .muted { color: var(--muted); }
@media (max-width: 34rem) { main { width: min(100% - 1rem, var(--measure)); margin-block: .5rem; } .card { border-radius: .5rem; } button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }