/* BOBAI BRAIN TERMINAL — the popup behind the yellow nav button. Everything is scoped under #bt so the
 * terminal cannot restyle the homepage and the homepage cannot restyle it. Generated from the preview
 * (temp/terminal/v3.html) by scratchpad scope.js; edit here after it ships. */
#bt{
  --gold:#F0B90B;--gold2:#ffd54f;--bg:#0b090a;--line:rgba(198,143,118,.16);--line2:rgba(198,143,118,.32);
  --text:#eceaf5;--muted:#a0a2c0;--dim:#6f6f86;--ok:#00e676;--bad:#ff5a36;
  --mono:ui-monospace,'Cascadia Code','JetBrains Mono',Consolas,'SF Mono',monospace;
}
#bt .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:bt-blink 1.6s steps(2) infinite}
@keyframes bt-blink{50%{opacity:.25}}
#bt{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:14px}
#bt.on{display:flex}
#bt .bt-back{position:absolute;inset:0;background:rgba(3,2,3,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#bt .bt-win{position:relative;width:min(1320px,100%);height:min(840px,100%);overflow:hidden;background:var(--bg);
  border:1px solid var(--line2);border-radius:22px;box-shadow:0 40px 140px rgba(0,0,0,.8),0 0 120px rgba(240,185,11,.08)}
#bt #bt-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
#bt .vign{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at 40% 45%,transparent 55%,rgba(0,0,0,.65)),repeating-linear-gradient(180deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)}
#bt .fig{position:absolute;z-index:2;pointer-events:none;transform-origin:50% 100%;opacity:0;will-change:transform}
#bt .fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1)}
#bt .fig img.on{opacity:1}
#bt .fig .rgb{position:absolute;inset:0;opacity:0;mix-blend-mode:screen}
#bt .fig.glitch .rgb.r{animation:bt-glR .4s steps(3)}
#bt .fig.glitch .rgb.b{animation:bt-glB .4s steps(3)}
@keyframes bt-glR{0%,100%{opacity:0}30%{opacity:.55;transform:translate(-7px,1px);filter:hue-rotate(150deg) saturate(3)}60%{opacity:.35;transform:translate(4px,-2px)}}
@keyframes bt-glB{0%,100%{opacity:0}30%{opacity:.5;transform:translate(7px,-1px);filter:hue-rotate(280deg) saturate(3)}60%{opacity:.3;transform:translate(-4px,2px)}}
#bt .fig .shadow{position:absolute;left:18%;right:18%;bottom:-2%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(240,185,11,.35),transparent);filter:blur(6px)}
#bt .lab{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-50%);text-align:left;white-space:nowrap;opacity:0;transition:opacity .6s}
#bt .lab.show{opacity:1}
#bt .dest{transform:translate(var(--off,26px),-50%)}
#bt .core .cd{color:var(--gold2);margin-top:2px}
#bt .lab.hot{pointer-events:auto;cursor:pointer}
#bt .dest.hot{padding:4px 8px;margin:-4px -8px;border-radius:10px;transition:background .25s}
#bt .dest.hot:hover{background:rgba(255,255,255,.04)}
#bt .wk.hot:hover b{text-shadow:0 0 10px var(--c)}
#bt .detail{position:absolute;z-index:6;left:18px;top:108px;width:min(330px,calc(100% - 36px));padding:14px 16px 12px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--c,#F0B90B) 40%,transparent);background:linear-gradient(180deg,rgba(18,14,15,.88),rgba(10,8,9,.94));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--c,#F0B90B) 12%,transparent);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s,transform .35s}
#bt .detail.on{opacity:1;transform:none;pointer-events:auto}
#bt .detail .dh{display:flex;align-items:center;gap:8px;margin-bottom:10px}
#bt .detail .dh b{font:700 .95rem 'Space Grotesk',sans-serif;color:var(--c)}
#bt .detail .dx{margin-left:auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
#bt .detail .dr div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid rgba(198,143,118,.08);font:12px var(--mono)}
#bt .detail .dr span{color:var(--muted)}
#bt .detail .dr b{color:var(--text);font-weight:600;text-align:right}
#bt .detail p{margin:10px 0 8px;font:12.5px/1.5 Inter,sans-serif;color:#cfcbe0}
#bt .detail .dl{display:flex;flex-wrap:wrap;gap:6px 12px}
#bt .detail .dl a{font:600 11px var(--mono);color:var(--c);text-decoration:none;border-bottom:1px dotted currentColor}
#bt .portrait .detail{left:12px;right:12px;width:auto;top:auto;bottom:98px}
#bt .cine{position:absolute;z-index:6;left:50%;top:11%;transform:translateX(-50%);text-align:center;pointer-events:none;white-space:nowrap;opacity:0}
#bt .cine .a{font:700 clamp(10px,1vw,13px) var(--mono);letter-spacing:.42em;color:#fff;opacity:.85}
#bt .cine .b{font:700 clamp(20px,3.2vw,44px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-.01em;color:var(--c);margin-top:6px;
  text-shadow:0 0 28px color-mix(in srgb,var(--c) 35%,transparent)}
