/* PriorStates launch site — GitHub-dark brand, zero dependencies. */
:root{
  --bg:#0d1117; --bg2:#161b22; --bg3:#1c2230;
  --fg:#c9d1d9; --dim:#8b949e; --border:#30363d;
  --accent:#1f6feb; --accent2:#388bfd; --accent-fg:#fff;
  --blue:#58a6ff; --green:#3fb950; --orange:#e3934d; --violet:#a371f7;
  --maxw:1200px; --radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--font);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono); font-size:.92em; background:var(--bg3); padding:.1em .4em; border-radius:6px; color:#e6edf3}
h1,h2,h3{line-height:1.15; letter-spacing:-.02em; margin:0}
.nowrap{white-space:nowrap}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.97rem;
  padding:.7em 1.3em; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:.15s}
.btn-primary{background:var(--accent); color:var(--accent-fg)}
.btn-primary:hover{background:var(--accent2); text-decoration:none; transform:translateY(-1px)}
.btn-ghost{background:var(--bg2); color:var(--fg); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent2); color:#fff; text-decoration:none}

/* ░ NAV ░ */
.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:1.5rem;
  padding:.7rem clamp(1rem,4vw,2rem); background:rgba(13,17,23,.72);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--border)}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.15rem; color:#fff}
.brand:hover{text-decoration:none}
.nav-links{display:flex; gap:1.4rem; margin-left:auto}
.nav-links a{color:var(--dim); font-size:.95rem; font-weight:500}
.nav-links a:hover{color:#fff; text-decoration:none}
.nav-cta{padding:.5em 1em; font-size:.9rem}
.nav-toggle{display:none; margin-left:auto; background:none; border:0; color:#fff; font-size:1.5rem; cursor:pointer}

/* ░ HERO ░ */
.hero{position:relative; text-align:center; padding:clamp(3.5rem,9vw,7rem) 1.2rem 3rem; overflow:hidden}
/* Home hero fills the first viewport so the fold lands at its end and the
   next section reads as "page two". Only on the homepage (.hero-full) and
   only when the screen is tall enough to not squeeze content. */
@media (min-height:560px){
  .hero-full{min-height:calc(100svh - 60px); display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding-top:0; padding-bottom:6vh}
  .hero-full .hero-inner{width:100%; margin:9vh auto auto}  /* sit a bit above center */
  .hero-full .strip{margin:0 auto; width:100%}      /* docks at the screen bottom */
}
.hero-glow{position:absolute; inset:-30% 0 auto 0; height:560px; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%, rgba(56,139,253,.22), transparent 70%);
  filter:blur(10px)}
.hero-inner{position:relative; max-width:860px; margin:0 auto}
.eyebrow{display:inline-block; font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--blue); background:rgba(56,139,253,.1); border:1px solid rgba(56,139,253,.3);
  padding:.35em .9em; border-radius:999px; margin-bottom:1.4rem}
.hero h1{font-size:clamp(2rem,5.2vw,3.1rem); font-weight:700; color:#fff}
.hero-facts{margin:1.1rem auto 0; color:var(--dim); font-family:var(--mono); font-size:.9rem; letter-spacing:.02em}
.grad{background:linear-gradient(100deg,var(--blue),var(--green)); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.lede{max-width:680px; margin:1.3rem auto 0; color:var(--dim); font-size:clamp(1rem,2.3vw,1.18rem)}
.lede b{color:var(--fg); font-weight:600}
.hero-cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:2rem}

/* Wide screens: homepage hero goes two-column — copy left, diagram right — so
   the fold isn't a narrow centered strip with empty margins. Scoped to
   .hero-full: other pages' heroes are plain stacked copy and would scatter
   across the grid cells. */
@media (min-width:1100px){
  .hero-full .hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:3.2rem;
    align-items:center; max-width:1240px; text-align:left}
  .hero-full .hero-inner .lede{margin-left:0; max-width:none}
  .hero-full .hero-inner .hero-cta{justify-content:flex-start}
  .hero-full .hero-inner .terminal{margin:0; max-width:none}
}

