/* deskstitch.com — generated by v2/design/site-build.py */
:root {
  --bg:#141619; --band:#1a1d22; --surface:#1e2127; --surface2:#242830; --line:#2b3038; --line2:#3a4150;
  --text:#eceef2; --muted:#9aa1b0; --dim:#5b6273; --blue:#4a78c8; --green:#4a9e6a; --ok:#5fcf8a; --amber:#ffb14a; --link:#6fa5f6;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,sans-serif; --display:Manrope,"Segoe UI",system-ui,sans-serif; --mono:"IBM Plex Mono",Consolas,monospace;
  color-scheme: dark;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:0; text-wrap:balance; }
h1 { font-size:clamp(34px, 5.2vw, 58px); }
h2 { font-size:clamp(26px, 3.4vw, 40px); }
h3 { font-size:19px; }
p { margin:0; }
p, li { text-wrap:pretty; }
a { color:var(--link); text-decoration:none; }
a:hover { color:var(--text); }
:focus-visible { outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; }
img, picture { max-width:100%; min-width:0; }
.frame, picture { min-width:0; }
picture img { display:block; width:100%; height:auto; }
code, kbd { font-family:var(--mono); font-size:.88em; }
code { background:var(--surface2); padding:.1em .4em; border-radius:4px; }
kbd { background:var(--surface2); border:1px solid #363c47; border-bottom-width:2px; border-radius:5px; padding:1px 7px; color:var(--text); }
table { border-collapse:collapse; width:100%; font-size:15px; }
th, td { text-align:left; padding:10px 12px; border-top:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.dim { color:var(--dim); }
.muted { color:var(--muted); }
.wrap { width:min(1080px, 100% - 48px); margin-inline:auto; }
.narrow { width:min(760px, 100% - 48px); }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.skip { position:absolute; left:-999px; top:8px; background:var(--amber); color:var(--bg); padding:8px 12px; border-radius:6px; z-index:10; }
.skip:focus { left:8px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 22px; border-radius:8px; font-weight:600; font-size:16px; color:var(--text); border:1px solid var(--line); background:var(--surface); transition:border-color .15s, background .15s, transform .15s; }
.btn:hover { color:var(--text); border-color:var(--line2); background:var(--surface2); }
.btn.primary { background:var(--amber); color:var(--bg); border-color:var(--amber); }
.btn.primary:hover { background:#ffc06a; color:var(--bg); }
.btn.small { height:40px; padding:0 16px; font-size:14px; }
.btn .hint { font-family:var(--mono); font-size:12px; opacity:.7; }
button.btn { font-family:inherit; cursor:pointer; width:100%; }
form.buy { margin:0; }
.key { font-family:var(--mono); font-size:14px; word-break:break-all; white-space:pre-wrap; background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin:0; }
.field { display:flex; gap:10px; }
.field input { flex:1; min-width:0; height:48px; padding:0 14px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--text); font:inherit; }
.field input:focus { outline:2px solid var(--amber); outline-offset:2px; }

.logo { display:inline-grid; grid-template-columns:8px 14px 14px; grid-template-rows:14px 14px; gap:2px; align-items:end; }
.logo i { display:block; border-radius:2px; background:var(--green); width:100%; height:100%; }
.logo i.c { grid-row:1/3; height:22px; align-self:center; }
.logo i.b { background:var(--blue); }
.brand { display:inline-flex; align-items:center; gap:12px; font-family:var(--display); font-weight:800; font-size:21px; color:var(--text); }

.top nav { display:flex; align-items:center; justify-content:space-between; gap:24px; height:76px; }
.top .links { display:flex; align-items:center; gap:28px; margin-left:auto; }
.top .links a { color:var(--muted); font-weight:500; font-size:15px; }
.top .links a:hover, .top .links a[aria-current] { color:var(--text); }

section { padding:64px 0; }
.stack { display:flex; flex-direction:column; gap:12px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:28px; }
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.grid4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.grid2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
a.card { display:flex; flex-direction:column; gap:6px; color:var(--text); transition:border-color .15s, background .15s; }
a.card:hover { border-color:var(--line2); background:var(--surface2); }
a.card .muted { font-size:14px; }
.frame { border-radius:10px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.55); background:#0f1114; }
.pill { display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px 0 10px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:13px; color:var(--muted); width:max-content; }
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(95,207,138,.18); }
.num { font-family:var(--mono); font-size:34px; font-weight:500; letter-spacing:-.02em; }
.num small { font-size:16px; color:var(--muted); font-weight:400; }
.num .vs { color:var(--dim); }
.callout { display:flex; gap:16px; padding:22px 24px; border-radius:12px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--amber); }
.callout > svg { flex:none; margin-top:2px; color:var(--amber); }
.callout.ok { border-left-color:var(--green); }
.callout p { font-size:15px; color:var(--muted); }
.icon { width:40px; height:40px; border-radius:10px; background:var(--surface2); display:inline-flex; align-items:center; justify-content:center; color:var(--amber); }
.steps { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.steps .n, .n { font-family:var(--mono); color:var(--amber); font-size:13px; }
.check { display:flex; gap:10px; align-items:center; color:var(--ok); }
.check span { color:var(--text); }

/* hero */
.hero { display:grid; grid-template-columns:520px minmax(0,1fr); gap:56px; align-items:center; padding:64px 0 88px; }
.hero .copy { display:flex; flex-direction:column; gap:26px; }
.hero .lede { font-size:19px; color:var(--muted); max-width:34em; }
.hero .cta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero .line { font-family:var(--mono); font-size:13px; color:var(--muted); }
.band { background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:80px 0; margin-top:32px; }
.split { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:56px; align-items:center; }
.split.rev { grid-template-columns:minmax(0,1fr) 360px; }
.split.rev .frame { order:2; }
.pricing { display:grid; grid-template-columns:minmax(0,1fr) 460px; gap:56px; align-items:center; padding:80px 0; }
.price { display:flex; flex-direction:column; gap:22px; padding:36px; border-color:var(--line2); background:linear-gradient(180deg,#22262e,var(--surface)); }
.price .big { display:flex; align-items:baseline; gap:12px; }
.price .big b { font-family:var(--display); font-weight:800; font-size:46px; letter-spacing:-.03em; }
.price .sub { display:flex; align-items:baseline; gap:12px; padding-top:18px; border-top:1px solid var(--line); }
.price .sub b { font-family:var(--mono); font-weight:500; font-size:26px; }
.price ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15px; }
.price .actions { display:flex; flex-direction:column; gap:10px; }
.faq { display:grid; grid-template-columns:360px minmax(0,1fr); gap:32px; padding:24px 0; border-top:1px solid var(--line); }
.faq p { color:var(--muted); }
.limits { display:grid; grid-template-columns:320px minmax(0,1fr); gap:56px; padding-bottom:0; }
.limits ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; color:var(--muted); font-size:15px; }

/* download */
.dl { display:flex; flex-direction:column; gap:14px; }
.dl p { min-height:48px; }
.dl .file { display:flex; flex-direction:column; gap:2px; font-size:12px; }
.then { display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:56px; align-items:start; }
.then ol { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:18px; }
.then li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; }
.then li span.t { color:var(--muted); }

