/* ==========================================================================
   NVIL Blueprint — project architecture system
   Scoped under .bp. The page keeps the site header and footer; the stage
   between them is a dark engineering sheet in both themes, the way the
   arcade worlds and NVIL Trades are. Tokens come from the site palette;
   only the mono stack is new, and it is the system's own.
   ========================================================================== */

/* The header is a masthead here, as on the trades pages: it scrolls away
   and must not carry a transform or backdrop-filter (see style.css notes). */
body.blueprint-page .header { position: relative; transform: none; }
body.blueprint-page .header:not(.header--menu-open) { background: var(--bg); }
body.blueprint-page .header--hidden { transform: none; pointer-events: auto; }
body.blueprint-page .header--scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 var(--line); }
body.blueprint-page .footer { position: relative; z-index: 1; }

.bp {
  --bp-bg: #0D0D0D;
  --bp-panel: #101013;
  --bp-raised: #141519;
  --bp-line: #2B2E33;
  --bp-line-soft: rgba(244,244,245,.1);
  --bp-ink: #F4F4F5;
  --bp-soft: #A6A9AF;
  --bp-dim: #80848C;
  --bp-red: #E90012;
  --bp-red-hot: #E11436;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bp-cut: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  color-scheme: dark;
  position: relative;
  background: var(--bp-bg);
  color: var(--bp-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.bp *, .bp *::before, .bp *::after { box-sizing: border-box; }
.bp button { font: inherit; color: inherit; }
.bp :focus-visible { outline: 2px solid var(--bp-red); outline-offset: 2px; }

/* ---------- stage: 45 / 55 ---------- */
.bp__stage {
  display: grid;
  grid-template-columns: 45fr 55fr;
  height: calc(100vh - var(--bp-head, 86px));
  min-height: 640px;
}
/* min-height: 0 on both columns matters: without it the sheet's intrinsic
   height stretches the grid row past the stage, the panel grows with it,
   and its sticky step bar ends up pinned below the stage over the footer */
.bp__panel {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.6rem, 3vw, 3rem) clamp(1.4rem, 3.2vw, 3.4rem) 0;
  background: var(--bp-panel);
  border-right: 1px solid var(--bp-line);
  scrollbar-width: thin;
  scrollbar-color: var(--bp-line) transparent;
}
.bp__canvas {
  position: relative;
  display: flex;
  padding: 1.25rem;
  min-width: 0;
  min-height: 0;
  background: var(--bp-bg);
}
.bp__sheet { flex: 1; min-width: 0; display: flex; }
.bp-sheet { width: 100%; height: 100%; display: block; }

/* screen swaps */
.bp-view { min-height: 100%; display: flex; flex-direction: column; transition: opacity .28s var(--ease-out), transform .28s var(--ease-out); }
.bp__panel.is-out .bp-view { opacity: 0; transform: translateX(-12px); }
.bp__panel.is-in .bp-view { opacity: 0; transform: translateX(16px); transition: none; }
.bp-build__step { transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.bp-build__step.is-out { opacity: 0; transform: translateY(8px); }
.bp-build__step.is-in { opacity: 0; transform: translateY(-8px); transition: none; }

/* ---------- type ---------- */
.bp-mono {
  margin: 0;
  font: 500 .72rem/1.5 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bp-ink);
}
.bp-mono--dim { color: var(--bp-dim); }
.bp-mono--kicker { display: flex; align-items: center; gap: .55rem; }
.bp-mono--big { font-size: 1rem; font-weight: 600; letter-spacing: .14em; }
.bp-tri {
  width: 0; height: 0; display: inline-block;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 8px solid var(--bp-red);
}
.bp-h1 {
  margin: 1.4rem 0 1rem;
  font: 800 clamp(2.3rem, 4.1vw, 3.9rem)/1.02 var(--font-display);
  letter-spacing: -.02em; text-transform: uppercase;
}
.bp-h1 em { font-style: normal; color: var(--bp-red); }
.bp-h2 {
  margin: .45rem 0 1.4rem;
  font: 700 clamp(1.45rem, 2.2vw, 2rem)/1.1 var(--font-display);
  letter-spacing: -.01em; text-transform: uppercase;
}
.bp-lede { margin: 0; max-width: 34ch; color: var(--bp-soft); font-size: 1.08rem; line-height: 1.6; }
.bp-hint { margin: 1.2rem 0 0; color: var(--bp-dim); font-size: .86rem; line-height: 1.6; max-width: 52ch; }

/* ---------- buttons ---------- */
.bp .btn[disabled] { opacity: .35; pointer-events: none; }
.bp .btn--ghost { border-color: var(--bp-line); color: var(--bp-ink); }
.bp .btn--ghost:hover { border-color: var(--bp-red); color: var(--bp-red); }
.bp .bp-cta { text-transform: uppercase; letter-spacing: .08em; font-size: .88rem; }
.bp-cta__arrow { display: inline-block; margin-left: .6rem; transition: transform .2s var(--ease-out); }
.bp-cta:hover .bp-cta__arrow { transform: translateX(4px); }
.bp-actions { margin-top: 2.2rem; display: grid; gap: .9rem; justify-items: start; }
.bp-actions--row { grid-auto-flow: column; align-items: center; gap: 1rem; }

/* ---------- intro ---------- */
.bp-intro { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.bp-sys { margin: 1.8rem 0 0; display: grid; gap: .45rem; max-width: 22rem; }
.bp-sys div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--bp-line-soft); }
.bp-sys dt, .bp-sys dd { margin: 0; font: 500 .68rem/1.5 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.bp-sys dt { color: var(--bp-dim); }
.bp-sys dd { color: var(--bp-ink); display: flex; align-items: center; gap: .5rem; }
.bp-live { width: 6px; height: 6px; background: var(--bp-red); box-shadow: 0 0 10px rgba(233,0,18,.8); animation: bp-breathe 3s ease-in-out infinite; }
@keyframes bp-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.bp-intro__note { margin-top: .2rem; }

/* ---------- builder ---------- */
.bp-build { display: flex; flex-direction: column; min-height: 100%; }
.bp-build__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--bp-line); }
.bp-build__ident { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.bp-chip { font: 500 .64rem/1 var(--font-mono); letter-spacing: .16em; padding: .32rem .5rem; border: 1px solid var(--bp-line); color: var(--bp-soft); }
.bp-progress { display: flex; align-items: center; gap: .7rem; }
.bp-progress__n { font: 500 .7rem/1 var(--font-mono); letter-spacing: .16em; color: var(--bp-soft); font-variant-numeric: tabular-nums; }
.bp-progress__line { position: relative; width: 108px; height: 1px; background: var(--bp-line); }
.bp-progress__line i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--bp-red); transition: width .5s var(--ease-out); }
.bp-build__body { padding: 1.5rem 0 1.2rem; }
/* the actions stay in reach while a long step scrolls */
.bp-build__nav {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: auto; padding: 1.1rem 0 1.2rem;
  border-top: 1px solid var(--bp-line);
  background: linear-gradient(180deg, rgba(16,16,19,0) 0, var(--bp-panel) 14px);
  display: flex; justify-content: space-between; gap: 1rem;
}

