/* Lyrebird Defence public website. Same look as the portal (tokens and self-hosted fonts from packages/shared). No scripts. */
@font-face { font-family: "Saira Condensed"; font-weight: 600; font-display: swap; src: url("fonts/saira-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 700; font-display: swap; src: url("fonts/saira-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* Red is the enemy, so red is the brand: black and off-white do the work, red marks what matters.
   --accent is red text and lines (lighter in dark mode so it stays readable); --brand is the logo red for filled buttons.
   Light or dark follows the visitor's browser and device setting. */
:root {
  --bg: #eef0ec; --panel: #fbfbf9; --alt: #e4e7e2; --ink: #11181c; --muted: #535e63; --line: #cdd2cd;
  --accent: #c41e2c; --brand: #d3202f; --brand-ink: #fff; --black: #0b0e10;
  --faker: #b3261e; --faker-soft: #f5dcd9; --joker: #8a5f00; --joker-soft: #f5e9c8; --neutral: #2c7a3f; --neutral-soft: #d9ecdc;
  --f-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0e1215; --panel: #161b1f; --alt: #12171a; --ink: #eef0ec; --muted: #9aa4a8; --line: #2a3237;
  --accent: #ef4452; --faker: #f08a80; --faker-soft: #3d1f1c; --joker: #e3b545; --joker-soft: #392e14; --neutral: #79c98c; --neutral-soft: #1c3322;
  color-scheme: dark; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--f-body); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }   /* short pages: the bottom banner and footer sit at the bottom of the window */
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: .005em; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); max-width: 18ch; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); max-width: 26ch; }
h3 { font-size: 1.45rem; font-weight: 600; }
p { margin: 0; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.label { font: 500 .74rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); } .small { font-size: .88rem; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 9; background: var(--panel); padding: 8px 12px; }

