.bb-main {
  --bb-blue: #3AA0F0;
  --bb-blue-line: rgba(58, 160, 240, .3);
  --bb-blue-soft: rgba(58, 160, 240, .12);
  --bb-pink: #F0506E;
  --bb-violet: #A77BF3;
  --bb-panel: rgba(9, 12, 16, .86);
  --bb-max: calc(var(--k-max) + var(--k-gutter) * 2);
  padding: 0 0 var(--k-sp-6);
}

.bb-floor {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    var(--svc-grain) 0 0 / 200px,
    linear-gradient(90deg, rgba(120, 150, 180, .06) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(180deg, rgba(120, 150, 180, .06) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(ellipse 70% 55% at 50% 38%, #151b22, #0c0f13 75%);
}
.bb-cv { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }

.bb-hero {
  position: relative; display: grid; align-content: center; justify-items: center; gap: var(--k-sp-4);
  min-height: calc(100svh - 64px - 96px);
  max-width: var(--bb-max); margin: 0 auto; padding: var(--k-sp-4) var(--k-gutter) var(--k-sp-5);
  text-align: center;
}
.bb-hud {
  display: flex; gap: var(--k-sp-3); margin: 0; padding: var(--k-sp-2) var(--k-sp-3);
  text-align: left; background: var(--bb-panel); border: 1px solid var(--bb-blue-line); border-radius: var(--k-rs);
}
@media (min-width: 960px) { .bb-hud { position: absolute; top: var(--k-sp-4); left: var(--k-gutter); } }
.bb-hud dt { font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-2xs); letter-spacing: .24em; color: var(--k-ink-sub); }
.bb-hud dd { margin: 0; font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-h3); letter-spacing: .08em; color: var(--k-ink); }
.bb-hud div:first-child dd { color: var(--bb-blue); }
.bb-title-wrap { display: grid; justify-items: center; gap: var(--k-sp-2); }
.bb-mark { width: 64px; height: auto; image-rendering: pixelated; }
.bb-title {
  font-family: var(--k-font-en); font-weight: 800; font-size: clamp(56px, 13vw, 148px); line-height: .92;
  letter-spacing: .03em; text-transform: uppercase; color: var(--k-ink);
  text-shadow: 3px 0 0 rgba(58, 160, 240, .5), -3px 0 0 rgba(240, 80, 110, .35);
}
.bb-tagline { font-weight: 900; font-size: var(--k-fs-h2); letter-spacing: var(--k-head-ls); line-height: 1.4; }
.bb-hero-lead { max-width: 32em; font-size: var(--k-fs-lead); color: var(--k-ink-mid); }
.bb-duty {
  max-width: 38em; padding-top: var(--k-sp-2); border-top: 1px dashed var(--k-line-strong);
  font-size: var(--k-fs-sm); color: var(--k-ink-sub);
}

.bb-stage {
  max-width: calc(var(--k-max) + 2px); margin: var(--k-sp-6) auto 0;
  background: var(--bb-panel); border: 1px solid var(--bb-blue-line); border-top: 2px solid var(--bb-blue);
  border-radius: 0 0 var(--k-rs) var(--k-rs);
}
@media (max-width: 1215px) { .bb-stage { margin-inline: var(--k-gutter); } }
.bb-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--k-sp-1) var(--k-sp-3);
  padding: var(--k-sp-3) var(--k-sp-4) var(--k-sp-2); border-bottom: 1px solid var(--k-line);
}
.bb-no { font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-sm); letter-spacing: .24em; color: var(--bb-blue); }
.bb-no-boss { color: var(--bb-pink); font-size: var(--k-fs-h3); }
.bb-h2 { font-weight: var(--k-head-w); font-size: var(--k-fs-h2); letter-spacing: var(--k-head-ls); line-height: 1.35; }
.bb-en { margin-left: auto; font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-2xs); letter-spacing: .24em; color: var(--k-ink-sub); }
.bb-stage > :not(.bb-bar) { padding: var(--k-sp-4); }
@media (max-width: 559px) {
  .bb-bar { padding: var(--k-sp-2) var(--k-sp-3); }
  .bb-stage > :not(.bb-bar) { padding: var(--k-sp-3); }
  .bb-en { display: none; }
}