/* cards */
.bp-grid { display: grid; gap: .7rem; }
.bp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1400px) { .bp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bp-card, .bp-module, .bp-swatchcard {
  position: relative;
  text-align: left;
  background: var(--bp-raised);
  border: 1px solid var(--bp-line);
  clip-path: var(--bp-cut);
  cursor: pointer;
  transition: transform .18s var(--ease-strike), background .2s ease, box-shadow .2s ease;
}
.bp-card { display: grid; gap: .22rem; padding: .95rem 1rem 1rem; min-height: 6.2rem; align-content: start; }
.bp-card--row { min-height: 0; }
.bp-card:hover, .bp-module:hover, .bp-swatchcard:hover { transform: translateY(-2px); background: #17181d; box-shadow: inset 0 0 0 1px rgba(244,244,245,.26); }
.bp-card::after, .bp-module::after, .bp-swatchcard::after {
  content: ""; position: absolute; right: 9px; top: 9px; width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  opacity: 0; transition: opacity .2s ease;
}
.bp-card:hover::after, .bp-module:hover::after, .bp-swatchcard:hover::after { opacity: .5; }
.bp-card[aria-pressed="true"], .bp-module[aria-pressed="true"], .bp-swatchcard[aria-pressed="true"] {
  background: #170a0d;
  box-shadow: inset 0 0 0 1px var(--bp-red), inset 0 0 34px rgba(233,0,18,.16);
}
.bp-card[aria-pressed="true"]::after, .bp-module[aria-pressed="true"]::after, .bp-swatchcard[aria-pressed="true"]::after { opacity: 1; color: var(--bp-red); }
.bp-card__idx { font: 500 .62rem/1 var(--font-mono); letter-spacing: .16em; color: var(--bp-dim); }
[aria-pressed="true"] .bp-card__idx { color: var(--bp-red); }
.bp-card__label { font: 600 .98rem/1.25 var(--font-display); color: var(--bp-ink); }
.bp-card__tag { font-size: .8rem; line-height: 1.4; color: var(--bp-soft); }

.bp-detect {
  margin-top: 1.3rem; padding: .7rem .95rem;
  border-left: 2px solid var(--bp-red);
  background: linear-gradient(90deg, rgba(233,0,18,.08), transparent 70%);
  display: grid; gap: .2rem;
  animation: bp-in .35s var(--ease-out) both;
}
@keyframes bp-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* sitemap list */
.bp-listhead { display: flex; justify-content: space-between; align-items: baseline; margin: 1.1rem 0 .4rem; }
.bp-listhead:first-child { margin-top: 0; }
.bp-list { list-style: none; margin: 0; padding: 0; }
.bp-row {
  display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .7rem;
  padding: .5rem .1rem; border-bottom: 1px solid var(--bp-line-soft);
  color: var(--bp-dim); transition: color .2s ease;
}
.bp-row.is-on { color: var(--bp-ink); }
.bp-row__idx { font: 500 .68rem/1 var(--font-mono); letter-spacing: .12em; color: var(--bp-dim); font-variant-numeric: tabular-nums; }
.bp-row.is-primary .bp-row__idx, .bp-row.is-primary .bp-row__label { color: var(--bp-red); }
.bp-row__label { font: 600 .82rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.bp-row.is-sub .bp-row__label { padding-left: 1rem; }
.bp-row__branch { color: var(--bp-dim); margin-right: .45rem; }
.bp-lock { font: 600 .58rem/1 var(--font-mono); letter-spacing: .18em; padding: .3rem .45rem; border: 1px solid var(--bp-line); color: var(--bp-dim); }
.is-primary .bp-lock { border-color: rgba(233,0,18,.5); color: var(--bp-red); }
.bp-switch {
  position: relative; width: 34px; height: 18px; padding: 0;
  background: var(--bp-bg); border: 1px solid var(--bp-line); cursor: pointer;
  transition: border-color .2s ease;
}
.bp-switch i { position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; background: var(--bp-dim); transition: transform .22s var(--ease-strike), background .2s ease; }
.bp-switch[aria-checked="true"] { border-color: rgba(233,0,18,.55); }
.bp-switch[aria-checked="true"] i { transform: translateX(16px); background: var(--bp-red); box-shadow: 0 0 8px rgba(233,0,18,.7); }

/* systems */
.bp-module { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; padding: .8rem .9rem; }
.bp-module__glyph { width: 24px; height: 24px; position: relative; display: grid; place-items: center; }
.bp-module__glyph::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--bp-soft); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: border-color .2s ease; }
.bp-module__glyph i { width: 6px; height: 6px; background: var(--bp-line); transition: background .2s ease, box-shadow .2s ease; }
.bp-module[aria-pressed="true"] .bp-module__glyph::before { border-color: var(--bp-red); }
.bp-module[aria-pressed="true"] .bp-module__glyph i { background: var(--bp-red); box-shadow: 0 0 8px rgba(233,0,18,.8); }
.bp-module__body { display: grid; gap: .1rem; }
.bp-module__id { font: 500 .6rem/1 var(--font-mono); letter-spacing: .16em; color: var(--bp-dim); align-self: start; }
.bp-module[aria-pressed="true"] .bp-module__id { color: var(--bp-red); }

/* design directions: drawn swatches, not radio buttons */
.bp-swatchcard { padding: 0; display: grid; }
.bp-swatchcard__body { display: grid; gap: .2rem; padding: .8rem .95rem .95rem; }
.bp-swatch { position: relative; height: 74px; background: var(--bp-bg); border-bottom: 1px solid var(--bp-line); overflow: hidden; }
.bp-swatch i { position: absolute; display: block; }
.bp-swatch--minimal i:nth-child(1) { left: 18%; top: 50%; width: 38%; height: 1px; background: var(--bp-soft); }
.bp-swatch--minimal i:nth-child(2) { right: 20%; top: 38%; width: 8px; height: 8px; border: 1px solid var(--bp-soft); }
.bp-swatch--luxury i:nth-child(1) { inset: 10px; border: 1px solid rgba(244,244,245,.55); }
.bp-swatch--luxury i:nth-child(2) { inset: 15px; border: 1px solid rgba(244,244,245,.22); }
.bp-swatch--luxury i:nth-child(3) { left: 50%; top: 50%; width: 22px; height: 1px; background: var(--bp-red); transform: translate(-50%, -50%); }
.bp-swatch--industrial { background: repeating-linear-gradient(90deg, rgba(244,244,245,.05) 0 1px, transparent 1px 12px), var(--bp-bg); }
.bp-swatch--industrial i:nth-child(1) { left: 12px; top: 10px; bottom: 10px; width: 7px; background: var(--bp-soft); }
.bp-swatch--industrial i:nth-child(2) { left: 30px; right: 14px; bottom: 14px; height: 6px; background: rgba(244,244,245,.5); }
.bp-swatch--industrial i:nth-child(3) { left: 30px; width: 34px; top: 14px; height: 6px; background: var(--bp-red); }
.bp-swatch--technology { background: radial-gradient(rgba(244,244,245,.14) 1px, transparent 1px) 0 0 / 12px 12px, var(--bp-bg); }
.bp-swatch--technology i:nth-child(1) { left: 22%; top: 30%; width: 10px; height: 10px; border: 1px solid var(--bp-ink); }
.bp-swatch--technology i:nth-child(2) { left: 54%; top: 58%; width: 10px; height: 10px; border: 1px solid var(--bp-red); }
.bp-swatch--technology i:nth-child(3) { left: calc(22% + 10px); top: calc(30% + 5px); width: calc(32% - 10px); height: 1px; background: rgba(244,244,245,.5); transform-origin: left; transform: rotate(38deg); }
.bp-swatch--corporate i { bottom: 12px; width: 18%; background: rgba(244,244,245,.3); }
.bp-swatch--corporate i:nth-child(1) { left: 14%; height: 46%; }
.bp-swatch--corporate i:nth-child(2) { left: 40%; height: 64%; background: rgba(244,244,245,.55); }
.bp-swatch--corporate i:nth-child(3) { left: 66%; height: 32%; }
.bp-swatch--bold i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 52%; background: var(--bp-red); }
.bp-swatch--bold i:nth-child(2) { left: 60%; right: 12px; top: 45%; height: 8px; background: var(--bp-ink); }

