/* The blueprint store's own layer over the brand shell (vendor/metrale-brand: tokens, header,
   cards, tables, chips). Colours come from the brand tokens; the only values defined here are
   the data-visualisation roles (layer kinds and categorical series), in both themes, which the
   server-rendered strips and the 3D view (graph/palette.js reads them) share. */

:root {
  /* layer kinds: linear-attention mixers, attention mixers, MoE FFN, dense FFN, embed/head */
  --k-linear: #ee7a3c;
  --k-attention: #5b9dff;
  --k-moe: #4fd1b0;
  --k-dense: #d7e37f;
  --k-io: #e0729a;
  /* categorical series for precision / family / compute colourings (hue-spaced, ~equal lightness) */
  --cat-0: #ee7a3c; --cat-1: #5b9dff; --cat-2: #4fd1b0; --cat-3: #d7e37f; --cat-4: #e0729a; --cat-5: #a98bff;
  --cat-6: #f2b34b; --cat-7: #6fd36a; --cat-8: #ff8f7a; --cat-9: #7ad7f0; --cat-10: #c9a27a; --cat-11: #f08fd8;
  --cat-none: #6b7380;
  --stage-top: #121923;
  --stage-bottom: #0a0e13;
  --edge: #6d7a8c;
}
[data-theme="light"] {
  --k-linear: #b8501d; --k-attention: #2f63c8; --k-moe: #13846a; --k-dense: #7a8410; --k-io: #b23a69;
  --cat-0: #b8501d; --cat-1: #2f63c8; --cat-2: #13846a; --cat-3: #7a8410; --cat-4: #b23a69; --cat-5: #6b4fd0;
  --cat-6: #a86a00; --cat-7: #2e8a2a; --cat-8: #c4402a; --cat-9: #1a7d99; --cat-10: #8a6a45; --cat-11: #a8358f;
  --cat-none: #8d939c;
  --stage-top: #fbfaf8; --stage-bottom: #efede8; --edge: #8a919b;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --k-linear: #b8501d; --k-attention: #2f63c8; --k-moe: #13846a; --k-dense: #7a8410; --k-io: #b23a69;
    --cat-0: #b8501d; --cat-1: #2f63c8; --cat-2: #13846a; --cat-3: #7a8410; --cat-4: #b23a69; --cat-5: #6b4fd0;
    --cat-6: #a86a00; --cat-7: #2e8a2a; --cat-8: #c4402a; --cat-9: #1a7d99; --cat-10: #8a6a45; --cat-11: #a8358f;
    --cat-none: #8d939c;
    --stage-top: #fbfaf8; --stage-bottom: #efede8; --edge: #8a919b;
  }
}

/* script-dependent controls are hidden without script; the no-script notes hide with it */
:root:not(.mb-js) .needs-js { display: none !important; }
:root.mb-js .needs-nojs { display: none !important; }

.store-main { outline: none; }
.mb code { overflow-wrap: anywhere; }
.k-linear { fill: var(--k-linear); background: var(--k-linear); }
.k-attention { fill: var(--k-attention); background: var(--k-attention); }
.k-moe { fill: var(--k-moe); background: var(--k-moe); }
.k-dense { fill: var(--k-dense); background: var(--k-dense); }
.k-io { fill: var(--k-io); background: var(--k-io); }
.hash { font-size: .85em; color: var(--t2); }

/* ---- catalogue hero ---------------------------------------------------------------------- */
.store-hero { margin-bottom: 20px; }
.store-hero h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); letter-spacing: -0.025em; max-width: 20ch; margin-left: auto; margin-right: auto; }
.store-hero .mb-lede { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); max-width: 66ch; }
.store-stats { max-width: 760px; margin: 28px auto 0; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: left; }
.store-stats dd { font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.store-notice { max-width: 880px; margin: 8px auto 0; }

/* ---- catalogue toolbar and filters -------------------------------------------------------- */
.bp-toolbar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.bp-toolbar h2 { margin: 0; }
.bp-filters { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(140px, 1fr)) auto; gap: 10px; align-items: end; }
.bp-filter label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.bp-filter .mb-input { min-height: 44px; font-size: 15px; }
.bp-filters button[type="reset"] { min-height: 44px; }
.bp-count { margin: 8px 0 14px; }

