/* The Surface, for the outside doors (Release 0.107; DESIGN.md 3.0 and design 7.1). One small sheet shared by the partner
   portal (customers, agencies, subhaulers) and usable by the gateway: the colour tokens, the three typefaces, the
   question, the figures, lanes of lines on hairlines, the eyebrow, status as a coloured word, one flame per screen,
   the evidence drawer, the dialog. Nothing animates at rest; prefers-reduced-motion turns every transition off.
   Phone (under 700px): rows read as lines, the one action is pinned, drawers and dialogs become sheets, fields are 16px
   and every target is at least 44px. The office's own stylesheets are not loaded here. */
@import url('fonts/highway.css');   /* release 0.111 · W13: the type, self-hosted (/lib/fonts/ on the partner portal and the gateway) — no Google Fonts */
:root {
  /* release 0.112 · R5 (ruling 22): the approved palette — the same K tokens as the office (workspace.css), light by
     default and dark where the reader's device asks; the accent layer (--k-brand…) is the one company branding replaces
     (/lib/appearance.css); statuses and focus are the product's */
  --k-paper: #f5f3ee; --k-surface: #fffefa; --k-surface-hi: #f1efe9; --k-sunk: #ece9e2; --k-ink: #202c30; --k-ink-2: #36454a; --k-sub: #596765; --k-line: #d8dfd9; --k-line-2: rgba(32, 44, 48, .09);
  --k-ok: #2c6b4a; --k-warn: #815319; --k-bad: #a33a2c; --k-info: #3c5a78; --k-focus: #1b6fd0;
  --k-brand: #197733; --k-on-brand: #fffefa; --k-brand-tint: #dfebde; --k-brand-line: rgba(25, 119, 51, .32);   /* release 0.112 · DAYLIGHT: the Ironmark default (was #175b4c) */
  --scrim: rgba(32, 44, 48, .42); --lift: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px -14px rgba(0,0,0,.22);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --k-paper: #151a1d; --k-surface: #1c2326; --k-surface-hi: #282f32; --k-sunk: #1e2225; --k-ink: #e9eeea; --k-ink-2: #d7dfdb; --k-sub: #a9b8b3; --k-line: #35433e; --k-line-2: rgba(53, 67, 62, .6);
  --k-ok: #8fd3ad; --k-warn: #edc27c; --k-bad: #ff9a8f; --k-info: #a9c4e0; --k-focus: #7fb6ff;
  --k-brand: #81e59d; --k-on-brand: #151a1d; --k-brand-tint: #2a3e37; --k-brand-line: rgba(129, 229, 157, .32);
  --scrim: rgba(8, 10, 12, .66); --lift: 0 1px 0 rgba(255,255,255,.04) inset, 0 28px 56px -26px rgba(0,0,0,.9);
  color-scheme: dark; } }
:root {
  --ground: var(--k-paper); --plane: var(--k-surface); --plane-hi: var(--k-surface); --sunk: var(--k-sunk); --pop: var(--k-surface-hi);
  --hair: var(--k-line-2); --hair-2: var(--k-line-2); --hair-3: var(--k-line);
  --ink: var(--k-ink); --ink-2: var(--k-ink-2); --ink-3: var(--k-sub); --ink-4: var(--k-sub);
  --silver: var(--k-sub); --champagne: var(--k-brand); --champagne-2: var(--k-brand); --cool: var(--k-info); --flame: var(--k-brand); --flame-ink: var(--k-brand);
  --ok: var(--k-ok); --warn: var(--k-warn); --bad: var(--k-bad);
  --ui: "Barlow", "Highway Symbols", system-ui, -apple-system, sans-serif; --disp: "Barlow Semi Condensed", "Highway Symbols", system-ui, sans-serif; --mono: "Overpass Mono", "Highway Symbols", ui-monospace, Menlo, monospace; --brandf: "Inter Tight", "Barlow", system-ui, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: 14px/1.5 var(--ui); color: var(--ink); background: var(--ground); overflow-x: hidden; }
body::before { content: none; }   /* release 0.112 · R5: calm surfaces, no atmosphere glow */
body > * { position: relative; z-index: 1; }
a { color: var(--ink); text-decoration: none; } a:hover { color: var(--champagne); }
.mono, .num { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
td, th { font-variant-numeric: tabular-nums lining-nums; }   /* release 0.111 · W13: table columns of numbers line up */
.quiet { color: var(--ink-3); font-size: 12.5px; } .sub { color: var(--ink-2); max-width: 64ch; margin: 10px 0 0; }
.eyebrow { font: 500 11px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); }
:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; }   /* focus is the product's, never the company accent */

