.bbt-wrap,
.page-shell {
  --bb-glow-rgb: 255, 128, 32;
  --bb-glow-rest: rgba(var(--bb-glow-rgb), 0.24);
  --bb-glow-hover: rgba(var(--bb-glow-rgb), 0.42);
  --bb-glow-active: rgba(var(--bb-glow-rgb), 0.50);
  --bb-glow-root: rgba(var(--bb-glow-rgb), 0.58);
}

.bbt__tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bb-shell-unit-px, var(--bb-unit, 185.2px));
  height: var(--bb-shell-unit-px, var(--bb-unit, 185.2px));
  border-radius: var(--bb-r, 9px);
  overflow: hidden;
  cursor: pointer;
  --bb-surface-base: rgba(10, 8, 18, 0.10);
  --bb-surface-field: rgba(255, 255, 255, 0);
  --bb-surface-field-active: rgba(255, 255, 255, 0);
  --bb-surface-sheen: linear-gradient(135deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.035) 46%, rgba(255,255,255,0.00) 66%);
  --bb-surface-sheen-active: linear-gradient(135deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.05) 46%, rgba(255,255,255,0.00) 66%);
  --bb-overlay-tint: rgba(255, 255, 255, 0);
  --bb-overlay-vignette: radial-gradient(
    ellipse at 50% 50%,
    transparent 42%,
    rgba(0, 0, 0, 0.10) 68%,
    rgba(0, 0, 0, 0.28) 100%
  );
  --bb-outline-color: rgba(255, 255, 255, 0);
  --bb-guide-color: rgba(255, 255, 255, 0);
  --bb-guide-alpha: 0;
  --bb-guide-shadow: none;
  --bb-artwork-opacity: 1;
  --bb-artwork-filter: none;
  --bb-text-color: rgba(243, 232, 215, 0.88);
  --bb-text-blend-mode: normal;
  --bb-text-stroke: 0 transparent;
  --bb-glow-gain: 1;
  --bb-press-depth-px: 3;
  --bb-press-depth: calc(1px * var(--bb-press-depth-px, 3));
  --bb-glow-rest-alpha: calc(0.24 * var(--bb-glow-gain, 1));
  --bb-glow-hover-alpha: calc(0.42 * var(--bb-glow-gain, 1));
  --bb-glow-active-alpha: calc(0.50 * var(--bb-glow-gain, 1));
  --bb-glow-root-alpha: calc(0.58 * var(--bb-glow-gain, 1));
  --bb-reveal-scale: 1;
  --bb-reveal-z: 0px;
  background: var(--bb-surface-base);
  transform:
    translate(calc(var(--tx, 0px) + var(--bb-reveal-dx, 0px)), calc(var(--ty, 0px) + var(--bb-reveal-dy, 0px)))
    translateZ(var(--bb-reveal-z, 0px))
    scale(calc(0.88 * var(--bb-reveal-scale, 1)));
  opacity: 0;
  transition: transform var(--bb-dur, 0.42s) var(--bb-ease, cubic-bezier(0.16,1,0.3,1)), opacity 0.28s ease, box-shadow 0.2s ease, background 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  transform-style: preserve-3d;
  will-change: transform, opacity, box-shadow, filter;
}

.bbt__tile::before {
  content: "";
  position: absolute;
  inset: var(--bb-interaction-halo-inset, -10%);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
  background:
    var(--bb-interaction-halo-background,
      radial-gradient(circle at 50% 50%,
        rgba(var(--bb-glow-rgb), 0.00) 34%,
        rgba(var(--bb-glow-rgb), 0.14) 56%,
        rgba(var(--bb-glow-rgb), 0.26) 74%,
        rgba(var(--bb-glow-rgb), 0.00) 92%
      )
    );
}

.bbt__tile[data-mm-w="50"]  { width: calc(var(--bb-shell-mm-scale, var(--mm, 3.779528px)) * 50); }
.bbt__tile[data-mm-w="75"]  { width: calc(var(--bb-shell-mm-scale, var(--mm, 3.779528px)) * 75); }
.bbt__tile[data-mm-w="101"] { width: calc(var(--bb-shell-mm-scale, var(--mm, 3.779528px)) * 101); }
.bbt__tile[data-mm-w="151"] { width: calc(var(--bb-shell-mm-scale, var(--mm, 3.779528px)) * 151); }
.bbt__tile[data-mm-w="203"] { width: calc(var(--bb-shell-mm-scale, var(--mm, 3.779528px)) * 203); }
.bbt__tile[data-mm-h="50"]  { height: calc(var(--bb-shell-mm-scale, var(--mm, 3.779528px)) * 50); }
.bbt__tile[data-mm-h="75"]  { height: calc(var(--bb-shell-mm-scale, var(--mm, 3.779528px)) * 75); }
.bbt__tile[data-mm-h="101"] { height: calc(var(--bb-shell-mm-scale, var(--mm, 3.779528px)) * 101); }
.bbt__tile[data-mm-h="151"] { height: calc(var(--bb-shell-mm-scale, var(--mm, 3.779528px)) * 151); }
.bbt__tile[data-mm-h="203"] { height: calc(var(--bb-shell-mm-scale, var(--mm, 3.779528px)) * 203); }