.bb-about { display: grid; gap: var(--k-sp-4); }
@media (min-width: 900px) { .bb-about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.bb-prose { display: grid; gap: var(--k-sp-2); align-content: start; }
.bb-lead { font-weight: 700; font-size: var(--k-fs-lead); }
.bb-chain { margin: 0; padding: var(--k-sp-3); border: 1px solid var(--k-line); border-radius: var(--k-rs); background: rgba(0, 0, 0, .28); }
.bb-chain figcaption { font-weight: 700; }
.bb-chain ol { display: grid; gap: var(--k-sp-2); margin: var(--k-sp-2) 0; }
.bb-chain li {
  position: relative; padding: var(--k-sp-1) var(--k-sp-2);
  font-weight: 700; color: var(--k-ink); background: var(--bb-blue-soft); border-left: 3px solid var(--bb-blue);
}
.bb-chain li:nth-child(2) { border-color: var(--bb-pink); background: rgba(240, 80, 110, .1); }
.bb-chain li:nth-child(3) { border-color: var(--k-ink-sub); background: rgba(236, 231, 220, .06); }
.bb-chain li:nth-child(4) { border-color: var(--bb-violet); background: rgba(167, 123, 243, .1); }
.bb-chain li + li::before {
  content: ""; position: absolute; left: 14px; top: calc(-1 * var(--k-sp-2)); width: 2px; height: var(--k-sp-2);
  background: var(--k-line-strong);
}
.bb-chain > p { font-size: var(--k-fs-sm); color: var(--k-ink-mid); }

.bb-feats { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); background: var(--k-line); }
@media (min-width: 760px) { .bb-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bb-stage > .bb-feats { padding: 0; }
.bb-feats li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--k-sp-3); align-items: center;
  padding: var(--k-sp-4); background: #0b0e12;
}
.bb-ico { position: relative; width: 44px; height: 40px; }
.bb-ico::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 4px; }
.bb-ico-ant { color: var(--bb-blue); }
.bb-ico-ant2 { color: var(--k-ink-sub); }
.bb-ico-fly { color: var(--bb-pink); }
.bb-ico-dango { color: var(--bb-violet); }
.bb-ico-ant::before, .bb-ico-ant2::before { box-shadow: 12px 0px, 28px 0px, 12px 4px, 28px 4px, 12px 8px, 16px 8px, 20px 8px, 24px 8px, 28px 8px, 16px 12px, 20px 12px, 24px 12px, 4px 16px, 16px 16px, 20px 16px, 24px 16px, 36px 16px, 4px 20px, 8px 20px, 12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px, 32px 20px, 36px 20px, 4px 24px, 16px 24px, 20px 24px, 24px 24px, 36px 24px, 4px 28px, 12px 28px, 16px 28px, 20px 28px, 24px 28px, 28px 28px, 36px 28px, 12px 32px, 16px 32px, 20px 32px, 24px 32px, 28px 32px, 12px 36px, 16px 36px, 20px 36px, 24px 36px, 28px 36px; }
.bb-ico-fly::before { box-shadow: 4px 0px, 8px 0px, 32px 0px, 36px 0px, 0px 4px, 4px 4px, 8px 4px, 12px 4px, 28px 4px, 32px 4px, 36px 4px, 40px 4px, 0px 8px, 4px 8px, 8px 8px, 12px 8px, 20px 8px, 28px 8px, 32px 8px, 36px 8px, 40px 8px, 4px 12px, 8px 12px, 12px 12px, 20px 12px, 28px 12px, 32px 12px, 36px 12px, 12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px, 8px 20px, 12px 20px, 28px 20px, 32px 20px, 8px 24px, 32px 24px, 8px 28px, 12px 28px, 28px 28px, 32px 28px, 12px 32px, 16px 32px, 20px 32px, 24px 32px, 28px 32px, 16px 36px, 24px 36px; }
.bb-ico-dango::before { box-shadow: 12px 0px, 16px 0px, 20px 0px, 24px 0px, 28px 0px, 8px 4px, 32px 4px, 4px 8px, 16px 8px, 20px 8px, 24px 8px, 36px 8px, 4px 12px, 12px 12px, 28px 12px, 36px 12px, 4px 16px, 12px 16px, 20px 16px, 28px 16px, 36px 16px, 4px 20px, 12px 20px, 24px 20px, 28px 20px, 36px 20px, 4px 24px, 16px 24px, 36px 24px, 8px 28px, 20px 28px, 24px 28px, 28px 28px, 32px 28px, 12px 32px, 16px 32px, 20px 32px, 24px 32px, 28px 32px, 4px 36px, 12px 36px, 20px 36px, 28px 36px, 36px 36px; }

