
:root{
  color-scheme:dark;
  --tz-blue:#0F61FF;
  --tz-blue-light:#408DFF;
  --tz-bg:#05070B;
  --tz-bg-2:#0B121A;
  --tz-stealth:#1D2227;
  --tz-panel:#101820;
  --tz-panel-2:#151F29;
  --tz-text:#F6F8FA;
  --tz-muted:#B7C0CE;
  --tz-dim:#7F8A99;
  --tz-line:rgba(246,248,250,.16);
  --tz-ok:#34D983;
}
html[data-theme="light"],body.light{
  color-scheme:light;
  --tz-bg:#F6F8FA;
  --tz-bg-2:#EEF3FA;
  --tz-stealth:#1D2227;
  --tz-panel:#FFFFFF;
  --tz-panel-2:#EEF3FA;
  --tz-text:#101820;
  --tz-muted:#425166;
  --tz-dim:#66758A;
  --tz-line:rgba(29,34,39,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 18% -12%,rgba(15,97,255,.34),transparent 34rem),
    linear-gradient(180deg,var(--tz-stealth) 0%,var(--tz-bg) 440px);
  color:var(--tz-text);
  line-height:1.62;
}
a{color:#BEDFFF;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.topbar,.topnav,.shell>nav,body>nav{
  position:sticky!important;
  top:0;
  z-index:30;
  min-height:64px;
  display:flex!important;
  align-items:center;
  gap:18px;
  padding:14px max(22px,calc((100vw - 1180px)/2 + 24px))!important;
  background:rgba(16,24,32,.9)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--tz-line)!important;
  color:var(--tz-text)!important;
}
.topbar{padding:0!important}
.topbar-inner{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:14px 24px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand,nav .brand,.topnav .brand{
  display:inline-flex!important;
  align-items:center;
  gap:10px;
  margin-right:auto;
  color:var(--tz-text)!important;
  font-weight:950!important;
  letter-spacing:0;
  text-decoration:none!important;
  white-space:nowrap;
}
.brand-mark,.mark,nav .mark{
  display:inline-grid!important;
  place-items:center;
  width:34px!important;
  height:34px!important;
  border-radius:5px!important;
  background:var(--tz-blue)!important;
  color:#fff!important;
  font-size:.86rem!important;
  font-weight:950!important;
}
.nav,nav:not(.topnav),.topnav{
  display:flex;
  align-items:center;
}
.topbar .nav{
  position:static!important;
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
  color:inherit!important;
}
.nav,body>nav:not(.topbar),.shell>nav{
  gap:18px;
}
.nav a,body>nav>a:not(.brand),.shell>nav>a:not(.brand),.topnav>a:not(.brand){
  color:var(--tz-muted)!important;
  font-size:.9rem!important;
  font-weight:850!important;
  text-decoration:none!important;
}
.nav a:hover,body>nav>a:not(.brand):hover,.shell>nav>a:not(.brand):hover,.topnav>a:not(.brand):hover{color:#BEDFFF!important}
.theme-toggle{
  display:inline-grid!important;
  place-items:center;
  width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
  color:#fff!important;
  background:var(--tz-blue)!important;
  border:0!important;
  border-radius:5px!important;
  font:inherit!important;
  font-weight:900!important;
  cursor:pointer;
}
main,.container,.wrap{
  width:100%;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:52px 24px 76px!important;
}
.hero{
  position:relative;
  background:linear-gradient(135deg,rgba(15,97,255,.22),rgba(5,7,11,.8) 58%),var(--tz-stealth)!important;
  color:#fff;
  border-bottom:1px solid var(--tz-line);
}
.hero-inner{
  max-width:1180px!important;
  margin:0 auto!important;
  padding:66px 24px 58px!important;
}
.hero h1,.wrap .hero h1,h1{
  color:var(--tz-text);
  letter-spacing:0!important;
}
.hero h1{color:#fff}
h1{
  font-size:clamp(2.7rem,6vw,5.4rem)!important;
  line-height:.96!important;
  font-weight:950!important;
  margin:0 0 18px!important;
}
h2{
  color:var(--tz-text)!important;
  font-size:clamp(1.65rem,3vw,2.45rem)!important;
  line-height:1.12!important;
  letter-spacing:0!important;
  margin:0 0 14px!important;
}
h3{
  color:#DDE7F5!important;
  letter-spacing:0!important;
}
p{color:var(--tz-muted);line-height:1.65}
.lead,.lede,.tagline{
  color:#DDE7F5!important;
  font-size:1.08rem!important;
  line-height:1.62!important;
  max-width:860px;
}
section{margin-bottom:54px}
.panel,.status-panel,.plain-step,.principle,.manual-card,.step,.card,.tile,.check,.lane,.metric,.next-card,.connect-card,.prereq,.post-card,.token,.race-card,.flow-band,.record-strip,details,table{
  background:var(--tz-panel)!important;
  border:1px solid var(--tz-line)!important;
  border-radius:8px!important;
  box-shadow:none!important;
}
.panel,.plain-step,.principle,.manual-card,.step,.card,.tile,.check,.lane,.metric,.next-card,.connect-card,.prereq,.post-card,.token,.race-card{
  padding:18px;
}
.plain-grid,.principle-grid,.manual-grid,.grid,.split,.cards,.metric-grid,.next-grid,.checklist,.nodes,.token-grid,.race-grid,.connect-row,.prereq-grid{
  gap:12px!important;
}
.plain-grid,.principle-grid,.manual-grid,.cards,.metric-grid,.next-grid,.checklist,.nodes,.token-grid,.race-grid,.connect-row,.prereq-grid{
  background:transparent!important;
  border:0!important;
  overflow:visible!important;
}
.page-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px!important;
  margin:0 0 34px!important;
}
.page-links a,.link-row a,.cta-row a{
  display:inline-flex!important;
  align-items:center;
  min-height:36px;
  padding:0 12px!important;
  border:1px solid var(--tz-line)!important;
  border-radius:5px!important;
  background:var(--tz-panel-2)!important;
  color:#DDE7F5!important;
  font-size:.84rem!important;
  font-weight:850!important;
  text-decoration:none!important;
}
.primary,.secondary,.ghost,button,.logo-button,.wallet-button{
  border-radius:5px!important;
  font-weight:900!important;
  letter-spacing:0!important;
}
.primary,button.primary{
  background:var(--tz-blue)!important;
  color:#fff!important;
  border:1px solid var(--tz-blue)!important;
}
.secondary,button.secondary,.ghost{
  background:var(--tz-panel-2)!important;
  color:#fff!important;
  border:1px solid var(--tz-line)!important;
}
input,textarea,select{
  background:var(--tz-panel-2)!important;
  color:var(--tz-text)!important;
  border:1px solid var(--tz-line)!important;
  border-radius:5px!important;
}
code,pre,.ops-detail,.proof-summary{
  background:var(--tz-bg-2)!important;
  color:#BEDFFF!important;
  border-color:var(--tz-line)!important;
}
pre,code,td,th,li,a,.endpoints li,.ops-detail,.record-strip,.proof-summary{
  overflow-wrap:anywhere;
}
.endpoints li{min-width:0}
table{
  width:100%!important;
  max-width:100%!important;
  table-layout:fixed!important;
  border-collapse:collapse!important;
  overflow:hidden;
}
th{
  background:var(--tz-panel-2)!important;
  color:var(--tz-text)!important;
}
td{color:var(--tz-muted)!important}
th,td{
  min-width:0!important;
  max-width:100%!important;
  border-bottom:1px solid var(--tz-line)!important;
}
.endpoints{
  width:100%!important;
  max-width:100%!important;
  padding-left:0!important;
  list-style:none!important;
}
.endpoints li{
  width:100%!important;
  max-width:100%!important;
  display:block!important;
}
summary{color:var(--tz-text)!important}
.footer{
  border-top:1px solid var(--tz-line)!important;
  color:var(--tz-dim)!important;
}
@media(max-width:900px){
  .topbar,.topnav,.shell>nav,body>nav{position:relative!important;flex-wrap:nowrap!important;overflow-x:auto!important;padding:12px 20px!important;min-height:62px}
  .topbar-inner{flex-wrap:nowrap!important;overflow-x:auto!important;padding:12px 20px!important}
  .brand{flex:0 0 auto!important}
  .nav,body>nav:not(.topbar),.shell>nav,.topnav{gap:10px;flex:0 0 auto!important;flex-wrap:nowrap!important;overflow-x:auto!important}
  .nav a,body>nav>a:not(.brand),.shell>nav>a:not(.brand),.topnav>a:not(.brand){font-size:.82rem!important;white-space:nowrap}
  main,.container,.wrap{padding:38px 20px 60px!important}
  .hero-inner{padding:48px 20px 40px!important}
  .plain-grid,.principle-grid,.manual-grid,.grid,.split,.cards,.metric-grid,.next-grid,.checklist,.nodes,.token-grid,.race-grid,.connect-row,.prereq-grid{grid-template-columns:1fr!important}
  table{display:table!important;max-width:100%!important;overflow:hidden!important;font-size:.86rem!important}
  th,td{padding:10px 8px!important}
}