/* terminal */
.terminal{max-width:620px; margin:2.6rem auto 0; text-align:left; border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
.term-bar{display:flex; align-items:center; gap:.45rem; padding:.6rem .9rem; background:var(--bg2); border-bottom:1px solid var(--border)}
.term-bar span{width:11px; height:11px; border-radius:50%; background:#3a3f47}
.term-bar span:nth-child(1){background:#ff5f57}.term-bar span:nth-child(2){background:#febc2e}.term-bar span:nth-child(3){background:#28c840}
.term-bar i{margin-left:auto; color:var(--dim); font-style:normal; font-size:.8rem; font-family:var(--mono)}
.term-body{margin:0; padding:1.1rem 1.2rem; background:#0a0d12; font-family:var(--mono); font-size:.9rem; line-height:1.7; overflow-x:auto}
.term-body code{background:none; padding:0}
.c-dim{color:var(--dim)} .c-grn{color:var(--green)}

/* ░ TRUST STRIP ░ */
.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; max-width:var(--maxw);
  margin:2.5rem auto; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.strip-item{background:var(--bg); padding:1.3rem 1rem; text-align:center}
.strip-item b{display:block; color:#fff; font-size:1.15rem}
.strip-item span{color:var(--dim); font-size:.85rem}

/* ░ SECTIONS ░ */
.section{max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2rem)}
.section-alt{max-width:none; background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section-alt > *{max-width:var(--maxw); margin-left:auto; margin-right:auto}
.sec-head{text-align:center; max-width:660px; margin:0 auto 2.8rem}
.sec-head h2{font-size:clamp(1.7rem,4vw,2.4rem); font-weight:800; color:#fff}
.sec-head p{color:var(--dim); margin-top:.7rem; font-size:1.05rem}

/* feature grid */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem}
.card{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem;
  transition:.18s}
.section-alt .card{background:var(--bg)}
.card:hover{border-color:var(--accent2); transform:translateY(-3px); box-shadow:0 18px 40px -26px rgba(56,139,253,.55)}
.card .ico{font-size:1.7rem; margin-bottom:.7rem}
.card h3{font-size:1.15rem; color:#fff; margin-bottom:.4rem}
.card p{color:var(--dim); font-size:.95rem; margin:0}

/* agents */
.agents{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center}
.agent{display:flex; align-items:center; gap:.6rem; background:var(--bg); border:1px solid var(--border);
  border-radius:999px; padding:.7rem 1.3rem; font-weight:600; color:#fff}
.agent small{color:var(--dim); font-weight:500}
.dot{width:10px; height:10px; border-radius:50%}
.c-orange{background:var(--orange)} .c-blue{background:var(--blue)} .c-grn{background:var(--green)} .c-violet{background:var(--violet)}
.agents-note{text-align:center; color:var(--dim); margin-top:2rem}

/* steps */
.steps{list-style:none; counter-reset:s; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.steps li{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.7rem; position:relative}
.step-n{display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-weight:800; margin-bottom:1rem}
.steps h3{color:#fff; font-size:1.15rem; margin-bottom:.4rem}
.steps p{color:var(--dim); font-size:.95rem; margin:0}

/* ░ INSTALL TABS ░ */
.tabs{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1.6rem}
.tab{background:var(--bg); color:var(--dim); border:1px solid var(--border); border-radius:10px;
  padding:.6em 1.2em; font-weight:600; font-size:.95rem; cursor:pointer; transition:.15s; font-family:inherit}
.tab:hover{color:#fff; border-color:var(--accent2)}
.tab.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.panel{max-width:760px; margin:0 auto}
.panel-lead{color:var(--dim); margin:1.3rem 0 .6rem}
.panel-lead:first-child{margin-top:0}
.code{position:relative; background:#0a0d12; border:1px solid var(--border); border-radius:10px; overflow:hidden}
.code pre{margin:0; padding:1rem 1.1rem; overflow-x:auto; font-family:var(--mono); font-size:.9rem; line-height:1.6}
.code code{background:none; padding:0; color:#e6edf3}
.copy{position:absolute; top:.55rem; right:.55rem; background:var(--bg3); color:var(--dim); border:1px solid var(--border);
  border-radius:7px; padding:.3em .7em; font-size:.78rem; font-weight:600; cursor:pointer; font-family:inherit; transition:.15s}
.copy:hover{color:#fff; border-color:var(--accent2)}
.copy.ok{color:var(--green); border-color:var(--green)}

/* ░ PRIVACY ░ */
.privacy-card{display:flex; gap:1.6rem; align-items:center; background:var(--bg2);
  border:1px solid var(--border); border-radius:var(--radius); padding:clamp(1.6rem,4vw,2.6rem);
  max-width:880px; margin:0 auto}
.ico-lg{font-size:3rem; line-height:1}
.privacy-card h2{font-size:1.6rem; color:#fff; margin-bottom:.5rem}
.privacy-card p{color:var(--dim); margin:0}

/* ░ FINAL CTA ░ */
.cta-final{text-align:center; padding:clamp(3.5rem,8vw,6rem) 1.2rem; border-top:1px solid var(--border);
  background:radial-gradient(70% 120% at 50% 0%, rgba(56,139,253,.12), transparent 70%)}
.cta-final h2{font-size:clamp(1.8rem,4.5vw,2.6rem); font-weight:800; color:#fff}
.cta-final p{color:var(--dim); margin:.6rem 0 0}
.cta-final .hero-cta{margin-top:1.8rem}

/* ░ FOOTER ░ */
.footer{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:2.2rem clamp(1rem,4vw,2rem); border-top:1px solid var(--border); color:var(--dim)}
.foot-brand{display:flex; align-items:center; gap:.55rem; color:#fff; font-weight:700}
.foot-brand small{color:var(--dim); font-weight:400; font-size:.82rem}
.foot-links{display:flex; gap:1.3rem}
.foot-links a{color:var(--dim)} .foot-links a:hover{color:#fff}
.foot-legal{font-size:.85rem}

/* ░ RESPONSIVE ░ */
@media (max-width:860px){
  .grid,.steps{grid-template-columns:1fr 1fr}
  .strip{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav-links,.nav-cta{display:none}
  .nav-links.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    gap:0; background:var(--bg2); border-bottom:1px solid var(--border); padding:.5rem 0}
  .nav-links.open a{padding:.8rem 1.5rem}
  .nav-toggle{display:block}
  .grid,.steps,.strip{grid-template-columns:1fr}
  .privacy-card{flex-direction:column; text-align:center}
}
.install-more{text-align:center; margin:1.5rem auto 0; color:var(--dim); font-size:.95rem}

/* ░ HUB BROWSE ░ */
.hub-note{max-width:var(--maxw); margin:0 auto 1.6rem; color:var(--dim); font-size:.92rem;
  border:1px solid var(--border); border-left:3px solid var(--orange); border-radius:8px; padding:.7rem 1rem; background:var(--bg2)}
.hub-grid{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px}
.hub-card{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:22px 22px 18px}
.hub-card h3{color:#fff; font-size:1.15rem; margin-bottom:.3rem}
.hub-meta{color:var(--dim); font-size:.85rem; margin:0 0 1rem}
.card-btns{display:flex; gap:.5rem; flex-wrap:wrap}
.hub-cmd{margin-top:.9rem; background:#0a0d12; border:1px solid var(--border); border-radius:8px; padding:.5rem .7rem; overflow-x:auto}
.hub-cmd code{font-family:var(--mono); font-size:.82rem; color:#e6edf3; background:none; padding:0; white-space:nowrap}

/* ░ HUB AUTH (login / signup / authorize — served by the hub, same theme) ░ */
.authwrap{max-width:430px; margin:7vh auto 4rem; padding:0 1rem}
.authcard{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:2rem 1.8rem}
.authcard h1{font-size:1.5rem; color:#fff; margin-bottom:.3rem}
.authcard .sub{color:var(--dim); font-size:.95rem; margin:0 0 1.3rem}
.authcard label{display:block; color:var(--dim); font-size:.85rem; margin:.9rem 0 .25rem}
.authcard input[type=text],.authcard input[type=password]{width:100%; padding:.62rem .7rem; background:var(--bg);
  border:1px solid var(--border); border-radius:8px; color:var(--fg); font-size:1rem; font-family:inherit}
.authcard input:focus{outline:none; border-color:var(--accent2)}
.authcard .btn{width:100%; justify-content:center; margin-top:1.3rem}
.authcard .alt{margin-top:1.1rem; text-align:center; color:var(--dim); font-size:.9rem}
.authcard details{margin-top:1.1rem; color:var(--dim); font-size:.9rem}
.authcard details summary{cursor:pointer}
.auth-err{color:#ff7b72; font-size:.9rem; margin:.6rem 0 0}
.auth-ok{color:var(--green); font-size:.9rem; margin:.6rem 0 0}
.token-box{width:100%; padding:.6rem .7rem; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; color:var(--green); font-family:var(--mono); font-size:.85rem}

/* ░ ACCOUNT DASHBOARD (signed-in hub) ░ */
.nav-user{color:#fff; font-weight:600}
.acct-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; max-width:var(--maxw); margin:0 auto}
.acct-grid .card label{display:block; color:var(--dim); font-size:.85rem; margin:.8rem 0 .25rem}
.acct-grid .card input[type=password]{width:100%; padding:.55rem .7rem; background:var(--bg);
  border:1px solid var(--border); border-radius:8px; color:var(--fg); font-size:1rem; font-family:inherit}
.acct-grid .card input:focus{outline:none; border-color:var(--accent2)}
.acct-grid .card .btn{margin-top:1rem}
.acct-grid .card .token-box{margin:.2rem 0 .2rem}
.pack-row{display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.85rem 0; border-top:1px solid var(--border); flex-wrap:wrap}
.pack-row:first-of-type{border-top:0; padding-top:.3rem}
.pack-actions{display:flex; gap:.6rem; align-items:center}
.pack-actions form{margin:0}
.btn.danger:hover{border-color:#ff7b72; color:#ff7b72}
.dropzone{border:1.5px dashed var(--border); border-radius:10px; padding:1.5rem 1rem; text-align:center;
  color:var(--dim); cursor:pointer; transition:.15s}
.dropzone:hover{border-color:var(--accent2)}
.dropzone.drag{border-color:var(--accent2); background:rgba(56,139,253,.08); color:#fff}
.dropzone .link{color:var(--blue); cursor:pointer}
.card .chk{display:flex; align-items:center; gap:.5rem; color:var(--dim); font-size:.9rem; margin-top:.8rem; cursor:pointer}
.card .chk input{width:auto; margin:0}
.grp-create{display:flex; gap:.6rem; margin-top:.9rem; flex-wrap:wrap}
.grp-create input[type=text]{flex:1; min-width:160px; padding:.55rem .7rem; background:var(--bg);
  border:1px solid var(--border); border-radius:8px; color:var(--fg); font-size:.95rem; font-family:inherit}
.grp-create .btn{margin-top:0}
.acct-sub{color:var(--dim); font-size:.8rem; margin:1.1rem 0 .3rem; text-transform:uppercase; letter-spacing:.04em}
.pack-actions form{margin:0}
.vis-row{display:flex; flex-wrap:wrap; gap:1rem; margin-top:.8rem}
.vis-row .chk{margin-top:0}
.vis-row select{background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--fg);
  padding:.25rem .4rem; font-family:inherit; font-size:.9rem}
.browse-ghdr{color:#fff; font-size:1.2rem; margin:1.6rem 0 .9rem}
.browse-ghdr a{color:#fff}
.browse-ghdr a:hover{color:var(--blue)}

/* ░ CHAT (ask your memory) ░ */
/* Chat page — light full-height layout: header on top, conversation fills the
   middle and scrolls, input pinned at the bottom (footer hidden on this page) */
body:has(.chatshell){height:100vh; overflow:hidden; display:flex; flex-direction:column}
body:has(.chatshell) .footer{display:none}
.chatshell{flex:1; min-height:0; width:100%; max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; padding:1.5rem clamp(1rem,4vw,2rem) 1rem}
.chathead{flex:0 0 auto}
.chatshell .chatlog{flex:1 1 auto; min-height:0; max-width:none; margin:.5rem 0 0; overflow-y:auto; padding-right:.3rem}
.chatshell .chatbar{flex:0 0 auto; max-width:none; margin:.7rem 0 0}
.chatnote{flex:0 0 auto; margin:.5rem 0 0}
.chatlog{max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; gap:.8rem; min-height:24vh}
.msg{max-width:82%; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--border); line-height:1.5}
.msg.me{align-self:flex-end; background:var(--accent); color:#fff; border-color:transparent}
.msg.bot{align-self:flex-start; background:var(--bg2); width:82%}
.chatbar{max-width:var(--maxw); margin:1rem auto 0; display:flex; gap:.6rem}
.chatbar input{flex:1; padding:.7rem .85rem; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; color:var(--fg); font-size:1rem; font-family:inherit}
.chatbar input:focus{outline:none; border-color:var(--accent2)}
.memhit{margin:.4rem 0; border:1px solid var(--border); border-radius:8px; padding:.5rem .7rem; background:var(--bg)}
.memhit summary{cursor:pointer}
.membody{white-space:pre-wrap; font-family:var(--mono); font-size:.82rem; color:#e6edf3;
  margin:.5rem 0 0; max-height:40vh; overflow:auto}
.chat-answer{color:#fff; line-height:1.55}

/* ░ TERMINAL ░ */
/* Terminal page — IDE shell: full-height app (sidebar + terminal), no footer */
body:has(.termshell){height:100vh; overflow:hidden; display:flex; flex-direction:column}
body:has(.termshell) .footer{display:none}
/* grid (not flex) for the shell: minmax(0,1fr) guarantees the terminal column
   takes the exact remaining width — flex items default to min-width:auto and can
   refuse to fill, which left the terminal narrow + centered */
.termshell{flex:1; min-height:0; display:grid; grid-template-columns:280px minmax(0,1fr);
  grid-template-rows:100%; background:#0a0d12}
.ide-side{min-width:0; display:flex; flex-direction:column; gap:1.4rem; padding:1.1rem;
  border-right:1px solid var(--border); background:var(--bg2); overflow:auto}
.ide-group h2{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--dim);
  margin:0 0 .6rem; font-weight:700}
.ide-input{width:100%; box-sizing:border-box; padding:.5rem .65rem; background:var(--bg);
  border:1px solid var(--border); border-radius:8px; color:var(--fg); font-family:inherit; font-size:.92rem}
select.ide-input{margin-bottom:0}
.ide-btn{width:100%; justify-content:center; margin-top:.55rem}
.ide-note{color:var(--dim); font-size:.82rem; margin:.55rem 0 0; line-height:1.5}
.ide-note code{font-size:.78rem; word-break:break-word}
.ide-foot{margin-top:auto}
.ide-main{min-width:0; min-height:0; display:flex; flex-direction:column; position:relative}
/* Files panel: tree in the sidebar + a viewer that overlays the terminal */
.filetree{font-size:.84rem; max-height:38vh; overflow:auto; margin-top:.3rem}
.ftrow{padding:.12rem .2rem; border-radius:5px; cursor:pointer; white-space:nowrap; color:var(--fg); overflow:hidden; text-overflow:ellipsis}
.ftrow:hover{background:var(--bg2)}
.ftkids{padding-left:.85rem; border-left:1px solid var(--border); margin-left:.25rem}
/* file panes share #terms with the terminals; show one at a time (absolute-fill) */
.filepane{position:absolute; inset:0; background:#0a0d12; display:flex; flex-direction:column}
.ide-ftab.active{background:#0a0d12}
.fvhead{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.4rem .8rem;
  border-bottom:1px solid var(--border); background:var(--bg); flex:0 0 auto}
.fvname{font-family:var(--mono); font-size:.83rem; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fvbtns{display:flex; align-items:center; gap:.5rem; flex:0 0 auto}
.fvbody{flex:1 1 auto; min-height:0; overflow:auto; padding:0}
.fvcm{height:100%}
.fvbody .CodeMirror{height:100% !important; font-size:.86rem}
.fvmd{max-width:820px; line-height:1.6; color:var(--fg); padding:1rem 1.2rem}
.fvmd pre{background:var(--bg2); padding:.8rem; border-radius:8px; overflow:auto}
.fvmd code{font-family:var(--mono); font-size:.88em}
.fvimg{max-width:100%; height:auto; border-radius:6px; margin:1rem}
/* right-click menu in the file tree (Copy path / Insert into terminal) + toast */
.ctxmenu{position:fixed; z-index:9999; background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; padding:4px; min-width:170px; box-shadow:0 10px 28px #000a}
.ctxmenu button{display:block; width:100%; text-align:left; background:none; border:0; color:var(--fg);
  padding:.42rem .6rem; border-radius:6px; cursor:pointer; font:inherit; font-size:.85rem}
.ctxmenu button:hover{background:var(--blue); color:#fff}
.ctxflash{position:fixed; z-index:10000; bottom:18px; right:18px; max-width:60vw; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; background:var(--bg2); border:1px solid var(--border);
  color:var(--fg); padding:.5rem .8rem; border-radius:8px; font-size:.84rem; box-shadow:0 10px 28px #000a}
.prevframe{flex:1 1 auto; min-height:0; width:100%; border:0; background:#fff}
.prevrow{display:flex; gap:.5rem; align-items:center}
.prevrow .ide-input{flex:1 1 auto}
.prevrow .ide-btn{flex:0 0 auto; width:auto; margin-top:0}
.fvedit{width:100%; height:100%; box-sizing:border-box; background:var(--bg); color:var(--fg); border:0;
  padding:.7rem; font-family:var(--mono); font-size:.85rem; line-height:1.5; resize:none}
.ide-tabbar{display:flex; align-items:center; gap:.55rem; padding:.5rem .9rem; color:var(--fg);
  border-bottom:1px solid var(--border); background:var(--bg); font-size:.85rem; flex:0 0 auto}
.ide-tabmeta{color:var(--dim); font-size:.8rem; margin-left:.2rem}
.ide-tabstrip{display:flex; gap:3px; align-items:flex-end; flex:1; min-width:0; overflow-x:auto}
.ide-tab{display:inline-flex; align-items:center; gap:.45rem; padding:.28rem .7rem; border-radius:7px 7px 0 0;
  background:var(--bg2); color:var(--dim); font-size:.82rem; cursor:pointer; white-space:nowrap;
  border:1px solid transparent; border-bottom:none}
.ide-tab.active{background:#0a0d12; color:var(--fg); border-color:var(--border)}
.hint{color:var(--dim); font-size:.85em; font-weight:400}
.token-row{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.token-row .token-box{flex:1 1 220px; min-width:0}
.ide-tablbl{white-space:nowrap}
.ide-tabedit{width:11ch; background:var(--bg); border:1px solid var(--blue); border-radius:4px;
  color:var(--fg); font:inherit; font-size:.82rem; padding:0 .3rem}
.ide-tabx{color:var(--dim); text-decoration:none; font-weight:700; line-height:1}
.ide-tabx:hover{color:#ff7b72}
.ide-tabadd{flex:0 0 auto; width:26px; height:24px; background:transparent; border:1px solid var(--border);
  border-radius:6px; color:var(--dim); cursor:pointer; font-size:1rem; line-height:1}
.ide-tabadd:hover:not(:disabled){color:var(--fg); border-color:var(--fg)}
.ide-tabadd:disabled{opacity:.4; cursor:default}
.ide-dot{width:9px; height:9px; border-radius:50%; background:#6e7681; flex:0 0 auto}
.ide-dot.on{background:#3fb950; box-shadow:0 0 6px #3fb95088}
/* absolute-fill removes flex cross-axis sizing ambiguity — the terminal always
   fills the full main pane, so xterm.fit() measures the real width */
.ide-termwrap{flex:1; min-height:0; position:relative}
/* the container is the sized box; let xterm + the fit addon manage their own
   element dimensions (forcing width/height on xterm internals mis-centers the grid) */
.ide-term{position:absolute; inset:0; padding:.45rem .3rem .3rem .6rem; background:#0a0d12}
/* xterm.js tags its element `terminal xterm` — undo the marketing `.terminal`
   mockup styles (max-width:620 + margin:auto) that were capping/centering it */
.ide-term .terminal.xterm{height:100%; max-width:none; margin:0; border:0; border-radius:0; box-shadow:none}
.ide-side .packlist{flex-direction:column; gap:.4rem; margin-top:.6rem}
.ide-side .pchip{display:flex; justify-content:space-between; align-items:center}
@media(max-width:720px){
  body:has(.termshell){height:auto; overflow:auto}
  .termshell{grid-template-columns:1fr; grid-template-rows:auto auto}
  .ide-side{border-right:none; border-bottom:1px solid var(--border)}
  .ide-termwrap{height:70vh}
}
.packrow{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.packrow select{background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--fg);
  padding:.4rem .5rem; font-family:inherit; font-size:.9rem; max-width:340px}
.packlist{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem}
.pchip{background:var(--bg2); border:1px solid var(--border); border-radius:999px; padding:.3rem .7rem; font-size:.85rem; color:#fff}
.pchip a{color:#ff7b72; margin-left:.35rem; text-decoration:none; font-weight:700}
.aikey{max-width:var(--maxw); margin:0 auto 1rem; border:1px solid var(--border); border-radius:10px;
  padding:.7rem .9rem; background:var(--bg2)}
.aikey summary{cursor:pointer}
.aikey label{display:block; color:var(--dim); font-size:.85rem; margin:.6rem 0 .2rem}
.aikey input, .aikey select{width:100%; max-width:420px; padding:.5rem .6rem; background:var(--bg);
  border:1px solid var(--border); border-radius:8px; color:var(--fg); font-family:inherit; font-size:.95rem}
.aikey input:focus, .aikey select:focus{outline:none; border-color:var(--accent2)}
@media (max-width:860px){ .acct-grid{grid-template-columns:1fr} }

/* ░ DOWNLOAD (per-OS cards) ░ */
.os-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; max-width:var(--maxw); margin:0 auto}
.os-card{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.7rem 1.5rem; text-align:center; transition:.18s}
.os-card:hover{border-color:var(--accent2); transform:translateY(-3px)}
.os-card .ico{font-size:2.4rem; line-height:1; margin-bottom:.6rem}
.os-card h3{color:#fff; font-size:1.15rem; margin-bottom:.2rem}
.os-card .os-sub{color:var(--dim); font-size:.85rem; margin:0 0 1rem; min-height:2.4em}
.os-card .btn{width:100%; justify-content:center}
.os-card .os-note{color:var(--dim); font-size:.78rem; margin:.6rem 0 0}
@media (max-width:860px){ .os-grid{grid-template-columns:1fr} }

/* ░ SECTION NAV ARROWS ░ */
main > section{scroll-margin-top:72px}   /* keep section tops clear of the sticky nav */
.pagenav{position:fixed; top:50%; transform:translateY(-50%); z-index:40;
  width:44px; height:44px; display:grid; place-items:center; padding:0;
  background:rgba(22,27,34,.5); color:var(--dim); border:1px solid var(--border);
  border-radius:50%; cursor:pointer; opacity:.4; backdrop-filter:blur(4px);
  transition:opacity .15s, color .15s, background .15s, border-color .15s}
.pagenav:hover{opacity:1; color:#fff; border-color:var(--accent2); background:var(--bg2)}
.pagenav.prev{left:14px}
.pagenav.next{right:14px}
.pagenav.off{opacity:.1; pointer-events:none}
@media (max-width:820px){ .pagenav{display:none} }

/* ░ SCREENSHOTS ░ */
.shots{max-width:1000px; margin:0 auto; display:flex; flex-direction:column; gap:2.2rem; align-items:center}
.shot{width:100%; margin:0; text-align:center}
.shot.cli{max-width:760px}
.shot img{width:100%; height:auto; display:block; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.shot a{display:block; transition:.15s}
.shot a:hover{transform:translateY(-2px)}
.shot figcaption{color:var(--dim); font-size:.9rem; margin-top:.8rem}

/* ░ AGENT INSTALL CALLOUT ░ */
.agent-install{max-width:760px; margin:0 auto 2.4rem; padding:1.5rem 1.6rem;
  background:linear-gradient(180deg, rgba(56,139,253,.07), var(--bg2));
  border:1px solid rgba(56,139,253,.3); border-radius:var(--radius)}
.agent-install .ai-tag{display:inline-block; font:600 .8rem/1 var(--mono); letter-spacing:.02em;
  color:var(--blue); background:rgba(56,139,253,.12); border:1px solid rgba(56,139,253,.3);
  padding:.45em .8em; border-radius:999px; margin-bottom:.9rem}
.agent-install > p{color:var(--fg); margin:0 0 .7rem}
.agent-install .ai-note{color:var(--dim); font-size:.9rem; margin:.8rem 0 0}

/* ░ DEMO MODAL ░ */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:4vmin}
.modal.open{display:flex}
.modal-backdrop{position:absolute; inset:0; background:rgba(1,4,9,.82); backdrop-filter:blur(4px)}
.modal-inner{position:relative; width:min(960px,94vw); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; background:#05070a; box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.modal-inner video{display:block; width:100%; height:auto; aspect-ratio:16/9; background:#05070a}
.modal-close{position:absolute; top:8px; right:8px; z-index:2; width:34px; height:34px; border-radius:8px;
  border:1px solid var(--border); background:rgba(13,17,23,.7); color:#fff; font-size:1rem; line-height:1; cursor:pointer}
.modal-close:hover{border-color:var(--accent2); background:var(--bg2)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important; scroll-behavior:auto!important}
  .btn:hover,.card:hover{transform:none}
}