/* Pioneer — one execution layer, multiple environments.
   Paper, ink, blue, vermilion and a deep teal, measured off the Pioneer avatar and banner. */

:root{
  --paper:      #f8ead1;
  --paper-lift: #fcf6e6;
  --paper-pfp:  #fcfbf9;
  --ink:        #1a2539;
  --ink-soft:   #4a5468;
  --ink-faint:  #8d8878;
  --blue:       #0157e2;
  --flame:      #fb4c2d;
  --rust:       #d55832;
  --teal:       #1f5d5e;
  --rule:       rgba(26,37,57,.18);
  --rule-soft:  rgba(26,37,57,.10);
  --panel:      rgba(252,246,230,.82);
  --panel-firm: rgba(252,246,230,.94);
  --chamfer:    14px;
  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:  "Poppins", "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}

/* ───────────────────────────────────────────────── the stage behind it all */
#stage{ position:fixed; inset:0; z-index:0; }
#stage canvas{ display:block; width:100%!important; height:100%!important; }
.paperwash{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(248,234,209,0) 62%, rgba(248,234,209,.62) 100%);
}
.grid-paper{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(130% 95% at 50% 30%, #000 25%, transparent 78%);
}

/* ───────────────────────────────────────────────────────────────── chrome */
.top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:linear-gradient(180deg, rgba(248,234,209,.95), rgba(248,234,209,.72));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit; }
.brand img{ display:block; width:26px; height:26px; border-radius:7px; }
.brand b{ font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:-.02em; }
.brand b i{ font-style:normal; color:var(--flame); }
.top .sp{ flex:1; }
@media (max-width:620px){
  .top{ padding:10px 12px; gap:8px; }
  .top .chip.wide{ display:none; }
  .brand b{ font-size:16px; }
  .btn{ padding:8px 13px; font-size:13px; }
}

.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  padding:5px 9px; border:1px solid var(--rule); border-radius:999px;
  color:var(--ink-soft); white-space:nowrap; background:rgba(252,251,249,.6);
}
.chip b{ color:var(--ink); font-weight:500; }

.btn{
  font-family:var(--sans); font-weight:600; font-size:14px;
  padding:9px 16px; border-radius:10px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper-pfp); cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.flame{ background:var(--flame); border-color:var(--flame); }
.btn.blue{ background:var(--blue); border-color:var(--blue); }
.btn:disabled{ opacity:.42; cursor:not-allowed; transform:none; }

/* chapter rail — the "3 / 5" chips of the diagrams, turned into navigation */
.chapters{
  position:relative; z-index:30;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:14px 16px 2px; margin:0 auto; max-width:1180px;
}
.chapters::-webkit-scrollbar{ display:none; }
.chapters a{
  display:flex; align-items:baseline; gap:8px; flex:0 0 auto;
  text-decoration:none; color:var(--ink-soft);
  font-size:13px; font-weight:500; letter-spacing:.01em;
  padding:7px 13px; border:1px solid var(--rule); border-radius:999px;
  background:rgba(252,251,249,.55);
}
.chapters a em{ font-style:normal; font-family:var(--mono); font-size:10px; color:var(--ink-faint); }
.chapters a[aria-current]{ background:var(--ink); color:var(--paper-pfp); border-color:var(--ink); }
.chapters a[aria-current] em{ color:rgba(252,251,249,.6); }

/* ───────────────────────────────────────────────────────────────── panels */
main{ position:relative; z-index:20; }
.wrap{ max-width:1180px; margin:0 auto; padding:18px 16px 96px; }

.panel{
  position:relative;
  background:var(--panel);
  backdrop-filter:blur(14px);
  border:1px solid var(--rule);
  padding:22px;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.panel.firm{ background:var(--panel-firm); }
.panel + .panel{ margin-top:16px; }

.kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px;
}
h1,h2,h3{ font-family:var(--serif); font-weight:700; letter-spacing:-.015em; margin:0; }
h1{ font-size:clamp(34px, 7.6vw, 68px); line-height:.98; }
h2{ font-size:clamp(25px, 4.4vw, 38px); line-height:1.06; }
h3{ font-size:clamp(18px, 2.6vw, 23px); line-height:1.18; }
.dot{ color:var(--flame); }
p{ margin:12px 0 0; max-width:62ch; color:var(--ink-soft); }
p.lead{ font-family:var(--serif); font-size:clamp(17px, 2.3vw, 21px); line-height:1.45; color:var(--ink); }
a{ color:var(--blue); }

.hero{ padding-top:clamp(18px, 6vw, 56px); }
@media (max-width:999px){
  /* the mechanism gets a band of its own above the reading, instead of none at all */
  .wrap > .panel.hero{ margin-top:170px; }
}
@media (min-width:1000px){
  /* the object lives in the right third; the reading column stops on the same line the two-column
     grid stops on, so the page has one right edge and not two */
  .wrap > .panel.hero{ max-width:calc(56% - 9px); }
}
.hero .rule{ height:3px; width:64px; background:var(--rust); margin:18px 0 0; }

.cols{ display:grid; gap:16px; }
@media (min-width:900px){
  .cols.two{ grid-template-columns:1.12fr .88fr; align-items:start; }
  .cols.three{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .cols.four{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (min-width:560px) and (max-width:899px){
  .cols.three,.cols.four{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* figures — the numbers, in his register: tiny label, large mono, thin rule */
.figs{ display:grid; gap:0; border-top:1px solid var(--rule); margin-top:18px; }
.fig{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
      padding:13px 0; border-bottom:1px solid var(--rule-soft); }
.fig .k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.fig .v{ font-family:var(--mono); font-size:clamp(16px, 2.4vw, 21px); color:var(--ink); font-variant-numeric:tabular-nums; }
.fig .v small{ font-size:11px; color:var(--ink-faint); letter-spacing:.06em; margin-left:6px; }

.big{ font-family:var(--mono); font-size:clamp(30px, 6.6vw, 52px); line-height:1; font-variant-numeric:tabular-nums; }
.unit{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:8px; }

/* steps — "Analyze request / Select best path / Execute seamlessly" */
.steps{ display:grid; gap:14px; margin-top:20px; }
@media (min-width:720px){ .steps{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.step{ border-top:2px solid var(--ink); padding-top:12px; }
.step .n{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--flame); }
.step h3{ margin-top:6px; font-size:19px; }
.step p{ font-size:14.5px; margin-top:7px; }

/* table — the book, the ledger, the pioneers */
.tbl{ width:100%; border-collapse:collapse; margin-top:14px; font-family:var(--mono); font-size:13px; }
.tbl th{ text-align:left; font-weight:500; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
         color:var(--ink-faint); padding:0 10px 9px 0; border-bottom:1px solid var(--rule); white-space:nowrap; }
.tbl td{ padding:11px 10px 11px 0; border-bottom:1px solid var(--rule-soft); color:var(--ink); vertical-align:top; }
.tbl td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl th.num{ text-align:right; }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.tag{ display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
      text-transform:uppercase; padding:3px 7px; border-radius:5px; border:1px solid var(--rule); color:var(--ink-soft); }
.tag.core{ color:var(--teal); border-color:rgba(31,93,94,.4); }
.tag.evm{ color:var(--blue); border-color:rgba(1,87,226,.35); }
.tag.ely{ color:var(--rust); border-color:rgba(213,88,50,.4); }
.tag.live{ color:var(--blue); border-color:rgba(1,87,226,.35); }

/* form — the request ticket */
.field{ display:block; margin-top:14px; }
.field .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.field input, .field select{
  width:100%; margin-top:7px; padding:12px 13px;
  font-family:var(--mono); font-size:15px; color:var(--ink);
  background:rgba(252,251,249,.75); border:1px solid var(--rule); border-radius:10px;
}
.field input:focus, .field select:focus{ outline:2px solid rgba(1,87,226,.35); outline-offset:1px; }
.split{ display:grid; gap:12px; }
@media (min-width:520px){ .split{ grid-template-columns:1fr 1fr; } }
.envs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.envs label{ display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-soft);
             border:1px solid var(--rule); border-radius:999px; padding:7px 12px; cursor:pointer; }
.envs input{ accent-color:var(--blue); }

.note{ font-size:13px; color:var(--ink-faint); margin-top:12px; }
.em{ color:var(--ink); }

/* footer — the diagram rule */
.footrule{
  position:relative; z-index:20;
  max-width:1180px; margin:0 auto; padding:0 16px 40px;
}
.footrule .line{ display:flex; align-items:center; gap:14px; border-top:1px solid var(--rule); padding-top:14px; }
.footrule b{ font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.16em; }
.footrule b i{ font-style:normal; color:var(--flame); }
.footrule span{ flex:1; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
                text-transform:uppercase; color:var(--ink-faint); text-align:right; }
.footrule .sq{ width:9px; height:9px; background:var(--flame); flex:0 0 auto; }
.footrule .links{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:13px; }
.footrule .links a{ color:var(--ink-soft); text-decoration:none; }
.footrule .links a:hover{ color:var(--blue); }

/* a value we do not have yet is a dash, never a story */
.dash{ color:var(--ink-faint); }