.bk-hero { padding: 88px 0 48px; border-bottom: 1px solid var(--rail); }
.bk-title { margin: 12px 0 0; font: 400 clamp(36px, 5vw, 56px)/1.05 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.bk-lede { max-width: 560px; margin: 16px 0 0; font: 400 17px/1.55 var(--font-ui); color: var(--ink-soft); }
.bk a:not(.btn):not(.bk-pack__item) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }

.bk-logo { position: relative; display: grid; place-items: center; height: clamp(200px, 28vw, 340px); margin: 40px 0 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.bk-logo__svg { display: block; width: clamp(min(84%, 300px), 56%, 640px); height: auto; overflow: visible; }
.bk-logo__svg rect, .bk-logo__svg path { fill: var(--ink); transition: fill .12s ease; }
.bk-logo__mark path { fill: var(--surface); }
.bk-logo__svg .is-sel, .bk-logo__svg .is-sel > * { fill: transparent; stroke: var(--ink); stroke-width: var(--px, 1); stroke-dasharray: var(--dash, 3 2); }
.bk-logo__sel { position: absolute; top: 0; left: 0; border: 1px solid var(--brand); pointer-events: none; opacity: 0; transition: opacity .12s ease, transform .18s cubic-bezier(.2, .8, .2, 1), width .18s cubic-bezier(.2, .8, .2, 1), height .18s cubic-bezier(.2, .8, .2, 1); }
.bk-logo__sel.is-snap { transition: opacity .12s ease; }
.bk-logo.is-picked .bk-logo__sel { opacity: 1; }
.bk-logo__sel i { position: absolute; width: 5px; height: 5px; background: var(--brand); }
.bk-logo__sel i:nth-child(1) { top: -3px; left: -3px; }
.bk-logo__sel i:nth-child(2) { top: -3px; right: -3px; }
.bk-logo__sel i:nth-child(3) { bottom: -3px; left: -3px; }
.bk-logo__sel i:nth-child(4) { bottom: -3px; right: -3px; }
.bk-logo__size { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 2px 5px; border-radius: 4px; background: var(--brand); color: #fff; font: 500 11px/14px var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .bk-logo__svg rect, .bk-logo__svg path, .bk-logo__sel { transition: none; }
}

.bk-sec { padding: 56px 0; border-bottom: 1px solid var(--rail); }
.bk-row { display: grid; grid-template-columns: 280px 1fr; gap: 32px; }
.bk-h { margin: 0; font: 400 26px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.bk-sub { margin: 40px 0 0; font: 500 17px/1.3 var(--font-ui); color: var(--ink); }
.bk-copy, .bk-note { max-width: 620px; font: 400 16px/1.6 var(--font-ui); color: var(--ink-soft); }
.bk-copy p { margin: 0 0 14px; }
.bk-note { margin: 8px 0 0; }

.bk-dont { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; padding: 0; list-style: none; }
.bk-dont li { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font: 500 14px/1.2 var(--font-ui); color: var(--ink-faint); text-decoration: line-through; text-decoration-color: #d4d4d8; }
.bk-dont li.is-ok { color: var(--ink); text-decoration: none; border-color: var(--ink); }

.bk-assets { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 24px; }
.bk-asset { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.bk-asset__stage { display: grid; place-items: center; height: 220px; background: var(--paper); border-bottom: 1px solid var(--hairline); }
.bk-asset__stage img { height: 56px; width: auto; }
.bk-asset--wide .bk-asset__stage img { height: 48px; }
.bk-asset__text { padding: 20px; }
.bk-asset h3 { margin: 0; font: 500 17px/1.3 var(--font-ui); color: var(--ink); }
.bk-asset p { margin: 6px 0 16px; font: 400 14px/1.55 var(--font-ui); color: var(--ink-soft); }
.bk-asset__actions { display: flex; gap: 8px; }

.bk-pack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.bk-pack__item { display: block; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--ink-nav); background: var(--surface); }
.bk-pack__item:hover { border-color: #cfcfd4; }
.bk-pack__thumb { display: grid; place-items: center; height: 96px; background: var(--paper); }
.bk-pack__item.is-dark .bk-pack__thumb { background: var(--ink-nav); }
.bk-pack__thumb img { height: 28px; width: auto; }
.bk-pack__label { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-top: 1px solid var(--hairline); font: 500 13px/1.2 var(--font-ui); }
.bk-pack__label svg { width: 16px; height: 16px; color: var(--ink-faint); }

.bk-colours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.bk-colour { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); text-align: left; cursor: copy; font: inherit; }
.bk-colour__chip { display: block; height: 120px; background: var(--c); border-bottom: 1px solid var(--hairline); }
.bk-colour__text { display: grid; gap: 2px; padding: 12px; font: 400 13px/1.4 var(--font-ui); color: var(--ink-faint); }
.bk-colour__text b { font-weight: 500; color: var(--ink); }
.bk-colour__text code { font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-soft); }

.bk-type { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.bk-type__card { padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.bk-type__sample { margin: 0; font: 400 20px/1.5 var(--font-ui); color: var(--ink-nav); }
.bk-type__sample--display { font: 300 38px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.bk-type__meta { margin: 20px 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--ink-faint); }
.bk-type__meta b { font-weight: 500; color: var(--ink); }

.bk-row--game { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.bk-keys { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 20px 0 0; padding: 0; list-style: none; font: 400 13px/1.2 var(--font-ui); color: var(--ink-faint); }
.bk-keys li { display: inline-flex; align-items: center; gap: 4px; }
.bk-keys kbd { min-width: 22px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); font: 500 12px/1 var(--font-ui); color: var(--ink-nav); text-align: center; }
.bk-keys li kbd:last-of-type { margin-right: 2px; }
.bk-keys-touch { display: none; margin: 16px 0 0; font: 400 13px/1.45 var(--font-ui); color: var(--ink-faint); }

.bk-game { min-width: 0; outline: none; }
.bk-game:focus-visible .bk-game__stage { outline: 2px solid var(--brand); outline-offset: 3px; }
.bk-game [hidden] { display: none !important; }
.bk-game__hud { display: flex; align-items: center; gap: 20px; padding: 0 0 12px; font: 400 13px/1 var(--font-ui); color: var(--ink-faint); }
.bk-game__hud b { margin-left: 4px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.bk-game__lives { display: flex; gap: 4px; margin-left: auto; }
.bk-game__lives img { display: block; width: 14px; height: 14px; transition: opacity .2s ease; }
.bk-game__lives img.is-lost { opacity: .15; }
.bk-game__stage { position: relative; border-radius: 12px; overflow: hidden; background: #050a3a; user-select: none; -webkit-user-select: none; }
.bk-game__canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.bk-game.is-playing .bk-game__stage { cursor: crosshair; touch-action: none; }
.bk-game__overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 16px; text-align: center; }
.bk-game__overlay[data-mode="idle"] { top: auto; bottom: 22%; padding: 0; }
.bk-game__overlay[data-mode="pause"], .bk-game__overlay[data-mode="over"] { background: rgb(5 10 58 / .72); }
.bk-game__title { margin: 0; font: 400 26px/1.1 var(--font-display); color: #fff; }
.bk-game__sub { margin: 0 0 8px; font: 400 14px/1.4 var(--font-ui); color: rgb(255 255 255 / .75); }
.bk-game__play { background: #fff; color: var(--ink-nav); }
.bk-game__play:hover { background: #e9ecff; }

@media (hover: none) and (pointer: coarse) {
  .bk-keys { display: none; }
  .bk-keys-touch { display: block; }
}

.bk-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1000; transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; background: var(--ink-nav); color: #fff; font: 500 14px/1.2 var(--font-ui); }

@media (max-width: 900px) {
  .bk-row, .bk-assets, .bk-type { grid-template-columns: 1fr; }
  .bk-colours, .bk-pack { grid-template-columns: repeat(2, 1fr); }
}