/* Term marketing site — shared design system (see web/README.md).
   Dark is the default; the light palette overrides under prefers-color-scheme.
   Pages link this first, then keep only their page-specific rules in an inline <style>. */

/* Iosevka Term — the terminal-flavoured monospace, self-hosted (relative URL works both from the
   deploy docroot and a local file:// preview). Only a regular weight ships; bold is synthesised. */
@font-face{
  font-family:'Iosevka Term';
  src:url('../fonts/losevka-term-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* dark (default) */
  --bg:#0a0a0b; --ink:#f0f0f1; --muted:#8c8c93; --faint:#54545c;
  --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.04); --code-bg:#141416;
  --cta:#0a84ff; --cta-hi:#3b9bff; --cta-glow:rgba(10,132,255,.40); --good:#5be8a0;
  --mono:"Iosevka Term",ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,monospace;
  --sans:HarmonyOSHans-Regular,HarmonyOSHans-fallback,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --w:600px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#fbfbfc; --ink:#0d0d10; --muted:#6a6a72; --faint:#a1a1aa;
    --line:rgba(0,0,0,.10); --card:rgba(0,0,0,.025); --code-bg:#f4f4f6;
    --cta:#0071e3; --cta-hi:#0077ed; --cta-glow:rgba(0,113,227,.30); --good:#12995e;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.62;
  -webkit-font-smoothing:antialiased;font-size:15px;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
/* left/right gutters only — pages set their own vertical rhythm on header/section */
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding-left:22px;padding-right:22px}
.mono{font-family:var(--mono)}

/* App Store-style install CTA: filled system-blue pill, gentle press */
.btn{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:980px;
  background:var(--cta);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.14);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,transform .12s ease,box-shadow .18s ease}
.btn:hover{background:var(--cta-hi);box-shadow:0 5px 15px var(--cta-glow)}
.btn:active{transform:scale(.96);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.btn svg{width:12px;height:12px;margin-top:-1px}

/* sub-page header — the home page overrides all of these inline */
header{padding:34px 0 6px;text-align:center}
.back{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--muted);
  margin-bottom:30px;transition:color .15s}
.back:hover{color:var(--ink)}
h1{font-family:var(--mono);font-size:27px;letter-spacing:-.02em;font-weight:600}
.sub{color:var(--muted);margin:12px auto 0;max-width:440px;font-size:14px}

section{padding:48px 0 0}
/* hairline-flanked section eyebrow; .rec marks the recommended option (mirrors the in-app pill) */
.lbl{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:22px;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--muted)}
.lbl::before,.lbl::after{content:"";flex:none;width:26px;height:1px;background:var(--line)}
.lbl .rec{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--good);
  border:1px solid var(--good);border-radius:8px;padding:1px 7px}

p.lead{color:var(--muted);font-size:14px;margin:0 0 6px}
p.lead b{color:var(--ink);font-weight:600}
p.lead code, .ic{font-family:var(--mono);font-size:.92em;background:var(--card);border:1px solid var(--line);
  border-radius:6px;padding:1px 5px;color:var(--ink)}

/* hairline feature/link list */
ul.feat{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
ul.feat li{padding:16px 2px;border-bottom:1px solid var(--line)}
ul.feat h3{font-family:var(--mono);font-size:14px;font-weight:600}
ul.feat p{color:var(--muted);font-size:13.5px;margin-top:2px}

/* platform/capability chips; .soon reads as tentative (dashed hairline, fainter ink) */
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.chips span{padding:5px 11px;border:1px solid var(--line);border-radius:999px}
.chips span.soon{color:var(--faint);border-style:dashed}

/* code block with a mono title bar */
.code{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--code-bg);overflow:hidden}
.code .bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.code .bar a{color:var(--cta)}
.code pre{margin:0;padding:14px;overflow-x:auto;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--ink)}
.code .c{color:var(--muted)}

ol.steps{margin:14px 0 0;padding-left:20px;color:var(--ink);font-size:13.5px}
ol.steps li{margin:8px 0;padding-left:4px;color:var(--muted)}
ol.steps b{color:var(--ink);font-weight:600}
ol.steps code{font-family:var(--mono);font-size:.9em;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 5px}

/* screenshot card — one figure rule for every page, so the border, the radius and the caption
   cannot drift between /benchmark and /faqs. Pages add only their own sizing (.shots, .shot). */
figure{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
figure img{display:block;width:100%;height:auto}
figcaption{padding:10px 12px;font-size:12px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line)}
figcaption b{color:var(--ink);font-weight:600}
/* captions quote commands and tmux labels; chip them exactly like p.lead code above, or the UA
   monospace default renders them smaller than the surrounding text and with no card at all */
figcaption code{font-family:var(--mono);font-size:.92em;background:var(--card);border:1px solid var(--line);
  border-radius:6px;padding:1px 5px;color:var(--ink)}

.refs{margin-top:16px;font-size:12.5px;color:var(--muted)}
.refs a{color:var(--cta);border-bottom:1px solid transparent;transition:border-color .15s}
.refs a:hover{border-color:var(--cta)}

footer{margin-top:64px;border-top:1px solid var(--line);padding:24px 0 48px;text-align:center;
  font-family:var(--mono);font-size:11.5px;color:var(--faint)}
footer a{color:var(--muted);transition:color .15s}
footer a:hover{color:var(--ink)}

/* Language switcher. It sits under the footer sitemap on every page because it is the only way to
   reach the other two locale trees, and each entry names its language in that language. The current
   locale is a plain span, not a link back to the page you are already on. */
.langs{margin-top:10px}
.langs span{color:var(--ink)}