@layer base,components;
@layer base {
  :root { color-scheme: light dark; --background:#f7fafc; --surface:#ffffff; --ink:#10243e; --muted:#607384; --teal:#20c7c9; --blue:#0e6fb7; --line:#dce6ea; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--background); color:var(--ink); }
  main { width:min(100% - 2.5rem,38rem); margin-inline:auto; min-height:100svh; display:flex; flex-direction:column; padding-block:clamp(1.5rem,5vh,3rem); }
  header { margin-bottom:clamp(3rem,12vh,7rem); }
  h1 { max-width:14ch; margin:0 0 1.25rem; font-size:clamp(2.25rem,7vw,3.5rem); line-height:1.1; letter-spacing:-.025em; text-wrap:balance; }
  p { max-width:48ch; font-size:1.125rem; line-height:1.65; margin:0 0 1.5rem; }
  a { color:var(--blue); text-underline-offset:.2em; }
  a:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
  ::selection { color:var(--ink); background:var(--teal); }
  [hidden] { display:none !important; }
  footer { color:var(--muted); font-size:.875rem; line-height:1.5; margin-top:auto; padding-top:4rem; }
  @media (prefers-color-scheme:dark) { :root { --background:#0d1b2a; --surface:#16293a; --ink:#edf6fb; --muted:#b6c6d2; --blue:#77c5ff; --line:#35495b; } }
}
@layer components {
  .brand { color:var(--ink); text-decoration:none; font-weight:800; font-size:1.5rem; letter-spacing:-.025em; }
  section { padding:clamp(1.5rem,5vw,3rem); background:var(--surface); border-radius:1.25rem; box-shadow:0 .75rem 2rem rgb(0 0 0 / .08); }
  .primary { display:inline-flex; align-items:center; justify-content:center; min-height:3.25rem; padding:.8rem 1.5rem; width:100%; border-radius:1rem; color:#10243e; background:var(--teal); font-size:1.0625rem; font-weight:650; text-decoration:none; text-align:center; line-height:1.4; }
  .primary:hover { background:#50e3dd; }
  .primary:active { background:#1cb7ba; }
  .help { color:var(--muted); font-size:.9375rem; margin:1.5rem 0 0; }
}