/* Container-scoped so the same stylesheet drives the standalone page and an
   embed inside another layout. Everything positions against .bz, never the
   viewport, so the embed does not need its own copy of any of this. */
.bz {
  position: relative;
  overflow: hidden;
  background: #0c0c0e;
  color: #f2efe9;
  font-family: Fraunces, Georgia, serif;
  --bz-dim: #9a948a;
  --bz-rule: #2a2a30;
}

.bz--full { position: fixed; inset: 0; }

.bz__stage { position: absolute; inset: 0; }

.bz .panel {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

.bz__title { top: 1.1rem; left: 1.3rem; }
.bz__title h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.bz__title p { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--bz-dim); font-style: italic; }

.bz__depth { top: 1.1rem; right: 1.3rem; text-align: right; }
.bz__depth .n { font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.bz__depth .l { font-size: 0.68rem; color: var(--bz-dim); letter-spacing: 0.09em; text-transform: uppercase; }
.bz__depth .z { font-size: 0.68rem; color: var(--bz-dim); margin-top: 0.3rem; font-variant-numeric: tabular-nums; }

.bz__trail {
  bottom: 1.1rem; left: 1.3rem; right: 1.3rem;
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.bz__chip { width: 46px; height: 46px; flex: 0 0 auto; }
.bz__chip img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 3px; border: 1px solid var(--bz-rule);
}
.bz__chip--here img { border-color: #f2efe9; }
.bz__arrow { color: var(--bz-dim); font-size: 0.75rem; flex: 0 0 auto; }

.bz__controls {
  position: absolute; z-index: 6; bottom: 1.1rem; right: 1.3rem;
  display: flex; gap: 0.45rem;
}
.bz__controls button {
  pointer-events: auto; font-family: inherit; font-size: 0.72rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: rgba(12, 12, 14, 0.72); color: #f2efe9;
  border: 1px solid var(--bz-rule); border-radius: 999px;
  padding: 0.45rem 0.9rem; cursor: pointer; backdrop-filter: blur(6px);
}
.bz__controls button:hover { border-color: #f2efe9; }

.bz__hint {
  position: absolute; z-index: 5; left: 50%; top: 50%;
  transform: translate(-50%, -50%); text-align: center;
  color: var(--bz-dim); font-size: 0.82rem; font-style: italic;
  transition: opacity 0.6s ease; pointer-events: none;
}

@media (max-width: 40rem) {
  .bz__trail { bottom: 3.8rem; }
  .bz__chip { width: 36px; height: 36px; }
}