/* design.css: the OpenSpatials site's one design (item D5 of the owner's review of 2026-10-27), shared by every page:
   the colour and type tokens, the Barlow fonts, the base, the header (the numbered menu and Developers), the footer, the
   buttons, the kickers and headlines, the boxes (the agent prompt, corners, bands, a plain box) and the plain document
   column of the privacy page. Taken byte for byte from the home page's stylesheet, which keeps only its own rules
   (site-src/home/home.css, loaded after this one). Since WO-SCRAP-20261027-243 also the inner pages' parts (the
   developers' pages, the tools, the registry): the section links, the page head, the document column, boxes and form
   controls. Source: site-src/design/design.css, served as /assets/design.css.
   Fonts: Barlow (SIL Open Font License 1.1, fonts/OFL.txt), stored on the site, so pages need font-src 'self'. */
@font-face { font-family: "Barlow"; src: url("fonts/barlow-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --void: #040706; --panel: #08110d; --line: rgba(111,227,255,.18); --grid: rgba(111,227,255,.055); --sig: #6fe3ff; --gold: #e5b64c;
  --cream: #eef2e6; --dim: #9db1a8; --leaf: #97c986; --shade: rgba(4,7,6,.84); --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --top: 60px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--void); color-scheme: dark; scroll-padding-top: var(--top); }
body { margin: 0; font-family: "Barlow", system-ui, sans-serif; font-size: 17px; line-height: 1.55; color: var(--cream); background: transparent; overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--sig); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--sig); color: var(--void); padding: 10px 14px; font-family: var(--mono); text-transform: uppercase; font-size: 12px; letter-spacing: .1em; text-decoration: none; }
.skip:focus { top: 10px; }
.wrap { width: min(1240px, 100% - 40px); margin: 0 auto; }
main, .foot { position: relative; z-index: 1; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 20px; height: var(--top); padding: 0 20px; background: rgba(4,7,6,.96); border-bottom: 1px solid var(--line); font-family: var(--mono); }
.brand { display: flex; align-items: center; min-height: 44px; gap: 10px; text-decoration: none; font-family: "Barlow", system-ui, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 18px; } .brand img { width: 28px; height: auto; }
.top nav { margin-left: auto; } .top nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.top nav a { display: flex; align-items: center; min-height: 44px; white-space: nowrap; text-decoration: none; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; padding: 0 10px; border: 1px solid transparent; color: var(--dim); } .top nav a:hover { border-color: var(--line); color: var(--cream); }
.top .n { color: var(--sig); margin-right: 6px; } .top nav .dev { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line); } .top nav .page { margin-right: 8px; padding-right: 8px; border-right: 1px solid var(--line); }
.menu { display: none; position: relative; } .menu summary { list-style: none; display: grid; gap: 5px; align-content: center; padding: 0 12px; min-height: 44px; min-width: 44px; border: 1px solid var(--line); cursor: pointer; } .menu summary::-webkit-details-marker { display: none; } .menu summary span { width: 20px; height: 2px; background: var(--sig); }
.menu ul { position: absolute; right: 0; top: 52px; background: var(--panel); border: 1px solid var(--sig); padding: 6px 18px; list-style: none; margin: 0; min-width: 240px; } .menu li a { display: flex; align-items: center; min-height: 44px; text-decoration: none; text-transform: uppercase; font-size: 13px; letter-spacing: .1em; }
.menu li.dev { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; } .menu li.page { border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 4px; }

