/* Manuscripta site — shared design system.
   Tokens and page styles follow the design handoff exactly; the only
   additions are focus outlines, reduced-motion, and small-screen collapses. */

/* ---------- fonts (self-hosted; no CDN, works air-gapped) ---------- */
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;
  font-display:swap;
  src:url(/static/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;
  font-display:swap;
  src:url(/static/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root{
  --bg:#15181C; --panel:#111417; --cell-hover:#181C21;
  --border:#2C333B; --rule:#262B32; --rowline:#1C2127;
  --head:#FFFFFF; --body:#D5DAE0; --article:#B9C0C9;
  --muted:#8A93A0; --dim:#5A626C;
  --green:#6FBF8F; --green-fill:#12291C; --on-green:#0E1512;
  --blue:#5E8BC9; --blue-fill:#1A2E45;
  --amber:#D9A050;
  --red:#E07A6B; --red-fill:#3A1D1A;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--body);
  font:15px/1.55 var(--sans)}
body.article-page{line-height:1.6}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
[hidden]{display:none!important}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--rule)}
.nav-in{max-width:1120px;margin:0 auto;padding:16px 32px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.nav-in.wide{max-width:1200px}
.wordmark{font:600 17px var(--mono);letter-spacing:.02em;color:#fff;
  text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--green)}
.nav-links{display:flex;gap:22px;font-size:14px;margin-left:12px}
.nav-links a{color:var(--muted);text-decoration:none}
.nav-links a.active{color:var(--green);font-weight:600}
.nav-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.chip{font:12px var(--mono);border:1px solid var(--border);
  border-radius:999px;padding:6px 12px;color:var(--muted);white-space:nowrap;
  background:transparent}
.chip.ok::before{content:"● ";color:var(--green)}
.chip.bad::before{content:"● ";color:var(--red)}
button.chip{cursor:pointer}
button.chip:hover{border-color:var(--green)}
.btn-primary{background:var(--green);color:var(--on-green);border-radius:7px;
  padding:9px 16px;font:600 13px var(--mono);white-space:nowrap;
  text-decoration:none;border:0;cursor:pointer;display:inline-block}
.btn-primary:hover{opacity:.9}
.chip-app{border:1px solid var(--green);color:var(--green);border-radius:7px;
  padding:8px 15px;font:600 13px var(--mono);white-space:nowrap}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--rule)}
.footer-in{max-width:1120px;margin:0 auto;padding:24px 32px;display:flex;
  justify-content:space-between;gap:16px;font:12px var(--mono);
  color:var(--dim);flex-wrap:wrap}
.footer a{color:var(--dim);text-decoration:none}
.footer-links{display:flex;gap:16px}

/* ---------- shared bits ---------- */
.eyebrow{font:500 12px var(--mono);letter-spacing:.12em;color:var(--muted)}
.eyebrow.green{color:var(--green)}
.codeblock{border:1px solid var(--border);border-radius:8px;
  background:var(--panel);padding:14px 16px;
  font:12.5px/1.7 var(--mono);color:var(--muted);overflow-x:auto}
.codeblock .p{color:var(--blue)}
.codeblock .ok{color:var(--green)}
.codeblock .cm{color:var(--dim)}
.codeblock .lit{color:var(--body)}
.codeblock .ind{padding-left:16px}
.cta-row{display:flex;gap:12px;align-items:center;border:1px solid var(--border);
  border-radius:8px;padding:16px 18px;background:var(--panel)}
.cta-row>span{font-size:14px;color:var(--muted)}
.cta-row .btn-primary{margin-left:auto;padding:10px 16px}
code.k{font:13px var(--mono);color:var(--green)}
code.k.red{color:var(--red)}

/* ---------- landing ---------- */
.hero{max-width:1120px;margin:0 auto;padding:76px 32px 60px;display:grid;
  grid-template-columns:1fr 500px;gap:56px;align-items:start}
