/* Hallmark · genre: modern-minimal · macrostructure: Map / Diagram · design-system: design.md · designed-as-app
 * theme: Cobalt · tone: precise · anchor hue: 256 · enrichment: none · nav: N13 inline command · footer: Ft5
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * Hallmark · contrast: pass (40–41) · slop: pass (42–49) · mobile: pass (34, 49–57)
 */
@import url("/tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--banner-height) + var(--space-md)); }
body { margin: 0; min-width: 20rem; background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; }
body:has(dialog[open]) { overflow: clip; }
button, input { font: inherit; }
a { color: inherit; }
a:not(.button):active { color: var(--color-accent); }
a[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
code, pre, kbd { font-family: var(--font-mono); }
code { font-size: 0.9em; }
h1, h2, h3 { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-style: normal; overflow-wrap: anywhere; min-width: 0; }
h1 { max-width: 11ch; font-size: var(--text-display); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
h3 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
::selection { background: var(--color-accent-soft); color: var(--color-ink); }

:focus-visible { outline: var(--rule-strong) solid var(--color-focus); outline-offset: var(--space-2xs); }
.skip-link { position: fixed; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); z-index: var(--z-tooltip); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); transform: translateY(-160%); text-decoration: none; white-space: nowrap; }
.skip-link:focus { transform: none; }

.site-nav { position: sticky; inset-block-start: 0; z-index: var(--z-sticky-nav); height: var(--banner-height); border-block-end: var(--rule-hair) solid var(--color-rule); background: color-mix(in oklch, var(--color-paper) 94%, transparent); backdrop-filter: blur(var(--space-sm)); }
.site-nav__inner { width: min(100%, var(--page-max)); height: 100%; margin-inline: auto; padding-inline: var(--page-gutter); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-xs); color: var(--color-ink); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; text-decoration: none; white-space: nowrap; }
.wordmark > span { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: -0.04em; }
.site-footer a { text-decoration: none; white-space: nowrap; }
.site-nav__actions { justify-self: end; display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.command-trigger { min-width: 2.75rem; min-height: 2.75rem; padding-inline: var(--space-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink-2); cursor: pointer; white-space: nowrap; }
.command-trigger--nav { width: 100%; max-width: 32rem; justify-self: center; justify-content: space-between; }
.command-trigger__label { display: none; }
.command-trigger kbd { font-size: var(--text-xs); }

.button, .copy-button, .dialog-close { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm); padding-inline: var(--space-md); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.button--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.button--quiet { background: var(--color-paper); color: var(--color-ink); }
.button--inverse { border-color: var(--color-code-muted); background: var(--color-graphite-text); color: var(--color-graphite); }
.button:active, .copy-button:active, .command-trigger:active, .dialog-close:active { transform: translateY(var(--space-3xs)); }
.button[aria-disabled="true"], .button:disabled, .copy-button:disabled, .command-trigger:disabled, .dialog-close:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.button[data-state="loading"]::after, .copy-button[data-state="loading"]::after { content: ""; width: var(--space-sm); height: var(--space-sm); border: var(--rule-strong) solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin var(--dur-long) linear infinite; }
.button[data-state="error"]::after, .copy-button[data-state="error"]::after { content: "×"; color: var(--color-error); }
.button[data-state="success"]::after, .copy-button[data-state="success"]::after { content: "✓"; color: var(--color-success); }

.hero { width: min(100%, var(--page-max)); min-height: clamp(34rem, 75dvh, 48rem); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-3xl); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-2xl); }
.hero__copy { display: grid; align-content: center; gap: var(--space-lg); min-width: 0; }
.orientation { width: fit-content; padding-block-end: var(--space-xs); border-block-end: var(--rule-strong) solid var(--color-accent); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.hero__lede { max-width: 57ch; font-size: var(--text-md); line-height: 1.5; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.event-proof { align-self: center; min-width: 0; border-block: var(--rule-hair) solid var(--color-rule-strong); padding-block: var(--space-lg); }
.event-proof__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; }
.status-signal { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.status-signal::before { content: ""; width: var(--space-xs); height: var(--space-xs); border-radius: 50%; background: var(--color-accent); }
.event-proof pre { margin: var(--space-lg) 0; padding: 0; color: var(--color-ink); font-size: clamp(var(--text-sm), 2.8vw, var(--text-base)); line-height: 1.8; overflow-x: auto; }
.code-key { color: var(--color-accent); }
.event-proof > p { max-width: 52ch; color: var(--color-muted); font-size: var(--text-sm); }
.load-in { animation: settle var(--dur-long) var(--ease-out) both; }

.system-map { border-block: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.section-head, .map-frame, .map-legend, .usefulness, .implementation, .aws-control { width: min(100%, var(--page-max)); margin-inline: auto; padding-inline: var(--page-gutter); }
.section-head { padding-block: var(--space-3xl) var(--space-xl); display: grid; gap: var(--space-lg); }
.section-head > p { max-width: 62ch; color: var(--color-muted); font-size: var(--text-md); }
.map-frame { padding-block-end: var(--space-xl); }
.map-graphic { display: none; width: 100%; height: auto; color: var(--color-ink-2); }
.map-edge { fill: none; stroke: var(--color-rule-strong); stroke-width: 2; }
.map-edge--live { stroke: var(--color-accent); stroke-dasharray: 7 7; }
.map-arrow { fill: var(--color-rule-strong); }
.map-node rect { fill: var(--color-paper); stroke: var(--color-rule-strong); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform var(--dur-short) var(--ease-out); }
.map-node--core rect { fill: var(--color-accent-soft); stroke: var(--color-accent); }
.map-node__name { fill: var(--color-ink); font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.map-node__sub, .map-caption { fill: var(--color-muted); font-family: var(--font-body); font-size: 13px; }
.map-node:focus rect { stroke: var(--color-focus); stroke-width: 3; }
.map-list { margin: 0; padding: 0; list-style: none; border-block-start: var(--rule-hair) solid var(--color-rule-strong); }
.map-list li { padding-block: var(--space-lg); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule); }
.map-list li > span { color: var(--color-accent); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; }
.map-list strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); }
.map-list p { color: var(--color-muted); }
.map-legend { padding-block: var(--space-md) var(--space-2xl); display: flex; flex-wrap: wrap; gap: var(--space-lg); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.map-legend span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legend-line { width: var(--space-xl); border-block-start: var(--rule-strong) solid var(--color-rule-strong); }
.legend-core { width: var(--space-sm); height: var(--space-sm); border: var(--rule-hair) solid var(--color-accent); background: var(--color-accent-soft); }

.usefulness { padding-block: var(--space-4xl) var(--space-3xl); display: grid; gap: var(--space-2xl); }
.usefulness__head { align-self: start; display: grid; gap: var(--space-lg); }
.usefulness__head p { max-width: 48ch; color: var(--color-muted); font-size: var(--text-md); }
.spec-sheet { margin: 0; border-block-start: var(--rule-strong) solid var(--color-ink); }
.spec-sheet > div { padding-block: var(--space-lg); display: grid; gap: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); }
.spec-sheet dt { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; }
.spec-sheet dd { margin: 0; color: var(--color-ink-2); }
.spec-sheet dd:last-child { color: var(--color-muted); }

.quickstart { background: var(--color-graphite); color: var(--color-graphite-text); padding: var(--space-3xl) max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter))); display: grid; gap: var(--space-2xl); }
.quickstart h2 { color: var(--color-graphite-text); }
.quickstart__intro { display: grid; align-content: start; gap: var(--space-lg); }
.quickstart__intro > p { max-width: 56ch; color: var(--color-code-muted); font-size: var(--text-md); }
.quickstart__intro .button { justify-self: start; }
.code-sample { min-width: 0; border-block: var(--rule-hair) solid var(--color-graphite-2); }
.code-sample__label { min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-graphite-2); color: var(--color-code-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
.copy-button { border-color: var(--color-graphite-2); background: var(--color-graphite); color: var(--color-graphite-text); }
.code-sample pre { margin: 0; padding-block: var(--space-xl); color: var(--color-graphite-text); font-size: clamp(var(--text-sm), 2.8vw, var(--text-base)); line-height: 2; overflow-x: auto; }
.code-sample > p { padding-block-end: var(--space-lg); color: var(--color-code-muted); font-size: var(--text-sm); }

.implementation { padding-block: var(--space-4xl); }
.section-head--implementation { padding: 0 0 var(--space-2xl); }
.steps { margin: 0; padding: 0; list-style: none; border-block-start: var(--rule-strong) solid var(--color-ink); }
.steps li { padding-block: var(--space-xl); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule); }
.steps .stage { color: var(--color-accent); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.steps li > div { display: grid; gap: var(--space-sm); }
.steps p { max-width: 62ch; color: var(--color-muted); }
.steps li > code { grid-column: 2; align-self: start; color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }

.aws-control { padding-block: var(--space-2xl) var(--space-4xl); display: grid; gap: var(--space-2xl); }
.aws-control__copy { display: grid; gap: var(--space-lg); }
.aws-control__copy p { max-width: 62ch; font-size: var(--text-md); }
.aws-control__copy .button { justify-self: start; }

.site-footer { padding: var(--space-3xl) var(--page-gutter) var(--space-xl); border-block-start: var(--rule-hair) solid var(--color-rule); }
.site-footer__statement, .site-footer__meta { width: min(100%, calc(var(--page-max) - var(--page-gutter) * 2)); margin-inline: auto; }
.site-footer__statement { max-width: 25ch; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.site-footer__meta { margin-block-start: var(--space-2xl); padding-block-start: var(--space-md); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.site-footer__meta nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.command-dialog { position: fixed; inset: 0; width: min(calc(100% - var(--space-xl)), 38rem); height: fit-content; max-height: min(80dvh, 40rem); margin: auto; padding: 0; border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-md); background: var(--color-paper); color: var(--color-ink-2); box-shadow: var(--shadow-whisper); }
.command-dialog::backdrop { background: color-mix(in oklch, var(--color-graphite) 58%, transparent); }
.command-dialog__surface { display: grid; }
.command-dialog__head { padding: var(--space-md); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.command-dialog__head p { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.command-dialog__head label { color: var(--color-muted); font-size: var(--text-sm); }
.dialog-close { min-width: 2.75rem; padding-inline: var(--space-sm); background: var(--color-paper); color: var(--color-muted); }
.command-search { height: 3.5rem; margin-inline: var(--space-md); padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm); outline: var(--rule-strong) solid transparent; outline-offset: var(--space-3xs); background: var(--color-paper); color: var(--color-ink); }
.command-search::placeholder { color: var(--color-muted); }
.command-search:hover { border-color: var(--color-ink-2); }
.command-search:focus-visible { outline-color: var(--color-focus); }
.command-search[aria-invalid="true"] { border-color: var(--color-error); }
.command-search:disabled { opacity: 0.55; cursor: not-allowed; }
.command-results { max-height: 22rem; margin-block-start: var(--space-md); overflow-y: auto; border-block-start: var(--rule-hair) solid var(--color-rule); }
.command-results a { min-height: 3.5rem; padding-inline: var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.command-results a[aria-selected="true"] { background: var(--color-accent-soft); color: var(--color-ink); }
.command-results a small { color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); }
.command-status { min-height: 2.75rem; padding-inline: var(--space-md); display: flex; align-items: center; border-block-start: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); }

@keyframes settle { from { opacity: 0; transform: translateY(var(--space-xs)); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(1turn); } }

@media (hover: hover) and (pointer: fine) {
  .button:hover, .copy-button:hover, .command-trigger:hover, .dialog-close:hover { transform: translateY(calc(var(--space-3xs) * -1)); }
  .site-footer a:hover { color: var(--color-accent); }
  .map-node:hover rect { transform: translateY(calc(var(--space-xs) * -1)); stroke: var(--color-accent); }
}

@media (min-width: 40rem) {
  .command-trigger__label { display: inline; }
  .section-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: end; }
  .map-graphic { display: block; }
  .map-list { display: none; }
  .spec-sheet > div { grid-template-columns: minmax(8rem, 0.55fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
  .steps li { grid-template-columns: 4rem minmax(0, 1fr) minmax(8rem, 0.35fr); gap: var(--space-lg); }
  .steps li > code { grid-column: auto; justify-self: end; }
  .site-footer__meta { flex-direction: row; justify-content: space-between; align-items: baseline; }
}

@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--space-3xl); }
  .usefulness { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .usefulness__head { position: sticky; inset-block-start: calc(var(--banner-height) + var(--space-xl)); }
  .quickstart { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--space-3xl); }
  .aws-control { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .load-in { opacity: 1; transform: none; }
}