#bt .cine .t{font:600 .66rem var(--mono);letter-spacing:.2em;color:var(--muted);margin-top:8px}
#bt .cine.go{animation:bt-cine var(--d,2.6s) cubic-bezier(.2,.8,.2,1) forwards}
#bt .cine.go .b{animation:bt-cineB var(--d,2.6s) cubic-bezier(.2,.8,.2,1) forwards}
@keyframes bt-cine{0%{opacity:0}8%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes bt-cineB{0%{clip-path:inset(0 100% 0 0);transform:translateY(6px)}22%{clip-path:inset(0 0 0 0);transform:none}100%{transform:none}}
#bt .dest .n{font:700 .64rem var(--mono);letter-spacing:.14em;color:var(--c);display:flex;align-items:center;gap:8px}
#bt .dest .pc{font:700 .62rem var(--mono);padding:1px 6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 50%,transparent);background:color-mix(in srgb,var(--c) 14%,transparent)}
#bt .dest .v{font:600 clamp(15px,1.55vw,21px) 'Space Grotesk',sans-serif;margin-top:2px;font-variant-numeric:tabular-nums;text-shadow:0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
#bt .dest .s{font:500 .68rem var(--mono);color:var(--muted);margin-top:1px}
#bt .dest.hit .v{animation:bt-pop .7s ease}
@keyframes bt-pop{30%{transform:scale(1.12);color:#fff}}
#bt .core{text-align:center;transform:translate(-50%,0)}
#bt .core .n{font:700 .6rem var(--mono);letter-spacing:.16em;color:var(--gold)}
#bt .core .v{font:600 15px 'Space Grotesk',sans-serif}
#bt .core .s{font:.64rem var(--mono);color:var(--muted)}
#bt .src{text-align:center;transform:translate(-50%,18px)}
#bt .src .n{font:700 .62rem var(--mono);letter-spacing:.14em;color:#9ae6b4}
#bt .src .s{font:.64rem var(--mono);color:var(--muted)}
#bt .wk{text-align:center;transition:opacity .4s}
#bt .wk b{display:block;font:700 .56rem var(--mono);letter-spacing:.12em;color:var(--c)}
#bt .wk i{display:block;font:normal .56rem var(--mono);color:var(--dim)}
#bt .flt{position:absolute;z-index:4;pointer-events:none;font:700 13px var(--mono);color:var(--c);text-shadow:0 0 10px var(--c);transform:translate(-50%,-50%);animation:bt-flt 2.4s ease-out forwards;white-space:nowrap}
@keyframes bt-flt{0%{opacity:0;transform:translate(-50%,-20%)}12%{opacity:1}100%{opacity:0;transform:translate(-50%,-260%)}}
#bt .hud{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:14px;padding:16px 18px;pointer-events:none}
#bt .hud>*{pointer-events:auto}
#bt .ttl{font:700 1.02rem 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase}
#bt .ttl b{color:var(--gold)}
#bt .ttl small{display:block;margin-top:3px;font:500 .66rem var(--mono);letter-spacing:.04em;text-transform:none;color:var(--dim)}
#bt .live{display:inline-flex;align-items:center;gap:6px;font:700 .66rem var(--mono);letter-spacing:.16em;color:var(--ok);padding:4px 10px;border:1px solid rgba(0,230,118,.3);border-radius:999px;background:rgba(0,0,0,.35);margin-top:2px}
#bt .live.rp{color:var(--gold2);border-color:rgba(240,185,11,.45)}
#bt .live.rp .dot{background:var(--gold);box-shadow:0 0 10px var(--gold)}
#bt .clk{margin-left:auto;font:.76rem var(--mono);color:var(--muted);margin-top:8px}
#bt .x{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:rgba(0,0,0,.4);color:var(--muted);cursor:pointer;font-size:20px;line-height:1}
#bt .shr{height:36px;padding:0 14px;border-radius:11px;border:1px solid rgba(240,185,11,.5);background:linear-gradient(180deg,rgba(240,185,11,.2),rgba(240,185,11,.06));color:var(--gold2);cursor:pointer;font:700 .66rem var(--mono);letter-spacing:.12em}
#bt .shr:hover{background:linear-gradient(180deg,rgba(240,185,11,.32),rgba(240,185,11,.1))}
#bt .shr[disabled]{opacity:.5;cursor:wait}
#bt .portrait .shr{padding:0 10px;font-size:.58rem}
#bt .x:hover{color:var(--text);border-color:var(--line2)}
#bt .rclk{position:absolute;z-index:5;left:50%;top:58px;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity .5s}
#bt .rclk.on{opacity:1}
#bt .rclk b{display:block;font:700 clamp(16px,1.8vw,24px) 'Space Grotesk',sans-serif;letter-spacing:.14em;color:#fff;text-shadow:0 0 20px rgba(240,185,11,.45);font-variant-numeric:tabular-nums}
#bt .rclk span{display:block;margin-top:2px;font:700 .58rem var(--mono);letter-spacing:.2em;color:var(--gold)}
#bt .portrait .rclk{top:52px}
#bt .portrait .rclk b{font-size:14px}
#bt .phase{position:absolute;z-index:5;left:18px;top:64px;font:.64rem var(--mono);color:var(--dim);max-width:340px;line-height:1.5}
#bt .term{position:absolute;z-index:5;left:16px;bottom:102px;width:min(400px,calc(100% - 32px));height:176px;border-radius:14px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,11,12,.72),rgba(10,8,9,.88));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;overflow:hidden}
#bt .term .hd{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line);font:600 .6rem var(--mono);letter-spacing:.14em;color:var(--dim)}
#bt .term .hd i{width:7px;height:7px;border-radius:50%;background:#3a3032}
#bt .term .hd span{margin-left:6px}
#bt .term .bd{flex:1;overflow:hidden;padding:6px 10px;font:11.5px/1.55 var(--mono);display:flex;flex-direction:column;justify-content:flex-end}
#bt .ln{display:flex;gap:8px;animation:bt-lnIn .3s ease;white-space:nowrap}
#bt .ln.wrap{white-space:normal}
#bt .ln.wrap .m{overflow:visible}
#bt .cmd{display:flex;align-items:center;gap:8px;padding:7px 10px;border-top:1px solid var(--line);background:rgba(0,0,0,.25)}
#bt .cmd label{font:700 11.5px var(--mono);color:var(--ok);flex:none}
#bt .cmd input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font:11.5px var(--mono);caret-color:var(--gold)}
#bt .cmd input::placeholder{color:#5d5d72}
#bt .typing .term,#bt .term:hover,#bt .term:focus-within{height:min(420px,62%);width:min(560px,calc(100% - 32px));z-index:7;background:linear-gradient(180deg,rgba(14,11,12,.94),rgba(10,8,9,.97))}
#bt .typing .term .bd,#bt .term:hover .bd,#bt .term:focus-within .bd{overflow-y:auto;justify-content:flex-start}
#bt .term:hover .ln,#bt .typing .term .ln,#bt .term:focus-within .ln{white-space:normal}
#bt .term:hover .ln .m,#bt .typing .term .ln .m,#bt .term:focus-within .ln .m{overflow:visible;text-overflow:clip}
#bt .term .bd{scrollbar-width:thin;scrollbar-color:#3a302c transparent}
#bt .term{transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}
#bt .ln .t{color:var(--dim);flex:none}
#bt .ln .g{color:var(--c);font-weight:700;flex:none;width:52px}
#bt .ln .m{color:#d7d3e3;overflow:hidden;text-overflow:ellipsis}
#bt .ln .m b{color:var(--c);font-weight:600}
#bt .ln a{color:var(--muted);text-decoration:none;border-bottom:1px dotted #555;margin-left:6px;pointer-events:auto}
#bt .ln a:hover{color:var(--gold2)}
#bt .cur{display:inline-block;width:6px;height:12px;background:var(--gold);vertical-align:-1px;animation:bt-blink 1s steps(2) infinite}
@keyframes bt-lnIn{from{opacity:0;transform:translateX(-6px)}}
#bt .tl{position:absolute;z-index:5;left:0;right:0;bottom:0;height:86px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(14,11,12,.82),rgba(6,5,6,.92));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex}
#bt .tl canvas{flex:1;min-width:0;height:100%;cursor:pointer}
#bt .tl button{flex:none;width:96px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--gold2);cursor:pointer;font:700 .64rem var(--mono);letter-spacing:.12em}
#bt .tl button:hover{background:rgba(240,185,11,.07)}
#bt .tl .tlw{flex:none;display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--line)}
#bt .tl .tlw button{width:44px;border:0;border-left:0;border-bottom:1px solid var(--line);font:700 .6rem var(--mono);letter-spacing:.08em;color:var(--dim)}
#bt .tl .tlw button:nth-child(odd){border-right:1px solid var(--line)}
#bt .tl .tlw button.on{color:#0b090a;background:var(--gold)}
/* replay controls: pause and speed, only while a replay runs */
#bt .tl .rpc{display:none;flex:none;flex-direction:column;border-left:1px solid var(--line)}
#bt .tl.rpon .rpc{display:flex}
#bt .tl .rpc button{flex:1;width:44px;border:0;font:700 .72rem var(--mono);letter-spacing:.04em;color:var(--gold2)}
#bt .tl .rpc button:first-child{border-bottom:1px solid var(--line)}
#bt .tl .rpc button.on{color:#0b090a;background:var(--gold)}
#bt .tip{position:absolute;z-index:7;bottom:92px;transform:translateX(-50%);display:none;pointer-events:none;max-width:340px;white-space:normal;
  padding:8px 11px;border-radius:10px;border:1px solid var(--line2);background:#161213;font:11.5px/1.45 var(--mono);box-shadow:0 10px 40px rgba(0,0,0,.6)}
#bt .tip b{color:var(--c)}
#bt .intro{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font:700 clamp(20px,3.4vw,40px) 'Space Grotesk',sans-serif;letter-spacing:.28em;color:#fff;text-shadow:0 0 30px rgba(240,185,11,.8);transition:opacity .9s}
#bt .intro.out{opacity:0}
#bt .portrait .dest{transform:translate(-50%,var(--off,20px));text-align:center}
/* name above, share pill below it, on every label alike: some fit on one line and some did not, and the rows looked ragged */
#bt .portrait .dest .n{flex-direction:column;align-items:center;font-size:10px;letter-spacing:.02em;gap:3px}
/* a row of three has a third of the screen each: the label wraps inside it instead of spilling over its neighbour */
#bt .portrait .dest{width:max-content;max-width:calc((100vw - 20px) / 3);white-space:normal}
#bt .portrait .dest .pc{font-size:10px;padding:0 3px}
#bt .portrait .dest .v{font-size:12px}
#bt .portrait .dest .s,#bt .portrait .wk,#bt .portrait .src .s,#bt .portrait .core .s:not(.cd){display:none}
#bt .portrait .core{transform:translate(-100%,-50%);text-align:right}
#bt .portrait .core .v{font-size:13px}
#bt .portrait .cine{top:auto;bottom:98px;width:calc(100% - 32px);padding:10px 12px;border-radius:14px;background:rgba(10,8,9,.9);border:1px solid var(--line)}
#bt .portrait .ttl{font-size:.82rem}
#bt .portrait .cine .b{font-size:20px;white-space:normal;max-width:92vw}
@media (max-width:820px){#bt{padding:0}
#bt .bt-win{width:100%;height:100%;border-radius:0;border:0}
#bt .ttl small,#bt .rclk{position:absolute;z-index:5;left:50%;top:58px;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity .5s}
#bt .rclk.on{opacity:1}
#bt .rclk b{display:block;font:700 clamp(16px,1.8vw,24px) 'Space Grotesk',sans-serif;letter-spacing:.14em;color:#fff;text-shadow:0 0 20px rgba(240,185,11,.45);font-variant-numeric:tabular-nums}
#bt .rclk span{display:block;margin-top:2px;font:700 .58rem var(--mono);letter-spacing:.2em;color:var(--gold)}
#bt .portrait .rclk{top:52px}
#bt .portrait .rclk b{font-size:14px}
#bt .phase{display:none}
/* the subtitle never shows on a phone, and unwrapped it made the window 500 px wide (sideways scroll) */
#bt .ttl small{display:none}
#bt .term{height:96px;bottom:94px}
#bt .dest{transform:translate(12px,-50%)}
#bt .dest .s{display:none}
#bt .tl button{width:66px}

}
/* calm mode (/?calm#brain): no CSS motion either */
#bt.calm .bt-open,#bt.calm .dot,#bt.calm .flt,#bt.calm .ln{animation:none}

/* the popup inherits nothing from the page: its own type, colour and box model */
#bt{font-family:Inter,system-ui,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;text-align:left;line-height:normal;letter-spacing:normal}
#bt *,#bt *::before,#bt *::after{box-sizing:border-box}
#bt button{font-family:inherit}
/* share menu: where this moment can go */
#bt .shm{position:absolute;z-index:8;top:64px;right:18px;width:min(360px,calc(100% - 36px));padding:12px;border-radius:16px;border:1px solid rgba(240,185,11,.35);
  background:linear-gradient(180deg,rgba(20,16,17,.96),rgba(10,8,9,.98));box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 40px rgba(240,185,11,.1);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s,transform .3s}
#bt .shm.on{opacity:1;transform:none;pointer-events:auto}
#bt .shh{display:flex;align-items:center;margin-bottom:10px}
#bt .shh b{font:700 .9rem 'Space Grotesk',sans-serif;color:var(--gold)}
#bt .shx{margin-left:auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
#bt .shm img{display:block;width:100%;border-radius:10px;border:1px solid var(--line);margin-bottom:10px}
/* which moment the card tells (B8) */
#bt .shk{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:8px}
#bt .shk button{height:30px;padding:0 2px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer;font:700 10px var(--mono);letter-spacing:.02em;white-space:nowrap}
#bt .shk button.on{border-color:var(--gold);color:var(--gold2);background:rgba(240,185,11,.12)}
/* the two formats of the same moment (B7) */
#bt .shf{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
#bt .shf button{height:32px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer;font:600 11px var(--mono);letter-spacing:.04em}
#bt .shf button.on{border-color:var(--gold);color:#0b090a;background:var(--gold)}
#bt .shm.tall img{width:auto;max-width:100%;max-height:min(46vh,380px);margin-left:auto;margin-right:auto}
/* phone: the menu never grows past the top of the window; the 4:5 preview stays small enough for the buttons */
#bt .portrait .shm{top:auto;max-height:calc(100% - 154px - 56px);overflow-y:auto}
#bt .portrait .shm.tall img{max-height:min(24vh,200px)}
#bt .shb{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#bt .shb button{height:36px;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font:600 12px var(--mono);letter-spacing:.04em}
#bt .shb button:hover{border-color:var(--gold);color:var(--gold2)}
#bt .shb button.wide{grid-column:1/-1;background:linear-gradient(180deg,rgba(240,185,11,.22),rgba(240,185,11,.08));border-color:rgba(240,185,11,.5);color:var(--gold2)}
#bt .shb button small{font-weight:400;color:var(--muted);margin-left:6px}
#bt .shb button[hidden]{display:none}
#bt .portrait .shm{top:auto;bottom:98px;left:12px;right:12px;width:auto}
/* ---- phone, reworked (2026-09-24): one-line title, icon share, timeline controls on their own row ---- */
#bt .portrait .hud{padding:12px 12px 0;gap:8px;align-items:center}
#bt .portrait .ttl{font-size:.76rem;letter-spacing:.1em;white-space:nowrap}
#bt .portrait .clk{display:none}
#bt .portrait .live{position:absolute;left:12px;top:40px;font-size:10px;padding:2px 8px;margin:0}
#bt .portrait .shr{margin-left:auto;width:36px;padding:0;font-size:0}
#bt .portrait .shr::before{content:"\2197";font-size:17px;line-height:36px}
#bt .portrait .rclk{top:64px}
#bt .portrait .rclk b{font-size:13px;letter-spacing:.1em}
#bt .portrait .rclk span{font-size:.5rem}
#bt .portrait .src{transform:translate(-14px,14px);text-align:left}
#bt .portrait .tl{height:104px;flex-wrap:wrap}
#bt .portrait .tl canvas{order:3;flex:0 0 100%;height:70px}
#bt .portrait .tl .tlw{display:flex;flex:1;border-left:0;border-bottom:1px solid var(--line)}
#bt .portrait .tl .tlw button{flex:1;width:auto;height:33px;border:0;border-right:1px solid var(--line);font-size:11px}
#bt .portrait .tl #bt-rp{flex:0 0 auto;width:auto;padding:0 12px;height:33px;border-bottom:1px solid var(--line)}
#bt .portrait .tl .rpc{flex-direction:row;height:33px;border-bottom:1px solid var(--line)}
#bt .portrait .tl .rpc button{width:40px;height:33px;font-size:12px}
#bt .portrait .tl .rpc button:first-child{border-bottom:0;border-right:1px solid var(--line)}
#bt .portrait .term{bottom:112px}
#bt .portrait .detail,#bt .portrait .shm,#bt .portrait .cine{bottom:112px}
#bt .portrait .tip{bottom:110px}
/* ---- phone views: BRAIN · MONEY · BOTS · LOG ---- */
#bt .mtabs,#bt .mpanel{display:none}
#bt .portrait .mtabs{display:grid;grid-template-columns:repeat(4,1fr);position:absolute;z-index:6;left:0;right:0;bottom:104px;height:42px;border-top:1px solid var(--line);background:rgba(10,8,9,.92)}
#bt .portrait .mtabs button{border:0;border-right:1px solid var(--line);background:transparent;color:var(--dim);font:700 .64rem var(--mono);letter-spacing:.14em;cursor:pointer}
#bt .portrait .mtabs button:last-child{border-right:0}
#bt .portrait .mtabs button.on{color:#0b090a;background:var(--gold)}
#bt .portrait .term{display:none}
#bt .portrait.m-log .term{display:flex;left:10px;right:10px;width:auto;top:66px;bottom:154px;height:auto}
#bt .portrait.m-log .term .bd{overflow-y:auto;justify-content:flex-start}
#bt .portrait.m-log .term .ln{white-space:normal}
#bt .portrait.m-log .term .ln .m{overflow:visible}
#bt .portrait .term .hd span{font-size:10px}
#bt .portrait .cmd{padding:2px 10px}
#bt .portrait .cmd input{height:40px;font-size:16px}
#bt .portrait.m-list .mpanel{display:flex;flex-direction:column;gap:6px;position:absolute;z-index:6;left:10px;right:10px;top:66px;bottom:154px;overflow-y:auto;padding:8px;
  border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,11,12,.9),rgba(10,8,9,.95));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#bt .mrow{display:grid;grid-template-columns:1fr;gap:2px;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
  background:color-mix(in srgb,var(--c) 6%,transparent);color:var(--text);cursor:pointer;font-family:inherit}
