@font-face {
  font-family:Inter;
  src:url('../fonts/InterVariable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap
}

:root {
  color-scheme:dark;
  --bg:#050f17;
  --surface:#081925;
  --text:#eef5fe;
  --muted:#a9c8df;
  --accent:#37f0b7;
  --cyan:#39dbff;
  --border:#23485e;
  --width:1510px;
  font-family:Inter,'Segoe UI',Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:radial-gradient(ellipse at 70% 90%,#0b202e88,transparent 60%),var(--bg);
  color:var(--text)
}

main {
  flex:1;
  min-width:0
}

a {
  color:inherit;
  text-decoration:none;
  text-underline-offset:.25em
}

a:hover {
  color:var(--accent)
}

button,input,textarea {
  font:inherit
}

button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

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

h1,h2,h3,p {
  overflow-wrap:anywhere
}

h1,h2,h3,p {
  margin-top:0
}

h1 {
  font-size:clamp(2.1rem,4vw,3.4rem);
  line-height:1.1;
  letter-spacing:-.04em;
  font-weight:800
}

h2 {
  font-size:1.5rem;
  line-height:1.25;
  letter-spacing:-.025em
}

h3 {
  font-size:1.2rem;
  line-height:1.2
}

p {
  color:var(--muted)
}

em {
  font-style:normal;
  color:var(--accent)
}

:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:5px
}

.container {
  width:min(var(--width),90.3%);
  margin-inline:auto
}

.icon {
  display:inline-block;
  width:24px;
  height:24px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle
}

.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
}

.skip-link {
  position:absolute;
  z-index:100;
  top:-70px;
  left:20px;
  background:var(--accent);
  color:#04171c;
  padding:12px
}

.skip-link:focus {
  top:12px
}

.site-header {
  height:80px;
  position:relative;
  z-index:5;
  border-bottom:1px solid #31576a;
  background:linear-gradient(110deg,#031b24d9,#08131fe8 52%,#06141eee),url('../images/hero-landscape.png') center 16%/cover
}

.header-inner {
  width:min(1600px,95%);
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,50px)
}

.brand {
  display:flex;
  align-items:center;
  flex-shrink:0;
  width:clamp(310px,27vw,450px);
  height:80px;
  position:relative;
  gap:4px
}