/* ---------- shared pieces ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; text-decoration: none; text-align: center; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: background .2s, color .2s; }
.btn.gold { background: var(--sig); color: var(--void); } .btn.gold:hover { background: var(--cream); }
.btn.line { background: rgba(4,7,6,.72); color: var(--sig); box-shadow: inset 0 0 0 1px var(--sig); } .btn.line:hover { background: rgba(111,227,255,.18); } .btn.sm { min-height: 38px; padding: 0 14px; font-size: 11px; }
.kicker { margin: 0 0 18px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--sig); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); min-width: 40px; }
.big { font-weight: 800; text-transform: uppercase; font-size: clamp(42px, 6.2vw, 96px); line-height: .9; letter-spacing: -.01em; margin: 0 0 24px; }
.mega { font-weight: 900; text-transform: uppercase; font-size: clamp(54px, 10vw, 160px); line-height: .84; letter-spacing: -.03em; margin: 0 0 30px; }
.lede { font-size: clamp(18px, 1.5vw, 22px); max-width: 48ch; color: var(--dim); margin: 0 0 30px; }
.more { font-family: var(--mono); text-transform: uppercase; font-size: 12px; letter-spacing: .1em; color: var(--sig); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .more::after { content: "\2197"; margin-left: 6px; font-family: var(--mono); } .more:hover { color: var(--cream); }
.corner { position: absolute; width: 22px; height: 22px; border-color: var(--sig); border-style: solid; z-index: 3; pointer-events: none; } .tl { top: 14px; left: 14px; border-width: 2px 0 0 2px; } .tr { top: 14px; right: 14px; border-width: 2px 2px 0 0; } .bl { bottom: 14px; left: 14px; border-width: 0 0 2px 2px; } .br { bottom: 14px; right: 14px; border-width: 0 2px 2px 0; }
@keyframes blink { 50% { opacity: 0; } }

/* The "Tell your agent" box: the sentence copies exactly as it reads. */
.agent { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px; background: rgba(6,13,10,.92); border: 1px solid var(--sig); padding: 12px 12px 12px 16px; max-width: 660px; font-family: var(--mono); }
.agent-label { grid-column: 1 / -1; text-transform: uppercase; font-size: 11px; letter-spacing: .12em; color: var(--sig); } .agent-label::before { content: "> "; }
.agent code { grid-column: 1; font-family: var(--mono); color: var(--cream); min-width: 0; }
.agent .say { display: block; font-size: 19px; line-height: 1.3; } .agent .say::after { content: "\258D"; color: var(--sig); animation: blink 1.1s steps(1) infinite; margin-left: 2px; }
.agent .url { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--dim); overflow-wrap: anywhere; }
.agent .copy { grid-column: 2; grid-row: 2; align-self: center; border: 0; background: var(--sig); color: var(--void); font-family: var(--mono); text-transform: uppercase; font-size: 11px; letter-spacing: .1em; padding: 0 14px; min-height: 44px; min-width: 64px; font-weight: 700; }
.agent .copy:hover { background: var(--cream); }
/* A plain box for other pages: the look of the home page's standards cards. */
.box { background: var(--panel); border: 1px solid var(--line); padding: 24px; display: grid; gap: 12px; align-content: start; } .box h3 { margin: 0; font-size: 24px; font-weight: 800; text-transform: uppercase; } .box p { margin: 0; color: var(--dim); }

/* ---------- bands ---------- */
.band { position: relative; padding: clamp(80px, 9vw, 140px) 0; border-top: 1px solid var(--line); background: var(--shade); }
.band.open { background: transparent; overflow: clip; }
.band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--sig); background: var(--void); padding: 50px 0 36px; font-family: var(--mono); font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; } .foot-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px 40px; align-items: center; } .foot ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; justify-content: flex-end; } .foot ul a { display: flex; align-items: center; min-height: 44px; border: 1px solid var(--line); padding: 0 12px; text-decoration: none; color: var(--cream); } .foot ul a:hover { border-color: var(--sig); }
.foot .um, .foot .indep { grid-column: 1 / -1; margin: 0; text-transform: none; } .foot .um a { color: var(--sig); } .foot .back { grid-column: 1 / -1; color: var(--sig); text-decoration: none; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; } .foot .back::after { content: "\2191"; margin-left: 8px; } .foot .back.home::after { content: none; } .foot .back.home::before { content: "\2190"; margin-right: 8px; }

