/* skarn-web shared stylesheet. Using an external /style.css (style-src 'self') keeps
   the strict CSP simple across pages - no per-page inline-<style> hash to maintain.
   The :root brand-token block is generated from scripts/tokens.toml (vendored from the
   skarn repo; python3 scripts/build_tokens.py); edit the schema, not the block. Fonts
   are the self-hosted IBM Plex woff2 under /fonts/ (@font-face below). */

:root{
  --obsidian:#0B0F14;
  --slate:#11161D;
  --slate-2:#161D26;
  --line:#212A35;
  --mist:#E8EDF2;
  --ash:#8B98A8;
  --signal:#2FE3B0;
  --signal-dim:#143B33;
  --coral:#FF6B6B;
  --amber:#F5B743;
  --signal-ink:#0B0F14;
  --iris:#8AA0FF;
  --accent:var(--signal);
  --maxw:1080px;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Self-hosted fonts - paths and weights match skarn-web/fonts/ exactly (font-src 'self'). */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/IBMPlexSans-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/IBMPlexSans-Medium.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/IBMPlexMono-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/IBMPlexMono-Medium.woff2") format("woff2")}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--obsidian);color:var(--mist);font-family:var(--sans);
  line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  overflow-wrap:break-word}
a{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
header a,.btn,a.card,.role{text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,5vw,28px)}
img,svg{max-width:100%}
/* long dotted identifiers in prose (e.g. tool.driver.supportedTaxonomies) have no break
   points, so in a grid/flex card they force the track wider than a 320px viewport;
   "anywhere" (not "break-word") also shrinks min-content, so the card can fit. Code in a
   nowrap/pre context (.xwalk code, pre) is unaffected - white-space overrides this. */
code{overflow-wrap:anywhere}

/* header */
header{position:sticky;top:0;z-index:20;background:var(--obsidian);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px}
.brand{display:flex;align-items:center;gap:11px}
.brand .logo{width:26px;height:26px;flex:none}
.brand .word{font-family:var(--mono);font-weight:500;letter-spacing:.34em;font-size:15px;
  padding-left:.34em;color:var(--mist)}
.nav a.word-link{display:flex;align-items:center;gap:11px}
.nav .cta{background:var(--signal);color:var(--signal-ink);padding:9px 17px;border-radius:10px;
  border:1px solid transparent;
  font-weight:600;font-size:14px;font-family:var(--sans);white-space:nowrap}
.nav .cta:hover{filter:brightness(1.06)}
.nav .cta-secondary{background:transparent;color:var(--mist);border-color:var(--line)}
.nav .cta-secondary:hover{filter:none;background:var(--slate-2);border-color:var(--ash)}
.nav .nav-ctas{display:flex;align-items:center;gap:10px}
.nav .links,.nav .nav-right{display:flex;gap:18px;align-items:center}
.nav .links a:not(.cta),.nav .nav-right a:not(.cta){color:var(--ash);font-size:14px}
.nav .links a:not(.cta):hover,.nav .nav-right a:not(.cta):hover{color:var(--mist)}
/* mobile nav: CSS-only hamburger (checkbox hack - no JS, so the strict CSP holds).
   The dropdown anchors to the sticky <header>, so it spans the full viewport width. */
.nav-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav-burger{display:none}
@media(max-width:1024px){
  .nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;padding:10px;margin-left:auto;cursor:pointer;border-radius:9px}
  .nav-burger span{display:block;height:2px;background:var(--mist);border-radius:2px}
  .nav-burger:hover{background:var(--slate-2)}
  .nav-toggle:focus-visible+.nav-burger{outline:2px solid var(--signal);outline-offset:2px}
  .nav .links,.nav .nav-right{display:none}
  .nav-toggle:checked~.links,.nav-toggle:checked~.nav-right{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:64px;left:0;right:0;
    max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;
    background:var(--obsidian);border-bottom:1px solid var(--line);
    padding:6px clamp(18px,5vw,28px) 16px;box-shadow:0 14px 26px rgba(0,0,0,.45)}
  .nav-toggle:checked~.links a:not(.cta),.nav-toggle:checked~.nav-right a:not(.cta){
    font-size:16px;padding:13px 2px;border-bottom:1px solid var(--line)}
  .nav-toggle:checked~.links .nav-ctas,.nav-toggle:checked~.nav-right .nav-ctas{
    flex-direction:column;align-items:stretch;gap:10px;margin-top:14px}
  .nav-toggle:checked~.links .cta,.nav-toggle:checked~.nav-right .cta{
    text-align:center;padding:12px}
}

/* page head */
/* page-head is class="wrap page-head"; set only vertical padding via longhand so the
   horizontal padding from .wrap is preserved (a `padding: v 0 v` shorthand would zero it,
   flushing the h1/answer to the screen edge on mobile). */
.page-head{padding-top:clamp(44px,7vw,76px);padding-bottom:clamp(20px,3vw,30px)}
h1{font-family:var(--display);font-weight:600;font-size:clamp(35px,6vw,58px);line-height:1.05;
  letter-spacing:-.022em;margin:0 0 16px}
h1 em{font-style:normal;color:inherit;font-weight:inherit}
.lead{max-width:720px;color:var(--mist);opacity:.92;font-size:clamp(16px,2.2vw,18.5px);margin:0 0 8px}
.updated{font-family:var(--mono);font-size:12px;color:var(--ash);margin-top:14px}
.role-tag{font-size:13.5px;color:var(--ash);font-weight:500;margin:0 0 14px}

/* quick-answer block (GEO: definition-first, extractable) */
.answer{background:var(--slate-2);border:1px solid var(--line);
  border-radius:12px;padding:20px 22px;margin:24px 0 8px;max-width:780px}
.answer p{margin:0;color:var(--mist);font-size:16.5px;line-height:1.6}
.answer p strong{color:var(--mist)}

/* executive summary: 15-second skimmable TL;DR + section jump list at the top of a research page */
.exec-summary{background:var(--slate-2);border:1px solid var(--line);
  border-radius:12px;padding:20px 22px;margin:20px 0 8px;max-width:820px}
.es-label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0;
  color:var(--accent);margin:0 0 12px}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.accent-iris{--accent:var(--iris)}
.research-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 0}
.research-card{display:block;background:var(--slate-2);border:1px solid var(--line);border-radius:15px;
  padding:24px;text-decoration:none;transition:border-color .15s}
.research-card:hover{border-color:var(--accent)}
.rc-stat{font-family:var(--display);font-weight:600;font-size:clamp(36px,5vw,46px);color:var(--accent);
  line-height:1;font-variant-numeric:tabular-nums}
.rc-statlabel{font-family:var(--mono);font-size:12px;color:var(--ash);margin-top:6px}
.rc-title{font-family:var(--display);font-weight:600;font-size:22px;color:var(--mist);margin:18px 0 0}
.rc-blurb{color:var(--ash);font-size:15px;line-height:1.6;margin:8px 0 0}
.rc-cta{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--accent)}
@media(max-width:720px){.research-grid{grid-template-columns:1fr}}
.es-headline{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0}
.es-headline .n{font-family:var(--display);font-weight:600;font-size:clamp(40px,7vw,52px);color:var(--mist);line-height:.95;font-variant-numeric:tabular-nums}
.es-headline .l{color:var(--mist);font-size:16px;line-height:1.5;max-width:560px}
.es-headline.es-secondary{margin-top:10px}
.es-headline.es-secondary .n{font-size:clamp(26px,4.5vw,34px);color:var(--accent)}
.es-headline.es-secondary .l{font-size:15px;color:var(--ash)}
.es-why{color:var(--ash);font-size:14.5px;line-height:1.6;margin:14px 0 0;max-width:760px}
.es-figs{display:flex;flex-wrap:wrap;gap:10px 28px;margin:16px 0 0;padding:0;list-style:none}
.es-figs li{color:var(--ash);font-size:14px}
.es-figs li strong{color:var(--mist);font-family:var(--mono)}
.es-toc{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 9px}
.es-toc .es-label{margin:0 4px 0 0}
.es-toc a{font-family:var(--mono);font-size:12px;color:var(--mist);background:var(--slate);
  border:1px solid var(--line);border-radius:6px;padding:5px 11px;text-decoration:none}
.es-toc a:hover{border-color:var(--accent);color:var(--accent)}
/* fixed-header offset for in-page anchor jumps (64px nav + preview banner) */
h2[id]{scroll-margin-top:100px}

/* sections */
section{padding:clamp(36px,6vw,60px) 0;border-top:1px solid var(--line)}
h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,4vw,35px);line-height:1.12;
  margin:0 0 14px;letter-spacing:-.02em}
h2 em{font-style:normal;color:inherit}
h3{font-size:20px;font-weight:600;margin:30px 0 8px;color:var(--mist)}
.sec-lead{color:var(--ash);max-width:720px;margin:0 0 22px;font-size:clamp(15.5px,2.2vw,17px)}
p{color:var(--mist)}
.muted{color:var(--ash)}

/* comparison table */
.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:14px;margin:8px 0 0}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:14.5px}
th,td{text-align:left;padding:12px 14px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
th:last-child,td:last-child{border-right:none}
tbody tr:last-child td{border-bottom:none}
thead th{background:var(--slate-2);color:var(--mist);font-weight:600;font-size:13px;
  letter-spacing:.01em}
td.tname{font-weight:600;color:var(--mist);white-space:nowrap;background:var(--slate-2)}
.manual-link{color:inherit;text-decoration:none;border-bottom:1px dotted var(--ash)}
.manual-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.yes{color:var(--signal)} .no{color:var(--ash)} .partial{color:var(--amber)}
.table-note{color:var(--ash);font-size:12.5px;margin:10px 0 0}

/* tool cards */
.tool{background:var(--slate-2);border:1px solid var(--line);border-radius:15px;padding:22px 24px;
  margin:18px 0}
.tool h3{margin-top:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tool .bestfor{font-family:var(--mono);font-size:12px;color:var(--signal);background:var(--signal-dim);
  border-radius:6px;padding:3px 11px}
.tool p{color:var(--ash);font-size:15px;line-height:1.62;margin:10px 0}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
@media(max-width:620px){.pc{grid-template-columns:1fr}}
.pc h4{margin:0 0 6px;font-size:13px;font-family:var(--mono);letter-spacing:.03em;color:var(--mist)}
.pc ul{margin:0;padding-left:18px}
.pc li{color:var(--ash);font-size:14.5px;line-height:1.55;margin-bottom:4px}
.pc .pros li::marker{color:var(--signal)}
.pc .cons li::marker{color:var(--coral)}

/* faq */
.faq dt{font-weight:600;color:var(--mist);margin-top:20px;font-size:16.5px}
.faq dd{margin:6px 0 0;color:var(--ash);font-size:15px;line-height:1.62;max-width:760px}
.faq.faq-bright dt{font-size:17px}
.faq.faq-bright dd{color:var(--mist);font-size:17px}

/* cta band */
.cta-band h2{margin-bottom:14px}
.cta-band .sec-lead{margin-left:0;margin-right:0}
.row{display:flex;gap:13px;justify-content:flex-start;flex-wrap:wrap;margin-top:20px}
.btn{padding:14px 24px;border-radius:12px;font-weight:600;font-size:15.5px;display:inline-block;
  font-family:var(--sans)}
.btn.primary{background:var(--signal);color:var(--signal-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border:1px solid var(--line);color:var(--mist);background:var(--slate)}
.btn.ghost:hover{border-color:var(--ash)}
.note{margin-top:18px;font-size:13.5px;color:var(--ash)}
.note b{color:var(--mist)}
.report-dl{margin:20px 0 26px}

.checkout{margin-top:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.checkout .note{width:100%;margin-top:10px}
.seats-label{font-size:13.5px;color:var(--ash)}
.checkout .seats-input{width:88px}

footer{border-top:1px solid var(--line);padding:34px 0;color:var(--ash);font-size:13.5px}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.foot .word{font-family:var(--mono);letter-spacing:.2em;font-size:15px}

/* synthetic-data banner (research) */
.synthetic{background:var(--signal-dim);border:1px solid var(--signal);border-radius:10px;
  padding:12px 16px;color:var(--mist);font-size:14px;margin:18px 0}
.draft{background:#2a1d10;border:1px solid var(--amber);border-radius:10px;padding:12px 16px;
  color:var(--amber);font-size:13.5px;margin:18px 0;font-family:var(--mono)}
/* site-wide stage banner: shown on any non-published (preview/draft) page.
   Fixed (out of flow) so it does not push page content down, glued directly
   below the 64px sticky nav (z below the nav so they never visually collide). */
.preview-banner{position:fixed;top:65px;left:0;right:0;z-index:19;
  background:var(--amber);color:var(--obsidian);text-align:center;
  padding:7px 16px;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-banner a{color:var(--obsidian);text-decoration:underline}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}
@media(max-width:680px){.statgrid{grid-template-columns:1fr 1fr}}
.stat{background:var(--slate-2);border:1px solid var(--line);border-radius:12px;padding:18px}
.stat .n{font-family:var(--display);font-weight:600;font-size:32px;color:var(--mist);line-height:1;font-variant-numeric:tabular-nums}
.stat .l{color:var(--ash);font-size:13px;margin-top:6px}

/* manual (/manual/) - CLI reference. The class-based body is generated from
   docs/cli-model.toml in the skarn repo; all styling lives here (CSP forbids inline style). */
.manual{max-width:var(--maxw);margin:0 auto;
  padding:clamp(40px,6vw,72px) clamp(18px,5vw,28px) clamp(48px,7vw,84px)}
.manual-header{position:static;background:none;backdrop-filter:none;border:0;z-index:auto;height:auto;
  padding:0 0 clamp(18px,3vw,26px)}
.manual-header h1{display:flex;align-items:baseline;gap:.18em;flex-wrap:wrap;margin:0 0 12px}
.manual-header .manual-section{font-family:var(--mono);font-size:clamp(15px,2.4vw,22px);
  color:var(--ash);letter-spacing:0;font-style:normal}
.manual-tagline{font-size:clamp(16px,2.2vw,19px);color:var(--mist);opacity:.92;margin:0 0 8px;max-width:720px}
.manual-version{font-family:var(--mono);font-size:13px;color:var(--signal);margin:0}

.manual section{padding:clamp(26px,4vw,40px) 0}
.manual h2{margin-bottom:14px}
.manual h3{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--signal);margin:28px 0 2px}
.manual section>p{color:var(--mist);opacity:.86;max-width:760px;font-size:15.5px;margin:0 0 12px}
.manual h3+p{color:var(--ash);opacity:1;font-size:14.5px;margin:2px 0 12px}

.manual pre{font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--mist);
  background:var(--slate-2);border:1px solid var(--line);border-radius:10px;
  padding:15px 17px;margin:0;overflow:auto}
.manual-synopsis{margin-top:4px}
.manual-example{margin:0 0 20px}

.manual dl{margin:0}
.manual dt{font-family:var(--mono);font-size:14px;color:var(--mist);margin-top:18px;line-height:1.5}
.manual dd{margin:5px 0 0;color:var(--ash);font-size:15px;line-height:1.62;max-width:780px}
.manual dt code{background:none;border:0;padding:0;color:var(--mist);font-weight:500}
.manual var{font-style:italic;color:var(--signal)}
.manual dd code{font-family:var(--mono);font-size:.86em;background:var(--slate-2);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--mist)}

.stat.red .n{color:var(--coral)}
.stat.amber .n{color:var(--amber)}

/* persona pages (/for/) */
.lede{color:var(--mist);opacity:.92;max-width:720px;font-size:clamp(16px,2.2vw,18px);margin:0 0 8px}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 0}
@media(max-width:820px){.roles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.roles{grid-template-columns:1fr}}
.role{display:block;background:var(--slate-2);border:1px solid var(--line);border-radius:14px;
  padding:18px;color:var(--mist)}
.role:hover{border-color:var(--ash);text-decoration:none}
.role .lbl{font-weight:600;font-size:16px;display:block;margin-bottom:3px}
.role .sub{color:var(--ash);font-size:13.5px;display:block}
.points{display:grid;gap:14px;margin:8px 0 0;padding:0;list-style:none}
.point{background:var(--slate-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.point strong{display:block;font-size:16px;font-weight:600;margin-bottom:5px;color:var(--mist)}
.point p{margin:0;color:var(--ash);font-size:15px;line-height:1.62}
.steps{display:grid;gap:10px;margin:8px 0 0}
.step{display:flex;gap:14px;align-items:flex-start;background:var(--slate-2);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px}
.step .n{font-family:var(--mono);font-size:13px;color:var(--signal);flex:none;width:22px}
.step strong{display:block;font-size:15px;font-weight:600;color:var(--mist);margin-bottom:2px}
.step p{margin:0;color:var(--ash);font-size:14px;line-height:1.55}
.mono{font-family:var(--mono);background:#070A0E;border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;font-size:13.5px;line-height:1.7;color:#7ee787;overflow-x:auto;margin:18px 0;
  white-space:pre}
.callout{background:var(--slate-2);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:18px 0;color:var(--mist);font-size:15px;line-height:1.6}
.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.pill{font-family:var(--mono);font-size:12px;padding:4px 10px;border-radius:7px;border:1px solid var(--line);
  background:var(--slate);color:var(--ash)}
.pill.amber{color:var(--amber);border-color:rgba(245,183,67,.3)}
.pill.coral{color:var(--coral);border-color:rgba(255,107,107,.3)}
.pill.sig{color:var(--signal);border-color:rgba(47,227,176,.3)}
.backrow{margin:0 0 4px}
.backrow a{font-family:var(--mono);font-size:13px;color:var(--ash)}
.backrow a:hover{color:var(--mist)}

/* install quickstart: numbered steps, OS/method selector, copy-able command boxes (/install/) */
.qs-lede{color:var(--mist);font-size:clamp(16px,2.4vw,18.5px);margin:0 0 6px;max-width:720px}
.qs{margin:6px 0 0}
.qs-step{display:flex;gap:16px;align-items:flex-start;margin:0 0 30px}
.qs-num{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--signal-ink);
  background:var(--signal);width:28px;height:28px;border-radius:50%;flex:none;margin-top:3px;
  display:flex;align-items:center;justify-content:center}
.qs-body{flex:1;min-width:0}
.qs-body h2{margin:2px 0 6px;font-size:clamp(18px,2.4vw,21px);border:0;padding:0}
.qs-body>p{color:var(--ash);margin:0 0 14px;font-size:15px;max-width:660px}
.os-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--slate);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin:0 0 8px}
.os-tab{font:inherit;font-size:14px;font-weight:500;color:var(--ash);background:none;border:0;
  border-radius:9px;padding:7px 15px;cursor:pointer;white-space:nowrap}
.os-tab:hover{color:var(--mist)}
.os-tab.is-on{background:var(--slate-2);color:var(--mist);box-shadow:inset 0 0 0 1px var(--line)}
.os-tab:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.cmd-label{font-family:var(--mono);font-size:12px;color:var(--ash);margin:14px 0 6px}
.cmd{position:relative;margin:0 0 8px}
.cmd .mono{margin:0;padding-right:78px}
.copy-btn{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:12.5px;line-height:1;
  color:var(--ash);background:var(--slate-2);border:1px solid var(--line);border-radius:8px;
  padding:6px 11px;cursor:pointer}
.copy-btn:hover{color:var(--mist);border-color:var(--ash)}
.copy-btn.is-copied{color:var(--signal);border-color:var(--signal)}
.copy-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.os-note{color:var(--ash);font-size:13.5px;line-height:1.55;margin:6px 0 0;max-width:660px}
.os-note code{font-family:var(--mono);font-size:.92em;color:var(--mist)}

/* standards crosswalk (/standards/) */
.xwalk{font-size:13.5px}
.xwalk td.fam{font-family:var(--mono);font-size:12.5px;color:var(--mist);line-height:1.5}
.xwalk td.tname{white-space:normal}
.xwalk code{font-family:var(--mono);font-size:.92em;color:var(--mist);background:none;border:0;
  padding:0;white-space:nowrap}
.xwalk .tac{color:var(--ash);white-space:nowrap}
.xwalk td.empty{color:var(--ash)}
.legend{color:var(--ash);font-size:13px;margin:12px 0 0;max-width:760px;line-height:1.6}
.legend strong{font-family:var(--mono);color:var(--mist);font-weight:500}

.reg{max-width:520px;margin:14px 0 0}
.reg .sk-btn{margin-top:16px}
.reg #reg-status:empty{display:none}
.reg-result{max-width:640px;margin-top:22px}

/* home page (body.home) */

/* hero */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.6fr);
  gap:clamp(24px,5vw,56px);align-items:center}
.hero-art{display:flex;justify-content:center}
@media(max-width:760px){.hero-grid{grid-template-columns:1fr}.hero-art{justify-content:flex-start}}
.hero .scan{width:clamp(120px,18vw,200px);height:auto;margin:0;display:block}
.hero .deck{font-family:var(--sans);font-style:normal;font-size:clamp(19px,3vw,25px);
  color:var(--ash);margin:0 0 26px;line-height:1.32}
.hero .lead{max-width:600px;margin:0 0 16px;color:var(--mist);opacity:.9;
  font-size:clamp(16px,2.2vw,18px)}

/* two faces */
.faces{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.faces{grid-template-columns:1fr}}
.face{background:var(--slate-2);border:1px solid var(--line);
  border-radius:15px;padding:28px}
.face .k{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--signal);
  letter-spacing:0}
.face h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.6vw,24px);margin:10px 0 10px;
  line-height:1.15}
.face p{color:var(--ash);margin:0;font-size:15.5px}