#bt .mrow .mn{display:flex;align-items:center;gap:6px;font:700 10.5px var(--mono);letter-spacing:.12em;color:var(--c)}
#bt .mrow .mn i{font-style:normal;font-size:10px;padding:0 5px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 50%,transparent)}
#bt .mrow b{font:600 17px 'Space Grotesk',sans-serif}
#bt .mrow small{font:.68rem var(--mono);color:var(--muted);line-height:1.4}
#bt .portrait .detail,#bt .portrait .shm,#bt .portrait .cine{bottom:154px}
#bt .portrait .detail{z-index:7}

#bt .bt-win:focus{outline:none}
#bt .shm.busy img{opacity:.35;transition:opacity .2s}
#bt .shm.busy .shk,#bt .shm.busy .shf{cursor:progress}
/* BOBAI speaks: a glass bubble above his head, letters typed in (the living BOBAI, 2026-09-25) */
#bt .say{position:absolute;z-index:4;max-width:min(300px,70vw);padding:10px 14px;border-radius:16px 16px 16px 4px;border:1px solid rgba(240,185,11,.35);
  background:linear-gradient(180deg,rgba(28,22,20,.92),rgba(14,11,12,.92));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#f3efe6;font:500 14px/1.4 'Space Grotesk',sans-serif;box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 24px rgba(240,185,11,.08);
  opacity:0;transform:translateY(6px) scale(.97);transition:opacity .35s,transform .35s;pointer-events:none}