.bbt__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    var(--bb-surface-sheen),
    var(--bb-overlay-tint),
    var(--bb-surface-field);
  border: 1px solid var(--bb-outline-color);
  box-shadow: var(--bb-guide-shadow);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bbt__tile img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  opacity: var(--bb-artwork-opacity);
  filter: var(--bb-artwork-filter);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.bbt__img--base {
  filter: saturate(0.92) brightness(0.92);
}

.bbt__img--overlay {
  position: absolute !important;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.30 !important;
  filter: grayscale(0.08) saturate(0.34) brightness(0.88);
}

.bbt__tile[data-id="root"],
.bbt__tile--root,
.bbt__tile--visible,
.bbt__tile--shell {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

.bbt__tile--visible {
  transform:
    translate(calc(var(--tx, 0px) + var(--bb-reveal-dx, 0px)), calc(var(--ty, 0px) + var(--bb-reveal-dy, 0px)))
    translateZ(var(--bb-reveal-z, 0px))
    scale(var(--bb-reveal-scale, 1));
}

.bbt__tile[data-id="root"],
.bbt__tile--root {
  transform:
    translate(calc(var(--tx, 0px) + var(--bb-reveal-dx, 0px)), calc(var(--ty, 0px) + var(--bb-reveal-dy, 0px)))
    translateZ(var(--bb-reveal-z, 0px))
    scale(var(--bb-reveal-scale, 1));
  z-index: 20;
}

.bbt__tile--shell {
  transform: none;
  translate: none;
}

.bbt__tile[data-level="2"].bbt__tile--visible::before,
.bbt__tile--comment::before {
  opacity: 0.72;
  transform: scale(1.01);
}

.bbt__tile:hover {
  box-shadow:
    0 0 9px 3px rgba(var(--bb-glow-rgb), var(--bb-glow-hover-alpha, 0.42)),
    inset 0 0 8px 2px rgba(0, 0, 0, 0.24);
  z-index: 30;
}

.bbt__tile:hover::before,
.bbt__tile--active::before,
.bbt__tile--path-anchor::before,
.bbt__tile--shell.is-active::before,
.bbt__tile--shell:hover::before,
.bbt__tile--shell.is-comment-burned::before {
  opacity: var(--bb-interaction-halo-hover-opacity, 0.94);
  transform: scale(var(--bb-interaction-halo-hover-scale, 1.04));
}

.bbt__tile--active::before,
.bbt__tile--l2-focus::before,
.bbt__tile--shell.is-active::before,
.bbt__tile--shell.is-comment-burned::before {
  opacity: var(--bb-interaction-halo-active-opacity, 1);
  transform: scale(var(--bb-interaction-halo-active-scale, 1.05));
}

.bbt__tile--active::after,
.bbt__tile--l2-focus::after,
.bbt__tile--shell.is-active::after {
  box-shadow: var(--bb-interaction-active-box-shadow, 0 0 6px 2px rgba(var(--bb-glow-rgb), var(--bb-glow-active-alpha, 0.50)), inset 0 0 10px 3px rgba(0,0,0,0.30));
}

.bbt__tile--active::after,
.bbt__tile--l2-focus::after,
.bbt__tile:hover::after {
  background:
    var(--bb-surface-sheen-active),
    var(--bb-overlay-tint),
    var(--bb-surface-field-active);
}

.bbt__tile:active {
  transform:
    translate(calc(var(--tx, 0px) + var(--bb-reveal-dx, 0px)), calc(var(--ty, 0px) + var(--bb-reveal-dy, 0px) + var(--bb-press-depth, 3px)))
    translateZ(var(--bb-reveal-z, 0px))
    scale(calc(var(--bb-reveal-scale, 1) * 0.992));
  box-shadow:
    0 0 7px 2px rgba(var(--bb-glow-rgb), var(--bb-glow-active-alpha, 0.50)),
    inset 0 0 12px 4px rgba(0, 0, 0, 0.28);
}

.bbt__tile--shell:active {
  transform: translateY(var(--bb-press-depth, 3px));
}

.bbt__tile[data-id="root"]:hover,
.bbt__tile--root:hover {
  box-shadow:
    0 0 11px 4px rgba(var(--bb-glow-rgb), var(--bb-glow-root-alpha, 0.58)),
    inset 0 0 10px 3px rgba(0, 0, 0, 0.28);
}

.bbt__tile[data-id="root"]:hover::before,
.bbt__tile--root:hover::before {
  opacity: 1;
  transform: scale(1.05);
}

.bbt__tile--press-pulse::before {
  animation: var(--bb-interaction-halo-pulse-animation, bbt-press-underglow 0.28s ease-out);
}

.bbt-wrap[data-presentation-mode="idealized"] .bbt__tile,
.page-shell[data-presentation-mode="idealized"] .bbt__tile {
  --bb-glow-rest-alpha: calc(0.16 * var(--bb-glow-gain, 1));
  --bb-glow-hover-alpha: calc(0.26 * var(--bb-glow-gain, 1));
  --bb-glow-active-alpha: calc(0.34 * var(--bb-glow-gain, 1));
  --bb-glow-root-alpha: calc(0.42 * var(--bb-glow-gain, 1));
}

.bbt-wrap[data-presentation-mode="physical"] .bbt__tile,
.page-shell[data-presentation-mode="physical"] .bbt__tile {
  --bb-glow-rest-alpha: calc(0.22 * var(--bb-glow-gain, 1));
  --bb-glow-hover-alpha: calc(0.34 * var(--bb-glow-gain, 1));
  --bb-glow-active-alpha: calc(0.42 * var(--bb-glow-gain, 1));
  --bb-glow-root-alpha: calc(0.48 * var(--bb-glow-gain, 1));
}

.bbt-wrap[data-presentation-mode="expressive"] .bbt__tile,
.page-shell[data-presentation-mode="expressive"] .bbt__tile {
  --bb-glow-rest-alpha: calc(0.28 * var(--bb-glow-gain, 1));
  --bb-glow-hover-alpha: calc(0.46 * var(--bb-glow-gain, 1));
  --bb-glow-active-alpha: calc(0.54 * var(--bb-glow-gain, 1));
  --bb-glow-root-alpha: calc(0.62 * var(--bb-glow-gain, 1));
}

.bbt__overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  overflow: hidden;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 12% 12% 12%;
  color: var(--bb-text-color, rgba(243, 232, 215, 0.88));
  mix-blend-mode: var(--bb-text-blend-mode, normal);
}