/* terminal */
.term-wrap{margin-top:28px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#070A0E}
.term-bar{display:flex;align-items:center;padding:11px 15px;border-bottom:1px solid var(--line);
  background:var(--slate)}
.term-bar .t{font-family:var(--mono);font-size:12px;color:var(--ash)}
.term{padding:18px 20px;font-family:var(--mono);font-size:13px;line-height:1.85;overflow-x:auto;
  white-space:pre;color:#aeb9c4}
.term .sig{color:var(--signal)} .term .crit{color:var(--coral)} .term .warn{color:var(--amber)}
.term .dim{color:#768290} .term .ink{color:var(--mist)}
.shot{margin:24px 0 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--slate-2)}
.shot img{display:block;width:100%;height:auto}
.shot-cap{color:var(--ash);font-size:13px;line-height:1.5;padding:12px 16px;border-top:1px solid var(--line);margin:0}
.shot-cap b{color:var(--mist);font-weight:600}
#how .term-demo{margin-top:28px}
.report-embed .report-shell{position:relative;aspect-ratio:1280/900;background:var(--slate-2)}
.report-embed .report-shell img{position:absolute;inset:0;height:100%;object-fit:cover}
.report-embed .report-open{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:13px 22px;border:0;border-radius:12px;cursor:pointer;font-family:var(--sans);
  font-weight:600;font-size:15px;background:var(--signal);color:var(--signal-ink);
  box-shadow:0 6px 24px rgba(0,0,0,0.45)}
.report-embed .report-open:hover{filter:brightness(1.06)}
.report-embed .report-open:focus-visible{outline:2px solid var(--mist);outline-offset:2px}
.report-embed .report-frame{display:block;width:100%;height:100%;border:0}

/* platforms */
.plat{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}

/* cards + grid helpers */
.card{background:var(--slate-2);border:1px solid var(--line);border-radius:15px;padding:24px}
.card h3{margin:0 0 9px;font-size:17.5px;font-weight:600}
.card.sig h3{display:flex;align-items:center;gap:9px}
.card.sig h3:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal)}
.card p{margin:0;color:var(--ash);font-size:15px;line-height:1.62}
.grid{display:grid;gap:16px}
.mb18{margin-bottom:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.g3,.g2{grid-template-columns:1fr}}

/* home overrides of shared element rules */
.home h1{font-size:clamp(38px,7vw,74px);line-height:1.02;letter-spacing:-.025em;margin:0 0 8px}
.home h2{font-size:clamp(26px,4.2vw,37px)}
.home section{padding:clamp(48px,8vw,78px) 0}
.home .hero{padding:clamp(48px,8vw,88px) 0 clamp(40px,6vw,64px)}
.home .sec-lead{max-width:660px;margin:0 0 34px;font-size:clamp(15.5px,2.2vw,17.5px)}
.home .row{margin-top:0}
.home .note{margin-top:20px}
.home .cta-band .sec-lead{margin:0 0 28px}
.home .pill{font-family:var(--mono);font-size:12.5px;color:var(--mist);border:1px solid var(--line);
  border-radius:6px;padding:6px 13px;background:var(--slate)}
.home .pill .soon{color:var(--ash)}
.home .pill.on:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--signal);margin-right:7px;vertical-align:middle}

.over-cap{border-left:2px solid var(--signal);padding-left:12px;color:var(--mist)}

/* sk-elements:start (generated from elements.css via build_tokens.py; edit the source, not this block) */
:where(html) {
  --sk-bg: #0B0F14;
  --sk-panel: #11161D;
  --sk-card: #161D26;
  --sk-line: #212A35;
  --sk-line-strong: #2C3744;
  --sk-text: #E8EDF2;
  --sk-muted: #8B98A8;
  --sk-accent: #2FE3B0;
  --sk-accent-strong: #5CEBC2;
  --sk-accent-soft: #143B33;
  --sk-accent-ink: #0B0F14;
  --sk-warn: #F5B743;
  --sk-warn-soft: #2A1D10;
  --sk-danger: #FF6B6B;
  --sk-danger-soft: #3A1F20;
  --sk-ok-soft: #143B33;
  --sk-token-bg: #070A0E;
  --sk-r-s: 4px;
  --sk-r: 6px;
  --sk-r-l: 8px;
  --sk-pill: 999px;
  --sk-sans: "IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sk-mono: "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

.sk-portal { margin: 0; background: var(--sk-bg); color: var(--sk-text); font-family: var(--sk-sans); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.sk-portal * { box-sizing: border-box; }
.sk-portal h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.sk-portal h2 { font-size: 16.5px; font-weight: 600; margin: 34px 0 10px; }
.sk-portal :where(a) { color: var(--sk-accent); text-decoration: underline; text-underline-offset: 3px; }
.sk-portal code { font-family: var(--sk-mono); font-size: 13px; }
.sk-portal ::selection { background: var(--sk-accent-soft); }

.sk-header { border-bottom: 1px solid var(--sk-line); background: var(--sk-bg); }
.sk-header .inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 16px;
  flex-wrap: wrap;
  min-height: 64px;
  padding: 8px 22px;
}
.sk-wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--sk-text); text-decoration: none; }
.sk-wordmark svg { width: 26px; height: 26px; flex: none; }
.sk-wordmark .word { font-family: var(--sk-mono); font-weight: 500; font-size: 15px; letter-spacing: 0.34em; padding-left: 0.34em; }
.sk-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sk-nav .links { display: flex; gap: 18px; flex-wrap: wrap; }
.sk-nav a { color: var(--sk-muted); text-decoration: none; font-size: 14px; }
.sk-nav a:hover { color: var(--sk-text); }
.sk-nav a.on { color: var(--sk-accent); }
.sk-main { max-width: 960px; margin: 0 auto; padding: 36px 22px 64px; }
.sk-footer { max-width: 960px; margin: 0 auto; padding: 0 22px 40px; color: var(--sk-muted); font-size: 13px; }
.sk-footer p { margin: 0; }

