/* Brainstack demo chrome (the frame around the real app): tokens from outputs/site-v2/index.html. */
@font-face{font-family:"Geist";src:url("app/vendor/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("app/vendor/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#FCFBFA;--bg2:#F5F3F0;--panel:#FFFFFF;--line:#E4E1DD;--line2:#D5D1CB;--ink:#17171B;--muted:#5F5E66;--dim:#7D7B84;
  --violet:#684AE8;--violet-2:#593AD8;--wash:#ECE8FC;--on-accent:#FFFFFF;--pink:#D94BB4;--ok:#1F7A4D;--okwash:#E6F4EC;--warn-ink:#8A5A0B;--warnwash:#FCEFD9;
  --shadow-3:0 10px 30px rgba(11,11,11,.10),0 2px 6px rgba(11,11,11,.05);
  --cl-bg:#FBF7F1;--cl-bar:#F4EDE2;--cl-user:#F1E8DA;--cl-line:#E7DCCB;--cl-ink:#2A2520;--cl-muted:#6E655A;--cl-field:#FFFFFF;
  --gp-bg:#FFFFFF;--gp-user:#F1F1F3;--gp-line:#E6E6EA;--gp-ink:#1C1C1F;--gp-muted:#6A6A73;--gp-field:#F7F7F8;
  --mc-bg:#FAFAFB;--mc-bar:#FFFFFF;--mc-user:#E8EBFA;--mc-line:#E3E3E8;--mc-ink:#242424;--mc-muted:#616161;--mc-field:#FFFFFF;--mc-tab:#EFEFF2;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111216;--bg2:#17181D;--panel:#1B1C22;--line:#2D2E35;--line2:#3B3C45;--ink:#F5F4F7;--muted:#C4C1CA;--dim:#918E99;
  --violet:#A98BEA;--violet-2:#B89BF0;--wash:#342C49;--on-accent:#171612;--pink:#F08BD6;--ok:#5FCB94;--okwash:#163024;--warn-ink:#F2C46D;--warnwash:#3A2C14;
  --shadow-3:0 20px 60px rgba(0,0,0,.35);
  --cl-bg:#26221E;--cl-bar:#2D2823;--cl-user:#3A342D;--cl-line:#433C34;--cl-ink:#F1ECE5;--cl-muted:#BAB0A3;--cl-field:#2F2A25;
  --gp-bg:#1D1D20;--gp-user:#2E2E33;--gp-line:#35353B;--gp-ink:#ECECEF;--gp-muted:#A4A4AC;--gp-field:#26262A;
  --mc-bg:#1B1B1F;--mc-bar:#232327;--mc-user:#2C2F45;--mc-line:#38383F;--mc-ink:#F0F0F2;--mc-muted:#ADADB5;--mc-field:#26262B;--mc-tab:#2C2C31;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--body);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.grow{flex:1}

/* the bar */
.dbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.dbrand{display:flex;align-items:center;gap:9px;min-width:0}
.dbrand img{display:block}
.dname{font-weight:650;letter-spacing:-.01em}
.dtag{font:500 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--muted);padding:5px 9px;border:1px dashed var(--line2);border-radius:999px;white-space:nowrap}
.dctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dseg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--bg2);border:1px solid var(--line)}
.dlbl{font-size:12.5px;color:var(--muted);padding:0 6px 0 8px}
.dseg button{border:0;background:transparent;border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer}
.dseg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.dbtn{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:7px 12px;font-size:13.5px;font-weight:550;cursor:pointer;white-space:nowrap}
.dbtn:hover{border-color:var(--line2)}
.dbtn[aria-pressed="true"],.dbtn[aria-expanded="true"]{background:var(--wash);border-color:color-mix(in srgb,var(--violet) 40%,transparent);color:var(--violet)}
.dbtn.pri{background:var(--violet);border-color:var(--violet);color:var(--on-accent)}
.dbtn.quiet{background:transparent}
.ds{display:none}
.dmenu-wrap{position:relative}
.dmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:290px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-3);padding:6px}
.dmenu button{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;border:0;background:transparent;border-radius:9px;padding:9px 10px;font-size:14px;cursor:pointer}
.dmenu button:hover,.dmenu button:focus-visible{background:var(--wash)}
.dmenu .n{font:600 12px/1 var(--mono);color:var(--violet);min-width:14px}
.dmenu .who{margin-left:auto;font-size:11.5px;color:var(--muted)}