.bbt__tile[data-mode="template"] .bbt__overlay {
  display: block;
  overflow: hidden;
}

.bbt__letter,
.bbt__kicker {
  color: var(--bb-text-color, var(--bb-shell-kicker-color, rgba(205, 220, 255, 0.82)));
  font-family: var(--bb-shell-display-font, "P22 Typewriter", "Courier Prime", "Courier New", monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
  mix-blend-mode: var(--bb-text-blend-mode, normal);
  text-shadow: var(--bb-overlay-text-shadow, none);
}

.bbt__title {
  color: var(--bb-text-color, var(--bb-shell-title-color, rgba(255, 244, 226, 0.92)));
  font-family: var(--bb-shell-display-font, "P22 Typewriter", "Courier Prime", "Courier New", monospace);
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  mix-blend-mode: var(--bb-text-blend-mode, normal);
  -webkit-text-stroke: var(--bb-text-stroke, 0 transparent);
  text-shadow: var(--bb-overlay-text-shadow, none);
}

.bbt__body,
.bbt__meta {
  color: var(--bb-text-color, var(--bb-shell-body-color, rgba(243, 232, 215, 0.88)));
  font-family: var(--bb-shell-body-font, "IBM Plex Mono", "Courier New", monospace);
  font-size: 11px;
  line-height: 1.28;
  mix-blend-mode: var(--bb-text-blend-mode, normal);
  text-shadow: var(--bb-overlay-text-shadow, none);
}

.bbt__meta {
  color: var(--bb-text-color, var(--bb-shell-meta-color, rgba(224, 205, 180, 0.72)));
  font-size: 10px;
  line-height: 1.2;
}

.bbt__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bbt__tag {
  color: var(--bb-shell-tag-color, rgba(224, 205, 180, 0.74));
  font-family: var(--bb-shell-mono-font, "IBM Plex Mono", "Courier New", monospace);
  font-size: 9px;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: var(--bb-overlay-text-shadow, none);
}

.bbt__notes {
  display: contents;
}

.bbt__notes-line {
  font-family: "P22 Typewriter", "American Typewriter", "Courier Prime", "Courier New", monospace;
  font-size: 0.83rem;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.025em;
  color: #151020;
  mix-blend-mode: multiply;
  text-shadow: 0 0 1px rgba(10,8,18,0.55), 0 1px 1px rgba(10,8,18,0.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bbt__tile[data-surface-class="annotation"] .bbt__overlay,
.bbt__tile[data-surface-class="control"] .bbt__overlay,
.bbt__tile[data-surface-profile="schematic_blueprint"] .bbt__overlay {
  text-shadow: 0 1px 2px rgba(5, 4, 8, 0.52);
}

/* --- Quiet surface profiles ---
   Reduced visual weight for supporting/reference tiles.
   These profiles are defined in the interaction contract's surface_profiles
   and apply across all consumers (chuckStudio, chuckSmyth.com, dearGrandmas, etc.). */

.bbt__tile[data-surface-profile="engraved_quiet"] {
  opacity: 0.85;
}

.bbt__tile[data-surface-profile="muted_grain_fill"] {
  filter: saturate(0.7);
}

.bbt__tile[data-surface-profile="reference_vignette_quiet"] {
  opacity: 0.9;
}

.bbt__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: var(--bb-overlay-vignette);
}

.bbt__tile[data-board="ether"] .bbt__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(
      ellipse at 50% 50%,
      transparent 25%,
      rgba(3, 1, 0, 0.38) 65%,
      rgba(2, 0, 0, 0.58) 100%
    ),
    rgba(4, 2, 1, 0.22);
}

.bbt__tile[data-board="ether"] .bbt__overlay::after {
  display: none;
}

.bbt__tile[data-tone="dark"] {
  --bb-text-color: rgba(205,196,238,1.0);
  --bb-text-blend-mode: normal;
  --bb-text-stroke: 1px rgba(16,12,28,0.88);
  --bb-overlay-text-shadow: none;
}

.bbt__tile:not([data-tone="dark"]) {
  --bb-text-color: rgba(18,7,2,0.90);
  --bb-text-blend-mode: multiply;
  --bb-text-stroke: 0 transparent;
  --bb-overlay-text-shadow:
    0 0 1px rgba(0,0,0,0.95),
    0 0 3px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.30);
}

