/* ============================================================================
   S3RVER product page. Scoped by body.s3rver / .accent-cobalt; tokens, header,
   switcher, footer and base type all come from styles.css.
   ============================================================================ */
/* Tokens are the live site's. --accent stays brand blue at :root so the header
   mark and wordmark dot render exactly as they do everywhere else; the product
   accent is applied by a scope class, the same way .accent-coral works. */
/* per-product accent scope — the site's own mechanism */
.accent-cobalt{--accent:var(--cobalt);--accent-ink:var(--cobalt-ink);--accent-soft:var(--cobalt-soft)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
/* .container itself comes from styles.css (width:min(maxw,100%-gutter*2) +
   margin-inline:auto) — this page must not redeclare it. It did, with a
   different technique (max-width + its own padding-left/right), which
   layered an extra gutter's worth of inset inside the one styles.css
   already applies: this page's content column rendered narrower than every
   other page's, though still centered on the same axis. */
h1,h2,h3{margin:0;font-weight:680;letter-spacing:-.032em;line-height:1.06}
p{margin:0}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
/* ---- site header ---- */
/* The company mark is the seat grid with the centre lit in coral — the
   platform design language's own device. Geometry is fixed: 32-unit canvas,
   8.4 cells, 2.6 radius, at 2 / 11.8 / 21.6 on both axes. */
/* ---- the app's wordmark, inherited from LiveWordmark.swift ---- */
.wordmark{font-weight:800;letter-spacing:.048em;line-height:1;display:inline-block;
  background-image:linear-gradient(90deg,#0a5cff 0%,#5bc79a 50%,#0a5cff 100%);
  background-size:260% 100%;background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
@media (prefers-reduced-motion:no-preference){
  .wordmark{animation:drift 16s ease-in-out infinite alternate}
  @keyframes drift{from{background-position:0% 50%}to{background-position:100% 50%}}
}
h1.wordmark{font-size:clamp(46px,8.6vw,104px)}
/* ---- rhythm ---- */
section{padding:clamp(84px,11vw,164px) 0;text-align:center}
.alt{background:var(--surface)}
.lede{font-size:clamp(19px,2.1vw,25px);color:var(--text-2);line-height:1.4;
  max-width:27ch;margin:22px auto 0;letter-spacing:-.014em;font-weight:500}
.lede.w{max-width:42ch}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:16px}
/* styles.css gives every h2 `max-width:20ch` with no margin-inline:auto —
   right for the site's left-aligned pages, and the site itself re-centres
   where needed (.cta-band h2{margin-inline:auto}). This page's sections are
   all centred, so without the override each heading shrank to 20ch (~829px
   at this display size) and pinned to the container's LEFT edge, its text
   centred inside that narrow box: every wrapped headline sat visibly left
   of the lede beneath it, in every browser. Line breaks are authored with
   <br>, so the cap does nothing here but harm. */
h2{font-size:clamp(34px,5.4vw,64px);max-width:none}
h3{font-size:1.12rem;letter-spacing:-.02em;font-weight:680}
.fine{font-size:.82rem;color:var(--text-3);margin-top:18px}
.cap{font-size:.8rem;color:var(--text-3);margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;
  border-radius:var(--pill);font-size:1.02rem;font-weight:650;letter-spacing:-.01em;
  transition:transform 140ms,filter 140ms;font-family:var(--sans);cursor:pointer;border:1px solid transparent}
.btn-p{background:var(--accent);color:#fff;box-shadow:var(--shadow-2)}
.btn-p:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-g{border-color:var(--hairline);background:var(--surface);color:var(--text)}
.btn-g:hover{background:var(--surface-2)}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
/* the one place that zooms */
.js .rv.zoomshot{opacity:0;transform:scale(.855) translateY(34px)}
.js .rv.zoomshot.in{opacity:1;transform:none;
  transition:opacity 1s ease,transform 1.5s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){.js .rv,.js .rv.zoomshot{opacity:1;transform:none}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* ---- screenshots ---- */
.shot{margin:clamp(46px,6vw,80px) auto 0;border-radius:18px;box-shadow:var(--shadow-3)}
.shot.q{margin-top:clamp(40px,5vw,64px);border-radius:16px;box-shadow:var(--shadow-2)}
/* ---- Apple-style expandable detail ---- */
.more{margin:clamp(30px,3.6vw,44px) auto 0;max-width:840px;text-align:left}
/* display:flex, not inline-flex: the closed toggle centres via its auto
   margins only as a block-level box. As inline-flex it sat at the left edge
   of the centred 840px block — the second off-axis element on the page. */
.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  margin:0 auto;color:var(--accent-ink);font-weight:650;font-size:1rem;letter-spacing:-.01em;
  padding:9px 4px;width:max-content}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s}
.more[open]>summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.more>summary:hover{text-decoration:underline;text-underline-offset:4px}
.morewrap{display:flex;justify-content:center}
.morebody{padding-top:8px}
.mlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 40px;
  text-align:left;padding:14px 0 4px}
.mlist div{font-size:.96rem;color:var(--text-2);line-height:1.55}
.mlist b{display:block;color:var(--text);font-weight:650;margin-bottom:4px;font-size:1rem;letter-spacing:-.014em}
/* ---- three-up ---- */
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:clamp(26px,4vw,52px);margin-top:clamp(46px,5.5vw,72px);text-align:left}
.three h3{margin-bottom:9px}
.three p{font-size:.98rem;color:var(--text-2);line-height:1.55}
/* ---- subsystem grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(174px,1fr));
  gap:1px;background:var(--hairline-2);border:1px solid var(--hairline-2);
  border-radius:var(--r);overflow:hidden;margin-top:clamp(42px,5vw,64px);text-align:left}
.gi{background:var(--bg);padding:17px 18px;display:flex;align-items:center;gap:10px;min-height:62px}
.alt .gi{background:var(--surface)}
.gi i{width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none}
.gi.next i{background:var(--accent)}
.gi b{font-size:.94rem;font-weight:650;letter-spacing:-.012em}
.gi.next b{color:var(--accent-ink)}
.gi.next b::after{content:" · next";font-weight:500;font-size:.72rem;color:var(--text-3)}
/* ---- tech specs table ---- */
.tbl{margin-top:clamp(42px,5vw,64px);overflow-x:auto;text-align:left}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{padding:16px 18px;border-bottom:1px solid var(--hairline-2);font-size:.98rem;vertical-align:top}
thead th{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);border-bottom:1px solid var(--hairline);padding-bottom:12px}
tbody th{text-align:left;font-weight:650;color:var(--text);width:26%}
td{color:var(--text-2)}
td.rec{color:var(--text);font-weight:600}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
/* ---- appearance ---- */
.apsw{display:inline-flex;background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--pill);padding:4px;gap:2px;margin-top:32px}
.apsw button{border:0;background:transparent;font-family:var(--sans);font-size:.94rem;font-weight:650;
  color:var(--text-2);padding:9px 24px;border-radius:var(--pill);cursor:pointer;transition:background 160ms,color 160ms}