/* the app and the AI panel */
.dmain{flex:1;min-height:0;display:flex}
.dframe{position:relative;flex:1;min-width:0}
.dframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg)}
.dloading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);background:var(--bg)}
.dai{flex:none;width:400px;display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--bg2);min-height:0}

/* the AI panel, in the site's chat styles */
.env{--e-bg:var(--cl-bg);--e-bar:var(--cl-bar);--e-line:var(--cl-line);--e-ink:var(--cl-ink);--e-muted:var(--cl-muted);--e-field:var(--cl-field);--e-user:var(--cl-user);
  flex:1;min-height:0;display:flex;flex-direction:column;background:var(--e-bg);color:var(--e-ink)}
.env.gp{--e-bg:var(--gp-bg);--e-bar:var(--gp-bg);--e-line:var(--gp-line);--e-ink:var(--gp-ink);--e-muted:var(--gp-muted);--e-field:var(--gp-field);--e-user:var(--gp-user)}
.env.mc{--e-bg:var(--mc-bg);--e-bar:var(--mc-bar);--e-line:var(--mc-line);--e-ink:var(--mc-ink);--e-muted:var(--mc-muted);--e-field:var(--mc-field);--e-user:var(--mc-user)}
.env-bar{flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--e-bar);border-bottom:1px solid var(--e-line)}
.ai-pick{display:flex;gap:2px;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--e-ink) 7%,transparent)}
.ai-pick button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;border-radius:999px;padding:5px 10px;font-size:12.5px;font-weight:550;color:var(--e-muted);cursor:pointer;white-space:nowrap}
.ai-pick button[aria-pressed="true"]{background:var(--e-bg);color:var(--e-ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.ai-dot{width:16px;height:16px;flex:none;display:block}
.ai-x{margin-left:auto;border:0;background:transparent;border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--e-muted);font-size:18px;line-height:1}
.env-conn{display:flex;align-items:center;gap:7px;padding:7px 14px;font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--e-muted);border-bottom:1px solid var(--e-line)}
.ai-tag{margin-left:auto;flex:none;padding:3px 7px;border:1px solid var(--e-line);border-radius:999px;font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--e-muted);white-space:nowrap}
.env-conn img{width:15px;height:15px}
.env-body{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.who{font:500 10.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--e-muted);align-self:flex-end}
.q{align-self:flex-end;max-width:88%;font-size:14.5px;line-height:1.5;background:var(--e-user);padding:9px 13px;border-radius:14px 14px 4px 14px;border:1px solid var(--e-line);white-space:pre-wrap;overflow-wrap:anywhere}
.gp .q{border-radius:20px;border:0}
.mc .q{border-radius:12px;border:0}
.a{font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.a p{margin:0 0 7px}
.a ul,.a ol{margin:0 0 7px;padding-left:20px}
.a li{margin:0 0 3px}
.a b{font-weight:600}
.a .cite{color:var(--e-muted)}
.a blockquote{margin:0 0 7px;padding:7px 10px;border-left:3px solid var(--e-line);color:var(--e-muted)}
.tool{display:flex;align-items:center;gap:8px;font:500 12px/1.4 var(--mono);color:var(--e-muted)}
.tool .ok{color:var(--ok)}
.tool svg{width:14px;height:14px;flex:none}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--pink);display:inline-block;animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.chips{display:flex;flex-direction:column;gap:6px;padding:8px 14px 6px;border-top:1px solid var(--e-line);max-height:38%;overflow-y:auto;flex:none}
.chips .grp{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--e-muted);margin:6px 0 2px}
.chips .row{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--e-line);background:var(--e-field);color:var(--e-ink);border-radius:999px;padding:6px 11px;font-size:13px;line-height:1.3;text-align:left;cursor:pointer}
.chip:hover{border-color:color-mix(in srgb,var(--violet) 45%,transparent)}
.chip.go{background:var(--violet);border-color:var(--violet);color:var(--on-accent)}
.chip:disabled{opacity:.5;cursor:default}
.env-in{flex:none;padding:8px 14px 12px}
.field{display:flex;align-items:center;gap:8px;border:1px solid var(--e-line);background:var(--e-field);border-radius:14px;padding:5px 5px 5px 12px}
.gp .field{border-radius:999px}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 14.5px/1.5 var(--body);color:var(--e-ink);padding:5px 0}
.field input::placeholder{color:var(--e-muted)}
.send{width:32px;height:32px;border-radius:10px;border:0;background:var(--e-ink);color:var(--e-bg);display:grid;place-items:center;cursor:pointer;flex:none}
.gp .send{border-radius:50%}
.send svg{width:15px;height:15px}
.fine{font-size:12px;color:var(--e-muted);margin:0}