.bbt__tile[data-tone="dark"] .bbt__notes-line {
  color: rgba(205,196,238,1.0);
  mix-blend-mode: normal;
  text-shadow: 0 0 1px rgba(80,70,110,0.50), 0 1px 1px rgba(80,70,110,0.22);
}

.bbt__tile[data-ink="gold2"] .bbt__notes-line {
  color: #bb6030;
  mix-blend-mode: normal;
  text-shadow: 0 0 1px rgba(128,64,32,0.65), 0 1px 1px rgba(128,64,32,0.30);
}

.bbt__tile[data-ink="frost"] .bbt__title,
.bbt__tile[data-ink="frost"] .bbt__notes-line {
  color: #bbbbdd;
  mix-blend-mode: normal;
  text-shadow: 0 0 1px rgba(90,90,130,0.55), 0 1px 1px rgba(90,90,130,0.25);
}

.bbt__tile[data-ink="indigo"] .bbt__title,
.bbt__tile[data-ink="indigo"] .bbt__notes-line {
  color: #404080;
  mix-blend-mode: normal;
  text-shadow: 0 0 1px rgba(22,18,50,0.55), 0 1px 1px rgba(22,18,50,0.25);
}

.bbt__tile[data-ink="electric"] .bbt__title,
.bbt__tile[data-ink="electric"] .bbt__notes-line {
  color: #6060bb;
  mix-blend-mode: normal;
  text-shadow: 0 0 1px rgba(48,48,100,0.65), 0 1px 1px rgba(48,48,100,0.28);
}

