:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:#171a1d;color:#edf1ea;--muted:#b0b9b2;--line:#383e40;--green:#c5e6a8}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--green);outline-offset:5px}
[hidden]{display:none!important}
.bar{min-height:62px;padding:12px max(20px,calc((100% - 1100px)/2));display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);background:#1d2124}
.wordmark{font-size:13px;font-weight:800;letter-spacing:.12em;white-space:nowrap}
.wordmark span{font-size:20px;color:var(--green);margin-right:7px}
.status{padding:6px 12px;border:1px solid var(--line);border-radius:50px;font-size:12px;color:#f1c391;text-align:center}
.status[data-online]{color:var(--green);background:#263229;border-color:#455741}
main{width:min(1100px,calc(100% - 40px));margin:0 auto;padding:clamp(28px,6vw,72px) 0 48px}
.intro{margin-bottom:25px}
h1{font-size:clamp(35px,6vw,68px);letter-spacing:-.055em;margin:0 0 8px;line-height:1}
p{margin:0;color:var(--muted);line-height:1.5}
.modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tile{--tone:#b4c9b0;min-height:125px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:17px;border:1px solid var(--line);border-radius:16px;background:#23272b;box-shadow:0 10px 22px #0002;transition:transform .18s,border-color .18s,background .18s}
.tile[href]:hover{transform:translateY(-2px);border-color:var(--tone);background:#2b3033}
.tile[aria-disabled=true]{opacity:.58;box-shadow:none}
.tile strong{display:block;font-size:16px;line-height:1.15}
.tile small{display:block;color:var(--muted);font-size:12px;line-height:1.35;margin-top:7px}
.tile b{font-weight:400;color:var(--tone)}
.tile-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#161a1c;color:var(--tone);font-size:25px}
.world{--tone:#c1dfa3}.expression{--tone:#eab2bb}.character{--tone:#e8cd93}.personality{--tone:#a8d5da}.voice{--tone:#c9b9ea}.forge{--tone:#c0d5a4}
.connection{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:16px}
h2{font-size:15px;margin:0 0 5px}.connection p,.connection dl{font-size:12px}.connection dl{margin:0;overflow-wrap:anywhere}.connection dt{color:var(--muted);margin:0 0 4px}.connection dd{margin:0 0 6px}
@media(max-width:830px){.modules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:535px){.modules{grid-template-columns:1fr}.tile{min-height:82px}.connection{display:grid}.bar{padding-inline:12px}main{width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){.tile{transition:none}}

.hub-invite { cursor: pointer; padding: .48rem .75rem; border: 1px solid #749260; border-radius: .55rem; background: #29402f; color: #e9f5df; font: inherit; }
.access-page { max-width: 590px; }
.access-form { display:grid; gap:10px; margin:24px 0 16px; }
.access-form select,.access-form input { min-width:0; width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; background:#23272b; color:inherit; font:inherit; }
.access-form button { justify-self:start; }
.access-form button:disabled { opacity:.55; cursor:default; }

@media(max-width:535px) {
  .bar { flex-wrap: wrap; gap: 8px 12px; }
  .bar .status { order: 1; }
  .bar .hub-invite { order: 2; }
}