/* the guided tours */
.dtour{position:fixed;inset:0;pointer-events:none;z-index:40}
.dt-ring{position:fixed;border-radius:14px;box-shadow:0 0 0 3px var(--violet),0 0 0 9999px rgba(10,9,32,.28);opacity:0;transition:all .45s cubic-bezier(.2,.7,.2,1)}
.dt-ring.on{opacity:1}
.dt-ring.pulse{box-shadow:0 0 0 3px var(--pink),0 0 0 9999px rgba(10,9,32,0);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--pink),0 0 0 0 color-mix(in srgb,var(--pink) 45%,transparent)}50%{box-shadow:0 0 0 3px var(--pink),0 0 0 12px color-mix(in srgb,var(--pink) 0%,transparent)}}
.dt-cursor{position:fixed;left:0;top:0;width:26px;height:26px;opacity:0;transition:transform .8s cubic-bezier(.5,0,.2,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.dt-cursor.on{opacity:1}
.dt-cursor path{fill:#17171B;stroke:#FFFFFF;stroke-width:1.3;stroke-linejoin:round}
.dt-cursor::before{content:"";position:absolute;left:-13px;top:-13px;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--violet) 18%,transparent);border:1.5px solid color-mix(in srgb,var(--violet) 40%,transparent)}
.dt-cursor.click::after{content:"";position:absolute;left:-20px;top:-20px;width:44px;height:44px;border-radius:50%;border:3px solid var(--violet);animation:rip .55s ease-out forwards}
@keyframes rip{from{transform:scale(.3);opacity:1}to{transform:scale(1.35);opacity:0}}
.dt-cap{position:fixed;z-index:41;width:min(340px,calc(100vw - 24px));background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-3);padding:14px 16px 12px}
.dt-step{margin:0 0 4px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.dt-title{margin:0 0 4px;font-weight:650;font-size:15px}
.dt-text{margin:0 0 12px;color:var(--muted);font-size:14px}
.dt-acts{display:flex;gap:6px;align-items:center}
.dtoast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 14px;font-size:14px;box-shadow:var(--shadow-3);max-width:calc(100vw - 24px)}

@media (prefers-reduced-motion:reduce){.dt-ring,.dt-cursor{transition:none}.dt-ring.pulse,.spin,.dt-cursor.click::after{animation:none}.env-body{scroll-behavior:auto}}

/* phones: shorter labels; the AI panel stacks under the app */
@media (max-width:760px){
  .dl{display:none}.ds{display:inline}.dlbl{display:none}.dtag{font-size:10.5px}
  .dbar{padding:8px 10px}
  .dmain{flex-direction:column}
  .dai{width:auto;height:52%;border-left:0;border-top:1px solid var(--line)}
  .dmenu{position:fixed;left:10px;right:10px;top:auto;min-width:0}
}