/* Neyra design system. Tokens first; every section uses these and nothing else. See DESIGN.md. */
:root{
  --ground:#0d0d0c;--raised:#141412;--ink:#e9e6df;--dim:rgba(233,230,223,.6);--faint:rgba(233,230,223,.36);--line:rgba(233,230,223,.16);
  --grotesk:"Helvetica Neue",Helvetica,Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --t-display:clamp(58px,9.4vw,158px);--t-say:clamp(32px,4.5vw,72px);--t-h2:clamp(36px,4.9vw,78px);--t-h3:clamp(21px,1.75vw,27px);--t-body:17px;--t-small:14px;--t-code:14px;
  --gut:clamp(20px,2.6vw,40px);--rail:clamp(0px,7vw,112px);--s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:clamp(96px,11vw,176px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;background:var(--ground)}
body{background:var(--ground);color:var(--ink);font:400 var(--t-body)/1.36 var(--grotesk);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
code{font:400 var(--t-code)/1.5 var(--mono);letter-spacing:0;color:var(--ink);overflow-wrap:anywhere}
::selection{background:var(--ink);color:var(--ground)}

.hero{position:relative;z-index:2;height:100svh;min-height:640px;display:grid;grid-template-rows:auto 1fr auto;padding:24px var(--gut) 28px;overflow:hidden;background:var(--ground)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
nav,.foot{position:relative;z-index:2}
nav{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;opacity:0;animation:fade 1s ease .9s forwards}
.mark{font-weight:500}
nav ul{display:flex;gap:28px}
nav a:hover,.links a:hover,.more:hover{text-decoration:underline;text-underline-offset:3px}
.foot{grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,25vw);align-items:end;gap:40px}
h1{font-size:var(--t-display);line-height:.88;letter-spacing:-.05em;font-weight:500}
h1 span{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
h1 span i{display:block;font-style:normal;transform:translateY(104%);animation:rise 1.25s cubic-bezier(.16,1,.3,1) .35s forwards}
h1 span:nth-child(2) i{animation-delay:.47s}
.side{padding-bottom:10px;opacity:0;animation:fade 1s ease 1.05s forwards}
.side p{font-size:var(--t-h3);line-height:1.1;letter-spacing:-.024em;font-weight:500}
@keyframes rise{to{transform:none}}
@keyframes fade{to{opacity:1}}

.cmd{margin-top:20px;width:100%;height:46px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--ground);border:0;border-radius:2px;font:500 14px var(--mono);cursor:pointer}
.cmd i{font:400 13px var(--grotesk);opacity:.6}
.cmd:hover{background:#fff}

#rail{position:fixed;left:0;top:0;width:var(--rail);height:100vh;z-index:1;pointer-events:none}
main{position:relative;z-index:2;padding-left:calc(var(--rail) + var(--gut));padding-right:var(--gut)}
.block{padding-top:var(--s6);scroll-margin-top:0}
.head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3);align-items:baseline;margin-bottom:var(--s5)}
.label{grid-column:1/3;font-size:var(--t-small);color:var(--dim)}
h2{grid-column:3/13;font-size:var(--t-h2);line-height:.98;letter-spacing:-.04em;font-weight:500;max-width:15em}
h3{font-size:var(--t-h3);line-height:1.1;letter-spacing:-.024em;font-weight:500}

.say{font-size:var(--t-say);line-height:1.02;letter-spacing:-.038em;font-weight:500;max-width:21em}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.three div{border-top:1px solid var(--line);padding-top:var(--s2)}
.three dt{font-weight:500;margin-bottom:6px}
.three dd{margin:0;color:var(--dim);max-width:21em}

.run{background:var(--raised);border-radius:3px;padding:var(--s2) var(--s4)}
.row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s4);padding:18px 0;border-top:1px solid var(--line);align-items:baseline}
.row.top{border-top:0}
.row p{color:var(--dim)}
.row.top code{font-weight:500}
.row.warn p{color:var(--ink)}
.fine{margin-top:var(--s2);font-size:var(--t-small);color:var(--dim);max-width:52em}

.group{margin:var(--s5) 0 var(--s2)}
.group:first-of-type{margin-top:0}
.things li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3);padding:20px 0;border-top:1px solid var(--line);align-items:baseline;transition:padding-left .25s ease}
.things:last-of-type{border-bottom:1px solid var(--line)}
.things b{grid-column:1/5;font-size:clamp(22px,2.1vw,32px);line-height:1.04;letter-spacing:-.03em;font-weight:500}
.things span{grid-column:5/9;color:var(--dim)}
.things code{grid-column:9/13;color:var(--dim);transition:color .2s}
.things li:hover code{color:var(--ink)}
.things li:hover{padding-left:10px}

.need{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.need div{border-top:1px solid var(--line);padding-top:var(--s2)}
.need b{display:block;font-size:clamp(30px,3.4vw,54px);line-height:1;letter-spacing:-.04em;font-weight:500;margin-bottom:12px}
.need span{color:var(--dim);display:block;max-width:17em}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
.two h3{padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:minmax(96px,1fr) 3fr;gap:var(--s2);padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.facts b{font-size:clamp(26px,2.7vw,42px);line-height:1;letter-spacing:-.04em;font-weight:500;font-variant-numeric:tabular-nums}
.facts span{color:var(--dim)}
.nots li{padding:15px 0;border-bottom:1px solid var(--line);color:var(--dim)}
.more{display:inline-block;margin-top:var(--s2);text-decoration:underline;text-underline-offset:3px}

.faq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s3)}
.faq div{border-top:1px solid var(--line);padding-top:var(--s2)}
.faq h3{margin-bottom:10px}
.faq p{color:var(--dim)}

.end{padding:var(--s6) 0 var(--s4)}
.end h2{font-size:var(--t-display);line-height:.9;letter-spacing:-.05em;max-width:9em}
.cmd.big{margin-top:var(--s4);max-width:420px;height:54px;font-size:16px}
.links{margin-top:var(--s5);display:flex;gap:var(--s3);flex-wrap:wrap;font-size:15px;color:var(--dim)}
.links a{color:var(--ink)}

@media (max-width:980px){
  .head,.things li{display:block}
  .label{margin-bottom:10px}
  .things span,.things code{display:block;margin-top:8px}
  .need{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:8px}
  .run{padding:var(--s2)}
}
@media (max-width:820px){
  :root{--rail:0px}
  #rail{display:none}
  .foot{grid-template-columns:1fr;gap:18px}
  h1{font-size:clamp(54px,16vw,88px)}
  nav ul{gap:18px}
  nav ul li:nth-child(1),nav ul li:nth-child(3){display:none}
  .three,.faq{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}h1 span i,.side,nav{animation:none;transform:none;opacity:1}}