*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0;overflow-x:hidden;max-width:100vw}

html{overscroll-behavior-x:none;-webkit-text-size-adjust:100%}

img,svg{max-width:100%;height:auto}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

body{
  background:#000;
  color:#F8FAFC;
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:48px 28px 64px;
  max-width:680px;
  margin:0;
  position:relative;
}

/* Oldschool 1996 top-right nav. Desktop only. */
.topnav{
  position:fixed;
  top:28px;
  right:28px;
  font:11px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  text-transform:lowercase;
  letter-spacing:.04em;
  z-index:10;
}
.topnav a{
  color:#F8FAFC;
  text-decoration:none;
  padding:0 4px;
}
.topnav a:hover{
  background:#fff;
  color:#000;
}
.topnav .sep{color:#475569;padding:0 2px;user-select:none}

@media (max-width:760px){
  .topnav{display:none}
}

.logo{
  color:#F8FAFC;
  font:13px/1.15 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  margin:0 0 24px;
  white-space:pre;
  overflow:hidden;
  max-width:100%;
}

h1{
  color:#F8FAFC;
  font-size:26px;
  font-weight:600;
  margin:16px 0 24px;
  letter-spacing:-.015em;
}

.tagline{
  color:#94A3B8;
  margin:0 0 24px;
  font-size:15px;
}

.callout{
  color:#F8FAFC;
  font-size:17px;
  line-height:1.5;
  font-weight:500;
  margin:0 0 48px;
  max-width:100%;
}

/* Small badge — replaces colored-rail callouts */
.badge{
  display:inline-block;
  background:#fff;
  color:#000;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:3px 8px;
  border-radius:3px;
  vertical-align:2px;
  margin-right:6px;
  white-space:nowrap;
}

.banner{
  color:#F8FAFC;
  font-size:14px;
  line-height:1.55;
  margin:0 0 28px;
  max-width:100%;
}

.soon{
  color:#64748B;
  font-size:11px;
  margin-left:8px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:500;
}

/* Vision lineage — plain rows, no rail */
.lineage{
  list-style:none;
  padding:0;
  margin:16px 0 16px;
}
.lineage li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 14px;
  padding:4px 0;
  font:13px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.lineage .y{color:#64748B;min-width:48px;flex-shrink:0}
.lineage .n{color:#F8FAFC;font-weight:700;min-width:70px;flex-shrink:0}
.lineage .d{color:#94A3B8;flex:1 1 160px;min-width:0}

/* Roadmap — plain rows, version in inverted badge, no rail */
.roadmap{
  list-style:none;
  padding:0;
  margin:16px 0;
}
.roadmap li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
  padding:10px 0;
  border-bottom:1px solid #111;
}
.roadmap li:last-child{border-bottom:0}
.roadmap .v{
  display:inline-block;
  background:#fff;
  color:#000;
  font:700 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  padding:3px 7px;
  border-radius:3px;
  letter-spacing:.05em;
  flex-shrink:0;
}
.roadmap .t{
  color:#F8FAFC;
  font-size:14px;
  line-height:1.5;
  flex:1 1 220px;
  min-width:0;
}
.roadmap .e{
  color:#64748B;
  font:500 11px/1 -apple-system,BlinkMacSystemFont,sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  flex-shrink:0;
}

/* Technical specs — plain dt/dd, no rail */
.specsheet{
  margin:16px 0;
  padding:0;
}
.specsheet > div{
  display:flex;
  flex-wrap:wrap;
  gap:4px 16px;
  padding:5px 0;
  font:13px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.specsheet dt{
  color:#64748B;
  min-width:130px;
  flex-shrink:0;
}
.specsheet dd{
  color:#F8FAFC;
  margin:0;
  flex:1 1 200px;
  min-width:0;
  word-break:break-word;
}

main{counter-reset:section}

h2{
  color:#F8FAFC;
  font-size:13px;
  font-weight:700;
  margin:40px 0 12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  counter-increment:section;
}

h2::before{
  content:counter(section,decimal-leading-zero) "  ";
  color:#475569;
  font-weight:400;
  letter-spacing:0;
}

h3.tier{
  color:#F8FAFC;
  font-size:15px;
  font-weight:700;
  margin:28px 0 8px;
}

p,ol,ul{margin:0 0 10px;overflow-wrap:anywhere;word-break:break-word}

ol,ul{padding-left:22px}

ol{list-style:decimal}
ul.links{list-style:none;padding-left:0}

li{margin:6px 0;color:#F8FAFC}

li b{color:#F8FAFC;font-weight:700}

a{
  color:#F8FAFC;
  text-decoration:underline;
  text-decoration-color:#334155;
  text-underline-offset:3px;
}

a:hover{
  color:#fff;
  text-decoration-color:#fff;
}

.formula{
  color:#F8FAFC;
  font:14px/1.7 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  margin:12px 0 16px;
  padding:4px 0;
  white-space:pre;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}

.formula sup{font-size:.75em;vertical-align:super;line-height:0}
.formula sub{font-size:.75em;vertical-align:sub;line-height:0}

.back{
  margin:0 0 24px;
  font-size:13px;
}

.back a{color:#94A3B8;text-decoration:none}
.back a:hover{color:#fff}

.meta{
  color:#475569;
  font-size:12px;
  margin-top:56px;
}

footer{
  max-width:680px;
  margin:80px 0 0;
  padding:24px 28px 32px;
  color:#64748B;
  font-size:13px;
  border-top:1px solid #1E293B;
}

footer p{margin:0}

@media (max-width:480px){
  body{padding:32px 18px 48px;font-size:14px}
  .logo{font-size:11px}
  h1{font-size:22px}
  footer{padding:24px 18px;margin-top:56px}
}