@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;
  display:flex;
  flex-direction:column;
  background:radial-gradient(ellipse at 70% 90%,#0b202e88,transparent 60%),var(--bg);
  color:var(--text)
}

main {
  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:rgba(4,22,32,.76)
}

.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-phoenix.webp') 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 {
  display:inline-block;
  padding-bottom:.16em;
  margin-bottom:-.16em;
  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 { width:65%; background-image:url('../images/hero-phoenix.webp'); background-size:auto 100%; background-position:94% center }

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

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

.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;
  }
  .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:65%; background-image:url('../images/hero-phoenix.webp'); background-size:auto 100%; background-position:94% center }

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


/* Phoenix PvE expansion. Footer follows content in normal document flow. */
body { display:block; }
.hero { min-height:0; background-position:center center; }
.hero-inner { min-height:clamp(640px,45.8vw,850px); padding:72px 0 25px clamp(160px,14vw,240px); display:flex; flex-direction:column; justify-content:space-between; gap:52px; }
.hero-copy { width:min(680px,100%); padding:0; }
.hero h1 { font-size:clamp(46px,3.8vw,70px); line-height:1.04; letter-spacing:-.045em; margin-bottom:22px; }
.hero-description { max-width:590px; font-size:18px; line-height:1.6; text-shadow:0 2px 5px #000; }
.hero::before { background:linear-gradient(90deg,#03101b15,#03101b6b 24%,#03101b6b 49%,transparent 79%),linear-gradient(0deg,#050f17bd,transparent 28%); }
.hero .eyebrow { letter-spacing:3px; font-size:13px; }
.feature-strip { flex-shrink:0; width:min(100%,1000px); margin-top:0; }
.feature-strip a { font-size:14px; white-space:normal; }
.feature-section { padding:24px 0; }
.feature-card { min-height:255px; }
.card-art { height:100%; }
.card-copy { min-height:253px; max-width:80%; padding:22px; }
.card-copy p { font-size:15px; max-width:205px; line-height:1.55; }
.button-small { font-size:14px; min-height:40px; }
.server-card { padding:20px; }
.status-heading { flex-wrap:wrap; align-items:flex-start; }
.status-label { margin-left:0; font-size:13px; white-space:normal; }
.status-heading h2 { font-size:16px; }
.server-summary { gap:12px; align-items:center; border:0; min-height:70px; }
.server-summary h3 { font-size:19px; }
.server-summary p { font-size:12px; letter-spacing:.05em; }
.server-emblem { width:60px; height:60px; object-fit:contain; flex-shrink:0; }
.server-facts { display:grid; gap:6px; margin:16px 0; font-size:14px; }
.server-facts>div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.server-facts dt { color:var(--muted); }
.server-facts dd { margin:0; color:#b6f5f2; overflow-wrap:anywhere; text-align:right; }
.server-guide-button { width:100%; margin-top:auto; padding:11px; font-size:14px; gap:10px; }
.server-note,.status-timestamp { font-size:13px; line-height:1.5; margin:0 0 14px; }
.status-timestamp { margin:10px 0 0; color:#9db8c9; }
.section-heading { max-width:760px; margin-bottom:32px; }
.section-heading h2,.spotlight-inner h2,.home-stories h2,.join-teaser h2 { font-size:clamp(27px,2.5vw,42px); line-height:1.15; }
.section-heading p,.spotlight-inner p,.home-stories p,.join-teaser p { font-size:17px; line-height:1.75; }
.experience-section { padding-block:64px; }
.experience-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.experience-card { position:relative; isolation:isolate; overflow:hidden; min-height:315px; border:1px solid #315569; border-radius:10px; background:#071721; transition:border-color .2s,transform .2s; }
.experience-card:hover { border-color:#42cca9; transform:translateY(-3px); }
.experience-art { position:absolute; z-index:-2; inset:0; background:radial-gradient(ellipse at right top,#1a766153,transparent 70%),#071923; }
.experience-card::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#03121aed 12%,#03121acf 50%,#03121a30); }
.experience-events .experience-art,.experience-raidable-bases .experience-art,.experience-community .experience-art { background:url('../images/hero-phoenix.webp') 90% 60%/cover; }
.experience-progression .experience-art { background: url('../images/phoenix-logo.webp') 95% center/230px auto no-repeat,radial-gradient(ellipse at right,#007d5760,transparent),#071923; }
.experience-copy { padding:30px; }
.experience-copy .feature-icon { margin-bottom:16px; }
.experience-copy .eyebrow { font-size:12px; letter-spacing:2px; margin:0 0 10px; }
.experience-copy h2,.experience-copy h3 { font-size:27px; max-width:430px; }
.experience-copy>p:not(.eyebrow) { max-width:400px; font-size:16px; line-height:1.7; }
.experience-copy .text-link { display:inline-flex; align-items:center; gap:10px; font-size:14px; }
.section-link { margin-top:28px; }
.progression-spotlight { border-block:1px solid #294c55; background:radial-gradient(ellipse at 75% 50%,#0a66433b,transparent 70%),#07161f; }
.spotlight-inner { display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:60px; padding-block:56px; }
.spotlight-inner>div { max-width:800px; }
.spotlight-inner>img { width:min(320px,100%); justify-self:center; filter:drop-shadow(0 0 35px #05d58a22); }
.progression-path { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:24px 0; }
.progression-path li { border:1px solid #2e7564; border-radius:5px; padding:10px 15px; color:#9ff3d7; font-size:13px; font-weight:650; }
.home-stories { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding-block:64px; }
.home-stories article+article { border-left:1px solid #234853; padding-left:50px; }
.home-stories h2 { font-size:32px; }
.join-teaser { border:1px solid #346856; border-radius:12px; background:linear-gradient(100deg,#0a292d,#052218); padding:35px 40px; display:flex; align-items:center; gap:40px; }
.join-teaser>div:first-child { flex:1; }
.join-teaser p:last-child { margin-bottom:0; }
.join-teaser-action { display:flex; flex-direction:column; align-items:center; gap:20px; }
kbd { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:70px; min-height:62px; border:1px solid #70e7ca; border-bottom:5px solid #277f70; border-radius:10px; background:linear-gradient(#23494d,#0b202a); color:#d8fff4; box-shadow:0 0 20px #0be5a625; font:700 26px/1.3 Inter,sans-serif; }
.faq-section { padding:64px 0 20px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); column-gap:60px; }
.faq-list details { border-bottom:1px solid #294554; }
.faq-list summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; font-size:16px; font-weight:600; cursor:pointer; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { font-size:23px; color:var(--accent); }
.faq-list details[open] summary span { transform:rotate(45deg); }
.faq-list details[open] summary { color:#74f5d5; }
.faq-list p { line-height:1.8; font-size:16px; padding-right:35px; }
.faq-followup { grid-column:2; margin-top:25px; font-size:14px; }
.discord-cta { margin:36px 0 48px; padding:30px 36px; border:1px solid #205888; border-radius:10px; background:linear-gradient(110deg,#082433,#061523); display:flex; align-items:center; justify-content:space-between; gap:28px; }
.discord-cta h2 { font-size:27px; margin:12px 0 8px; }
.discord-cta p { margin:0; }
.discord-cta>.button { flex-shrink:0; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding:16px 0 22px; border-top:1px solid #173244; font-size:13px; color:#aac4d5; }
.footer-bottom small { font-size:13px; }
.footer-bottom .icon { width:16px;height:16px; }
.footer-inner,.footer-brand,.footer-description,.footer-inner nav,.footer-social span { font-size:13px; }
.footer-inner { padding-block:22px; flex-wrap:wrap; }
.page-intro { font-size:18px; line-height:1.75; max-width:820px; }
.page-heading { max-width:950px; margin-bottom:35px; }
.page-heading h1 { font-size:clamp(34px,4vw,62px); }
.page-section { padding-block:48px; }
.detail-banner { position:relative; height:240px; border:1px solid #2c5864; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(90deg,#05182022,#03151b90),url('../images/hero-phoenix.webp') center 52%/cover; margin-bottom:26px; }
.detail-symbol { width:80px;height:80px; color:#a0ffe0; filter:drop-shadow(0 0 14px #00ffb8); }
.detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.detail-grid article { padding:28px; border:1px solid #274955; border-radius:8px; background:#091c26; }
.detail-grid h2 { font-size:24px; margin-top:30px; }
.detail-grid p { font-size:16px; line-height:1.8; margin-bottom:0; }
.related-links { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin:32px 0; font-size:14px; }
.related-links>a { color:#76dce8; }
.related-links .icon { width:18px; }
.feature-extras { margin-top:35px; padding:30px; background:#0b222a; border-left:3px solid #47e5bd; }
.feature-extras>p { max-width:950px; line-height:1.8; }
.feature-chips { display:flex; flex-wrap:wrap; gap:12px; }
.feature-chips a { border:1px solid #32606c; padding:10px 16px; border-radius:5px; color:#99e5d9; font-size:14px; }
.page-play { margin-top:32px; }
.about-layout { display:grid; grid-template-columns:1fr 2fr; align-items:center; gap:50px; padding:35px; border:1px solid #254954; border-radius:10px; background:#081d25; }
.about-layout p { line-height:1.8; }
.play-layout,.server-detail-layout { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.play-layout { max-width:1100px; }
.play-layout h2 { font-size:20px; margin-bottom:20px; }
.server-selector { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.server-selector a { display:flex; align-items:center; gap:15px; border:1px solid #2c5360; border-radius:8px; padding:22px; background:#081c29; }
.server-selector a[aria-current] { border-color:#37d9a9; background:#0b302b; color:#98ffdf; box-shadow:0 0 16px #00ff921c; }
.server-selector span { flex:1; }
.server-list .server-card { min-height:270px; }
.inline-guide { max-width:850px; margin-top:35px; border:1px solid #2b5261; border-radius:10px; overflow:hidden; }
.inline-guide>summary { cursor:pointer; padding:20px 25px; font-size:16px; color:#90dbc8; }
.inline-guide-content { padding:10px 30px 30px; }
.join-dialog { width:min(800px,calc(100% - 32px)); max-height:calc(100dvh - 32px); border:1px solid #438d80; border-radius:14px; background:radial-gradient(ellipse at top right,#0b4c3938,transparent 55%),#06141e; color:var(--text); padding:30px; box-shadow:0 0 60px #0df0ae22,0 30px 90px #000; overscroll-behavior:contain; }
.join-dialog::backdrop { background:#000b; backdrop-filter:blur(5px); }
.dialog-open { overflow:hidden; }
.join-dialog-top { display:flex; align-items:center; gap:14px; }
.join-dialog-top>img { width:64px; height:64px; object-fit:contain; }
.join-dialog-top>div { flex:1; min-width:0; }
.join-dialog-top .eyebrow { margin:0 0 4px; font-size:12px; letter-spacing:2px; }
.join-dialog-top h2 { font-size:26px; margin:0; }
.dialog-close { flex-shrink:0; width:44px; height:44px; border:1px solid #315767; border-radius:6px; background:#102430; color:#bde4e7; font-size:28px; line-height:1; }
#join-dialog-intro { font-size:15px; margin:18px 0 22px; }
.join-state { margin-bottom:20px; }
.join-steps { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; }
.join-steps>li { display:flex; gap:18px; align-items:center; padding:20px 0; border-top:1px solid #25424e; }
.join-steps>li>div { flex:1; min-width:0; }
.step-number { color:#64eac2; font-size:14px; letter-spacing:2px; align-self:flex-start; padding-top:3px; }
.join-steps h3 { font-size:15px; letter-spacing:.07em; margin:0 0 7px; }
.join-steps p { font-size:15px; line-height:1.6; margin:0; }
.join-steps>li>.icon { color:#80b6bd; width:32px; height:32px; }
.key-small { display:inline; width:auto; min-height:0; border-width:1px 1px 3px; border-radius:4px; font-size:13px; padding:2px 6px; box-shadow:none; }
.key-enter { font-size:15px; min-height:45px; width:80px; }
.terminal { border:1px solid #316252; border-radius:7px; background:#020a10; margin-top:15px; overflow:hidden; }
.terminal-heading { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #1d3b3a; padding:9px 14px; background:#0a201f; color:#8ebcb2; font-size:12px; letter-spacing:1.4px; }
.terminal-heading .icon { width:16px; height:16px; }
.terminal-body { display:flex; align-items:center; gap:16px; padding:18px 15px; }
.join-command { flex:1; min-width:0; color:#8bffce; font:15px/1.7 Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; user-select:all; }
.terminal-body>.button { flex-shrink:0; gap:8px; }
.join-steps p.copy-feedback { margin-top:8px; min-height:0; color:#93dfbb; font-size:13px; }
.join-help { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #265362; padding-top:22px; margin-top:5px; }
.join-help strong { font-size:16px; }
.join-help p { margin:6px 0 0; font-size:14px; }
.join-help .button { font-size:13px; padding:12px; gap:8px; flex-shrink:0; }
.clipboard-helper { position:fixed; width:1px!important; height:1px!important; min-height:0; padding:0!important; inset:0 auto auto 0; opacity:0; }
.server-editor { margin-bottom:25px; }
.server-editor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 22px; }
.server-editor-options { display:flex; flex-wrap:wrap; gap:25px; margin:20px 0; }
.server-editor-options label { display:flex; gap:10px; align-items:center; font-size:14px; }
.server-editor-options input[type=checkbox] { width:20px; height:20px; accent-color:#31ddae; }
.brand-text>small { white-space:normal; text-align:center; font-size:11px; line-height:1.3; letter-spacing:1px; }

@media(max-width:1150px) {
 .hero-inner { padding:65px 0 24px 11vw; min-height:650px; }
 .hero h1 { font-size:54px; }
 .hero-description { max-width:570px; }
 .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .card-copy { max-width:80%; }
 .spotlight-inner { gap:30px; }
 .faq-section { grid-template-columns:1fr 1.4fr; gap:30px; }
 .home-stories { gap:35px; }
 .home-stories article+article { padding-left:30px; }
 .server-editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .detail-grid { grid-template-columns:1fr; }
 .detail-grid h2 { margin-top:0; }
}
@media(max-width:800px) {
 .hero { background-position:64% center; }
 .hero-inner { min-height:730px; padding:48px 0 22px; gap:40px; }
 .hero::before { background:linear-gradient(90deg,#020e1bd9,#0316229c 65%,#03162235),linear-gradient(0deg,#050f17d9,transparent 45%); }
 .hero-copy { max-width:620px; }
 .hero h1 { font-size:clamp(38px,6.4vw,54px); }
 .hero-description { font-size:17px; }
 .feature-strip { grid-template-columns:repeat(3,1fr); }
 .feature-strip a { font-size:13px; }
 .experience-copy { padding:25px; }
 .experience-copy h2,.experience-copy h3 { font-size:25px; }
 .spotlight-inner { grid-template-columns:1.6fr 1fr; gap:20px; padding-block:40px; }
 .home-stories { gap:25px; padding-block:40px; }
 .home-stories h2 { font-size:27px; }
 .join-teaser { padding:28px; gap:20px; }
 .faq-section { display:block; padding-top:45px; }
 .discord-cta { padding:28px; flex-wrap:wrap; }
 .play-layout,.server-detail-layout { gap:22px; }
 .network-copy p,.network-copy a { white-space:normal; }
 .network-copy { min-width:0; }
 .footer-inner nav { white-space:normal; flex-wrap:wrap; row-gap:15px; }
 .footer-bottom { font-size:12px; }
 .page-section { padding-block:32px; }
}
@media(max-width:580px) {
 .hero-inner { min-height:760px; padding-top:42px; gap:44px; }
 .hero h1 { font-size:clamp(34px,9.2vw,49px); }
 .hero-description { font-size:16px; line-height:1.65; }
 .hero .eyebrow { font-size:11px; letter-spacing:2px; }
 .feature-strip { grid-template-columns:repeat(2,1fr); }
 .feature-strip a { font-size:13px; }
 .feature-strip a:last-child { grid-column:1/-1; justify-content:center; }
 .feature-grid,.experience-grid,.spotlight-inner,.home-stories,.play-layout,.server-detail-layout,.server-list,.about-layout { grid-template-columns:1fr; }
 .feature-card { min-height:230px; }
 .card-copy { min-height:228px; padding:22px; }
 .card-copy p { font-size:16px; }
 .experience-card { min-height:280px; }
 .experience-section { padding-block:42px; }
 .spotlight-inner>img { width:190px; grid-row:1; }
 .home-stories article+article { border-left:0; border-top:1px solid #284957; padding:28px 0 0; }
 .join-teaser { flex-direction:column; align-items:flex-start; padding:25px; }
 .join-teaser-action { flex-direction:row; width:100%; justify-content:space-between; }
 .discord-cta { margin-bottom:32px; padding:25px; }
 .discord-cta>.button { width:100%; }
 .join-dialog { padding:20px; width:calc(100% - 20px); max-height:calc(100dvh - 20px); }
 .join-dialog-top { gap:10px; }
 .join-dialog-top>img { width:44px; height:44px; }
 .join-dialog-top h2 { font-size:20px; }
 .dialog-close { width:38px; height:38px; }
 .join-steps>li { gap:10px; }
 .join-steps h3 { font-size:14px; letter-spacing:.03em; }
 .join-steps p { font-size:14px; }
 .terminal-body { flex-direction:column; align-items:stretch; padding:13px; }
 .terminal-body .button { align-self:flex-start; }
 .join-command { width:100%; font-size:14px; }
 .join-steps kbd:not(.key-small) { width:54px; min-height:51px; font-size:21px; }
 .join-steps kbd.key-enter { width:62px; min-height:40px; font-size:12px; }
 .join-help { flex-direction:column; align-items:flex-start; gap:15px; }
 .join-help .button { width:100%; }
 .inline-guide-content { padding:10px 18px 22px; }
 .inline-guide summary { padding:18px; }
 .server-editor-grid { grid-template-columns:1fr; }
 .server-selector a { padding:18px; }
 .brand-text>small { font-size:10px; letter-spacing:.7px; }
 .footer-brand,.footer-social span { font-size:12px; }
 .footer-social { gap:10px; }
 .about-layout { padding:25px; gap:25px; }
 .about-layout img { width:200px; justify-self:center; }
 .detail-grid article { padding:23px; }
 .detail-banner { height:180px; }
}
@media(prefers-reduced-motion:reduce) { .experience-card:hover { transform:none; } }
/* Included access: extend the existing Phoenix components. */
.site-header { background:rgba(4,22,32,.76); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.home-page .site-header { position:absolute; top:0; left:0; width:100%; }
.home-page .hero { padding-top:80px; }
.play-direct { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr); gap:60px; align-items:center; max-width:1240px; padding:12px 0; }
.play-direct .page-heading { margin:0; }
.play-direct h1 { max-width:650px; }
.play-direct .page-intro { max-width:600px; }
.play-shortcut { display:flex; align-items:center; gap:17px; margin-top:30px; color:#8fb6c8; font-size:14px; line-height:1.8; }
.play-shortcut kbd { padding:12px 17px; background:#0b2530; border:1px solid #37606e; border-bottom:4px solid #23434e; border-radius:7px; color:#91f4db; font-family:inherit; font-weight:700; font-size:25px; }
.settings-stack { display:flex; flex-direction:column; gap:24px; min-width:0; }
.included-section { padding-top:24px; padding-bottom:20px; }
.included-disclosure { border:1px solid #2b7165; border-radius:11px; background:radial-gradient(ellipse at top right,#07544436,transparent 55%),#071b26; box-shadow:0 0 32px #07d99b0d; }
.included-teaser { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:38px; padding:38px 42px; }
.included-teaser::-webkit-details-marker { display:none; }
.included-teaser .eyebrow { margin-bottom:10px; font-size:11px; letter-spacing:2.8px; }
.included-teaser h2 { font-size:clamp(25px,2.3vw,36px); line-height:1.2; letter-spacing:-.035em; margin-bottom:13px; }
.included-teaser-copy>p:last-child { margin:0; font-weight:400; font-size:16px; line-height:1.65; color:#a5c8d9; max-width:780px; }
.comparison-trigger { flex-shrink:0; font-size:14px; min-width:220px; }
.comparison-trigger .icon { transition:transform .25s; }
.included-disclosure[open] .comparison-trigger .icon { transform:rotate(90deg); }
.included-content { padding:0 42px 36px; }
.comparison-intro { padding:30px 0 14px; border-top:1px solid #29505d; }
.comparison-intro>p:first-child { max-width:900px; line-height:1.8; font-size:17px; }
.comparison-note { color:#8eafbf; font-size:13px; line-height:1.6; }
.comparison-group { margin:28px 0 0; }
.comparison-group h3 { font-size:24px; margin-bottom:15px; }
.comparison-group-description { font-size:14px; line-height:1.7; max-width:860px; color:#9bbdcc; }
.comparison-columns,.comparison-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr); gap:22px; align-items:center; }
.comparison-columns { padding:15px 20px; color:#9ab8c9; font-size:12px; font-weight:650; text-transform:uppercase; letter-spacing:1.2px; }
.comparison-columns>span:nth-child(2) { color:#8beacb; }
.comparison-rows { border:1px solid #244754; border-radius:8px; }
.comparison-row { padding:18px 20px; border-bottom:1px solid #203e4a; background:#071925; min-height:78px; }
.comparison-row:nth-child(even) { background:#0b202b; }
.comparison-row:last-child { border-bottom:0; border-radius:0 0 8px 8px; }
.comparison-row:first-child { border-radius:8px 8px 0 0; }
.comparison-feature { display:flex; gap:9px; align-items:center; min-width:0; }
.comparison-feature h4 { font-size:15px; line-height:1.5; margin:0; color:#e0edf5; }
.comparison-value { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.comparison-value>small { color:#8ceace; font-size:12px; line-height:1.5; }
.comparison-typical>.comparison-frequency { color:#adc1ce; }
.access-badge { display:inline-flex; gap:7px; align-items:baseline; padding:7px 10px; border-radius:5px; border:1px solid #296858; background:#10342e; color:#99f7d6; font-size:12px; line-height:1.5; font-weight:600; }
.access-badge>span { flex-shrink:0; }
.access-premium { border-color:#3b6675; background:#122c3a; color:#b6dbea; }
.access-neutral { border-color:#354853; background:#11212c; color:#adc1ce; }
.comparison-mobile-label { display:none; }
.comparison-finale { display:flex; gap:35px; align-items:center; justify-content:space-between; margin-top:35px; padding-top:28px; border-top:1px solid #305461; }
.comparison-finale>p { color:#adebda; font-size:18px; line-height:1.6; font-weight:650; max-width:770px; margin:0; }
.comparison-finale .button { flex-shrink:0; }
.info-anchor { display:inline-flex; flex-shrink:0; }
.info-trigger { width:28px; height:28px; display:inline-flex; justify-content:center; align-items:center; border:1px solid #387b74; background:#0b2e31; color:#91f9d6; border-radius:50%; font-family:inherit; font-size:15px; font-weight:700; font-style:normal; cursor:help; padding:0; transition:box-shadow .18s,border-color .18s; }
.info-trigger:hover,.info-trigger:focus-visible,.info-trigger[aria-expanded="true"] { border-color:#71e7c5; box-shadow:0 0 13px #12e5bc33; outline-offset:4px; }
.info-tooltip { position:fixed; z-index:80; width:min(350px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; background:rgba(5,23,32,.97); border:1px solid #4d9b88; border-radius:9px; box-shadow:0 14px 40px #0009,0 0 20px #19c9a322; backdrop-filter:blur(12px); padding:19px 21px; color:#bdd4e2; font-size:13px; line-height:1.65; }
.info-tooltip[hidden] { display:none; }
.info-tooltip:not([hidden]) { animation:info-appear .15s ease-out; }
.info-title { display:block; color:#e4f5fa; font-size:16px; line-height:1.4; margin-bottom:15px; }
.info-section { display:block; margin-top:13px; }
.info-section>strong { display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#85edcd; margin-bottom:5px; }
.info-section>span { display:block; }
@keyframes info-appear { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-list .faq-card { border:1px solid #294d5c; border-radius:8px; background:linear-gradient(120deg,#0b2331,#071924); }
.faq-list summary { padding:20px 23px; }
.faq-list .faq-answer { padding:0 23px 22px; }
.faq-list .faq-answer p { padding:0; margin:0; }
.faq-list .faq-answer .text-link { margin-top:14px; display:inline-flex; font-size:14px; }
.faq-list .faq-card[open] { border-color:#3a8270; }
.faq-list summary span { transition:transform .2s; }
@media(max-width:1100px) {
 .included-teaser { padding:30px; gap:24px; }
 .included-content { padding:0 30px 30px; }
 .comparison-trigger { min-width:180px; padding:16px; }
 .comparison-columns,.comparison-row { gap:14px; }
 .comparison-row { padding:17px 14px; }
 .play-direct { gap:35px; }
}
@media(max-width:800px) {
 .home-page .hero { padding-top:74px; }
 .included-teaser { align-items:flex-start; flex-direction:column; gap:22px; }
 .comparison-finale { flex-direction:column; align-items:flex-start; gap:22px; }
 .play-direct { grid-template-columns:1fr; gap:28px; }
 .play-direct .server-card { max-width:600px; width:100%; }
 .play-shortcut { margin-top:22px; }
 .info-trigger { width:34px; height:34px; }
}
@media(max-width:650px) {
 .included-section { padding-top:14px; }
 .included-teaser { padding:25px 21px; }
 .included-teaser h2 { font-size:27px; }
 .included-content { padding:0 16px 25px; }
 .comparison-intro>p:first-child { font-size:15px; }
 .comparison-columns { display:none; }
 .comparison-rows { border:0; display:flex; flex-direction:column; gap:12px; }
 .comparison-row { grid-template-columns:1fr 1fr; gap:14px 12px; border:1px solid #294b58!important; border-radius:8px!important; padding:16px; }
 .comparison-feature { grid-column:1/-1; justify-content:space-between; }
 .comparison-feature h4 { font-size:16px; }
 .comparison-mobile-label { display:block; font-size:10px; line-height:1.4; font-weight:600; color:#a0bac8; }
 .comparison-phoenix .comparison-mobile-label { color:#8cdcc6; }
 .access-badge { font-size:11px; padding:6px 7px; gap:5px; }
 .comparison-value>small { font-size:11px; }
 .comparison-group h3 { font-size:21px; line-height:1.4; }
 .comparison-finale>p { font-size:16px; }
 .faq-list summary { padding:18px; font-size:15px; }
 .faq-list .faq-answer { padding:0 18px 20px; }
}
@media(prefers-reduced-motion:reduce) {
 .info-tooltip:not([hidden]) { animation:none; }
 .comparison-trigger .icon,.faq-list summary span { transition:none; }
}
/* Keep original atlas crops inside their original artwork region. */
.card-progression .card-art,.card-events .card-art { max-height:201px; }
.comparison-group-premium .comparison-rows { display:grid; grid-template-columns:1fr 1fr; gap:12px; border:0; }
.comparison-group-premium .comparison-row { grid-template-columns:1fr auto; border:1px solid #294b58; border-radius:8px; }
html:not(.js) .info-anchor:focus-within .info-tooltip,html:not(.js) .info-anchor:hover .info-tooltip { display:block; left:12px; bottom:12px; top:auto; max-width:calc(100% - 24px); }
@media(max-width:800px) { .comparison-group-premium .comparison-rows { grid-template-columns:1fr; } }
@media(max-width:650px) { .comparison-group-premium .comparison-feature { grid-column:auto; } }

/* Editable comparison and consistent access explanations. */
.access-anchor { max-width:100%; min-width:0; }
button.access-badge { font-family:inherit; cursor:help; text-align:left; white-space:normal; }
button.access-badge:hover,button.access-badge:focus-visible,button.access-badge[aria-expanded="true"] { border-color:#91e5ce; box-shadow:0 0 10px #21bd9229; outline-offset:4px; }
.comparison-unspecified { color:#90a8b6; font-size:12px; }
.comparison-context { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:15px 0 22px; }
.comparison-context>div { border:1px solid #477386; border-radius:8px; padding:22px 25px; background:#0c2635; }
.comparison-context .comparison-our-context { border-color:#3c977d; background:#0b302d; }
.comparison-context>div>span { font-size:12px; letter-spacing:2px; font-weight:750; color:#a8dfff; }
.comparison-context .comparison-our-context>span { color:#85f2cf; }
.comparison-context h3 { font-size:25px; line-height:1.3; margin:9px 0; color:#e5f5ff; }
.comparison-context p { margin:0; color:#a9c6d7; font-size:14px; line-height:1.65; }
.comparison-columns { font-size:13px; font-weight:750; }
.comparison-admin-heading { display:flex; justify-content:space-between; gap:25px; align-items:center; margin:28px 0; }
.comparison-admin-heading h2 { font-size:30px; margin:8px 0; }
.comparison-admin-heading p { max-width:700px; line-height:1.7; }
.comparison-admin-heading .button { flex-shrink:0; }
.comparison-admin-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; align-items:start; }
.comparison-editor { scroll-margin-top:20px; }
.comparison-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.comparison-editor .settings-field { margin:16px 0; min-width:0; }
.comparison-editor small { display:block; margin-top:7px; color:#9fb9c7; line-height:1.6; }
.comparison-editor input:not([type="checkbox"]),.comparison-editor select,.comparison-editor textarea,.comparison-text-grid textarea { width:100%; min-width:0; border:1px solid #365263; border-radius:6px; background:#061823; color:#d5e9f4; padding:12px; font:inherit; }
.comparison-editor textarea,.comparison-text-grid textarea { resize:vertical; }
.comparison-editor select { min-height:48px; }
.comparison-editor .muted { font-size:13px; line-height:1.7; }
.comparison-visibility { display:flex; align-items:center; gap:10px; margin:23px 0; }
.comparison-visibility input { width:18px; height:18px; accent-color:#39e2b4; }
.comparison-admin-item { padding:18px 0; border-bottom:1px solid #294553; display:flex; gap:15px; align-items:center; justify-content:space-between; }
.comparison-admin-item:last-child { border-bottom:0; }
.comparison-admin-item h4 { font-size:15px; margin:0 0 7px; }
.comparison-admin-item p,.comparison-admin-item small { font-size:12px; line-height:1.6; color:#a9c7d7; margin:0; }
.comparison-admin-actions { display:flex; gap:10px; align-items:center; flex-shrink:0; }
.comparison-remove { background:none; color:#dbb9b3; border:0; cursor:pointer; padding:9px 4px; font:inherit; font-size:13px; }
.comparison-remove:hover { text-decoration:underline; }
.comparison-text-settings,.comparison-archive { margin-top:24px; }
.comparison-text-settings summary,.comparison-archive summary { cursor:pointer; font-weight:700; font-size:18px; }
.comparison-text-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.comparison-text-grid .settings-field { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px 0; }
.comparison-text-grid .settings-field textarea { flex:1; }
@media(max-width:1050px) { .comparison-admin-layout { grid-template-columns:1fr; } }
@media(max-width:650px) {
 .comparison-context { grid-template-columns:1fr; gap:12px; }
 .comparison-context h3 { font-size:21px; }
 .comparison-context>div { padding:18px; }
 .comparison-admin-heading { align-items:flex-start; flex-direction:column; }
 .comparison-editor-grid,.comparison-text-grid { grid-template-columns:1fr; }
 .comparison-admin-item { flex-wrap:wrap; }
}

.comparison-admin-list { max-height:1040px; overflow:auto; scrollbar-gutter:stable; }
.comparison-text-settings { margin-bottom:24px; }
@media(max-width:650px) { .comparison-admin-list { max-height:650px; } }