.bbt__corner-actions {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.bbt__corner-indicator {
  position: absolute;
  width: var(--bb-corner-size, 1.16rem);
  height: var(--bb-corner-size, 1.16rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-corner-radius, 999px);
  border: var(--bb-corner-border, 1px solid rgba(255,249,232,0.18));
  background: var(--bb-corner-background, radial-gradient(circle at 50% 42%, rgba(255,255,255,0.14), rgba(255,255,255,0) 58%), rgba(10, 8, 18, 0.26));
  color: var(--bb-corner-color, rgba(255,249,232,0.72));
  font-family: var(--bb-corner-font-family, "P22 Typewriter", "Courier Prime", "Courier New", monospace);
  font-size: var(--bb-corner-font-size, 0.55rem);
  line-height: var(--bb-corner-line-height, 1);
  letter-spacing: 0;
  box-shadow: var(--bb-corner-box-shadow, 0 0 0 1px rgba(0,0,0,0.12));
  opacity: var(--bb-corner-opacity, 0.56);
  pointer-events: auto;
  cursor: pointer;
  transform: scale(var(--bb-corner-scale, 0.94));
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.bbt__corner-indicator:hover,
.bbt__tile:hover .bbt__corner-indicator,
.bbt__tile--active .bbt__corner-indicator,
.bbt__tile--shell.is-active .bbt__corner-indicator {
  opacity: 0.94;
  transform: scale(1);
  box-shadow: var(--bb-corner-hover-box-shadow, 0 0 0 2px rgba(var(--bb-glow-rgb),0.10), 0 0 12px rgba(var(--bb-glow-rgb),0.18));
  border-color: var(--bb-corner-hover-border-color, rgba(var(--bb-glow-rgb),0.42));
  color: var(--bb-corner-hover-color, rgba(255,249,232,0.96));
}

.bbt__corner-indicator--top-left { top: var(--bb-corner-offset, 7px); left: var(--bb-corner-offset, 7px); }
.bbt__corner-indicator--top-right { top: var(--bb-corner-offset, 7px); right: var(--bb-corner-offset, 7px); }
.bbt__corner-indicator--bottom-left { bottom: var(--bb-corner-offset, 7px); left: var(--bb-corner-offset, 7px); }
.bbt__corner-indicator--bottom-right { bottom: var(--bb-corner-offset, 7px); right: var(--bb-corner-offset, 7px); }

.bbt__corner-indicator[data-action-id="expand_primary"] {
  border-color: var(--bb-corner-expand-primary-border-color, rgba(var(--bb-glow-rgb),0.34));
  box-shadow: var(--bb-corner-expand-primary-box-shadow, 0 0 0 1px rgba(var(--bb-glow-rgb),0.12));
}

.bbt__corner-indicator[data-action-id="expand_alternate"] { opacity: var(--bb-corner-expand-alternate-opacity, 0.42); }
.bbt__corner-indicator[data-action-id="route_direct"] { color: var(--bb-corner-route-color, rgba(188, 200, 255, 0.9)); }
.bbt__corner-indicator[data-action-id="context_meta"] { color: var(--bb-corner-context-color, rgba(164, 168, 214, 0.82)); }

.bbt__corner {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  color: rgba(21,16,32,0.80);
}

.bbt__tile[data-tone="dark"] .bbt__corner { color: rgba(205,196,238,0.90); }
.bbt__tile[data-ink="gold2"] .bbt__corner { color: #bb6030; }
.bbt__tile[data-ink="electric"] .bbt__corner { color: #6060bb; }
.bbt__tile[data-ink="frost"] .bbt__corner { color: #bbbbdd; }
.bbt__tile[data-ink="indigo"] .bbt__corner { color: #404080; }

.bbt__comment-trigger {
  position: absolute;
  left: 50%;
  bottom: var(--bb-comment-trigger-bottom, 7px);
  width: var(--bb-comment-trigger-size, 1.42rem);
  height: var(--bb-comment-trigger-size, 1.42rem);
  font-family: var(--bb-comment-trigger-font-family, "Cormorant Garamond", "Garamond", "Georgia", serif);
  font-size: var(--bb-comment-trigger-font-size, 0.74rem);
  line-height: var(--bb-comment-trigger-line-height, 1);
  background: var(--bb-comment-trigger-background, radial-gradient(circle at 50% 45%, rgba(255,255,255,0.14), rgba(255,255,255,0) 58%), rgba(10, 8, 18, 0.12));
  border: var(--bb-comment-trigger-border, 1px solid color-mix(in srgb, currentColor 38%, transparent));
  border-radius: var(--bb-comment-trigger-radius, 999px);
  padding: 0;
  cursor: pointer;
  pointer-events: all;
  opacity: var(--bb-comment-trigger-opacity, 0.44);
  color: currentColor;
  transform: var(--bb-comment-trigger-transform-rest, translateX(-50%) translateY(2px) scale(0.94));
  text-shadow: var(--bb-comment-trigger-text-shadow, 0 0 2px rgba(255,249,232,0.18), 0 1px 2px rgba(10,8,18,0.28));
  box-shadow: var(--bb-comment-trigger-box-shadow-rest, 0 0 0 0 rgba(var(--cs-accent-rgb, 255, 128, 32), 0));
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  user-select: none;
}

.bbt__comment-trigger:hover {
  opacity: 0.96;
  transform: var(--bb-comment-trigger-transform-hover, translateX(-50%) translateY(0) scale(1.08));
  filter: var(--bb-comment-trigger-hover-filter, brightness(1.18) saturate(1.08));
  box-shadow: var(--bb-comment-trigger-box-shadow-hover, 0 0 0 3px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.12), 0 0 14px 1px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.34));
  animation: var(--bb-comment-trigger-hover-animation, bb-comment-submit-pulse 1.4s ease-in-out infinite);
}

.bbt__tile:hover .bbt__comment-trigger,
.bbt__tile:focus-within .bbt__comment-trigger,
.bbt__tile.is-comment-burned .bbt__comment-trigger,
.bbt__tile--shell.is-active .bbt__comment-trigger {
  opacity: 0.88;
  transform: var(--bb-comment-trigger-transform-active, translateX(-50%) translateY(0) scale(1));
  filter: var(--bb-comment-trigger-active-filter, brightness(1.12) saturate(1.05));
  box-shadow: var(--bb-comment-trigger-box-shadow-active, 0 0 0 2px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.10), 0 0 10px 1px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.26));
  animation: var(--bb-comment-trigger-active-animation, bb-comment-submit-pulse 1.55s ease-in-out infinite);
}

.bbt__tile,
.bbt__tile--comment {
  --bb-comment-live-color: rgba(21,16,32,0.90);
  --bb-comment-final-color: rgba(21,16,32,0.88);
  --bb-comment-submit-color: rgba(21,16,32,0.98);
  --bb-comment-submit-stroke: 0px transparent;
  --bb-comment-submit-shadow: 0 1px 2px rgba(255,249,232,0.12), 0 1px 2px rgba(10,8,18,0.24);
  --bb-comment-placeholder: rgba(18,7,2,0.18);
  --bb-comment-caret: rgba(18,7,2,0.72);
  --bb-comment-stroke-live: 0px transparent;
  --bb-comment-stroke-final: 0px transparent;
  --bb-comment-blend: multiply;
  --bb-comment-shadow-live: 0 1px 2px rgba(10,8,18,0.18);
  --bb-comment-shadow-final: 0 1px 2px rgba(10,8,18,0.12);
}

.bbt__tile[data-tone="dark"],
.bbt__tile--comment[data-tone="dark"] {
  --bb-comment-live-color: rgba(205,196,238,1.0);
  --bb-comment-final-color: rgba(205,196,238,1.0);
  --bb-comment-submit-color: rgba(236,230,255,1.0);
  --bb-comment-submit-stroke: 0.75px rgba(16,12,28,0.88);
  --bb-comment-submit-shadow: 0 0 2px rgba(248,244,255,0.22), 0 0 8px rgba(32,22,56,0.22);
  --bb-comment-placeholder: rgba(205,196,238,0.22);
  --bb-comment-caret: rgba(205,196,238,0.88);
  --bb-comment-stroke-live: 0.75px rgba(16,12,28,0.85);
  --bb-comment-stroke-final: 0.75px rgba(16,12,28,0.85);
  --bb-comment-blend: normal;
  --bb-comment-shadow-live: none;
  --bb-comment-shadow-final: none;
}

.bbt__tile[data-ink="gold2"],
.bbt__tile--comment[data-ink="gold2"] {
  --bb-comment-live-color: #bb6030;
  --bb-comment-final-color: #bb6030;
  --bb-comment-submit-color: #cf713d;
  --bb-comment-submit-stroke: 0px transparent;
  --bb-comment-submit-shadow: 0 0 1px rgba(255,232,214,0.20), 0 1px 2px rgba(110,48,20,0.30);
  --bb-comment-placeholder: rgba(187,96,48,0.24);
  --bb-comment-stroke-live: 0px transparent;
  --bb-comment-stroke-final: 0px transparent;
  --bb-comment-blend: normal;
  --bb-comment-shadow-live: 0 1px 1px rgba(128,64,32,0.28);
  --bb-comment-shadow-final: 0 1px 1px rgba(128,64,32,0.22);
}

.bbt__tile[data-ink="electric"],
.bbt__tile--comment[data-ink="electric"] {
  --bb-comment-live-color: #6060bb;
  --bb-comment-final-color: #6060bb;
  --bb-comment-submit-color: #7a7ad8;
  --bb-comment-submit-stroke: 0px transparent;
  --bb-comment-submit-shadow: 0 0 1px rgba(238,240,255,0.18), 0 1px 2px rgba(34,32,96,0.34);
  --bb-comment-placeholder: rgba(96,96,187,0.22);
  --bb-comment-stroke-live: 0px transparent;
  --bb-comment-stroke-final: 0px transparent;
  --bb-comment-blend: normal;
  --bb-comment-shadow-live: 0 1px 1px rgba(48,48,100,0.30);
  --bb-comment-shadow-final: 0 1px 1px rgba(48,48,100,0.24);
}

.bbt__tile[data-ink="frost"],
.bbt__tile--comment[data-ink="frost"] {
  --bb-comment-live-color: #bbbbdd;
  --bb-comment-final-color: #bbbbdd;
  --bb-comment-submit-color: #e0e2ff;
  --bb-comment-submit-stroke: 0.45px rgba(38,34,64,0.52);
  --bb-comment-submit-shadow: 0 0 2px rgba(248,250,255,0.20), 0 1px 2px rgba(64,66,110,0.26);
  --bb-comment-placeholder: rgba(187,187,221,0.22);
  --bb-comment-stroke-live: 0px transparent;
  --bb-comment-stroke-final: 0px transparent;
  --bb-comment-blend: normal;
  --bb-comment-shadow-live: 0 1px 1px rgba(90,90,130,0.26);
  --bb-comment-shadow-final: 0 1px 1px rgba(90,90,130,0.22);
}

.bbt__tile[data-ink="indigo"],
.bbt__tile--comment[data-ink="indigo"] {
  --bb-comment-live-color: #404080;
  --bb-comment-final-color: #404080;
  --bb-comment-submit-color: #5c5cb4;
  --bb-comment-submit-stroke: 0px transparent;
  --bb-comment-submit-shadow: 0 0 1px rgba(232,234,255,0.16), 0 1px 2px rgba(22,18,50,0.34);
  --bb-comment-placeholder: rgba(64,64,128,0.22);
  --bb-comment-stroke-live: 0px transparent;
  --bb-comment-stroke-final: 0px transparent;
  --bb-comment-blend: normal;
  --bb-comment-shadow-live: 0 1px 1px rgba(22,18,50,0.28);
  --bb-comment-shadow-final: 0 1px 1px rgba(22,18,50,0.22);
}

.bbt__comment-engrave {
  position: absolute;
  inset: var(--bb-comment-engrave-inset, 10px 10px 32px);
  z-index: 4;
  display: block;
  padding: var(--bb-comment-engrave-padding, 10px 8px 8px);
  font-family: var(--bb-comment-engrave-font-family, "Helvetica Neue", "Arial Narrow", Arial, sans-serif);
  font-weight: var(--bb-comment-engrave-font-weight, 700);
  font-size: var(--bb-comment-engrave-font-size, 0.95rem);
  line-height: var(--bb-comment-engrave-line-height, 1.04);
  letter-spacing: var(--bb-comment-engrave-letter-spacing, 0.01em);
  color: rgba(21,16,32,0.0);
  mix-blend-mode: var(--bb-comment-blend);
  text-align: var(--bb-comment-engrave-text-align, center);
  word-break: break-word;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  background: none;
  border: 0;
  box-shadow: none;
  outline: none;
  -webkit-text-stroke: 0px transparent;
  transition: color 0.15s ease;
}

.bbt__tile--comment .bbt__overlay {
  pointer-events: none;
}

.bbt__comment-engrave[contenteditable] {
  pointer-events: auto;
  cursor: text;
  outline: none;
  background: none;
  border: 0;
  box-shadow: none;
  caret-color: var(--bb-comment-caret);
}

.bbt__tile--editing .bbt__comment-engrave[contenteditable] {
  color: var(--bb-comment-live-color);
  -webkit-text-stroke: var(--bb-comment-stroke-live);
  text-shadow: var(--bb-comment-shadow-live);
}

.bbt__comment-engrave[contenteditable]:empty::before {
  content: var(--bb-comment-placeholder-text, "leave a note…");
  color: var(--bb-comment-placeholder);
  pointer-events: none;
}

.bbt__tile--editing::after {
  content: var(--bb-comment-edit-hint-content, "↵ burn  ·  esc cancel");
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--bb-comment-edit-hint-font-size, 0.36rem);
  letter-spacing: var(--bb-comment-edit-hint-letter-spacing, 0.11em);
  color: var(--bb-comment-edit-hint-color, rgba(255,255,255,0.22));
  pointer-events: none;
}

.bbt__comment-submit {
  position: absolute;
  left: 50%;
  bottom: 7px;
  z-index: 10;
  width: 1.42rem;
  height: 1.42rem;
  border: 1px solid color-mix(in srgb, var(--bb-comment-live-color) 42%, transparent);
  border-radius: 999px;
  padding: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.18), rgba(255,255,255,0) 58%),
    rgba(10, 8, 18, 0.12);
  color: var(--bb-comment-submit-color);
  font-family: "Cormorant Garamond", "Garamond", "Georgia", serif;
  font-size: 0.74rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px) scale(0.92);
  -webkit-text-stroke: var(--bb-comment-submit-stroke);
  text-shadow: var(--bb-comment-submit-shadow);
  mix-blend-mode: normal;
  filter: brightness(1) saturate(1);
  box-shadow: 0 0 0 0 rgba(var(--cs-accent-rgb, 255, 128, 32), 0);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background-color 0.22s ease;
}