/* ---- the cards ------------------------------------------------------------------------------ */
.bp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.bp-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 18px; border-radius: 16px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: var(--shadow-sm);
  transition: border-color .2s, transform .2s, box-shadow .2s; }
.bp-card:hover, .bp-card:focus-within { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); box-shadow: var(--shadow); transform: translateY(-2px); }
.bp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bp-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ch-gold-text); }
.bp-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.bp-status-lg { font-size: 12px; padding: 0 12px; min-height: 36px; border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--border)); border-radius: 999px; }
.bp-title { margin: 2px 0 0 !important; font-size: 1.35rem !important; }
.bp-title a { color: var(--t1); text-decoration: none; }
.bp-title a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } /* the whole card is the link */
.bp-title a:focus-visible { outline: none; }
.bp-card:has(.bp-title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.bp-recipe { margin: -6px 0 0 !important; color: var(--t3); font-size: 13px; }
.bp-strip { display: block; width: 100%; height: 30px; }
.bp-strip-lg { height: 44px; }
.bp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.bp-facts dt { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.bp-facts dd { margin: 2px 0 0; color: var(--t1); font-size: 14px; }
.bp-facts code { font-size: 12.5px; }
.bp-dim { color: var(--t3); font-size: 12.5px; }
.bp-perf { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; color: var(--t2); }
.bp-perf strong { color: var(--t1); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.bp-perf-none { color: var(--t3); }

/* a number and its fingerprint: the tooltip opens on hover and on keyboard focus */
.fp { position: relative; z-index: 1; cursor: help; border-bottom: 1px dotted var(--t3); }
.bp-perf { position: relative; }
.fp-tip { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; width: min(340px, 86vw); padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border-strong); background: var(--card-2); box-shadow: var(--shadow-lg); color: var(--t2); font-size: 12.5px;
  visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; }
/* a bridge over the gap, so the pointer can move onto the tip and select its text (WCAG 1.4.13) */
.fp-tip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.bp-perf:hover .fp-tip, .bp-perf:focus-within .fp-tip { visibility: visible; opacity: 1; transform: none; }
.bp-perf.fp-off .fp-tip { visibility: hidden; opacity: 0; }
.fp-tip-title { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ch-gold-text); }
.fp-tip dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.fp-tip dt { color: var(--t3); font-family: var(--font-mono); }
.fp-tip dd { margin: 0; }
.fp-tip-src { display: block; margin-top: 6px; color: var(--t3); overflow-wrap: anywhere; }

/* ---- blueprint page ---------------------------------------------------------------------- */
.store-blueprint .mb-main { max-width: 1440px; }
.bp-head h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); margin-bottom: 4px; }
.bp-sub { color: var(--t2); margin: 0 0 12px !important; }
.bp-exec { text-transform: none; letter-spacing: .02em; }
.bp-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 22px; }
.bp-dl-note { font-size: 13.5px; }
.bp-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.bp-nav { margin: 22px 0 8px; }
.bp-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase;
  border: 1px solid var(--border-strong); }
.bp-badge-preliminary { color: var(--ch-gold-text); border-color: color-mix(in srgb, var(--amber) 50%, var(--border)); }
.bp-badge-measured, .bp-badge-certified { color: var(--ch-green-text); border-color: color-mix(in srgb, var(--green) 50%, var(--border)); }
.bp-note { min-width: 260px; max-width: 520px; font-size: 13.5px; }
.fp-cell { display: grid; gap: 2px; }
.fp-kv { display: flex; gap: 8px; font-size: 12px; white-space: nowrap; }
.fp-kv > span { min-width: 48px; color: var(--t3); font-family: var(--font-mono); }
.bp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.bp-two h3 { margin-top: 0; }
.bp-kv { display: grid; gap: 10px; margin: 0; }
.bp-kv dt { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.bp-kv dd { margin: 2px 0 0; color: var(--t1); }
.bp-details { margin: 12px 0; }
.bp-details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--t1); }
.bp-cmds { margin: 0; padding-left: 1.2em; font-size: 13px; display: grid; gap: 4px; }
.bp-settings { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-setting code { display: inline-block; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); font-size: 12.5px; }
.bp-route { display: block; margin-top: 4px; font-size: 12.5px; color: var(--t3); }
.k-mod { color: var(--t3); }
.sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }

/* ---- the architecture viewer ------------------------------------------------------------- */
.bp-viewer { margin-top: 30px; }
.viewer-head h2 { margin: 0 0 4px; }
.viewer-head p { margin: 0 0 14px; }
.viewer { border: 1px solid var(--border); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.viewer-toolbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg2); }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--sunk); }
.seg-btn { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--t2); font-weight: 600; font-size: 14px; cursor: pointer; }
.seg-btn[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent); }
.viewer-color { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--t2); }
.viewer-color .mb-input { width: auto; min-height: 38px; padding: 6px 10px; font-size: 14px; }
.viewer-toolbar .mb-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent) !important; }
.viewer-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.viewer-stage { position: relative; height: clamp(440px, 70vh, 780px); background: radial-gradient(120% 90% at 30% 0%, var(--stage-top), var(--stage-bottom)); overflow: hidden; }
.viewer-stage canvas, .viewer-stage svg.viewer-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.viewer-stage canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); }
.viewer-static { position: absolute; inset: auto 0 0 0; padding: 18px 20px; }
.viewer-static-note { margin: 10px 0 0 !important; }
.viewer.is-live .viewer-static { display: none; }
.viewer-status { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--t2); font-size: 14px; text-align: center; max-width: 86%; }
.viewer-status:empty { display: none; }
.viewer-status .mb-btn { pointer-events: auto; }
.viewer-tip { position: absolute; z-index: 5; max-width: 320px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--card-2) 94%, transparent); box-shadow: var(--shadow-lg); color: var(--t2); font-size: 12.5px; pointer-events: none; }
.viewer-tip strong { display: block; color: var(--t1); font-family: var(--font-mono); font-size: 12.5px; margin-bottom: 2px; overflow-wrap: anywhere; }
.viewer-tip span { display: block; }
.viewer-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.v-label { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; color: var(--t2);
  text-shadow: 0 0 4px var(--stage-bottom), 0 0 2px var(--stage-bottom); will-change: transform; }
.v-label-title { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--t1); letter-spacing: .01em; }
.v-label-title small { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--t3); }
.v-label-layer { font-size: 10px; color: var(--t3); }
.viewer-side { display: flex; flex-direction: column; min-height: 0; max-height: clamp(440px, 70vh, 780px); border-left: 1px solid var(--border); background: var(--card); }
.viewer-legend { padding: 14px 16px; border-bottom: 1px solid var(--border); overflow-y: auto; max-height: 45%; }
.viewer-legend h3, .viewer-detail h3 { margin: 0 0 8px; font-size: 12px; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.legend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legend-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 3px 8px; border: 0; border-radius: 8px; background: transparent;
  color: var(--t2); font-size: 13px; text-align: left; cursor: pointer; }
.legend-item:hover { background: var(--card-2); }
.legend-item[aria-pressed="true"] { background: var(--accent-soft); color: var(--t1); }
.legend-item .sw { flex: none; margin: 0; width: 12px; height: 12px; border-radius: 4px; }
.legend-item .n { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--t3); }
.legend-hint { margin: 8px 0 0; font-size: 12px; color: var(--t3); }
.viewer-detail { padding: 14px 16px; overflow-y: auto; flex: 1; font-size: 13.5px; outline: none; }
.viewer-detail .d-id { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--t1); overflow-wrap: anywhere; margin: 0 0 4px; }
.viewer-detail dl { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; margin: 10px 0 0; }
.viewer-detail dt { color: var(--t3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.viewer-detail dd { margin: 0; color: var(--t1); overflow-wrap: anywhere; }
.viewer-detail .steps { display: flex; flex-wrap: wrap; gap: 4px; }
.viewer-detail .d-math { margin-top: 14px; }
.viewer-detail .steps code { padding: 1px 6px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--border); font-size: 11.5px; }
.viewer-nodes { padding: 12px 14px 14px; border-top: 1px solid var(--border); background: var(--bg2); }
.viewer-nodes label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.viewer-nodes .mb-input { max-width: 420px; min-height: 40px; font-size: 14px; }
.node-list { list-style: none; margin: 10px 0 0; padding: 4px; max-height: 220px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); outline: none; }
.node-list:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.node-list li { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 8px; border-radius: 7px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; color: var(--t2); }
.node-list li .sw { flex: none; margin: 0; }
.node-list li:hover { background: var(--card-2); }
.node-list li.is-active { background: var(--accent-soft); color: var(--t1); box-shadow: inset 0 0 0 1px var(--accent); }
.node-list li[aria-selected="true"] { color: var(--t1); font-weight: 600; }
.node-list .empty { color: var(--t3); font-family: var(--font-sans); cursor: default; }