.btn { display: inline-block; background: var(--brand); color: var(--brand-ink); border: 1px solid var(--brand); border-radius: 4px; padding: 12px 20px; font-weight: 600; text-decoration: none; }
.btn:hover { background: color-mix(in srgb, var(--brand) 88%, #000); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.btn.sm { padding: 7px 12px; font-size: .9rem; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the header is black in both modes */
.top { position: sticky; top: 0; z-index: 5; background: var(--black); border-bottom: 1px solid #000; }
.bar { display: flex; align-items: center; gap: 24px; padding: 12px 0; }
.brand { font: 700 1.5rem/1 "Archivo", var(--f-display); font-stretch: 125%; letter-spacing: .02em; color: #eef0ec; text-decoration: none; white-space: nowrap; }
.brand .logo { display: grid; justify-items: start; gap: .22em; }
.brand .y { width: .686em; height: .686em; vertical-align: baseline; margin: 0 .06em 0 .08em; }
.brand .y .notch { stroke: var(--black); stroke-width: 1.6; }
.top .btn:focus-visible, .top a:focus-visible { outline-color: #fff; }
/* DEFENCE is set larger than the logo sheet's ratio so it stays legible at header size */
.brand .sub { font-size: .62rem; font-weight: 600; letter-spacing: .42em; color: #d3202f; padding-left: .3em; }
.top nav { display: flex; gap: 20px; margin-left: auto; }
.top nav a { color: #b9c0c3; text-decoration: none; font-weight: 600; font-size: .95rem; }
.top nav a:hover { color: #fff; }
.top nav a { white-space: nowrap; }
@media (max-width: 1320px) { .top nav { gap: 14px; } .top nav a { font-size: .88rem; } }
.top .btn { white-space: nowrap; flex-shrink: 0; }
/* phones and narrow screens: the menu becomes a drop-down under a three-bar button (site.js) */
.menubtn { display: none; }
@media (max-width: 1100px) {
  .top nav { display: none; }
  .menubtn:not([hidden]) { display: grid; place-items: center; margin-left: auto; width: 40px; height: 36px; padding: 0; background: none; border: 1px solid #ffffff33; border-radius: 4px; color: #eef0ec; cursor: pointer; }
  .menubtn[hidden] + .btn { margin-left: auto; }
  .menubtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .menubtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .top.open nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; margin: 0; background: var(--black); border-top: 1px solid #ffffff22; padding: 6px 16px 14px; box-shadow: 0 12px 24px #0006; }
  .top.open nav a { font-size: 1rem; padding: 12px 0; border-bottom: 1px solid #ffffff14; }
  .top.open nav a[aria-current="page"] { box-shadow: none; color: #ef4452; }
}
@media (max-width: 420px) { .bar { gap: 12px; } .bar .btn.sm { padding: 7px 10px; font-size: .84rem; } }

section { padding: clamp(56px, 9vw, 104px) 0; }
section > .wrap { display: grid; gap: 22px; }
section.alt { background: var(--alt); }
.intro { max-width: 68ch; color: var(--muted); font-size: 1.08rem; }
section > .wrap > .label { font-size: 1.1rem; color: var(--accent); }
.hero { padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(20px, 3vw, 32px); }
#what { padding-top: clamp(16px, 3vw, 36px); }
.hero .wrap { gap: 26px; }
.lead { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 60ch; color: var(--muted); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 24px; display: grid; gap: 12px; align-content: start; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.ladder { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 0; counter-reset: r; }
.ladder li { counter-increment: r; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.ladder li::before { content: counter(r); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: grid; place-items: center; font: 600 .78rem var(--f-mono); }
.ladder span { color: var(--muted); font-size: .94rem; }
/* What a threat is / does: the two panels share rows (label, title, intro, five levels, note) so they line up side by side */
.halves > .panel { grid-row: span 9; grid-template-rows: subgrid; row-gap: 12px; }
.halves .ladder { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; } .halves .ladder li { align-content: start; }
/* the Lyrebird and its mission software: the level where both halves meet */
.ladder li.pair { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border-left: 3px solid var(--accent); padding-inline: 10px; margin-inline: -13px -10px; scroll-margin-top: 110px; }
.ladder li.pair::before { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.ladder .pairlink { grid-column: 2; font: 600 .82rem var(--f-body); margin-top: 6px; text-decoration: none; }
.pairbar { position: relative; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border: 1px solid var(--accent); border-radius: 6px; padding: 16px 22px; display: grid; gap: 6px; }
.pairbar p { font-size: 1.02rem; } .pairbar a { text-decoration: none; } .pairbar .plus { font: 700 1.2rem var(--f-display); color: var(--accent); margin: 0 4px; }
.pairbar::before, .pairbar::after { content: ""; position: absolute; bottom: 100%; width: 0; height: 23px; border-left: 2px dashed var(--accent); }
.pairbar::before { left: 25%; } .pairbar::after { left: 75%; }
@media (max-width: 900px) { .pairbar::before, .pairbar::after { display: none; } }

.ids { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: start; }
.ids > div { display: grid; gap: 10px; } .ids ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ids li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; font-size: .94rem; }
.chip { font: 600 .74rem var(--f-mono); letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; text-align: center; }
.chip.faker { background: var(--faker-soft); color: var(--faker); } .chip.joker { background: var(--joker-soft); color: var(--joker); } .chip.neutral { background: var(--neutral-soft); color: var(--neutral); }

.domains { display: grid; gap: 18px; }
.domain { display: grid; gap: 12px; }
.domain > h3 { display: flex; gap: 10px; align-items: baseline; } .domain > h3 span { font: 500 .8rem var(--f-mono); color: var(--muted); }
.classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.class { padding: 16px 18px; gap: 8px; }
.class b { font: 500 .74rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.class ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .93rem; }
.class li { display: flex; justify-content: space-between; gap: 10px; }
.class li em { font: 500 .66rem var(--f-mono); font-style: normal; color: var(--muted); white-space: nowrap; padding-top: 3px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 16px; counter-reset: s; }
.steps li { counter-increment: s; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.steps li::before { content: "0" counter(s); font: 700 2rem var(--f-display); color: var(--accent); }
.steps span { color: var(--muted); font-size: .94rem; }

/* the closing call to action is black in both modes, like the header */
.cta { background: var(--black); color: #eef0ec; }
.cta .intro, .cta .muted { color: #b9c0c3; } .cta .label { color: #ef4452; }
.cta .btn.ghost { color: #eef0ec; border-color: #eef0ec; } .cta .btn:focus-visible { outline-color: #fff; }
footer { padding: 28px 0; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
footer .wrap { justify-content: space-between; } footer b { font-family: var(--f-display); letter-spacing: .08em; color: var(--ink); }
.tag { font: 500 .66rem var(--f-mono); font-style: normal; }

/* hero with the illustrative behaviour map */
.herogrid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; column-gap: 48px; }
.herotext { display: grid; gap: 26px; }
@media (max-width: 700px) { .herogrid { grid-template-columns: 1fr; } }
.map { margin: 0; display: grid; gap: 10px; }
.map svg { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; display: block; }
.map .bg { fill: #14191c; } .map .g { fill: none; stroke: #ffffff12; stroke-width: 1; }
.map .bound { fill: none; stroke: #ffffff55; stroke-dasharray: 6 6; }
.map .t { font: 500 11px var(--f-mono); letter-spacing: .1em; fill: #ffffffcc; }
.map .safe { fill: #4fa3ff1f; stroke: #4fa3ff99; stroke-dasharray: 4 4; } .map .obj { fill: #4fa3ff; }   /* what is being defended is friendly: blue */
.map .trk { fill: none; stroke: #ef4452aa; stroke-width: 3; stroke-linecap: round; }
.map .trk.live { stroke: #ef4452; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 9s linear infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.map .brk path { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.map .dot { fill: #fff; stroke: #ef4452; stroke-width: 3; }
.map figcaption { font-size: .88rem; color: var(--muted); display: flex; gap: 10px; align-items: baseline; }
@media (prefers-reduced-motion: reduce) { .map .mover { display: none; } .map .trk.live { animation: none; stroke-dashoffset: 0; } }

/* hero scene: one silhouette per domain, drawn in the map's style */
.scene { grid-column: 1 / -1; }
.scene .sil { fill: #e3e8e1; } .scene .cut { fill: #14191c; }
.scene .sil-l { fill: none; stroke: #e3e8e1; stroke-width: 4; stroke-linecap: round; } .scene .sil-l.thin { stroke-width: 2; }
.scene .gnd { fill: #ffffff06; stroke: #ffffff55; } .scene .sea { fill: #4fc3ff1a; }
.scene .wave { fill: none; stroke: #4fc3ff88; stroke-width: 2; stroke-linecap: round; }
.scene .trk.run { stroke-dasharray: 2 9; }

/* range check */
.rangeform { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: end; }
.rangeform label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.rangeform input { font: 500 1.1rem var(--f-mono); padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); width: 100%; }
.rangeform .btn { cursor: pointer; font: inherit; font-weight: 600; }
#range-out { display: grid; gap: 16px; justify-items: start; }
#range-out:empty { display: none; }
.verdict { font-size: 1.15rem; } .verdict b { font: 700 2rem var(--f-display); }
.fits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; width: 100%; }
.fit { gap: 6px; border-top-width: 4px; } .fit.ok { border-top-color: var(--neutral); } .fit.warn { border-top-color: var(--joker); } .fit.bad { border-top-color: var(--faker); }
.fit ul { margin: 4px 0 0; padding-left: 18px; font-size: .9rem; display: grid; gap: 2px; }


/* Who it's for: three across, then two wider cards, so five fill two even rows */
.who { grid-template-columns: repeat(6, 1fr); } .who > :nth-child(-n+3) { grid-column: span 2; } .who > :nth-child(n+4) { grid-column: span 3; }
@media (max-width: 820px) { .who { grid-template-columns: 1fr; } .who > * { grid-column: auto !important; } }
/* the mapping interface illustration */
.sw { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.planner { grid-column: 1 / -1; width: min(100%, 720px); justify-self: center; }
.map .area { fill: #ffffff0a; stroke: #ffffff66; stroke-dasharray: 6 6; }
.map .trk.plan { stroke: #ef4452; } .map .trk.brkpath { stroke: #ffffffaa; stroke-dasharray: 6 5; }
.map .wp circle { fill: #14191c; stroke: #ef4452; stroke-width: 2.5; } .map .wp text { font: 600 11px var(--f-mono); fill: #fff; text-anchor: middle; }
.map .panelui rect { fill: #0b0e10ee; stroke: #ffffff55; } .map .v { font: 600 13px var(--f-body); fill: #ff6b77; }

/* updates and privacy pages */
.prose { max-width: 760px; } .prose h2 { font-size: 1.6rem; margin-top: 12px; } .prose p { color: var(--ink); }
.release { gap: 10px; } .rel { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: .94rem; }

/* track identity switcher on the hero map */
.idsw { display: flex; flex-wrap: wrap; gap: 6px; } .idsw[hidden] { display: none; }
.idsw button { display: inline-flex; gap: 6px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 4px; font: 500 .82rem var(--f-body); color: var(--muted); cursor: pointer; }
.idsw button[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 1px var(--accent); }
.map .off { display: none; }

/* scenarios: a diagram per card, tracks in the track-identity colours; two by two */
.sc { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.sc .panel > svg { width: calc(100% + 48px); height: auto; margin: -24px -24px 4px; border-radius: 6px 6px 0 0; display: block; }
.sc .f, .sc .j, .sc .n { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.sc .f { stroke: #ef4452; } .sc .j { stroke: #e3b545; } .sc .n { stroke: #79c98c; stroke-dasharray: 5 6; }
.sc .x path { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.sc .cover { fill: none; stroke: #ffffff22; stroke-width: 14; stroke-linecap: round; }
.sc .land { fill: #ffffff14; stroke: #ffffff44; }
.sc .sea { fill: #4fc3ff1f; } .sc .wave { fill: none; stroke: #4fc3ff88; stroke-width: 1.5; stroke-linecap: round; }
.sc .threats { font-weight: 600; font-size: .95rem; }
.sc .idrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .93rem; }
.sc .idrows li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; }
.sc .levels { display: flex; flex-wrap: wrap; gap: 6px; }
.sc .levels span { font: 500 .7rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--muted); }
.sc .measures { font-size: .93rem; color: var(--muted); }
.sc .measures b { font: 500 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-right: 8px; }
.sc dl { margin: 0; display: grid; gap: 8px; } .sc dt { font: 500 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .sc dd { margin: 0; font-size: .93rem; }

/* coming-soon banners, top and bottom of every page */
.soon { background: #d3202f; color: #fff; text-align: center; padding: 8px 16px; font-size: .9rem; }
.soon b { font: 600 .74rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; margin-right: 10px; }
.soon a { color: #fff; font-weight: 600; }
.soon + footer { border-top: 0; }

/* Threat Library grid: one row per threat, a column per level of What it is / What it does */
.fidwrap { padding: 0; overflow-x: auto; }
.fid { border-collapse: collapse; width: 100%; font-size: .9rem; }
.fid th, .fid td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.fid thead th { font: 500 .66rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; }
.fid thead .grp { color: var(--accent); border-bottom: 2px solid var(--accent); }
.fid thead th:first-child, .fid tbody th { text-align: left; }
.fid tbody th { font-weight: 600; min-width: 220px; }
.fid .g { border-left: 1px solid var(--line); }
.fid tr.cls th { font: 500 .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--alt); }
.fid td { font-size: 1rem; width: 7%; }
.fid .ok, .fidkey .ok { color: var(--neutral); font-weight: 700; } .fid .dev, .fidkey .dev { color: var(--joker); }
.fid .plan, .fidkey .plan { color: var(--muted); } .fid .na, .fidkey .na { color: var(--line); }
.fidkey { font-size: .88rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.fidkey span { font-size: 1rem; margin-left: 12px; } .fidkey span:first-child { margin-left: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.libbar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.libsearch { flex: 1 1 320px; max-width: 440px; }
.libsearch input { width: 100%; font: inherit; padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); }
.libsearch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.libsearch[hidden], .domain[hidden] { display: none; }
.trust { grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr)); }
.flag { width: 1.9em; height: .95em; vertical-align: -.1em; margin-right: .35em; border-radius: 1px; box-shadow: 0 0 0 1px var(--line); }
.top nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 #ef4452; }
/* customer sign-in: an outlined button in the header on desktop, the last item of the drop-down menu on phones */
.top .btn.signin { color: #eef0ec; border-color: #ffffff55; } .top .btn.signin:hover { border-color: #fff; background: #ffffff14; }
.top nav .navsignin { display: none; }
@media (max-width: 1100px) { .top .btn.signin { display: none; } .top.open nav .navsignin { display: block; color: #eef0ec; } }
.plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .plans .label { color: var(--accent); }

/* Liquid glass: frosted, translucent panels for chrome and overlays only (header, phone menu, map controls).
   Content stays solid. Solid fallback where the blur isn't supported or the device asks for less transparency. */
:root { --glass: rgba(11, 14, 16, .88); --glass-edge: rgba(255, 255, 255, .14); --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .10); }
.top { background: var(--glass); border-bottom-color: var(--glass-edge); box-shadow: var(--glass-shine), 0 6px 24px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
@media (max-width: 1100px) { .top.open nav { background: rgba(11, 14, 16, .80); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border-top-color: var(--glass-edge); } }
/* the FAKER / JOKER / NEUTRAL switch floats over the hero map as glass pills on wider screens */
@media (min-width: 701px) {
  .mapstage { position: relative; }
  .mapstage > .idsw { position: absolute; bottom: 12px; right: 12px; font-size: .9em; z-index: 1; padding: 5px; border-radius: 999px; background: rgba(20, 25, 28, .55);
    border: 1px solid var(--glass-edge); box-shadow: var(--glass-shine), 0 8px 24px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
  .mapstage > .idsw button { background: transparent; border-color: transparent; color: #c9cfd2; }
  .mapstage > .idsw button[aria-pressed="true"] { background: rgba(255, 255, 255, .10); border-color: #ef4452; color: #fff; box-shadow: 0 0 0 1px #ef4452; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top, .top.open nav { background: var(--black); } .mapstage > .idsw { background: #14191c; }
}
@media (prefers-reduced-transparency: reduce) {
  .top, .top.open nav { background: var(--black); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mapstage > .idsw { background: #14191c; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-color-scheme: dark) { :root { --glass: rgba(11, 14, 16, .72); } }   /* over a dark page the glass can be clearer */
@media (min-width: 701px) { .mapstage > .idsw button { font-size: .78rem; padding: 3px 9px 3px 3px; } }

/* Wallpaper: threat plan-view outlines (wallpaper.svg, drawn by build_library_sql.py) as a faint fixed layer behind the
   page. Content scrolls over it; solid panels and shaded sections sit on top. Inverted to light lines in dark mode. */
:root { --wall: .045; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("wallpaper.svg") 0 0 / 640px 640px repeat; opacity: var(--wall); }
@media (prefers-color-scheme: dark) { body::before { filter: brightness(0); --wall: .4; } }   /* dark mode: pure black lines, a darker engraving rather than light lines on top */
@media print { body::before { display: none; } }