.hero-left{padding-top:8px}
.hero-left .eyebrow{margin-bottom:18px}
.hero h1{margin:0 0 18px;font:600 44px/1.18 var(--sans);
  letter-spacing:-.5px;color:#fff;text-wrap:balance}
.hero-lede{margin:0 0 28px;font-size:16.5px;color:var(--muted);
  max-width:46ch;text-wrap:pretty}
.hero-ctas{display:flex;gap:12px;align-items:center;margin-bottom:30px}
.btn-white{background:#fff;color:var(--bg);border-radius:7px;padding:12px 20px;
  font:600 14px var(--sans);white-space:nowrap;text-decoration:none}
.btn-white:hover{opacity:.9}
.btn-ghost-mono{border:1px solid var(--border);border-radius:7px;
  padding:12px 20px;font:600 14px var(--mono);color:var(--body);
  white-space:nowrap;text-decoration:none}
.btn-ghost-mono:hover{opacity:.9}
.console-card{border:1px solid var(--border);border-radius:10px;
  overflow:hidden;background:var(--panel);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.console-card .bar{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--border)}
.console-card .bar .d{width:9px;height:9px;border-radius:50%;
  background:var(--border);flex:none}
.console-card .bar .t{font:11px var(--mono);color:var(--muted);margin-left:6px}
.mini-badge{font:600 10px var(--mono);border-radius:4px;padding:3px 7px;
  letter-spacing:.08em;white-space:nowrap}
.mini-badge.running{margin-left:auto;background:var(--blue-fill);color:var(--blue)}
.mini-badge.succeeded{background:var(--green-fill);color:var(--green)}
.console-card .body{padding:16px;font:12.5px/1.75 var(--mono)}
.console-card .foot{border-top:1px solid var(--border);padding:11px 16px;
  display:flex;gap:8px;align-items:center}
.console-card .dl{margin-left:auto;font:12px var(--mono);color:var(--body);
  border:1px solid var(--border);border-radius:6px;padding:6px 10px;
  white-space:nowrap}
.ln-eng{color:var(--blue)} .ln-dim{color:var(--muted)}
.ln-ok{color:var(--green)} .ln-warn{color:var(--amber)}
.ln-plain{color:var(--body)}
.eqstrip{border-top:1px solid var(--rule);background:var(--panel)}
.eqstrip-in{max-width:1120px;margin:0 auto;padding:36px 32px;display:grid;
  grid-template-columns:1fr 60px 1fr;align-items:center;gap:12px}
.eqstrip .src{font:13.5px/1.8 var(--mono);color:var(--green);text-align:right}
.eqstrip .arr{text-align:center;font-size:20px;color:var(--muted)}
.eqstrip .out{display:flex;align-items:center;gap:8px;
  font:italic 18px Georgia,'Times New Roman',serif;color:#fff}
.eqstrip .frac{display:inline-flex;flex-direction:column;align-items:center;
  line-height:1.15;font-size:15px}
.eqstrip .frac .den{border-top:1.5px solid #fff;padding:1px 6px 0}
.eqstrip .note{font:12px var(--mono);color:var(--muted);
  font-style:normal;padding-left:8px}
.convrow{border-top:1px solid var(--rule)}
.convrow-in{max-width:1120px;margin:0 auto;padding:48px 32px}
.convrow-in .eyebrow{display:block;margin-bottom:18px}
.convgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:10px;
  overflow:hidden}
.convgrid a{background:var(--bg);padding:24px 22px;text-decoration:none;
  display:block}
.convgrid a:hover{background:var(--cell-hover)}
.convgrid .tag{font:600 11px var(--mono);letter-spacing:.08em;
  margin-bottom:10px}
.convgrid .tag.green{color:var(--green)} .convgrid .tag.blue{color:var(--blue)}
.convgrid .name{font:600 16px var(--sans);color:#fff;margin-bottom:6px}
.convgrid p{margin:0;font-size:13.5px;color:var(--muted);text-wrap:pretty}
.selfhost{max-width:1120px;margin:0 auto;padding:44px 32px 56px;display:flex;
  gap:40px;align-items:center;flex-wrap:wrap}
.selfhost .big{font:600 20px var(--sans);color:#fff;flex:none}
.selfhost .blurb{font-size:14px;color:var(--muted);max-width:56ch;
  text-wrap:pretty}
.selfhost .btn-primary{margin-left:auto;padding:11px 18px}

/* ---------- article pages (how it works / docs / about) ---------- */
.article-head{margin:0 auto;padding:60px 32px 8px}
.article-head.w780{max-width:780px} .article-head.w840{max-width:840px}
.article-head.pad64{padding-top:64px;padding-bottom:12px}
.article-head .eyebrow{display:block;margin-bottom:16px}
.article-head h1{margin:0 0 14px;font:600 38px/1.18 var(--sans);
  letter-spacing:-.5px;color:#fff;text-wrap:balance}
.article-head h1.big{font-size:40px}
.article-head .lede{margin:0;font-size:16px;color:var(--muted);
  max-width:56ch;text-wrap:pretty}
.article-head.w840 .lede{max-width:58ch}
.article{margin:0 auto;padding:36px 32px 72px}
.article.w780{max-width:780px} .article.w840{max-width:840px}
.sect{border-top:1px solid var(--rule);padding:26px 0 38px}
.sect.tight{padding-bottom:34px}
.sect.last{padding-bottom:10px}
.sect-head{display:flex;gap:14px;align-items:baseline;margin-bottom:14px}
.sect-head .num{font:600 13px var(--mono)}
.sect-head h2{margin:0;font:600 24px var(--sans);color:#fff}
.sect-head .tag{margin-left:auto;font:600 11px var(--mono);
  letter-spacing:.08em}
.c-green{color:var(--green)} .c-blue{color:var(--blue)}
.c-amber{color:var(--amber)} .c-red{color:var(--red)}
.sect h2.plain{margin:0 0 12px;font:600 22px var(--sans);color:#fff}
.sect p{margin:0 0 14px;color:var(--article);text-wrap:pretty}
.sect p.tail{margin-bottom:0}
.sect p.pre-fig{margin-bottom:16px}
.sect b{color:#fff}
.fig{border:1px solid var(--border);border-radius:8px;background:var(--panel);
  padding:14px 16px;font:12.5px/1.8 var(--mono)}
.fig .c1{color:var(--green)} .fig .c2{color:var(--amber)}
.fig .cm{color:var(--muted)} .fig .lit{color:var(--body)}
.codeblock.lh18{line-height:1.8}
.after-note{margin:14px 0 0;color:var(--muted);font-size:13.5px;
  text-wrap:pretty}
.after-note code.k{font-size:12.5px}

/* ---------- docs tables ---------- */
.dtable{border:1px solid var(--border);border-radius:10px;overflow:hidden;
  font:12.5px/1.5 var(--mono)}
.dtable .thead{display:grid;padding:9px 14px;background:var(--panel);
  border-bottom:1px solid var(--rule);color:var(--dim);font-weight:600;
  letter-spacing:.08em;font-size:10.5px;text-transform:uppercase}
.dtable .trow{display:grid;padding:9px 14px;
  border-bottom:1px solid var(--rowline)}
.dtable .trow:last-child{border-bottom:0}
.dtable.endpoints .thead,.dtable.endpoints .trow{
  grid-template-columns:70px 260px 1fr}
.dtable.config .thead,.dtable.config .trow{
  grid-template-columns:300px 90px 1fr}
.dtable .get{color:var(--green)} .dtable .post{color:var(--amber)}
.dtable .del{color:var(--red)}
.dtable .path{color:var(--body)} .dtable .val{color:var(--muted)}
.dtable .desc{color:var(--muted);font-family:var(--sans);font-size:13px}
.sect .cta-row{margin-top:24px}

/* ---------- about faq ---------- */
.faq{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.faq .qa{padding:18px 20px;border-bottom:1px solid var(--rule)}
.faq .qa:last-child{border-bottom:0}
.faq .q{font:600 15px var(--sans);color:#fff;margin-bottom:6px}
.faq p{margin:0;font-size:14px;color:var(--muted);text-wrap:pretty}
.faq a{color:var(--green)}

/* ---------- contact / self-hosting ---------- */
.contact{max-width:1120px;margin:0 auto;padding:60px 32px 72px;display:grid;
  grid-template-columns:1fr 520px;gap:64px;align-items:start}
.contact-left{padding-top:8px}
.contact-left .eyebrow{display:block;margin-bottom:16px}
.contact-left h1{margin:0 0 16px;font:600 38px/1.18 var(--sans);
  letter-spacing:-.5px;color:#fff;text-wrap:balance}
.contact-left .lede{margin:0 0 28px;font-size:16px;color:var(--muted);
  max-width:48ch;text-wrap:pretty}
.props{display:flex;flex-direction:column;gap:14px;max-width:460px}
.props .prop{display:flex;gap:12px;align-items:baseline}
.props .num{font:600 12px var(--mono);color:var(--green);flex:none}
.props b{color:#fff;font-size:14px}
.props .sub{font-size:13.5px;color:var(--muted)}
.contact-left .codeblock{margin-top:30px;max-width:460px}
.form-panel{background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:26px}
.form-panel .fhead{font:600 11px var(--mono);letter-spacing:.1em;
  color:var(--green);margin-bottom:18px}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-bottom:14px}
.f-field{margin-bottom:14px}
.form-2col .f-field{margin-bottom:0}
.f-label{font:600 13px var(--sans);color:var(--body);margin-bottom:6px}
.f-label.pillhead{margin-bottom:8px}
.f-label .req{color:var(--red)}
.f-input,.f-area{width:100%;border:1px solid var(--border);border-radius:7px;
  padding:10px 12px;font:13.5px var(--sans);background:var(--bg);
  color:var(--body)}
.f-area{resize:vertical;font-family:var(--sans)}
.f-input::placeholder,.f-area::placeholder{color:var(--dim)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;font:12.5px var(--sans);
  cursor:pointer;padding:7px 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--panel);color:var(--body)}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill:has(input:checked){border-color:var(--green);
  background:var(--green-fill);color:var(--green);font-weight:600}
.f-msg{margin-bottom:18px}
.btn-run{display:block;width:100%;margin-top:8px;background:var(--green);
  color:var(--on-green);border:0;border-radius:7px;padding:13px;
  text-align:center;font:600 13.5px var(--mono);cursor:pointer}
.btn-run:hover{opacity:.9}
.btn-run:disabled{opacity:.45;cursor:not-allowed}
.form-panel .btn-run{margin-top:0}
.formerr{color:var(--red);font:13px var(--sans);margin-top:10px;display:none}
.sent{text-align:center;padding:48px 12px}
.sent .check{font:600 40px var(--mono);color:var(--green);margin-bottom:14px}
.sent .head{font:600 18px var(--sans);color:#fff;margin-bottom:8px}
.sent p{margin:0 0 22px;font-size:14px;color:var(--muted)}
.btn-again{font:600 13px var(--mono);color:var(--green);cursor:pointer;
  border:1px solid var(--border);border-radius:7px;padding:9px 14px;
  display:inline-block;background:transparent}
.hp-field{display:none}

/* ---------- app page ---------- */
.app-main{max-width:1200px;margin:0 auto;padding:30px 32px 70px;display:grid;
  grid-template-columns:440px 1fr;gap:34px;align-items:start}
.col-label{font:500 12px var(--mono);letter-spacing:.12em;color:var(--muted);
  margin-bottom:14px}
.card{background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:16px 18px 14px;margin-bottom:12px;cursor:pointer}
.card[aria-pressed="true"]{border-color:var(--green);
  box-shadow:0 0 0 1px var(--green)}
.card .dir{display:inline-block;font:600 10.5px var(--mono);
  letter-spacing:.06em;padding:3px 8px;border-radius:4px}
.card .dir.t2d{background:var(--green-fill);color:var(--green)}
.card .dir.d2t{background:var(--blue-fill);color:var(--blue)}
.card h3{font:600 16px var(--sans);color:#fff;margin:10px 0 4px}
.card p{margin:0;font:13px/1.55 var(--sans);color:var(--muted);
  text-wrap:pretty}
form#convform{background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:20px 20px 18px;margin-top:18px;display:none}
form#convform .fhead{font:600 11px var(--mono);letter-spacing:.1em;
  color:var(--green);margin-bottom:16px}
.field{margin-bottom:14px}
.field .f-label{font-size:13.5px}
.drop{border:1.5px dashed var(--border);border-radius:7px;padding:10px 12px;
  display:flex;align-items:center;gap:10px;background:var(--bg);
  cursor:pointer}
.drop:hover,.drop.over{border-color:var(--green)}
.drop input[type=file]{display:none}
.drop .ext{font:600 10.5px var(--mono);color:var(--muted);
  border:1px solid var(--border);border-radius:4px;padding:2px 6px;
  background:var(--panel);flex:none}
.drop .fname{font:13px var(--mono);color:var(--body);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.drop .fname.empty{color:var(--dim);font-family:var(--sans)}
.field .help{font:12px var(--sans);color:var(--dim);margin-top:4px}
.opts{border-top:1px solid var(--rule);margin-top:16px;padding-top:14px}
.opt{display:flex;align-items:center;gap:12px;margin-bottom:12px;
  flex-wrap:wrap}
.opt>label:first-child,.opt .olabel{font:13.5px var(--sans);
  color:var(--body);flex:1;min-width:140px}
.opt .pill{padding:6px 14px}
.opt input[type=checkbox]{width:16px;height:16px;accent-color:var(--green)}
.opt input[type=number]{width:90px;border:1px solid var(--border);
  border-radius:6px;padding:6px 8px;font:13px var(--mono);
  background:var(--bg);color:var(--body)}
.console-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;
  min-height:24px}
.console-head .col-label{margin-bottom:0}
.badge{font:600 10px var(--mono);letter-spacing:.08em;padding:3px 8px;
  border-radius:4px;white-space:nowrap;text-transform:uppercase}
.badge.queued{background:var(--rule);color:var(--muted)}
.badge.running{background:var(--blue-fill);color:var(--blue)}
.badge.succeeded{background:var(--green-fill);color:var(--green)}
.badge.failed,.badge.interrupted{background:var(--red-fill);color:var(--red)}
.console-head .meta{font:12px var(--mono);color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
pre#log{background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:18px;min-height:250px;max-height:430px;
  overflow:auto;font:12.5px/1.75 var(--mono);color:var(--body);
  white-space:pre-wrap;word-break:break-word;margin:0}
pre#log .ok{color:var(--green)} pre#log .warn{color:var(--amber)}
pre#log .err{color:var(--red)} pre#log .dim{color:var(--muted)}
pre#log .eng{color:var(--blue)}
.console-empty{color:var(--dim);font-style:italic}
#outputs{margin-top:18px;display:none}
.files{display:flex;flex-wrap:wrap;gap:8px}
a.file{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid var(--border);background:var(--panel);border-radius:7px;
  padding:9px 13px;color:var(--body);font:13px var(--mono);cursor:pointer}
a.file:hover{border-color:var(--green)}
a.file.primary{border-color:var(--green)}
a.file .sz{color:var(--dim);font-size:11.5px}
a.zip{font-family:var(--sans);font-weight:600}
#recent{margin-top:28px}
.jobs-panel{background:var(--panel);border:1px solid var(--border);
  border-radius:10px;overflow:hidden}
.jhead,.jrow{display:grid;grid-template-columns:120px 130px 1fr 70px 110px;
  padding:9px 14px}
.jhead{border-bottom:1px solid var(--rule);background:var(--bg);
  font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim)}
.jrow{border-bottom:1px solid var(--rowline);font:13px var(--sans);
  align-items:baseline;cursor:pointer}
.jrow:last-child{border-bottom:0}
.jrow:hover{background:var(--cell-hover)}
.jrow .status{color:var(--body)}
.jrow .mono{font:12px var(--mono);color:var(--body)}
.jrow .inputs{font:12px var(--mono);color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.jrow .id{font:12px var(--mono);color:var(--dim)}
.jrow.none{color:var(--muted);cursor:default;display:block}
.jrow.none:hover{background:transparent}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:7px}
.dot.succeeded{background:var(--green)}
.dot.failed,.dot.interrupted{background:var(--red)}
.dot.running{background:var(--blue)} .dot.queued{background:var(--muted)}

/* ---------- API-key gate ---------- */
.gate-overlay{position:fixed;inset:0;z-index:50;display:flex;
  align-items:center;justify-content:center;background:rgba(0,0,0,.55)}
.gate-card{background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:26px;width:min(430px,92vw);
  box-shadow:0 20px 50px rgba(0,0,0,.45)}
.gate-card .wordmark{font-size:17px;display:inline-block;margin-bottom:14px}
.gate-card h2{margin:0 0 6px;font:600 15px var(--sans);color:#fff;
  letter-spacing:.08em}
.gate-card p{margin:0 0 14px;color:var(--muted);font-size:13.5px}
.gate-card input{width:100%;border:1px solid var(--border);border-radius:7px;
  padding:10px 12px;font:13px var(--mono);background:var(--bg);
  color:var(--body);margin-bottom:12px}
.gate-card input::placeholder{color:var(--dim)}

/* ---------- small screens ---------- */
@media (max-width:960px){
  .hero,.contact,.app-main{grid-template-columns:1fr;gap:36px}
  .convgrid{grid-template-columns:1fr}
  .eqstrip-in{grid-template-columns:1fr;gap:16px}
  .eqstrip .src{text-align:left}
  .eqstrip .arr{text-align:left}
  .eqstrip .out{flex-wrap:wrap}
  .selfhost .btn-primary{margin-left:0}
  .nav-links{gap:16px}
  .jhead,.jrow{grid-template-columns:96px 100px 1fr 54px 90px}
}