#bt .say.on{opacity:1;transform:none}
#bt .say:empty{display:none}
#bt .portrait .say{font-size:13px;max-width:min(230px,62vw)}
/* the face layer: blink and talk frames snap on over the pose (no fade) */
#bt .fig img.face{opacity:0;transition:none}
#bt .fig img.face.on{opacity:1}
/* the clip layer: over the still, which stays underneath as the fallback frame */
#bt .fig canvas.vid{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .25s}
#bt .fig canvas.vid.on{opacity:1}
#bt .fig.moving img[data-p]{opacity:0!important}
/* the big moments: film bars, the tier title, the bar of brains or flames (TG alert ladder) */
#bt .moment{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;--c:#F0B90B}
#bt .moment.go{opacity:1}
#bt .moment .lb{position:absolute;left:0;right:0;height:0;background:#000;transition:height .6s cubic-bezier(.2,.8,.2,1)}
#bt .moment .lb.t{top:0}#bt .moment .lb.b{bottom:0}
#bt .moment.go[data-level="2"] .lb,#bt .moment.go[data-level="3"] .lb{height:7%}
#bt .moment .mc{position:absolute;left:50%;top:9%;transform:translateX(-50%);text-align:center;width:min(92%,760px)}
#bt .moment .k{font:700 11px var(--mono);letter-spacing:.42em;color:#fff;opacity:0}
#bt .moment .h{font:800 clamp(30px,5.4vw,78px)/1 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:var(--c);margin-top:6px;opacity:0;
  text-shadow:0 0 30px color-mix(in srgb,var(--c) 60%,transparent),0 0 90px color-mix(in srgb,var(--c) 35%,transparent)}
