:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #f5f7fb; color: #172033; }
.skip-link { background: #ffffff; border: 2px solid #193c8f; border-radius: 10px; color: #193c8f; font-weight: 750; left: 12px; padding: 10px 12px; position: absolute; top: -60px; z-index: 10; }
.skip-link:focus { top: 12px; }
main { max-width: 960px; margin: 0 auto; padding: 40px 18px 64px; }
.hero, .notes, .faq, form, .output { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 10px 30px rgba(15, 23, 42, .07); margin-bottom: 18px; padding: 22px; }
.eyebrow { color: #3154a3; font-weight: 750; letter-spacing: .06em; margin: 0 0 8px; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; margin: 0 0 12px; }
.lead { font-size: 1.15rem; max-width: 760px; }
.notice { background: #fff6d8; color: #473900; border: 1px solid #e8cf6a; padding: 12px; border-radius: 12px; }
form { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-help { grid-column: 1 / -1; margin: 0 0 6px; }
.field-help { color: #526071; font-size: .92rem; margin: -4px 0 4px; }
label { display: grid; gap: 6px; font-weight: 650; }
.check { align-items: center; display: flex; gap: 8px; }
input, select, textarea, button { font: inherit; border: 1px solid #cfd6e4; border-radius: 10px; padding: 10px; }
button { background: #193c8f; color: white; border: 0; cursor: pointer; font-weight: 750; min-height: 44px; }
button:hover { background: #102b6a; }
.tools-link { color: #193c8f; font-weight: 750; }
input:focus, select:focus, textarea:focus, button:focus-visible, summary:focus-visible { outline: 3px solid #7aa2ff; outline-offset: 2px; }
pre, textarea { width: 100%; background: #111827; color: #e5e7eb; border-radius: 12px; padding: 14px; white-space: pre-wrap; }
details { border-top: 1px solid #e2e8f0; padding: 12px 0; }
summary { cursor: pointer; font-weight: 750; }
li { margin: 6px 0; }
@media (prefers-color-scheme: dark) {
  body { background: #101827; color: #f9fafb; }
  .hero, .notes, .faq, form, .output { background: #172033; border-color: #29374d; }
  .notice { background: #473900; color: #fff6d8; }
  .eyebrow { color: #9bb8ff; }
  .tools-link { color: #9bb8ff; }
  .field-help { color: #bac6d8; }
  input, select, textarea { background: #111827; color: #f9fafb; border-color: #46546a; }
  details { border-color: #29374d; }
}