.bp-profile { margin-top: 1.3rem; padding: .9rem 1rem; border: 1px solid var(--bp-line); background: var(--bp-raised); animation: bp-in .35s var(--ease-out) both; }
.bp-spec { margin: .6rem 0 0; display: grid; gap: .3rem; }
.bp-spec div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; }
.bp-spec dt { margin: 0; font: 500 .64rem/1.6 var(--font-mono); letter-spacing: .16em; color: var(--bp-dim); }
.bp-spec dd { margin: 0; font: 600 .8rem/1.6 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- generator ---------- */
.bp-gen { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.bp-gen__list { list-style: none; margin: 1.8rem 0 1rem; padding: 0; }
.bp-gen__line { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; font: 500 .78rem/1.4 var(--font-mono); letter-spacing: .14em; color: var(--bp-dim); transition: color .2s ease; }
.bp-gen__mark { width: 8px; height: 8px; border: 1px solid var(--bp-line); transition: background .2s ease, border-color .2s ease; }
.bp-gen__line.is-active { color: var(--bp-ink); }
.bp-gen__line.is-active .bp-gen__mark { border-color: var(--bp-red); animation: bp-blink .5s steps(2) infinite; }
.bp-gen__line.is-done { color: var(--bp-soft); }
.bp-gen__line.is-done .bp-gen__mark { background: var(--bp-red); border-color: var(--bp-red); }
@keyframes bp-blink { to { background: rgba(233,0,18,.6); } }
.bp-gen__bar { height: 1px; background: var(--bp-line); max-width: 22rem; }
.bp-gen__bar i { display: block; height: 3px; margin-top: -1px; width: 0; background: var(--bp-red); transition: width .5s var(--ease-out); }
.bp-gen__done { margin: 2rem 0 0; font: 800 clamp(1.4rem, 2.4vw, 2rem)/1.1 var(--font-display); letter-spacing: -.01em; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.bp-gen__done.is-in { opacity: 1; transform: none; }

/* ---------- result ---------- */
.bp[data-screen="result"] .bp__stage { grid-template-columns: 38fr 62fr; height: auto; min-height: calc(100vh - var(--bp-head, 86px)); }
.bp[data-screen="result"] .bp__panel { overflow: visible; }
.bp[data-screen="result"] .bp__canvas { position: sticky; top: 0; height: calc(100vh - var(--bp-head, 86px)); max-height: 100vh; }
.bp-out__id { margin: .5rem 0 0; font: 800 clamp(2.2rem, 4vw, 3.4rem)/1 var(--font-display); letter-spacing: -.02em; }
.bp-out__grid { display: grid; gap: 1.4rem; margin-top: 1.8rem; }
.bp-out__block h2 { margin: 0 0 .45rem; }
.bp-out__val { margin: 0; font: 600 1.02rem/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.bp-out__val--dim { color: var(--bp-dim); }
.bp-out__pages { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.6rem; }
.bp-out__pages li { break-inside: avoid; display: flex; gap: .55rem; align-items: center; padding: .28rem 0; border-bottom: 1px solid var(--bp-line-soft); font: 600 .74rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.bp-out__pages li.is-sub { padding-left: .6rem; }
.bp-out__pages li.is-primary { color: var(--bp-red); }
.bp-out__sys { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.bp-out__sys li { display: flex; gap: .6rem; align-items: center; font-size: .95rem; }
.bp-out__check { font: 700 .75rem/1 var(--font-mono); color: var(--bp-red); }

/* ---------- status readout ---------- */
.bp-status { position: absolute; top: 1.3rem; right: 1.3rem; z-index: 5; display: grid; gap: .4rem; justify-items: end; align-content: start; pointer-events: none; }
.bp-status__item {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem .75rem; background: rgba(13,13,13,.9); border: 1px solid var(--bp-line);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.bp-status__item.is-in { opacity: 1; transform: none; }
.bp-status__item.is-out { opacity: 0; transform: translateX(8px); }
.bp-status__tick { width: 6px; height: 6px; margin-top: .3rem; background: var(--bp-red); box-shadow: 0 0 8px rgba(233,0,18,.7); }
.bp-status__text { display: grid; font: 500 .64rem/1.5 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.bp-status__text b { font-weight: 600; color: var(--bp-ink); }
.bp-status__text i { font-style: normal; color: var(--bp-dim); }

/* ---------- the sheet (SVG) ---------- */
.bp-dot { fill: rgba(244,244,245,.075); }
.bp-major { fill: none; stroke: rgba(244,244,245,.045); stroke-width: 1; }
.bp-frame { fill: none; stroke: rgba(244,244,245,.13); stroke-width: 1; }
.bp-tick { fill: none; stroke: rgba(244,244,245,.5); stroke-width: 1.2; }
.bp-label { font: 600 9.5px/1 var(--font-mono); letter-spacing: .16em; fill: rgba(244,244,245,.62); }
.bp-label--dim { fill: rgba(244,244,245,.3); }
.bp-label--tiny { font-size: 7px; fill: rgba(244,244,245,.32); }
.bp-label--red { fill: var(--bp-red); }
.bp-empty { transition: opacity .4s ease; }

.bp-edge { fill: none; stroke: rgba(244,244,245,.28); stroke-width: 1.2; transition: stroke .35s ease; }
.bp-edge--system { stroke: rgba(244,244,245,.24); stroke-dasharray: 4 4; }
.bp-edge.is-hot { stroke: var(--bp-red); }
.bp-pulse { fill: var(--bp-red); filter: drop-shadow(0 0 6px rgba(233,0,18,.9)); }

.bp-node { cursor: default; }
.bp-node__box { fill: rgba(13,13,13,.92); stroke: rgba(244,244,245,.5); stroke-width: 1; transition: stroke .3s ease, fill .3s ease; }
.bp-node:hover .bp-node__box { stroke: var(--bp-ink); }
.bp-node.is-lit .bp-node__box { stroke: var(--bp-red); }
.bp-node__label { font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em; fill: var(--bp-ink); }
.bp-node__idx { font: 500 7px/1 var(--font-mono); letter-spacing: .1em; fill: rgba(244,244,245,.45); }
.bp-node__tag { font: 700 7px/1 var(--font-mono); letter-spacing: .22em; fill: var(--bp-red); }
.bp-node.is-home .bp-node__box { stroke: rgba(244,244,245,.85); stroke-width: 1.3; }
.bp-node.is-home .bp-node__label { font-size: 12px; letter-spacing: .18em; }
.bp-node.is-primary .bp-node__box { stroke: var(--bp-red); stroke-width: 1.4; }
.bp-node__halo { fill: none; stroke: rgba(233,0,18,.55); stroke-width: 2; opacity: .75; pointer-events: none; }
.bp-node--system .bp-node__box { fill: #15161a; stroke: rgba(244,244,245,.38); }
.bp-node--system:hover .bp-node__box { stroke: rgba(244,244,245,.8); }
.bp-node__port { fill: var(--bp-red); }
.bp-node__sys { font: 700 6.5px/1 var(--font-mono); letter-spacing: .22em; fill: var(--bp-red); }
.bp-title__box { fill: rgba(13,13,13,.88); stroke: rgba(244,244,245,.5); stroke-width: 1; }
.bp-title__rule { fill: none; stroke: rgba(244,244,245,.24); stroke-width: 1; }

/* design profiles nudge the drawing, never redraw it */
.p-minimal .bp-edge { stroke-width: .9; }
.p-minimal .bp-node__halo { display: none; }
.p-minimal .bp-node__box { stroke: rgba(244,244,245,.38); }
.p-luxury .bp-node__box { stroke-width: .8; }
.p-luxury .bp-node--page .bp-node__box { fill: #0D0D0D; }
.p-luxury .bp-edge { stroke: rgba(244,244,245,.36); stroke-width: .9; }
.p-industrial .bp-edge { stroke-width: 2; stroke: rgba(244,244,245,.42); }
.p-industrial .bp-node__box { stroke-width: 1.8; }
.p-industrial .bp-node__label { font-weight: 700; }
.p-technology .bp-edge--page { stroke-dasharray: 6 3; }
.p-technology .bp-dot { fill: rgba(244,244,245,.13); }
.p-technology .bp-label--tiny { fill: rgba(244,244,245,.55); }
.p-corporate .bp-node__box { fill: #17181B; }
.p-corporate .bp-edge { stroke: rgba(244,244,245,.4); }
.p-bold .bp-node__box { stroke-width: 1.6; }
.p-bold .bp-node.is-primary .bp-node__box { fill: var(--bp-red); stroke: var(--bp-red); }
.p-bold .bp-node.is-primary .bp-node__label { fill: #fff; }
.p-bold .bp-node.is-primary .bp-node__idx { fill: rgba(255,255,255,.7); }

/* ---------- mobile ---------- */
.bp__peek { display: none; }
.bp__overlay { position: fixed; inset: 0; z-index: 70; background: var(--bp-bg, #0D0D0D); display: grid; grid-template-rows: auto 1fr; }
.bp__overlay[hidden] { display: none; }
.bp__overlay-bar { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-bottom: 1px solid var(--bp-line, #2B2E33); color: #F4F4F5; }
.bp__overlay-close { font: 600 .7rem/1 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; padding: .55rem .8rem; background: none; border: 1px solid var(--bp-line, #2B2E33); color: #F4F4F5; cursor: pointer; }
.bp__overlay-close:hover { border-color: var(--bp-red, #E90012); color: var(--bp-red, #E90012); }
.bp__overlay-body { min-height: 0; min-width: 0; display: flex; overflow: hidden; }
/* min-width: 0 matters: without it the flex item grows to the drawing's
   width and the body clips it, and the sheet cannot be panned at all */
.bp__overlay .bp__canvas { display: flex !important; flex: 1 1 0; min-width: 0; width: 100%; height: auto !important; max-height: none !important; position: static !important; }
.bp__overlay .bp-status { position: fixed; top: 4.6rem; bottom: auto; right: 1rem; }

@media (max-width: 960px) {
  .bp__stage, .bp[data-screen="result"] .bp__stage { display: block; height: auto; min-height: 0; }
  .bp__panel { border-right: 0; min-height: calc(100vh - var(--bp-head, 72px)); padding-bottom: 6rem; }
  .bp__canvas { display: none; }
  /* on a phone the sheet keeps its drawing size and pans sideways, like a
     real drawing on a small desk: labels stay legible, HOME starts centred */
  .bp__canvas, .bp__overlay .bp__canvas { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--bp-line) transparent; }
  .bp__sheet { display: block; height: 100%; width: max-content; min-width: 100%; }
  .bp-sheet { height: 100%; width: auto; }
  .bp[data-screen="intro"] .bp__canvas { display: flex; height: 400px; border-top: 1px solid var(--bp-line); }
  .bp[data-screen="intro"] .bp__panel { min-height: 0; padding-bottom: 2rem; }
  .bp[data-screen="result"] .bp__canvas { display: flex; position: static; height: min(560px, 130vw); border-top: 1px solid var(--bp-line); }
  .bp[data-screen="result"] .bp__panel { padding-bottom: 2rem; }
  .bp-intro { min-height: 0; }
  .bp-grid--3, .bp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-out__pages { columns: 1; }
  .bp-status { position: fixed; top: auto; bottom: 5.4rem; right: 1rem; }
  .bp[data-screen="builder"] .bp__peek, .bp[data-screen="generating"] .bp__peek {
    display: inline-flex; align-items: center; gap: .5rem;
    position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60;
    padding: .85rem 1.3rem; background: var(--bp-raised); color: var(--bp-ink);
    border: 1px solid var(--bp-line); clip-path: var(--bp-cut);
    font: 600 .72rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
    box-shadow: 0 14px 34px rgba(0,0,0,.5); cursor: pointer;
  }
  .bp__peek-n { color: var(--bp-red); }
}
@media (max-width: 520px) {
  .bp-grid--3, .bp-grid--2 { grid-template-columns: 1fr; }
  .bp-build__head { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .bp-actions--row { grid-auto-flow: row; justify-items: stretch; }
  .bp-actions--row .btn { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bp *, .bp *::before, .bp *::after { transition-duration: 0s !important; animation: none !important; }
}

/* ==========================================================================
   V2 refinements
   ========================================================================== */

/* ---------- Blueprint mode header: the site nav steps back ---------- */
body.blueprint-page .nav { padding-block: .55rem; }
body.blueprint-page .nav__menu, body.blueprint-page .nav__toggle { display: none; }
body.blueprint-page .nav__brand img { width: 84px; }
.bp-modebar {
  display: flex; align-items: center; gap: .9rem;
  font: 500 .64rem/1 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.bp-modebar__label { color: var(--ink); font-weight: 600; }
.bp-modebar__id { padding: .32rem .5rem; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.bp-modebar__exit { color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; padding: .34rem .55rem; border: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.bp-modebar__exit:hover { color: var(--accent-text); border-color: var(--line); }
@media (max-width: 560px) { .bp-modebar__label { display: none; } .bp-modebar { gap: .6rem; } }

/* ---------- shared bits ---------- */
.bp-palbar { display: flex; height: 4px; width: 100%; overflow: hidden; }
.bp-palbar i { display: block; height: 100%; }
.bp-link { font: 600 .68rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bp-red); text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.bp-link:hover span { transform: translateX(3px); }
.bp-link span { display: inline-block; transition: transform .2s var(--ease-out); }
.bp-btn-text { background: none; border: 0; padding: .4rem 0; cursor: pointer; font: 600 .68rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bp-dim); transition: color .2s ease; }
.bp-btn-text:hover { color: var(--bp-ink); }
.bp .bp-btn { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; padding: .75rem 1.2rem; }

/* ---------- design direction previews ---------- */
.bp-prev { position: relative; height: 108px; background: #0D0D0D; border-bottom: 1px solid var(--bp-line); overflow: hidden; display: block; }
.bp-prev i { position: absolute; display: block; }
.bp-prev__aa { position: absolute; right: 12px; bottom: 6px; font-size: 28px; line-height: 1; color: var(--bp-ink); }
.bp-swatchcard[aria-pressed="true"] .bp-prev::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bp-red); }

/* minimal: hairlines and air */
.bp-prev--minimal .bp-prev__nav { left: 12px; top: 14px; width: 26%; height: 1px; background: rgba(244,244,245,.35); }
.bp-prev--minimal .bp-prev__h { left: 12px; top: 46px; width: 44%; height: 1px; background: rgba(244,244,245,.9); }
.bp-prev--minimal .bp-prev__p { left: 12px; top: 56px; width: 30%; height: 7px; background: repeating-linear-gradient(180deg, rgba(244,244,245,.25) 0 1px, transparent 1px 4px); }
.bp-prev--minimal .bp-prev__cta { left: 12px; bottom: 12px; width: 7px; height: 7px; border: 1px solid var(--bp-red); }
.bp-prev--minimal .bp-prev__aa { font-size: 30px; }

/* luxury: fine double frame, centred small caps */
.bp-prev--luxury .bp-prev__hero { inset: 9px; border: 1px solid rgba(244,244,245,.5); }
.bp-prev--luxury .bp-prev__p { inset: 14px; border: 1px solid rgba(244,244,245,.18); }
.bp-prev--luxury .bp-prev__h { left: 50%; top: 40px; width: 28%; height: 1px; background: rgba(244,244,245,.8); transform: translateX(-50%); }
.bp-prev--luxury .bp-prev__cta { left: 50%; top: 66px; width: 14px; height: 1px; background: var(--bp-red); transform: translateX(-50%); }
.bp-prev--luxury .bp-prev__aa { left: 50%; right: auto; top: 44px; bottom: auto; font-size: 15px; transform: translateX(-50%); color: rgba(244,244,245,.9); }

/* industrial: slabs on a grid */
.bp-prev--industrial { background: repeating-linear-gradient(90deg, rgba(244,244,245,.05) 0 1px, transparent 1px 12px), #111114; }
.bp-prev--industrial .bp-prev__nav { left: 12px; top: 10px; bottom: 10px; width: 7px; background: var(--bp-soft); }
.bp-prev--industrial .bp-prev__hero { left: 30px; top: 12px; width: 36%; height: 44%; background: #24272B; }
.bp-prev--industrial .bp-prev__h { left: 30px; top: 68px; width: 42%; height: 8px; background: rgba(244,244,245,.55); }
.bp-prev--industrial .bp-prev__cta { left: 30px; top: 84px; width: 24%; height: 8px; background: var(--bp-red); }
.bp-prev--industrial .bp-prev__aa { font-size: 30px; }

/* technology: modules and a live node on a dot grid */
.bp-prev--technology { background: radial-gradient(rgba(244,244,245,.14) 1px, transparent 1px) 0 0 / 12px 12px, #0D0D0D; }
.bp-prev--technology .bp-prev__hero { left: 14%; top: 26%; width: 22px; height: 14px; border: 1px solid rgba(244,244,245,.7); }
.bp-prev--technology .bp-prev__h { left: 44%; top: 58%; width: 22px; height: 14px; border: 1px solid var(--bp-red); box-shadow: 0 0 10px rgba(233,0,18,.35); }
.bp-prev--technology .bp-prev__p { left: calc(14% + 22px); top: calc(26% + 7px); width: calc(30% - 22px); height: 1px; background: rgba(244,244,245,.5); }
.bp-prev--technology .bp-prev__cta { left: 44%; top: calc(26% + 7px); width: 1px; height: calc(32% - 7px); background: rgba(244,244,245,.5); }
.bp-prev--technology .bp-prev__x { left: calc(44% + 22px); top: calc(58% + 7px); width: 14%; height: 1px; background: repeating-linear-gradient(90deg, rgba(244,244,245,.5) 0 3px, transparent 3px 6px); }
.bp-prev--technology .bp-prev__aa { font-size: 22px; }

/* corporate: a nav line and ordered columns */
.bp-prev--corporate .bp-prev__nav { left: 12px; right: 12px; top: 14px; height: 1px; background: rgba(244,244,245,.25); }
.bp-prev--corporate .bp-prev__hero { left: 12%; bottom: 14px; width: 16%; height: 42%; background: rgba(244,244,245,.28); }
.bp-prev--corporate .bp-prev__h { left: 34%; bottom: 14px; width: 16%; height: 62%; background: rgba(244,244,245,.55); }
.bp-prev--corporate .bp-prev__p { left: 56%; bottom: 14px; width: 16%; height: 30%; background: rgba(244,244,245,.28); }
.bp-prev--corporate .bp-prev__cta { left: 34%; bottom: calc(14px + 62%); width: 16%; height: 2px; margin-bottom: 3px; background: var(--bp-red); }

/* bold: one block, one bar */
.bp-prev--bold .bp-prev__hero { left: 0; top: 0; bottom: 0; width: 52%; background: var(--bp-red); }
.bp-prev--bold .bp-prev__h { left: 58%; right: 12px; top: 40%; height: 9px; background: var(--bp-ink); }
.bp-prev--bold .bp-prev__p { left: 58%; width: 22%; top: calc(40% + 15px); height: 4px; background: rgba(244,244,245,.5); }
.bp-prev--bold .bp-prev__aa { left: 12px; right: auto; bottom: 6px; color: #fff; font-size: 34px; }

.bp-swatchcard__body { display: grid; gap: .3rem; padding: .8rem .95rem .9rem; }
.bp-swatchcard__head { display: flex; align-items: baseline; gap: .6rem; }
.bp-swatchcard__head .bp-card__label { flex: 1; }
.bp-pick { font: 700 .56rem/1 var(--font-mono); letter-spacing: .2em; color: var(--bp-red); }
.bp-swatchcard__meta { display: grid; gap: .45rem; margin-top: .35rem; }
.bp-profile .bp-palbar { margin-top: .8rem; }

/* ---------- sheet: node language ---------- */
.bp-node__tab { fill: rgba(244,244,245,.14); transition: fill .3s ease; }
.bp-node.is-primary .bp-node__tab { fill: var(--bp-red); }
.bp-node__idx { font: 600 6.5px/1 var(--font-mono); letter-spacing: .08em; fill: var(--bp-ink); }
.bp-node--system .bp-node__box { stroke-dasharray: 3 2; }
.bp-node--system.is-path .bp-node__box, .bp-node.is-path .bp-node__box { stroke: rgba(244,244,245,.78); }
.bp-edge.is-path { stroke: rgba(233,0,18,.55); stroke-width: 1.5; }
.bp-edge--system.is-path { stroke: rgba(233,0,18,.5); }
.bp-node.is-born .bp-node__box { animation: bp-born 1.1s var(--ease-out); }
@keyframes bp-born { 0% { stroke: var(--bp-red); filter: drop-shadow(0 0 7px rgba(233,0,18,.85)); } 100% { filter: drop-shadow(0 0 0 rgba(233,0,18,0)); } }
.bp-node__halo { stroke: rgba(233,0,18,.45); stroke-width: 3; opacity: .6; }

/* ---------- result: artifact ---------- */
.bp-out__stamp { margin-top: .6rem; }
.bp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.5rem; }
.bp-stat { display: grid; gap: .3rem; align-content: start; padding: .8rem .9rem; background: var(--bp-raised); border: 1px solid var(--bp-line); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.bp-stat__val { font: 700 1.25rem/1.1 var(--font-display); letter-spacing: -.01em; color: var(--bp-ink); text-transform: uppercase; }
.bp-stat__sub { font: 500 .6rem/1.4 var(--font-mono); letter-spacing: .16em; color: var(--bp-dim); }
.bp-meter { display: inline-flex; gap: 3px; margin: .15rem 0 .1rem; }
.bp-meter i { width: 16px; height: 4px; background: var(--bp-line); }
.bp-meter i.is-on { background: var(--bp-red); box-shadow: 0 0 6px rgba(233,0,18,.55); }
.bp-plan { position: relative; margin-top: 1.1rem; padding: .95rem 1rem 1.05rem; background: var(--bp-raised); border: 1px solid var(--bp-line); clip-path: var(--bp-cut); display: grid; gap: .45rem; }
.bp-plan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bp-red); }
.bp-plan__head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.bp-plan__name { font: 800 1.7rem/1 var(--font-display); letter-spacing: -.02em; }
.bp-plan__price { font: 600 .7rem/1 var(--font-mono); letter-spacing: .12em; color: var(--bp-soft); padding: .3rem .5rem; border: 1px solid var(--bp-line); }
.bp-plan__why { margin: .1rem 0 .3rem; color: var(--bp-soft); font-size: .9rem; line-height: 1.55; max-width: 46ch; }
.bp-out__grid { margin-top: 1.6rem; }
.bp-out__pages li.is-path .bp-row__idx { color: var(--bp-red); }
.bp-out__sys li small { margin-left: auto; font: 500 .58rem/1 var(--font-mono); letter-spacing: .14em; color: var(--bp-dim); }
.bp-out__block .bp-palbar { margin: .5rem 0 .55rem; max-width: 220px; }
.bp-actions--result { margin-top: 2rem; display: grid; gap: .7rem; justify-items: stretch; }
.bp-cta--wide { text-align: center; }
.bp-actions__row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.bp-actions__row .btn { text-align: center; }
.bp-actions--result .bp-btn-text { justify-self: start; margin-top: .2rem; }
@media (max-width: 520px) { .bp-stats { grid-template-columns: 1fr 1fr; } .bp-actions__row { grid-template-columns: 1fr; } }

/* ==========================================================================
   V3 polish
   ========================================================================== */

/* ---------- annotations ---------- */
.bp-node.has-tip { cursor: crosshair; }
.bp-node.has-tip:hover .bp-node__box { stroke: var(--bp-ink); }
.bp-tip {
  position: absolute; z-index: 8; width: max-content; max-width: 250px;
  padding: .55rem .7rem .6rem; background: rgba(13,13,13,.96); border: 1px solid var(--bp-line);
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .14s var(--ease-out), transform .14s var(--ease-out);
}
.bp-tip::before { content: ""; position: absolute; left: -1px; top: -1px; width: 14px; height: 2px; background: var(--bp-red); }
.bp-tip.is-in { opacity: 1; transform: none; }
.bp-tip.is-below { transform: translateY(-4px); }
.bp-tip.is-below.is-in { transform: none; }
.bp-tip__head { display: grid; gap: .15rem; margin-bottom: .45rem; padding-bottom: .4rem; border-bottom: 1px solid var(--bp-line-soft); }
.bp-tip__head b { font: 600 .72rem/1.2 var(--font-mono); letter-spacing: .14em; color: var(--bp-ink); }
.bp-tip__head span { font: 600 .56rem/1.2 var(--font-mono); letter-spacing: .2em; color: var(--bp-red); }
.bp-tip__rows { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .22rem .7rem; }
.bp-tip__rows dt { font: 500 .56rem/1.5 var(--font-mono); letter-spacing: .16em; color: var(--bp-dim); }
.bp-tip__rows dd { margin: 0; font: 400 .74rem/1.4 var(--font-body); color: var(--bp-soft); }

/* ---------- sheet lock, row flash ---------- */
.bp-sheet.is-locked .bp-frame { animation: bp-lock 1.3s var(--ease-out); }
.bp-sheet.is-locked .bp-tick { animation: bp-lock-tick 1.3s var(--ease-out); }
@keyframes bp-lock { 0% { stroke: rgba(233,0,18,.7); } 100% { stroke: rgba(244,244,245,.13); } }
@keyframes bp-lock-tick { 0% { stroke: var(--bp-red); } 100% { stroke: rgba(244,244,245,.5); } }
.bp-row.is-flash { animation: bp-rowflash .7s var(--ease-out); }
@keyframes bp-rowflash { 0% { background: rgba(233,0,18,.14); } 100% { background: transparent; } }

/* ---------- card and module micro-interactions ---------- */
.bp-card:active, .bp-module:active, .bp-swatchcard:active { transform: translateY(0) scale(.992); }
.bp-card__label, .bp-module .bp-card__label { transition: transform .18s var(--ease-out); }
.bp-card:hover .bp-card__label { transform: translateX(2px); }
.bp-module__glyph::before { transition: border-color .2s ease, transform .18s var(--ease-strike); }
.bp-module:hover .bp-module__glyph::before { transform: rotate(-90deg); }
.bp-module[aria-pressed="true"] .bp-module__glyph::before { transform: rotate(0); }

/* ---------- direction previews: alive on hover, still at rest ---------- */
.bp-prev i, .bp-prev__aa { transition: width .35s var(--ease-out), height .35s var(--ease-out), inset .35s var(--ease-out), left .35s var(--ease-out), top .35s var(--ease-out), transform .35s var(--ease-out), letter-spacing .35s var(--ease-out), box-shadow .35s ease, background-position .6s var(--ease-out); }
.bp-swatchcard:hover .bp-prev--minimal .bp-prev__h { width: 56%; }
.bp-swatchcard:hover .bp-prev--minimal .bp-prev__aa { letter-spacing: .02em; }
.bp-swatchcard:hover .bp-prev--luxury .bp-prev__p { inset: 17px; }
.bp-swatchcard:hover .bp-prev--luxury .bp-prev__cta { width: 26px; }
.bp-swatchcard:hover .bp-prev--luxury .bp-prev__aa { letter-spacing: .3em; }
.bp-swatchcard:hover .bp-prev--industrial .bp-prev__cta { width: 32%; }
.bp-swatchcard:hover .bp-prev--industrial .bp-prev__hero { height: 50%; }
.bp-swatchcard:hover .bp-prev--technology .bp-prev__h { box-shadow: 0 0 16px rgba(233,0,18,.6); }
.bp-swatchcard:hover .bp-prev--technology .bp-prev__x { background-position: 6px 0; }
.bp-swatchcard:hover .bp-prev--corporate .bp-prev__h { height: 70%; }
.bp-swatchcard:hover .bp-prev--corporate .bp-prev__cta { bottom: calc(14px + 70%); }
.bp-swatchcard:hover .bp-prev--bold .bp-prev__hero { width: 56%; }
.bp-swatchcard:hover .bp-prev--bold .bp-prev__h { left: 62%; }

/* ---------- result as hero ---------- */
.bp-out__idwrap { display: grid; gap: .6rem; margin-top: .4rem; }
.bp-out__id { margin: 0; font: 800 clamp(2.6rem, 4.6vw, 4rem)/.95 var(--font-display); letter-spacing: -.025em; }
.bp-out__idrule { display: block; position: relative; height: 1px; background: var(--bp-line); }
.bp-out__idrule::before { content: ""; position: absolute; left: 0; top: -1px; width: 88px; height: 3px; background: var(--bp-red); }
.bp-out__stamp { margin-top: .8rem; }
.bp-out__model { margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: baseline; font: 700 .98rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.bp-out__model i { font-style: normal; color: var(--bp-dim); }
.bp-path { margin: .9rem 0 0; display: grid; gap: .35rem; }
.bp-path__chain { display: flex; flex-wrap: wrap; gap: .35rem .45rem; align-items: center; }
.bp-path__chain b { font: 600 .66rem/1 var(--font-mono); letter-spacing: .14em; padding: .32rem .5rem; border: 1px solid var(--bp-line); color: var(--bp-soft); }
.bp-path__chain b.is-primary { border-color: rgba(233,0,18,.6); color: var(--bp-ink); background: rgba(233,0,18,.08); }
.bp-path__chain i { font-style: normal; color: var(--bp-red); font-size: .7rem; }
.bp-stats { margin-top: 1.6rem; }
.bp-plan__foot { display: grid; gap: .45rem; margin-top: .1rem; }
.bp-plan__note { font-size: .74rem; line-height: 1.5; color: var(--bp-dim); }
.bp-out__grid { margin-top: 1.7rem; gap: 1.6rem; }
.bp-out .bp-hint { margin-top: 1.4rem; }

/* one action stays in reach; the rest are quiet text */
.bp-out__actions {
  position: sticky; bottom: 0; z-index: 3;
  margin: 1.4rem calc(-1 * clamp(1.4rem, 3.2vw, 3.4rem)) 0;
  padding: .9rem clamp(1.4rem, 3.2vw, 3.4rem) 1rem;
  background: linear-gradient(180deg, rgba(16,16,19,0) 0, var(--bp-panel) 18px);
  border-top: 1px solid var(--bp-line);
  display: grid; gap: .6rem;
}
.bp-out__secondary { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.bp-out__secondary i { width: 3px; height: 3px; background: var(--bp-dim); }
.bp-textbtn { background: none; border: 0; padding: .3rem 0; cursor: pointer; font: 600 .64rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bp-soft); transition: color .2s ease; }
.bp-textbtn:hover { color: var(--bp-ink); }
.bp-textbtn[disabled] { color: var(--bp-dim); cursor: default; }
.bp[data-screen="result"] .bp__panel { padding-bottom: 0; }

/* ---------- mobile: fit view, result peek ---------- */
.bp__overlay-tools { display: flex; align-items: center; gap: .5rem; }
.bp__overlay-fit { font: 600 .66rem/1 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; padding: .55rem .8rem; background: none; border: 1px solid var(--bp-line, #2B2E33); color: #A6A9AF; cursor: pointer; }
.bp__overlay-fit[aria-pressed="true"] { color: #F4F4F5; border-color: rgba(233,0,18,.6); }
.bp__overlay.is-fit .bp__canvas { overflow: hidden !important; }
.bp__overlay.is-fit .bp__sheet { width: 100%; min-width: 0; height: 100%; display: flex; }
.bp__overlay.is-fit .bp-sheet { width: 100%; height: 100%; }
@media (max-width: 960px) {
  .bp[data-screen="result"] .bp__peek { display: inline-flex; align-items: center; gap: .5rem; position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60; padding: .85rem 1.3rem; background: var(--bp-raised); color: var(--bp-ink); border: 1px solid var(--bp-line); clip-path: var(--bp-cut); font: 600 .72rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 14px 34px rgba(0,0,0,.5); cursor: pointer; }
  .bp[data-screen="result"] .bp__panel { padding-bottom: 5.5rem; }
  .bp-out__actions { position: static; margin-inline: 0; padding-inline: 0; }
  .bp-tip { display: none; }
}

/* ---------- static description (crawlers, previews, no JS) ---------- */
/* Replaced by the live tool the moment app.js boots. */
.bp-static { padding: clamp(3rem, 7vw, 5.5rem) 0 4rem; min-height: 60vh; }
.bp-static h1 { margin: .8rem 0 1rem; font: 800 clamp(2rem, 4.5vw, 3.2rem)/1.05 var(--font-display); letter-spacing: -.02em; }
.bp-static__lead { max-width: 42rem; color: var(--bp-soft); font-size: 1.05rem; line-height: 1.65; margin: 0; }
.bp-static__steps { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .55rem; max-width: 42rem; color: var(--bp-soft); }
.bp-static__steps b { color: var(--bp-ink); font-family: var(--font-mono); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-right: .4rem; }
.bp-static__note { margin: 1.8rem 0 0; color: var(--bp-soft); }
.bp-static__note a { color: var(--bp-ink); text-decoration-color: var(--bp-red); text-underline-offset: 3px; }