body #bh-page .bfd-explorer{--explorer-tint:#7ebdbd;display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.3fr);align-items:center;gap:clamp(32px,6vw,100px);padding:clamp(24px,4vw,64px);min-height:620px;background:radial-gradient(ellipse at 85% 45%,color-mix(in srgb,var(--explorer-tint) 10%,transparent),transparent 60%),var(--bh-card);border-radius:36px;overflow:hidden}
body #bh-page .bfd-explorer[data-selected="1"]{--explorer-tint:#929ee5}
body #bh-page .bfd-explorer[data-selected="2"]{--explorer-tint:#72b7df}
body #bh-page .bfd-explorer-nav{position:relative;z-index:1}
body #bh-page .bfd-explorer-item{margin:0 0 12px}
body #bh-page .bfd-explorer-button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;border:0;border-radius:18px;padding:18px 20px;background:color-mix(in srgb,var(--bh-ink) 5%,transparent);color:var(--bh-ink);font-weight:500;line-height:1.3;font-family:inherit;font-size:18px;transition:background .25s}
body #bh-page .bfd-explorer-button:hover{background:color-mix(in srgb,var(--explorer-tint) 15%,transparent)}
body #bh-page .bfd-explorer-button[aria-expanded=true]{background:color-mix(in srgb,var(--explorer-tint) 17%,transparent)}
body #bh-page .bfd-explorer-button:focus-visible{outline:2px solid var(--bh-accent);outline-offset:4px}
body #bh-page .bfd-explorer-number{font-size:12px;letter-spacing:.06em;color:var(--bh-accent)}
body #bh-page .bfd-explorer-mark{margin-left:auto;font-size:25px;font-weight:300;color:var(--bh-accent)}
body #bh-page .bfd-explorer-panel{padding:24px 20px 28px;animation:bfd-explorer-copy .4s ease both}
body #bh-page .bfd-explorer-panel[hidden]{display:none}
body #bh-page .bfd-explorer-panel h3{font-size:clamp(26px,2.7vw,42px);line-height:1.1;letter-spacing:-.04em;font-weight:500;color:var(--bh-ink);margin:0 0 20px}
body #bh-page .bfd-explorer-panel p{font-size:16px;line-height:1.65;color:var(--bh-muted);margin:0}
body #bh-page .bfd-explorer-panel .bfd-tech-stack{font-size:14px;color:var(--bh-accent);margin-top:22px;border:0;padding:0}
body #bh-page .bfd-explorer-visual{position:relative;min-width:0;aspect-ratio:1/1;perspective:1100px}
body #bh-page .bfd-explorer-visual:before{content:"";position:absolute;inset:9%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--explorer-tint) 20%,transparent),transparent 68%);filter:blur(20px)}
body #bh-page .bfd-explorer-drawing{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translate3d(36px,0,-70px) rotateY(-12deg) scale(.94);transition:opacity .45s ease,transform .8s cubic-bezier(.16,.8,.2,1);pointer-events:none}
body #bh-page .bfd-explorer-drawing.is-active{opacity:1;transform:translate3d(0,0,0) rotateY(-7deg) rotateX(4deg) scale(1)}
body #bh-page .bfd-explorer-drawing svg{width:115%;height:auto;overflow:visible;color:var(--explorer-tint);filter:drop-shadow(0 28px 18px #00000025);stroke-width:1.2}
body #bh-page .bfd-explorer-drawing svg rect{fill:color-mix(in srgb,var(--explorer-tint) 9%,var(--bh-card))}
body #bh-page .bfd-explorer-drawing svg .fill{fill:color-mix(in srgb,var(--explorer-tint) 30%,var(--bh-card))}
body #bh-page .bfd-explorer-caption{position:absolute;bottom:0;right:0;font-size:11px;letter-spacing:.2em;color:var(--bh-muted)}
@keyframes bfd-explorer-copy{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
body #bh-page .bfd-explorer{grid-template-columns:1fr;min-height:0;gap:24px;padding:24px;border-radius:26px}
body #bh-page .bfd-explorer-visual{grid-row:1;aspect-ratio:1.5/1;max-height:300px}
body #bh-page .bfd-explorer-drawing svg{width:85%;max-height:260px}
body #bh-page .bfd-explorer-button{font-size:16px;padding:16px}
body #bh-page .bfd-explorer-panel{padding:20px 16px}
body #bh-page .bfd-explorer-panel h3{font-size:28px}
}
@media(prefers-reduced-motion:reduce){body #bh-page .bfd-explorer-drawing,body #bh-page .bfd-explorer-panel{animation:none;transition:none}}