.bp {
  --ink: #f8efdf;
  --muted: #b6a18a;
  --gold: #e7b777;
  --edge: #c78a4840;
  --surface: #18100b;
  background: var(--bg);
  color: var(--ink);
  isolation: isolate;
  scroll-margin-top: 72px;
}
.bp [hidden]{display:none!important}
.bp button,.bp input{font-family:inherit}
.bp button{color:inherit}
.bp button:focus-visible,.bp a:focus-visible,.bp input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bp-hero{position:relative;display:flex;align-items:center;flex-direction:column;padding:30px 24px 64px;background:radial-gradient(ellipse 70% 70% at 50% 5%,#4c2c174d 0%,#1b100ad9 46%,var(--bg) 100%)}
.bp-stage{position:relative;width:min(660px,100%);height:342px;display:grid;place-items:center;perspective:1020px;perspective-origin:50% 42%;isolation:isolate}
.bp-board{position:relative;width:min(600px,90%);height:230px;padding:24px 6%;display:grid;grid-template-columns:repeat(5,1fr);gap:18px 16px;align-items:center;justify-items:center;transform:translateY(-4px) rotateX(36deg);transform-style:preserve-3d;border:1px solid #b77d4759;border-radius:9px;background:linear-gradient(155deg,#382519,#160d08 68%,#28180f);box-shadow:inset 0 0 22px #e7b77715,inset 0 1px 3px #e7b77740,0 7px 0 #100905,0 24px 45px #000a,0 0 65px #c78a481a}
.bp-key{position:relative;width:82px;height:64px;transform:translateZ(15px);transform-style:preserve-3d;border-radius:13px;background:linear-gradient(145deg,#805733,#432b1b 42%,#28180f 85%);box-shadow:0 3px 0 #4a2e1c,0 9px 0 #1c110b,0 12px 0 #140c07,0 14px 1px #a36b4066,0 19px 15px #0009,inset 1px 1px 2px #ffddb355,inset -2px -1px 3px #0c0603;display:grid;place-items:center;transition:transform .22s cubic-bezier(.2,.65,.25,1)}
.bp-key::before{content:'';position:absolute;inset:4px 6px 5px;border-radius:9px;background:linear-gradient(135deg,#533723,#291a11 76%);box-shadow:inset 0 0 6px #e7b77715,inset 0 1px 2px #f3cf9f36;pointer-events:none}
.bp-key img{position:relative;width:40px;height:40px;object-fit:contain;transform:translateZ(1px);filter:drop-shadow(0 0 9px #e7b77738)}
.bp-key:is(:hover,:focus-visible){transform:translateZ(23px);z-index:2}
.bp-key:active{transform:translateZ(8px);transition-duration:.07s}
.bp-copy{text-align:center;width:min(780px,100%)}
.bp-copy h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,4.4vw,62px);font-weight:700;line-height:1.02;letter-spacing:-.055em;background:linear-gradient(180deg,#fff3e1,#d4a36a);background-clip:text;color:transparent}
.bp-copy p{color:var(--muted);font-size:15px;line-height:1.65;max-width:510px;margin:16px auto 0}
.bp-search-wrap{position:relative;z-index:4;width:min(760px,100%);margin-top:30px}
.bp-search{height:68px;display:flex;align-items:center;gap:15px;padding:0 21px;border-radius:20px;background:linear-gradient(#2d1d13,var(--surface));border:1px solid var(--edge);box-shadow:0 10px 30px #0005,inset 0 1px 0 #e7b77714;color:var(--gold)}
.bp-search input{min-width:0;flex:1;border:0;background:transparent;color:var(--ink);font-size:18px;outline:0}
.bp-search:focus-within{border-color:#e7b77780}
.bp-search input:focus-visible{outline:0}
.bp-search input::placeholder{color:var(--muted)}
.bp kbd{font:600 10px/1.2 'Inter',sans-serif;color:var(--muted);padding:3px 5px;border-radius:4px;background:linear-gradient(#3c291c,#26180f);border:1px solid var(--edge);box-shadow:0 1px 2px #0008;white-space:nowrap}
.bp-suggestions{position:absolute;left:0;right:0;top:calc(100% + 7px);max-height:330px;overflow:auto;border-radius:16px;background:var(--surface);border:1px solid var(--edge);padding:8px;box-shadow:0 14px 32px #0009}
.bp-suggestions a{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:9px 12px;border-radius:9px;color:var(--ink);font-size:13px}
.bp-suggestions a:is(:hover,:focus-visible){background:#e7b77716}
.bp-suggestions a>span:last-child{margin-left:auto;color:var(--gold)}
.bp-suggestions p{padding:12px;color:var(--muted);font-size:13px}
.bp-chips{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.bp-chips button{padding:9px 13px;border-radius:10px;background:linear-gradient(#322116,#1c120c);border:1px solid var(--edge);box-shadow:0 2px 4px #0006,inset 0 1px 0 #e7b77714;color:var(--ink);font-size:12px;white-space:nowrap}
.bp-chips i{color:var(--gold);margin-right:5px}
.bp-chips button:hover{background:#432b1a;color:#ffe4bc;border-color:#e7b77766}

.bp-key-price {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  display: grid;
  gap: 3px;
  padding: 7px 11px;
  transform: translateX(-50%) translateZ(18px) rotateX(var(--tooltip-tilt, -36deg));
  transform-origin: 50% 100%;
  border: 1px solid #e7b77766;
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 7px 18px #0009;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.bp-key-price > span { color: var(--gold); font-size: 12px; }
.bp-key:focus-visible .bp-key-price { opacity: 1; visibility: visible; }
@media (hover: hover) {
  .bp-key:hover .bp-key-price { opacity: 1; visibility: visible; }
}
.bp-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 35px;
  height: 35px;
  border-radius: 9px;
  border: 1px solid var(--edge);
  background: linear-gradient(145deg, #432b1b, var(--surface) 65%);
}
.bp-icon img { width: 22px; height: 22px; object-fit: contain; }
.bp-board::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 12%, #f7cd9420 40%, #fff0d633 46%, transparent 65%);
  transform: translate3d(var(--shine-x, 0%), 0, 1px);
  pointer-events: none;
  opacity: .45;
}
.bp-flight-source {
  position: relative;
  z-index: 5;
  pointer-events: none;
  width: min(660px, calc(100% - 32px));
  height: 342px;
  margin: 0 auto;
  background: transparent;
  isolation: auto;
}
.bp-flight-source[hidden] { display: none; }
.bp-flight-source:not([hidden]),
.bp-flight-source:not([hidden]) ~ * { overflow-anchor: none; }
.bp-flight-source::before {
  content: '';
  position: absolute;
  inset: -20px -10%;
  background: radial-gradient(ellipse at center, #c78a481a, transparent 66%);
  opacity: var(--flight-glow, 1);
  pointer-events: none;
}
.bp-flight-stage {
  position: absolute;
  top: 0;
  left: 50%;
  max-width: none;
  pointer-events: none;
  will-change: transform;
}
.bp-flight-stage .bp-board {
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.bp-flight-stage .bp-key { pointer-events: auto; }
.bp-board-surface {
  position: absolute;
  inset: -1px;
  border: 1px solid #b77d4759;
  border-radius: inherit;
  background: linear-gradient(155deg, #382519, #160d08 68%, #28180f);
  box-shadow: inset 0 0 22px #e7b77715, inset 0 1px 3px #e7b77740, 0 7px 0 #100905, 0 24px 45px #000a, 0 0 65px #c78a481a;
  opacity: var(--assembly, 0);
  transform: translateZ(-1px);
  pointer-events: none;
}
.bp-flight-stage .bp-board::before { opacity: calc(var(--assembly, 0) * .45); }
.bp-key::after {
  content: '';
  position: absolute;
  inset: 3px 5px 4px;
  border-radius: 9px;
  border: 1px solid #f9d5a38c;
  background: linear-gradient(125deg, #ffe1ad29, transparent 58%);
  transform: translateZ(2px);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.bp-key[data-key-lit]::after { opacity: 1; }
.bp-keyboard-active .bp-board { will-change: transform; }
.bp-keyboard-active .bp-key { will-change: transform; transition: none; }
.bp-keyboard-active .bp-key-price { transition: opacity .16s ease, visibility .16s ease; }
@media (prefers-reduced-motion: reduce) {
  .bp-key { transition: none; }
  .bp-board::before { display: none; }
}
@media (max-width: 760px) {
  .bp-hero { padding: 14px 16px 44px; }
  .bp-stage { height: 245px; }
  .bp-flight-source { height: 245px; }
  .bp-board { width: 95%; height: 205px; padding: 14px 4%; gap: 14px 6px; }
  .bp-key { width: 44px; height: 44px; border-radius: 10px; }
  .bp-key img { width: 27px; height: 27px; }
  .bp-key::before { inset: 3px 4px 4px; border-radius: 7px; }
  .bp-copy p { font-size: 13px; margin-top: 13px; }
  .bp-search-wrap { margin-top: 22px; }
  .bp-search { height: 52px; border-radius: 13px; padding: 0 14px; gap: 10px; }
  .bp-search input { font-size: 14px; }
  .bp-search kbd { display: none; }
  .bp-chips { gap: 6px; }
  .bp-chips button { font-size: 9px; padding: 8px; }
}