.bbt__tile--editing .bbt__comment-submit {
  opacity: 0.42;
  pointer-events: auto;
}

.bbt__tile--editing.is-dirty .bbt__comment-submit {
  opacity: 0.9;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: bb-comment-submit-pulse 1.65s ease-in-out infinite;
}

.bbt__comment-submit:hover {
  transform: translateX(-50%) translateY(0) scale(1.08);
  opacity: 1;
  filter: brightness(1.24) saturate(1.12);
  box-shadow:
    0 0 0 3px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.12),
    0 0 16px 2px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.42);
  animation-duration: 0.92s;
}

.bbt__comment-submit:focus-visible {
  opacity: 1;
  outline: none;
  transform: translateX(-50%) translateY(0) scale(1.08);
  filter: brightness(1.24) saturate(1.12);
  box-shadow:
    0 0 0 3px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.16),
    0 0 16px 2px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.46);
}

.bbt__tile--editing:not(.is-dirty) .bbt__comment-submit {
  animation: none;
}

.bbt__tile--editing .bbt__corner {
  opacity: 0;
  pointer-events: none;
}

.bbt__comment-engrave--live {
  color: var(--bb-comment-live-color) !important;
  -webkit-text-stroke: var(--bb-comment-stroke-live) !important;
  text-shadow: var(--bb-comment-shadow-live);
}