@media (max-width: 1100px) {
  .bp-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-search { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .viewer-body { grid-template-columns: 1fr; }
  .viewer-side { border-left: 0; border-top: 1px solid var(--border); max-height: none; }
  .viewer-legend { max-height: none; }
  .legend-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .viewer-stage { height: clamp(360px, 62vh, 560px); }
  .viewer-detail { max-height: 360px; }
}
@media (max-width: 640px) {
  .mb code, .mb .mb-mono { font-size: 12px; } /* the brand's 11.7px mono is below the legible floor on phones */
  .v-label-title { font-size: 11px; }
  .v-label-title small { font-size: 9.5px; }
  .store-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-stats dd { font-size: 1.5rem; }
  .bp-filters { grid-template-columns: 1fr; }
  .bp-facts { grid-template-columns: 1fr; }
  .viewer-toolbar { gap: 8px; }
  .seg-btn { padding: 0 10px; font-size: 13px; }
  .bp-head .mb-eyebrow { font-size: 10.5px; }
  .store-preview-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-card, .fp-tip { transition: none; }
  .bp-card:hover, .bp-card:focus-within { transform: none; }
}

/* the 2D (SVG) view */
.viewer-tip { left: 0; top: 0; }
svg.viewer-svg { cursor: grab; }
svg.viewer-svg .e-dim { stroke: var(--edge); opacity: .55; }
svg.viewer-svg .e-fused { stroke: var(--accent); }
svg.viewer-svg .e-hit { stroke: transparent; fill: none; pointer-events: stroke; cursor: pointer; }
svg.viewer-svg .e-hit:hover { stroke: var(--accent); stroke-opacity: .25; }
svg.viewer-svg .g-frame { fill: var(--accent-soft); stroke: var(--accent); stroke-width: .05; stroke-opacity: .6; }
svg.viewer-svg circle { cursor: pointer; stroke: var(--stage-bottom); stroke-width: .05; }
svg.viewer-svg circle.is-selected { stroke: var(--accent); stroke-width: .16; }
svg.viewer-svg .v-svg-title { fill: var(--t1); font-family: var(--font-sans); font-size: .9px; font-weight: 700; }
.bp-nowrap { white-space: nowrap; }

/* ---- header nav and the "Why blueprints?" page --------------------------------------------- */
.store-nav { margin-left: 8px; }
.why-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 0; }
.store-hero-actions { margin-top: 18px; }
.why-hero { margin-bottom: 18px; }
.why-hero h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.06; }
.why-accent { color: var(--accent); }
.why-hero .mb-lede { max-width: 62ch; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.why-status { max-width: 880px; margin: 0 auto 8px; }
.why-sub { max-width: 72ch; margin: -4px 0 18px; }
.why-table th[scope="row"] { width: 16%; white-space: nowrap; color: var(--t1); font-weight: 650; vertical-align: top; }
.why-table td { vertical-align: top; line-height: 1.55; }
.why-table td.why-recipe { color: var(--t3); width: 34%; }
.why-table td.why-bp { color: var(--t1); border-left: 2px solid var(--accent); }
.why-table thead th:last-child { color: var(--accent); }
.why-drift { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.why-drift-text p { color: var(--t2); line-height: 1.65; max-width: 60ch; }
.why-drift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.why-drift-list li { display: grid; grid-template-columns: 3.2ch auto 1fr auto; gap: 10px; align-items: baseline; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.why-drift-list li:last-child { border-color: var(--accent); }
.why-drift-n { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t1); }
.why-drift-list span:nth-child(2) { color: var(--t3); font-size: 13px; }
.why-drift-list code { font-size: 12.5px; color: var(--t2); justify-self: end; }
.why-drift-list time { font-family: var(--font-mono); font-size: 12px; color: var(--t3); }
.why-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.why-pillar { padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); }
.why-pillar h3 { margin: 14px 0 8px; font-size: 1.05rem; }
.why-pillar p { margin: 0; color: var(--t2); line-height: 1.6; font-size: 14.5px; }
.why-icon { width: 40px; height: 40px; padding: 8px; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.kbp-figure { display: grid; gap: 12px; max-width: 1000px; }
.kbp-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--border-strong); border-radius: 16px; overflow: hidden;
  font-family: var(--font-mono); }
