/* Blueprint wrapper for the README. Tokens match assets/blueprint/*.svg. */
:root {
  --paper0: #082341; --paper1: #0d3a68; --paper2: #0b2e55;
  --ink: #eef6ff; --ink2: #b9d4ee; --dim: #7fa6cc; --faint: #4f80b3;
  --cyan: #72e4ff; --amber: #ffc95c;
  --grid: rgba(114, 228, 255, .07); --grid-major: rgba(114, 228, 255, .13);
  --mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--paper0); scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink2); font: 16px/1.6 var(--sans);
  background-color: var(--paper0);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, var(--paper1), var(--paper0) 70%);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px, 100% 100%;
  background-attachment: fixed;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; z-index: 10; background: var(--ink); color: var(--paper0); padding: 6px 10px; }

.titlebar, .colophon {
  max-width: 1032px; margin: 0 auto; padding: 14px 16px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center;
  font: 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.titlebar { border-bottom: 1px solid rgba(114, 228, 255, .18); }
.titlebar nav { display: flex; gap: 20px; }
.colophon { border-top: 1px solid rgba(114, 228, 255, .18); margin-top: 32px; padding-bottom: 32px; letter-spacing: .06em; text-transform: none; }

.sheet { max-width: 1032px; margin: 0 auto; padding: 24px 16px 8px; }
.sheet img { max-width: 100%; height: auto; vertical-align: top; }
.sheet > div[align="center"] img[width="100%"] { display: block; margin: 0 auto; }
.sheet p { margin: 0 0 14px; }
.sheet br + br { display: none; }
.sheet b, .sheet strong { color: var(--ink); }
.sheet sub { display: inline-block; font-size: 13px; line-height: 1.6; color: var(--dim); vertical-align: baseline; max-width: 860px; }
a { color: var(--cyan); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.sheet a:has(> img):hover { text-decoration: none; }
.sheet a > img { transition: transform .25s ease, filter .25s ease; }
.sheet a:hover > img { transform: translateY(-2px); filter: drop-shadow(0 8px 24px rgba(114, 228, 255, .18)); }
@media (prefers-reduced-motion: reduce) { .sheet a > img { transition: none; } .sheet a:hover > img { transform: none; } }

/* Plain-text version */
details {
  margin: 28px 0 0; padding: 0 20px; border: 1px solid rgba(114, 228, 255, .28); border-radius: 10px;
  background: rgba(8, 35, 65, .72);
}
details[open] { padding-bottom: 12px; }
summary { cursor: pointer; padding: 14px 0; color: var(--ink); font-family: var(--mono); font-size: 14px; }
summary::marker { color: var(--cyan); }
details h3 { color: var(--ink); font-size: 22px; margin: 8px 0 4px; }
details ul { padding-left: 22px; }
details code { font: 13px var(--mono); background: rgba(114, 228, 255, .08); padding: 1px 5px; border-radius: 4px; color: var(--ink); }
.sheet table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; display: block; overflow-x: auto; }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid rgba(114, 228, 255, .16); }
.sheet th { color: var(--ink); font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }