:root{
    --paper:#ffffff; --wash:#f5f8fc; --ink:#0b1a33; --ink-2:#3a4a63; --muted:#5b6a82;
    --line:#e4eaf3; --line-2:#eef2f8;
    --blue:#1273e6; --blue-deep:#0a3f8f; --cyan:#14b8d4; --green:#12a150; --red:#d0342c;
    --sidebar-w:290px; --bar-h:80px;
}
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;}
  a{color:var(--blue); text-decoration:none;} a:hover{text-decoration:underline;}

  /* shell */
  .shell{display:flex; max-width:1260px; margin:0 auto; align-items:flex-start;}
  .toc{position:sticky; top:var(--bar-h); align-self:flex-start; width:var(--sidebar-w); flex-shrink:0; height:calc(100vh - var(--bar-h)); overflow-y:auto; padding:26px 16px 60px 24px; border-right:1px solid var(--line);}
  .toc-title{font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin:0 0 12px 8px;}
  .toc-part{font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700; letter-spacing:.3px; color:var(--blue-deep); margin:20px 0 6px; padding:4px 8px; display:block; border-radius:7px;}
  .toc-part:first-of-type{margin-top:0;}
  .toc-part:hover{background:var(--wash); text-decoration:none;}
  .toc a{display:block; font-size:13px; line-height:1.4; color:var(--ink-2); padding:5px 8px; border-radius:7px; text-decoration:none;}
  .toc a:hover{background:var(--wash); color:var(--ink); text-decoration:none;}
  .toc a.toc-h2{padding-left:20px; font-size:12.5px; color:var(--muted);}
  .toc a.active{background:#e7f0fd; color:var(--blue-deep); font-weight:600;}

  .content{flex:1; min-width:0; padding:44px 56px 120px; max-width:820px;}
  .gsec{scroll-margin-top:calc(var(--bar-h) + 12px);}
  .content h1{font-family:'Space Grotesk',sans-serif; font-size:30px; line-height:1.2; font-weight:700; letter-spacing:-0.6px; color:var(--ink); margin:54px 0 18px; scroll-margin-top:calc(var(--bar-h) + 14px);}
  .content h2{font-family:'Space Grotesk',sans-serif; font-size:21px; font-weight:600; color:var(--ink); letter-spacing:-0.2px; margin:32px 0 12px; scroll-margin-top:calc(var(--bar-h) + 14px);}
  .content h3{font-size:17px; font-weight:700; color:var(--ink); margin:22px 0 8px;}
  .content p{margin:0 0 16px; color:var(--ink-2);}
  .content strong{color:var(--ink); font-weight:700;}
  .content ul,.content ol{margin:0 0 18px; padding-left:22px; color:var(--ink-2);}
  .content li{margin:6px 0;}
  .content hr{border:none; border-top:1px solid var(--line-2); margin:32px 0;}
  .content code{background:var(--wash); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-family:'SF Mono',ui-monospace,monospace; font-size:13.5px; color:var(--blue-deep);}
  .content pre{background:#0d2748; color:#dceafc; border:1px solid #123a63; border-radius:12px; padding:18px 20px; overflow-x:auto; margin:8px 0 22px; line-height:1.9;}
  .content pre code{background:none; border:none; color:inherit; padding:0; font-size:14px; white-space:pre-wrap;}

  /* section opener: the first h1 of each section reads as a chapter title */
  .content > h1:first-child{font-size:40px; margin-top:0; padding-top:8px;}
  #why, #how{border-top:2px solid var(--line); margin-top:64px; padding-top:20px;}

  .content table{width:100%; border-collapse:collapse; margin:8px 0 24px; font-size:14.5px;}
  .content th,.content td{border:1px solid var(--line); padding:10px 14px; text-align:left;}
  .content th{background:var(--wash); font-weight:700; color:var(--ink);}
  .content td{color:var(--ink-2);}

  .callout{border-radius:12px; padding:18px 22px; margin:8px 0 24px; border:1px solid var(--line); background:var(--wash);}
  .callout p:last-child{margin-bottom:0;}
  .cal-label{font-weight:700; font-size:13px; letter-spacing:.4px; text-transform:uppercase; margin-bottom:6px;}
  .cal-warn{background:#fff5f4; border-color:#f6cfcb;} .cal-warn .cal-label{color:var(--red);}
  .cal-tip{background:#eefaf2; border-color:#bfe6cd;} .cal-tip .cal-label{color:var(--green);}
  .cal-note{background:#eef4fd; border-color:#cfe0fb;}
  /* the Why hero blockquote */
  .cal-hero{background:linear-gradient(135deg,#0f4fa8,#0a3f8f); border:none; padding:30px 32px;}
  .cal-hero h2{font-family:'Space Grotesk',sans-serif; color:#fff; font-size:26px; line-height:1.25; margin:0 0 14px; letter-spacing:-0.4px;}
  .cal-hero p{color:rgba(255,255,255,.9);} .cal-hero p:last-child{margin-bottom:0;}

  .backtop{position:fixed; right:22px; bottom:22px; background:var(--blue); color:#fff; width:44px; height:44px; border-radius:12px; border:none; font-size:18px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s; box-shadow:0 6px 18px rgba(18,115,230,.35);}
  .backtop.show{opacity:1; pointer-events:auto;}
  .toc-backdrop{display:none;}

  @media (max-width:1024px){
    .gbar-menu{display:inline-flex; align-items:center; justify-content:center;}
    .toc{position:fixed; top:var(--bar-h); left:0; bottom:0; height:auto; z-index:45; background:var(--paper); width:300px; transform:translateX(-100%); transition:transform .25s; box-shadow:0 10px 40px rgba(11,26,51,.15);}
    .toc.open{transform:translateX(0);}
    .toc-backdrop.show{display:block; position:fixed; inset:var(--bar-h) 0 0 0; background:rgba(11,26,51,.35); z-index:44;}
    .content{padding:32px 24px 100px;}
  }
  @media (max-width:820px){
    .gbar-brand{width:auto; padding:0 12px;}
    .wm-sub{display:none;}
    .wm-side{font-size:23px;}
    .wm-logo-side{width:38px; height:38px;}
    .gbar-row1{padding:0 14px 0 12px; gap:8px;}
    .gbar-nav{gap:8px;} .gbar-nav a{padding:6px 12px; font-size:12px;}
    .gbar-cta{padding:6px 13px; font-size:12px;}
    .gbar-ticker{padding:1px 14px 9px; gap:16px; font-size:13px; flex-wrap:wrap;}
    .content > h1:first-child{font-size:30px;}
  }
  @media (max-width:560px){ .gbar-ticker{gap:6px 14px;} }
  @media (max-width:480px){
    .gbar-inner{flex-wrap:wrap;}
    .gbar-brand{flex:1; min-width:0;}
    .gbar-main{flex-basis:100%; order:3;}
    .gbar-row1{flex-wrap:wrap; height:auto; padding:8px 12px; row-gap:6px;}
    .gbar-nav{flex-wrap:wrap;}
    .gbar-sp{display:none;}
  }


  /* ── end-of-page CTA (matches app Create Token button) ── */
  .end-cta{text-align:center; margin:52px 0 8px;}
  .end-cta .create-btn{display:inline-flex; flex-direction:column; align-items:center; gap:4px; background:linear-gradient(180deg,#1273e6 0%,#0a3f8f 100%); color:#fff; border:1px solid rgba(20,224,252,0.45); border-radius:11px; font-size:16px; font-weight:700; padding:16px 40px; font-family:'Inter',sans-serif; text-decoration:none; box-shadow:0 4px 18px rgba(2,125,252,0.28); transition:all 0.15s;}
  .end-cta .create-btn:hover{filter:brightness(1.08); text-decoration:none;}
  .end-cta .create-btn-sub{font-size:14px; font-weight:500; color:rgba(255,255,255,0.85);}
  /* ── tutorial video ── */
  .vid{margin:22px 0 10px;}
  .vid-frame{position:relative; width:100%; padding-bottom:56.25%; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 4px 18px rgba(16,42,86,.08); background:#000;}
  .vid-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  /* ── page journey next ── */
  .page-next-wrap{display:flex; justify-content:flex-end; margin:14px 0 0;}
  .page-next{display:inline-flex; align-items:center; gap:14px; padding:15px 24px; border:1px solid var(--line); border-radius:12px; background:var(--wash); text-decoration:none; transition:all .15s;}
  .page-next:hover{border-color:#1273e6; box-shadow:0 2px 14px rgba(18,115,230,.14); text-decoration:none;}
  .page-next .pn-k{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700;}
  .page-next b{font-size:16px; color:var(--ink);}
  .page-next .pn-a{font-size:22px; color:#1273e6; line-height:1;}
  /* ── pull quotes ── */
  .pquote{font-family:'Space Grotesk',sans-serif; font-size:27px; font-weight:700; line-height:1.32; color:var(--blue-deep); letter-spacing:-0.4px; border-left:4px solid #1273e6; padding:6px 0 6px 26px; margin:34px 0;}
  @media(max-width:820px){ .pquote{font-size:22px; padding-left:18px;} }

/* ── flow stepper ── */
.flow{background:#132a47; border:1px solid #21406a; border-radius:16px; padding:24px 26px; margin:16px 0 24px;}
.flow-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 15px;}
.flow-row + .flow-row{margin-top:16px;}
.flow-node{display:inline-flex; align-items:center; gap:9px; color:#eaf3ff; font-size:16px; font-weight:600;}
.flow-node .fic{font-size:21px; line-height:1;}
.flow-arrow{display:inline-flex; align-items:center;}
.flow-line{width:40px; height:3px; background:#14e0fc; border-radius:2px; display:inline-block;}
.flow-head{width:0; height:0; flex-shrink:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:13px solid #14e0fc; margin-left:-1px;}
@media(max-width:820px){
  .flow-node{font-size:14px;} .flow-node .fic{font-size:18px;}
  .flow-line{width:24px; height:2.5px;}
  .flow-head{border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:10px solid #14e0fc;}
}