/* blockbuddies.io. Paper and ink only: the buddies bring all the colour.
   Every class is prefixed bb-. No borders or hairlines: whitespace first, then a tint. */

:root {
  --bb-paper: hsl(40 12% 95%);
  --bb-ink: hsl(30 8% 11%);
  --bb-ink-2: hsl(30 6% 36%);
  --bb-tint: hsl(40 11% 90.5%);
  --bb-tint-2: hsl(40 10% 86%);
  --bb-sans: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --bb-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --bb-gutter-base: clamp(20px, 4vw, 48px);
  --bb-gutter: var(--bb-gutter-base);
  --bb-cell: 64px; --bb-gap: 8px;
  --bb-section: clamp(72px, 10vw, 128px);
  --bb-max: 1180px;
  --bb-ease-out: cubic-bezier(0, 0, .2, 1);
  color-scheme: light;
}
:root[data-scheme='dark'] {
  --bb-paper: hsl(30 8% 8.5%);
  --bb-ink: hsl(40 12% 92%);
  --bb-ink-2: hsl(36 7% 68%);
  --bb-tint: hsl(30 7% 12.5%);
  --bb-tint-2: hsl(30 7% 16%);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bb-paper); color: var(--bb-ink);
  font: 400 17px/1.5 var(--bb-sans); -webkit-font-smoothing: antialiased; font-kerning: normal;
}
::selection { background: var(--bb-ink); color: var(--bb-paper); }
/* Links are ink, underlined: the buddies stay the only colour on the page. */
a { color: var(--bb-ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness 120ms var(--bb-ease-out); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 2px; border-radius: 3px; }
img, svg { display: block; }
code, pre, kbd, samp { font-family: var(--bb-mono); font-size: 13.5px; }
:not(pre) > code { background: var(--bb-tint); padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere; }

.bb-skip { position: absolute; left: 12px; top: -60px; background: var(--bb-ink); color: var(--bb-paper); padding: 8px 12px; border-radius: 6px; z-index: 10; }
.bb-skip:focus { top: 12px; }
.bb-wrap { max-width: calc(var(--bb-max) + 2 * var(--bb-gutter)); margin: 0 auto; padding: 0 var(--bb-gutter); }
.bb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- header */
.bb-head { display: flex; align-items: center; gap: 24px; padding: 22px var(--bb-gutter); max-width: calc(var(--bb-max) + 2 * var(--bb-gutter)); margin: 0 auto; }
.bb-head__mark { color: var(--bb-ink); display: block; padding: 6px 0; border-radius: 4px; }
.bb-head__mark svg { height: 21px; width: auto; }
.bb-nav { display: flex; gap: 4px 20px; margin-left: auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bb-head > .bb-theme { flex: none; }
.bb-nav a { color: var(--bb-ink); text-decoration: none; font-size: 15px; padding: 4px 0; min-height: 24px; display: inline-flex; align-items: center; }
.bb-nav a:hover, .bb-nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 1px; }
.bb-theme {
  font: 13px/1 var(--bb-mono); color: var(--bb-ink-2); background: var(--bb-tint); border: 0; border-radius: 999px;
  padding: 0 12px; min-height: 32px; cursor: pointer; transition: background-color 150ms var(--bb-ease-out), color 150ms var(--bb-ease-out);
}
.bb-theme:hover { color: var(--bb-ink); background: var(--bb-tint-2); }
.bb-theme:active { background: var(--bb-tint-2); }
.bb-theme [data-bb-theme] { color: var(--bb-ink); }

/* ---------------------------------------------------------------- type */
.bb-display { font-weight: 700; font-size: clamp(46px, 9.4vw, 128px); line-height: .9; letter-spacing: -.048em; margin: 0; }
.bb-h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1; letter-spacing: -.035em; margin: 0 0 16px; }
.bb-h3 { font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 8px; }
.bb-lede { font-size: clamp(19px, 2.1vw, 25px); line-height: 1.32; letter-spacing: -.012em; max-width: 34ch; margin: 0; }
.bb-muted { color: var(--bb-ink-2); }
.bb-mono { font-family: var(--bb-mono); font-size: 13px; letter-spacing: 0; }
.bb-kicker { font-family: var(--bb-mono); font-size: 12.5px; color: var(--bb-ink-2); margin: 0 0 14px; letter-spacing: .02em; }
.bb-prose { max-width: 64ch; }
.bb-prose p, .bb-prose li { margin: 0 0 .7em; }
.bb-prose ul, .bb-prose ol { padding-left: 1.2em; margin: 0 0 1em; }