.apsw button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}
.apstack{position:relative;margin-top:clamp(36px,4.5vw,56px)}
.apstack>div{transition:opacity .45s ease}
.apstack>div.off{position:absolute;inset:0;opacity:0;pointer-events:none}
/* ---- faq / footer ---- */
details.q{border-bottom:1px solid var(--hairline-2);text-align:left}
details.q summary{cursor:pointer;padding:21px 0;font-size:1.08rem;font-weight:650;letter-spacing:-.018em;
  list-style:none;display:flex;justify-content:space-between;gap:18px}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";font-family:var(--mono);color:var(--accent-ink);font-size:20px;
  line-height:1.1;flex:none;transition:transform .2s}
details.q[open] summary::after{transform:rotate(45deg)}
details.q p{padding:0 0 22px;color:var(--text-2);font-size:.99rem;max-width:68ch;line-height:1.58}
details.q summary:hover{color:var(--accent-ink)}
.faqwrap{max-width:760px;margin:clamp(34px,4vw,50px) auto 0}
/* ---- horizontal card rail, Apple-style: full-bleed, snap, arrow controls ---- */
.caroblock{margin-top:clamp(38px,4.6vw,58px)}
.carohead{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  max-width:var(--maxw);margin:0 auto 14px;padding:0 var(--gutter)}
.caronav{display:none;gap:8px}
.js .caronav{display:flex}
.caronav button{width:38px;height:38px;border-radius:var(--pill);border:1px solid var(--hairline);
  background:var(--surface);color:var(--text);cursor:pointer;font-size:15px;line-height:1;
  font-family:var(--sans);display:grid;place-items:center;transition:opacity .18s,background .18s}
