/* BlakkBear UI layer — hero scene, process scene, command palette.
   Loaded after the page's own styles; scoped classes only, no dependencies. */

/* ---------- 1. hero scene ---------- */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.62}
@media (prefers-reduced-motion:reduce){.hero-canvas{display:none}}

/* ---------- 2. process scene ---------- */
.px{margin-top:clamp(36px,5vw,56px);border:1px solid var(--line-d,rgba(250,250,248,.14));
  background:var(--ink-soft,#1B1B19)}
.px-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:10px 18px;padding:14px 18px;border-bottom:1px solid var(--line-d,rgba(250,250,248,.14));
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray-lt,#A8A8A8)}
.px-state{color:var(--acid,#D4FF00)}
.px-stage{position:relative;height:320px;overflow:hidden}
.px-layer{position:absolute;inset:0;width:100%;height:100%;will-change:opacity,transform}
.px-foot{display:flex;align-items:center;gap:16px;padding:12px 18px;
  border-top:1px solid var(--line-d,rgba(250,250,248,.14));
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray,#6B6B66)}
.px-bar{flex:1;height:2px;background:rgba(250,250,248,.12)}
.px-bar-in{display:block;height:100%;width:0;background:var(--acid,#D4FF00)}
@media (max-width:620px){.px-stage{height:260px}}

/* ---------- 3. command palette ---------- */
.khint{font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.12em;
  color:var(--gray-lt,#A8A8A8);border:1px solid var(--line-d,rgba(250,250,248,.14));
  padding:7px 10px;cursor:pointer;background:none;line-height:1}
.khint:hover{color:var(--paper,#FAFAF8);border-color:var(--gray-lt,#A8A8A8)}
.bb-k{position:fixed;inset:0;z-index:1000;display:none}
.bb-k.open{display:block}
.bb-k-back{position:absolute;inset:0;background:rgba(17,17,17,.74);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bb-k-panel{position:relative;max-width:640px;margin:12vh auto 0;
  background:var(--ink-soft,#1B1B19);border:1px solid rgba(250,250,248,.16);
  box-shadow:0 24px 80px rgba(0,0,0,.55)}
.bb-k-input{width:100%;box-sizing:border-box;background:transparent;border:0;
  border-bottom:1px solid rgba(250,250,248,.14);color:#FAFAF8;
  font:500 16px/1.4 'DM Sans',system-ui,sans-serif;padding:18px 20px;outline:none}
.bb-k-input::placeholder{color:#6B6B66}
.bb-k-list{max-height:52vh;overflow:auto;padding:8px}
.bb-k-item{display:flex;gap:14px;align-items:baseline;padding:10px 12px;
  color:#FAFAF8;cursor:pointer;text-decoration:none}
.bb-k-item.active,.bb-k-item:hover{background:rgba(212,255,0,.10)}
.bb-k-kind{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#A8A8A8;flex:none;width:62px}
.bb-k-body{flex:1;min-width:0}
.bb-k-title{font-size:14.5px}
.bb-k-x{display:block;font-size:12px;color:#A8A8A8;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-k-x mark{background:none;color:var(--acid,#D4FF00)}
.bb-k-empty{padding:18px 14px;color:#A8A8A8;font-size:13px}
.bb-k-foot{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;
  border-top:1px solid rgba(250,250,248,.12);font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6B6B66}
.kbd{border:1px solid rgba(250,250,248,.2);padding:1px 5px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:#A8A8A8}
body.bb-k-lock{overflow:hidden}