:root{--ink:#252636;--muted:#777988;--purple:#6453cf;--purple-dark:#5140b8;--purple-soft:#f1eef9;--line:#e9e9ef;--surface:#fff;--canvas:#f7f8fa;--action-height:40px;--action-corner-radius:999px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
.wrap{width:min(1180px,calc(100% - 64px));margin:auto}
header{display:flex;align-items:center;justify-content:space-between;padding:28px 0;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;flex-shrink:0;font-size:29px;font-weight:800;letter-spacing:-1.5px}
.brand-mark{display:block;flex-shrink:0;width:36px;height:36px;margin-right:10px}
.hub-mark{display:block;margin:0 auto 4px}
.brand span,.hub>span{color:var(--purple)}
nav{display:flex;align-items:center;gap:30px;flex:1;margin-left:48px;font-size:14px;font-weight:600}
/* Match the application's action sizing while retaining the public palette. */
.button,
nav>a,
.actions>.text-link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--action-height);padding:0 17px;border:1px solid transparent;border-radius:var(--action-corner-radius);font:600 14px/20px "Segoe UI",Arial,sans-serif;white-space:nowrap;touch-action:manipulation;transition:color 150ms ease,background-color 150ms ease,border-color 150ms ease,box-shadow 150ms ease,transform 150ms ease}
.button{height:var(--action-height);gap:9px;background:var(--purple);border-color:var(--purple);color:white;box-shadow:0 2px 5px #5140b81a}
.button:hover{background:var(--purple-dark);border-color:var(--purple-dark);text-decoration:none;transform:translateY(-1px);box-shadow:0 3px 8px #5140b824}
.button:active{transform:translateY(0);box-shadow:none}
.button.small{height:var(--action-height);padding:0 17px}
nav>a{padding-inline:12px}
nav>a:not(.button):hover{background:var(--purple-soft);color:var(--purple-dark);text-decoration:none}
.actions>.text-link{height:var(--action-height);background:var(--surface);border-color:var(--line);color:var(--ink)}
.actions>.text-link:hover{background:var(--purple-soft);border-color:var(--purple);text-decoration:none}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;padding:85px 0 90px}
.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750;color:var(--purple-dark)}
h1{font-size:clamp(38px,4.2vw,62px);line-height:1.12;letter-spacing:-2.5px;margin:26px 0}
h1>span{color:var(--purple)}
.intro{max-width:500px;font-size:18px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.text-link{font-size:14px;font-weight:600}
.status{font-size:12px;color:var(--muted);margin-top:23px}
.status span{color:var(--purple);margin-right:6px}
.network-art{height:430px;position:relative;background:radial-gradient(ellipse,var(--purple-soft),transparent 68%)}
.orbit{position:absolute;width:290px;height:290px;border:1px dashed #d6cff2;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.hub{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-size:33px;font-weight:750;letter-spacing:-1px;background:#fff;padding:25px 30px;border-radius:14px;box-shadow:0 12px 40px #5140b81a;border:1px solid var(--line)}
.hub small{display:block;font-size:8px;letter-spacing:2px;text-align:center;margin-top:5px;color:var(--muted)}
.node{position:absolute;background:#fff;border:1px solid var(--line);border-radius:9px;padding:13px 18px;box-shadow:0 7px 20px #5140b812}
.node>span{float:left;margin-right:12px;color:#8a7bd6;font-size:12px}
.node strong,.node small{display:block}
.node strong{font-size:13px}
.node small{font-size:10px;color:var(--muted)}
.n1{top:35px;left:24px}
.n2{right:0;top:170px}
.n3{bottom:50px;left:10px}
.art-note{position:absolute;bottom:0;text-align:center;width:100%;font-size:11px;color:var(--muted)}
.section{padding:65px 0;border-top:1px solid var(--line)}
h2{font-size:36px;line-height:1.2;letter-spacing:-1.3px;margin:18px 0 32px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cards article{padding:25px 0}
.number{font-size:11px;letter-spacing:1px;color:var(--muted)}
h3{font-size:19px;line-height:1.4;margin:20px 0 10px}
.cards p,.developers p{color:var(--muted);font-size:15px}
.developers{display:grid;grid-template-columns:1fr .8fr;gap:100px}
.developers aside{background:var(--purple-soft);padding:30px 35px;border-radius:10px}
.developers>div>p{max-width:470px}
.closing{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:40px 0}
.closing h2{margin:0;font-size:29px}
.skip{position:absolute;top:-80px;left:16px;padding:10px;background:white;z-index:5}
.skip:focus{top:10px}
@media(max-width:800px){.wrap{width:calc(100% - 36px)}
nav{gap:16px}
header{flex-wrap:wrap;gap:18px}
nav{flex-wrap:wrap;gap:16px;width:100%;flex:none;margin-left:0}
nav .button{margin-left:auto}
.hero{grid-template-columns:1fr;padding:45px 0}
.network-art{max-width:480px;width:100%;margin:auto;height:370px}
h1{font-size:clamp(34px,8vw,45px)}
.cards{grid-template-columns:1fr;gap:0}
.cards article{border-bottom:1px solid var(--line)}
.developers{grid-template-columns:1fr;gap:25px}
.section{padding:45px 0}
.closing{align-items:flex-start;gap:20px;flex-direction:column}
.n2{right:0}
.n1{left:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.button,nav>a,.actions>.text-link{transition:none}
.button:hover{transform:none}
}


.section-intro{max-width:600px;color:var(--muted)}
.examples{gap:24px}
.examples article{padding:24px;background:var(--purple-soft);border-radius:10px}
.questions{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}
.answers details{border-bottom:1px solid var(--line);padding:20px 0}
.answers summary{font-weight:650;cursor:pointer;min-height:28px}
.answers summary:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
.answers p{color:var(--muted);font-size:15px}
.answers a{text-decoration:underline}
@media(max-width:800px){.questions{grid-template-columns:1fr;gap:0}
.examples{gap:16px}
}


.auth-link{margin-left:auto}.steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:0;margin:35px 0}.steps li{counter-increment:step;border-top:2px solid var(--line);padding-top:20px}.steps li:before{content:"0" counter(step);color:var(--purple);font-size:13px;font-weight:700}.steps p{font-size:15px;color:var(--muted)}.walkthrough{max-width:780px;background:var(--purple-soft);padding:24px 32px;border-radius:10px}.walkthrough>p:not(.eyebrow):not(.status){color:var(--muted)}.walkthrough h3{margin-top:8px}section[id]{scroll-margin-top:24px}@media(max-width:1000px){nav{gap:12px;margin-left:24px}.steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){nav{display:flex;flex-wrap:wrap;gap:8px;margin-left:0}nav>a{padding-inline:12px}.auth-link{margin:0}nav .button{margin:0}.steps{grid-template-columns:1fr;gap:16px}.walkthrough{padding:22px}}