.caronav button:hover{background:var(--surface-2)}
.caronav button[disabled]{opacity:.32;cursor:default}
.carowrap{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.carowrap::-webkit-scrollbar{display:none}
.caro{display:flex;gap:18px;width:max-content;
  padding:4px max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter))) 10px}
.ccard{flex:none;width:min(336px,80vw);scroll-snap-align:start;background:var(--surface);
  border:1px solid var(--hairline);border-radius:20px;padding:26px 25px 28px;text-align:left;
  display:flex;flex-direction:column;box-shadow:var(--shadow-1)}
.alt .ccard{background:var(--bg)}
.ccard .k{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:13px}
.ccard h3{font-size:1.22rem;letter-spacing:-.022em;margin-bottom:10px;line-height:1.2}
.ccard p{font-size:.95rem;color:var(--text-2);line-height:1.58}
.ccard .soon{margin-top:auto;padding-top:16px;font-size:.76rem;font-weight:650;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
/* ---- roadmap track ---- */
.road{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:0;
  margin-top:clamp(46px,5.5vw,70px);text-align:left}
.rd{padding:26px 22px 4px 0;border-top:2px solid var(--hairline);position:relative}
.rd.on{border-top-color:var(--accent)}
.rd .dot{position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--bg);border:2px solid var(--hairline)}
.alt .rd .dot{background:var(--surface)}
.rd.on .dot{background:var(--accent);border-color:var(--accent)}
.rd b{display:block;font-size:1.08rem;font-weight:680;letter-spacing:-.02em;margin-bottom:6px}
.rd.on b{color:var(--accent-ink)}
.rd span:not(.dot){display:block;font-size:.93rem;color:var(--text-2);line-height:1.55;max-width:26ch}
/* ==== sc- : app window recreations. Fixed literals — these are screenshots. ==== */
.sc{overflow-x:auto;border-radius:16px;-webkit-overflow-scrolling:touch}
.sc-in{min-width:780px;background:#ECEEF3;border:1px solid rgba(14,17,22,.11);border-radius:15px;display:flex;
  font-family:-apple-system,"SF Pro Text",ui-sans-serif,system-ui,sans-serif;color:#0E1116;text-align:left;
  overflow:hidden;min-height:552px}
.sc-rail{width:184px;flex:none;margin:9px 0 11px 10px;border-radius:14px;background:rgba(255,255,255,.75);
  border:1px solid rgba(14,17,22,.07);box-shadow:0 5px 20px rgba(14,17,22,.08);padding:0 7px;display:flex;flex-direction:column}