.kbp-part { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--card); }
.kbp-part:first-child { border-top: 0; }
.kbp-part p { margin: 0; font-family: var(--font-sans); color: var(--t2); line-height: 1.55; font-size: 14.5px; }
.kbp-name { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.kbp-name strong { color: var(--t1); font-size: 14px; letter-spacing: .02em; }
.kbp-hdr, .kbp-body { box-shadow: inset 4px 0 0 var(--accent); }
.kbp-body { padding-top: 28px; padding-bottom: 28px; background: linear-gradient(90deg, var(--accent-soft), var(--card) 60%); }
.kbp-sig { background: var(--card-2); }
.kbp-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--t3); }
.kbp-tag.kbp-signed { border-color: var(--accent); color: var(--accent); }
.kbp-key { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; color: var(--t3); }
.kbp-key span { padding-left: 14px; border-left: 4px solid var(--border-strong); }
.kbp-key .kbp-key-signed { border-left-color: var(--accent); }
.why-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: s; }
.why-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.why-steps li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; width: 8px; height: 2px; background: var(--accent); }
.why-steps strong { color: var(--t1); }
.why-steps li > span:last-child { color: var(--t2); font-size: 14px; line-height: 1.5; }
.why-step-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.why-cta { margin: 48px auto 8px; padding: 36px 24px; max-width: 880px; text-align: center; border: 1px solid var(--border-strong); border-radius: 20px;
  background: radial-gradient(120% 140% at 50% 0%, var(--accent-soft), var(--card) 70%); }
.why-cta h2 { margin: 0 0 8px; }
.why-cta p { color: var(--t2); max-width: 56ch; margin-left: auto; margin-right: auto; }
@media (max-width: 1000px) {
  .why-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-steps { grid-template-columns: 1fr; }
  .why-steps li:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -9px; width: 2px; height: 8px; }
  .why-drift { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .why-pillars { grid-template-columns: 1fr; }
  .kbp-part { grid-template-columns: 1fr; gap: 8px; }
  .why-table, .why-table tbody, .why-table tr, .why-table th, .why-table td { display: block; width: auto; }
  .why-table thead { display: none; }
  .why-table tr { padding: 14px 16px; border-top: 1px solid var(--border); }
  .why-table tr:first-child { border-top: 0; }
  .why-table th[scope="row"], .why-table td { padding: 0; border: 0; }
  .why-table th[scope="row"] { width: auto; margin-bottom: 8px; }
  .why-table td.why-recipe { width: auto; margin-bottom: 10px; }
  .why-table td.why-bp { padding-left: 12px; border-left: 2px solid var(--accent); }
  .why-table td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--t3); margin-bottom: 2px; }
  .why-table td.why-bp::before { color: var(--accent); }
  .store-nav { margin-left: 0; }
}

/* the viewer's controls appear once a view has loaded: before that they would do nothing */
.viewer:not(.is-live) .viewer-toolbar, .viewer:not(.is-live) .viewer-nodes { display: none; }
.viewer:not(.is-live) .viewer-side { visibility: hidden; }
@media (max-width: 900px) { .viewer:not(.is-live) .viewer-side { display: none; } }
.why-soon { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px dashed var(--border-strong);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); white-space: nowrap; }
.why-table th .why-soon { display: block; width: max-content; margin: 6px 0 0; }
.why-pillar h3 .why-soon { display: block; width: max-content; margin: 6px 0 0; }
/* panels low on a page: drawn like the brand's cards, but not .mb-card, which the brand's engine check
   (tools/engines.mjs) treats as the page's lead content and expects in the first viewport */
.bp-panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: clamp(20px, 4vw, 32px); }
.bp-panel > :first-child { margin-top: 0; }
/* in-page targets land below the sticky header (one row on desktop, two with the nav on phones) */
[id] { scroll-margin-top: 80px; }
@media (max-width: 640px) { [id] { scroll-margin-top: 156px; } }