:root{
    --void:#0E1116;
    --panel:#161A21;
    --panel-2:#1C222B;
    --brass:#B8842E;
    --brass-lit:#D9A94E;
    --paper:#E9EDF3;
    --muted:#8E99A8;
    --line:rgba(233,237,243,.10);
    --line-2:rgba(233,237,243,.18);
    --serif:"Spectral",Georgia,"Times New Roman",serif;
    --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
    --measure:1040px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--void); color:var(--paper);
    font-family:var(--serif); font-weight:300; font-size:18px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--measure); margin:0 auto; padding:0 28px;}
  a{color:var(--brass-lit);}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--brass-lit); outline-offset:3px;
  }
  .skip{position:absolute; left:-9999px;}
  .skip:focus{left:16px; top:16px; z-index:99; background:var(--brass); color:#161004; padding:10px 16px; border-radius:6px; font-family:var(--mono); font-size:13px;}

  /* ---------- top bar ---------- */
  .topbar{position:sticky; top:0; z-index:20; background:rgba(14,17,22,.88); backdrop-filter:blur(9px); border-bottom:1px solid var(--line);}
  .topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:62px; gap:20px;}
  .mark{font-size:23px; letter-spacing:.4px; text-decoration:none; color:var(--paper); white-space:nowrap;}
  .mark span{color:var(--brass);}
  .mark sup{font-family:var(--mono); font-size:9px; color:var(--muted); top:-.9em;}
  .nav{display:flex; gap:26px; font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;}
  .nav a{color:var(--muted); text-decoration:none;}
  .nav a:hover{color:var(--brass-lit);}
  /* Below 820px the nav wraps under the wordmark rather than disappearing.
     Hiding it left the footer as the only navigation on phones, which is where
     a good share of researchers will open this. */
  @media(max-width:820px){
    .topbar .wrap{height:auto; flex-direction:column; align-items:flex-start; gap:8px; padding-top:12px; padding-bottom:12px;}
    .nav{flex-wrap:wrap; gap:12px 18px; font-size:11.5px; line-height:1.4;}
  }

  /* ---------- section shell ---------- */
  .band{padding:78px 0; border-bottom:1px solid var(--line);}
  .band.tight{padding:56px 0;}
  .eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin:0 0 18px;}
  h1,h2,h3{font-weight:400; letter-spacing:-.01em;}
  h2{font-size:clamp(27px,3.4vw,36px); line-height:1.22; margin:0 0 20px; max-width:22ch;}
  h3{font-size:19px; margin:0 0 9px; color:var(--paper);}
  .lede{font-size:19.5px; color:#C6CEDA; max-width:66ch; margin:0 0 8px;}
  .sub{color:var(--muted); max-width:66ch;}

  /* ---------- hero ---------- */
  .hero{padding:76px 0 66px; border-bottom:1px solid var(--line);}
  .hero .logo{font-size:clamp(48px,8vw,76px); line-height:1; margin:0 0 12px; letter-spacing:-.02em;}
  .hero .logo span{color:var(--brass);}
  .hero .tag{font-style:italic; font-size:clamp(18px,2.4vw,22px); color:var(--muted); margin:0 0 42px;}
  .hero h1{font-size:clamp(28px,4.1vw,44px); line-height:1.2; margin:0 0 22px; max-width:20ch;}
  .hero .lede{margin-bottom:34px;}
  .ctarow{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
  .btn{display:inline-block; font-family:var(--mono); font-size:13.5px; letter-spacing:.02em; text-decoration:none;
       padding:13px 22px; border-radius:5px; border:1px solid var(--brass); background:var(--brass); color:#161004; cursor:pointer;}
  .btn:hover{background:var(--brass-lit); border-color:var(--brass-lit);}
  .btn.ghost{background:transparent; color:var(--paper); border-color:var(--line-2);}
  .btn.ghost:hover{border-color:var(--brass-lit); color:var(--brass-lit);}
  .stamp{font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:22px; line-height:1.8;}

  /* ---------- signature: the ledger ---------- */
  .ledger{margin:46px 0 0; border:1px solid var(--line-2); border-radius:8px; background:var(--panel); overflow:hidden;}
  .ledger-head{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 16px;
               border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--muted);
               letter-spacing:.1em; text-transform:uppercase;}
  .ledger-head b{color:var(--brass); font-weight:500;}
  .ledger-body{padding:6px 0 10px; overflow-x:auto;}
  .lrow{display:grid; grid-template-columns:64px 1fr auto; gap:18px; align-items:baseline;
        padding:8px 16px; font-family:var(--mono); font-size:12.5px; color:#B6C0CE; white-space:nowrap;
        opacity:0; transform:translateY(4px); animation:rise .5s ease forwards;}
  .lrow .t{color:var(--muted);}
  .lrow .ok{color:var(--brass-lit);}
  .lrow:nth-child(1){animation-delay:.25s;}
  .lrow:nth-child(2){animation-delay:.65s;}
  .lrow:nth-child(3){animation-delay:1.05s;}
  .lrow:nth-child(4){animation-delay:1.45s;}
  @keyframes rise{to{opacity:1; transform:none;}}
  .ledger-note{padding:10px 16px 0; border-top:1px solid var(--line); margin-top:6px;
               font-family:var(--mono); font-size:11px; color:var(--muted);}
  @media(prefers-reduced-motion:reduce){ .lrow{opacity:1; transform:none; animation:none;} html{scroll-behavior:auto;} }
  @media(max-width:560px){ .lrow{grid-template-columns:56px 1fr; font-size:11.5px;} .lrow .ok{grid-column:2; color:var(--brass-lit);} }

  /* ---------- grids ---------- */
  .cols{display:grid; gap:22px; margin-top:12px;}
  .c2{grid-template-columns:repeat(2,1fr);}
  .c3{grid-template-columns:repeat(3,1fr);}
  .card{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:24px;}
  .card p{font-size:15.5px; color:var(--muted); margin:0;}
  .card h3{color:var(--brass);}
  @media(max-width:860px){ .c2,.c3{grid-template-columns:1fr;} }

  /* principles list */
  .principles{list-style:none; margin:6px 0 0; padding:0; border-top:1px solid var(--line);}
  .principles li{padding:20px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:230px 1fr; gap:26px; align-items:baseline;}
  .principles strong{font-weight:400; color:var(--brass); font-family:var(--mono); font-size:13px; letter-spacing:.03em; text-transform:uppercase;}
  .principles span{color:var(--muted); font-size:16.5px;}
  @media(max-width:760px){ .principles li{grid-template-columns:1fr; gap:6px;} }

  /* ---------- screenshot slot ---------- */
  .shot{border:1px solid var(--line-2); border-radius:9px; background:var(--panel); padding:14px; margin-top:10px;}
  .shot img{display:block; width:100%; height:auto; border-radius:5px;}
  .shot-placeholder{display:flex; align-items:center; justify-content:center; min-height:300px; border:1px dashed var(--line-2);
                    border-radius:5px; background:var(--panel-2); color:var(--muted); font-family:var(--mono); font-size:12.5px; text-align:center; padding:24px; line-height:1.9;}
  .caption{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:12px;}

  /* ---------- composed output panel ---------- */
  .demo{border:1px solid var(--line-2); border-radius:9px; background:var(--panel); overflow:hidden; margin-top:14px;}
  .demo-head{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 18px;
             border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--muted);
             letter-spacing:.11em; text-transform:uppercase;}
  .demo-head b{color:var(--brass); font-weight:500;}
  .demo-grid{display:grid; grid-template-columns:290px 1fr;}
  .demo-in{padding:26px 22px; border-right:1px solid var(--line); background:var(--panel-2);}
  .demo-out{padding:26px 26px 28px;}
  .demo-lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
            color:var(--brass); margin:0 0 16px;}
  .kv{margin:0;}
  .kv dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:5px;}
  .kv dd{margin:0 0 18px; font-size:15.5px; color:#C6CEDA; line-height:1.45;}
  .kv dd:last-child{margin-bottom:0;}
  .scaf{margin:0; border-top:1px solid var(--line);}
  .scaf-row{display:grid; grid-template-columns:1fr 168px; gap:20px; padding:13px 0; border-bottom:1px solid var(--line); align-items:baseline;}
  .scaf-row .h{font-size:16.5px; color:var(--paper);}
  .scaf-row .h em{display:block; font-style:normal; font-size:14px; color:var(--muted); margin-top:4px; line-height:1.5;}
  .scaf-row .w{font-family:var(--mono); font-size:11.5px; color:var(--brass); text-align:right; white-space:nowrap;}
  .scaf-note{font-size:15px; color:var(--muted); margin:16px 0 0; padding-left:15px; border-left:2px solid var(--brass);}
  .scaf-note b{color:var(--paper); font-weight:400;}
  @media(max-width:860px){
    .demo-grid{grid-template-columns:1fr;}
    .demo-in{border-right:0; border-bottom:1px solid var(--line);}
    .scaf-row{grid-template-columns:1fr; gap:5px;}
    .scaf-row .w{text-align:left;}
  }

  /* ---------- roadmap ---------- */
  .roadmap{border:1px solid var(--line-2); border-radius:9px; background:var(--panel); padding:26px; margin-top:8px;}
  .flag{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
        color:var(--brass); border:1px solid var(--brass); border-radius:20px; padding:3px 11px; margin-bottom:16px;}

  /* ---------- founder ---------- */
  .founder{display:grid; grid-template-columns:190px 1fr; gap:34px; align-items:start;}
  .portrait{width:190px; height:190px; border-radius:9px; object-fit:cover; border:1px solid var(--line-2); background:var(--panel-2);}
  .portrait-slot{width:190px; height:190px; border-radius:9px; border:1px dashed var(--line-2); background:var(--panel-2);
                 display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted);
                 font-family:var(--mono); font-size:11px; padding:14px; line-height:1.7;}
  .links{font-family:var(--mono); font-size:13px; margin-top:16px; display:flex; flex-wrap:wrap; gap:8px 20px;}
  @media(max-width:700px){ .founder{grid-template-columns:1fr;} }

  /* ---------- form ---------- */
  .form{background:var(--panel); border:1px solid var(--line-2); border-radius:9px; padding:28px; margin-top:12px; max-width:640px;}
  .field{margin-bottom:18px;}
  .field label{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px;}
  .field input,.field select,.field textarea{
    width:100%; background:var(--void); color:var(--paper); border:1px solid var(--line-2); border-radius:5px;
    padding:11px 12px; font-family:var(--serif); font-size:16px;
  }
  .field textarea{min-height:92px; resize:vertical; line-height:1.55;}
  .field .hint{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:6px;}
  .hidden{display:none;}
  .consent{display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--muted); margin:4px 0 22px;}
  .consent input{margin-top:5px; width:16px; height:16px; flex-shrink:0;}

  /* ---------- notes / footer ---------- */
  .note{font-family:var(--mono); font-size:12.5px; line-height:1.8; color:var(--muted);
        background:var(--panel); border-left:2px solid var(--brass); border-radius:0 6px 6px 0; padding:16px 18px; margin-top:26px;}
  footer{padding:52px 0 72px; color:var(--muted); font-size:14px;}
  .fnav{font-family:var(--mono); font-size:12.5px; display:flex; flex-wrap:wrap; gap:10px 24px; margin-bottom:26px;}
  .fnav a{color:var(--muted); text-decoration:none;}
  .fnav a:hover{color:var(--brass-lit);}
  .disclaimer{font-size:13.5px; line-height:1.75; max-width:74ch; margin:0 0 14px;}
  .rule{height:1px; background:var(--line); margin:0;}
  /* ---------- document pages ---------- */
  .doc{padding:56px 0 30px;}
  .doc h1{font-size:clamp(30px,4vw,42px); line-height:1.2; margin:0 0 14px; max-width:24ch;}
  .doc .updated{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em;}
  .doc-body{padding:10px 0 70px;}
  .doc-body h2{font-size:23px; margin:44px 0 14px; max-width:34ch;}
  .doc-body h3{font-size:17px; color:var(--brass); margin:28px 0 8px;}
  .doc-body p,.doc-body li{font-size:17px; color:#C6CEDA; max-width:74ch;}
  .doc-body ul,.doc-body ol{padding-left:22px;}
  .doc-body li{margin-bottom:9px;}
  .doc-body p{margin:0 0 16px;}
  .doc-body table{border-collapse:collapse; width:100%; max-width:74ch; margin:8px 0 22px; font-size:15.5px;}
  .doc-body th,.doc-body td{text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--line); color:#C6CEDA;}
  .doc-body th{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); font-weight:500;}
  .doc-body .lead{font-size:19.5px; color:var(--paper); max-width:70ch;}
  .back{font-family:var(--mono); font-size:12.5px; display:inline-block; margin-bottom:26px; color:var(--muted); text-decoration:none;}
  .back:hover{color:var(--brass-lit);}