:root {
  --surface-page: #0b1221;
  --surface-raised: #131e30;
  --surface-accent: #173660;
  --text-primary: #f2f6fc;
  --text-muted: #aebed2;
  --border-default: #33445d;
  --action-primary: #70adff;
  --action-hover: #accdff;
  --feedback-error: #ff817d;
  --feedback-success: #69c9a0;
  --feedback-warning: #f5c57e;
  --space-xs: .35rem;
  --space-sm: .7rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-section: clamp(5rem, 9vw, 8rem);
  --gutter-shell: clamp(1.2rem, 5vw, 5rem);
  --gutter-site: clamp(1.2rem, 6vw, 6rem);
  --gutter-content: clamp(1.2rem, 8vw, 9rem);
  --radius-control: 8px;
  --radius-panel: 10px;
  --radius-small: 6px;
  --type-label: .72rem;
  --type-small: .82rem;
  --type-body: 1rem;
  --type-lede: 1.05rem;
  --font-body: "Avenir Next", "Segoe UI", sans-serif;
  --font-heading: var(--font-body);
  --font-code: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text-primary); background: var(--surface-page); font: var(--type-body)/1.6 var(--font-body); }
a { color: inherit; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; color: inherit; }
button, .button { min-height: 44px; }
button, .button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--action-primary); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 20; top: .5rem; left: .5rem; padding: .6rem 1rem; background: var(--action-hover); color: var(--surface-page); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-header { min-height: 74px; padding: 0 var(--gutter-shell); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-default); background: var(--surface-raised); }
.wordmark { min-height: 44px; display: flex; gap: .7rem; align-items: center; font-size: .82rem; font-weight: 700; letter-spacing: .15em; text-decoration: none; text-transform: uppercase; }
.mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-small); background: var(--action-primary); color: var(--surface-page); font-size: 1.3rem; font-weight: 400; }
.site-header nav { display: flex; align-items: center; gap: clamp(.8rem, 3vw, 2.3rem); }
.site-header nav a, .nav-button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 600; text-decoration: none; }
.site-header nav form { display: inline; }
.nav-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
main { min-height: calc(100vh - 200px); }
footer { margin-top: 6rem; padding: 2rem var(--gutter-shell); display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border-default); color: var(--text-muted); font-size: .78rem; }
footer a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--font-heading); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; }
h1 { font-size: clamp(3rem, 8vw, 7.5rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); }
h3 { line-height: 1.2; }
code { font: .88em/1.5 var(--font-code); overflow-wrap: anywhere; }
.eyebrow, .section-number { color: var(--action-primary); font-size: var(--type-label); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: .72rem 1.2rem; border: 1px solid var(--action-primary); border-radius: var(--radius-control); font-size: var(--type-small); font-weight: 700; letter-spacing: .03em; text-decoration: none; cursor: pointer; }
.button.primary { border-color: var(--action-primary); color: var(--surface-page); background: var(--action-primary); }
.button.primary:hover { background: var(--action-hover); }
.button.secondary { color: var(--text-primary); background: transparent; }
.button.secondary:hover { background: var(--action-hover); color: var(--surface-page); }
.button.light { border-color: var(--action-hover); background: var(--action-hover); color: var(--surface-page); }
.button.light:hover { background: var(--text-primary); color: var(--surface-page); }
.button.danger { border-color: var(--feedback-error); color: var(--feedback-error); }
button:not(.button):not(.nav-button):not([data-copy]) { border: 1px solid var(--border-default); border-radius: var(--radius-small); padding: .5rem .75rem; background: var(--surface-raised); color: var(--text-primary); cursor: pointer; }
button:not(.button):not(.nav-button):not([data-copy]):hover { border-color: var(--action-primary); }
.button:disabled, button:disabled { opacity: .55; cursor: not-allowed; }
.messages { margin: var(--space-md) auto 0; width: min(90%, 1100px); display: grid; gap: var(--space-sm); }
.feedback { padding: var(--space-sm) var(--space-md); border-left: 4px solid var(--action-primary); border-radius: var(--radius-small); background: var(--surface-raised); }
.feedback--success { border-left-color: var(--feedback-success); }
.feedback--warning { border-left-color: var(--feedback-warning); }
.feedback--error { border-left-color: var(--feedback-error); }
.feedback .errorlist { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.status { color: var(--text-muted); }
.dot { display: inline-block; width: .65rem; height: .65rem; margin-right: .4rem; border-radius: 50%; background: var(--text-muted); }
.dot.live { background: var(--feedback-success); }
@media (max-width: 650px) {
  .site-header { padding-inline: var(--space-md); flex-wrap: wrap; }
  .site-header nav { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-sm); }
  footer { flex-direction: column; }
}
@media (max-width: 420px) {
  .site-header { padding-block: .5rem; flex-wrap: wrap; }
  .site-header nav { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}