@font-face{font-family:"Plex Sans";src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --paper:#f5f7f7;--surface:#ffffff;--ink:#1b2a33;--muted:#52636c;--rule:#d5dee1;
  --accent:#0e6e73;--accent-hover:#0a5559;--code:#17242c;--code-ink:#d6e2e6;
  --apache:#e2b35e;--ols:#7fd1c7;--quiet:#8aa0a8;--win:#8fb8f0;
  --sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans)}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
code,pre{font-family:var(--mono);font-size:.88em}
p code,li code,td code,dd code{background:#e6ecee;padding:.1em .35em;border-radius:4px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:12px;background:var(--surface);padding:8px 12px;z-index:2}

header.site{border-bottom:1px solid var(--rule);background:var(--surface)}
header.site .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{font-family:var(--mono);font-size:18px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand svg{flex:none}
nav.top{display:flex;gap:22px;margin-left:auto;font-size:15px}
nav.top a{color:var(--muted);text-decoration:none;white-space:nowrap}
nav.top a:hover{color:var(--ink)}
nav.top a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
nav.top a.gh{color:var(--ink);font-weight:600}
@media (max-width:760px){nav.top a.sec{display:none}}
@media (max-width:520px){.brand span{display:none}nav.top{gap:16px}}

.hero{padding:72px 0 56px}
.hero.solo{padding-bottom:40px}
.hero.solo .wrap{grid-template-columns:minmax(0,1fr)}
.hero.solo .lead{max-width:40em}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
h1{font-weight:600;font-size:clamp(34px,4.6vw,52px);line-height:1.08;letter-spacing:-.02em;margin:0 0 22px;text-wrap:balance}
.lead{font-size:19px;color:var(--muted);margin:0 0 30px;max-width:34em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.btn{display:inline-block;padding:11px 20px;border-radius:6px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid var(--accent)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn.plain{color:var(--accent);background:transparent}
.btn.plain:hover{background:#e3eeee}
.facts{font-size:14.5px;color:var(--muted);margin:0}

.xlate{background:var(--code);border-radius:10px;color:var(--code-ink);overflow:hidden;box-shadow:0 18px 40px -24px rgba(23,36,44,.55)}
.xlate .pane{padding:18px 20px 20px}
.xlate .pane+.pane{border-top:1px solid #2a3a44}
.xlate .file{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--quiet);margin-bottom:10px}
.xlate .file b{font-weight:600;color:var(--code-ink)}
.xlate pre{margin:0;font-size:13.5px;line-height:1.65;overflow-x:auto;white-space:pre}
.xlate .k{color:var(--apache)}
.xlate .o{color:var(--ols)}
.xlate .w{color:var(--win)}
.xlate .c{color:var(--quiet)}
@media (max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:40px}.hero{padding-top:48px}}
@media (max-width:520px){.xlate pre{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.xlate pre.keep{white-space:pre;overflow-wrap:normal}.xlate .pane{padding:16px 14px}.xlate .file span+span{display:none}.lead{font-size:18px}}

section{padding:64px 0;border-top:1px solid var(--rule)}
h2{font-weight:600;font-size:clamp(26px,3.2vw,34px);line-height:1.2;letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
.intro{color:var(--muted);max-width:40em;margin:0 0 36px}
h3{font-size:18px;font-weight:600;margin:0 0 6px}

figure.shot{margin:0}
figure.shot img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:8px;background:var(--surface)}
figure.shot figcaption{font-size:14.5px;color:var(--muted);margin-top:12px}

dl.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 56px;margin:0}
dl.features div{max-width:34em}
dl.features dt{font-weight:600;font-size:18px;margin-bottom:6px}
dl.features dd{margin:0;color:var(--muted)}
@media (max-width:760px){dl.features{grid-template-columns:1fr}}

.how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0}
ol.steps>li{counter-increment:s;position:relative;padding-left:52px;margin-bottom:28px}
ol.steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);font-weight:600;display:grid;place-items:center;font-size:16px}
ol.steps p{margin:0;color:var(--muted)}
@media (max-width:900px){.how{grid-template-columns:minmax(0,1fr)}}

table{border-collapse:collapse;width:100%;font-size:16px;background:var(--surface);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-weight:600;background:#eaf0f1}
tbody th{font-weight:600}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.yes{color:var(--accent);font-weight:600}
.tablebox{overflow-x:auto}

.code{display:flex;align-items:flex-start;background:var(--code);color:var(--code-ink);border-radius:8px;margin:12px 0 0}
.code pre{flex:1;min-width:0;margin:0;padding:16px 18px;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.code button{flex:none;margin:10px 10px 0 0;font:600 13px var(--sans);color:var(--code-ink);background:#25363f;border:1px solid #3a4c56;border-radius:5px;padding:5px 10px;cursor:pointer}
.code button:hover{background:#2f434d}
.install{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3.6fr);gap:48px}
.req{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:22px 24px;align-self:start}
.req ul{margin:0;padding-left:20px;color:var(--muted)}
.req li+li{margin-top:6px}
.req p{margin:18px 0 0;color:var(--muted);font-size:15px}
@media (max-width:900px){.install{grid-template-columns:minmax(0,1fr)}}

.modes{display:grid;grid-template-columns:minmax(0,562px) minmax(0,1fr);gap:48px;align-items:start}
.modes figure.shot img{max-width:562px}
dl.modelist{margin:0}
dl.modelist div+div{margin-top:26px}
dl.modelist dt{font-weight:600;font-size:18px;margin-bottom:6px}
dl.modelist dd{margin:0;color:var(--muted)}
@media (max-width:980px){.modes{grid-template-columns:minmax(0,1fr)}}

.projects-wrap{padding-bottom:64px}
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rule);border-radius:10px;background:var(--surface);overflow:hidden}
.project{padding:34px 34px 36px;display:flex;flex-direction:column}
.project+.project{border-left:1px solid var(--rule)}
.project h2{font-size:clamp(24px,2.6vw,30px);margin-bottom:10px}
.project h2 a{color:inherit;text-decoration:none}
.project h2 a:hover{color:var(--accent)}
.project>p{color:var(--muted);margin:0 0 22px}
.project .xlate{margin:0 0 24px}
.project .xlate pre{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.project ul{margin:0 0 26px;padding-left:20px;color:var(--muted)}
.project li+li{margin-top:4px}
.project .actions{margin:auto 0 0}
@media (max-width:900px){.projects{grid-template-columns:minmax(0,1fr)}.project+.project{border-left:0;border-top:1px solid var(--rule)}.project{padding:28px 22px 30px}}

.faq details{border-bottom:1px solid var(--rule);padding:18px 0;max-width:46em}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{font-weight:600;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:24px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:10px 0 0;color:var(--muted)}

footer.site{border-top:1px solid var(--rule);padding:36px 0 48px;font-size:14.5px;color:var(--muted)}
footer.site .wrap{display:grid;grid-template-columns:1fr auto;gap:16px 40px}
footer.site p{margin:0;max-width:52em}
footer.site nav{display:flex;flex-wrap:wrap;gap:12px 20px}
@media (max-width:760px){footer.site .wrap{grid-template-columns:1fr}}