.sk-lede { color: var(--sk-muted); font-size: 15px; margin: 0 0 22px; }
.sk-muted { color: var(--sk-muted); }
.sk-inline { display: inline; }

.sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--sk-r-l);
  font-family: var(--sk-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sk-text);
  background: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.sk-btn.primary { background: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-accent-ink); }
.sk-btn.primary:hover { background: var(--sk-accent-strong); border-color: var(--sk-accent-strong); }
.sk-btn.secondary { background: var(--sk-panel); border-color: var(--sk-line-strong); }
.sk-btn.secondary:hover { border-color: var(--sk-muted); }
.sk-btn.danger { color: var(--sk-danger); border-color: color-mix(in srgb, var(--sk-danger) 45%, transparent); }
.sk-btn.danger:hover { background: var(--sk-danger-soft); border-color: var(--sk-danger); }
.sk-btn.link { padding: 0; border: 0; border-radius: var(--sk-r-s); font-weight: 500; font-size: 14px; color: var(--sk-muted); }
.sk-btn.link:hover { color: var(--sk-accent); }
.sk-btn:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }
.sk-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.sk-copy {
  font-family: var(--sk-mono);
  font-size: 12.5px;
  line-height: 1;
  color: var(--sk-muted);
  background: var(--sk-card);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-l);
  padding: 7px 12px;
  cursor: pointer;
}
.sk-copy:hover { color: var(--sk-text); border-color: var(--sk-muted); }
.sk-copy:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }

.sk-form label { display: block; font-size: 13px; color: var(--sk-muted); margin: 14px 0 6px; }
.sk-form input[type="text"],
.sk-form input[type="email"],
.sk-form input[type="number"],
.sk-form select,
.sk-input {
  width: 100%;
  max-width: 26rem;
  padding: 10px 12px;
  background: var(--sk-panel);
  border: 1px solid var(--sk-line-strong);
  border-radius: var(--sk-r-l);
  color: var(--sk-text);
  font-family: var(--sk-sans);
  font-size: 15px;
}
.sk-form select { width: auto; min-width: 12rem; }
.sk-form input:focus-visible, .sk-form select:focus-visible, .sk-input:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 1px;
}
.sk-form input::placeholder { color: var(--sk-muted); }
.sk-form [aria-invalid="true"], .sk-input[aria-invalid="true"] { border-color: var(--sk-danger); }
.sk-error { color: var(--sk-danger); font-size: 13px; margin: 6px 0 0; }
.sk-hint { color: var(--sk-muted); font-size: 13px; margin: 6px 0 0; }

.sk-form .cf-turnstile { margin: 16px 0 4px; max-width: 100%; overflow-x: auto; }

.sk-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; }
.sk-consent input[type="checkbox"] { margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--sk-accent); }
.sk-consent label { margin: 0; font-size: 13.5px; color: var(--sk-muted); line-height: 1.55; }

.sk-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 16px 0; }
.sk-filters label { margin: 0 0 6px; }

.sk-card {
  background: var(--sk-card);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-l);
  padding: 20px 22px;
  margin: 16px 0;
}
.sk-card > h2:first-child, .sk-card > h3:first-child { margin-top: 0; }
.sk-card.danger { border-color: color-mix(in srgb, var(--sk-danger) 50%, transparent); }

.sk-notice {
  padding: 11px 14px;
  border: 1px solid var(--sk-line-strong);
  border-radius: var(--sk-r-l);
  background: var(--sk-panel);
  color: var(--sk-text);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 16px 0;
}
.sk-notice.ok { background: var(--sk-accent-soft); border-color: var(--sk-accent); }
.sk-notice.warn { background: var(--sk-warn-soft); border-color: var(--sk-warn); }
.sk-notice.error { background: var(--sk-danger-soft); border-color: var(--sk-danger); }

.sk-badge {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--sk-line-strong);
  border-radius: var(--sk-pill);
  font-family: var(--sk-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--sk-muted);
  white-space: nowrap;
}
.sk-badge.active { color: var(--sk-accent); border-color: color-mix(in srgb, var(--sk-accent) 45%, transparent); }
.sk-badge.grace, .sk-badge.warn { color: var(--sk-warn); border-color: color-mix(in srgb, var(--sk-warn) 45%, transparent); }
.sk-badge.expired, .sk-badge.revoked, .sk-badge.danger { color: var(--sk-danger); border-color: color-mix(in srgb, var(--sk-danger) 45%, transparent); }

.sk-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.sk-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sk-line-strong);
  color: var(--sk-muted);
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.sk-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sk-line); vertical-align: top; overflow-wrap: break-word; }
.sk-table tbody tr:hover { background: var(--sk-panel); }
.sk-table code { font-size: 13px; }
.sk-table-scroll { overflow-x: auto; margin: 16px 0; }
.sk-table-scroll .sk-table { margin: 0; min-width: 640px; }