.sc-lg{display:flex;gap:6px;padding:12px 7px 9px}
.sc-lg i{width:10px;height:10px;border-radius:50%;display:block}
.sc-wm{text-align:center;font-weight:700;font-size:13px;letter-spacing:.05em;
  background:linear-gradient(90deg,#0A5CFF,#5BC79A);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-host{text-align:center;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:7.5px;color:#8A93A3;padding-bottom:6px}
.sc-g{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:7px;letter-spacing:.17em;text-transform:uppercase;color:#8A93A3;padding:9px 9px 3px}
.sc-r{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:7px;color:#4A5160;font-size:11px;line-height:1.2}
.sc-r .i{width:12px;text-align:center;font-size:9.5px;color:#8A93A3;flex:none}
.sc-r.on{background:rgba(10,92,255,.09);color:#0E1116;font-weight:600}
.sc-r.on .i{color:#0A5CFF}
.sc-r .d{margin-left:auto;width:4.5px;height:4.5px;border-radius:50%;background:#17B26A;flex:none}
.sc-foot{margin-top:auto;border-top:1px solid rgba(14,17,22,.07);padding:7px 0 8px}
.sc-body{flex:1;min-width:0;display:flex;flex-direction:column;margin:9px 11px 11px 9px}
.sc-top{height:32px;display:flex;justify-content:flex-end;align-items:center;padding-bottom:7px}
.sc-verd{display:flex;align-items:center;gap:7px;height:27px;padding:0 12px;border-radius:999px;background:#fff;
  border:1px solid rgba(14,17,22,.10);font-size:10.5px;font-weight:500;box-shadow:0 1px 3px rgba(14,17,22,.05)}
.sc-verd i{width:6px;height:6px;border-radius:50%;background:#17B26A;box-shadow:0 0 0 3px rgba(23,178,106,.15);flex:none}
.sc-verd.warn i{background:#F5A623;box-shadow:0 0 0 3px rgba(245,166,35,.16)}
.sc-verd .cv{color:#8A93A3;font-size:8px}
.sc-pane{flex:1;background:rgba(246,247,250,.9);border:1px solid rgba(14,17,22,.06);border-radius:14px;padding:13px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
/* hero */
.sc-hero{background:#fff;border:1px solid rgba(14,17,22,.10);border-radius:13px;overflow:hidden;box-shadow:0 2px 4px rgba(14,17,22,.045);position:relative}
.sc-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(460px 240px at 92% -14%,rgba(10,92,255,.10),transparent 70%)}
.sc-hero-in{display:flex;gap:26px;align-items:center;padding:16px 20px 12px;position:relative}
.sc-h1{font-size:22px;font-weight:600;letter-spacing:-.022em;margin-bottom:11px}
.sc-leg{display:grid;grid-template-columns:auto auto;gap:8px 26px}
.sc-leg span{display:flex;align-items:center;gap:7px;font-size:11px;color:#4A5160;white-space:nowrap}
.sc-leg i{width:8px;height:8px;border-radius:50%;flex:none}
.sc-leg b{color:#0E1116;font-weight:600;font-variant-numeric:tabular-nums}
.sc-ai{display:flex;align-items:center;gap:8px;padding:9px 20px;background:rgba(10,92,255,.045);border-top:1px solid rgba(14,17,22,.06);font-size:10.5px;color:#4A5160;position:relative}
.sc-ai .s{color:#0A5CFF}
.sc-ai .lv{margin-left:auto;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:8px;letter-spacing:.14em;color:#17B26A;font-weight:600}
/* vitals */
.sc-vits{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.sc-vt{background:#fff;border:1px solid rgba(14,17,22,.10);border-radius:11px;padding:9px 11px;box-shadow:0 2px 4px rgba(14,17,22,.04)}
.sc-vt .l{display:block;font-size:8.5px;color:#8A93A3;text-transform:uppercase;letter-spacing:.09em;font-family:"JetBrains Mono",monospace}
.sc-vt b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.sc-vt b small{font-size:9px;color:#8A93A3;font-weight:500;margin-left:2px}
/* cards + rows */
.sc-card{background:#fff;border:1px solid rgba(14,17,22,.10);border-radius:12px;box-shadow:0 2px 4px rgba(14,17,22,.045);overflow:hidden}
.sc-ct{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(14,17,22,.06);font-size:11.5px;font-weight:600}
.sc-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid rgba(14,17,22,.06)}
.sc-row:last-child{border-bottom:0}
.sc-nm{width:150px;flex:none}
.sc-nm b{display:block;font-size:11px;font-weight:600}
.sc-nm span{font-size:9px;color:#8A93A3}
.sc-pill{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:500;padding:3px 8px;border-radius:999px;flex:none}
.sc-pill i{width:4.5px;height:4.5px;border-radius:50%}
.sc-pill.ok{background:rgba(23,178,106,.10);color:#0E7A49}
.sc-pill.ok i{background:#17B26A}
.sc-pill.warn{background:rgba(245,166,35,.12);color:#9A6410}
.sc-pill.warn i{background:#F5A623}
.sc-pill.idle{background:#F4F5F8;color:#4A5160}
.sc-pill.idle i{background:#8A93A3}
.sc-pill.sig{background:rgba(10,92,255,.08);color:#0846BE}
.sc-pill.sig i{background:#0A5CFF}
.sc-spk{display:flex;align-items:flex-end;gap:2px;height:14px;width:70px;flex:none}
.sc-spk i{flex:1;border-radius:1px;background:rgba(10,92,255,.30)}
.sc-bar{flex:1;height:5px;border-radius:3px;background:rgba(14,17,22,.08);overflow:hidden;min-width:48px}
.sc-bar i{display:block;height:100%;border-radius:3px;background:#0A5CFF}
.sc-bar i.w{background:#F5A623}
.sc-pt,.sc-mt{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9px;color:#8A93A3;flex:none;font-variant-numeric:tabular-nums}
.sc-mt{margin-left:auto}
.sc-acts{display:flex;gap:6px;margin-left:auto}
.sc-acts span{font-size:9px;font-weight:500;color:#4A5160;background:#F4F5F8;border:1px solid rgba(14,17,22,.10);border-radius:6px;padding:3px 8px}
.sc-acts span.p{background:#0A5CFF;border-color:#0A5CFF;color:#fff}
.sc-head{display:flex;align-items:center;justify-content:space-between;padding:0 2px}
.sc-head b{font-size:13px;font-weight:600;letter-spacing:-.01em}
.sc-btn{background:#0A5CFF;color:#fff;font-size:10px;font-weight:500;padding:5px 10px;border-radius:7px}
.sc-tag{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9px;color:#8A93A3}
.sc-seg{display:flex;background:#F4F5F8;border:1px solid rgba(14,17,22,.08);border-radius:8px;padding:2px;font-size:9.5px;font-weight:500}
.sc-seg span{padding:3px 10px;border-radius:6px;color:#4A5160}
.sc-seg span.on{background:#fff;color:#0E1116;box-shadow:0 1px 3px rgba(14,17,22,.12)}
.sc-q{display:flex;align-items:center;gap:10px;padding:7px 14px;border-bottom:1px solid rgba(14,17,22,.06);font-family:"JetBrains Mono",monospace;font-size:9.5px;color:#4A5160}
.sc-q:last-child{border-bottom:0}
.sc-q .dom{color:#0E1116;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-q .qp{font-size:8.5px;font-weight:600;padding:2px 7px;border-radius:999px;flex:none}
.sc-q .qp.a{background:rgba(23,178,106,.10);color:#0E7A49}
.sc-q .qp.b{background:rgba(240,68,68,.10);color:#B22626}
.sc-q .qp.q{background:rgba(245,166,35,.12);color:#9A6410}
.sc-proof{display:flex;gap:11px;align-items:center;background:rgba(23,178,106,.07);border:1px solid rgba(23,178,106,.24);border-radius:11px;padding:12px 14px}
.sc-proof-i{width:26px;height:26px;border-radius:50%;background:#17B26A;color:#fff;display:grid;place-items:center;font-size:13px;flex:none}
.sc-proof b{display:block;font-size:11.5px;font-weight:600}
.sc-proof span{font-size:10px;color:#4A5160}
.sc-att{background:#fff;border:1px solid rgba(14,17,22,.10);border-left:3px solid #F5A623;border-radius:10px;padding:10px 13px}
.sc-att b{display:block;font-size:11px;font-weight:600}
.sc-att span{font-size:9.5px;color:#8A93A3}
.sc-code{background:#fff;border:1px solid rgba(14,17,22,.10);border-radius:10px;padding:11px 13px;font-family:"JetBrains Mono",monospace;font-size:9.5px;line-height:1.9;color:#4A5160;overflow-x:auto;white-space:nowrap}
.sc-code b{color:#0846BE;font-weight:500}
.sc-code .ok{color:#0E7A49}
/* ---------------- dark appearance ---------------- */
.sc-in.dk{background:#0B0D12;border-color:rgba(240,242,247,.11);color:#F0F2F7}
.sc-in.dk .sc-rail{background:rgba(30,34,44,.72);border-color:rgba(240,242,247,.08);box-shadow:0 5px 20px rgba(0,0,0,.5)}
.sc-in.dk .sc-r{color:#A9B0C0}
.sc-in.dk .sc-r .i{color:#6F7789}
.sc-in.dk .sc-r.on{background:rgba(61,155,255,.16);color:#F0F2F7}
.sc-in.dk .sc-r.on .i{color:#3D9BFF}
.sc-in.dk .sc-g,.sc-in.dk .sc-host{color:#6F7789}
.sc-in.dk .sc-foot{border-top-color:rgba(240,242,247,.08)}
.sc-in.dk .sc-pane{background:rgba(18,21,28,.9);border-color:rgba(240,242,247,.06)}
.sc-in.dk .sc-verd{background:#1A1E27;border-color:rgba(240,242,247,.11);color:#F0F2F7;box-shadow:none}
.sc-in.dk .sc-verd i{background:#3DD68C;box-shadow:0 0 0 3px rgba(61,214,140,.18)}
.sc-in.dk .sc-hero,.sc-in.dk .sc-vt,.sc-in.dk .sc-card{background:#161A22;border-color:rgba(240,242,247,.10);box-shadow:none}
.sc-in.dk .sc-hero::before{background:radial-gradient(460px 240px at 92% -14%,rgba(61,155,255,.16),transparent 70%)}
.sc-in.dk .sc-leg span{color:#A9B0C0}
.sc-in.dk .sc-leg b,.sc-in.dk .sc-vt b,.sc-in.dk .sc-nm b,.sc-in.dk .sc-ct{color:#F0F2F7}
.sc-in.dk .sc-ai{background:rgba(61,155,255,.07);border-top-color:rgba(240,242,247,.07);color:#A9B0C0}
.sc-in.dk .sc-ai .s{color:#3D9BFF}
.sc-in.dk .sc-ai .lv{color:#3DD68C}
.sc-in.dk .sc-row{border-bottom-color:rgba(240,242,247,.07)}
.sc-in.dk .sc-ct{border-bottom-color:rgba(240,242,247,.07)}
.sc-in.dk .sc-vt .l,.sc-in.dk .sc-nm span,.sc-in.dk .sc-mt,.sc-in.dk .sc-pt{color:#6F7789}
.sc-in.dk .sc-spk i{background:rgba(61,155,255,.34)}
.sc-in.dk .sc-pill.ok{background:rgba(61,214,140,.13);color:#3DD68C}
.sc-in.dk .sc-pill.ok i{background:#3DD68C}
.sc-in.dk .sc-pill.sig{background:rgba(61,155,255,.14);color:#7FADFF}
.sc-in.dk .sc-pill.sig i{background:#3D9BFF}

/* The last card fills the pane, as Card(stretch:) does in the app. */
.sc-pane > .sc-card:last-child{flex:1;display:flex;flex-direction:column}
.sc-pane > .sc-card:has(+ .sc-code),.sc-pane > .sc-card:has(+ .sc-att){flex:1;display:flex;flex-direction:column}

/* the sticky header must not eat a section eyebrow on an anchor jump */
body.s3rver main > section{scroll-margin-top:84px}