:root { color-scheme: dark; font-family: "Segoe UI", "Aptos", system-ui, sans-serif; background: #1b2838; color: #e5edf3; }
:where(.page-header, .getting-started, .notice, .page-header *, .getting-started *, .notice *) { box-sizing: border-box; }
body { margin: 0; }
:where(.page-header, .getting-started, .notice) a { color: #66c0f4; text-decoration: none; }
:where(.page-header, .getting-started, .notice) a:hover { color: #b5e3ff; text-decoration: underline; text-underline-offset: 3px; }
:where(.page-header, .getting-started, .notice) :focus-visible { outline: 2px solid #66c0f4; outline-offset: 4px; }
.page-header { display: flex; align-items: center; gap: 24px; min-height: 64px; padding: 12px 32px; border-bottom: 1px solid #334455; background: #171f2b; font-size: 14px; }
.page-header .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 650; color: #e5edf3; letter-spacing: -.03em; }
.page-header > span { color: #acb2b8; }
.back { margin-left: auto; padding: 8px 0; }
.getting-started { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; padding: 28px 32px 20px; border-bottom: 1px solid #334455; }
.getting-started h1 { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.getting-started p, .notice { color: #acb2b8; font-size: 14px; line-height: 1.6; margin: 0; max-width: 65ch; }
.example { align-self: center; }
.example > a { display: block; overflow-wrap: anywhere; padding: 12px 16px; border: 1px solid #334455; background: #171f2b; border-radius: 4px; font-family: "Cascadia Code", Consolas, monospace; font-size: 14px; }
.example p { margin-top: 8px; font-size: 13px; }
.getting-started details { grid-column: 1 / -1; font-size: 13px; }
.getting-started summary { cursor: pointer; color: #acb2b8; width: fit-content; padding: 8px 0; }
.getting-started nav { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 8px; }
.getting-started nav a { padding: 8px 0; }
.notice { padding: 32px; }
@media (max-width: 640px) {
  .page-header { padding: 12px 20px; gap: 16px; flex-wrap: wrap; }
  .page-header > span { display: none; }
  .getting-started { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px 16px; }
}

.page-header .brand img { display: block; flex: none; }
.getting-started .example svg { vertical-align: middle; }