:root { --bg:var(--ib-bg,#0b0f14); --fg:var(--ib-text,#e6e9ee); --mut:var(--ib-text-muted,#8b94a3); --line:var(--ib-border,#232b36); --pri:var(--ib-primary,#8fbc5a); --gold:var(--ib-gold,#c9a96a); }
* { box-sizing: border-box; }
body { margin:0; height:100dvh; display:flex; flex-direction:column; background:var(--bg); color:var(--fg); font:14px/1.45 system-ui,sans-serif; }
html[data-ib-ambient] body { background:transparent; }
.bk-top { display:flex; gap:1rem; align-items:center; padding:.7rem 1.1rem; border-bottom:1px solid var(--line); flex-wrap:wrap; position:relative; }
.bk-top::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.3; }
.bk-brand { display:flex; align-items:baseline; gap:.6rem; }
.bk-title { color:var(--pri); font-size:1.25rem; letter-spacing:.08em; font-weight:600; } .bk-title::before { content:""; display:inline-block; width:1.6rem; height:1.6rem; background:var(--ib-mark-grad,var(--pri)); -webkit-mask:var(--ib-mark-mask) center/contain no-repeat; mask:var(--ib-mark-mask) center/contain no-repeat; margin-right:.55rem; vertical-align:-.35em; }
.bk-sub { color:var(--mut); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; } .bk-grow { flex:1; }
select, button { background:color-mix(in srgb,var(--bg) 85%,transparent); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:.35rem .55rem; font:inherit; }
select:hover, button:hover { border-color:var(--pri); } select:focus-visible, button:focus-visible, .bk-nav a:focus-visible { outline:2px solid var(--pri); outline-offset:2px; }
button { cursor:pointer; } label { color:var(--mut); display:flex; gap:.4rem; align-items:center; font-size:.85rem; }
.bk-body { flex:1; display:flex; min-height:0; }
.bk-nav { width:12rem; border-right:1px solid var(--line); padding:.9rem .7rem; display:flex; flex-direction:column; gap:.15rem; }
.bk-nav a { position:relative; color:var(--mut); text-decoration:none; padding:.45rem .7rem; }
.bk-nav a::after { content:""; position:absolute; right:0; top:.3rem; bottom:.3rem; width:2px; background:var(--pri); transform:scaleY(0); transition:transform .2s ease; }
.bk-nav a:hover, .bk-nav a:focus-visible { color:var(--fg); } .bk-nav a:hover::after, .bk-nav a:focus-visible::after { transform:scaleY(1); }
.bk-nav a[aria-current="page"] { color:var(--pri); } .bk-nav a[aria-current="page"]::after { transform:scaleY(1); width:3px; }
@media (prefers-reduced-motion:reduce){ .bk-nav a::after{transition:none} }
main { flex:1; min-width:0; } iframe { width:100%; height:100%; border:0; display:block; background:transparent; }
.bk-foot { padding:.4rem 1.1rem; border-top:1px solid var(--line); color:var(--mut); font-size:12px; }
@media (max-width:700px){ .bk-nav{width:auto;flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid var(--line)} .bk-nav a::after{right:.5rem;left:.5rem;top:auto;bottom:0;width:auto;height:2px;transform:scaleX(0)} .bk-nav a:hover::after,.bk-nav a:focus-visible::after,.bk-nav a[aria-current="page"]::after{transform:scaleX(1);width:auto} .bk-body{flex-direction:column} }