#bt .moment .s{font:600 clamp(12px,1.2vw,15px) var(--mono);letter-spacing:.06em;color:#eceaf5;margin-top:10px;opacity:0}
#bt .moment .bar{margin-top:12px;font-size:clamp(14px,1.5vw,20px);line-height:1.25;letter-spacing:1px;max-width:100%}
#bt .moment .bar span,#bt .moment .bar b{display:inline-block;opacity:0;transform:translateY(8px) scale(.6)}
#bt .moment .bar b{font:700 13px var(--mono);letter-spacing:.1em;color:var(--c)}
#bt .moment.go .k{animation:bt-mIn .5s .05s both}
#bt .moment.go .h{animation:bt-mTitle .9s .12s cubic-bezier(.2,.9,.2,1.2) both}
#bt .moment.go .s{animation:bt-mIn .6s .45s both}
#bt .moment.go .bar span,#bt .moment.go .bar b{animation:bt-mIcon .35s both}
@keyframes bt-mIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bt-mTitle{0%{opacity:0;transform:scale(1.35);filter:blur(10px);letter-spacing:.2em}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;letter-spacing:-.02em}}
@keyframes bt-mIcon{to{opacity:1;transform:none}}
#bt .portrait .moment .mc{top:13%}
#bt .portrait .moment .bar{font-size:13px}
/* during a moment: the replay clock and his bubble step aside, the destinations dim */
#bt .in-moment .rclk,#bt .in-moment .say{opacity:0!important}
#bt .in-moment #bt-labs{opacity:.35;transition:opacity .4s}
#bt #bt-labs{transition:opacity .6s}
/* the bar sits under him, not over his head */
#bt .moment .bar{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);margin:0;white-space:nowrap;text-align:center;
  padding:8px 14px;border-radius:999px;background:rgba(8,6,7,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
#bt .portrait .moment .bar{bottom:calc(154px + 10px);font-size:12px;max-width:94%;overflow:hidden}
/* the NFT card flies in beside him */
#bt .moment .card{position:absolute;right:30%;top:30%;width:clamp(110px,12vw,170px);text-align:center;opacity:0;transform:translateY(24px) rotate(8deg) scale(.8)}
#bt .moment .card img{width:100%;border-radius:12px;border:2px solid var(--c);box-shadow:0 0 40px color-mix(in srgb,var(--c) 50%,transparent)}
#bt .moment .card b{display:block;margin-top:6px;font:700 11px var(--mono);letter-spacing:.3em;color:var(--c)}
#bt .moment.go .card{animation:bt-mCard 1s .9s cubic-bezier(.2,.9,.2,1.1) both}
@keyframes bt-mCard{to{opacity:1;transform:rotate(-4deg)}}
#bt .portrait .moment .card{right:6%;top:24%;width:92px}
/* film bars: a strong top bar, a thin bottom one that leaves the timeline readable */
#bt .moment.go[data-level="2"] .lb.b,#bt .moment.go[data-level="3"] .lb.b{height:2.5%}
/* phone: the bubble above his head, tail down */
#bt .say.top{border-radius:16px 16px 16px 16px;text-align:center}
#bt .say.top::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);
  background:rgba(14,11,12,.92);border-right:1px solid rgba(240,185,11,.35);border-bottom:1px solid rgba(240,185,11,.35)}