.bbt__comment-engrave--burning {
  color: var(--bb-comment-final-color) !important;
  -webkit-text-stroke: var(--bb-comment-stroke-final) !important;
  animation: bbt-burn 1.4s ease-out forwards;
}

.bbt__tile[data-tone="dark"] .bbt__comment-engrave--burning {
  animation: bbt-burn-dark 1.4s ease-out forwards;
}

.bbt__comment-engrave--burned {
  opacity: 1 !important;
  color: var(--bb-comment-final-color) !important;
  -webkit-text-stroke: var(--bb-comment-stroke-final) !important;
  text-shadow: var(--bb-comment-shadow-final);
  filter: none;
}

.bbt__comment-engrave--fading {
  transition: color 1.4s ease, opacity 1.4s ease !important;
  color: rgba(18,7,2,0.0) !important;
  opacity: 0 !important;
}

.bbt__tile[data-tone="dark"] .bbt__comment-engrave--fading {
  color: rgba(205,196,238,0.0) !important;
}

.bbt__tile--comment {
  box-shadow: 0 4px 18px rgba(0,0,0,0.52), 0 0 10px 2px var(--bb-glow-rest), inset 0 0 8px 2px rgba(0,0,0,0.20);
  cursor: pointer;
  z-index: 35 !important;
}