/* The plain document column (the privacy page): the same header and footer, no scene. */
.plain .top { gap: 12px; }
.pv { position: relative; z-index: 1; padding: clamp(60px, 8vw, 120px) 0 clamp(60px, 8vw, 110px); background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(111,227,255,.08), transparent 60%), var(--void); border-bottom: 1px solid var(--line); }
.pv-in { max-width: 860px; } .pv .big { font-size: clamp(44px, 6vw, 88px); } .pv .lede { max-width: 56ch; color: var(--cream); }
.pv-date { margin: -10px 0 40px; font-family: var(--mono); font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.pv-part { position: relative; border-top: 1px solid var(--line); padding: 26px 0 8px 0; } .pv-part::before { content: ""; position: absolute; left: 0; top: -1px; width: 46px; height: 3px; background: var(--sig); }
.pv-part h2 { margin: 0 0 12px; font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; }
.pv-part p { margin: 0 0 14px; color: var(--dim); max-width: 66ch; }

/* ---------- inner pages: the developers' pages, the tools, the registry (WO-SCRAP-20261027-243) ----------
   The same header and footer; the menu item the page belongs to is marked; under the header, the section's own links
   (.subnav); a page head (.page-head: the kicker, one headline, a lede) with the home page's grid; then the page's body
   (.page-body) in the plain document column (.doc), boxes (.cards, .card), notes and form controls. Every rule here is
   scoped to these classes, so the home page is unchanged. */
/* The current place, in the header and in the menu (N1): the section in view on the home page (design.js marks it while
   the reader scrolls), the section or page an inner page belongs to (topBar's current). */
.top nav a[aria-current] { color: var(--cream); border-color: rgba(111,227,255,.5); background: rgba(111,227,255,.08); }
.menu li a[aria-current] { position: relative; color: var(--cream); background: rgba(111,227,255,.1); margin: 0 -18px; padding: 0 18px; box-shadow: inset 3px 0 0 var(--sig); }
.menu li a[aria-current]::after { content: "You are here"; margin-left: auto; padding-left: 14px; font-size: 10px; letter-spacing: .1em; color: var(--sig); }
.inner { background: var(--void); }
.inner [hidden] { display: none !important; }
.subnav { position: relative; z-index: 2; background: var(--panel); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.subnav .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 6px 0; }
.subnav-home { display: inline-flex; align-items: center; min-height: 40px; color: var(--sig); text-decoration: none; padding-right: 14px; border-right: 1px solid var(--line); } .subnav-home::before { content: "//"; margin-right: 8px; color: var(--dim); }
.subnav ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.subnav ul a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; color: var(--dim); text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.subnav ul a:hover { color: var(--cream); border-color: var(--line); }
.subnav ul a[aria-current="page"] { color: var(--void); background: var(--sig); border-color: var(--sig); }
.subnav ul a[aria-current="true"] { color: var(--cream); border-color: var(--sig); }
.subnav-home[aria-current="page"] { color: var(--cream); }

.page-head { position: relative; overflow: hidden; padding: clamp(52px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); background: radial-gradient(ellipse 70% 80% at 85% 0%, rgba(111,227,255,.10), transparent 62%), var(--void); border-bottom: 1px solid var(--line); }
.page-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 75% 100% at 85% 0%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 75% 100% at 85% 0%, #000 15%, transparent 72%); }
.page-head .wrap { position: relative; }
.page-head h1 { margin: 0 0 22px; max-width: 18ch; font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 5.6vw, 84px); line-height: .92; letter-spacing: -.01em; overflow-wrap: break-word; }
.page-head .lede { margin: 0; max-width: 62ch; color: var(--cream); }
.page-head .lede a { color: var(--sig); text-underline-offset: 3px; }
.page-head code, .card code { font-family: var(--mono); font-size: .8em; color: var(--cream); overflow-wrap: anywhere; }
.page-head .meta { margin: 16px 0 0; font-family: var(--mono); font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; overflow-wrap: anywhere; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.page-head .agent { margin-top: 30px; }
.page-body { padding: clamp(44px, 5.5vw, 80px) 0 clamp(64px, 8vw, 120px); }
.col { max-width: 900px; }

/* the document column: Markdown pages and hand-written docs */
.doc { max-width: 900px; color: var(--dim); overflow-wrap: break-word; }
.doc > :first-child { margin-top: 0; }
.doc h2 { position: relative; margin: 60px 0 16px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--cream); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; overflow-wrap: break-word; }
.doc h2::before { content: ""; position: absolute; left: 0; top: -1px; width: 46px; height: 3px; background: var(--sig); }
.doc > h2:first-child { margin-top: 0; }
.doc h3 { margin: 38px 0 10px; color: var(--cream); font-weight: 800; font-size: 21px; line-height: 1.2; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.doc h4 { margin: 28px 0 8px; font-family: var(--mono); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--sig); }
.doc p { margin: 0 0 16px; max-width: 74ch; }
.doc strong { color: var(--cream); }
.doc a { color: var(--sig); text-decoration-color: rgba(111,227,255,.45); text-underline-offset: 3px; overflow-wrap: anywhere; } .doc a:hover { color: var(--cream); }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 1.3em; max-width: 74ch; } .doc li { margin: 6px 0; } .doc li::marker { color: var(--sig); font-family: var(--mono); }
.doc code { font-family: var(--mono); font-size: .84em; color: var(--cream); background: rgba(111,227,255,.07); border: 1px solid rgba(111,227,255,.14); padding: 1px 5px; overflow-wrap: anywhere; }
.doc pre { margin: 0 0 22px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--sig); overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.55; color: var(--cream); }
.doc pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.doc blockquote { margin: 0 0 20px; padding: 14px 18px; background: var(--panel); border-left: 3px solid var(--gold); color: var(--cream); } .doc blockquote > :last-child { margin-bottom: 0; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.doc img { max-width: 100%; }
.table { margin: 0 0 26px; overflow-x: auto; border: 1px solid var(--line); background: var(--panel); }
.table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.table th { text-align: left; vertical-align: bottom; padding: 11px 14px; font-family: var(--mono); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--sig); background: rgba(111,227,255,.05); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 11px 14px; vertical-align: top; border-top: 1px solid var(--line); color: var(--dim); }
.table tr:first-child td { border-top: 0; }
.table td:first-child { color: var(--cream); }
.table.wide table { min-width: 980px; }
.doc .note, .note-box { margin: 0 0 28px; padding: 16px 20px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); color: var(--cream); max-width: none; }
.doc .source, .page-foot { margin: 56px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; max-width: none; }
.doc .source code, .page-foot code { text-transform: none; }
.doc + .page-foot { margin-top: 14px; padding-top: 0; border-top: 0; }
.page-foot a { color: var(--sig); text-underline-offset: 3px; }

