/* Second brain hub (studio draft, W13 v2). Site tokens; scoped to .bh. The steps are classes on the root:
   data-step = the step shown, .at1 .. .at4 = steps reached (so scrolling back takes them away again). */

.bh{--bh-bg:#0b0e14;--bh-card:var(--panel2);--bh-ink:#fff;--bh-line:rgba(125,149,255,.18);--bh-lit:#6f8cff;--bh-glow:rgba(51,85,224,.55);
  color-scheme:dark;position:relative;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:center;
  padding:26px 28px;background:var(--bh-bg);color:var(--text);font-family:var(--body);text-align:left;overflow:hidden}
html.gray .bh{--bh-bg:#0e1116}
html.light .bh{color-scheme:light;--bh-bg:var(--tray,linear-gradient(180deg,#F6F8FB,#EEF1F6));--bh-card:#fff;--bh-ink:#15181E;--bh-line:rgba(51,85,224,.16);--bh-lit:#3355E0;--bh-glow:rgba(51,85,224,.28)}
.bh *{box-sizing:border-box}
.bh button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* the words */
.bh-k{display:block;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-hi)}
.bh-t{margin:10px 0 12px;font-family:var(--head);font-size:40px;line-height:1.02;color:var(--bh-ink);text-transform:uppercase;letter-spacing:.005em}
.bh-p{margin:0 0 22px;font-size:18px;line-height:1.45;color:var(--muted);min-height:4.4em}
.bh-dots{display:grid;gap:4px}
.bh-dots button{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:10px;font-size:15.5px;font-weight:600;color:var(--dim);text-align:left;transition:color .3s,background .3s}
.bh-dots button i{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;transition:background .3s}
.bh-dots button:hover{color:var(--bh-ink)}
.bh-dots button.on{color:var(--bh-ink);background:var(--bh-line)}
.bh-dots button.on i{background:var(--blue-hi);box-shadow:none}

/* the stage */
.bh-stage{position:relative;aspect-ratio:860/600;width:100%}
.bh-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bh-ln{stroke:var(--bh-line);stroke-width:2;stroke-dasharray:4 6;transition:stroke .5s,stroke-dasharray .5s}
.bh.at1 .bh-ln:not(.bh-ln-new){stroke:var(--bh-lit);stroke-dasharray:none}
.bh-ln-new{opacity:0;transition:opacity .5s}
.bh.at4 .bh-ln-new{opacity:1;stroke:var(--bh-lit);stroke-dasharray:none}
.bh-feed{fill:none;stroke:var(--bh-lit);stroke-width:1.6;stroke-dasharray:3 9;opacity:.8;animation:bhFlow 1.2s linear infinite}
.bh.at1 .bh-feed{opacity:0;animation:none;transition:opacity .4s}
@keyframes bhFlow{to{stroke-dashoffset:-24}}
.bh-cable{fill:none;stroke:var(--bh-line);stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .5s,stroke .5s}
.bh.at3 .bh-cable{opacity:1;stroke:#D97757}
.bh-stage>*:not(svg){position:absolute;transform:translate(-50%,-50%)}

.bh-in{padding:6px 12px;border-radius:99px;font-size:14px;font-weight:600;color:var(--bh-ink);background:var(--bh-card);box-shadow:0 0 0 1px var(--bh-line),0 8px 18px -10px rgba(0,0,0,.5);
  animation:bhIn 2.4s var(--d) ease-in-out infinite;white-space:nowrap}
@keyframes bhIn{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-44%,-50%)}}
.bh-in{transition:opacity .4s}
.bh.at1 .bh-in{animation:none;opacity:0}

.bh-core{display:grid;justify-items:center;gap:6px;width:170px;padding:22px 12px 16px;border-radius:50%;aspect-ratio:1;align-content:center;text-align:center;
  background:radial-gradient(circle at 50% 35%,#4A6BFF,#1d2f99 70%);color:#fff;box-shadow:0 0 0 6px rgba(51,85,224,.18),0 0 60px 8px var(--bh-glow);z-index:2}
.bh-core b{font-size:15px;line-height:1.15}
.bh-fill{display:block;width:70px;height:5px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden}
.bh-fill em{display:block;height:100%;width:100%;background:#7CF0B5;transform-origin:left;animation:bhFill 2.4s ease-in-out infinite}
.bh.at1 .bh-fill em{animation:none}
@keyframes bhFill{0%{transform:scaleX(.2)}60%,100%{transform:scaleX(1)}}
.bh-pulse{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--bh-lit);opacity:0}
.bh[data-step="2"] .bh-pulse{animation:bhPulse 1.6s ease-out infinite}
@keyframes bhPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}

/* modules: empty sockets, then they plug in */
.bh-mod{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:14px;white-space:nowrap;font-size:15px;font-weight:600;color:var(--bh-ink);
  background:var(--bh-card);box-shadow:0 0 0 1.5px var(--bh-line);opacity:.16;filter:saturate(.3);z-index:2;
  transition:opacity .45s var(--d,0s),box-shadow .45s var(--d,0s),filter .45s var(--d,0s),transform .45s var(--d,0s)}
.bh-mod i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--bh-line);color:var(--blue-hi)}
.bh-mod em{position:absolute;right:-8px;top:-10px;font-style:normal;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:#16A35C;color:#fff;opacity:0;transform:scale(.6);
  transition:opacity .3s,transform .3s}
.bh.at1 .bh-mod{opacity:1;filter:none;box-shadow:0 0 0 1.5px var(--bh-lit),0 14px 30px -14px var(--bh-glow)}
.bh.at1 .bh-mod i{background:var(--blue);color:#fff}
.bh[data-step="2"] .bh-mod em{opacity:1;transform:none;transition-delay:calc(var(--d,0s) * 2 + .3s)}
.bh-new{opacity:0!important;transform:translate(-50%,-50%) scale(.6)}
.bh.at4 .bh-new{opacity:1!important;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #7CF0B5,0 14px 30px -12px rgba(22,163,92,.6)}
.bh.at4 .bh-new i{background:#16A35C;color:#fff}
.bh[data-step="4"] .bh-new em{opacity:1;transform:none}
.bh-slot{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:2px dashed var(--bh-line);color:var(--dim);transition:opacity .4s}
.bh.at4 .bh-slot{opacity:0}

/* Claude and Codex plug in */
.bh-plug{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:14px;background:var(--bh-card);font-weight:700;color:var(--bh-ink);
  box-shadow:0 0 0 1.5px var(--bh-line);opacity:0;transform:translate(-20%,-50%)!important;transition:opacity .5s,transform .5s,box-shadow .5s;z-index:2}
.bh-plug i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#D97757;color:#fff}
.bh.at3 .bh-plug{opacity:1;transform:translate(-50%,-50%)!important;box-shadow:0 0 0 1.5px #D97757,0 14px 30px -14px rgba(217,119,87,.6)}

.bh-rule,.bh-ask{opacity:0;transition:opacity .4s,transform .4s;z-index:3}
.bh-rule{left:50%!important;top:7%!important;padding:8px 14px;border-radius:10px;font-size:14px;font-weight:600;color:#fff;background:#16A35C;white-space:nowrap}
.bh[data-step="2"] .bh-rule{opacity:1}
.bh-ask{left:auto!important;right:-2%;top:12%!important;transform:translate(0,-50%)!important;width:300px;display:grid;gap:6px}
.bh-ask p{margin:0;padding:8px 12px;font-size:14px;line-height:1.35;border-radius:12px}
.bh-ask .me{justify-self:end;background:var(--blue);color:#fff;border-radius:12px 12px 4px 12px}
.bh-ask .ai{background:var(--bh-card);color:var(--bh-ink);box-shadow:0 0 0 1px var(--bh-line);border-radius:12px 12px 12px 4px}
.bh[data-step="3"] .bh-ask{opacity:1}

@media (max-width:859px){
  .bh{grid-template-columns:1fr;padding:18px 14px;gap:14px}
  .bh-t{font-size:28px}.bh-p{font-size:15.5px;min-height:0;margin-bottom:10px}
  .bh-dots{display:flex;gap:6px}.bh-dots button span{display:none}.bh-dots button{padding:6px}
  .bh-mod{font-size:11px;padding:4px 8px 4px 4px;gap:5px}.bh-mod i{width:22px;height:22px}.bh-mod i svg{width:14px;height:14px}
  .bh-core{width:96px;padding:10px}.bh-core b{font-size:11px}.bh-core i svg{width:22px;height:22px}
  .bh-in{font-size:11px;padding:3px 8px}.bh-plug{font-size:12px;padding:4px 8px 4px 4px}.bh-plug i{width:22px;height:22px}
  .bh-ask{width:180px;right:0}.bh-ask p{font-size:11.5px}.bh-rule{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.bh *{animation:none!important;transition:none!important}}