:root {
  color-scheme: dark;
  --page: #09111d;
  --landing-page: #07101b;
  --text: #e5edf7;
  --text-2: #edf7f5;
  --surface: #101b2b;
  --surface-2: #0d1a27;
  --surface-3: #0d1b27;
  --surface-4: #0d1a25;
  --surface-5: #0d2029;
  --surface-soft: #081321;
  --surface-soft-2: #0b1625;
  --surface-soft-3: #0a1520;
  --surface-soft-4: #09151f;
  --surface-soft-5: #0a1721;
  --surface-soft-6: #09141f;
  --surface-soft-7: #0c1c28;
  --surface-glass: #09141fdd;
  --surface-glass-2: #0d1b27dd;
  --surface-tint: #08141dc4;
  --surface-tint-2: #09141eaa;
  --surface-tint-3: #0b1721a6;
  --border: #22364c;
  --border-2: #21364b;
  --border-3: #263b50;
  --border-4: #294057;
  --border-5: #30485f;
  --border-6: #1d3642;
  --border-7: #1d3541;
  --border-8: #172d37;
  --border-9: #29434c;
  --border-10: #31515d;
  --border-11: #39515a;
  --border-accent: #2d665e;
  --border-accent-2: #356158;
  --border-accent-3: #36515b;
  --border-accent-4: #3c6967;
  --border-accent-5: #469e8e;
  --border-accent-6: #4e7a82;
  --muted: #93a7bb;
  --muted-2: #9dafc0;
  --muted-3: #667d92;
  --muted-4: #7890a5;
  --muted-5: #7f95a9;
  --muted-6: #8da2b7;
  --muted-7: #a9bbca;
  --muted-8: #aebdca;
  --muted-9: #a9bacb;
  --muted-10: #b8c8d6;
  --muted-11: #547178;
  --muted-12: #647b7d;
  --muted-13: #6f898c;
  --muted-14: #789093;
  --muted-15: #8ca0a2;
  --muted-16: #91aaa9;
  --muted-17: #96aaa9;
  --muted-18: #a9bcbb;
  --muted-19: #b7c8c7;
  --muted-20: #c2d0cf;
  --accent: #55d6be;
  --accent-2: #60e1c1;
  --accent-hover: #9bf3dd;
  --on-accent: #06251f;
  --on-accent-2: #06231c;
  --on-accent-3: #071612;
  --danger: #ff9292;
  --danger-border: #623b45;
  --warning: #ffcf70;
  --warning-2: #ffc978;
  --warning-surface: #2a210f;
  --warning-border: #7a5d24;
  --success: #83dec9;
  --success-surface: #0c2827;
  --success-surface-2: #10312f;
  --glow: #123f45;
  --glow-2: #102d3a;
  --glow-3: #132b36;
  --glow-soft: #38bba24d;
  --glow-soft-2: #45caae2b;
  --glow-soft-3: #60e1c138;
  --grid: #7ecfc00c;
  --highlight: #b5ffed12;
  --highlight-2: #b5ffed16;
  --shadow: #02060d88;
  --shadow-2: #02060d66;
  --shadow-3: #0009;
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f4f7fa;
  --landing-page: #f4f9f7;
  --text: #172c39;
  --text-2: #172c39;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #ffffff;
  --surface-4: #ffffff;
  --surface-5: #ffffff;
  --surface-soft: #edf3f5;
  --surface-soft-2: #edf3f5;
  --surface-soft-3: #edf3f5;
  --surface-soft-4: #edf3f5;
  --surface-soft-5: #edf3f5;
  --surface-soft-6: #edf3f5;
  --surface-soft-7: #edf3f5;
  --surface-glass: #ffffffeb;
  --surface-glass-2: #ffffffeb;
  --surface-tint: #edf5f2cc;
  --surface-tint-2: #edf5f2cc;
  --surface-tint-3: #edf5f2cc;
  --border: #b7c9d1;
  --border-2: #b7c9d1;
  --border-3: #b7c9d1;
  --border-4: #b7c9d1;
  --border-5: #b7c9d1;
  --border-6: #b7c9d1;
  --border-7: #b7c9d1;
  --border-8: #b7c9d1;
  --border-9: #b7c9d1;
  --border-10: #b7c9d1;
  --border-11: #b7c9d1;
  --border-accent: #759d94;
  --border-accent-2: #759d94;
  --border-accent-3: #759d94;
  --border-accent-4: #759d94;
  --border-accent-5: #759d94;
  --border-accent-6: #759d94;
  --muted: #506674;
  --muted-2: #506674;
  --muted-3: #506674;
  --muted-4: #506674;
  --muted-5: #506674;
  --muted-6: #506674;
  --muted-7: #506674;
  --muted-8: #506674;
  --muted-9: #506674;
  --muted-10: #506674;
  --muted-11: #506674;
  --muted-12: #506674;
  --muted-13: #506674;
  --muted-14: #506674;
  --muted-15: #506674;
  --muted-16: #506674;
  --muted-17: #506674;
  --muted-18: #506674;
  --muted-19: #506674;
  --muted-20: #506674;
  --accent: #08755e;
  --accent-2: #08755e;
  --accent-hover: #075e4c;
  --on-accent: #ffffff;
  --on-accent-2: #ffffff;
  --on-accent-3: #ffffff;
  --danger: #b42335;
  --danger-border: #c78a92;
  --warning: #845400;
  --warning-2: #845400;
  --warning-surface: #fff4d6;
  --warning-border: #ba8b35;
  --success: #146a54;
  --success-surface: #e1f3e9;
  --success-surface-2: #e1f3e9;
  --glow: #d3eee5;
  --glow-2: #d3eee5;
  --glow-3: #d3eee5;
  --glow-soft: #62b9a32b;
  --glow-soft-2: #62b9a32b;
  --glow-soft-3: #62b9a32b;
  --grid: #227b680c;
  --highlight: #ffffff70;
  --highlight-2: #ffffff70;
  --shadow: #183c4918;
  --shadow-2: #183c4918;
  --shadow-3: #183c4918;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
  --page: #f4f7fa;
  --landing-page: #f4f9f7;
  --text: #172c39;
  --text-2: #172c39;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #ffffff;
  --surface-4: #ffffff;
  --surface-5: #ffffff;
  --surface-soft: #edf3f5;
  --surface-soft-2: #edf3f5;
  --surface-soft-3: #edf3f5;
  --surface-soft-4: #edf3f5;
  --surface-soft-5: #edf3f5;
  --surface-soft-6: #edf3f5;
  --surface-soft-7: #edf3f5;
  --surface-glass: #ffffffeb;
  --surface-glass-2: #ffffffeb;
  --surface-tint: #edf5f2cc;
  --surface-tint-2: #edf5f2cc;
  --surface-tint-3: #edf5f2cc;
  --border: #b7c9d1;
  --border-2: #b7c9d1;
  --border-3: #b7c9d1;
  --border-4: #b7c9d1;
  --border-5: #b7c9d1;
  --border-6: #b7c9d1;
  --border-7: #b7c9d1;
  --border-8: #b7c9d1;
  --border-9: #b7c9d1;
  --border-10: #b7c9d1;
  --border-11: #b7c9d1;
  --border-accent: #759d94;
  --border-accent-2: #759d94;
  --border-accent-3: #759d94;
  --border-accent-4: #759d94;
  --border-accent-5: #759d94;
  --border-accent-6: #759d94;
  --muted: #506674;
  --muted-2: #506674;
  --muted-3: #506674;
  --muted-4: #506674;
  --muted-5: #506674;
  --muted-6: #506674;
  --muted-7: #506674;
  --muted-8: #506674;
  --muted-9: #506674;
  --muted-10: #506674;
  --muted-11: #506674;
  --muted-12: #506674;
  --muted-13: #506674;
  --muted-14: #506674;
  --muted-15: #506674;
  --muted-16: #506674;
  --muted-17: #506674;
  --muted-18: #506674;
  --muted-19: #506674;
  --muted-20: #506674;
  --accent: #08755e;
  --accent-2: #08755e;
  --accent-hover: #075e4c;
  --on-accent: #ffffff;
  --on-accent-2: #ffffff;
  --on-accent-3: #ffffff;
  --danger: #b42335;
  --danger-border: #c78a92;
  --warning: #845400;
  --warning-2: #845400;
  --warning-surface: #fff4d6;
  --warning-border: #ba8b35;
  --success: #146a54;
  --success-surface: #e1f3e9;
  --success-surface-2: #e1f3e9;
  --glow: #d3eee5;
  --glow-2: #d3eee5;
  --glow-3: #d3eee5;
  --glow-soft: #62b9a32b;
  --glow-soft-2: #62b9a32b;
  --glow-soft-3: #62b9a32b;
  --grid: #227b680c;
  --highlight: #ffffff70;
  --highlight-2: #ffffff70;
  --shadow: #183c4918;
  --shadow-2: #183c4918;
  --shadow-3: #183c4918;
  }
}

.theme-picker[hidden] { display: none; }
.theme-picker { display: inline-flex; align-items: center; gap: .5rem; font: 500 .8rem system-ui, sans-serif; color: var(--muted); flex-shrink: 0; }
.theme-picker select { width: auto; min-height: 44px; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
main > .theme-picker { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 3px; }
input::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"] { accent-color: var(--accent); }
header { flex-wrap: wrap; }
@media (max-width: 650px) {
  .site-nav { flex-wrap: wrap; gap: .75rem; padding-block: 1rem; }
  .nav-links { flex-wrap: wrap; }
}
/* Account cards include padding within the available viewport width. */
*, *::before, *::after { box-sizing: border-box; }
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(2.6rem, 15.5vw, 5rem); }
}