/* the one-time hint that everything answers */
#bt .hint{position:absolute;z-index:6;left:50%;bottom:104px;transform:translate(-50%,8px);padding:8px 14px;border-radius:999px;
  background:rgba(14,11,12,.88);border:1px solid rgba(240,185,11,.45);color:#f3efe6;font:600 12px var(--mono);letter-spacing:.04em;
  opacity:0;transition:opacity .5s,transform .5s;pointer-events:none;white-space:nowrap}
#bt .hint.on{opacity:1;transform:translate(-50%,0)}
#bt .portrait .hint{bottom:160px;font-size:11px;white-space:normal;text-align:center;max-width:86%}
/* labels that answer: a quiet dot says so */
#bt .lab.hot .n::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;border-radius:50%;background:currentColor;opacity:.55;vertical-align:middle;animation:bt-dot 2.4s ease-in-out infinite}
@keyframes bt-dot{50%{opacity:.15}}
/* the DeFi agent's range, live: its band in CAKE/BNB and where the price stands */
#bt .moment .meter{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);width:min(420px,80%);padding:10px 14px 12px;border-radius:14px;
  background:rgba(8,6,7,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);display:none}
#bt .moment.defi .meter:not([hidden]){display:block}
#bt .moment.defi .bar{display:none}
#bt .meter .mt,#bt .meter .ms{font:700 10px var(--mono);letter-spacing:.2em;color:var(--c);text-align:center}
#bt .meter .ms{margin-top:8px;color:#eceaf5;letter-spacing:.12em}
#bt .meter.out .ms{color:#fbbf24}
#bt .meter .track{position:relative;height:14px;margin-top:9px;border-radius:999px;background:rgba(255,255,255,.06)}
#bt .meter .rng{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 45%,transparent),color-mix(in srgb,var(--c) 80%,transparent),color-mix(in srgb,var(--c) 45%,transparent));
  box-shadow:0 0 18px color-mix(in srgb,var(--c) 55%,transparent)}
#bt .meter .px{position:absolute;top:-5px;width:3px;height:24px;margin-left:-1.5px;border-radius:2px;background:#fff;box-shadow:0 0 10px #fff}
#bt .moment.go .meter .rng{animation:bt-mRng 1.2s .5s both}
@keyframes bt-mRng{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
#bt .portrait .moment .meter{bottom:calc(154px + 10px)}
/* his line in a scene stays visible while the rest of the talk steps aside */
#bt .in-moment .say.scene{opacity:1!important}
/* title and end cards of the replay: centred, no bar, a slower landing */
#bt .moment.story .mc{top:34%}
#bt .moment.story .h{font-size:clamp(34px,6vw,86px)}
#bt .moment.story .s{font-size:clamp(12px,1.3vw,16px);color:#f3efe6;letter-spacing:.08em;line-height:1.6}
#bt .moment.story .bar,#bt .moment.story .card,#bt .moment.story .meter{display:none!important}
#bt .story-on .fig{opacity:.3!important;transition:opacity .6s}
#bt .fig{transition:opacity .6s}
#bt .portrait .moment.story .mc{top:30%}