/* docs */
.docs { display:grid; grid-template-columns:240px minmax(0,1fr); gap:72px; padding:40px 0 0; align-items:start; }
.docs aside { position:sticky; top:24px; display:flex; flex-direction:column; gap:14px; }
.docs aside .pages { display:flex; flex-direction:column; gap:2px; font-weight:500; }
.docs aside .pages a { color:var(--muted); font-size:15px; }
.docs aside .pages a[aria-current] { color:var(--text); }
.docs aside .toc { display:flex; flex-direction:column; }
.docs aside .toc a { font-size:14px; color:var(--muted); padding:6px 0 6px 14px; border-left:2px solid var(--line); }
.docs aside .toc a:hover { color:var(--text); border-left-color:var(--amber); }
.docs article { max-width:720px; display:flex; flex-direction:column; }
.docs article > header { display:flex; flex-direction:column; gap:14px; padding-bottom:36px; }
.docs article > header p { font-size:18px; color:var(--muted); }
.docs .step { display:flex; flex-direction:column; gap:14px; padding:8px 0 40px; scroll-margin-top:24px; }
.docs .step h2 { font-size:26px; }
.docs .step .h { display:flex; align-items:baseline; gap:14px; }
.docs .step p, .docs .step li { color:var(--muted); }
.docs .step strong { color:var(--text); }
.docs .step ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.docs .frame { margin-top:6px; }
.docs h2.plain { font-size:26px; padding:24px 0 16px; scroll-margin-top:24px; }
.docs .qa { display:flex; flex-direction:column; gap:10px; padding:20px 0; border-top:1px solid var(--line); scroll-margin-top:24px; }
.docs .qa h3 { font-size:19px; }
.docs .qa p, .docs .qa li { color:var(--muted); font-size:16px; }
.docs .qa ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }

/* legal / changelog / articles */
.legal { display:flex; flex-direction:column; gap:28px; padding:56px 0 0; }
.legal header { display:flex; flex-direction:column; gap:14px; }
.legal header p { font-size:18px; color:var(--muted); }
.legal h3 { font-size:19px; }
.legal .sec { display:flex; flex-direction:column; gap:8px; }
.legal .sec p, .legal .sec li { color:var(--muted); }
.legal ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.release { display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; padding:24px 0; border-top:1px solid var(--line); }
.release .v { display:flex; flex-direction:column; gap:4px; }
.release .v b { font-family:var(--mono); font-weight:500; font-size:18px; }
.release ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; color:var(--muted); }
.article { display:flex; flex-direction:column; gap:32px; padding:56px 0 0; }
.article header { display:flex; flex-direction:column; gap:14px; }
.article header p { font-size:19px; color:var(--muted); }
.article h2 { font-size:28px; padding-top:8px; }
.article .sec { display:flex; flex-direction:column; gap:12px; }
.article .sec p, .article .sec li { color:var(--muted); }
.article ul, .article ol { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.article strong { color:var(--text); }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.cmp { min-width:640px; }
.cmp th, .cmp td { padding:12px 16px; }
.cmp thead th { border-top:0; color:var(--text); font-weight:600; font-family:var(--display); font-size:16px; }
.cmp thead th:nth-child(2) { color:var(--amber); }
.cmp tbody th { color:var(--text); font-weight:500; width:22%; }
.cmp td { color:var(--muted); }
.cmp td.yes { color:var(--text); }
.cmp td.yes::before { content:"✓ "; color:var(--ok); }
.cmp td.no { color:var(--muted); }
.cta-card { display:flex; flex-direction:column; gap:14px; padding:32px; border-color:var(--line2); background:linear-gradient(180deg,#22262e,var(--surface)); }
.cta-card .actions { display:flex; gap:12px; flex-wrap:wrap; }
.cta-card .actions .btn { width:auto; }

/* 404 */
.nf { display:grid; grid-template-columns:minmax(0,1fr) 520px; gap:56px; align-items:center; padding:96px 0 80px; }
.nf .copy { display:flex; flex-direction:column; gap:20px; }
.nf .lede { font-size:18px; color:var(--muted); }
.nf .cta { display:flex; gap:14px; flex-wrap:wrap; }
.nf svg { width:100%; height:auto; }

/* footer */
.foot { border-top:1px solid var(--line); margin-top:96px; padding:40px 0 48px; }
.foot .cols { display:flex; justify-content:space-between; align-items:flex-start; gap:40px; font-size:14px; }
.foot .about { display:flex; flex-direction:column; gap:10px; max-width:260px; }
.foot .about .brand { font-size:17px; }
.foot .about p { color:var(--muted); }
.foot .about .mono { font-size:12px; }
.foot .langs { font-size:13px; }
.foot .langs a[aria-current] { color:var(--text); }
.foot .col { display:flex; flex-direction:column; gap:8px; }
.foot .col .eyebrow { color:var(--muted); }

@media (max-width: 960px) {
  .hero, .split, .split.rev, .pricing, .then, .docs, .nf, .limits, .faq { grid-template-columns:minmax(0,1fr); }
  .split.rev .frame { order:0; }
  .grid3, .steps { grid-template-columns:minmax(0,1fr); }
  .grid4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .top .links { display:none; }
  .docs aside { position:static; }
  .docs aside .toc { display:none; }
  .foot .cols { flex-direction:column; gap:28px; }
  .foot .about { max-width:none; }
  section { padding:48px 0; }
  .hero { padding:32px 0 56px; }
  .band { padding:56px 0; }
  .pricing { padding:56px 0; }
  .nf { padding:56px 0 40px; }
}
@media (max-width: 600px) {
  body { font-size:16px; }
  .hero .lede { font-size:17px; }
  .num { font-size:28px; }
  .price .big b { font-size:38px; }
  .card { padding:22px; }
  .release { grid-template-columns:1fr; gap:8px; }
  .grid4, .grid2 { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .btn { transition:none; } }