/* ── the top: the company's name, where you are, who you are ─────── */
.top { display: flex; align-items: center; gap: 16px; padding: 14px 28px 12px; border-bottom: 1px solid var(--hair); }
.top .word { font: 500 12px/1 var(--brandf); letter-spacing: .22em; text-transform: uppercase; color: var(--silver); white-space: nowrap; } .top .word small { display: block; margin-top: 5px; letter-spacing: .12em; color: var(--ink-4); font-size: 11px; }
.top .mark { height: 34px; width: auto; }
.top .grow { flex: 1; }
.top .who { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.places { display: flex; gap: 22px; padding: 0 28px; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; }
.places a { font: 500 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); padding: 13px 0 11px; border-bottom: 1px solid transparent; white-space: nowrap; }
.places a.on { color: var(--champagne); border-bottom-color: var(--champagne); }

/* ── the stage: question → figures → one action → lines ─────────── */
.stage { max-width: 1120px; margin: 0 auto; padding: 30px 28px 80px; }
h1 { font: 300 42px/1.04 var(--disp); letter-spacing: -.01em; margin: 0; text-wrap: balance; } h1 em { font-style: italic; color: var(--champagne); }
h2 { font: 500 22px/1.15 var(--disp); margin: 0; }
.figures { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 26px; }
.fig .n { font: 500 56px/1 var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .fig .l { font: 500 11px/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.fig.warn .n { color: var(--warn); } .fig.bad .n { color: var(--bad); } .fig.ok .n { color: var(--ok); }
.act { margin-top: 26px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ── lanes: an eyebrow, a sentence, lines on hairlines. No boxes, no zebra, no hover boxes. ── */
.lane { margin-top: 38px; }
.lane > .hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; } .lane > .hd .grow { flex: 1; }
.lane > .say { color: var(--ink-2); margin: 0 0 12px; max-width: 70ch; }
.line { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--ink-2); min-height: 44px; }
.line:last-child { border-bottom: 1px solid var(--hair); }
.line > :first-child { color: var(--ink); font-weight: 500; }
.line.open { cursor: pointer; } .line.open:hover > :first-child { color: var(--champagne); }
.line .end { justify-self: end; display: flex; gap: 8px; align-items: center; }
.line.two { grid-template-columns: minmax(0, 1fr) auto; }
.line.three { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; }
.empty { color: var(--ink-3); padding: 12px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
/* tables, where a page still has one, draw as rows on hairlines */
table { border-collapse: collapse; width: 100%; }
thead th { font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); padding: 0 14px 10px 0; border-bottom: 1px solid var(--hair); text-align: left; white-space: nowrap; }
tbody td { padding: 12px 14px 12px 0; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--ink-2); vertical-align: middle; }
tbody tr:first-child td { border-top: 0; } tbody tr:last-child td { border-bottom: 1px solid var(--hair); }
tbody td:first-child { color: var(--ink); font-weight: 500; }

/* ── status is a coloured word ─────────────────────────────────── */
.w { font-weight: 500; white-space: nowrap; } .w.ok { color: var(--ok); } .w.warn { color: var(--warn); } .w.bad { color: var(--bad); } .w.info { color: var(--cool); } .w.quiet { color: var(--ink-3); font-size: inherit; }
.say.ok { color: var(--ok); } .say.warn { color: var(--warn); } .say.bad { color: var(--bad); }

/* ── buttons: one flame per screen; everything else is a hairline ── */
button, .btn { font: 500 13px var(--ui); color: var(--ink); background: linear-gradient(180deg, var(--plane-hi), var(--plane)); border: 1px solid var(--hair-3); border-radius: 9px; min-height: 36px; padding: 0 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: border-color .2s var(--ease), color .2s var(--ease); }
button:hover, .btn:hover { border-color: var(--champagne-2); color: var(--champagne); }
button.sm, .btn.sm { min-height: 30px; padding: 0 11px; font-size: 12px; }
button.ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-3); } button.ghost:hover { border-color: var(--hair-3); color: var(--ink); }
button.primary, .btn.primary { border: 0; color: var(--k-on-brand); font: 600 15px var(--ui); padding: 14px 20px; border-radius: 10px; background: var(--k-brand); box-shadow: none; transition: transform .12s var(--ease); }
button.primary:hover, .btn.primary:hover { color: var(--k-on-brand); transform: translateY(-1px); } button.primary:active { transform: translateY(1px); }
/* only the page's own action carries the flame: a primary inside a lane, a drawer or a form reads as a hairline */
.lane button.primary, .drawer .body button.primary, form.inline button.primary { background: linear-gradient(180deg, var(--plane-hi), var(--plane)); border: 1px solid var(--champagne-2); color: var(--champagne); font: 500 13px var(--ui); padding: 0 14px; min-height: 36px; border-radius: 9px; box-shadow: none; }
button:disabled { opacity: .45; cursor: default; }
button.danger { color: var(--bad); border-color: var(--bad); background: transparent; }

