/* ================= boot / reveal ================= */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
body.booting .reveal{transition:none}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes bob{50%{transform:translateY(-6px)}}

/* ================= hero ================= */
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px;align-items:start;padding-top:56px;padding-bottom:40px}
.hero-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line2);background:var(--panel);border-radius:4px;padding:7px 12px;font:500 12.5px/1 var(--sans);color:var(--ink2);transition:border-color .2s}
.hero-pill:hover{border-color:#55554e;color:var(--ink)}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(46px,6.2vw,80px);line-height:.98;letter-spacing:-.035em;margin:26px 0 22px}
.hero h1 em{font-style:italic;color:var(--green);font-weight:600}
.lead{font-size:16.5px;line-height:1.65;color:var(--ink2);max-width:540px;margin:0 0 26px}

.hprompt{border:1px solid var(--line2);background:var(--term);border-radius:6px;max-width:560px;transition:border-color .2s}
.hprompt:focus-within{border-color:var(--green)}
.hp-row{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;font:13px var(--mono)}
.hp-pre{color:var(--mut);white-space:nowrap}
.hp-pre b{color:var(--green);font-weight:500}
.hp-row input{flex:1;min-width:0;border:0;outline:0;background:none;height:38px;font:13px var(--mono);color:var(--ink)}
.hp-row input::placeholder{color:var(--mut2)}
.hp-go{width:38px;height:38px;border-radius:4px;border:0;background:var(--ink);display:grid;place-items:center;flex:none;transition:background .15s}
.hp-go:hover{background:#fff}
.hp-go svg{width:16px;height:16px;stroke:#111;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hp-chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px 12px;border-top:1px dashed var(--line)}
.hp-chips button{border:1px solid var(--line);background:var(--panel);border-radius:3px;padding:4px 9px;font:12px var(--mono);color:var(--mut)}
.hp-chips button::before{content:'--';color:var(--mut2);margin-right:2px}
.hp-chips button:hover{color:var(--ink);border-color:var(--line2)}

.hero-btns{display:flex;gap:10px;margin:22px 0 34px;flex-wrap:wrap}
.stats{display:flex;gap:54px;font-family:var(--mono)}
.stats div{display:flex;flex-direction:column;gap:6px}
.stats span{font-size:12px;color:var(--mut)}
.stats b{font-size:17px;font-weight:500;color:var(--ink)}

/* shell (hero terminal) */
.hero-r{position:sticky;top:90px}
.shell .win-bar{justify-content:space-between}
.shell .win-bar .x{margin-left:0}
.sh-body{padding:18px 18px 16px;font:12.5px/1.55 var(--mono);color:var(--ink2);min-height:440px}
.sh-cmd{margin-bottom:14px;color:var(--ink)}
.sh-cmd b{color:var(--green);font-weight:500}
.sh-legend div{display:grid;grid-template-columns:16px 92px 1fr;color:var(--mut2);transition:color .2s}
.sh-legend i{font-style:normal;color:transparent}
.sh-legend span{color:var(--mut2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-legend div.on{color:var(--ink)}
.sh-legend div.on i{color:var(--green)}
.sh-legend div.on span{color:var(--ink2)}
.sh-legend div.dn{color:var(--mut)}
.sh-rows{margin-top:16px;display:flex;flex-direction:column;gap:5px;min-height:115px}
.sh-row{display:grid;grid-template-columns:88px 1fr 76px;align-items:center;gap:10px;animation:popIn .3s both}
.sh-row .lb{color:var(--mut)}
.sh-row .bar{letter-spacing:1px;color:var(--ink);white-space:nowrap;overflow:hidden}
.sh-row .bar u{text-decoration:none;color:var(--mut2)}
.sh-row .h{text-align:right;color:var(--mut)}
.sh-row.dn .h{color:var(--ink2)}
.sh-more{margin:8px 0 0;color:var(--mut)}
.sh-sep{border-top:1px dashed var(--line2);margin:14px 0 12px}
.sh-kv{display:grid;grid-template-columns:70px 1fr;gap:10px}
.sh-kv span{color:var(--mut)}
.sh-kv code{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-kv code.dim{color:var(--mut2)}
.sh-kv code.ok{color:var(--green)}
.sh-status{margin-top:18px;color:var(--ink)}
.sh-status b{color:var(--amber);font-weight:500}
.sh-status.ok b{color:var(--green)}
.caret{display:inline-block;width:8px;height:14px;background:var(--ink2);vertical-align:-2px;margin-left:4px;animation:blink 1s steps(1) infinite}

/* ================= marquee ================= */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--term);margin-top:30px}
.mq-track{display:flex;width:max-content;animation:mq 40s linear infinite}
.mq-track span{padding:13px 22px;font:12.5px var(--mono);color:var(--mut);white-space:nowrap}
.mq-track span b{color:var(--green);font-weight:500;margin-right:6px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ================= sections ================= */
.sec{padding-top:100px}
.sec-sub{color:var(--ink2);max-width:640px;margin:-6px 0 26px;font-size:15px}
.sec-note,.sm-link{font:12.5px var(--mono);color:var(--mut)}
.sm-link:hover{color:var(--ink)}
.tabs-h{display:flex;align-items:end;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);margin-bottom:22px}
.stabs{display:flex;gap:34px;flex-wrap:wrap}
.stabs button{border:0;background:none;padding:0 0 12px;font:600 34px/1 var(--serif);letter-spacing:-.02em;color:#56554f;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s}
.stabs button:hover{color:var(--ink2)}
.stabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.tabs-h .sm-link{padding-bottom:14px;white-space:nowrap}

/* ================= try it ================= */
.try{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px}
.try-chat{display:flex;flex-direction:column;min-height:470px}
.try-msgs{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.tm{max-width:90%;padding:10px 12px;border-radius:4px;font-size:13px;line-height:1.55;animation:popIn .3s both}
.tm.me{align-self:flex-end;background:var(--panel2);border:1px solid var(--line2);color:var(--ink)}
.tm.ai{background:transparent;border-left:2px solid var(--green);border-radius:0;color:var(--ink2);font-family:var(--mono);font-size:12.5px;padding:4px 0 4px 12px}
.tm .att{display:flex;gap:6px;margin-top:8px}.tm .att i{width:40px;height:30px;border-radius:2px;background:repeating-linear-gradient(45deg,var(--g1) 0 4px,var(--g2) 4px 8px);border:1px solid var(--line2)}
.dots{display:inline-flex;gap:4px;margin-right:6px}.dots i{width:5px;height:5px;border-radius:1px;background:var(--green);animation:dt 1.2s infinite}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dt{50%{opacity:.2}}
.try-input{margin:0 14px 14px;display:flex;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:4px;padding:6px 6px 6px 12px;font:12.5px var(--mono);color:var(--mut);background:var(--panel)}
.try-input .pr{color:var(--green)}
.try-input #tryTyping{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.try-input .send{width:30px;height:30px;border-radius:3px;background:var(--ink);display:grid;place-items:center;flex:none}
.try-input svg{width:14px;height:14px;stroke:#111;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.try-prev{display:flex;flex-direction:column;min-height:470px}
.try-screen{flex:1;position:relative;overflow:hidden;background:#0b0b0a}
.try-bar{height:32px;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 12px;font:11.5px var(--mono);color:var(--mut);background:var(--term2)}
.try-bar i{flex:1;height:10px;position:relative;background:linear-gradient(var(--green),var(--green)) 0 50%/var(--p,0%) 2px no-repeat,linear-gradient(#2e2e29,#2e2e29) 0 50%/100% 1px no-repeat}
.try-bar i::after{content:'';position:absolute;top:1px;left:calc(var(--p,0%) - 4px);width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px 2px rgba(61,220,111,.7)}
.skel{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;gap:12px;background:var(--term)}
.skel i{display:block;border-radius:3px;background:linear-gradient(90deg,#1c1c1a 0,#262623 40%,#1c1c1a 80%);background-size:200% 100%;animation:shim 1.2s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.demo-site{position:absolute;inset:0;animation:popIn .6s both;font-family:var(--mono)}

/* demo sites (they are the user's sites, so they keep their own looks) */
.ds-nav{display:flex;align-items:center;gap:16px;padding:14px 20px;font-size:10px;letter-spacing:.12em}
.ds-nav b{font-size:15px;margin-right:auto;letter-spacing:0}
.ds-orb{background:radial-gradient(120% 90% at 75% 40%,#2a1150 0,#0d0718 65%);color:#efe6ff;display:flex;flex-direction:column}
.ds-orb .ds-nav b{color:#ffb36b;font-family:var(--sans);font-weight:800;letter-spacing:.04em}
.ds-orb .ds-nav span{color:#c9b6ef}.ds-orb .ds-nav .bx{background:linear-gradient(90deg,#ff7a3d,#ffb36b);color:#1b0b2e;padding:6px 10px;border-radius:999px;font-weight:700}
.ds-hero{flex:1;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;padding:6px 26px;gap:10px;min-height:0}
.ds-orb small{font-size:9px;letter-spacing:.2em;color:#a98bd9}
.ds-orb h3{font-family:var(--sans);font-weight:800;font-size:48px;line-height:.9;margin:6px 0 8px;letter-spacing:-.04em;color:#fff}
.ds-orb h3 em{font-style:normal;background:linear-gradient(90deg,#ff7a3d,#ffcf8f);-webkit-background-clip:text;background-clip:text;color:transparent}
.ds-orb p{font-size:11.5px;color:#c9b6ef;margin:0 0 12px;max-width:240px}
.ds-orb canvas{width:100%;height:100%;min-height:180px;display:block}
.ds-ca{display:inline-flex;border:1px solid #4a2b78;border-radius:999px;font-size:11px;overflow:hidden}.ds-ca code{padding:7px 12px}.ds-ca b{background:#ff7a3d;color:#1b0b2e;padding:7px 11px}
.ds-stats{display:flex;border-top:1px solid #2e1a4d}.ds-stats span{flex:1;padding:12px 18px;font-size:9px;letter-spacing:.12em;color:#a98bd9;border-right:1px solid #2e1a4d}.ds-stats b{display:block;font-size:16px;color:#fff;letter-spacing:0}
.ds-pad{background:#f6f6f4;color:#1b1c1e;display:flex;flex-direction:column}
.ds-pad .ds-nav b{font-family:var(--sans);font-weight:800}
.ds-pad .bx{background:#1b1c1e;color:#fff;padding:6px 10px;border-radius:6px}
.pad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6px 20px 20px}
.pad-card{background:#fff;border:1px solid #e3e3e1;border-radius:12px;padding:12px;font-size:11px;animation:popIn .5s both}
.pad-card .mut{color:#75777b}
.pad-card .av{width:34px;height:34px;border-radius:9px;margin-bottom:8px}
.pad-card b{display:block;font-size:12.5px}
.pad-card .mc{height:5px;border-radius:3px;background:#ececea;margin-top:8px;overflow:hidden}.pad-card .mc i{display:block;height:100%;background:#22c55e}
.pad-top{display:flex;align-items:center;justify-content:space-between;padding:4px 20px 12px}
.pad-top h3{font-family:var(--sans);font-weight:800;font-size:28px;margin:0;letter-spacing:-.04em}
.pad-top .mut{color:#75777b}
.ds-game{background:#120f24;color:#fff;display:flex;flex-direction:column}
.ds-game canvas{flex:1;width:100%;display:block}
.ds-game .ds-nav b{color:#ffd23f}
.ds-game .hud{position:absolute;left:20px;right:20px;top:54px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;color:#ffd23f}
.ds-ai{background:linear-gradient(160deg,#1b1c1e,#2f3136);color:#eee;display:flex;flex-direction:column}
.ai-chat{flex:1;display:flex;flex-direction:column;gap:10px;padding:10px 22px 18px;justify-content:flex-end}
.ai-chat .q{align-self:flex-end;background:#3a3c41;padding:9px 12px;border-radius:12px 12px 2px 12px;font-size:12px}
.ai-chat .a{display:flex;gap:10px;align-items:flex-end;font-size:12px}
.ai-chat .a span{background:#fff;color:#1b1c1e;padding:9px 12px;border-radius:12px 12px 12px 2px;max-width:80%}
.ai-face{width:36px;height:36px;border-radius:11px;background:linear-gradient(150deg,#77797d,#55575b);display:grid;place-items:center;flex:none}
.ai-face i{width:6px;height:6px;background:#fff;border-radius:50%;margin:0 2px;display:inline-block;animation:blinkEye 3s infinite}
@keyframes blinkEye{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

/* ================= references ================= */
.lref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lref{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:18px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s,transform .2s}
.lref:hover{border-color:#4a4a44;transform:translateY(-2px)}
.lref .top{display:flex;gap:14px;align-items:center}
.lref .cv{width:58px;height:58px;border-radius:3px;border:1px solid var(--line2);background:var(--term) center/cover no-repeat;flex:none;display:grid;place-items:center;font:700 22px var(--serif);color:var(--mut)}
.lref h4{margin:0;font-size:16px;font-weight:600}
.lref .cat{font:12px var(--mono);color:var(--mut);margin-top:3px}
.lref p{margin:0;font-size:13px;color:var(--ink2);line-height:1.55}
.lref .box{border:1px solid var(--line);background:var(--term);border-radius:3px;padding:10px 12px}
.lref .box span{display:flex;justify-content:space-between;font:11.5px var(--mono);color:var(--mut);margin-bottom:8px}
.lref .ft{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.lref .ft i{font-style:normal;font:11px var(--mono);border:1px solid var(--line2);border-radius:3px;padding:3px 7px;color:var(--ink2)}

/* ================= runtime ================= */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cap{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:14px;transition:transform .2s,border-color .2s;will-change:transform}
.cap:hover{border-color:#4a4a44}
.cap-h{display:flex;gap:14px;align-items:center;min-width:0}
.cap-h>div:last-child{min-width:0}
.cap h4{margin:0 0 3px;font-size:16px;font-weight:600}
.cap code{font:12px var(--mono);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cap p{margin:0;color:var(--ink2);font-size:13.5px;line-height:1.55}
.cap-box{border:1px solid var(--line);background:var(--term);border-radius:3px;padding:10px 12px;margin-top:auto}
.cap-box span{display:block;font:11.5px var(--mono);color:var(--mut);margin-bottom:8px}

/* ================= steps ================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:10px;min-height:250px}
.step.brk{border-color:var(--line2)}
.step-tag{position:absolute;right:10px;top:-11px;background:var(--ink);color:#111;font:600 10px/1 var(--mono);letter-spacing:.14em;padding:5px 9px;border-radius:2px}
.st-top{display:flex;justify-content:space-between;align-items:center;font:12px var(--mono);color:var(--mut);margin-bottom:10px}
.step h3{margin:0;font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:-.02em}
.step p{margin:0;color:var(--ink2);font-size:13.5px}
.nodes{display:grid;grid-template-columns:repeat(4,1fr);margin-top:auto;padding-top:6px}
.nodes i{position:relative;height:12px}
.nodes i::before{content:'';position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line2)}
.nodes i::after{content:'';position:absolute;left:0;top:1px;width:8px;height:8px;border-radius:50%;background:var(--panel);border:1.5px solid var(--mut2)}
.nodes i.on::before{background:var(--green)}
.nodes i.on::after{background:var(--green);border-color:var(--green);box-shadow:0 0 10px rgba(61,220,111,.7)}

/* ================= live ================= */
.live-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ================= cta ================= */
.cta{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;border:1px solid var(--line2);background:var(--panel);border-radius:6px;padding:44px;position:relative;overflow:hidden}
.cta h2{font-family:var(--serif);font-weight:600;font-size:clamp(38px,4.6vw,58px);line-height:1;letter-spacing:-.03em;margin:14px 0 14px}
.cta h2 em{font-style:italic;color:var(--green)}
.cta p{margin:0 0 24px;max-width:460px}
.cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.cta-ca{margin-top:26px}
.cta-ca .kicker{margin-bottom:8px}
.cta-r{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.ascii{margin:0;font:12px/1.25 var(--mono);color:var(--ink2);white-space:pre}
.ascii .g{color:var(--green)}
.ascii .d{color:var(--mut2)}
.ascii-cap{font:12px var(--mono);color:var(--mut)}

@media (max-width:1060px){
  .hero{grid-template-columns:1fr;gap:40px}
  .hero-r{position:static}
  .caps,.lref-grid,.live-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .try{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
}
@media (max-width:680px){
  .hero{padding-top:34px}
  .hero h1{font-size:44px}
  .hp-pre b,.hp-pre .host{display:none}
  .stats{gap:28px}
  .sh-body{min-height:0;font-size:11.5px;padding:14px}
  .sh-legend div{grid-template-columns:16px 78px 1fr}
  .sh-row{grid-template-columns:70px 1fr 64px}
  .caps,.lref-grid,.live-grid,.steps{grid-template-columns:1fr}
  .stabs{gap:18px}
  .stabs button{font-size:24px}
  .tabs-h .sm-link{display:none}
  .sec{padding-top:70px}
  .sec-h{flex-direction:column;align-items:flex-start}
  .sec-h h2{font-size:34px}
  .pad-grid{grid-template-columns:1fr 1fr}
  .ds-orb h3{font-size:36px}
  .cta{padding:26px 20px}
  .ascii{font-size:9.5px}
  .try-chat,.try-prev{min-height:400px}
}
.hero h1{margin:24px 0 6px}
.h1-sub{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;color:var(--ink2);margin:0 0 22px}
.lead+.lead{margin-top:-12px}
.hero-motto{font:500 13.5px var(--mono);color:var(--ink2);margin:22px 0 0}
.hero-motto b{color:var(--green);font-weight:500}
.hero-btns{margin-top:16px}
.hero-r{top:76px}