.bbt__tile--comment:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.52), 0 0 12px 3px var(--bb-glow-hover), inset 0 0 8px 2px rgba(0,0,0,0.24) !important;
}

/* Surface profile visuals are token-driven from bordSpecs.
   bitbord_tile_surface.js reads the interaction contract, applies the
   profile's CSS tokens to the host, and this stylesheet consumes them
   generically. Do not hardcode per-profile fills or vignettes here. */

@keyframes bbt-press-underglow {
  0% {
    opacity: 0.42;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes bb-comment-submit-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--cs-accent-rgb, 255, 128, 32), 0.0);
    border-color: color-mix(in srgb, var(--bb-comment-live-color) 42%, transparent);
    filter: brightness(1) saturate(1);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.18), 0 0 12px 1px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.30);
    border-color: color-mix(in srgb, var(--bb-comment-live-color) 72%, transparent);
    filter: brightness(1.2) saturate(1.08);
  }
}

@keyframes bbt-burn {
  0% {
    color: rgba(235,102,8,0.85);
    filter: blur(0.9px);
    text-shadow: 0 0 6px rgba(255,145,5,0.95), 0 0 14px rgba(255,82,0,0.68), 0 0 26px rgba(200,52,0,0.32);
  }
  20% {
    color: rgba(145,48,5,0.94);
    filter: blur(0.2px);
    text-shadow: 0 0 4px rgba(195,68,5,0.58), 0 0 9px rgba(165,42,0,0.28);
  }
  58% {
    color: rgba(30,10,2,0.96);
    filter: none;
    text-shadow: none;
  }
  100% {
    color: rgba(21,16,32,0.88);
    filter: none;
    text-shadow: none;
  }
}

@keyframes bbt-burn-dark {
  0% {
    color: rgba(255,255,252,0.88);
    filter: blur(0.9px);
    text-shadow: 0 0 8px rgba(255,252,232,0.98), 0 0 18px rgba(255,222,120,0.72), 0 0 32px rgba(220,162,62,0.42);
  }
  20% {
    color: rgba(235,228,255,0.97);
    filter: blur(0.2px);
    text-shadow: 0 0 5px rgba(225,218,252,0.62), 0 0 11px rgba(212,202,248,0.32);
  }
  100% {
    color: rgba(205,196,238,1.0);
    filter: none;
    text-shadow: none;
  }
}

.slot--letterbox .bbt__body,
.slot--letterbox .app-shell-viewer-body {
  display: grid;
  place-items: center;
  text-align: center;
}

.slot--letterbox .letterbox-glyph {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  min-height: 1.4em;
  padding: 0.08em 0.18em;
  font-family: var(--bb-shell-display-font, "IBM Plex Mono", monospace);
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bb-text-color, rgba(255, 244, 226, 0.92)) 92%, white);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.22);
}

.letterbox-overlay-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 2;
}

.letterbox-overlay-stack__layer {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.letterbox-overlay-stack__marker {
  position: absolute;
  width: 42%;
  height: 42%;
  border: 1px solid color-mix(in srgb, var(--bb-outline-color, rgba(255, 255, 255, 0.2)) 70%, transparent);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}