/* ── fields and forms (a form is a plane) ──────────────────────── */
input, select, textarea { font: 14px var(--ui); color: var(--ink); background: var(--sunk); border: 0; box-shadow: 0 0 0 1px var(--k-line); border-radius: 9px; min-height: 38px; padding: 0 12px; width: 100%; }
textarea { padding: 10px 12px; min-height: 80px; } select option { background: var(--plane-hi); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--k-focus), 0 0 0 3px var(--k-brand-tint); }
input[type=checkbox], input[type=radio] { width: 20px; min-height: 20px; height: 20px; padding: 0; accent-color: var(--flame); }
label.f { display: flex; flex-direction: column; gap: 6px; font: 500 11px/1.3 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
label.f > span.h { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink-4); font-weight: 400; }
.plane { background: linear-gradient(160deg, var(--plane-hi), var(--sunk)); border-radius: 14px; box-shadow: var(--lift); padding: 18px 20px; }
form.inline { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; align-items: end; }
.err { color: var(--bad); } .note { color: var(--ink-2); padding: 10px 0; border-top: 1px solid var(--hair); }
.linkbox { font: 12px var(--mono); color: var(--ok); word-break: break-all; padding: 10px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }

/* ── the evidence drawer (desktop: at the right; phone: a sheet) ── */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; opacity: 0; transition: opacity .22s var(--ease); }
.scrim.on { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 41; background: linear-gradient(180deg, var(--plane), var(--ground)); border-left: 1px solid var(--hair); display: flex; flex-direction: column; transform: translateX(24px); opacity: 0; transition: transform .32s var(--ease), opacity .22s var(--ease); }
.drawer.on { transform: none; opacity: 1; }
.drawer .dh { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid var(--hair); } .drawer .dh h2 { flex: 1; }
.drawer .x { min-width: 44px; min-height: 44px; justify-content: center; }
.drawer .body { padding: 6px 24px 28px; overflow-y: auto; flex: 1; }
.drawer .body .lane { margin-top: 24px; }
.drawer .decision { border-top: 1px solid var(--hair); padding: 16px 24px 22px; }

/* ── a dialog in words: what happens, what is kept, what comes next ── */
.dlg { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--scrim); padding: 16px; }
.dlg .inner { width: min(520px, 100%); background: linear-gradient(160deg, var(--plane-hi), var(--sunk)); border-radius: 14px; box-shadow: var(--lift); padding: 22px 24px 18px; }
.dlg .what { color: var(--ink); } .dlg .keeps, .dlg .after { color: var(--ink-3); font-size: 13px; } .dlg .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--pop); color: var(--ink); padding: 12px 18px; border-radius: 12px; box-shadow: var(--lift); z-index: 60; max-width: calc(100vw - 32px); }

/* ── the sign-in and link pages ───────────────────────────────── */
.narrow { max-width: 460px; margin: 0 auto; padding: 44px 20px 60px; }
.narrow form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.narrow button.primary { width: 100%; justify-content: center; min-height: 48px; }