/* small, quiet status tags (TBD, pending OK). Mono on a tint, never a colour. */
.bb-tag {
  display: inline-block; font: 500 11px/1 var(--bb-mono); letter-spacing: .03em; text-transform: uppercase;
  color: var(--bb-ink-2); background: var(--bb-tint); padding: 4px 6px 3px; border-radius: 4px; vertical-align: .15em; white-space: nowrap;
}

/* ---------------------------------------------------------------- buddies */
/* A buddy is always the renderer's own rounded square (19%). Never a frame with another radius. */
.bb-buddy { display: block; flex: none; line-height: 0; }
.bb-buddy svg { width: 100%; height: 100%; overflow: visible; }

/* ---------------------------------------------------------------- hero + wall */
.bb-hero { padding-top: clamp(12px, 2.5vw, 28px); padding-bottom: clamp(24px, 3vw, 36px); }
.bb-hero__mark { margin: 0 0 clamp(20px, 2.6vw, 32px); color: var(--bb-ink); }
.bb-hero__mark svg { width: min(100%, 520px); height: auto; }
.bb-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px clamp(24px, 4vw, 64px); align-items: end; }
.bb-hero__title { font-weight: 700; font-size: clamp(38px, 4.4vw, 56px); line-height: .95; letter-spacing: -.045em; margin: 0; max-width: 17ch; }
.bb-hero__side { display: grid; gap: 14px; }
.bb-hero__lede { font-size: 17px; line-height: 1.4; margin: 0; max-width: 46ch; }
.bb-hero__note { font-size: 15px; color: var(--bb-ink-2); max-width: 28ch; margin: 0; }

.bb-wall__cell { width: var(--bb-cell); height: var(--bb-cell); border-radius: 19%; display: block; position: relative; }
.bb-wall__cell > span { display: block; width: 100%; height: 100%; }
.bb-wall__cell:focus-visible { outline-offset: 4px; border-radius: 19%; }
.bb-wall__tag {
  position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, 0);
  font: 12px/1.25 var(--bb-mono); white-space: nowrap; color: var(--bb-paper); background: var(--bb-ink);
  padding: 5px 8px; border-radius: 6px; opacity: 0; transition: opacity 120ms var(--bb-ease-out);
}
.bb-wall__tag[data-on] { opacity: 1; }
.bb-wall__tag b { font-weight: 600; }
.bb-wall__foot { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 0; padding-top: 20px; font-size: 13px; color: var(--bb-ink-2); }

/* ---------------------------------------------------------------- sections */
.bb-section { padding-top: var(--bb-section); }
.bb-section--tight { padding-top: clamp(56px, 8vw, 104px); }
.bb-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(24px, 5vw, 72px); align-items: start; }
.bb-split > :first-child { position: relative; }
.bb-num { font: 500 13px/1 var(--bb-mono); color: var(--bb-ink-2); margin-bottom: 18px; display: block; }

