:root{--join-bg:var(--an-bg);--join-surface:var(--an-surface);--join-line:var(--an-line);--join-text:var(--an-ink);--join-muted:var(--an-ink-muted);--join-core:var(--an-core)}
/* Arcturus navigation uses the core indigo; individual guide content inherits its world palette. */
.join-hero>span,.join-index__label,.guide-steps__heading>span{color:var(--an-core-soft)}.join-index{border-top-color:var(--join-core)}

/* Practical setup guide */
.join-page{max-width:1440px}.join-hero{padding-top:8px}.join-hero>span,.join-index__label,.guide-steps__heading>span{color:var(--an-ink-faint);letter-spacing:0;text-transform:none}.join-hero h1{font-size:clamp(2.15rem,3.8vw,3.3rem);line-height:1}.join-index{border-top-color:var(--an-line-strong)}.join-index nav a{border-radius:var(--an-radius-sm)}.join-help,.server-guide{background:var(--an-surface);border-radius:var(--an-radius-md);box-shadow:var(--an-shadow-card)}.guide-cover{height:260px;filter:saturate(.78)}.guide-features span,.guide-address{border-radius:var(--an-radius-sm)}

/* Tonal hierarchy: compact utility navigation, raised guides, clear controls. */
.join-index nav a{color:var(--an-ink)}
.join-index nav a:hover,.join-index nav a:focus-visible,.join-index nav a.is-active{background:var(--an-surface-hover);outline:0}
.join-index nav a.is-active{box-shadow:inset 2px 0 0 var(--an-core)}
.join-index nav a.is-active i{color:var(--an-core-soft)}
.join-help{background:var(--an-surface-raised);box-shadow:var(--an-shadow-sm)}
.server-guide{box-shadow:var(--an-shadow-sm)}
.server-guide:nth-child(even) .guide-body{background:var(--an-bg-alt)}
.guide-features span{color:var(--an-ink-muted);background:var(--an-surface-interactive);border:1px solid var(--an-line)}
.guide-address{color:var(--an-ink);background:var(--an-bg-alt);border-color:color-mix(in srgb,var(--server-accent) 45%,var(--join-line))}
.guide-address:hover,.guide-address:focus-visible{background:var(--an-surface-hover);outline:0;transform:translateY(-1px)}
.server-guide:target{border-color:color-mix(in srgb,var(--server-accent) 38%,var(--an-line))}
html[data-page="how-to-join"] body{background:var(--join-bg)}html[data-page="how-to-join"] .header{display:none}.join-page{max-width:1480px;margin:auto;padding:34px 24px 90px;color:var(--join-text)}
.join-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,.65fr);align-items:end;gap:clamp(1.5rem,5vw,4rem);max-width:none;padding:28px 0 34px;border-bottom:1px solid var(--join-line);margin-bottom:28px}.join-hero>span{grid-column:1/-1;margin-bottom:-1rem}.join-hero>span,.join-index__label,.guide-steps__heading>span{color:#d6bd8f;text-transform:uppercase;letter-spacing:.17em;font-size:.67rem;font-weight:900}.join-hero h1{color:var(--join-text);font-size:clamp(2.4rem,5vw,4.5rem);line-height:.92;letter-spacing:-.06em;font-weight:900;margin:0}.join-hero p{max-width:620px;color:var(--join-muted);font-size:1rem;line-height:1.65;margin:0}
.join-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:34px;align-items:start}.join-index{position:sticky;top:92px;border-top:2px solid var(--join-core);padding-top:18px}.join-index nav{display:flex;flex-direction:column;margin-top:10px}.join-index nav a{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;padding:13px 8px;border-bottom:1px solid var(--join-line);color:#fff;text-decoration:none}.join-index nav a:hover{background:rgba(255,255,255,.035)}.join-index nav a>span{width:54px;height:44px;background-size:cover;background-position:center}.join-index nav strong{display:block;font-size:.82rem}.join-index nav small{display:block;color:#717a76;font-size:.67rem;margin-top:3px}.join-index nav i{color:#606a66;font-size:.68rem}.join-help{margin-top:28px;padding:18px;background:#131a1d;border:1px solid var(--join-line);display:grid;grid-template-columns:30px 1fr;gap:9px}.join-help>i{color:var(--an-core);font-size:1.2rem}.join-help strong,.join-help span{display:block}.join-help strong{font-size:.8rem}.join-help span{color:#7f8884;font-size:.68rem}.join-help a{grid-column:1/-1;margin-top:8px;text-align:center;padding:9px;color:#041014;background:var(--an-core);text-decoration:none;text-transform:none;letter-spacing:0;font-size:.68rem;font-weight:900}
.join-guides{display:flex;flex-direction:column;gap:32px}.server-guide{background:var(--join-surface);border:1px solid var(--join-line);scroll-margin-top:100px;overflow:hidden}.guide-cover{height:310px;background-size:cover;background-position:center;position:relative}.guide-cover>div{position:absolute;left:34px;right:34px;bottom:28px}.guide-cover span{color:var(--server-accent);font-size:.65rem;text-transform:uppercase;letter-spacing:.13em;font-weight:900}.guide-cover h2{color:#fff;font-size:clamp(2rem,4vw,3.4rem);font-weight:900;letter-spacing:-.05em;margin:5px 0}.guide-cover strong{color:#d0d5d2;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.guide-body{padding:34px}.guide-body>h3{color:#fff;font-size:1.7rem;font-weight:850;margin:0 0 9px}.guide-about{color:var(--join-muted);line-height:1.7}.guide-about p{margin:0}.guide-features{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:34px}.guide-features span{padding:7px 9px;background:#151c1f;color:#aeb5b2;font-size:.68rem}.guide-features i{color:#63cc91;margin-right:6px}
.guide-steps{margin-top:38px}.guide-steps__heading{margin-bottom:15px}.guide-steps__heading h3{color:#fff;margin:5px 0;font-size:1.35rem}.guide-step{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--join-line)}.step-number{color:var(--server-accent);font-family:monospace;font-weight:900}.guide-step h4{color:#fff;font-size:1rem;margin:0 0 6px}.guide-step div div{color:#909995;font-size:.85rem;line-height:1.6}.guide-step div div p{margin:0}.guide-step a{display:inline-block;color:var(--server-accent);text-decoration:none;margin-top:9px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.guide-address{width:100%;margin-top:28px;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:#090d0f;border:1px solid color-mix(in srgb,var(--server-accent) 45%,transparent);color:#fff;cursor:pointer;text-align:left}.guide-address span{display:flex;flex-direction:column}.guide-address small{color:#68716e;text-transform:uppercase;letter-spacing:.09em;font-size:.56rem}.guide-address code{color:#fff;font-size:.9rem}.guide-address>strong{color:var(--server-accent);text-transform:uppercase;letter-spacing:.06em;font-size:.66rem}.guide-address.is-copied>strong{color:#69d798}.guide-links{display:flex;gap:18px;margin-top:15px}.guide-links a{color:#919a96;text-decoration:none;font-size:.7rem;font-weight:700}.guide-links a:hover{color:#fff}.guide-links i{color:var(--server-accent);margin-right:5px}.join-empty{text-align:center;padding:80px;border:1px dashed var(--join-line)}
@media(max-width:900px){.join-hero{grid-template-columns:1fr}.join-hero>span{margin-bottom:0}.join-layout{grid-template-columns:1fr}.join-index{position:relative;top:auto}.join-index nav{display:grid;grid-template-columns:repeat(3,1fr)}.join-index nav a{grid-template-columns:42px 1fr}.join-index nav a>span{width:42px}.join-index nav a>i{display:none}.join-help{display:none}}
@media(max-width:650px){.join-page{padding:18px 14px 70px}.join-hero{padding:20px 0 24px;margin-bottom:22px}.join-index nav{display:flex;overflow-x:auto}.join-index nav a{min-width:220px}.guide-cover{height:240px}.guide-cover>div{left:22px;right:22px;bottom:20px}.guide-body{padding:25px 20px}.guide-address{gap:12px}.guide-address>strong{font-size:0}.guide-address>strong i{font-size:.8rem}.guide-links{flex-wrap:wrap}}
[data-theme="light"][data-page="how-to-join"]{--join-bg:#f4f5f7;--join-surface:#fff;--join-line:rgba(17,24,32,.13);--join-text:#15191d;--join-muted:#5f6966}
[data-theme="light"][data-page="how-to-join"] body{background:var(--join-bg)}
[data-theme="light"][data-page="how-to-join"] .join-index nav a{color:#172027}
[data-theme="light"][data-page="how-to-join"] .join-help{background:#fff;box-shadow:0 12px 35px rgba(20,28,35,.06)}
[data-theme="light"][data-page="how-to-join"] .guide-body>h3,
[data-theme="light"][data-page="how-to-join"] .guide-steps__heading h3,
[data-theme="light"][data-page="how-to-join"] .guide-step h4{color:#172027}
[data-theme="light"][data-page="how-to-join"] .guide-features span{background:#f0f2f4;color:#52605b}
[data-theme="light"][data-page="how-to-join"] .guide-address{background:#f3f5f6}
[data-theme="light"][data-page="how-to-join"] .guide-address code{color:#172027}
.join-hero>span,.join-index__label,.guide-steps__heading>span{color:var(--an-core-soft)}.join-index{border-top-color:var(--join-core)}

/* ─────────────────────────────────────────────────────────────────────────
   Guide polish — each guide carries its world's accent, and the install steps
   read as a connected path rather than a plain divided list.
   ───────────────────────────────────────────────────────────────────────── */

/* Accent edge ties every guide card to its world (mirrors the landing bands). */
.server-guide{border-top:3px solid var(--server-accent)}

/* Cover: difficulty becomes a glass pill, plus a soft accent glow from the base. */
.guide-cover>div{z-index:1}
.guide-cover::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 0% 100%,color-mix(in srgb,var(--server-accent) 26%,transparent),transparent 62%)}
.guide-cover strong{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 13px;color:#fff;font-size:.62rem;letter-spacing:.12em;background:color-mix(in srgb,var(--server-accent) 26%,rgba(9,13,17,.55));border:1px solid color-mix(in srgb,var(--server-accent) 55%,transparent);border-radius:999px;backdrop-filter:blur(6px)}
.guide-cover strong::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--server-accent)}

/* Install steps: a faded accent rail threads through circular numbered nodes. */
.guide-steps{position:relative}
.guide-steps__list{position:relative}
.guide-steps__list::before{content:"";position:absolute;left:22px;top:14px;bottom:16px;width:2px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--server-accent) 55%,transparent) 8%,color-mix(in srgb,var(--server-accent) 55%,transparent) 92%,transparent)}
.guide-steps__list .guide-step{grid-template-columns:46px 1fr;gap:20px;padding:16px 0;border-top:0}
.guide-steps__list .step-number{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-size:.95rem;background:color-mix(in srgb,var(--server-accent) 16%,var(--join-surface));border:1.5px solid color-mix(in srgb,var(--server-accent) 50%,var(--join-line))}