/* boxes: a grid of linked cards (the look of the home page's standards cards) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.card { position: relative; display: grid; gap: 12px; align-content: start; min-height: 100%; padding: 26px 48px 26px 24px; background: var(--panel); border: 1px solid var(--line); color: var(--cream); text-decoration: none; transition: border-color .2s, background .2s; }
a.card::after { content: "\2197"; position: absolute; top: 22px; right: 22px; font-family: var(--mono); color: var(--sig); }
a.card:hover, a.card:focus-visible { border-color: var(--sig); background: rgba(111,227,255,.06); }
.card .n { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--sig); }
.card h2, .card h3 { margin: 0; font-size: clamp(22px, 2vw, 26px); font-weight: 800; text-transform: uppercase; line-height: 1; overflow-wrap: break-word; }
.card h2 a, .card h3 a { text-decoration: none; } .card h2 a::before, .card h3 a::before { content: ""; position: absolute; inset: 0; }
.card p { margin: 0; color: var(--dim); }

/* form controls on the inner pages: the agent box's look */
/* (written with :where, so a page's own rules and the select's arrow below win over these) */
.inner :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px; font: 15px/1.4 var(--mono); color: var(--cream); background-color: rgba(6,13,10,.92); border: 1px solid var(--line); border-radius: 0; }
.inner :where(input, select, textarea)::placeholder { color: rgba(157,177,168,.6); }
.inner :where(input, select, textarea):hover { border-color: rgba(111,227,255,.4); }
.inner :where(input, select, textarea):focus { border-color: var(--sig); outline: none; box-shadow: 0 0 0 1px var(--sig); }
.inner :where(input, select, textarea):focus-visible { outline: none; }
.inner select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--sig) 50%), linear-gradient(135deg, var(--sig) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.inner select option { background: var(--panel); color: var(--cream); }
.inner input[type="file"] { width: 100%; min-width: 0; padding: 10px; font: 14px var(--mono); color: var(--dim); background: rgba(6,13,10,.92); border: 1px dashed rgba(111,227,255,.4); }
.inner input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 0; background: rgba(111,227,255,.14); color: var(--sig); font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.inner input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--sig); }
.inner label { color: var(--cream); }
.inner button:not(.copy) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 0; background: var(--sig); color: var(--void); font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .08em; text-align: center; cursor: pointer; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: background .2s; }
.inner button:not(.copy):hover { background: var(--cream); }
.inner button:disabled { opacity: .55; cursor: progress; }

@media (max-width: 1260px) {
  .top nav, .top > .top-cta { display: none; } .menu { display: block; margin-left: auto; }
}
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr; } .foot ul { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .agent .say { font-size: 16px; }
  .agent { grid-template-columns: 1fr; } .agent .copy { grid-column: 1; grid-row: auto; justify-self: start; }
  .btn { padding: 0 18px; }
  .subnav-home { border-right: 0; padding-right: 0; width: 100%; min-height: 32px; }
  .subnav ul a { padding: 0 8px; }
  .page-head h1 { font-size: clamp(34px, 10vw, 44px); }
  .doc pre { font-size: 12.5px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}