.bb-demo { padding-top: 6px; }
.bb-demo__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bb-agent { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.bb-agent__name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bb-agent__state { font: 12px/1.2 var(--bb-mono); color: var(--bb-ink-2); min-height: 1.2em; }
.bb-agent__state[data-loud] { color: var(--bb-ink); font-weight: 600; }
.bb-demo__label { margin: 0 0 20px; font-size: 14px; color: var(--bb-ink-2); display: flex; align-items: center; gap: 8px; }
.bb-demo__note { margin: 20px 0 0; font-size: 14px; color: var(--bb-ink-2); }
.bb-btn {
  font: 500 13px/1 var(--bb-sans); color: var(--bb-paper); background: var(--bb-ink); border: 0; border-radius: 999px;
  padding: 7px 12px; min-height: 28px; cursor: pointer;
}
.bb-btn:hover { opacity: .86; }
.bb-btn[hidden] { display: none; }

.bb-face-row { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.bb-face-row__item { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.bb-owned { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: end; }
.bb-print-sm { width: 168px; height: 168px; display: block; }
.bb-print-sm svg { width: 100%; height: 100%; }
.bb-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 40px 0 0; padding: 0; list-style: none; }
.bb-facts li { padding: 0; }
.bb-facts b { display: block; font-size: 22px; letter-spacing: -.02em; }
.bb-facts span { font-size: 13px; color: var(--bb-ink-2); }

/* quotes */
.bb-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 36px; margin: 0; padding: 0; list-style: none; }
.bb-quote { margin: 0; }
.bb-quote blockquote { margin: 0 0 14px; font-size: 19px; line-height: 1.34; letter-spacing: -.012em; }
.bb-quote figcaption { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* footer */
.bb-foot { padding-top: var(--bb-section); padding-bottom: max(40px, env(safe-area-inset-bottom)); }
.bb-foot__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.bb-foot__mark { color: var(--bb-ink); display: block; border-radius: 4px; }
.bb-foot__mark svg { height: 40px; width: auto; }
.bb-foot ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.bb-foot__credit { margin: 22px 0 0; color: var(--bb-ink-2); font-size: 13px; }

/* ---------------------------------------------------------------- portrait page */
.bb-portrait { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(28px, 5vw, 72px); align-items: start; padding-top: clamp(16px, 4vw, 48px); }
.bb-print { width: 100%; aspect-ratio: 1; display: block; }   /* 1.5: the renderer rounds the tile itself; the sheet stays square */
.bb-print svg { width: 100%; height: 100%; }
.bb-portrait__title { font-weight: 700; font-size: clamp(40px, 6vw, 80px); line-height: .92; letter-spacing: -.045em; margin: 6px 0 14px; overflow-wrap: anywhere; }
.bb-portrait__line { font-size: 14px; margin: 0 0 6px; }
.bb-hash { font: 12.5px/1.5 var(--bb-mono); color: var(--bb-ink-2); margin: 0 0 22px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.bb-hash .bb-copy { background: var(--bb-tint); }
.bb-traits { width: 100%; border-collapse: collapse; font-size: 15px; }
.bb-traits caption { text-align: left; font: 500 12.5px/1 var(--bb-mono); color: var(--bb-ink-2); padding: 18px 0 8px; }
.bb-traits th { text-align: left; font-weight: 400; color: var(--bb-ink-2); padding: 5px 16px 5px 0; width: 42%; vertical-align: top; }
.bb-traits td { padding: 5px 0; font-weight: 500; }
.bb-traits tbody tr:nth-child(odd) { background: transparent; }
.bb-bound { margin: 26px 0 0; padding: 16px 18px; background: var(--bb-tint); border-radius: 12px; font-size: 15px; }
.bb-bound p { margin: 0; }
.bb-bound p + p { margin-top: 6px; }

.bb-sheet { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bb-sheet__item { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.bb-sheet__btn { background: none; border: 0; padding: 0; cursor: pointer; width: 100%; aspect-ratio: 1; border-radius: 19%; display: block; }
.bb-sheet__btn .bb-buddy { width: 100%; height: 100%; }
.bb-sheet__label { font: 12px/1.2 var(--bb-mono); color: var(--bb-ink-2); text-align: center; }
.bb-sheet__label[data-kind='mood']::before { content: ''; }
.bb-sheet-key { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--bb-ink-2); margin: 14px 0 0; }

.bb-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bb-sizes__strip { border-radius: 14px; padding: 22px; display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.bb-sizes__strip[data-paper='light'] { background: hsl(40 12% 95%); color: hsl(30 8% 11%); }
.bb-sizes__strip[data-paper='dark'] { background: hsl(30 8% 8.5%); color: hsl(40 12% 92%); }
:root:not([data-scheme='dark']) .bb-sizes__strip[data-paper='light'] { background: var(--bb-tint); }
:root[data-scheme='dark'] .bb-sizes__strip[data-paper='dark'] { background: var(--bb-tint); }
.bb-sizes__item { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font: 11.5px/1 var(--bb-mono); opacity: .8; }

.bb-snips { display: grid; gap: 12px; }
.bb-snip { background: var(--bb-tint); border-radius: 12px; padding: 12px 14px 14px; min-width: 0; }
.bb-snip__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; font: 12px/1 var(--bb-mono); color: var(--bb-ink-2); }
.bb-snip pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.bb-copy {
  font: 12px/1 var(--bb-mono); color: var(--bb-ink-2); background: var(--bb-paper); border: 0; border-radius: 999px;
  padding: 6px 10px; min-height: 26px; cursor: pointer;
}
.bb-copy:hover { color: var(--bb-ink); }

/* ---------------------------------------------------------------- docs + agents */
.bb-doc { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; padding-top: clamp(16px, 4vw, 40px); }
.bb-toc { position: sticky; top: 20px; align-self: start; font-size: 14px; }
.bb-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bb-toc a { color: var(--bb-ink-2); text-decoration: none; display: block; padding: 4px 0; }
.bb-toc a:hover { color: var(--bb-ink); }
.bb-doc h1 { font-weight: 700; font-size: clamp(42px, 6.5vw, 84px); line-height: .92; letter-spacing: -.046em; margin: 0 0 20px; }
.bb-doc h2 { font-weight: 700; font-size: clamp(28px, 3.6vw, 40px); line-height: 1; letter-spacing: -.035em; margin: 72px 0 16px; scroll-margin-top: 20px; }
.bb-doc h3 { font-size: 18px; letter-spacing: -.015em; margin: 32px 0 8px; scroll-margin-top: 20px; }
.bb-doc p, .bb-doc li { max-width: 68ch; }
.bb-doc ul, .bb-doc ol:not(.bb-toc ol) { padding-left: 1.2em; }
.bb-doc li { margin-bottom: .4em; }
pre.bb-code {
  background: var(--bb-tint); border-radius: 12px; padding: 16px 18px; overflow-x: auto; line-height: 1.55; margin: 12px 0 18px;
  font-size: 13px; tab-size: 2; max-width: 100%;
}
.bb-code .c { color: var(--bb-ink-2); }
.bb-table-wrap { overflow-x: auto; margin: 12px 0 20px; }
.bb-table { border-collapse: collapse; font-size: 14.5px; min-width: 100%; }
.bb-table th { text-align: left; font: 500 12px/1.2 var(--bb-mono); color: var(--bb-ink-2); padding: 10px 18px 10px 0; vertical-align: bottom; }
.bb-table td { padding: 9px 18px 9px 0; vertical-align: top; }
.bb-table tbody tr:nth-child(odd) td { background: var(--bb-tint); }
.bb-table tbody tr td:first-child { padding-left: 12px; border-radius: 8px 0 0 8px; }
.bb-table thead th:first-child { padding-left: 12px; }
.bb-table tbody tr td:last-child { border-radius: 0 8px 8px 0; }
.bb-callout { background: var(--bb-tint); border-radius: 12px; padding: 16px 18px; margin: 18px 0; max-width: 68ch; }
.bb-callout p { margin: 0; }
.bb-callout p + p { margin-top: 8px; }
.bb-canvas-demo { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: var(--bb-tint); border-radius: 12px; padding: 18px; margin: 12px 0; }
.bb-canvas-demo canvas { width: 120px; height: 120px; }
details.bb-more { background: var(--bb-tint); border-radius: 12px; padding: 4px 18px; margin: 14px 0; }
details.bb-more summary { cursor: pointer; padding: 12px 0; font-weight: 600; min-height: 24px; }
details.bb-more[open] { padding-bottom: 12px; }
details.bb-more pre.bb-code { background: var(--bb-paper); }

.bb-try { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; background: var(--bb-tint); border-radius: 14px; padding: 18px; margin: 18px 0; max-width: 720px; }
.bb-try label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.bb-try input {
  width: 100%; font: 15px/1.2 var(--bb-mono); color: var(--bb-ink); background: var(--bb-paper); border: 0; border-radius: 8px;
  padding: 10px 12px; min-height: 40px;
}
.bb-try output { display: block; font: 12px/1.45 var(--bb-mono); color: var(--bb-ink-2); margin-top: 8px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .bb-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .bb-split, .bb-portrait { grid-template-columns: minmax(0, 1fr); }
  .bb-sheet { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bb-doc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bb-toc { position: static; background: var(--bb-tint); border-radius: 12px; padding: 12px 16px; }
  .bb-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .bb-head { gap: 12px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
  .bb-head__mark svg { height: 19px; }
  .bb-nav { gap: 2px 14px; margin-left: 0; width: 100%; justify-content: flex-start; }
  .bb-nav a { font-size: 14px; }
  .bb-theme { margin-left: auto; }
  .bb-demo__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .bb-facts { grid-template-columns: minmax(0, 1fr); }
  .bb-owned { grid-template-columns: minmax(0, 1fr); }
  .bb-sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bb-sizes { grid-template-columns: minmax(0, 1fr); }
  .bb-try { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-wall__tag { transition: none; }
}
.bb-copy[aria-pressed='true'] { background: var(--bb-ink); color: var(--bb-paper); }
.bb-table td .bb-buddy { margin-top: -3px; }
.bb-table code { overflow-wrap: normal; }
/* wordmark page */
.bb-wm { display: grid; gap: 14px; margin: 0 0 56px; }
.bb-wm__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.bb-wm__panel { border-radius: 14px; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 44px); display: flex; flex-direction: column; gap: 28px; }
.bb-wm__panel[data-paper='light'] { background: hsl(40 12% 95%); color: hsl(30 8% 11%); }
.bb-wm__panel[data-paper='dark'] { background: hsl(30 8% 8.5%); color: hsl(40 12% 92%); }
:root:not([data-scheme='dark']) .bb-wm__panel[data-paper='light'], :root[data-scheme='dark'] .bb-wm__panel[data-paper='dark'] { background: var(--bb-tint); }
.bb-wm__big svg { width: 100%; height: auto; max-height: 180px; }
.bb-wm__small { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.bb-wm__small svg { height: 20px; width: auto; }
.bb-wm__small .bb-wm__tiny svg { height: 13px; }
@media (max-width: 640px) { .bb-wm__pair { grid-template-columns: minmax(0, 1fr); } }
/* the logo mark */
[data-bb-mark] { display: block; aspect-ratio: 1; color: inherit; }
[data-bb-mark] svg { width: 100%; height: 100%; display: block; }
.bb-logo { align-items: center; justify-content: center; min-height: 360px; }
.bb-logo__big { width: min(220px, 56%); cursor: pointer; }
.bb-logo__cap { margin: 0; opacity: .7; min-height: 1.2em; }
.bb-logo__controls { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-logo__sizes { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; }

/* names */
.bb-wall__grid li { transition: opacity 200ms var(--bb-ease-out); }
.bb-wall__grid li[data-dim] { opacity: .16; transition-duration: 150ms; transition-timing-function: cubic-bezier(.4, 0, 1, 1); }
.bb-wall__tag { display: grid; gap: 2px; text-align: center; }
.bb-wall__tag b { font: 700 14px/1.15 var(--bb-sans); letter-spacing: -.01em; }
.bb-wall__tag span { font-size: 11px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .bb-wall__grid li { transition: none; } }
/* wordmark redraw comparison (2026-10-21): new beside old, big and at 16/24/32/64px, one panel per paper */
.bb-redraw { grid-template-columns: minmax(0, 1fr); }
.bb-redraw__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; }
.bb-redraw__fig { margin: 0; display: grid; gap: 14px; align-content: start; }
.bb-redraw__fig .bb-wm__big { margin-bottom: 14px; }
.bb-redraw__fig figcaption { font-size: 12px; opacity: .7; }
.bb-redraw__size { display: flex; align-items: flex-end; gap: 14px; min-width: 0; }
.bb-redraw__size > .bb-mono { flex: 0 0 2ch; font-size: 11px; opacity: .55; line-height: 1; padding-bottom: 2px; }
.bb-redraw__size > span:last-child { display: block; min-width: 0; }
.bb-redraw__size svg { height: 100%; width: auto; max-width: 100%; display: block; }
@media (max-width: 760px) { .bb-redraw__cols { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ v1.1 */

/* ---------------- renderer + toy output, CSP-clean (assets/csp.js maps their inline styles to these) */
.bb-buddy svg, .bb-toy svg, .bb-print svg, [data-bb-mark] svg { overflow: visible; }
.bb-r-mul { mix-blend-mode: multiply; }
.bb-r-iso { isolation: isolate; }
/* toy.js looks for #bb-toy-css before injecting its own <style>; ours is the stylesheet link, and these are its rules */
.bb-toy { border-radius: 19%; outline: none; }
.bb-toy:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 3px; }
.bb-toy__note, .bb-toy__help { position: absolute; white-space: nowrap; pointer-events: none; font: 12px/1.45 var(--bb-mono); }
.bb-toy__note { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); color: var(--bb-ink-2); }
.bb-toy__help { left: 0; top: calc(100% + 8px); z-index: 3; padding: 10px 12px; border-radius: 10px; background: var(--bb-ink); color: var(--bb-paper); }

/* ---------------- the home page: the crowd is the hero */
:root:has(.bb-home) { --bb-gutter: var(--bb-edge, var(--bb-gutter-base)); }
.bb-head--home { max-width: none; padding-inline: var(--bb-edge, var(--bb-gutter-base)); }
.bb-crowd { position: relative; padding-top: 4px; }
.bb-crowd__grid {
  display: grid; grid-template-columns: repeat(auto-fill, var(--bb-cell)); grid-auto-rows: minmax(var(--bb-cell), auto);
  gap: var(--bb-gap); justify-content: center; padding: 0 var(--bb-gap);
}
.bb-wall__grid { display: contents; list-style: none; margin: 0; padding: 0; }
/* the clearing: cut on the grid, two columns in, one row down. Buddies flow around it. */
.bb-clear {
  grid-column: 1 / span 8; grid-row: 2 / span 5;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-width: 0;
}
.bb-clear__title { font-weight: 700; font-size: clamp(52px, 7.6vw, 112px); line-height: .9; letter-spacing: -.05em; margin: -.09em 0 0; max-width: 8.5ch; }
.bb-clear__lede { font-size: 17px; line-height: 1.45; margin: 0; max-width: 46ch; color: var(--bb-ink); text-wrap: pretty; }
/* Say a name: your buddy sits in a cell of the crowd's grid, the field beside it. No card: it's one of them. */
.bb-field {
  width: 100%; font: 500 17px/1.2 var(--bb-sans); color: var(--bb-ink); background: var(--bb-tint); border: 0; border-radius: 8px 8px 2px 2px;
  box-shadow: inset 0 -2px 0 var(--bb-ink-2); padding: 9px 12px 8px; min-height: 40px; transition: box-shadow 150ms var(--bb-ease-out);
}
.bb-field:hover { box-shadow: inset 0 -2px 0 var(--bb-ink); }
.bb-field:focus-visible { box-shadow: inset 0 -2px 0 var(--bb-ink); outline-offset: 3px; }
@media (min-width: 1500px) { .bb-clear { grid-column: 1 / span 9; } }
@media (max-width: 1099px) { .bb-clear { grid-column: 2 / -2; grid-row: 2 / span 5; } }
@media (max-width: 559px) {
  :root { --bb-gap: 8px; --bb-cell: calc((100vw - 32px - 4 * var(--bb-gap)) / 5); }
  .bb-crowd__grid { grid-template-columns: repeat(5, var(--bb-cell)); padding: 0 16px; }
  .bb-clear { grid-column: 1 / -1; grid-row: 2 / span 3; gap: 12px; justify-content: space-between; padding-top: 4px; }
  .bb-clear__title { font-size: clamp(40px, 12.6vw, 52px); }
  .bb-clear__lede { font-size: 16px; }
  .bb-field { min-height: 44px; }
}
.bb-wall__foot { padding-inline: var(--bb-edge, var(--bb-gutter-base)); max-width: none; }
.bb-wall__tag { position: absolute; }

/* ---------------- shared bits that used to be inline styles */
.bb-note { margin: 16px 0 0; font-size: 15px; color: var(--bb-ink-2); max-width: 60ch; }
.bb-owned .bb-note { margin: 0; }
.bb-note--small { font-size: 13px; margin-top: 16px; }
.bb-code--gap { margin-top: 28px; }
.bb-intro { margin: 0 0 24px; max-width: 60ch; color: var(--bb-ink-2); }
.bb-lede--narrow { max-width: 40ch; }
.bb-gap-top { margin-top: 28px; }
.bb-try__cap { margin: 0; font-weight: 600; }
.bb-try__cap--gap { margin-bottom: 10px; }
.bb-try__sub { margin: 4px 0 0; font-size: 14px; color: var(--bb-ink-2); }
.bb-callout--end { margin-top: 56px; }
.bb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
[data-bb-find] { width: 96px; height: 96px; }
[data-bb-mood] { width: 72px; height: 72px; }
.bb-num { letter-spacing: .02em; }

/* ---------------- portrait: the print, with a toy over its tile */
.bb-portrait__fig { margin: 0; }
.bb-print { position: relative; }
.bb-print__toy { position: absolute; opacity: 0; transition: opacity 250ms var(--bb-ease-out); }
.bb-print__toy.is-on { opacity: 1; transition: none; }
.bb-print.is-toy > svg [data-bb='tile'] { visibility: hidden; }
.bb-print__hint { margin: 14px 0 0; font: 12.5px/1.5 var(--bb-mono); color: var(--bb-ink-2); }
.bb-print__hint kbd { font-size: 12px; background: var(--bb-tint); border-radius: 4px; padding: 1px 5px; }
.bb-lost { padding-block: clamp(48px, 10vw, 128px); }
.bb-lost__buddy { display: block; width: 96px; height: 96px; margin-bottom: 28px; }
.bb-lost__links { margin-top: 24px; }

/* ---------------- phone: 44px targets, 8px apart (checklist 7.2, 7.3) */
@media (max-width: 767px) {
  .bb-nav a { min-height: 44px; padding: 0 2px; }
  .bb-nav { gap: 0 16px; }
  .bb-theme { min-height: 44px; }
  .bb-copy { min-height: 44px; padding: 0 14px; }
  .bb-foot ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .bb-head__mark { padding: 12px 0; }
  .bb-btn { min-height: 44px; padding: 0 16px; }
  .bb-sheet__label { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-print__toy, .bb-wall__grid li, .bb-field, .bb-theme { transition: none; }
}

/* print-blink:start */
/* from bb-render 1.7.2 (2026-10-21) (tools/print-css.mjs). Do not edit. */
.bb-blink{animation:bbBlink 5.6s 0s infinite step-end}
@keyframes bbBlink{0%{opacity:1}
92%{opacity:0}
95.214%{opacity:1}}
.bb-bf{opacity:0}
.bb-bf0{animation:bbBf0 5.6s 0s infinite step-end}
@keyframes bbBf0{0%{opacity:0}
92%{opacity:1}
92.536%{opacity:0}}
.bb-bf1{animation:bbBf1 5.6s 0s infinite step-end}
@keyframes bbBf1{0%{opacity:0}
92.536%{opacity:1}
93.071%{opacity:0}}
.bb-bf2{animation:bbBf2 5.6s 0s infinite step-end}
@keyframes bbBf2{0%{opacity:0}
93.071%{opacity:1}
93.607%{opacity:0}}
.bb-bf3{animation:bbBf3 5.6s 0s infinite step-end}
@keyframes bbBf3{0%{opacity:0}
93.607%{opacity:1}
94.143%{opacity:0}}
.bb-bf4{animation:bbBf4 5.6s 0s infinite step-end}
@keyframes bbBf4{0%{opacity:0}
94.143%{opacity:1}
94.679%{opacity:0}}
.bb-bf5{animation:bbBf5 5.6s 0s infinite step-end}
@keyframes bbBf5{0%{opacity:0}
94.679%{opacity:1}
95.214%{opacity:0}}
@media (prefers-reduced-motion:reduce){.bb-blink,.bb-bf{animation:none}}
/* print-blink:end */

/* ---------------- wall cells are toys: no text selection, no iOS link preview on a long press */
.bb-wall__cell { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.bb-wall__cell > span { display: block !important; width: 100% !important; height: 100% !important; }
.bb-wall__cell .bb-toy svg, .bb-print__toy .bb-toy svg { width: 100%; height: 100%; }
.bb-wall__cell .bb-toy:focus-visible { outline: none; }
.bb-print__toy > div { width: 100%; height: 100%; }
.bb-print { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------------- the modes row under the portrait: quiet chips, the current one inked */
.bb-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; }
.bb-chip {
  font: 13px/1 var(--bb-mono); color: var(--bb-ink-2); background: var(--bb-tint); border: 0; border-radius: 999px;
  padding: 0 12px; min-height: 32px; cursor: pointer; transition: background-color 150ms var(--bb-ease-out), color 150ms var(--bb-ease-out);
}
.bb-chip:hover { color: var(--bb-ink); background: var(--bb-tint-2); }
.bb-chip[aria-pressed='true'] { color: var(--bb-paper); background: var(--bb-ink); }
.bb-chip--auto { margin-right: 10px; }
.bb-chip--auto[aria-pressed='true']::before { content: '● '; font-size: 9px; vertical-align: 1px; }
@media (max-width: 767px), (pointer: coarse) { .bb-chip { min-height: 44px; padding: 0 14px; } .bb-modes { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .bb-chip { transition: none; } }

/* Powered by ABX. Quiet infrastructure credit: footer credit size, ink-2 text, the ABX mark unmodified.
   ABX guidelines: black mark on light, white mark on dark, never recoloured. */
.bb-abx {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 13px; line-height: 20px; color: var(--bb-ink-2);
  text-decoration: none; border-radius: 3px;
  padding-inline: 2px; margin-inline: -2px; /* the ring gets air; the text stays on the column edge */
  transition: color 150ms var(--bb-ease-out, ease-out);
}
.bb-abx:hover { color: var(--bb-ink); }
.bb-abx:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 3px; }
.bb-abx__mark { display: block; width: auto; height: 12px; fill: #000; flex: none; }
:root[data-scheme='dark'] .bb-abx__mark { fill: #fff; }
@media (prefers-reduced-motion: reduce) { .bb-abx { transition: none; } }
.bb-foot__abx { margin: 10px 0 0; }

@media (max-width: 640px) {
  .bb-head { flex-wrap: wrap; row-gap: 0; }
  .bb-head > .bb-theme { order: 1; margin-left: auto; }
  .bb-head > .bb-nav { order: 2; width: 100%; margin-left: -2px; justify-content: space-between; gap: 0; }
  .bb-theme__k { display: none; }
}

/* a toy fed by its surface (toys.js feed): the surface takes the real events */
.bb-fed, .bb-fed * { pointer-events: none; }
.bb-wall__cell, .bb-print__toy { touch-action: pan-y pinch-zoom; }
.bb-wall__cell > span, .bb-wall__cell > span * { pointer-events: none; }
@media (max-width: 767px) {
  .bb-nav a { min-width: 44px; justify-content: center; }
  .bb-head__mark { padding: 13px 0; }
  .bb-skip { padding: 12px 14px; }
  .bb-foot__mark { padding: 2px 0; }
}
.bb-print.is-bleed > svg, .bb-print.is-bleed > .bb-print__toy { clip-path: inset(0 round 19%); }
.bb-wall__grid li[hidden] { display: none; }
/* Auto is a switch, not a state: it never fills; its dot is ink when on */
.bb-chip--auto[aria-pressed='true'] { color: var(--bb-ink); background: var(--bb-tint); }
.bb-chip--auto::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--bb-ink-2); opacity: .4; }
.bb-chip--auto[aria-pressed='true']::before { content: ''; font-size: 0; background: var(--bb-ink); opacity: 1; }
@media (max-width: 640px) {
  /* one swipeable row on the phone (a deliberate strip, checklist 8.4), bleeding to the screen edges */
  .bb-modes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--bb-gutter)); padding: 2px var(--bb-gutter) 4px; scroll-padding-inline: var(--bb-gutter); }
  .bb-modes::-webkit-scrollbar { display: none; }
  .bb-chip { flex: none; }
}


/* v1.1.1: on the dark page the print's paper (hsl 30 8% 10%) sat a shade off the page (8.5%) as a backing
   square. Its paper rect takes the page colour, so the poster reads as the page itself. */
:root[data-scheme='dark'] :is(.bb-print, .bb-print-sm) > svg > rect:first-of-type { fill: var(--bb-paper); }

/* v1.1.1: targets are ≥44×44 at every size (so ≥24 everywhere), grown with padding and pulled back with
   negative margins so nothing looks bigger or moves */
.bb-nav a { min-width: 44px; min-height: 44px; justify-content: center; margin-block: -10px; }
.bb-abx { padding-block: 12px; margin-block: -12px; }
.bb-abx > span { line-height: 20px; }
.bb-foot__abx { margin-top: 10px; }
/* the portrait hint follows the input: touch can't press Space */
.bb-hint--touch { display: none; }
@media (hover: none) and (pointer: coarse) { .bb-hint--touch { display: inline; } .bb-hint--fine { display: none; } }
.bb-foot ul a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-block: -14px; }

/* ---------------- v1.1.2: "Say a name" is the hero's one primary action. A paper panel above the grid,
   a full tile of clearing between it and any buddy (the clearing pads 64px + the 8px gap toward the crowd),
   a soft shadow only on the crowd side (down and right), no border. */
.bb-clear { grid-column: 1 / span 10; grid-row: 2 / span 7; padding-bottom: calc(var(--bb-cell)); gap: 24px; justify-content: space-between; }
@media (min-width: 1500px) { .bb-clear { grid-column: 1 / span 11; } }
@media (max-width: 1099px) { .bb-clear { grid-column: 1 / -2; grid-row: 2 / span 6; } }
.bb-say {
  position: relative; z-index: 1; background: var(--bb-paper); border-radius: 12px; padding: 20px 24px 14px;
  box-shadow: 14px 18px 36px -18px hsl(30 30% 15% / .32);
  width: min(600px, calc(100% - var(--bb-cell)));   /* a full tile of air on the crowd side */
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: 'label label label' 'buddy field go' 'out out out';
  column-gap: 16px; row-gap: 10px; align-items: center;
}
:root[data-scheme='dark'] .bb-say { box-shadow: 14px 18px 40px -16px hsl(0 0% 0% / .7); }
.bb-say__label { grid-area: label; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.bb-say__buddy { grid-area: buddy; width: 96px; height: 96px; display: block; }
.bb-say__field { grid-area: field; min-height: 52px; font-size: 20px; padding: 12px 14px 11px; }
.bb-say__field::placeholder { color: var(--bb-ink-2); opacity: .7; }
.bb-say__field:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 2px; }
.bb-say__go { grid-area: go; }
.bb-say__out { grid-area: out; font-size: 13px; color: var(--bb-ink-2); min-height: 1.4em; margin-top: -2px; }
.bb-btn--primary {
  font: 600 17px/1 var(--bb-sans); color: var(--bb-paper); background: var(--bb-ink); border: 0; border-radius: 10px;
  min-height: 52px; padding: 0 20px; white-space: nowrap; cursor: pointer; transition: opacity 150ms var(--bb-ease-out), transform 100ms var(--bb-ease-out);
}
.bb-btn--primary:hover { opacity: .88; }
.bb-btn--primary:active { transform: scale(.98); }
.bb-btn--primary:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 3px; }
@media (max-width: 559px) {
  .bb-clear { grid-column: 1 / -1; grid-row: 2 / span 6; gap: 16px; padding-bottom: var(--bb-cell); }
  .bb-say { width: 100%; padding: 16px; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: 'label label' 'buddy field' 'go go' 'out out'; column-gap: 12px; }
  .bb-say__buddy { width: 72px; height: 72px; }
  .bb-say__go { width: 100%; }
}
@media (max-width: 359px) { .bb-clear { grid-row: 2 / span 7; } }
@media (prefers-reduced-motion: reduce) { .bb-btn--primary { transition: none; } .bb-btn--primary:active { transform: none; } }
@media (max-width: 559px) { .bb-say { padding-bottom: 8px; row-gap: 10px; } .bb-say__out { min-height: 1.2em; font-size: 12.5px; } }