.bb-shots { display: grid; gap: var(--k-sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .bb-shots { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .bb-shot-main { grid-row: span 2; }
}
.bb-shots figure { margin: 0; }
.bb-shots figcaption { margin-top: var(--k-sp-1); font-size: var(--k-fs-xs); color: var(--k-ink-sub); }
.bb-shots .shot { border-color: var(--bb-blue-line); }

.bb-week { display: grid; gap: var(--k-sp-3); }
@media (min-width: 900px) { .bb-week { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } }
.bb-week li { display: grid; gap: 2px; align-content: start; padding-left: var(--k-sp-3); border-left: 6px solid var(--bb-blue); }
@media (min-width: 900px) {
  .bb-week li { padding: var(--k-sp-2) var(--k-sp-1) 0 0; border-left: 0; border-top: 10px solid var(--bb-blue); }
}
.bb-day { font-family: var(--k-font-en); font-weight: 800; font-size: var(--k-fs-xs); letter-spacing: .2em; color: var(--bb-blue); }
.bb-week b { font-size: var(--k-fs-h4); }
.bb-week li > span:last-child { font-size: var(--k-fs-sm); color: var(--k-ink-mid); }
.bb-stage > .bb-week-note { padding-top: 0; font-size: var(--k-fs-sm); color: var(--k-ink-sub); }

.bb-ai { display: grid; gap: var(--k-sp-2) var(--k-sp-4); }
@media (min-width: 900px) { .bb-ai { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bb-s-boss { margin-top: calc(var(--k-sp-6) + 40px); border-top-color: var(--bb-pink); border-color: rgba(240, 80, 110, .38); }
.bb-cta { justify-items: center; text-align: center; }
.bb-btn { color: #07121c; background: linear-gradient(180deg, #6bbaf5, #2b8ad6); border-color: #0f3d63; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 #0f3d63, 0 6px 10px rgba(0, 0, 0, .45); }
.bb-btn:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 0 #0f3d63, 0 2px 4px rgba(0, 0, 0, .45); }
@media (hover: hover) and (pointer: fine) { .bb-btn:hover { background: linear-gradient(180deg, #86c7f7, #3897e0); } }
.bb-stage > .bb-nav { padding-top: 0; }
.bb-nav a { background: #0b0e12; }
.bb-nav .svc-dir { color: var(--bb-blue); }
@media (hover: hover) and (pointer: fine) { .bb-nav a:hover { border-color: var(--bb-blue); color: var(--bb-blue); } }

.bb-rail {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; height: 14px; pointer-events: none;
  background:
    radial-gradient(circle, #8b9096 0 1.5px, transparent 2px) 0 50% / 48px 14px repeat-x,
    linear-gradient(180deg, #3b3f45, #202327 60%, #121416);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.bb-bot {
  position: absolute; left: 0; bottom: 8px; width: 92px; height: auto; overflow: visible;
  transform: translateX(var(--k-gutter));
}
@media (max-width: 559px) { .bb-bot { width: 60px; } }
.bb-gun { transform-box: view-box; transform-origin: 48px 44px; }
.bb-g-barrel { fill: #3a3f45; stroke: #15171a; stroke-width: 1; }
.bb-g-muzzle { fill: #24272b; stroke: #15171a; stroke-width: 1; }
.bb-g-vent { fill: #15171a; }
.bb-g-dome { fill: #6b7178; stroke: #1b1d20; stroke-width: 1.2; }
.bb-g-tape { fill: #b9ab85; opacity: .9; }
.bb-g-lens { fill: var(--bb-blue); stroke: #0c1a26; stroke-width: 1.5; }
.bb-b-body { fill: #555b62; stroke: #1b1d20; stroke-width: 1.2; }
.bb-b-seam { fill: none; stroke: #2e3237; stroke-width: 1; }
.bb-b-rust { fill: #7a3a18; opacity: .75; }
.bb-b-name { font-family: var(--k-font-en); font-weight: 800; font-size: 8px; letter-spacing: .06em; fill: #1a1c1f; }
.bb-b-bolt { fill: #a8adb3; }
.bb-b-pipe { fill: none; stroke: #2a2d31; stroke-width: 3; }
.bb-b-ant { stroke: #2a2d31; stroke-width: 1.5; }
.bb-b-lamp { fill: #e0452b; }
.bb-b-tread { fill: #1c1e21; stroke: #0e0f11; stroke-width: 1; }
.bb-b-wheel { fill: #3b3f44; stroke: #0e0f11; stroke-width: 1.5; }
.bb-b-oil { fill: #0a0b0c; opacity: .7; }

@keyframes bb-title-in { from { opacity: 0; transform: translateY(8px); } }
html.js .bb-title-wrap { animation: bb-title-in .2s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  html.js .bb-title-wrap { animation: none; }
}