.sk-log { list-style: none; margin: 16px 0; padding: 0; border-top: 1px solid var(--sk-line); }
.sk-log li { padding: 12px 2px; border-bottom: 1px solid var(--sk-line); }
.sk-log .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.sk-log .action {
  font-family: var(--sk-mono);
  font-size: 12.5px;
  color: var(--sk-text);
  background: var(--sk-panel);
  border: 1px solid var(--sk-line-strong);
  border-radius: var(--sk-r-s);
  padding: 1px 7px;
  white-space: nowrap;
}
.sk-log .actor { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.sk-log .subject { font-size: 14px; color: var(--sk-muted); min-width: 0; overflow-wrap: anywhere; }
.sk-log .subject code { color: var(--sk-text); }
.sk-log .when { margin-left: auto; font-family: var(--sk-mono); font-size: 12px; color: var(--sk-muted); white-space: nowrap; }
.sk-log .details { margin-top: 5px; }
.sk-log .details summary { font-family: var(--sk-mono); font-size: 12px; color: var(--sk-muted); cursor: pointer; width: fit-content; }
.sk-log .details summary:hover { color: var(--sk-accent); }
.sk-log .details pre {
  font-family: var(--sk-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--sk-text);
  background: var(--sk-token-bg);
  border: 1px solid var(--sk-line-strong);
  border-radius: var(--sk-r-l);
  padding: 10px 12px;
  margin: 8px 0 2px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sk-token {
  display: block;
  width: 100%;
  font-family: var(--sk-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sk-text);
  background: var(--sk-token-bg);
  border: 1px solid var(--sk-line-strong);
  border-radius: var(--sk-r-l);
  padding: 12px 14px;
  margin: 12px 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
textarea.sk-token { resize: vertical; }

.sk-dl { display: grid; grid-template-columns: 11rem 1fr; gap: 0.45rem 1.25rem; margin: 16px 0; }
.sk-dl dt { color: var(--sk-muted); font-size: 14px; }
.sk-dl dd { margin: 0; font-size: 14.5px; }
@media (max-width: 560px) {
  .sk-dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .sk-dl dd { margin-bottom: 8px; }
}

.sk-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }

.sk-gauge { margin: 12px 0 0; }
.sk-gauge .bar {
  display: flex;
  height: 8px;
  border-radius: var(--sk-pill);
  overflow: hidden;
  background: var(--sk-panel);
  border: 1px solid var(--sk-line-strong);
}
.sk-gauge .used { background: var(--sk-accent); }
.sk-gauge .reserved { background: var(--sk-warn); }
.sk-gauge .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13px; color: var(--sk-muted); }
.sk-gauge .legend .key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.sk-gauge .legend .key.used { background: var(--sk-accent); }
.sk-gauge .legend .key.reserved { background: var(--sk-warn); }
.sk-gauge .legend .key.free { background: var(--sk-panel); border: 1px solid var(--sk-line-strong); }
.sk-gauge .sk-w0 { width: 0%; }
.sk-gauge .sk-w1 { width: 1%; }
.sk-gauge .sk-w2 { width: 2%; }
.sk-gauge .sk-w3 { width: 3%; }
.sk-gauge .sk-w4 { width: 4%; }
.sk-gauge .sk-w5 { width: 5%; }
.sk-gauge .sk-w6 { width: 6%; }
.sk-gauge .sk-w7 { width: 7%; }
.sk-gauge .sk-w8 { width: 8%; }
.sk-gauge .sk-w9 { width: 9%; }
.sk-gauge .sk-w10 { width: 10%; }
.sk-gauge .sk-w11 { width: 11%; }
.sk-gauge .sk-w12 { width: 12%; }
.sk-gauge .sk-w13 { width: 13%; }
.sk-gauge .sk-w14 { width: 14%; }
.sk-gauge .sk-w15 { width: 15%; }
.sk-gauge .sk-w16 { width: 16%; }
.sk-gauge .sk-w17 { width: 17%; }
.sk-gauge .sk-w18 { width: 18%; }
.sk-gauge .sk-w19 { width: 19%; }
.sk-gauge .sk-w20 { width: 20%; }
.sk-gauge .sk-w21 { width: 21%; }
.sk-gauge .sk-w22 { width: 22%; }
.sk-gauge .sk-w23 { width: 23%; }
.sk-gauge .sk-w24 { width: 24%; }
.sk-gauge .sk-w25 { width: 25%; }
.sk-gauge .sk-w26 { width: 26%; }
.sk-gauge .sk-w27 { width: 27%; }
.sk-gauge .sk-w28 { width: 28%; }
.sk-gauge .sk-w29 { width: 29%; }
.sk-gauge .sk-w30 { width: 30%; }
.sk-gauge .sk-w31 { width: 31%; }
.sk-gauge .sk-w32 { width: 32%; }
.sk-gauge .sk-w33 { width: 33%; }
.sk-gauge .sk-w34 { width: 34%; }
.sk-gauge .sk-w35 { width: 35%; }
.sk-gauge .sk-w36 { width: 36%; }
.sk-gauge .sk-w37 { width: 37%; }
.sk-gauge .sk-w38 { width: 38%; }
.sk-gauge .sk-w39 { width: 39%; }
.sk-gauge .sk-w40 { width: 40%; }
.sk-gauge .sk-w41 { width: 41%; }
.sk-gauge .sk-w42 { width: 42%; }
.sk-gauge .sk-w43 { width: 43%; }
.sk-gauge .sk-w44 { width: 44%; }
.sk-gauge .sk-w45 { width: 45%; }
.sk-gauge .sk-w46 { width: 46%; }
.sk-gauge .sk-w47 { width: 47%; }
.sk-gauge .sk-w48 { width: 48%; }
.sk-gauge .sk-w49 { width: 49%; }
.sk-gauge .sk-w50 { width: 50%; }
.sk-gauge .sk-w51 { width: 51%; }
.sk-gauge .sk-w52 { width: 52%; }
.sk-gauge .sk-w53 { width: 53%; }
.sk-gauge .sk-w54 { width: 54%; }
.sk-gauge .sk-w55 { width: 55%; }
.sk-gauge .sk-w56 { width: 56%; }
.sk-gauge .sk-w57 { width: 57%; }
.sk-gauge .sk-w58 { width: 58%; }
.sk-gauge .sk-w59 { width: 59%; }
.sk-gauge .sk-w60 { width: 60%; }
.sk-gauge .sk-w61 { width: 61%; }
.sk-gauge .sk-w62 { width: 62%; }
.sk-gauge .sk-w63 { width: 63%; }
.sk-gauge .sk-w64 { width: 64%; }
.sk-gauge .sk-w65 { width: 65%; }
.sk-gauge .sk-w66 { width: 66%; }
.sk-gauge .sk-w67 { width: 67%; }
.sk-gauge .sk-w68 { width: 68%; }
.sk-gauge .sk-w69 { width: 69%; }
.sk-gauge .sk-w70 { width: 70%; }
.sk-gauge .sk-w71 { width: 71%; }
.sk-gauge .sk-w72 { width: 72%; }
.sk-gauge .sk-w73 { width: 73%; }
.sk-gauge .sk-w74 { width: 74%; }
.sk-gauge .sk-w75 { width: 75%; }
.sk-gauge .sk-w76 { width: 76%; }
.sk-gauge .sk-w77 { width: 77%; }
.sk-gauge .sk-w78 { width: 78%; }
.sk-gauge .sk-w79 { width: 79%; }
.sk-gauge .sk-w80 { width: 80%; }
.sk-gauge .sk-w81 { width: 81%; }
.sk-gauge .sk-w82 { width: 82%; }
.sk-gauge .sk-w83 { width: 83%; }
.sk-gauge .sk-w84 { width: 84%; }
.sk-gauge .sk-w85 { width: 85%; }
.sk-gauge .sk-w86 { width: 86%; }
.sk-gauge .sk-w87 { width: 87%; }
.sk-gauge .sk-w88 { width: 88%; }
.sk-gauge .sk-w89 { width: 89%; }
.sk-gauge .sk-w90 { width: 90%; }
.sk-gauge .sk-w91 { width: 91%; }
.sk-gauge .sk-w92 { width: 92%; }
.sk-gauge .sk-w93 { width: 93%; }
.sk-gauge .sk-w94 { width: 94%; }
.sk-gauge .sk-w95 { width: 95%; }
.sk-gauge .sk-w96 { width: 96%; }
.sk-gauge .sk-w97 { width: 97%; }
.sk-gauge .sk-w98 { width: 98%; }
.sk-gauge .sk-w99 { width: 99%; }
.sk-gauge .sk-w100 { width: 100%; }
/* sk-elements:end */

/* demo terminal replays (homepage + /demo/) */
.demo-casts {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  margin: 2.6rem auto 0;
}

.demo-arc > h2 {
  margin: 0 0 0.4rem;
}

.demo-arc > p {
  margin: 0 0 1.4rem;
  color: var(--ash);
  max-width: 62ch;
}

.demo-grid {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.term-demo {
  margin: 0;
  min-width: 0;
}

.term-demo .term-bar {
  gap: 8px;
}

.term-demo .term-bar .t {
  font-weight: 600;
  color: var(--mist);
}

.term-demo .term-bar .bar-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ash);
  margin-left: 10px;
}

