/* ==== IRIXEN Code — product site theme ==============================
   Modelled on the Visual Studio Code marketing site, light skin: white
   canvas, #1e1e1e headings, grey body copy, one blue accent (#0078d4 for
   actions, #005fb8 for links) and hairline borders at 12% black.
   No gradients anywhere — flat fills only, square corners, like the rest
   of irixen.com. Loaded only by code.html; style.css stays untouched. */

.vx-page{
  --vx-bg:#ffffff;
  --vx-panel:#f8f8f8;
  --vx-fg:#333333;
  --vx-fg-i:#1e1e1e;
  --vx-mut:#5c6570;
  --vx-dim:#6d7681;
  --vx-line:rgba(0,0,0,.12);
  --vx-line-2:rgba(0,0,0,.07);
  --vx-card:#fafafa;
  --vx-card-h:#f2f2f2;
  --vx-blue:#0078d4;
  --vx-blue-h:#005a9e;
  --vx-link:#005fb8;
  --vx-link-h:#00376b;
  --vx-editor:#ffffff;
  --vx-editor-2:#f6f6f6;
  --vx-status:#007acc;
  --vx-mono:ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"SF Mono",Menlo,monospace;
  --vx-sans:"Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue","Noto Sans SC","Microsoft YaHei",sans-serif;
  background:var(--vx-bg);
  color:var(--vx-fg);
  font-family:var(--vx-sans);
  font-size:16px;
  line-height:1.7;
}
html:has(.vx-page){background:#fff}
.vx-page h1,.vx-page h2,.vx-page h3,.vx-page h4{
  font-family:var(--vx-sans);color:var(--vx-fg-i);font-weight:600;
  letter-spacing:-.018em;line-height:1.14;
}
.vx-page a{color:inherit;text-decoration:none}
.vx-page img{display:block}
.vx-page code{font-family:var(--vx-mono)}

.vx-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,34px)}