/* ── phone ────────────────────────────────────────────────────── */
@media (max-width: 699px) {
  .top { padding: 12px 16px 10px; gap: 10px; } .top .who { display: none; } .places { padding: 0 16px; gap: 18px; }
  .stage { padding: 22px 16px 120px; }
  h1 { font-size: 32px; } .fig .n { font-size: 38px; } .figures { gap: 12px 26px; }
  .line, .line.two, .line.three { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .line > :nth-child(n+2):not(.end) { grid-column: 1; font-size: 13px; }
  .line .end { grid-column: 2; grid-row: 1 / span 3; }
  thead { display: none; } tbody tr { display: block; padding: 10px 0; border-top: 1px solid var(--hair); } tbody td { display: block; border: 0 !important; padding: 2px 0; }
  input, select, textarea { font-size: 16px; min-height: 44px; }
  button, .btn { min-height: 44px; } button.sm, .btn.sm { min-height: 44px; }
  /* the one action is pinned */
  .act .primary, .pinned { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; justify-content: center; }
  .drawer { top: auto; left: 0; width: 100vw; max-height: 88vh; border-left: 0; border-top: 1px solid var(--hair-3); border-radius: 16px 16px 0 0; transform: translateY(24px); }
  .drawer .dh, .drawer .body, .drawer .decision { padding-left: 16px; padding-right: 16px; }
  .dlg { place-items: end center; padding: 0; } .dlg .inner { border-radius: 16px 16px 0 0; width: 100vw; padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); }
  form.inline { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ═══ release 0.112 · DAYLIGHT (decision 74) — the outside doors in the product's daylight system ═══════════════════════════
   The same concrete-and-graphite tokens as the office (src/office/web/daylight.css, mirrored here because the portal never loads
   the office's sheets): concrete paper, off-white surfaces, the graphite bar with the company's wordmark, Barlow Semi Condensed
   600 headings, mono overlines. Status palette (coordinator, 7 Oct): watch = burnt orange words on a light-yellow tint with
   ochre marks, bad = terracotta, information = slate (Marco, 7 Oct night: earthy and muted — never bright red, yellow or orange). The accent is still --k-brand (Ironmark by default; /lib/appearance.css,
   loaded after this sheet, replaces it with the company's own). The drawing kit (/lib/outside.js · DXK) reads --dxk-*. */
:root {
  --k-paper: #ebe9e4; --k-surface: #f9f8f5; --k-surface-hi: #f2f0eb; --k-sunk: #e2dfd8; --k-ink: #1b1e21; --k-ink-2: #33393d; --k-sub: #5c6164; --k-line: #d5d1c9; --k-line-2: rgba(27, 30, 33, .08);
  --k-ok: #4d6a43; --k-ok-soft: #e3e8da; --k-warn: #7d6020; --k-warm: #f1e9d3; --k-bad: #9a4b2e; --k-bad-soft: #f1e1d8; --k-watch: #c9a24a; --k-info: #4e6470; --k-sand: #8a7f66;
  --k-graphite: #1d2023; --k-graphite-2: #26292d; --k-graphite-3: #303439; --k-on-graphite: #eceae5; --k-on-graphite-2: #b4b8bb; --k-graphite-line: rgba(255, 255, 255, .09);
  --dl-cond: "Barlow Semi Condensed", "Highway Symbols", system-ui, sans-serif; --dl-mono: "Overpass Mono", "Highway Symbols", ui-monospace, monospace;
  --dl-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(27,30,33,.05), 0 6px 18px -12px rgba(27,30,33,.18);
  --dxk-ink: var(--k-ink); --dxk-ink-2: var(--k-ink-2); --dxk-sub: var(--k-sub); --dxk-line: var(--k-line); --dxk-plate: var(--k-surface); --dxk-ok: #4d6a43; --dxk-on-ok: #fff; --dxk-slate: var(--k-info); --dxk-sand: var(--k-sand); --dxk-watch: var(--k-watch); --dxk-bad: var(--k-bad); --dxk-bad-ink: var(--k-bad);
  --dxk-accent: var(--k-brand); --dxk-on-accent: var(--k-on-brand);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --k-paper: #131618; --k-surface: #1a1e21; --k-surface-hi: #22272b; --k-sunk: #0f1214; --k-ink: #eceae5; --k-ink-2: #d3d5d3; --k-sub: #a2a8ab; --k-line: #2f363a; --k-line-2: rgba(255, 255, 255, .07);
  --k-ok: #a8c08f; --k-ok-soft: rgba(168,192,143,.14); --k-warn: #d9b765; --k-warm: rgba(217, 183, 101, .12); --k-bad: #e0937a; --k-bad-soft: rgba(224,147,122,.14); --k-watch: #d9b765; --k-info: #9fb3bf; --k-sand: #d9d0bb; --k-graphite: #0d0f11; --k-graphite-2: #1f2327; --k-graphite-3: #2a2f33;
  --dl-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 22px -14px rgba(0,0,0,.8); --dxk-ok: #a8c08f; --dxk-on-ok: #14181a;
} }
.top { background: var(--k-graphite); border-bottom: 0; color: var(--k-on-graphite); min-height: 60px; position: relative; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--k-brand); opacity: .9; }
.top .word { color: var(--k-on-graphite); font: 600 13px/1.15 var(--brandf); letter-spacing: .16em; } .top .word small { color: var(--k-on-graphite-2); }
.top .who { color: var(--k-on-graphite-2); }
.top button, .top .btn { color: var(--k-on-graphite); background: var(--k-graphite-2); border-color: var(--k-graphite-line); } .top button:hover { color: #fff; border-color: var(--k-on-graphite-2); }
.top select { background: var(--k-graphite-2); color: var(--k-on-graphite); box-shadow: 0 0 0 1px var(--k-graphite-line); }
.places { background: var(--k-surface); border-bottom: 1px solid var(--k-line); gap: 26px; }
.places a { font: 500 14px/1 var(--ui); letter-spacing: .01em; text-transform: none; color: var(--k-sub); padding: 15px 0 13px; border-bottom-width: 3px; }
.places a.on { color: var(--k-ink); border-bottom-color: var(--k-brand); } .places a:hover { color: var(--k-ink); }
.eyebrow { font: 500 11.5px/1.4 var(--dl-mono); letter-spacing: .14em; color: var(--k-sub); }
h1, .r10-h1 { font: 600 40px/1.05 var(--dl-cond); letter-spacing: -.015em; } h1 em { font-style: normal; color: var(--k-sub); font-weight: 500; }
h2, .r10-panel h3, .v10-card h3 { font-family: var(--dl-cond); font-weight: 600; }
.fig .n, .r10-sums .fig .n { font-family: var(--dl-cond); font-weight: 600; }
.stage .r10-sums { background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 14px; box-shadow: var(--dl-shadow); padding: 16px 22px; }
.top #langBtn { color: var(--k-on-graphite); background: var(--k-graphite-2); border: 1px solid var(--k-graphite-line); }
.r10-strip { background: var(--k-warm); box-shadow: inset 3px 0 0 var(--k-watch); }
.w.warn, .say.warn, .fig.warn .n, .r10-sums .fig.warn .n { color: var(--k-warn); } .w.bad, .fig.bad .n, .r10-sums .fig.bad .n { color: var(--k-bad); }
.tg.warn { background: var(--k-warm); } .tg.bad { background: color-mix(in srgb, var(--k-bad) 12%, transparent); }
.narrow { max-width: 480px; margin: 48px auto 60px; padding: 34px 32px 30px; background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 18px; box-shadow: var(--dl-shadow); }
.narrow > .eyebrow:first-child, .narrow > p.eyebrow { display: flex; align-items: center; gap: 10px; } .narrow > p.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--k-brand); }
.narrow h1 { font-size: 34px; }
@media (max-width: 699px) { h1, .r10-h1 { font-size: 30px; } .narrow { margin: 0; border-radius: 0; border-width: 0 0 1px; box-shadow: none; padding: 28px 18px 40px; } .r10-sums { padding: 12px 14px; } }
/* a refused link (used, expired, replaced, not valid): the page says it in words; a drawn broken link leads it */
body > main.narrow:not(:has(form)):not(:has(a))::before { content: ""; display: block; width: 96px; height: 96px; margin: 0 0 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -60 120 120'%3E%3Ccircle r='56' fill='%23f2f0eb' stroke='%23d5d1c9' stroke-width='6'/%3E%3Cg transform='rotate(-45)' fill='none' stroke='%235c6164' stroke-width='6'%3E%3Crect x='-40' y='-10' width='34' height='20' rx='10'/%3E%3Crect x='6' y='-10' width='34' height='20' rx='10'/%3E%3C/g%3E%3Cpath d='M-14 -14 14 14' stroke='%239a4b2e' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-color-scheme: dark) { body > main.narrow:not(:has(form)):not(:has(a))::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -60 120 120'%3E%3Ccircle r='56' fill='%2322272b' stroke='%232f363a' stroke-width='6'/%3E%3Cg transform='rotate(-45)' fill='none' stroke='%23a2a8ab' stroke-width='6'%3E%3Crect x='-40' y='-10' width='34' height='20' rx='10'/%3E%3Crect x='6' y='-10' width='34' height='20' rx='10'/%3E%3C/g%3E%3Cpath d='M-14 -14 14 14' stroke='%23e0937a' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); } }