.term-demo .term-bar .term-replay {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ash);
  font: inherit;
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}

.term-demo .term-bar .term-replay:hover {
  color: var(--signal);
  border-color: var(--signal);
}

.term-body {
  max-height: 460px;
  overflow: auto;
  scrollbar-width: thin;
}
.term-body:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

.term-screen {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  white-space: pre;
  color: #aeb9c4;
}

.term-screen .sig { color: var(--signal); }
.term-screen .crit { color: var(--coral); }
.term-screen .warn { color: var(--amber); }
.term-screen .dim { color: #768290; }
.term-screen .b { font-weight: 600; }

.term-demo.anim .term-out { display: block; overflow: hidden; max-height: 0; }
.term-demo.anim.is-done .term-out { max-height: none; }

.term-prompt {
  color: var(--signal);
  font-weight: 600;
}

.term-typed {
  color: var(--mist);
}

.term-cursor {
  display: inline-block;
  width: 0.62em;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--signal);
  margin-left: 1px;
  animation: term-blink 1.05s steps(1) infinite;
}

.term-demo.is-typing .term-cursor { animation: none; }
.term-demo.is-done .term-cursor { display: none; }

@keyframes term-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.term-session .term-body {
  position: relative;
  scroll-behavior: smooth;
}

.term-session .sbeat {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.term-session.anim .sbeat {
  visibility: hidden;
  opacity: 0;
}

.term-session.anim .sbeat.on,
.term-session.anim.is-done .sbeat {
  visibility: visible;
  opacity: 1;
}

.demo-honesty {
  margin: 0.7rem 2px 0;
  color: var(--ash);
  font-size: 0.9rem;
}

.demo-note {
  margin-top: 2.6rem;
  color: var(--ash);
  font-size: 0.9rem;
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .term-cursor { animation: none; }
  .term-demo.anim .term-out { max-height: none; }
  .term-session.anim .sbeat { visibility: visible; opacity: 1; transition: none; }
  .term-session .term-body { scroll-behavior: auto; }
}