.brand>img {
  width:112px;
  align-self:flex-start;
  margin-top:-7px;
  filter:drop-shadow(0 4px 4px #000);
  z-index:2
}

.brand-text {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:3px
}

.wordmark {
  font:900 clamp(22px,2vw,34px)/1.15 Georgia,'Times New Roman',serif;
  letter-spacing:-1.7px;
  text-transform:uppercase;
  color:#d7e9f1;
  text-shadow:0 2px #182c38,1px 3px #000,-1px -1px #fcffff;
  white-space:nowrap
}

.wordmark>span {
  color:#3febbc;
  text-shadow:0 2px #063324,-1px -1px #cfffe8
}

.brand-text>small {
  font-size:10px;
  letter-spacing:3.5px;
  color:#8ce8f8;
  white-space:nowrap
}

.main-nav {
  display:flex;
  align-items:center;
  gap:clamp(20px,2.6vw,44px);
  height:100%;
  white-space:nowrap
}

.main-nav>a:not(.button) {
  font-size:14px;
  font-weight:600;
  height:100%;
  display:flex;
  align-items:center;
  position:relative
}

.main-nav>a[aria-current] {
  color:#54ffe0
}

.main-nav>a[aria-current]::after {
  content:'';
  position:absolute;
  height:2px;
  bottom:18px;
  left:-4px;
  right:-4px;
  background:#8cfff0;
  box-shadow:0 0 10px #12f0b7
}

.international-link {
  margin-left:auto;
  display:flex;
  gap:12px;
  align-items:center;
  color:#aed7f2;
  font-size:12px;
  white-space:nowrap
}

.international-link .icon {
  color:#83d2fa
}

.international-link strong {
  font-weight:600;
  color:#68c9ff;
  margin-left:8px
}

.international-link span>span {
  margin-left:6px;
  color:#63d4ff
}

.menu-toggle {
  display:none
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  border:1px solid #38739a;
  border-radius:7px;
  padding:10px 22px;
  font-weight:600;
  color:#bce5ff;
  background:#061420;
  line-height:1.3;
  transition:background .18s,box-shadow .18s,border-color .18s,transform .18s
}

.button .arrow {
  margin-left:4px
}

.button:hover {
  border-color:var(--cyan);
  color:#fff;
  background:#0b3041;
  transform:translateY(-1px)
}

.button-green {
  background:linear-gradient(100deg,#008f48bb,#014f3ba8 60%,#00332dda);
  border:2px solid #40fbd5;
  box-shadow:0 0 17px #00ffae44,inset 0 0 16px #22ff9640;
  color:#effff7
}

.button-green:hover {
  background:linear-gradient(100deg,#05a85ed9,#05735ac9);
  box-shadow:0 0 24px #00ffae77,inset 0 0 20px #22ff9633;
  border-color:#9affdf
}

.button-blue {
  background:linear-gradient(120deg,#0476ff,#0055e6);
  border:2px solid #2abfff;
  box-shadow:0 0 17px #009aff77,inset 0 0 16px #11a0ff99;
  color:white
}

.button-blue:hover {
  background:#167cfa;
  box-shadow:0 0 24px #009aff99
}

.nav-play {
  height:44px;
  min-width:165px;
  font-size:16px;
  padding:8px 19px
}

.nav-play .icon {
  width:25px;
  height:25px
}

.hero {
  position:relative;
  min-height:468px;
  border-bottom:1px solid #3a5b6c;
  background:#101f2a url('../images/hero-landscape.png') center 53%/cover no-repeat
}

.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 9%,#020f1933 20%,#03132324 50%,transparent 73%)
}

.hero-inner {
  position:relative;
  padding:61px 0 21px clamp(170px,15.6vw,261px)
}

.eyebrow {
  font-size:12px;
  font-weight:650;
  letter-spacing:4px;
  color:#67f8df;
  line-height:1.5;
  margin-bottom:13px
}

.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:14px
}

.hero .eyebrow>span {
  width:40px;
  height:1px;
  background:#57e6d6
}

.hero h1 {
  font-size:clamp(52px,4.5vw,76px);
  font-weight:850;
  letter-spacing:-2.3px;
  line-height:.86;
  margin:0 0 17px
}

.hero h1>em {
  display:inline-block;
  background:linear-gradient(#b1ffe8,#42f5bd 45%,#1ad986);
  color:transparent;
  background-clip:text;
  filter:drop-shadow(0 2px 1px #062e27)
}

.metal {
  background:linear-gradient(#fbfdff 12%,#e0edf7 34%,#b2c7d9 64%,#8ca7bc 92%);
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 1px #00101e);
  -webkit-text-stroke:.35px #d1e0e9
}

.hero-description {
  font-size:20px;
  line-height:1.25;
  max-width:550px;
  margin:0 0 20px;
  color:#b8e7f5;
  text-shadow:0 2px 3px #00131f
}

.hero-actions {
  display:flex;
  gap:21px;
  align-items:center
}

.hero-actions .button {
  height:56px;
  min-width:216px;
  font-size:19px;
  letter-spacing:.2px
}

.hero-actions .button .icon {
  width:29px;
  height:29px
}

.hero-actions .button .arrow {
  width:20px
}

.feature-strip {
  display:flex;
  width:min(892px,100%);
  min-height:63px;
  margin-top:26px;
  border:1px solid #32556d;
  border-radius:9px;
  background:linear-gradient(#0b1b27f5,#030f18f5);
  box-shadow:0 8px 20px #0008,inset 0 1px #b7dce510;
  overflow:hidden
}

.feature-strip a {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  flex:1;
  padding:13px 14px;
  position:relative;
  white-space:nowrap;
  font-size:13px;
  font-weight:550;
  color:#d2eaff
}

.feature-strip a+a::before {
  content:'';
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:1px;
  background:#214657
}

.feature-strip .icon {
  width:30px;
  height:30px
}

.feature-strip a:hover {
  background:#0b2c36;
  color:#5cffd5
}

.feature-section {
  padding:15px 0 17px;
  background:linear-gradient(110deg,#07172477,#030d14 60%,#07141b77)
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:19px
}

.feature-card,.status-card {
  min-height:203px;
  border:1px solid #2c5067;
  border-radius:8px;
  position:relative;
  overflow:hidden;
  background:#06141e;
  box-shadow:0 8px 18px #0003
}

.feature-card {
  transition:border-color .2s,box-shadow .2s
}

.feature-card:hover {
  border-color:#40929e;
  box-shadow:0 0 19px #25cfa51a
}

.card-art {
  position:absolute;
  top:0;
  right:0;
  height:201px;
  width:210px;
  background-image:url('../images/reference-atlas.png');
  background-repeat:no-repeat;
  background-size:1672px 941px
}

.card-progression .card-art {
  width:168px;
  background-position:-279px -563px
}

.card-events .card-art {
  background-position:-616px -563px
}

.card-community .card-art {
  background-position:-994px -563px
}

.feature-card::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#06131de6 0%,#06131dc4 33%,#06131d66 48%,transparent 77%)
}

.card-copy {
  position:relative;
  z-index:1;
  padding:16px 21px 14px;
  max-width:225px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:201px
}

.feature-icon {
  width:40px;
  height:40px;
  color:#21ecc0;
  filter:drop-shadow(0 0 7px #00ffb744)
}

.card-copy h2 {
  margin:6px 0 6px;
  font-size:22px;
  letter-spacing:-.6px
}

.card-copy p {
  font-size:14px;
  line-height:1.45;
  margin:0 0 14px;
  max-width:185px;
  color:#b9ddf4
}

.button-small {
  padding:8px 16px;
  gap:10px;
  font-size:12px;
  border-radius:5px;
  min-height:35px
}

.button-small .icon {
  width:17px;
  height:17px
}

.card-copy .button {
  margin-top:auto
}

.status-card {
  padding:12px 16px;
  display:flex;
  flex-direction:column
}

.status-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px
}

.status-heading h2 {
  font-size:16px;
  letter-spacing:-.4px;
  margin:0;
  display:flex;
  gap:10px;
  align-items:center;
  white-space:nowrap
}

.status-heading .icon {
  width:31px;
  height:28px;
  color:#3affd3
}

.status-label {
  display:flex;
  gap:7px;
  align-items:center;
  color:#a8bfcc;
  font-size:12px;
  white-space:nowrap
}

.status-label i,.status-button i {
  width:10px;
  height:10px;
  display:inline-block;
  flex-shrink:0;
  border-radius:50%;
  background:#738898
}

.status-online {
  color:#82ffb7
}

.status-online i,.status-button.is-online i {
  background:#58ff87;
  box-shadow:0 0 12px #40ff7677
}

.status-offline {
  color:#efb899
}

.status-offline i {
  background:#ef9b73
}

.server-summary {
  display:flex;
  gap:18px;
  border:1px solid #17344566;
  border-radius:7px;
  overflow:hidden;
  min-height:94px
}

.server-thumbnail {
  background:url('../images/reference-atlas.png') -1241px -614px/1672px 941px no-repeat;
  height:94px;
  width:114px;
  min-width:90px;
  flex-shrink:0;
  border-radius:7px
}

.server-summary>div:last-child {
  padding-top:3px;
  min-width:0
}

.server-summary h3 {
  font-size:19px;
  letter-spacing:-.5px;
  margin:0 0 5px
}

.server-summary p {
  font-size:13px;
  line-height:1.5;
  margin:0
}

.server-summary p.server-subtitle {
  font-size:8px;
  letter-spacing:1.7px;
  margin-bottom:5px;
  white-space:normal
}

.server-summary strong {
  font-weight:500;
  color:#46e4ff
}

.status-button {
  margin-top:9px;
  min-height:32px;
  border:1px solid #376381;
  border-radius:6px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:#b5dfff;
  font-size:13px;
  font-weight:650
}

.status-button .icon {
  width:16px;
  height:16px
}

.status-button.is-online {
  border-color:#44eda0;
  color:#99ffe5;
  background:linear-gradient(90deg,#00542d,#022c22);
  box-shadow:0 0 12px #00ff8233
}

.status-button:hover {
  border-color:var(--accent);
  color:var(--accent)
}

.network-section {
  border-block:1px solid #29465b;
  background:linear-gradient(110deg,#071724,#081c2bea 50%,#031018);
  min-height:94px
}

.network-inner {
  display:flex;
  gap:42px;
  align-items:center;
  padding:18px 0
}

.network-icon {
  width:43px;
  height:43px;
  color:#b4d2e9
}

.network-copy h2 {
  font-size:23px;
  color:#bed3e9;
  margin:0 0 4px;
  letter-spacing:-.4px
}

.network-copy p {
  font-size:15px;
  margin:0
}

.network-copy a {
  color:#03d5ff;
  white-space:nowrap
}

.network-copy a .icon {
  width:16px;
  height:16px;
  margin-left:5px
}

.network-tagline {
  margin:0 10px 0 auto;
  font-size:9px;
  letter-spacing:3px;
  line-height:1.8;
  color:#73bcec
}

.button-outline {
  color:#6fd5ff;
  border-color:#2a96ca;
  background:#02111e;
  padding:12px 28px;
  gap:20px
}

.network-inner>.button {
  font-size:14px;
  min-width:194px
}

.site-footer {
  background:#030e16b3
}

.footer-inner {
  min-height:64px;
  display:flex;
  align-items:center;
  gap:22px;
  font-size:11px;
  color:#99b7d0
}

.footer-brand {
  display:flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
  color:#bad6ea;
  font-size:12px
}

.footer-brand img {
  object-fit:contain
}

.footer-description {
  border-left:1px solid #365269;
  padding-left:20px;
  font-size:10px
}

.footer-inner nav {
  display:flex;
  margin-left:auto;
  gap:0;
  white-space:nowrap;
  font-size:10px
}

.footer-inner nav>a {
  padding-inline:15px
}

.footer-inner nav>a+a {
  border-left:1px solid #345064
}

.footer-social {
  display:flex;
  align-items:center;
  gap:18px
}

.footer-social .icon {
  width:19px;
  height:19px
}

.steam-login-link {
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}

.page-section {
  padding:55px 0 75px;
  min-height:calc(100vh - 145px)
}

.back-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#9ed1e9;
  font-size:14px;
  margin-bottom:30px
}

.page-heading {
  max-width:850px
}

.page-heading h1 {
  margin-bottom:28px
}

.reading-panel {
  padding:35px 40px;
  border:1px solid var(--border);
  border-radius:10px;
  max-width:960px;
  background:linear-gradient(135deg,#0a202df0,#05131cee);
  box-shadow:0 12px 40px #0004
}

.prose {
  white-space:pre-line;
  font-size:17px;
  line-height:1.85;
  margin:0 0 25px
}

.notice {
  padding:18px 22px;
  border:1px solid #345a6b;
  border-left:3px solid #37cdb5;
  border-radius:6px;
  background:#0b2633;
  font-size:15px;
  line-height:1.65
}

.international-text-link {
  display:flex;
  align-items:center;
  gap:12px;
  width:fit-content;
  color:#50d4fd;
  margin-top:28px
}

.page-feature-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:24px 0
}

.connect-command {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 18px;
  background:#020e16;
  border:1px solid var(--border);
  border-radius:6px;
  margin-top:25px
}

.connect-command code {
  color:#7df1d6;
  overflow-wrap:anywhere
}

.copy-feedback {
  font-size:14px;
  min-height:20px;
  margin-bottom:0
}

.auth-section {
  padding:58px 0 65px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 145px)
}

.auth-card {
  width:min(100%,640px);
  border:1px solid #2e5869;
  border-radius:14px;
  padding:35px 44px;
  background:radial-gradient(ellipse at top,#0d46394d,transparent 70%),linear-gradient(135deg,#0a1c2a,#040f19);
  text-align:center;
  box-shadow:0 25px 80px #0006
}

.auth-logo {
  width:115px;
  margin:-7px auto 12px;
  display:block;
  filter:drop-shadow(0 0 12px #00c2ac22)
}

.auth-card h1 {
  font-size:34px;
  margin:14px 0
}

.auth-card p {
  font-size:16px;
  line-height:1.65
}

.auth-card .eyebrow {
  font-size:10px;
  letter-spacing:2.2px
}

.auth-card .button {
  margin-top:10px
}

.auth-card .auth-note {
  font-size:13px;
  margin-top:28px;
  margin-bottom:0
}

.auth-card>.back-link {
  display:block;
  margin:24px 0 0
}

.steam-avatar {
  border-radius:16px;
  border:2px solid #3fcbaa;
  box-shadow:0 0 30px #23d6a922;
  object-fit:cover;
  margin-bottom:20px
}

.auth-card .steam-id,.steam-id {
  font-size:13px;
  color:#7da3b9;
  overflow-wrap:anywhere
}

.account-notice {
  background:#0c2934;
  border:1px solid #2d6874;
  border-radius:8px;
  padding:24px;
  margin:26px 0 12px;
  text-align:left
}

.account-notice h2 {
  font-size:20px;
  color:#70efcd
}

.account-notice p {
  margin:0;
  font-size:15px
}

.account-card>.button {
  width:100%
}

.logout-form {
  margin-top:25px
}

.text-button {
  background:none;
  border:0;
  color:#adc6d9;
  display:inline-flex;
  align-items:center;
  gap:10px
}

.text-button:hover {
  color:var(--accent)
}

.text-link {
  color:#49d5f6
}

.muted {
  color:#93b0c3;
  font-size:14px
}

.error-detail {
  overflow:auto;
  max-width:100%;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  text-align:left;
  font-size:12px
}

.server-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px
}

.pagination {
  display:flex;
  justify-content:center;
  gap:25px;
  margin-top:25px
}

.admin-shell {
  padding:40px 0 60px;
  max-width:1280px
}

.admin-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px
}

.admin-topbar .eyebrow {
  font-size:10px;
  letter-spacing:3px;
  margin-bottom:7px
}

.admin-topbar h1 {
  font-size:34px;
  margin:0;
  letter-spacing:-1px
}

.admin-identity {
  display:flex;
  align-items:center;
  gap:12px
}

.admin-identity img {
  border-radius:8px;
  border:1px solid #2a997f
}

.admin-identity strong {
  font-size:14px;
  display:block
}

.admin-identity span {
  display:block;
  font-size:11px;
  color:#67cfae
}

.admin-identity .icon {
  width:13px;
  height:13px;
  margin-right:4px
}

.admin-nav {
  display:flex;
  gap:6px;
  padding:8px;
  background:#06131ed9;
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:28px
}

.admin-nav a {
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 16px;
  font-size:14px;
  border-radius:5px;
  color:#a2c3d8
}

.admin-nav .icon {
  width:19px;
  height:19px
}

.admin-nav a[aria-current] {
  background:#0b4038;
  color:#8dffe0;
  box-shadow:inset 0 0 0 1px #1f7a66
}

.admin-nav a:hover {
  background:#0d2c3a;
  color:#b8ffe5
}

.admin-nav a.admin-preview-link {
  margin-left:auto
}

.admin-welcome {
  display:flex;
  justify-content:space-between;
  gap:25px;
  padding:30px 38px;
  background:radial-gradient(ellipse at right,#06564355,transparent 80%),#081e2b;
  border:1px solid #285749;
  border-radius:10px;
  margin-bottom:22px
}

.admin-welcome h2 {
  font-size:27px;
  margin:0 0 10px
}

.admin-welcome p {
  font-size:15px;
  margin-bottom:20px
}

.admin-welcome img {
  object-fit:contain;
  align-self:center
}

.admin-stat-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-bottom:28px
}

.admin-stat {
  border:1px solid var(--border);
  border-radius:8px;
  padding:21px 26px;
  background:#081c28
}

.admin-stat>span {
  font-size:13px;
  color:#9ebed1;
  display:block
}

.admin-stat>strong {
  font-size:32px;
  font-weight:650;
  display:block;
  color:#88f9d9;
  margin-top:5px
}

.admin-stat>strong.stat-label {
  font-size:19px;
  margin-top:14px
}

.admin-panel {
  padding:27px 30px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#081b27
}

.admin-panel h2 {
  font-size:20px;
  margin-bottom:15px
}

.admin-panel+.back-link {
  margin-top:22px
}

.revision-list>div {
  display:grid;
  grid-template-columns:1fr 180px 190px;
  gap:15px;
  padding:14px 0;
  border-top:1px solid #213c4d;
  font-size:13px;
  color:#a4c2d5
}

.revision-list code {
  color:#85d7cf;
  overflow-wrap:anywhere
}

.revision-list time {
  font-size:12px;
  color:#7da0b6
}

.content-editor {
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:28px
}

.section-sidebar {
  align-self:start;
  background:#071925;
  border:1px solid var(--border);
  border-radius:9px;
  padding:20px 12px
}

.section-sidebar h2 {
  font-size:15px;
  margin:0 12px 16px
}

.section-sidebar nav {
  display:flex;
  flex-direction:column;
  gap:4px
}

.section-sidebar a {
  font-size:13px;
  padding:11px 12px;
  color:#a7c5d8;
  border-radius:5px;
  display:flex;
  justify-content:space-between;
  gap:8px
}

.section-sidebar .icon {
  width:15px;
  height:15px
}

.section-sidebar a[aria-current] {
  color:#85f9d9;
  background:#0d3734
}

.section-sidebar a:hover {
  background:#103143
}

.editor-heading {
  margin-bottom:22px
}

.editor-heading h2 {
  font-size:23px;
  margin:0 0 6px
}

.editor-heading p {
  font-size:14px;
  margin:0
}

.editor-field {
  background:#081b27;
  border:1px solid var(--border);
  border-radius:8px;
  padding:22px 25px;
  margin-bottom:18px;
  scroll-margin-top:24px
}

.editor-field:target {
  border-color:#4ecdaa
}

.editor-field label,.settings-field label {
  font-size:15px;
  font-weight:600;
  display:block;
  margin-bottom:5px
}

.content-key {
  display:block;
  font-size:11px;
  color:#6492a7;
  margin-bottom:13px;
  overflow-wrap:anywhere
}

input:not([type=hidden]),textarea {
  display:block;
  width:100%;
  min-width:0;
  background:#040f19;
  border:1px solid #305164;
  border-radius:5px;
  padding:12px 14px;
  color:#e1eff7;
  font-size:15px;
  line-height:1.5;
  transition:border-color .2s
}

textarea {
  resize:vertical;
  min-height:110px
}

input:hover,textarea:hover {
  border-color:#4b7185
}

input:focus,textarea:focus {
  border-color:#42d0ba;
  outline-offset:2px
}

.field-actions {
  display:flex;
  gap:15px;
  align-items:center;
  justify-content:space-between;
  margin-top:15px
}

.field-actions>span {
  font-size:11px;
  color:#7196ac
}

.button-save {
  color:#8ff3d6;
  background:#0a332d;
  border-color:#267a66
}

.flash {
  display:flex;
  align-items:center;
  gap:10px;
  background:#073d2d;
  border:1px solid #2da57c;
  color:#9bf4d5;
  padding:15px 20px;
  border-radius:8px;
  font-size:14px
}

.flash .icon {
  width:19px;
  height:19px
}

.settings-layout {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:25px
}

.settings-field {
  margin-bottom:21px
}

.settings-field label {
  font-size:13px;
  margin-bottom:8px
}

.settings-form>.muted {
  margin-bottom:28px
}

.settings-note {
  align-self:start;
  background:linear-gradient(135deg,#0c2a31,#061723)
}

.settings-note h2 {
  margin-top:16px
}

.settings-note>p {
  font-size:14px;
  line-height:1.8
}

.settings-note>.feature-icon {
  width:38px;
  height:38px
}

@media(min-width:1800px) {
  .hero-inner {
    padding-left:260px
  }
  .hero {
    min-height:490px
  }
  .hero h1 {
    font-size:80px
  }
  .hero-description {
    max-width:610px
  }
  .hero-inner {
    padding-top:65px
  }
  .feature-card,.status-card {
    min-height:218px
  }
  .card-copy {
    min-height:216px
  }
}

@media(max-width:1450px) {
  .international-link>span {
    font-size:11px
  }
  .international-link strong {
    display:block;
    margin:0
  }
  .international-link span>span {
    display:none
  }
  .header-inner {
    gap:20px
  }
  .brand {
    width:330px
  }
  .brand>img {
    width:92px;
    margin-top:0
  }
  .wordmark {
    font-size:26px
  }
  .brand-text>small {
    letter-spacing:2.6px;
    font-size:8px
  }
  .main-nav {
    gap:27px
  }
  .main-nav>a:not(.button) {
    font-size:13px
  }
  .nav-play {
    min-width:130px;
    font-size:14px
  }
  .hero-inner {
    padding-left:16vw
  }
  .hero {
    min-height:440px
  }
  .hero h1 {
    font-size:65px
  }
  .hero-description {
    font-size:18px;
    max-width:530px
  }
  .feature-strip a {
    padding:12px 10px;
    gap:10px;
    font-size:12px
  }
  .feature-strip .icon {
    width:26px;
    height:26px
  }
  .feature-grid {
    gap:15px
  }
  .card-copy {
    padding:16px
  }
  .card-copy h2 {
    font-size:21px
  }
  .card-copy p {
    max-width:170px;
    font-size:13px
  }
  .status-card {
    padding:12px
  }
  .status-heading {
    flex-wrap:wrap;
    row-gap:3px
  }
  .status-label {
    margin-left:40px;
    font-size:10px
  }
  .status-heading h2 {
    font-size:15px
  }
  .server-summary {
    gap:10px;
    min-height:81px
  }
  .server-thumbnail {
    width:83px;
    min-width:83px
  }
  .server-summary h3 {
    font-size:16px
  }
  .server-summary p {
    font-size:11px
  }
  .server-summary p.server-subtitle {
    font-size:7px;
    letter-spacing:1px
  }
  .status-button {
    margin-top:auto
  }
  .network-inner {
    gap:26px
  }
  .network-copy h2 {
    font-size:21px
  }
  .footer-inner {
    gap:14px
  }
  .footer-description {
    max-width:330px
  }
  .footer-inner nav>a {
    padding-inline:10px
  }
}

@media(max-width:1150px) {
  .international-link {
    display:none
  }
  .header-inner {
    justify-content:space-between
  }
  .brand {
    width:325px
  }
  .hero-inner {
    padding-left:11vw
  }
  .hero {
    background-position:45% center
  }
  .hero::before {
    background:linear-gradient(90deg,#00101933,#00101944 55%,transparent)
  }
  .hero h1 {
    font-size:60px
  }
  .feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
  }
  .card-copy {
    max-width:250px;
    padding:18px 22px
  }
  .card-copy p {
    font-size:15px;
    max-width:220px
  }
  .card-copy h2 {
    font-size:23px
  }
  .feature-card,.status-card {
    min-height:210px
  }
  .card-copy {
    min-height:208px
  }
  .status-card {
    padding:16px 20px
  }
  .status-heading {
    flex-wrap:nowrap;
    margin-bottom:13px
  }
  .status-label {
    margin-left:0;
    font-size:13px
  }
  .status-heading h2 {
    font-size:17px
  }
  .server-summary {
    min-height:98px;
    gap:18px
  }
  .server-thumbnail {
    width:114px;
    min-width:100px
  }
  .server-summary h3 {
    font-size:21px
  }
  .server-summary p {
    font-size:14px
  }
  .server-summary p.server-subtitle {
    font-size:9px;
    letter-spacing:1.5px
  }
  .status-button {
    margin-top:10px
  }
  .network-tagline {
    display:none
  }
  .network-copy {
    margin-right:auto
  }
  .footer-inner {
    flex-wrap:wrap;
    padding-block:17px;
    row-gap:15px
  }
  .footer-description {
    max-width:none;
    margin-right:auto
  }
  .footer-inner nav {
    margin-left:0
  }
  .footer-inner nav>a:first-child {
    padding-left:0
  }
  .footer-social {
    margin-left:auto
  }
  .content-editor {
    grid-template-columns:220px minmax(0,1fr);
    gap:20px
  }
}

@media(max-width:800px) {
  .container {
    width:calc(100% - 36px)
  }
  .site-header {
    height:auto;
    min-height:74px
  }
  .header-inner {
    flex-wrap:wrap;
    gap:0;
    width:calc(100% - 28px)
  }
  .brand {
    height:74px;
    width:310px
  }
  .brand>img {
    width:82px;
    margin-top:0
  }
  .wordmark {
    font-size:24px
  }
  .brand-text>small {
    font-size:7px;
    letter-spacing:2.4px
  }
  .main-nav {
    width:100%;
    height:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0;
    padding:10px 0 16px
  }
  .main-nav>a:not(.button) {
    padding:12px 18px;
    height:auto;
    font-size:13px
  }
  .main-nav>a[aria-current]::after {
    bottom:5px;
    left:18px;
    right:18px
  }
  .main-nav .nav-play {
    margin-left:12px
  }
  .js .menu-toggle {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#081d28;
    border:1px solid #31566b;
    border-radius:6px;
    color:#b9efe7;
    padding:9px;
    margin-left:auto
  }
  .js .main-nav {
    display:none
  }
  .js .main-nav.is-open {
    display:flex
  }
  .hero {
    min-height:475px;
    background-position:40% center
  }
  .hero-inner {
    padding:50px 0 24px
  }
  .hero-copy {
    max-width:620px;
    padding-left:5vw
  }
  .hero::before {
    background:linear-gradient(90deg,#020e1bc7,#06142566 80%,#06142533)
  }
  .hero h1 {
    font-size:clamp(42px,8.2vw,62px);
    line-height:.96;
    letter-spacing:-1.5px
  }
  .hero-description {
    max-width:470px;
    font-size:17px;
    line-height:1.5
  }
  .hero-actions {
    gap:14px
  }
  .hero-actions .button {
    min-width:175px;
    height:52px;
    font-size:16px;
    gap:12px
  }
  .hero-actions .button .icon {
    width:23px;
    height:23px
  }
  .feature-strip {
    margin-top:28px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    min-height:0
  }
  .feature-strip a {
    font-size:12px;
    padding:12px 8px;
    justify-content:flex-start;
    gap:10px
  }
  .feature-strip a+a::before {
    top:12px;
    bottom:12px
  }
  .feature-strip a:nth-child(4)::before {
    display:none
  }
  .feature-strip .icon {
    width:24px;
    height:24px
  }
  .feature-section {
    padding:18px 0
  }
  .feature-grid {
    gap:14px
  }
  .card-copy {
    padding:17px;
    max-width:225px
  }
  .card-copy p {
    font-size:14px;
    max-width:175px
  }
  .status-card {
    padding:14px
  }
  .status-heading {
    flex-wrap:wrap;
    gap:5px
  }
  .status-heading h2 {
    font-size:16px
  }
  .status-label {
    font-size:11px
  }
  .server-summary {
    gap:10px
  }
  .server-thumbnail {
    width:78px;
    min-width:78px
  }
  .server-summary h3 {
    font-size:17px
  }
  .server-summary p {
    font-size:12px
  }
  .server-summary p.server-subtitle {
    font-size:7px;
    letter-spacing:1px
  }
  .network-inner {
    gap:18px;
    padding:22px 0;
    flex-wrap:wrap
  }
  .network-icon {
    width:33px;
    height:33px
  }
  .network-copy {
    flex:1
  }
  .network-copy h2 {
    font-size:20px
  }
  .network-copy p {
    font-size:13px
  }
  .network-inner>.button {
    margin-left:51px;
    font-size:13px;
    padding:10px 18px;
    min-width:0
  }
  .footer-description {
    border:0;
    padding:0;
    order:3;
    width:100%;
    font-size:11px
  }
  .footer-inner nav {
    order:4
  }
  .footer-social {
    margin-left:auto
  }
  .footer-social span {
    font-size:11px
  }
  .footer-inner {
    gap:14px;
    row-gap:15px
  }
  .page-section {
    padding:35px 0 50px
  }
  .reading-panel {
    padding:25px
  }
  .prose {
    font-size:16px
  }
  .auth-section {
    padding:40px 0;
    min-height:65vh
  }
  .admin-shell {
    padding-top:27px
  }
  .admin-topbar h1 {
    font-size:28px
  }
  .admin-identity strong {
    font-size:12px
  }
  .admin-identity span {
    font-size:10px
  }
  .admin-nav {
    flex-wrap:wrap
  }
  .admin-nav a {
    font-size:12px;
    padding:9px 10px
  }
  .admin-nav a.admin-preview-link {
    margin-left:0
  }
  .admin-welcome {
    padding:25px
  }
  .admin-welcome h2 {
    font-size:23px
  }
  .admin-welcome img {
    width:115px
  }
  .admin-stat-grid {
    gap:12px
  }
  .admin-stat {
    padding:17px
  }
  .admin-stat>span {
    font-size:11px
  }
  .admin-stat>strong.stat-label {
    font-size:14px
  }
  .content-editor {
    grid-template-columns:1fr
  }
  .section-sidebar {
    padding:15px
  }
  .section-sidebar nav {
    flex-direction:row;
    flex-wrap:wrap;
    gap:5px
  }
  .section-sidebar h2 {
    margin:0 0 10px
  }
  .section-sidebar a {
    padding:8px 10px;
    font-size:11px
  }
  .section-sidebar .icon {
    display:none
  }
  .settings-layout {
    grid-template-columns:1fr
  }
  .revision-list>div {
    grid-template-columns:1fr auto
  }
  .revision-list time {
    grid-column:1/-1
  }
  .connect-command {
    align-items:flex-start;
    flex-direction:column
  }
}

@media(max-width:520px) {
  .brand {
    width:272px
  }
  .brand>img {
    width:73px;
    align-self:center
  }
  .wordmark {
    font-size:21px;
    letter-spacing:-1px
  }
  .brand-text>small {
    font-size:6.7px;
    letter-spacing:1.9px
  }
  .hero {
    background-position:42% center
  }
  .hero-inner {
    padding-top:36px
  }
  .hero-copy {
    padding-left:0
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:3px;
    margin-bottom:18px
  }
  .hero h1 {
    font-size:clamp(37px,10.6vw,53px);
    line-height:1;
    letter-spacing:-1.4px;
    margin-bottom:18px
  }
  .hero-description {
    font-size:16px;
    line-height:1.5;
    margin-bottom:21px
  }
  .hero-actions {
    gap:10px
  }
  .hero-actions .button {
    min-width:0;
    flex:1;
    padding:11px 12px;
    gap:10px;
    font-size:14px;
    height:49px
  }
  .hero-actions .button .arrow {
    display:none
  }
  .feature-strip {
    grid-template-columns:repeat(2,1fr);
    margin-top:26px
  }
  .feature-strip a {
    padding:12px 13px;
    font-size:12px
  }
  .feature-strip a:nth-child(odd)::before {
    display:none
  }
  .feature-strip a:nth-child(4)::before {
    display:block
  }
  .feature-strip a:last-child {
    grid-column:1/-1;
    border-top:1px solid #20455555;
    justify-content:center
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:14px
  }
  .feature-card,.status-card {
    min-height:205px
  }
  .card-copy {
    min-height:203px;
    padding:18px 21px
  }
  .card-copy p {
    max-width:195px
  }
  .card-copy h2 {
    font-size:23px
  }
  .status-card {
    padding:15px 19px
  }
  .status-heading {
    flex-wrap:nowrap
  }
  .status-label {
    font-size:11px
  }
  .server-summary {
    gap:17px
  }
  .server-thumbnail {
    width:111px;
    min-width:111px
  }
  .server-summary h3 {
    font-size:21px
  }
  .server-summary p {
    font-size:13px
  }
  .server-summary p.server-subtitle {
    font-size:8px;
    letter-spacing:1.4px
  }
  .network-copy h2 {
    font-size:18px
  }
  .network-icon {
    width:28px;
    height:28px
  }
  .network-inner {
    gap:15px
  }
  .network-inner>.button {
    margin-left:43px
  }
  .footer-brand {
    font-size:11px;
    gap:8px
  }
  .footer-social {
    gap:13px
  }
  .footer-inner {
    column-gap:8px
  }
  .footer-inner nav {
    font-size:11px
  }
  .footer-inner nav>a {
    padding-inline:16px
  }
  .auth-card {
    padding:26px 22px
  }
  .auth-card h1 {
    font-size:28px
  }
  .auth-card .button {
    font-size:14px;
    padding:12px 16px;
    gap:10px
  }
  .account-notice {
    padding:19px
  }
  .account-notice h2 {
    font-size:18px
  }
  .auth-card p {
    font-size:14px
  }
  .page-section h1 {
    font-size:33px
  }
  .reading-panel {
    padding:23px 20px
  }
  .page-feature-links {
    flex-direction:column;
    align-items:stretch
  }
  .admin-topbar {
    align-items:flex-start;
    flex-direction:column;
    gap:18px
  }
  .admin-welcome {
    padding:23px
  }
  .admin-welcome img {
    display:none
  }
  .admin-welcome .button {
    font-size:13px
  }
  .admin-stat-grid {
    grid-template-columns:1fr 1fr
  }
  .admin-stat:last-child {
    grid-column:1/-1
  }
  .admin-stat>span {
    font-size:12px
  }
  .admin-stat>strong.stat-label {
    margin-top:8px;
    font-size:18px
  }
  .admin-panel {
    padding:21px
  }
  .editor-field {
    padding:19px
  }
  .field-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:12px
  }
  .field-actions .button {
    align-self:flex-end
  }
  .revision-list>div {
    grid-template-columns:1fr
  }
  .editor-heading h2 {
    font-size:21px
  }
  .settings-field label {
    font-size:13px
  }
  .admin-nav {
    gap:3px
  }
  .admin-nav a {
    padding:9px 8px;
    font-size:11px
  }
  .admin-nav a .icon {
    width:16px
  }
  .international-text-link {
    font-size:14px;
    gap:8px
  }
}

.wordmark {
  display:block;
  width:305px;
  height:42px;
  background:url('../images/reference-atlas.png') -178px -14px/1672px 941px no-repeat;
  font-size:0;
  letter-spacing:0;
  text-shadow:none
}

.wordmark>span {
  font-size:0;
  text-shadow:none
}

.brand {
  width:clamp(310px,27vw,450px)
}

.brand-text>small {
  letter-spacing:3px;
  font-size:9px
}

.hero h1 {
  line-height:.82;
  font-weight:800
}

.hero-description {
  max-width:530px
}

.card-events .card-art {
  width:155px;
  background-position:-671px -563px
}

.card-community .card-art {
  width:174px;
  background-position:-1030px -563px
}

@media(max-width:1450px) {
  .wordmark {
    width:240px;
    height:33px;
    background-size:1316px 741px;
    background-position:-140px -11px
  }
  .brand-text>small {
    font-size:7px;
    letter-spacing:2.5px
  }
  .brand {
    width:330px
  }
}

@media(max-width:800px) {
  .wordmark {
    width:225px;
    height:31px;
    background-size:1233px 694px;
    background-position:-131px -10px
  }
  .brand-text>small {
    font-size:7px;
    letter-spacing:2.1px
  }
  .brand {
    width:310px
  }
  .hero h1 {
    line-height:.96
  }
}

@media(max-width:520px) {
  .wordmark {
    width:201px;
    height:28px;
    background-size:1102px 620px;
    background-position:-117px -9px
  }
  .brand-text>small {
    font-size:6.5px;
    letter-spacing:1.8px
  }
  .brand {
    width:272px
  }
  .hero h1 {
    line-height:1
  }
}

@media(max-width:360px) {
  .brand {
    width:232px
  }
  .brand>img {
    width:60px
  }
  .wordmark {
    width:169px;
    height:24px;
    background-size:927px 522px;
    background-position:-98px -8px
  }
  .brand-text>small {
    font-size:5.5px;
    letter-spacing:1.5px
  }
  .server-thumbnail {
    width:90px;
    min-width:90px
  }
  .server-summary h3 {
    font-size:17px
  }
  .server-summary p.server-subtitle {
    font-size:7px;
    letter-spacing:1px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}