/* ---- nav ---------------------------------------------------------- */
.vx-nav{position:sticky;top:0;z-index:600;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--vx-line)}
.vx-nav-in{display:flex;align-items:center;gap:clamp(14px,2vw,30px);height:56px}
.vx-brand{display:flex;align-items:center;gap:9px;flex:none}
.vx-brand-ic{width:23px;height:23px}
.vx-brand-wm{height:13px;width:auto}
.vx-menu{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);margin-left:6px;min-width:0}
.vx-menu a{font-size:14px;color:var(--vx-mut);white-space:nowrap;padding:4px 0;border-bottom:1px solid transparent}
.vx-menu a:hover{color:var(--vx-fg-i);border-bottom-color:var(--vx-blue)}
.vx-nav-end{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.vx-lang{display:flex;border:1px solid var(--vx-line)}
.vx-lang button{font-family:var(--vx-sans);font-size:12px;line-height:1;letter-spacing:.02em;color:var(--vx-mut);background:transparent;border:0;padding:7px 9px;cursor:pointer}
.vx-lang button+button{border-left:1px solid var(--vx-line)}
.vx-lang button[aria-pressed="true"]{color:var(--vx-fg-i);background:#eaeaea}
.vx-lang button:hover{color:var(--vx-fg-i)}

/* ---- buttons ------------------------------------------------------ */
.vx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;font-size:14.5px;font-weight:600;border:1px solid transparent;cursor:pointer;font-family:var(--vx-sans);transition:background-color .14s ease,border-color .14s ease,color .14s ease;white-space:nowrap}
.vx-btn-primary{background:var(--vx-blue);border-color:var(--vx-blue);color:#fff}
.vx-btn-primary:hover{background:var(--vx-blue-h);border-color:var(--vx-blue-h);color:#fff}
.vx-btn-ghost{background:#eaeaea;border-color:rgba(0,0,0,.15);color:var(--vx-fg-i)}
.vx-btn-ghost:hover{background:#e0e0e0;border-color:rgba(0,0,0,.25);color:var(--vx-fg-i)}
.vx-btn-lg{height:46px;padding:0 24px;font-size:15.5px}
.vx-btn-sm{height:32px;padding:0 14px;font-size:13.5px}

/* ---- hero --------------------------------------------------------- */
.vx-hero{padding:clamp(52px,6.6vw,88px) 0 0;overflow:hidden;background:#fff;border-bottom:1px solid var(--vx-line)}
.vx-hero .vx-wrap{text-align:center}
.vx-eyebrow{margin:0 0 18px;font-family:var(--vx-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--vx-dim)}
.vx-hero h1{font-size:clamp(34px,5.2vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1.08;max-width:15em;margin:0 auto;color:#1e1e1e}
.vx-hero h1 span{display:block}
.vx-sub{margin:22px auto 0;max-width:64ch;font-size:clamp(15px,1.2vw,17px);line-height:1.78;color:var(--vx-mut)}
.vx-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.vx-note{margin:16px 0 0;font-size:12.5px;color:var(--vx-dim)}

/* window mock — VS Code light theme */
.vx-stage{margin-top:clamp(36px,4.6vw,56px);padding:0 clamp(14px,3vw,30px)}
.vx-window{max-width:1050px;margin:0 auto;background:var(--vx-editor);border:1px solid rgba(0,0,0,.16);border-bottom:0;box-shadow:0 -1px 0 rgba(0,0,0,.04),0 22px 48px -34px rgba(0,0,0,.35)}
.vx-titlebar{display:flex;align-items:center;gap:14px;height:34px;padding:0 12px;background:#f3f3f3;border-bottom:1px solid #e2e2e2;overflow:hidden}
.vx-dots{display:flex;gap:5px;flex:none}
.vx-dots i{display:block;width:8px;height:8px;border-radius:50%;background:#cfcfcf}
.vx-menus{display:flex;gap:11px;font-size:11.5px;color:#5f5f5f;white-space:nowrap}
.vx-menus i{font-style:normal}
.vx-tab{display:flex;gap:8px;margin-left:auto;font-size:11.5px;color:#3b3b3b;white-space:nowrap}
.vx-tab i{font-style:normal;color:#8a8a8a}
.vx-search{flex:none;font-family:var(--vx-mono);font-size:10.5px;color:#8a8a8a;border:1px solid #d6d6d6;background:#fff;padding:2px 10px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-body{display:grid;grid-template-columns:48px minmax(0,1fr);min-height:348px}
.vx-rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;background:#f8f8f8;border-right:1px solid #e6e6e6}
.vx-rail span{display:flex;align-items:center;justify-content:center;width:48px;height:40px;position:relative}
.vx-rail svg{width:19px;height:19px;fill:none;stroke:#6f6f6f;stroke-width:1.6;stroke-linejoin:miter;stroke-linecap:square}
.vx-rail span.on svg{stroke:#1e1e1e}
.vx-rail span.on:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--vx-status)}
.vx-chat{display:flex;flex-direction:column;gap:10px;padding:18px 20px;background:#fff;min-width:0}
.vx-msg{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--vx-editor-2);border:1px solid #e6e6e6;min-width:0}
.vx-msg.me{background:#fbfbfb}
.vx-msg.ag{border-left:2px solid var(--vx-status)}
.vx-msg.quiet{background:transparent;border-style:dashed;border-color:#dcdcdc}
.vx-who{font-family:var(--vx-mono);font-size:9.5px;letter-spacing:.16em;color:#8a8a8a}
.vx-msg p{margin:0;font-size:13.5px;line-height:1.6;color:#333}
.vx-tool{display:block;font-family:var(--vx-mono);font-size:11.5px;color:#0b4f8a;background:#eef5fb;border:1px solid #d3e3f1;padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-kv{display:flex;gap:10px;align-items:baseline;color:#6d7681 !important;font-family:var(--vx-mono);font-size:12px !important}
.vx-kv span{color:#1a7f37}
.vx-input{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:9px 12px;border:1px solid #d4d4d4;background:#fafafa;color:#8a8a8a;font-size:13px}
.vx-input b{color:#0078d4;font-size:12px;font-weight:400}
.vx-status{display:flex;align-items:center;gap:16px;height:26px;padding:0 12px;background:var(--vx-status);color:#fff;font-size:11px;white-space:nowrap;overflow:hidden}
.vx-status-r{margin-left:auto;opacity:.94}

/* ---- model strip -------------------------------------------------- */
.vx-strip{border-bottom:1px solid var(--vx-line);background:var(--vx-panel)}
.vx-strip-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.vx-strip-l{margin:0;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--vx-dim);font-family:var(--vx-mono)}
.vx-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.vx-chips li{font-size:12.5px;color:var(--vx-mut);border:1px solid var(--vx-line);padding:4px 10px;background:#fff}

/* ---- sections ----------------------------------------------------- */
.vx-sec{padding:clamp(64px,7.5vw,104px) 0;border-bottom:1px solid var(--vx-line);scroll-margin-top:56px}
.vx-sec-alt{background:var(--vx-panel)}
.vx-kicker{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-dim)}
.vx-num{font-family:var(--vx-mono);font-size:11.5px;color:var(--vx-link);border:1px solid rgba(0,95,184,.28);padding:2px 6px}
.vx-sec h2{font-size:clamp(24px,3vw,38px);max-width:26ch;margin:0 0 18px;text-wrap:balance}
.vx-lede{max-width:70ch;margin:0 0 34px;font-size:16px;line-height:1.8;color:var(--vx-mut)}

/* feature rows */
.vx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4.5vw,64px);align-items:center;padding:clamp(38px,4.6vw,62px) 0;border-top:1px solid var(--vx-line-2)}
.vx-row:first-child{border-top:0;padding-top:0}
.vx-row:last-child{padding-bottom:0}
.vx-row-rev .vx-copy{order:2}
.vx-row-rev .vx-visual{order:1}
.vx-copy h2{font-size:clamp(22px,2.5vw,32px);margin-bottom:14px;max-width:none;text-wrap:balance}
.vx-copy>p{font-size:15.5px;line-height:1.8;color:var(--vx-mut);margin:0 0 18px;max-width:56ch}
.vx-copy ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:11px}
.vx-copy li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--vx-mut);display:flex;flex-direction:column;gap:1px}
.vx-copy li:before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--vx-blue)}
.vx-copy li code{font-size:13px;color:var(--vx-link);margin-bottom:1px}
.vx-link{display:inline-block;font-size:14.5px;font-weight:600;color:var(--vx-link)}
.vx-link:hover{color:var(--vx-link-h);text-decoration:underline;text-underline-offset:3px}

/* cards / visuals */
.vx-card{background:var(--vx-card);border:1px solid var(--vx-line);padding:0;overflow:hidden}
.vx-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--vx-line);font-family:var(--vx-mono);font-size:11px;letter-spacing:.1em;color:var(--vx-dim);text-transform:uppercase;background:#fff}
.vx-dim{color:#7a828c;letter-spacing:.04em}
.vx-steps{list-style:none;margin:0;padding:8px 0}
.vx-steps li{display:grid;grid-template-columns:18px 128px minmax(0,1fr);gap:10px;align-items:baseline;padding:7px 14px;font-size:12.5px;color:var(--vx-mut)}
.vx-steps li+li{border-top:1px solid var(--vx-line-2)}
.vx-steps b{font-family:var(--vx-mono);font-size:12px;text-align:center}
.vx-steps b.ok{color:#1a7f37}
.vx-steps b.run{color:var(--vx-blue)}
.vx-steps code{font-size:12px;color:#1e1e1e}
.vx-steps span{font-size:12px;color:var(--vx-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-steps em{font-style:normal;color:#1a7f37}

.vx-diff .vx-hunk{padding:6px 14px;background:#eef5fb;color:#0b4f8a;font-family:var(--vx-mono);font-size:11.5px;border-bottom:1px solid var(--vx-line-2)}
.vx-line{display:grid;grid-template-columns:42px minmax(0,1fr);gap:0;font-family:var(--vx-mono);font-size:12px;line-height:1.85;color:#3c3c3c}
.vx-line .ln{text-align:right;padding-right:12px;color:#a2a8b0;user-select:none}
.vx-line span:last-child{padding-left:10px;white-space:pre;overflow:hidden;text-overflow:ellipsis}
.vx-line.add{background:#e6ffec}
.vx-line.add span:last-child{color:#116329}
.vx-line.del{background:#ffebe9}
.vx-line.del span:last-child{color:#a40e26;text-decoration:line-through;text-decoration-color:rgba(164,14,38,.35)}
.vx-card-h em{font-style:normal;font-weight:700}
.vx-card-h em.add{color:#1a7f37}
.vx-card-h em.del{color:#cf222e}

.vx-grid-chips{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;padding:1px;background:var(--vx-line-2)}
.vx-grid-chips li{background:#fff;padding:14px 12px;font-family:var(--vx-mono);font-size:11.5px;color:#3c3c3c;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* stats */
.vx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--vx-line);border:1px solid var(--vx-line)}
.vx-stats>div{background:#fff;padding:clamp(18px,2.4vw,26px)}
.vx-stats b{display:block;font-size:clamp(30px,3.4vw,42px);font-weight:600;line-height:1;color:#1e1e1e;letter-spacing:-.02em}
.vx-stats span{display:block;margin-top:8px;font-size:13px;line-height:1.55;color:var(--vx-dim)}

/* specs */
.vx-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:start}
.vx-table{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--vx-line);background:#fff}
.vx-table th,.vx-table td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--vx-line-2);vertical-align:top}
.vx-table tr:last-child th,.vx-table tr:last-child td{border-bottom:0}
.vx-table th{width:34%;font-weight:600;color:var(--vx-dim);background:var(--vx-panel)}
.vx-table td{color:var(--vx-fg);font-family:var(--vx-mono);font-size:13px}
.vx-side h3{font-size:16px;margin:0 0 8px}
.vx-side h3+h3{margin-top:24px}
.vx-side p{margin:0;font-size:14.5px;line-height:1.75;color:var(--vx-mut)}

/* install */
.vx-install{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,56px);align-items:start}
.vx-flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.vx-flow li{position:relative;padding:0 0 24px 46px;border-left:1px solid var(--vx-line)}
.vx-flow li:last-child{padding-bottom:0;border-left-color:transparent}
.vx-flow b{position:absolute;left:-13px;top:0;display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:#fff;border:1px solid var(--vx-blue);color:var(--vx-blue);font-family:var(--vx-mono);font-size:12px;font-weight:400}
.vx-flow h3{font-size:16.5px;margin:2px 0 5px}
.vx-flow p{margin:0;font-size:14.5px;line-height:1.72;color:var(--vx-mut)}
.vx-term{background:#fafafa;border:1px solid var(--vx-line);overflow:hidden}
.vx-term-h{display:flex;align-items:center;gap:10px;height:32px;padding:0 12px;background:#f3f3f3;border-bottom:1px solid #e2e2e2;font-family:var(--vx-mono);font-size:11px;color:#6f6f6f}
.vx-term pre{margin:0;padding:16px;font-family:var(--vx-mono);font-size:12.5px;line-height:1.95;color:#2b2b2b;overflow-x:auto;white-space:pre}
.vx-term pre .c{color:#6f7a68}
.vx-term pre .p{color:#0b4f8a}
.vx-term-f{margin:0;padding:0 16px 16px;font-size:12.5px;line-height:1.7;color:var(--vx-dim)}
.vx-cta-center{margin-top:clamp(30px,4vw,46px)}

/* docs */
.vx-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--vx-line);border:1px solid var(--vx-line)}
.vx-docs a{background:#fff;padding:18px 18px 20px;display:flex;flex-direction:column;gap:4px;transition:background-color .14s ease}
.vx-docs a:hover{background:#f6f8fa}
.vx-docs b{font-size:14.5px;font-weight:600;color:var(--vx-fg-i)}
.vx-docs a:hover b{color:var(--vx-link)}
.vx-docs span{font-size:12.5px;line-height:1.6;color:var(--vx-dim)}

/* ---- footer ------------------------------------------------------- */
.vx-foot{background:var(--vx-panel);border-top:1px solid var(--vx-line);padding:clamp(44px,5vw,64px) 0 0}
.vx-foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(22px,3.5vw,48px);padding-bottom:clamp(30px,4vw,46px)}
.vx-foot-brand img{height:15px;width:auto;margin-bottom:14px}
.vx-foot-brand p{margin:0;max-width:38ch;font-size:13.5px;line-height:1.7;color:var(--vx-dim)}
.vx-foot-col h4{margin:0 0 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--vx-dim);font-weight:600}
.vx-foot-col a{display:block;font-size:13.5px;line-height:2;color:var(--vx-mut)}
.vx-foot-col a:hover{color:var(--vx-link);text-decoration:underline;text-underline-offset:3px}
.vx-foot-bot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 0 22px;border-top:1px solid var(--vx-line-2);font-size:12.5px;color:var(--vx-dim)}
.vx-foot-bot a:hover{color:var(--vx-link)}
.vx-gap{margin-left:auto}

/* ---- responsive --------------------------------------------------- */
@media(max-width:1024px){
  .vx-row,.vx-split,.vx-install{grid-template-columns:1fr}
  .vx-row-rev .vx-copy,.vx-row-rev .vx-visual{order:0}
  .vx-row{padding:44px 0;gap:26px}
  .vx-docs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx-foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx-foot-brand{grid-column:1/-1}
}
@media(max-width:760px){
  .vx-menu{display:none}
  .vx-nav-in{height:54px}
  .vx-hero{padding-top:46px}
  .vx-hero h1{font-size:clamp(30px,7.4vw,42px)}
  .vx-body{grid-template-columns:40px minmax(0,1fr);min-height:0}
  .vx-rail span{width:40px}
  .vx-rail svg{width:17px;height:17px}
  .vx-chat{padding:14px}
  .vx-menus,.vx-tab{display:none}
  .vx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx-docs{grid-template-columns:1fr}
  .vx-foot-bot{gap:10px}
  .vx-gap{display:none}
  .vx-steps li{grid-template-columns:16px 108px minmax(0,1fr)}
}
@media(max-width:460px){
  .vx-lang button{padding:7px 7px}
  .vx-cta{gap:10px}
  .vx-btn-lg{width:100%}
  .vx-grid-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Two columns: the marker spans both lines, tool name over its detail, so
     long identifiers like replace_in_file are never clipped. */
  .vx-steps li{grid-template-columns:16px minmax(0,1fr);row-gap:2px;font-size:12px}
  .vx-steps b{grid-column:1;grid-row:1/3;align-self:start;padding-top:2px}
  .vx-steps code{grid-column:2;grid-row:1}
  .vx-steps span{grid-column:2;grid-row:2;white-space:normal}
  .vx-status{gap:10px;font-size:10px}
}