/* ==========================================================================
   Silver Keep MC — design system (one file, no build step)
   Cascade order matters: later sections refine earlier ones. Repeated rules
   for the same selector are merged and overridden declarations removed.
   Colours: every colour is a token. Edit the theme blocks in section 28
   (:root/[data-theme="dark"] and [data-theme="light"]). Elsewhere colours are
   written as rgb(var(--tint) / .06) etc. so they work in both themes.
   ========================================================================== */
/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: rgb(var(--lantern-rgb) / .3); color: #fff; }
/* Ambient page light — static gradients, painted once */
.atmo { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.atmo::before { content: ""; position: absolute; inset: 0; }
/* Accessibility */
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 400;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-weight: 650;
  transform: translateY(-180%);
  transition: transform var(--t) var(--ease);
}
.skip-link:focus { transform: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; border-radius: var(--r-sm); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Layout primitives */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section); }
/* ---------- 3. Type ---------- */
.h1 { font-size: clamp(2.6rem, 6vw, 4.9rem); line-height: 1; }
.h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.04; }
.h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.15; }
.h4 { font-size: 1.125rem; line-height: 1.3; }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.26rem); line-height: 1.55; max-width: 44ch; }
code { font-size: .92em; }
/* The brand accent: a serif italic "glint" for one or two words per heading */
.glint { background: var(--glint); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; color: var(--ink-3); }
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border-radius: 1px;
  flex: none;
  background: var(--lantern);
  box-shadow: 0 0 12px rgb(var(--lantern-rgb) / .7);
}
.section-head { display: grid; gap: 18px; }
/* Surface — the one card treatment used everywhere */
.surface { position: relative; border-radius: var(--r-lg); }
/* Icon tile */
.tile {
  --c: var(--moon);
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
}
.tile svg { width: 21px; height: 21px; }
.tile--lantern { --c: var(--lantern); }
/* Buttons */
.btn {
  --h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 22px;
  border-radius: var(--r-pill);
  isolation: isolate;
  overflow: hidden;
  font-size: 15.5px;
  white-space: nowrap;
  user-select: none;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--lg { --h: 56px; padding: 0 28px; font-size: 16.5px; }
.btn--sm { --h: 40px; padding: 0 16px; font-size: 14px; }
.btn .arrow { transition: transform var(--t) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { color: #080b11; }
.btn--discord { background: var(--discord); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 34px -14px rgba(88, 101, 242, .9); }
/* Light sweep — reserved for the two high-intent buttons */
.btn--primary::after, .btn--discord::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(var(--tint) / .45) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn--discord::after { background: linear-gradient(110deg, transparent 30%, rgb(var(--tint) / .22) 50%, transparent 70%); }
@media (hover: hover) {
  .btn--primary:hover, .btn--discord:hover { transform: translateY(-2px); }
  .btn--primary:hover { box-shadow: inset 0 1px 0 #fff, 0 18px 44px -12px rgb(var(--moon-rgb) / .75); }
  .btn--discord:hover { background: #6671ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 44px -14px rgba(88, 101, 242, 1); }
  .btn--primary:hover::after, .btn--discord:hover::after { transform: translateX(120%); }
}
.btn--glass { color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost { color: var(--ink-2); padding: 0 16px; }
.btn--ghost:hover { color: var(--ink); background: rgb(var(--tint) / .055); }
.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--moon);
  font-weight: 580;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--t) var(--ease);
}
.link:hover { background-size: 100% 1px; }
/* Status dot + pill */
.dot { --c: var(--offline); position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; transition: background-color .6s var(--ease); }
.dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--c); opacity: 0; }
[data-state="online"] .dot { --c: var(--online); }
[data-state="online"] .dot::after { animation: ping 2.6s var(--ease-out) infinite; }
[data-state="offline"] .dot { --c: var(--offline); }
[data-state="unknown"] .dot { --c: var(--unknown); }
[data-state="loading"] .dot { --c: var(--ink-3); animation: breathe 1.4s ease-in-out infinite; }
@keyframes ping { 0% { opacity: .75; transform: scale(.55); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes breathe { 50% { opacity: .3; } }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 14px 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  font-size: 13.5px;
  font-weight: 580;
  color: var(--ink);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
a.pill:hover { border-color: var(--line-3); background: rgb(var(--panel) / .75); }
.pill[data-state="online"] { border-color: color-mix(in srgb, var(--online) 26%, var(--line-2)); }
/* Avatars (live player heads) */
/* Chips */
/* Meter */
/* IP field + copy button */
.ip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 18px;
  border-radius: var(--r-md);
  background: rgb(var(--shade) / calc(.34 * var(--shade-a)));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 2px rgb(var(--shade) / calc(.35 * var(--shade-a)));
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.ip:hover { border-color: var(--line-3); }
.ip.is-copied {
  border-color: color-mix(in srgb, var(--online) 55%, transparent);
  box-shadow: inset 0 1px 2px rgb(var(--shade) / calc(.35 * var(--shade-a))), 0 0 0 4px rgb(var(--online-rgb) / .08);
}
.ip code { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; cursor: text; }
.copy-btn {
  --h: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  height: var(--h);
  min-width: 116px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 680;
  background: linear-gradient(180deg, #fff, #d9e2ee);
  color: #080b11;
  box-shadow: inset 0 1px 0 #fff;
}
.copy-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 6px 18px -9px rgb(var(--moon-rgb) / .48); }
.copy-btn:active { transform: scale(.975); }
.copy-btn .ic { position: relative; width: 16px; height: 16px; }
.copy-btn .ic svg { position: absolute; inset: 0; width: 16px; height: 16px; transition: opacity .62s cubic-bezier(.22, 1, .36, 1), transform .72s cubic-bezier(.22, 1, .36, 1); }
.copy-btn .ic .check { opacity: 0; transform: scale(.4) rotate(-20deg); }
.copy-btn .txt { display: grid; overflow: hidden; }
.copy-btn .txt span { grid-area: 1 / 1; transition: opacity .58s cubic-bezier(.22, 1, .36, 1), transform .68s cubic-bezier(.22, 1, .36, 1); }
.copy-btn .txt .done { opacity: 0; transform: translateY(100%); }
.copy-btn.is-copied { background: linear-gradient(180deg, #86f2b6, #4fd48a); color: #03150b; box-shadow: inset 0 0 0 1px rgb(var(--online-rgb) / .2), 0 5px 18px -9px rgb(var(--online-rgb) / .55); animation: copy-confirm .72s cubic-bezier(.16, 1, .3, 1); }
.copy-btn.is-copied .ic .copy { opacity: 0; transform: scale(.4) rotate(20deg); }
.copy-btn.is-copied .ic .check { opacity: 1; transform: none; }
.copy-btn.is-copied .txt .idle { opacity: 0; transform: translateY(-100%); }
.copy-btn.is-copied .txt .done { opacity: 1; transform: none; }
.copy-btn .check path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .68s cubic-bezier(.22, 1, .36, 1) .1s; }
.copy-btn.is-copied .check path { stroke-dashoffset: 0; }
.copy-btn.is-copied::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: halo .95s cubic-bezier(.16, 1, .3, 1); }
@keyframes halo { from { box-shadow: 0 0 0 0 rgb(var(--online-rgb) / .42); } to { box-shadow: 0 0 0 9px rgb(var(--online-rgb) / 0); } }
@keyframes copy-confirm { 0% { transform: scale(.98); } 65% { transform: scale(1.012); } 100% { transform: none; } }
@keyframes pop { 40% { transform: scale(1.05); } }
/* Disclosure (native <details>) */
/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 12px 18px 12px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  transform: translate(-50%, 24px) scale(.96);
  opacity: 0;
  pointer-events: none;
}
.toast.is-shown { transform: translate(-50%, 0) scale(1); opacity: 1; }
.toast .ico { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgb(var(--online-rgb) / .15); color: var(--online); flex: none; }
.toast .ico svg { width: 18px; height: 18px; }
.toast b { display: block; font-size: 14.5px; }
.toast span { display: block; font-size: 13px; color: var(--ink-3); }
/* Preview notice */
.preview-note {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 6px 6px 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  border: 1px solid rgb(var(--lantern-rgb) / .3);
  color: var(--ink-2);
}
.preview-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lantern); }
.preview-note a { padding: 4px 10px; border-radius: var(--r-pill); background: rgb(var(--tint) / .08); color: var(--ink); font-weight: 650; }
/* ---------- 5. Header & navigation ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; padding-top: 12px; pointer-events: none; }
.menu-open .site-header { right: var(--mm-scrollbar-width, 0px); }
.site-header.is-hidden { transform: translateY(-110%); }
.site-header .bar {
  pointer-events: auto;
  width: min(100% - 24px, calc(var(--wrap) + 32px));
  margin-inline: auto;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 8px 0 16px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
}
.site-header.is-scrolled .bar, .menu-open .site-header .bar { -webkit-backdrop-filter: blur(24px) saturate(175%); backdrop-filter: blur(24px) saturate(175%); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -.025em; font-size: 16.5px; flex: none; }
.brand-mark { width: 32px; height: 32px; border-radius: var(--r-sm); box-shadow: 0 8px 22px -10px rgb(var(--lantern-rgb) / .55); transition: transform .6s var(--ease-spring); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
.brand small { font-weight: 550; color: var(--ink-3); margin-left: -5px; }
.nav { position: relative; margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a:not(.btn) {
  position: relative;
  z-index: 1;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 560;
  color: var(--ink-2);
  transition: color var(--t) var(--ease);
}
.nav a:not(.btn):hover, .nav a[aria-current="page"], .nav a.is-active { color: var(--ink); }
.nav a[aria-current="page"]::after, .nav a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--lantern);
  box-shadow: 0 0 8px var(--lantern);
}
.nav-ind {
  position: absolute;
  left: 0;
  top: 50%;
  height: 38px;
  margin-top: -19px;
  width: var(--w, 0);
  border-radius: var(--r-pill);
  opacity: 0;
  transform: translateX(var(--x, 0));
  pointer-events: none;
}
.nav.has-ind .nav-ind { opacity: 1; }
.nav .btn { margin-left: 10px; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-sm); place-items: center; }
.menu-btn span { position: relative; display: block; width: 20px; height: 1.5px; background: var(--ink); transition: background-color .2s var(--ease); }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink); transition: transform .45s var(--ease-out); }
.menu-btn span::before { transform: translateY(-6px); }
.menu-btn span::after { transform: translateY(6px); }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: rotate(45deg); }
.menu-open .menu-btn span::after { transform: rotate(-45deg); }
@media (max-width: 860px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
}
@media (min-width: 861px) {
  .mobile-menu { display: none; }
}
/* ---------- 7. Home: hero ---------- */
.hero { position: relative; min-height: max(700px, 100svh); display: grid; overflow: clip; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { position: absolute; inset: -6% 0 0; width: 100%; height: 106%; object-fit: cover; object-position: 62% 40%; filter: saturate(.9) contrast(1.05) brightness(.78); }
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(var(--abyss) / .92) 0%, rgb(var(--abyss) / .66) 34%, rgb(var(--abyss) / .1) 68%, transparent),
    linear-gradient(180deg, rgb(var(--abyss) / .6) 0%, rgb(var(--abyss) / .15) 16%, transparent 26%);
}
#servers { padding-top: clamp(40px, 5vw, 72px); }
.hero-content .eyebrow { color: var(--ink-2); margin-bottom: 26px; }
.hero-connect { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.connect {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  border-radius: var(--r-md);
  min-width: 0;
  border: 1px solid var(--line-2);
  transition: border-color var(--t) var(--ease);
}
.connect:hover { border-color: var(--line-3); }
.connect.is-copied { border-color: color-mix(in srgb, var(--online) 55%, transparent); }
.connect-label { display: grid; gap: 1px; min-width: 0; }
.connect-label small { font-size: 11px; font-weight: 680; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.connect code { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.connect .copy-btn { --h: 40px; min-width: 104px; font-size: 14px; }
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 24px;
  height: 40px;
  margin-left: -12px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-3);
  transition: border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.scroll-cue:hover { border-color: var(--ink-2); }
.scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--ink-2);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(11px); } }
@media (max-height: 760px) {
  .scroll-cue { display: none; }
}
@media (max-width: 760px) {
  .hero { min-height: max(640px, 100svh); }
  .hero-media img {
      object-position: 40% 30%;
      height: 70%;
      inset: 0 0 auto;
      -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
      mask-image: linear-gradient(180deg, #000 60%, transparent);
    }
  .hero-shade { background: linear-gradient(180deg, rgb(var(--abyss) / .25) 0%, transparent 22%, rgb(var(--abyss) / .72) 48%, rgb(var(--abyss) / .96) 66%, rgb(var(--abyss) / 0) 100%); }
  .hero-content .eyebrow { margin-bottom: 16px; }
  .hero-connect { flex-direction: column; align-items: stretch; }
  .hero-connect .pill { align-self: flex-start; }
  .scroll-cue { display: none; }
}
/* ---------- 8. Home: worlds (server browser) ---------- */
.servers-grid { display: grid; }
.server {
  --accent: var(--moon);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color var(--t) var(--ease);
}
.server::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(520px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 9%, transparent), transparent 45%);
  transition: opacity var(--t) var(--ease);
}
.server::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  opacity: 0;
  background: radial-gradient(380px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 60%, transparent), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity var(--t) var(--ease);
}
.server:has(.server-badge) { border-color: color-mix(in srgb, var(--lantern) 28%, var(--line)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lantern) 18%, transparent), var(--glass-shadow); }
.server:has(.server-badge) .server-badge { background: color-mix(in srgb, var(--lantern) 16%, rgb(var(--panel) / .8)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16); }
@media (hover: hover) {
  .server:hover { transform: translateY(-5px); border-color: var(--line-3); box-shadow: var(--hi), 0 50px 100px -50px color-mix(in srgb, var(--accent) 40%, rgb(var(--shade) / var(--shade-a))); }
  .server:hover::before, .server:hover::after { opacity: 1; }
  .server:hover .server-art img { transform: scale(1.05); }
}
.server-art { position: relative; overflow: hidden; background: var(--bg-2); }
.server-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.4s var(--ease-out), filter .6s var(--ease); }
.server-art::after { content: ""; position: absolute; inset: 0; }
.server-art .pill { position: absolute; z-index: 2; }
.server-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-weight: 680;
  letter-spacing: .04em;
  color: var(--lantern);
  background: rgb(var(--panel) / .6);
  border: 1px solid rgb(var(--lantern-rgb) / .32);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.server-body { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; align-content: start; }
.server-tagline { text-transform: uppercase; color: color-mix(in oklab, var(--accent) var(--accent-k), var(--ink)); }
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }
.swap > [aria-hidden="true"] { opacity: 0; transform: translateY(6px); filter: blur(4px); pointer-events: none; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* Featured world: side-by-side on wide screens */
/* ---------- 11. Inner pages: page hero ---------- */
.page-hero {
  position: relative;
  min-height: clamp(420px, 56vh, 560px);
  display: grid;
  align-items: end;
  padding: calc(var(--header-h) + 64px) 0 clamp(40px, 5vw, 64px);
  overflow: clip;
  isolation: isolate;
}
.page-hero-art { position: absolute; inset: 0; z-index: -1; }
.page-hero-art img { position: absolute; inset: -8% 0 0; width: 100%; height: 108%; object-fit: cover; object-position: 60% 45%; filter: saturate(.9) brightness(.82); }
.page-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(var(--abyss) / .92) 0%, rgb(var(--abyss) / .55) 50%, rgb(var(--abyss) / .12)), linear-gradient(180deg, rgb(var(--abyss) / .5), transparent 26%, transparent 55%, var(--page) 100%);
}
.crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.crumbs a { transition: color var(--t) var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-current] { color: var(--lantern); }
.crumbs svg { width: 14px; height: 14px; opacity: .6; }
.page-hero .lede { margin-top: 20px; max-width: 48ch; }
/* ---------- 13. Rules page ---------- */
.rules-short { display: grid; }
.rule-big:hover { transform: translateY(-3px); border-color: rgb(var(--lantern-rgb) / .3); }
@media (max-width: 860px) {
  .rule-big { grid-template-columns: 44px 1fr; column-gap: 16px; }
  .rule-big .tile { grid-row: span 2; margin: 0; }
}
.rules-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.rules-layout > div { min-width: 0; }
.rules-nav { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: 2px; padding-left: 14px; }
.rules-nav::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--line-2); }
.rules-nav .progress {
  position: absolute;
  left: 0;
  top: 6px;
  width: 2px;
  height: calc(100% - 12px);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lantern), var(--moon));
  transform-origin: 50% 0;
  transform: scaleY(var(--p, 0));
}
.rules-nav a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink-3); font-size: 15px; font-weight: 560; }
.rules-nav a:hover { color: var(--ink); background: rgb(var(--tint) / .04); }
.rules-nav a.is-active { color: var(--ink); background: rgb(var(--tint) / .06); transform: translateX(3px); }
.rules-mobile-nav { display: none; }
.rule-group > header { display: flex; gap: 14px; margin-bottom: 18px; }
.rule-group > header p { margin-top: 4px; }
@media (max-width: 900px) {
  .rules-layout { grid-template-columns: minmax(0, 1fr); }
  .rules-nav { display: none; }
  .rules-mobile-nav { display: flex; top: 0; }
  .rules-mobile-nav::-webkit-scrollbar { display: none; }
  .site-header:not(.is-hidden) ~ main .rules-mobile-nav { top: 68px; }
  .rules-mobile-nav {
      gap: 8px;
      overflow-x: auto;
      position: sticky;
      z-index: 5;
      padding: 12px var(--gutter);
      margin: 0 calc(var(--gutter) * -1) 24px;
      border-bottom: 1px solid var(--line);
      scrollbar-width: none;
      scroll-snap-type: x proximity;
      transition: top .5s var(--ease-out);
    }
  .rules-mobile-nav a {
      flex: none;
      height: 36px;
      display: inline-flex;
      align-items: center;
      padding: 0 14px;
      border-radius: var(--r-pill);
      font-size: 14px;
      font-weight: 580;
      color: var(--ink-2);
      background: rgb(var(--tint) / .05);
      border: 1px solid var(--line);
      scroll-snap-align: center;
      transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
    }
  .rules-mobile-nav a.is-active { background: var(--ink); color: var(--bg); border-color: transparent; }
}
/* ---------- 14. Server detail sheet (<dialog>) ---------- */
.sheet {
  max-width: none;
  max-height: min(calc(100vh - 48px), 980px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  color: var(--ink);
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px) scale(.97);
}
.sheet[open] { opacity: 1; transform: none; }
@starting-style {
  .sheet[open] { opacity: 0; transform: translateY(24px) scale(.97); }
}
.sheet::backdrop { background: rgb(var(--abyss) / 0); }
.sheet[open]::backdrop { background: rgb(var(--abyss) / .7); }
@starting-style {
  .sheet[open]::backdrop { background: rgb(var(--abyss) / 0); }
}
.sheet-scroll { max-height: inherit; overflow-y: auto; overscroll-behavior: contain; }
.sheet-hero { position: relative; overflow: hidden; }
.sheet-hero img { width: 100%; height: 100%; object-fit: cover; animation: none; }
.sheet-hero::after { content: ""; position: absolute; inset: 0; }
.sheet-hero .server-badge { top: 16px; left: 16px; right: auto; height: auto; min-height: 32px; padding: 0 12px; color: var(--lantern); background: color-mix(in srgb, var(--lantern) 16%, rgb(var(--panel) / .8)); border-color: color-mix(in srgb, var(--lantern) 58%, transparent); }
.server-badge--early { animation: sv-early-glow 3.8s ease-in-out infinite; }
.sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(var(--panel) / .65);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.sheet-close:hover { background: rgb(var(--panel) / .9); transform: rotate(90deg); }
.sheet-close svg { width: 16px; height: 16px; }
.sheet-body { position: relative; z-index: 2; padding: 0 clamp(20px, 4vw, 44px) clamp(24px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr); }
.sheet-body > *:nth-child(2) { animation-delay: .06s; }
.sheet-body > *:nth-child(3) { animation-delay: .12s; }
.sheet-body > *:nth-child(4) { animation-delay: .18s; }
.sheet-handle { display: none; }
@media (max-width: 700px) {
  .sheet { max-height: 94vh; margin: auto 0 0; border-radius: 26px 26px 0 0; border-bottom: 0; transform: translateY(100%); transition-duration: .35s, .5s, .5s, .5s; }
  .sheet[open] { transform: none; }
  @starting-style {
      .sheet[open] { transform: translateY(100%); opacity: 1; }
    }
  .sheet-handle { display: block; position: absolute; top: 8px; left: 50%; z-index: 4; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgb(var(--tint) / .35); }
}
/* Cross-document page transitions where supported */
@view-transition { navigation: auto; }
/* Load sequence (hero + page heroes) */
.js .hero-media, .js .page-hero-art { opacity: 0; }
.js .hero-media img, .js .page-hero-art img { scale: 1.1; }
.js.is-ready .hero-media, .js.is-ready .page-hero-art { opacity: 1; transition: opacity .7s var(--ease); }
.js.is-ready .hero-media img, .js.is-ready .page-hero-art img { scale: 1; }
/* Scroll reveal */
/* Cards own their own hover transform; once revealed, hand transform back to them */
.js .server[data-reveal].is-in {
  transition: opacity .9s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color var(--t) var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms), 0s, 0s, 0s;
}
/* ---------- 16. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js [data-reveal], .js [data-enter], .js .hero-media, .js .page-hero-art { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .hero-media img, .js .page-hero-art img { scale: 1 !important; }
  [data-depth] { transform: none !important; }
}
/* ---------- 17. Utilities ---------- */
@media (max-width: 480px) {
  .ip { flex-wrap: wrap; gap: 10px; padding: 14px 10px 10px; }
  .ip code { flex: 1 1 100%; text-align: center; font-size: 15.5px; overflow: visible; white-space: normal; word-break: break-all; }
  .ip .copy-btn { flex: 1 1 100%; --h: 48px; }
}
@media print {
  .site-header, .atmo, .hero-media, .page-hero-art, .scroll-cue, .toast, .mobile-menu, .legal { display: none !important; }
}
/* Tighter rhythm: less vertical space between sections */
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
/* Faster, crisper entrances (≈600ms, ease-out, no blur) */
/* Hero art: slow ambient drift for a living backdrop */
@keyframes drift { from { scale: 1; } to { scale: 1.06; } }
.js.is-ready .hero-media img { animation: drift 24s ease-in-out 2.6s infinite alternate; }
/* Community: single focused banner (perks removed) */
/* Rules: compact summary */
.rules-short { margin-bottom: clamp(48px, 6vw, 80px); }
.rule-group { padding-bottom: 40px; }
/* Cards: subtle press feedback */
.server:active { transform: translateY(-2px) scale(.995); }
@media (prefers-reduced-motion: reduce) {
  .js.is-ready .hero-media img { animation: none; }
}
/* ---------- 19. Rules page v3 ---------- */
@keyframes pulse-new { 50% { box-shadow: 0 0 0 6px rgb(var(--lantern-rgb) / .12); } }
.rules-short { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rule-big { display: block; color: inherit; text-decoration: none; }
@media (max-width: 1100px) {
  .rules-short { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rules-short { grid-template-columns: minmax(0, 1fr); }
  .rule-big { display: grid; }
}
/* Toolbar */
.rtools { position: sticky; top: calc(var(--header-h) + 12px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 36px; }
.field { position: relative; display: flex; align-items: center; flex: 1 1 220px; }
.field svg { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; }
.field input {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: rgb(var(--tint) / .03);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: none; border-color: rgb(var(--lantern-rgb) / .5); background: rgb(var(--tint) / .05); box-shadow: 0 0 0 4px rgb(var(--lantern-rgb) / .1); }
.field input::-webkit-search-cancel-button { display: none; }
.field kbd { position: absolute; right: 10px; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.field input:focus ~ kbd { opacity: 0; }
.rsearch-empty { padding: 28px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--r-md); margin-bottom: 32px; }
mark { background: rgb(var(--lantern-rgb) / .26); color: var(--ink); border-radius: 3px; padding: 0 1px; }
/* Performance limits */
.limits { margin-top: 14px; padding: 20px 22px; }
.limits-head b { display: block; }
.limits-head span { color: var(--ink-3); font-size: 14px; }
.limits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 0; }
.limits-grid div { padding: 14px; border-radius: var(--r-sm); background: rgb(var(--tint) / .03); border: 1px solid var(--line); }
.limits-grid dt { font-size: 13px; color: var(--ink-3); }
.limits-grid dd { margin: 4px 0 0; font-size: 1.35rem; font-weight: 700; }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
/* Mod checker */
.modcheck { margin-top: 14px; padding: 20px 22px; }
.modcheck-label { display: block; font-weight: 640; margin-bottom: 10px; }
.modcheck .field input { padding-right: 14px; }
/* Enforcement */
.enf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; counter-reset: s; }
.enf-steps li {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
  transition-delay: calc(.15s + var(--i) * 140ms);
}
.enf-steps li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: color-mix(in srgb, #ff8a80 calc(35% + var(--i) * 30%), var(--lantern));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--ease-out);
  transition-delay: calc(.4s + var(--i) * 140ms);
}
.rule-group.is-in .enf-steps li { opacity: 1; transform: none; }
.rule-group.is-in .enf-steps li::after { transform: scaleX(1); }
.enf-steps .k { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.enf-steps b { display: block; margin-top: 4px; }
.enf-note { margin-top: 12px; color: var(--ink-3); font-size: 14px; }
.actions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.act { flex-direction: column; }
.act:hover { transform: translateY(-3px); border-color: rgba(88, 101, 242, .4); }
.act p { margin-bottom: 8px; }
.act ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.act li { display: flex; gap: 8px; align-items: center; }
.act li svg { width: 14px; height: 14px; color: var(--online); flex: none; }
.act .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 960px) {
  .actions-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Search: count + clear */
.field .rcount { position: absolute; right: 44px; font-size: 12.5px; color: var(--ink-3); pointer-events: none; animation: pop-in .25s var(--ease-out); }
.field .rcount:empty { display: none; }
.fclear {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: rgb(var(--tint) / .06);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fclear:hover { background: rgb(var(--tint) / .12); color: var(--ink); }
.fclear svg { position: static; width: 14px; height: 14px; color: currentColor; }
.fclear:not([hidden]) ~ kbd { display: none; }
.field--search input { padding-right: 120px; }
/* Summary tiles: cursor-following glow */
.rule-big { position: relative; overflow: hidden; isolation: isolate; }
.rule-big::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--lantern-rgb) / .12), transparent 70%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.rule-big:hover::before { opacity: 1; }
.rule-big .tile { transition: transform .5s var(--ease-spring); }
.rule-big:hover .tile { transform: translateY(-2px) rotate(-6deg); }
/* Back to top */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity var(--t) var(--ease), transform .45s var(--ease-spring), border-color var(--t) var(--ease);
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: rgb(var(--lantern-rgb) / .45); }
.to-top svg { width: 18px; height: 18px; }
/* Limits: tiles pop in with the section */
.js .rule-group .limits-grid div {
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .45s var(--ease), transform .55s var(--ease-out);
  transition-delay: calc(.35s + var(--i) * 70ms);
}
.js .rule-group.is-in .limits-grid div { opacity: 1; transform: none; }
.limits-grid dd { letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .js .rule-group .limits-grid div { opacity: 1; transform: none; transition: none; }
  .to-top, .rule-big .tile { transition: none; }
}
/* ---------- 21. Rules accordion v2 ---------- */
.rule-group > header { align-items: center; }
.g-count { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.rx-k { display: block; margin-bottom: 8px; font-size: 11.5px; text-transform: uppercase; color: var(--ink-3); }
.rx-list-wrap { list-style: none; margin: 0; padding: 6px; overflow: visible; }
.rx { position: relative; border-radius: var(--r-md); scroll-margin-top: calc(var(--header-h) + 100px); transition: background-color .3s var(--ease); }
.rx + .rx::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: var(--line); transition: opacity .3s var(--ease); }
.rx.is-open::before, .rx.is-open + .rx::before { opacity: 0; }
.rx:hover { background: rgb(var(--tint) / .025); }
.rx.is-open { background: linear-gradient(180deg, rgb(var(--lantern-rgb) / .055), rgb(var(--tint) / .02) 70%); box-shadow: inset 0 0 0 1px rgb(var(--lantern-rgb) / .16); }
.rx.is-flash { animation: rx-flash 1.6s var(--ease); }
@keyframes rx-flash { 0%, 35% { box-shadow: inset 0 0 0 2px rgb(var(--lantern-rgb) / .6); } }
/* rows cascade in with their section */
.js .rule-group .rx {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .55s var(--ease-out), background-color .3s var(--ease);
  transition-delay: calc(.1s + var(--i) * 45ms), calc(.1s + var(--i) * 45ms), 0s;
}
.js .rule-group.is-in .rx, .rules-layout.is-searching .rx { opacity: 1; transform: none; }
.rules-layout.is-searching .rx { transition-delay: 0s; }
.rx-h { margin: 0; font: inherit; }
.rx-toggle {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 32px;
  align-items: start;
  gap: 6px;
  width: 100%;
  padding: 16px 14px 16px 12px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rx-toggle:focus-visible { outline: 2px solid rgb(var(--lantern-rgb) / .7); outline-offset: -2px; }
.rx-id { font-family: var(--mono); font-size: 13px; color: var(--ink-3); padding-top: 3px; transition: color .3s var(--ease); }
.rx.is-open .rx-id, .rx-toggle:hover .rx-id { color: var(--lantern); }
.rx-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rx-title b { font-weight: 650; letter-spacing: -.012em; }
.rx-line { display: block; margin-top: 3px; color: var(--ink-2); font-size: 15px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.tag svg { width: 11px; height: 11px; }
.tag--new { background: var(--lantern); color: #1a1206; }
.tag--severe { color: var(--danger-soft); background: rgb(var(--danger-rgb) / .1); border: 1px solid rgb(var(--danger-rgb) / .25); }
/* plus → minus */
.rx-pm {
  position: relative;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .45s var(--ease-spring);
}
.rx-pm::before, .rx-pm::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.6px;
  margin: -.8px 0 0 -5.5px;
  border-radius: 2px;
  background: var(--ink-2);
  transition: transform .4s var(--ease-out), background-color .3s var(--ease);
}
.rx-pm::after { transform: rotate(90deg); }
.rx-toggle:hover .rx-pm { border-color: var(--line-3); background: rgb(var(--tint) / .04); }
.rx.is-open .rx-pm { transform: rotate(180deg); background: rgb(var(--lantern-rgb) / .12); border-color: rgb(var(--lantern-rgb) / .35); }
.rx.is-open .rx-pm::before, .rx.is-open .rx-pm::after { background: var(--lantern); }
.rx.is-open .rx-pm::after { transform: rotate(0deg); }
/* body */
.rx-body { display: grid; grid-template-rows: 0fr; }
.rx.is-open .rx-body { grid-template-rows: 1fr; }
.rx-inner { overflow: hidden; min-height: 0; }
.rx-card { padding: 0 18px 18px 64px; opacity: 0; transform: translateY(-8px); }
.rx.is-open .rx-card { opacity: 1; transform: none; }
.rx-why { position: relative; padding-left: 14px; color: var(--ink); font-size: 15px; }
.rx-why::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .5s var(--ease-out) .15s;
}
.rx.is-open .rx-why::before { transform: scaleY(1); }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 16px; }
.ex { padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgb(var(--tint) / .02); }
.ex-h { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ex-h svg { width: 14px; height: 14px; }
.ex--ok { border-color: rgb(var(--online-rgb) / .18); background: rgb(var(--online-rgb) / .04); }
.ex--ok .ex-h { color: var(--online); }
.ex--no { border-color: rgb(var(--danger-rgb) / .18); background: rgb(var(--danger-rgb) / .04); }
.ex--no .ex-h { color: var(--danger); }
.ex ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-2); }
/* stepper */
.rx-sec { margin-top: 18px; }
.stepper { --c1: #f0c36a; --c2: #ff8a80; list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); max-width: 560px; }
.stepper::before {
  content: "";
  position: absolute;
  left: 7px;
  right: calc(100% / var(--n));
  top: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--ease-out) .2s;
}
.stepper[style*="--n:1"]::before { display: none; }
.rx.is-open .stepper::before { transform: scaleX(1); }
.stepper li { position: relative; display: grid; gap: 8px; justify-items: start; }
.stepper .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid color-mix(in srgb, var(--c2) calc(40% + var(--i) * 30%), var(--c1));
  transform: scale(.4);
  opacity: 0;
  transition: transform .45s var(--ease-spring), opacity .25s var(--ease);
  transition-delay: calc(.2s + var(--i) * 140ms);
}
.stepper li:last-child .dot { background: color-mix(in srgb, var(--c2) 70%, transparent); }
.stepper .lbl {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .4s var(--ease-out);
  transition-delay: calc(.28s + var(--i) * 140ms);
}
.rx.is-open .stepper .dot { transform: none; opacity: 1; }
.rx.is-open .stepper .lbl { opacity: 1; transform: none; }
/* footer actions */
.rx-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mini svg { width: 14px; height: 14px; }
.mini:hover { color: var(--ink); border-color: var(--line-3); background: rgb(var(--tint) / .04); }
.mini:active { transform: scale(.97); }
.mini.is-done { animation: mini-done 1.2s var(--ease); }
@keyframes mini-done { 0%, 60% { color: var(--online); border-color: rgb(var(--online-rgb) / .45); background: rgb(var(--online-rgb) / .08); } }
@media (max-width: 640px) {
  .rx-toggle { grid-template-columns: 38px minmax(0, 1fr) 30px; padding: 14px 10px; }
  .rx-card { padding: 0 14px 16px 14px; }
  .stepper { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .stepper::before { display: none; }
  .stepper li { grid-template-columns: 16px 1fr; align-items: center; }
}
/* ---------- Mod & item checker ---------- */
.mc-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-results:not(:empty) { margin-top: 12px; }
.mc-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  animation: pop-in .3s var(--ease-out) both;
}
.mc-row:nth-child(2) { animation-delay: 40ms; }
.mc-row:nth-child(3) { animation-delay: 80ms; }
.mc-row:nth-child(4) { animation-delay: 120ms; }
.mc-row:nth-child(5) { animation-delay: 160ms; }
.mc-ico svg { width: 18px; height: 18px; margin-top: 2px; }
.mc-main b { display: block; }
.mc-sub { display: block; font-size: 12.5px; color: var(--ink-3); }
.mc-note { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.mc-alt { display: block; margin-top: 2px; color: var(--ink); }
.mc-st { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mc-row.is-ok { background: rgb(var(--online-rgb) / .05); border-color: rgb(var(--online-rgb) / .18); }
.mc-row.is-ok .mc-ico, .mc-row.is-ok .mc-st { color: var(--online); }
.mc-row.is-ok .mc-st { background: rgb(var(--online-rgb) / .1); }
.mc-row.is-no { background: rgb(var(--danger-rgb) / .05); border-color: rgb(var(--danger-rgb) / .18); }
.mc-row.is-no .mc-ico, .mc-row.is-no .mc-st { color: var(--danger); }
.mc-row.is-no .mc-st { background: rgb(var(--danger-rgb) / .1); }
.mc-row.is-ask { background: rgb(var(--unknown-rgb) / .05); border-color: rgb(var(--unknown-rgb) / .18); }
.mc-row.is-ask .mc-ico, .mc-row.is-ask .mc-st { color: var(--unknown); }
.mc-row.is-ask .mc-st { background: rgb(var(--unknown-rgb) / .1); }
@media (prefers-reduced-motion: reduce) {
  .js .rule-group .rx { opacity: 1; transform: none; transition: none; }
  .rx-body, .rx-card, .rx-pm, .rx-pm::before, .rx-pm::after, .stepper::before, .stepper .dot, .stepper .lbl, .rx-why::before { transition: none !important; }
  .rx.is-flash, .mini.is-done, .mc-row { animation: none; }
}
@media print {
  .rtools, .rules-nav, .rules-mobile-nav, .modcheck, .rx-foot, .rx-pm, .to-top { display: none !important; }
  .rx-body { grid-template-rows: 1fr !important; }
  .rx-card, .rx, .stepper .dot, .stepper .lbl { opacity: 1 !important; transform: none !important; }
}
.fclear[hidden] { display: none; }
.rx-why::before { background: rgb(var(--lantern-rgb) / .75); }
.stepper[style*="--n:1"] li { grid-template-columns: 16px auto; align-items: center; gap: 10px; }
[hidden] { display: none !important; }
/* ---------- 22. Motion & polish (2026-10) ----------
   One consistent motion language: soft ease-out curves, short distances,
   opacity + transform only. Everything below is progressive — browsers that
   don't support a feature simply skip it. Reduced motion is honoured at the end. */
/* Film grain over the ambient light — adds depth to flat dark areas */
.atmo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Reading progress — a hairline of lantern light under the header */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 101;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--lantern-rgb) / 0), var(--lantern) 40%, var(--moon));
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
  box-shadow: 0 0 10px rgb(var(--lantern-rgb) / .5);
  opacity: .85;
}
/* Header: smoother glass hand-off and hide/reveal */
.site-header { view-transition-name: header; transition: transform .6s var(--ease-out); }
.site-header .bar {
  transition: background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), -webkit-backdrop-filter .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav-ind { transition: transform .5s var(--ease-out), width .5s var(--ease-out), opacity .3s var(--ease); }
.nav a[aria-current="page"]::after, .nav a.is-active::after { animation: dot-in .5s var(--ease-spring); }
@keyframes dot-in { from { transform: scale(0); opacity: 0; } }
/* Page entrance — content settles in, slight blur clears */
.js [data-enter] { opacity: 0; transform: translateY(18px); }
.js.is-ready [data-enter] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
/* Hero: art settles, then drifts; content gently recedes as you scroll away */
.js.is-ready .hero-media img, .js.is-ready .page-hero-art img { transition: scale 3s var(--ease-out), filter .8s var(--ease); }
.hero-content, .page-hero > .wrap { opacity: calc(1 - var(--hero-p, 0) * 1.3); transform: translate3d(0, calc(var(--hero-p, 0) * 60px), 0); will-change: opacity, transform; }
.scroll-cue { opacity: calc(1 - var(--hero-p, 0) * 6); }
/* Scroll reveal — one rhythm everywhere */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  transition: opacity .8s var(--ease-out), transform 1s var(--ease-out), filter .8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.js .server[data-reveal].is-in, .js .rule-big[data-reveal].is-in { filter: none; }
/* Server cards: image wipes in, gentle 3D tilt toward the pointer */
.js .server[data-reveal] .server-art img {
  clip-path: inset(0 0 100% 0 round 0);
  transition: clip-path 1.2s var(--ease-out), transform 1.4s var(--ease-out), filter .6s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms + 120ms), 0s, 0s;
}
.js .server[data-reveal].is-in .server-art img { clip-path: inset(0 0 0 0 round 0); }
.server { transform-style: preserve-3d; }
@media (hover: hover) and (pointer: fine) {
  .server:hover, .js .server[data-reveal].is-in:hover { transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .server:hover .server-art img { transform: scale(1.06); }
  .js .server[data-reveal].is-in {
      transition: opacity .8s var(--ease-out), transform .7s var(--ease-out), box-shadow .7s var(--ease-out), border-color var(--t) var(--ease), filter .8s var(--ease-out);
    }
  .rule-big:hover, .js .rule-big[data-reveal].is-in:hover, .act:hover { transform: translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
}
/* Buttons: tactile press, softer sheen, smooth focus ring */
.btn {
  transition: transform .45s var(--ease-out), background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow .45s var(--ease-out), border-color var(--t) var(--ease), outline-offset .2s var(--ease);
}
.btn:active { transform: scale(.97); transition-duration: 120ms; }
.btn--primary::after, .btn--discord::after { transition: transform 1s var(--ease-out); }
.btn--glass:hover { transform: translateY(-1px); }
:focus-visible { transition: outline-offset .2s var(--ease); }
.copy-btn { transition: transform .62s cubic-bezier(.22, 1, .36, 1), background .68s cubic-bezier(.22, 1, .36, 1), color .68s cubic-bezier(.22, 1, .36, 1), box-shadow .68s cubic-bezier(.22, 1, .36, 1); }
/* Live numbers + meters ease in more slowly for a calmer feel */
.swap > * { transition: opacity .6s var(--ease), transform .7s var(--ease-out), filter .6s var(--ease); }
/* Community banner: slow breathing glow */
/* Detail sheet: smoother open/close and staggered content */
.sheet { transition: opacity .4s var(--ease), transform .7s var(--ease-out), overlay .7s allow-discrete, display .7s allow-discrete; }
.sheet::backdrop { transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease), overlay .5s allow-discrete, display .5s allow-discrete; }
.sheet[open]::backdrop { -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); }
.sheet-body > * { animation: fade-up .8s var(--ease-out) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
/* Toast: springier, no overshoot */
.toast { transition: transform .6s var(--ease-out), opacity .3s var(--ease); }
/* Rules: smoother accordion + nav */
.rx-body { transition: grid-template-rows .55s var(--ease-out); }
.rx-card { transition: opacity .25s var(--ease), transform .4s var(--ease-out); }
.rx.is-open .rx-card { transition: opacity .45s var(--ease) .1s, transform .6s var(--ease-out) .06s; }
.rules-nav a { transition: color var(--t) var(--ease), background-color var(--t) var(--ease), transform .45s var(--ease-out); }
.rules-nav .progress { transition: transform .2s linear; }
.rule-big { transition: transform .6s var(--ease-out), border-color var(--t) var(--ease), box-shadow .6s var(--ease-out); }
.rule-big:hover { box-shadow: var(--hi), 0 30px 60px -30px rgb(var(--lantern-rgb) / .25); }
.act { transition: transform .6s var(--ease-out), border-color var(--t) var(--ease); }
/* Footer links: underline grows instead of shifting */
/* Cross-page transitions: soft crossfade with a hint of depth; header stays put */
/* The new page fades in over the old one (no blur, no additive blend), so there is no dip to black */
html:not(.vt-morph)::view-transition-old(root), html:not(.vt-morph)::view-transition-new(root) { mix-blend-mode: normal; }
html:not(.vt-morph)::view-transition-old(root) { animation: vt-out .4s var(--ease-out) both; }
html:not(.vt-morph)::view-transition-new(root) { animation: vt-in .45s var(--ease-out) both; }
@keyframes vt-out { to { transform: scale(.99); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
::view-transition-group(header) { animation-duration: .4s; }
/* Smooth in-page anchor jumps land below the header */
html { scroll-padding-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .hero-content, .page-hero > .wrap, .scroll-cue { opacity: 1 !important; transform: none !important; }
  .js .server[data-reveal] .server-art img { clip-path: none !important; }
  .server:hover, .rule-big:hover, .act:hover { transform: none !important; }
}
@media print {
  .scroll-progress { display: none !important; }
}
/* ---------- 23. Premium glass (2026-10) ----------
   Frosted, layered surfaces in the spirit of Apple's materials and Fluent's
   acrylic: translucent fills that blur colourful ambient light behind them,
   a bright 1px top edge, soft long shadows, and crisp system typography. */
/* Ambient light: richer, slowly moving colour fields so glass has something to frost */
.atmo::before {
  background: radial-gradient(42% 32% at 82% 2%, rgba(120, 150, 235, .20), transparent 70%),
    radial-gradient(36% 34% at 6% 38%, rgba(64, 200, 190, .10), transparent 70%),
    radial-gradient(40% 36% at 96% 62%, rgb(var(--lantern-rgb) / .09), transparent 70%),
    radial-gradient(48% 40% at 30% 96%, rgba(110, 90, 240, .10), transparent 70%);
}
@keyframes atmo-drift { to { transform: translate3d(0, -2%, 0) scale(1.06); } }
/* Unified glass surface */
.surface { background: var(--glass-fill); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
/* Header: always-on frosted capsule */
.site-header .bar { background: rgb(var(--panel) / .46); border-color: rgb(var(--tint) / .08); -webkit-backdrop-filter: blur(24px) saturate(175%); backdrop-filter: blur(24px) saturate(175%); }
.site-header.is-scrolled .bar, .menu-open .site-header .bar {
  background: rgb(var(--panel) / .7);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-top), 0 20px 50px -24px rgb(var(--shade) / calc(.9 * var(--shade-a)));
}
.nav-ind { background: rgb(var(--tint) / .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
/* Buttons: glassier secondary, crisper primary */
.btn--glass {
  background: rgb(var(--tint) / .08);
  border-color: rgb(var(--tint) / .12);
  box-shadow: var(--glass-top);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.btn--glass:hover { background: rgb(var(--tint) / .13); border-color: rgb(var(--tint) / .2); }
.btn--primary {
  background: linear-gradient(180deg, #fff, #e3e9f2);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(var(--shade) / calc(.08 * var(--shade-a))), 0 10px 30px -12px rgb(var(--moon-rgb) / .6);
}
.pill, .connect {
  background: rgb(var(--panel) / .5);
  border-color: rgb(var(--tint) / .1);
  box-shadow: var(--glass-top);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}
/* Status: new "restarting" state everywhere a dot appears */
[data-state="restarting"] .dot { --c: var(--restarting); }
[data-state="restarting"] .dot::after {
  opacity: 1;
  border-color: transparent;
  border-top-color: var(--restarting);
  border-right-color: var(--restarting);
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pill[data-state="restarting"] { border-color: rgb(var(--restart-rgb) / .35); }
/* ---------- Server cards v3 ---------- */
#servers .section-head { margin-bottom: clamp(24px, 3vw, 36px); }
.servers-grid { perspective: 1600px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; }
@media (max-width: 1099px) {
  .servers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .servers-grid { grid-template-columns: minmax(0, 1fr); }
}
.server {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
}
.server-art { aspect-ratio: 16 / 8.5; }
.server-art::after { background: linear-gradient(180deg, rgb(var(--abyss) / .35) 0%, transparent 32%, transparent 40%, rgb(var(--card-rgb) / .55) 72%, rgb(var(--card-rgb) / .97) 100%); }
.server-art .pill { top: 14px; left: 14px; height: 30px; font-size: 12.5px; }
.server-badge { top: 14px; right: 14px; height: 28px; font-size: 11.5px; }
.server[data-state="offline"] .server-art img { filter: grayscale(.85) brightness(.55); }
.server[data-state="restarting"] .server-art img { filter: saturate(.6) brightness(.7); }
.server-body { gap: 16px; margin-top: -54px; padding: 0 22px 20px; }
.sv-head { display: flex; justify-content: space-between; gap: 12px; }
.sv-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--l2) 78%, transparent); }
.sv-specs > div { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; }
.sv-specs > div + div { border-left: 1px solid var(--line); }
.sv-specs small { color: var(--ink-3); font-size: 10px; font-weight: 650; line-height: 1; }
.sv-specs b { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 360px) {
  .server .sv-specs > div { padding-inline: 6px; }
  .server .sv-specs b { font-size: 12px; }
}
.server-tagline { font-size: 11.5px; }
.server-name { margin-top: 4px; font-size: clamp(1.45rem, 2vw, 1.75rem); line-height: 1.1; }
.sv-info {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 620;
  color: var(--ink-2);
  background: rgb(var(--tint) / .06);
  border: 1px solid rgb(var(--tint) / .08);
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease);
  flex: none;
}
.sv-info svg { width: 15px; height: 15px; transition: transform .4s var(--ease-out); }
.sv-info:hover { color: var(--ink); background: rgb(var(--tint) / .11); border-color: rgb(var(--tint) / .16); }
.sv-info:hover svg { transform: translateX(2px); }
/* Status block */
.sv-status {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: rgb(var(--shade) / calc(.18 * var(--shade-a)));
  border: 1px solid rgb(var(--tint) / .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: background-color .6s var(--ease), border-color .6s var(--ease);
}
.sv-status[data-state="online"] {
  background: linear-gradient(180deg, rgb(var(--online-rgb) / .07), rgb(var(--shade) / calc(.14 * var(--shade-a))));
  border-color: rgb(var(--online-rgb) / .16);
}
.sv-status[data-state="restarting"] {
  background: linear-gradient(180deg, rgb(var(--restart-rgb) / .09), rgb(var(--shade) / calc(.14 * var(--shade-a))));
  border-color: rgb(var(--restart-rgb) / .22);
}
.sv-status[data-state="offline"] { background: rgb(var(--tint) / .025); }
.sv-top { display: grid; gap: 12px; min-height: 44px; }
.sv-capacity { display: grid; gap: 8px; }
.sv-capacity-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 10px; font-weight: 650; }
.sv-capacity-meta span { letter-spacing: .08em; }
.sv-capacity-meta b { color: var(--ink-2); font-size: 11px; font-weight: 600; }
.sv-capacity-track { height: 4px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, var(--l1)); }
.sv-capacity-track > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(var(--capacity, 0)); transform-origin: left center; transition: transform .8s var(--ease-out); }
.sv-status:not([data-state="online"]) .sv-capacity { display: none; }
.sv-heads:empty { display: none; }
.sv-big { min-width: 0; }
.sv-count { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-count .n { font-size: 40px; line-height: 1; color: var(--ink); }
.sv-count .max { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.sv-word { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; color: var(--ink-2); white-space: nowrap; }
.sv-status[data-state="restarting"] .sv-word { color: #ffd59a; }
.sv-status[data-state="offline"] .sv-word { color: var(--ink-3); }
.sv-status[data-state="loading"] .sv-word { font-size: 17px; color: var(--ink-3); }
.sv-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.sv-sub .link { color: var(--moon); }
/* Player heads */
.sv-heads { flex: none; min-width: 0; }
.sv-heads-row { display: flex; flex-wrap: nowrap; align-items: center; padding-left: 8px; overflow: visible; }
.sv-head { position: relative; margin-left: -8px; animation: head-in .5s var(--ease-out) both; animation-delay: calc(var(--i) * 50ms); }
.sv-head img, .sv-head .av {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  image-rendering: pixelated;
  object-fit: cover;
  background: var(--surface-3);
  border: 2px solid rgb(var(--panel) / .95);
  box-shadow: 0 6px 14px -6px rgb(var(--shade) / var(--shade-a));
  font-size: 12px;
  font-weight: 760;
  color: var(--moon);
  transition: transform .4s var(--ease-spring);
}
.sv-head:hover { z-index: 2; }
.sv-head:hover img, .sv-head:hover .av { transform: translateY(-4px) scale(1.15); }
.sv-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 4px 9px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 620;
  white-space: nowrap;
  color: var(--ink);
  background: rgb(var(--panel) / .92);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .3s var(--ease-out);
}
.sv-head:hover .sv-tip { opacity: 1; transform: translate(-50%, 0); }
.sv-more-n {
  margin-left: 6px;
  height: 30px;
  min-width: 30px;
  padding: 0 9px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: rgb(var(--tint) / .07);
  border: 1px solid rgb(var(--tint) / .08);
}
.sv-hidden { font-size: 12.5px; color: var(--ink-3); }
@keyframes head-in { from { opacity: 0; transform: translateY(6px) scale(.8); } }
/* IP */
.sv-ip .ip { padding: 6px 6px 6px 16px; border-radius: var(--r-md); background: rgb(var(--shade) / calc(.28 * var(--shade-a))); border-color: rgb(var(--tint) / .08); }
.sv-ip .ip code { font-size: 13.5px; }
.sv-ip .copy-btn { --h: 42px; min-width: 96px; padding: 0 14px; border-radius: var(--r-sm); }
/* Wipe dates */
/* Footer line */
/* Section head summary: glass */
/* Sheet + toast + menus: same material */
.sheet {
  background: rgb(var(--panel) / .82);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(40px) saturate(170%);
  backdrop-filter: blur(40px) saturate(170%);
  box-shadow: var(--glass-top), 0 60px 140px -30px rgb(var(--shade) / calc(.95 * var(--shade-a)));
}
.toast {
  background: rgb(var(--panel) / .78);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-top), 0 24px 60px -12px rgb(var(--shade) / calc(.85 * var(--shade-a)));
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}
.rtools { background: rgb(var(--panel) / .62); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); }
.rules-mobile-nav { background: rgb(var(--panel) / .7); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); }
.to-top, .preview-note { background: rgb(var(--panel) / .7); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }
/* Typography polish */
.lede { color: var(--ink-2); }
@media (max-width: 699px) {
  .server-body { padding: 0 16px 16px; gap: 14px; }
  .sv-count .n { font-size: 36px; }
  .sv-head img, .sv-head .av { width: 28px; height: 28px; }
  .sv-specs > div { padding: 9px 10px; }
  .sv-specs b { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .atmo::before, [data-state="restarting"] .dot::after, .sv-head { animation: none !important; }
}
/* Browsers without backdrop-filter get solid, readable fills */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .server, .surface, .sheet, .site-header .bar, .toast { background: #121925; }
}
/* ---------- 24. Typography, home & details refresh (2026-10) ----------
   Fonts (self-hosted, assets/fonts): Plus Jakarta Sans for all UI and headings,
   EB Garamond Italic for the accent words, Source Code Pro for addresses. */
.glint { font-family: var(--serif); font-style: italic; font-weight: 500; padding-right: .04em; }
.h2 .glint { font-size: 1.08em; line-height: .9; }
code, .ip code, .connect code { font-family: var(--mono); font-weight: 500; letter-spacing: -.01em; }
/* ---------- Hero ---------- */
.hero { min-height: max(760px, 100svh); align-items: start; }
.hero-content { padding-top: calc(var(--header-h) + clamp(64px, 12vh, 140px)); padding-bottom: 220px; }
.hero-media { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 98%); mask-image: linear-gradient(180deg, #000 55%, transparent 98%); }
.hero .scroll-cue { display: none; }
@media (max-width: 1023px) {
  .hero { min-height: 0; }
  .hero-content { padding-bottom: 28px; }
}
/* ---------- Servers section ---------- */
.section-head--servers { align-items: end; }
/* Card refinements: live server icon + activity chart */
.sv-head { align-items: center; }
.sv-title { flex: 1; min-width: 0; }
.sv-icon {
  display: none;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgb(var(--shade) / calc(.35 * var(--shade-a)));
  border: 1px solid rgb(var(--tint) / .14);
  box-shadow: 0 10px 24px -10px rgb(var(--shade) / var(--shade-a));
}
.sv-icon.has-icon { display: block; animation: pop-in .5s var(--ease-out); }
.sv-icon img { width: 100%; height: 100%; image-rendering: pixelated; }
.sv-status { position: relative; overflow: hidden; isolation: isolate; }
.sv-sub b { color: var(--ink); font-weight: 720; }
.spark-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 2.2s var(--ease-out) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* ---------- Details sheet v2 ---------- */
.sheet { --accent: var(--moon); width: min(880px, calc(100vw - 32px)); }
.sheet-hero { aspect-ratio: 16 / 6; }
.sheet-hero::after { background: linear-gradient(180deg, rgb(var(--panel) / .1) 0%, transparent 35%, rgb(var(--sheet-rgb) / .98) 100%); }
.sheet-body { margin-top: -96px; }
@media (max-width: 700px) {
  .sheet:not(.sheet--page) .sheet-body { margin-top: -80px; }
}
.sheet-body > *:nth-child(5) { animation-delay: .24s; }
.sheet-body > *:nth-child(6) { animation-delay: .3s; }
.sheet-body h3 { font-size: 12px; text-transform: uppercase; color: var(--ink-3); }
.sk-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; }
.sk-head .server-tagline { color: color-mix(in oklab, var(--accent) var(--accent-k), var(--ink)); }
.sk-icon { width: 72px; height: 72px; border-radius: var(--r-md); border-width: 2px; }
.sk-title { margin-top: 4px; font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.05; }
.sk-head .pill { align-self: start; margin-top: 8px; }
@media (max-width: 640px) {
  .sk-head { grid-template-columns: auto minmax(0, 1fr); }
  .sk-head .pill { grid-column: 1 / -1; grid-row: 1; }
  .sk-icon { width: 56px; height: 56px; }
}
.sk-connect { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; }
.sk-ip .ip { padding: 8px 8px 8px 20px; border-radius: var(--r-md); background: rgb(var(--shade) / calc(.3 * var(--shade-a))); }
.sk-ip .ip code { font-size: 16px; }
.sk-ip .copy-btn { --h: 46px; min-width: 116px; }
.sk-connect > .btn { height: 64px; border-radius: var(--r-md); }
.sk-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.sk-chips li {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-3);
  background: rgb(var(--tint) / .04);
  border: 1px solid rgb(var(--tint) / .07);
}
.sk-chips b { color: var(--ink); font-weight: 680; }
@media (max-width: 640px) {
  .sk-connect { grid-template-columns: minmax(0, 1fr); }
  .sk-connect > .btn { height: 52px; }
}
.sk-live {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgb(var(--tint) / .055), rgb(var(--tint) / .02));
  border: 1px solid rgb(var(--tint) / .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.sk-live-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 28px; }
.sk-count { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.sk-count b { font-size: 56px; line-height: .9; }
.sk-count span { font-size: 17px; font-weight: 650; color: var(--ink-3); }
.sk-count--word { font-size: 30px; font-weight: 760; letter-spacing: -.03em; color: var(--ink-2); }
.sk-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.sk-stat { display: grid; gap: 1px; }
.sk-stat .k, .sk-tile .k { font-size: 11px; text-transform: uppercase; color: var(--ink-3); }
.sk-stat b { font-size: 21px; font-weight: 760; letter-spacing: -.03em; }
.sk-stat small, .sk-tile small { font-size: 12.5px; color: var(--ink-3); }
.sk-chart { color: var(--online); }
.sk-chart .spark { width: 100%; height: 110px; display: block; }
.sk-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.sk-chart-empty { padding: 18px; border-radius: var(--r-md); font-size: 13.5px; color: var(--ink-3); border: 1px dashed rgb(var(--tint) / .1); text-align: center; }
.sk-people-h { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.sk-people-h span {
  height: 22px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 720;
  color: #05210f;
  background: var(--online);
}
.sk-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.sk-people a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 7px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: rgb(var(--tint) / .03);
  border: 1px solid rgb(var(--tint) / .05);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform .4s var(--ease-out);
  animation: head-in .45s var(--ease-out) both;
  animation-delay: calc(min(var(--i), 20) * 25ms);
}
.sk-people a:hover { color: var(--ink); background: rgb(var(--tint) / .07); transform: translateY(-1px); }
.sk-people a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-people img, .sk-people .av {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  image-rendering: pixelated;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 760;
  color: var(--moon);
}
.sk-more { font-size: 13.5px; color: var(--ink-3); }
.sk-tiles { display: grid; gap: 8px; }
.sk-tile { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); background: rgb(var(--tint) / .03); border: 1px solid rgb(var(--tint) / .07); }
.sk-tile b { font-size: 17px; font-weight: 720; letter-spacing: -.02em; }
.sk-tile.is-soon { border-color: rgb(var(--lantern-rgb) / .3); background: rgb(var(--lantern-rgb) / .06); }
.sk-tile.is-soon small { color: var(--lantern); font-weight: 650; }
@media (prefers-reduced-motion: reduce) {
  .spark-line { animation: none; stroke-dashoffset: 0; }
  .sk-people a { animation: none; }
}
.sv-head .server-tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-head .pill { justify-self: end; width: max-content; }
@media (max-width: 640px) {
  .sk-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-people a { font-size: 13px; padding: 6px 8px 6px 6px; gap: 8px; }
  .sk-people img, .sk-people .av { width: 26px; height: 26px; }
  .sk-head .pill { margin-top: 0; }
  .sk-count b { font-size: 46px; }
}
/* ---------- 25. Inter, home cleanup & support center (2026-10) ----------
   Inter for every word of UI and reading text. It was designed for screens
   and is the closest open match to Apple's SF Pro and Microsoft's Segoe UI.
   Tracking tightens as size grows, the same way SF Pro does. */
body { font-size: 16px; line-height: 1.6; word-spacing: normal; }
.h1 { font-weight: 720; letter-spacing: -.035em; }
.h2 { font-weight: 700; letter-spacing: -.032em; }
.h3, .server-name, .sk-title { font-weight: 680; letter-spacing: -.024em; }
.h4 { font-weight: 640; letter-spacing: -.016em; }
.h1, .h2, .sk-title, .server-name, .btn, .pill, .sv-sub, .lede { word-spacing: normal; }
.lede { font-weight: 400; letter-spacing: -.012em; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.btn { -webkit-tap-highlight-color: transparent; font-weight: 600; letter-spacing: -.01em; }
.server-tagline, .sk-stat .k, .sk-tile .k, .rx-k, .sheet-body h3 { font-weight: 600; letter-spacing: .1em; }
.sv-count .n { font-weight: 700; letter-spacing: -.04em; }
.sk-count b { font-weight: 720; letter-spacing: -.045em; }
.glint { letter-spacing: -.005em; }
/* Home: quieter, fewer words */
.section-head--servers { display: block; }
.sv-sub:empty { display: none; }
/* ---------- Support center ---------- */
.hc-hero { position: relative; padding: calc(var(--header-h) + clamp(56px, 9vh, 104px)) 0 clamp(40px, 5vw, 56px); }
.hc-hero .page-hero-art::after { background: linear-gradient(180deg, rgb(var(--abyss) / .55), rgb(var(--abyss) / .75) 40%, var(--page) 100%); }
.hc-hero-in { display: grid; justify-items: center; text-align: center; gap: 22px; }
.hc-hero .h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
.hc-search { position: relative; width: min(680px, 100%); z-index: 30; }
.hc-search > svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ink-3); pointer-events: none; }
.hc-search input {
  width: 100%;
  height: 62px;
  padding: 0 56px 0 54px;
  border-radius: var(--r-lg);
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: rgb(var(--panel) / .62);
  border: 1px solid rgb(var(--tint) / .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 60px -24px rgb(var(--shade) / calc(.9 * var(--shade-a)));
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}
.hc-search input::placeholder { color: var(--ink-3); }
.hc-search input::-webkit-search-cancel-button { display: none; }
.hc-search input:focus {
  outline: none;
  border-color: rgb(var(--lantern-rgb) / .55);
  background: rgb(var(--panel) / .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 5px rgb(var(--lantern-rgb) / .12), 0 24px 60px -24px rgb(var(--shade) / calc(.9 * var(--shade-a)));
}
.hc-search > kbd {
  position: absolute;
  right: 18px;
  top: 50%;
  margin-top: -12px;
  height: 24px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  transition: opacity var(--t-fast) var(--ease);
}
.hc-search input:focus ~ kbd { opacity: 0; }
.hc-search .rcount { top: 50%; right: 56px; height: 18px; margin-top: -9px; line-height: 18px; }
.hc-search .fclear { top: 50%; right: 16px; margin-top: -14px; }
.hc-search .fclear:not([hidden]) ~ kbd { display: none; }
.hc-search input { padding-right: 140px; }
.hc-search .rcount, .hc-search .fclear { position: absolute; z-index: 1; }
.hc-r-foot kbd { position: static; }
.rs-results .hc-r-ic { font: 600 12px var(--mono); }
.hc-results.rs-results { background: color-mix(in srgb, var(--l1) 97%, transparent); }
.hc-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  padding: 8px;
  text-align: left;
  border-radius: var(--r-lg);
  max-height: min(460px, 60vh);
  overflow-y: auto;
  background: rgb(var(--panel) / .9);
  border: 1px solid rgb(var(--tint) / .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 90px -30px rgb(var(--shade) / var(--shade-a));
  -webkit-backdrop-filter: blur(32px) saturate(170%);
  backdrop-filter: blur(32px) saturate(170%);
  animation: pop-in .25s var(--ease-out);
}
.hc-r {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  transition: background-color var(--t-fast) var(--ease);
}
.hc-r.is-active, .hc-r:hover { background: rgb(var(--tint) / .07); }
.hc-r-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); color: var(--lantern); background: rgb(var(--lantern-rgb) / .1); }
.hc-r-ic svg { width: 18px; height: 18px; }
.hc-r-t { display: grid; gap: 1px; min-width: 0; }
.hc-r-t b { font-weight: 600; font-size: 15px; }
.hc-r-t > span { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-r-match { display: inline-block; padding: 0 7px; margin-right: 4px; border-radius: 6px; font-size: 11.5px; font-weight: 650; color: #05210f; background: var(--online); }
.hc-r-topic { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.hc-r-none { padding: 16px; font-size: 14.5px; color: var(--ink-2); }
.hc-r-foot { display: flex; gap: 6px; align-items: center; padding: 10px 12px 4px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.hc-r-foot kbd { opacity: 1 !important; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 5px; font-family: var(--mono); font-size: 11px; }
.hc-r-foot kbd + kbd { margin-left: -2px; }
.hc-popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 760px; }
.hc-pop-k { font-size: 13px; color: var(--ink-3); margin-right: 4px; }
.hc-chip {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink-2);
  background: rgb(var(--tint) / .06);
  border: 1px solid rgb(var(--tint) / .1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease), transform .4s var(--ease-out);
}
.hc-chip:hover { color: var(--ink); background: rgb(var(--tint) / .11); border-color: rgb(var(--tint) / .2); transform: translateY(-1px); }
.hc-status-wrap { margin-top: 4px; }
.hc-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: rgb(var(--tint) / .035);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-top);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.hc-status:hover { background: rgb(var(--tint) / .055); }
.hc-status-t { font-weight: 600; }
.hc-status-s { color: var(--ink-3); font-size: 14px; }
.hc-status > svg { width: 16px; height: 16px; margin-left: auto; color: var(--ink-3); flex: none; }
.hc-status[data-state="online"] { border-color: rgb(var(--online-rgb) / .22); }
.hc-status[data-state="restarting"] { border-color: rgb(var(--restart-rgb) / .32); background: rgb(var(--restart-rgb) / .05); }
.hc-status[data-state="offline"] { border-color: rgb(var(--danger-rgb) / .3); background: rgb(var(--danger-rgb) / .05); }
@media (max-width: 640px) {
  .hc-status { flex-wrap: wrap; gap: 4px 10px; }
  .hc-status-s { flex-basis: 100%; padding-left: 18px; }
  .hc-status > svg { display: none; }
}
.hc-topics-wrap { margin-top: 14px; }
.hc-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hc-topic {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: rgb(var(--tint) / .035);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-top);
  transition: transform .5s var(--ease-out), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.hc-topic:hover { transform: translateY(-3px); border-color: rgb(var(--lantern-rgb) / .3); background: rgb(var(--tint) / .055); }
.hc-topic-t { display: grid; gap: 1px; min-width: 0; }
.hc-topic-t b { font-weight: 640; letter-spacing: -.015em; }
.hc-topic-t span { font-size: 13.5px; color: var(--ink-3); }
.hc-topic-n {
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-3);
  background: rgb(var(--tint) / .06);
  font-feature-settings: "tnum";
}
.hc-topic .tile { transition: transform .5s var(--ease-spring); }
.hc-topic:hover .tile { transform: rotate(-6deg) scale(1.05); }
@media (max-width: 980px) {
  .hc-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hc-topics { grid-template-columns: minmax(0, 1fr); }
  .hc-topic { padding: 12px 14px; }
  .hc-topic-t span { display: none; }
}
.hc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-top: clamp(48px, 6vw, 80px); }
.hc-main { min-width: 0; }
.hc-nav { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: 2px; padding-left: 14px; }
.hc-nav::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 58px; width: 2px; border-radius: 2px; background: var(--line-2); }
.hc-nav .progress {
  position: absolute;
  left: 0;
  top: 6px;
  width: 2px;
  height: calc(100% - 64px);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lantern), var(--moon));
  transform-origin: 50% 0;
  transform: scaleY(var(--p, 0));
}
.hc-nav a {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: 14.5px;
  font-weight: 500;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease), transform .45s var(--ease-out);
}
.hc-nav a:hover { color: var(--ink); background: rgb(var(--tint) / .04); }
.hc-nav a.is-active { color: var(--ink); background: rgb(var(--tint) / .06); transform: translateX(3px); }
.hc-nav .hc-nav-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ink-2); border: 1px solid var(--line-2); }
.hc-nav .hc-nav-cta svg { width: 16px; height: 16px; }
.hc-layout.is-searching .hc-nav { opacity: .4; pointer-events: none; }
@media (max-width: 900px) {
  .hc-layout { grid-template-columns: minmax(0, 1fr); }
  .hc-nav { display: none; }
}
.hc-group { padding-bottom: 44px; scroll-margin-top: calc(var(--header-h) + 20px); }
.hc-group > header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hc-group > header .tile { width: 38px; height: 38px; border-radius: var(--r-sm); }
.hc-group > header .tile svg { width: 18px; height: 18px; }
.hc-list { list-style: none; margin: 0; padding: 6px; }
.hc-a { position: relative; border-radius: var(--r-md); scroll-margin-top: calc(var(--header-h) + 24px); transition: background-color .3s var(--ease); }
.hc-a + .hc-a::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: var(--line); transition: opacity .3s var(--ease); }
.hc-a.is-open::before, .hc-a.is-open + .hc-a::before { opacity: 0; }
.hc-a:hover { background: rgb(var(--tint) / .025); }
.hc-a.is-open { background: linear-gradient(180deg, rgb(var(--lantern-rgb) / .05), rgb(var(--tint) / .02) 70%); box-shadow: inset 0 0 0 1px rgb(var(--lantern-rgb) / .16); }
.hc-a.is-flash { animation: rx-flash 1.6s var(--ease); }
.js .hc-group .hc-a {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .55s var(--ease-out), background-color .3s var(--ease);
  transition-delay: calc(.1s + var(--i) * 45ms), calc(.1s + var(--i) * 45ms), 0s;
}
.js .hc-group.is-in .hc-a, .hc-layout.is-searching .hc-a { opacity: 1; transform: none; }
.hc-a-h { margin: 0; font: inherit; }
.hc-a-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 16px 14px 16px 18px;
  border-radius: var(--r-md);
  text-align: left;
  color: inherit;
}
.hc-a-toggle:focus-visible { outline: 2px solid rgb(var(--lantern-rgb) / .7); outline-offset: -2px; }
.hc-a-text b { display: block; font-weight: 620; letter-spacing: -.012em; }
.hc-a-sum { display: block; margin-top: 2px; color: var(--ink-2); font-size: 14.5px; }
.hc-a.is-open .rx-pm { transform: rotate(180deg); background: rgb(var(--lantern-rgb) / .12); border-color: rgb(var(--lantern-rgb) / .35); }
.hc-a.is-open .rx-pm::before, .hc-a.is-open .rx-pm::after { background: var(--lantern); }
.hc-a.is-open .rx-pm::after { transform: rotate(0deg); }
.hc-a-toggle:hover .rx-pm { border-color: var(--line-3); background: rgb(var(--tint) / .04); }
.hc-a-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.hc-a.is-open .hc-a-body { grid-template-rows: 1fr; }
.hc-a-inner { overflow: hidden; min-height: 0; }
/* The 2px of headroom keeps .hc-a-inner's clip (it lands on a fractional pixel) off the
   first step's number badge. */
.hc-a-card { display: grid; gap: 14px; padding: 2px 18px 18px; opacity: 0; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .35s var(--ease-out); }
.hc-a.is-open .hc-a-card { opacity: 1; transform: none; transition: opacity .4s var(--ease) .1s, transform .5s var(--ease-out) .06s; }
.hc-errs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hc-errs .rx-k { margin: 0 4px 0 0; }
.hc-err { padding: 3px 9px; border-radius: var(--r-sm); font-size: 12.5px; background: rgb(var(--danger-rgb) / .08); color: var(--danger-soft); border: 1px solid rgb(var(--danger-rgb) / .18); }
.hc-steps { list-style: none; counter-reset: s; display: grid; gap: 10px; }
/* The badge has to stay inside the line box: the first step sits flush with the top of
   .hc-a-inner, which clips for the open/close animation. */
.hc-steps li { counter-increment: s; position: relative; min-height: 26px; padding-left: 38px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.hc-steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: rgb(var(--tint) / .07);
  border: 1px solid var(--line-2);
  font-feature-settings: "tnum";
}
.hc-steps b { color: var(--ink); font-weight: 600; }
.hc-note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-2);
  background: rgb(var(--moon-rgb) / .05);
  border: 1px solid rgb(var(--moon-rgb) / .12);
}
.hc-note svg { width: 18px; height: 18px; flex: none; color: var(--moon); margin-top: 1px; }
.hc-note b { color: var(--ink); }
.hc-note--warn { background: rgb(var(--lantern-rgb) / .06); border-color: rgb(var(--lantern-rgb) / .22); }
.hc-note--warn svg { color: var(--lantern); }
.hc-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hc-extras .btn svg { width: 16px; height: 16px; }
.hc-cmd { flex-basis: 100%; font-size: 14px; color: var(--ink-2); }
.hc-cmd code { padding: 2px 8px; border-radius: 6px; background: rgb(var(--shade) / calc(.35 * var(--shade-a))); border: 1px solid var(--line-2); color: var(--ink); }
.hc-a-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.hc-vote { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-3); }
.hc-vote span { margin-right: 4px; }
.hc-vote .mini[aria-pressed="true"][data-v="yes"] { color: var(--online); border-color: rgb(var(--online-rgb) / .45); background: rgb(var(--online-rgb) / .08); }
.hc-vote .mini[aria-pressed="true"][data-v="no"] { color: var(--lantern); border-color: rgb(var(--lantern-rgb) / .45); background: rgb(var(--lantern-rgb) / .08); }
.hc-nohelp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-2);
  background: rgb(var(--lantern-rgb) / .06);
  border: 1px solid rgb(var(--lantern-rgb) / .22);
  animation: pop-in .3s var(--ease-out);
}
.hc-nohelp .btn svg { width: 16px; height: 16px; }
.hc-empty { margin-bottom: 24px; }
@media (max-width: 640px) {
  .hc-a-toggle { padding: 14px 10px 14px 12px; }
  .hc-a-card { padding: 2px 12px 14px; }
  .hc-steps li { font-size: 14.5px; }
}
/* Open a ticket on Discord */
#ticket { padding-top: clamp(24px, 4vw, 48px); scroll-margin-top: calc(var(--header-h) + 12px); }
.hc-ticket { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); border-radius: clamp(24px, 3vw, 36px); }
.tk-intro { display: grid; align-content: start; gap: 16px; }
.tk-intro .lede b { color: var(--ink); font-weight: 600; }
.tk-meta { display: grid; gap: 10px; margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.tk-meta li { display: flex; align-items: center; gap: 10px; }
.tk-meta svg { width: 18px; height: 18px; color: var(--lantern); flex: none; }
.tk-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) {
  .hc-ticket { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tk-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hc-group .hc-a { opacity: 1; transform: none; transition: none; }
  .hc-a-body, .hc-a-card, .hc-topic, .hc-topic .tile { transition: none !important; }
  .hc-a.is-flash, .hc-results, .hc-nohelp { animation: none; }
}
@media print {
  .hc-search, .hc-popular, .hc-nav, .hc-ticket, .hc-a-foot { display: none !important; }
  .hc-a-body { grid-template-rows: 1fr !important; }
  .hc-a-card, .hc-a { opacity: 1 !important; transform: none !important; }
}
.hc-search > svg { z-index: 1; }
.hc-hero { isolation: isolate; overflow: visible; z-index: 5; }
.hc-hero .page-hero-art { overflow: hidden; }
@media (hover: none) {
  .hc-search > kbd { display: none; }
  .hc-search input { padding-right: 104px; }
}
/* ---------- 26. Living glass (2026-10) ----------
   No font files. Text uses each device's own UI font: SF Pro on Apple,
   Segoe UI Variable on Windows, Roboto on Android, Cantarell/Ubuntu on Linux.
   The accent words use the device's built-in serif italic. */
:root {
  --glass-blur: blur(28px) saturate(170%);
  --ease: cubic-bezier(.25, .8, .25, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.25, .64, 1);
  --t-fast: 180ms;
  --t: 320ms;
  --t-slow: 800ms;
  --section: clamp(72px, 9vw, 128px);
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 76px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --serif: "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}
body { font-feature-settings: normal; letter-spacing: -.01em; }
.sv-count .n, .sk-count b, .sk-stat b, .num, .n { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* Living light: three slow colour fields behind everything, so the glass has something to frost */
.atmo::before { animation: atmo-drift 34s ease-in-out infinite alternate; }
.atmo {
  background: radial-gradient(30% 24% at 15% 20%, rgba(88, 101, 242, .10), transparent 70%),
  radial-gradient(28% 26% at 85% 70%, rgb(var(--lantern-rgb) / .07), transparent 70%);
  animation: atmo-hue 60s linear infinite;
}
@keyframes atmo-hue { 50% { filter: hue-rotate(25deg); } }
/* Glass catches the light where the pointer is */
.surface, .dc-window, .server, .sk-live, .hc-topic, .hc-status, .sv-status { --gx: 50%; --gy: 0%; }
.surface::after, .dc-window::after, .sk-live::after, .hc-topic::after, .hc-status::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(420px circle at var(--gx) var(--gy), rgb(var(--tint) / .07), transparent 60%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.sk-live, .hc-topic, .hc-status { position: relative; }
.sk-live > *, .hc-topic > *, .hc-status > * { position: relative; z-index: 1; }
/* Rim light: a bright edge that brightens nearest the pointer */
.dc-window::before, .sk-live::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(300px circle at var(--gx) var(--gy), rgb(var(--tint) / .35), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
/* Hero: letters rise into place, dock floats in */
/* Magnetic buttons */
/* Server cards: a touch more glass, status dot breathes */
.server { --mx: 50%; --my: 0%; background: rgb(var(--panel) / .5); }
.sv-status::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(260px circle at var(--gx) var(--gy), rgb(var(--tint) / .05), transparent 60%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.server[data-state="online"] .server-art .pill .dot { box-shadow: 0 0 10px var(--online); }
.sv-count .n { text-shadow: 0 0 30px rgb(var(--online-rgb) / .25); }
/* ---------- Discord section ---------- */
.dc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(28px, 5vw, 64px);
  border-radius: clamp(28px, 3vw, 40px);
  background: linear-gradient(160deg, rgba(88, 101, 242, .16), rgb(var(--panel) / .55) 45%, rgb(var(--panel) / .6));
  border: 1px solid rgba(140, 150, 255, .18);
  box-shadow: var(--glass-top), 0 50px 120px -50px rgba(40, 50, 160, .6);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
}
.dc-copy { display: grid; justify-items: start; gap: 18px; }
.dc-logo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  color: #fff;
  background: linear-gradient(160deg, #6f7bff, #4752e0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 40px -14px rgba(88, 101, 242, .9);
  animation: logo-bob 5s ease-in-out infinite;
}
.dc-logo svg { width: 30px; height: 30px; }
@keyframes logo-bob { 50% { transform: translateY(-4px) rotate(-4deg); } }
.dc .lede { max-width: 40ch; }
.dc-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 4px; }
.dc-channels li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgb(var(--tint) / .04);
  border: 1px solid rgb(var(--tint) / .07);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .5s var(--ease-out);
}
.dc-channels li:hover { background: rgb(var(--tint) / .07); border-color: rgba(140, 150, 255, .3); transform: translateY(-2px); }
.js .dc .dc-channels li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), background-color .3s var(--ease), border-color .3s var(--ease);
  transition-delay: calc(.25s + var(--i) * 70ms), calc(.25s + var(--i) * 70ms), 0s, 0s;
}
.js .dc.is-in .dc-channels li { opacity: 1; transform: none; }
.dc-ch-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); color: #c3c8ff; background: rgba(88, 101, 242, .18); }
.dc-ch-ic svg { width: 17px; height: 17px; }
.dc-channels b { display: block; font-size: 14px; font-weight: 640; }
.dc-channels small { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.dc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 6px; }
.dc-stats { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); opacity: 0; transition: opacity .8s var(--ease); }
.dc-stats.is-in { opacity: 1; }
.dc-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dc-stats > span:nth-child(2)::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #23a55a;
  box-shadow: 0 0 8px #23a55a;
  animation: breathe 2.4s ease-in-out infinite;
}
.dc-sep { width: 1px; height: 14px; background: rgb(var(--tint) / .15); }
.dc-faces { display: inline-flex; padding-left: 8px; }
.dc-faces:empty { display: none; }
.dc-faces img {
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid #1b1f3b;
  animation: head-in .5s var(--ease-out) both;
  animation-delay: calc(var(--i) * 70ms + .3s);
}
/* The preview window */
.dc-window {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 380px;
  min-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgb(var(--panel) / .62);
  border: 1px solid rgb(var(--tint) / .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 90px -30px rgb(var(--shade) / calc(.85 * var(--shade-a))), 0 0 0 1px rgb(var(--shade) / calc(.2 * var(--shade-a)));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease-out);
  animation: win-float 8s ease-in-out infinite alternate;
}
@keyframes win-float { to { translate: 0 -6px; } }
.dc-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid rgb(var(--tint) / .07);
  background: rgb(var(--tint) / .025);
  font-size: 14px;
  color: var(--ink-3);
}
.dc-bar > i { width: 11px; height: 11px; border-radius: 50%; background: rgb(var(--tint) / .14); }
.dc-bar > i:nth-child(1) { background: #ff5f57; }
.dc-bar > i:nth-child(2) { background: #febc2e; }
.dc-bar > i:nth-child(3) { background: #28c840; }
.dc-bar > span:first-of-type { margin-left: 10px; }
.dc-bar b { color: var(--ink); font-weight: 600; }
.dc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; color: #6ee7a0; }
.dc-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; overflow: hidden; }
.dc-side { padding: 10px 8px; border-right: 1px solid rgb(var(--tint) / .06); background: rgb(var(--shade) / calc(.12 * var(--shade-a))); display: grid; align-content: start; gap: 2px; }
.dc-side li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink-3);
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.dc-side li svg { width: 14px; height: 14px; flex: none; opacity: .7; }
.dc-side li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-side li.is-on { color: var(--ink); background: rgb(var(--tint) / .08); }
.dc-feed { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-height: 0; padding: 16px; overflow: hidden; }
.dc-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.5; color: #dbdee1; }
.dc-msg.is-new { animation: msg-in .6s var(--ease-out) both; }
.dc-msg.is-out { animation: msg-out .5s var(--ease) forwards; }
@keyframes msg-in { from { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(4px); } }
@keyframes msg-out { to { opacity: 0; transform: translateY(-10px); height: 0; margin-top: -14px; } }
.dc-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 700; color: #fff; background: hsl(var(--h) 55% 45%); overflow: hidden; }
.dc-av.is-staff { background: #1a1206; }
.dc-av img { width: 100%; height: 100%; }
.dc-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin-bottom: 1px; }
.dc-meta b { color: #fff; font-weight: 600; }
.dc-role { padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #1a1206; background: var(--lantern); }
.dc-ch { font-size: 12px; color: #a5b0ff; }
.dc-meta time { font-size: 12px; color: var(--ink-3); }
.dc-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 0;
  padding: 0 16px;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--ink-3);
  transition: height .3s var(--ease), padding .3s var(--ease);
}
.dc-typing b { color: var(--ink-2); font-weight: 600; }
.dc-window.is-typing .dc-typing { height: 30px; padding-bottom: 8px; }
.dc-typing span { display: inline-flex; gap: 3px; }
.dc-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); animation: dots 1.2s ease-in-out infinite; }
.dc-typing i:nth-child(2) { animation-delay: .15s; }
.dc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 980px) {
  .dc { grid-template-columns: minmax(0, 1fr); }
  .dc-window { height: 340px; }
}
@media (max-width: 560px) {
  .dc { padding: 24px 18px; }
  .dc-channels { grid-template-columns: minmax(0, 1fr); }
  .dc-channels li:nth-child(n/**/+5) { display: none; }
  .dc-body { grid-template-columns: minmax(0, 1fr); }
  .dc-side { display: none; }
  .dc-cta .btn { flex: 1 1 100%; }
}
/* Footer replaced by one quiet legal line */
.legal {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin: 0 auto;
  padding: 28px 0 36px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
}
main > .section:last-child { padding-bottom: clamp(56px, 7vw, 96px); }
/* Details panel: tighter, fewer parts */
.sk-head { align-items: center; }
.sk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .sk-tiles { grid-template-columns: minmax(0, 1fr); }
}
.sheet-body { gap: 16px; }
.sk-live { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .atmo, .dc-window, .dc-logo, .dc-faces img, .dc-typing i { animation: none !important; }
  .js .dc .dc-channels li { opacity: 1; transform: none; }
}
#community { padding-top: 0; }
#servers { padding-bottom: clamp(56px, 7vw, 96px); }
/* Images: AVIF <picture> with a blurred thumbnail that fades out once the full image loads */
.pic { display: block; position: relative; isolation: isolate; overflow: hidden; width: 100%; height: 100%; background-size: 0 0; }
.pic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(1.1);
  transform: scale(1.12);
  transition: opacity .8s var(--ease);
}
.pic.is-loaded::before { opacity: 0; }
html:not(.js) .pic::before { display: none; }
.hero-media .pic, .page-hero-art .pic { position: absolute; inset: 0; overflow: visible; }
.hero-media .pic::before, .page-hero-art .pic::before { inset: -10%; }
/* Server card: "New to modded?" link */
/* Smooth mode (slower devices): solid-ish panels, fewer blurs, no ambient motion */
.glass-lite .server, .glass-lite .dc, .glass-lite .dc-window, .glass-lite .surface, .glass-lite .hc-topic, .glass-lite .hc-status, .glass-lite .pill, .glass-lite .connect, .glass-lite .btn--glass, .glass-lite .sv-info, .glass-lite .hc-chip {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.glass-lite .server, .glass-lite .dc-window { background: rgb(var(--panel) / .94); }
.glass-lite .surface { background: rgb(var(--panel) / .92); }
.glass-lite .atmo, .glass-lite .atmo::before, .glass-lite .dc-window, .glass-lite .dc-logo { animation: none !important; }
/* Launch check panel (?check) */
.launch-check {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 300;
  width: min(420px, calc(100vw - 32px));
  max-height: 70vh;
  overflow: auto;
  border-radius: var(--r-lg);
  font-size: 13.5px;
  background: rgb(var(--panel) / .94);
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px -20px rgb(var(--shade) / var(--shade-a));
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  animation: pop-in .4s var(--ease-out);
}
.launch-check header { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: inherit; border-bottom: 1px solid var(--line); }
.launch-check header span { color: var(--ink-3); }
.launch-check header button { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.launch-check header button svg { width: 14px; height: 14px; }
.launch-check ol { list-style: none; display: grid; gap: 2px; padding: 8px; }
.launch-check li { display: grid; gap: 2px; padding: 10px 12px 10px 30px; border-radius: var(--r-sm); position: relative; }
.launch-check li::before { content: ""; position: absolute; left: 12px; top: 16px; width: 8px; height: 8px; border-radius: 50%; }
.launch-check li span { color: var(--ink-3); font-size: 12.5px; }
.lc-bad::before { background: #ff6b5e; box-shadow: 0 0 8px #ff6b5e; }
.lc-warn::before { background: var(--unknown); }
.lc-ok::before { background: var(--online); }
.lc-bad { background: rgb(var(--danger-rgb) / .06); }
/* ---------- Rules page, restyled to match ---------- */
body[data-page="rules"] .page-hero { min-height: 0; align-items: center; padding: calc(var(--header-h) + clamp(56px, 9vh, 104px)) 0 clamp(36px, 5vw, 56px); }
body[data-page="rules"] .page-hero > .wrap { display: grid; justify-items: center; text-align: center; gap: 14px; }
body[data-page="rules"] .page-hero .crumbs { display: none; }
body[data-page="rules"] .page-hero .h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
body[data-page="rules"] .page-hero .lede { margin: 0 auto; }
.rules-short { gap: 10px; }
.rule-big {
  padding: 18px;
  border-radius: var(--r-lg);
  background: rgb(var(--tint) / .035);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-top);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.rule-big .tile { margin-bottom: 12px; }
.rule-big .h4 { font-size: 15.5px; }
.rule-big p { margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.rule-group > header .n {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--lantern);
  background: rgb(var(--lantern-rgb) / .1);
  border: 1px solid rgb(var(--lantern-rgb) / .2);
  opacity: 1;
}
.rtools { border-radius: var(--r-md); padding: 6px; }
.rtools .field--search input { height: 48px; font-size: 15.5px; }
.rx-list-wrap { border-radius: var(--r-lg); }
.enf-steps li { border-radius: var(--r-md); }
.act { display: grid; align-content: start; gap: 6px; padding: 22px; border-radius: var(--r-lg); }
.act .tile { margin-bottom: 8px; }
.act b { font-size: 16px; font-weight: 640; }
.act p { color: var(--ink-3); font-size: 14px; }
.act-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.act-links .btn svg { width: 15px; height: 15px; }
.act-links .link { font-size: 14px; color: var(--ink-2); }
.modcheck { border-radius: var(--r-lg); }
.limits { border-radius: var(--r-lg); }
/* ---------- 404 ---------- */
.nf {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 40px) var(--gutter) 60px;
  isolation: isolate;
  overflow: hidden;
}
.nf .page-hero-art::after { background: radial-gradient(70% 60% at 50% 45%, rgb(var(--abyss) / .55), rgb(var(--abyss) / .92)); }
.nf-in { display: grid; justify-items: center; gap: 16px; max-width: 560px; }
.nf-code {
  font-size: clamp(6rem, 22vw, 12rem);
  font-weight: 780;
  letter-spacing: -.06em;
  line-height: .85;
  background: linear-gradient(180deg, #fff, rgb(var(--moon-rgb) / .35));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nf-float 6s ease-in-out infinite alternate;
}
@keyframes nf-float { to { transform: translateY(-8px); } }
.nf .lede { margin: 0 auto; }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .nf-code { animation: none; }
}
/* ---------- 28. Themes: dark, light, system (2026-10) ----------
   <html data-theme="dark|light"> is set before first paint by the inline script in each page,
   from the visitor's choice (System / Light / Dark) stored in localStorage "sk-theme".
   Colours throughout the file use channel tokens, e.g. rgb(var(--tint) / .06), so one set of
   rules serves both themes.
   Dark islands: anything that sits on the night artwork (heroes, card art, Discord window,
   header over the hero) keeps dark tokens in light mode so text stays readable.  */
/* Dark: the default, and every dark island */
:root, [data-theme="dark"], [data-theme="light"] :is(.hero, .page-hero, .hc-hero, .nf, .server-art, .sheet-hero, .dc-window), [data-theme="light"]:not(.menu-open) .site-header:not(.is-scrolled) {
  color-scheme: dark;
  --bg: #06080e;
  --bg-2: #0a0e17;
  --surface: #0d121b;
  --surface-2: #121927;
  --surface-3: #192235;
  --glass: rgba(13, 18, 27, .62);
  --glass-strong: rgba(9, 13, 20, .86);
  --line: rgba(206, 218, 236, .075);
  --line-2: rgba(206, 218, 236, .13);
  --line-3: rgba(206, 218, 236, .24);
  --ink: #f1f4f9;
  --ink-2: #b9c3d2;
  --ink-3: #8b96a9;
  --on-ink: #0a0d14;
  --moon: #cfe0ff;
  --lantern: #ffc47a;
  --discord: #5865f2;
  --online: #5ee39a;
  --offline: #8b95a5;
  --unknown: #f0c36a;
  --restarting: #ffb347;
  --silver: linear-gradient(180deg, #ffffff 0%, #e6ecf5 44%, #9fadc2 100%);
  --glint: linear-gradient(100deg, #ffe7c2 0%, #f6e8d8 38%, #cfe0ff 100%);
  --tint: 255 255 255;
  --panel: 16 21 32;
  --abyss: 6 8 13;
  --shade: 0 0 0;
  --shade-a: 1;
  --sink: 0 0 0;
  --sink-a: 1;
  --moon-rgb: 207 224 255;
  --lantern-rgb: 255 196 122;
  --online-rgb: 94 227 154;
  --danger-rgb: 255 138 128;
  --restart-rgb: 255 179 71;
  --unknown-rgb: 240 195 106;
  --accent-k: 100%;
  --danger: #ff8a80;
  --danger-soft: #ffb3ab;
  --hi: inset 0 1px 0 rgba(255, 255, 255, .055);
  --shadow-sm: var(--hi), 0 8px 24px -14px rgba(0, 0, 0, .7);
  --shadow-md: var(--hi), 0 1px 2px rgba(0, 0, 0, .25), 0 24px 60px -30px rgba(0, 0, 0, .9);
  --shadow-lg: var(--hi), 0 1px 2px rgba(0, 0, 0, .3), 0 50px 120px -50px rgba(0, 0, 0, .95), 0 20px 40px -30px rgba(0, 0, 0, .7);
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
  --glass-fill-strong: linear-gradient(180deg, rgba(30, 38, 54, .72), rgba(14, 19, 29, .78));
  --glass-edge: rgba(255, 255, 255, .11);
  --glass-top: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .02);
  --glass-shadow: var(--glass-top), 0 1px 1px rgba(0, 0, 0, .25), 0 12px 24px -12px rgba(0, 0, 0, .55), 0 40px 90px -40px rgba(0, 0, 0, .85);
}
/* Page-level colours that islands must NOT reset (what the art fades into) */
:root, [data-theme="dark"] { --page: #06080e; --card-rgb: 16 21 32; --sheet-rgb: 14 19 29; }
/* Light: cool porcelain with warm lantern accents.
   The hero stats bar is a light pane inside the dark hero. */
[data-theme="light"], [data-theme="light"] .hc-hero :is(.hc-search, .hc-popular) {
  color-scheme: light;
  --page: #eef1f7;
  --card-rgb: 250 251 254;
  --sheet-rgb: 246 248 252;
  --bg: #eef1f7;
  --bg-2: #e5e9f1;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --surface-3: #e8edf5;
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .88);
  --line: rgba(15, 23, 42, .075);
  --line-2: rgba(15, 23, 42, .12);
  --line-3: rgba(15, 23, 42, .22);
  --ink: #0b1220;
  --ink-2: #3b4658;
  --ink-3: #626d80;
  --on-ink: #ffffff;
  --moon: #3454c4;
  --lantern: #c0690b;
  --discord: #5865f2;
  --online: #0e9b52;
  --offline: #6b7486;
  --unknown: #a87604;
  --restarting: #c86400;
  --silver: linear-gradient(180deg, #0b1220 0%, #26324a 60%, #4a5873 100%);
  --glint: linear-gradient(100deg, #c0690b 0%, #b4511a 40%, #3454c4 100%);
  --tint: 15 23 42;
  --panel: 255 255 255;
  --abyss: 226 232 242;
  --shade: 22 32 58;
  --shade-a: .2;
  --sink: 15 23 42;
  --sink-a: .11;
  --moon-rgb: 52 84 196;
  --lantern-rgb: 214 122 22;
  --online-rgb: 14 155 82;
  --danger-rgb: 212 58 48;
  --restart-rgb: 212 108 0;
  --unknown-rgb: 168 118 4;
  --accent-k: 48%;
  --danger: #c4342a;
  --danger-soft: #b42318;
  --hi: inset 0 1px 0 rgba(255, 255, 255, .8);
  --shadow-sm: var(--hi), 0 1px 2px rgba(22, 32, 58, .06), 0 8px 20px -12px rgba(22, 32, 58, .2);
  --shadow-md: var(--hi), 0 1px 2px rgba(22, 32, 58, .06), 0 20px 44px -24px rgba(22, 32, 58, .24);
  --shadow-lg: var(--hi), 0 1px 2px rgba(22, 32, 58, .06), 0 40px 90px -40px rgba(22, 32, 58, .3);
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58));
  --glass-fill-strong: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 253, .88));
  --glass-edge: rgba(15, 23, 42, .08);
  --glass-top: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35);
  --glass-shadow: var(--glass-top), 0 1px 2px rgba(22, 32, 58, .05), 0 10px 28px -14px rgba(22, 32, 58, .16), 0 34px 80px -44px rgba(22, 32, 58, .22);
}
/* Islands set their own text colour (inherited colour was computed in the page theme) */
[data-theme="light"] :is(.hero, .page-hero, .hc-hero, .nf, .server-art, .sheet-hero, .dc-window), [data-theme="light"]:not(.menu-open) .site-header:not(.is-scrolled) {
  color: var(--ink);
}
html { interpolate-size: allow-keywords; background: var(--page); }
body { -moz-osx-font-smoothing: grayscale; background: var(--bg); color: var(--ink); transition: background-color .4s var(--ease); }
/* ----- Light-mode specifics ----- */
[data-theme="light"] ::selection { background: rgba(214, 122, 22, .22); color: var(--ink); }
/* Ambient light: pastel fields so frosted glass has colour to blur */
[data-theme="light"] .atmo {
  background: radial-gradient(34% 28% at 12% 18%, rgba(120, 140, 255, .16), transparent 70%),
  radial-gradient(30% 28% at 88% 64%, rgba(255, 176, 102, .18), transparent 70%),
  radial-gradient(36% 30% at 40% 98%, rgba(120, 214, 200, .14), transparent 70%);
}
[data-theme="light"] .atmo::before { opacity: .55; }
[data-theme="light"] .atmo::after { mix-blend-mode: multiply; opacity: .025; }
/* Primary buttons become ink-dark on light surfaces (they stay white inside dark islands) */
[data-theme="light"] .btn--primary:not(:is(.hero, .page-hero, .hc-hero, .nf, .server-art, .sheet-hero, .dc-window) *) {
  background: linear-gradient(180deg, #1d2638, #0b1220);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 28px -12px rgba(11, 18, 32, .55);
}
[data-theme="light"] .btn--primary:not(:is(.hero, .page-hero, .hc-hero, .nf, .server-art, .sheet-hero, .dc-window) *):hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 36px -12px rgba(11, 18, 32, .6);
}
[data-theme="light"] .btn--primary:not(:is(.hero, .page-hero, .hc-hero, .nf, .server-art, .sheet-hero, .dc-window) *)::after {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
}
/* Copy buttons (white chips) get a crisp edge on white */
[data-theme="light"] .copy-btn { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1), 0 4px 12px -6px rgba(22, 32, 58, .25); }
/* Big numbers: no glow on light */
[data-theme="light"] .sv-count .n { text-shadow: none; }
[data-theme="light"] .sv-count .n, [data-theme="light"] .sk-count b { color: var(--ink); }
/* Discord section: indigo-tinted frost */
[data-theme="light"] .dc {
  background: linear-gradient(160deg, rgba(88, 101, 242, .14), rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, .62));
  border-color: rgba(88, 101, 242, .2);
  box-shadow: var(--glass-top), 0 40px 100px -50px rgba(60, 70, 190, .35);
}
[data-theme="light"] .dc-ch-ic { color: #4752c4; background: rgba(88, 101, 242, .12); }
[data-theme="light"] .dc-faces img { border-color: #fff; }
/* Sheet backdrop: light veil instead of black */
[data-theme="light"] .sheet[open]::backdrop { background: rgba(226, 232, 242, .55); }
[data-theme="light"] .sheet { box-shadow: var(--glass-top), 0 50px 120px -30px rgba(22, 32, 58, .35); }
/* Player heads and avatars sit on white */
/* Inputs */
[data-theme="light"] :is(.hc-search input, .field input) { background-color: rgba(255, 255, 255, .85); }
/* Code/error chips */
[data-theme="light"] .hc-r-match, [data-theme="light"] .sk-people-h span { color: #fff; }
/* Scroll progress line */
[data-theme="light"] .scroll-progress { box-shadow: none; }
/* Section dividers in light read better a touch stronger */
[data-theme="light"] .legal { border-top-color: var(--line-2); }
/* ----- Theme switcher ----- */
.theme-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink-2);
  background: rgb(var(--tint) / .06);
  border: 1px solid rgb(var(--tint) / .1);
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease), transform .5s var(--ease-out);
}
.theme-btn:hover { color: var(--ink); background: rgb(var(--tint) / .1); }
.theme-btn:active { transform: scale(.92); }
.theme-btn svg { position: absolute; width: 19px; height: 19px; transition: opacity .35s var(--ease), transform .6s var(--ease-out); }
.theme-btn [data-ic] { opacity: 0; transform: rotate(-90deg) scale(.5); }
html[data-theme-pref="system"] .theme-btn [data-ic="system"], html[data-theme-pref="light"] .theme-btn [data-ic="light"], html[data-theme-pref="dark"] .theme-btn [data-ic="dark"] {
  opacity: 1;
  transform: none;
}
.theme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 120;
  display: grid;
  gap: 2px;
  min-width: 184px;
  padding: 6px;
  border-radius: var(--r-md);
  color: var(--ink);
  background: rgb(var(--panel) / .88);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .4s var(--ease-out);
}
.theme-wrap { position: relative; }
.theme-wrap.is-open .theme-menu { opacity: 1; transform: none; pointer-events: auto; }
.theme-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 550;
  color: var(--ink-2);
  text-align: left;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.theme-menu button:hover, .theme-menu button:focus-visible { background: rgb(var(--tint) / .07); color: var(--ink); outline: none; }
.theme-menu button svg { width: 17px; height: 17px; flex: none; }
.theme-menu button[aria-checked="true"] { color: var(--ink); }
.theme-menu button[aria-checked="true"]::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lantern);
  box-shadow: 0 0 8px rgb(var(--lantern-rgb) / .6);
}
.theme-seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: rgb(var(--tint) / .05); border: 1px solid var(--line-2); }
.theme-seg button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.theme-seg button svg { width: 16px; height: 16px; }
.theme-seg button[aria-checked="true"] { color: var(--on-ink); background: var(--ink); }
@media (max-width: 900px) {
  .site-header .theme-wrap { display: none; }
}
/* Theme change: the new theme is revealed over the old one; the effect is picked from a rotating set (app.js sets --fx-*).
   Only clip-path, opacity and transform animate, so it stays on the compositor. */
html.theme-switching::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.theme-switching::view-transition-new(root) { animation: var(--fx-name, theme-reveal) var(--fx-dur, .75s) var(--fx-ease, cubic-bezier(.65, 0, .35, 1)) both; mix-blend-mode: normal; }
html.theme-switching .site-header { view-transition-name: none; }
@keyframes theme-reveal { from { clip-path: circle(0 at var(--tx, 100%) var(--ty, 0%)); } to { clip-path: circle(150vmax at var(--tx, 100%) var(--ty, 0%)); } }
@keyframes theme-wipe-r { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes theme-wipe-l { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes theme-wipe-d { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes theme-wipe-u { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes theme-diag { from { clip-path: polygon(0 0, 0 0, 0 0); } to { clip-path: polygon(0 0, 250% 0, 0 250%); } }
@keyframes theme-curtain { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes theme-iris { from { clip-path: circle(0 at 50% 50%); } to { clip-path: circle(80vmax at 50% 50%); } }
@keyframes theme-fade { from { opacity: 0; } }
@keyframes theme-zoom { from { opacity: 0; transform: scale(1.04); } }
/* Fallback without View Transitions: quick colour cross-fade */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after {
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), fill .4s var(--ease), box-shadow .4s var(--ease) !important;
}
/* ----- Accessibility: higher contrast, forced colours ----- */
@media (prefers-contrast: more) {
  :root, [data-theme="dark"] { --ink-2: #d3dae5; --ink-3: #aab4c4; --line: rgba(206, 218, 236, .16); --line-2: rgba(206, 218, 236, .26); --glass-edge: rgba(255, 255, 255, .24); }
  [data-theme="light"] { --ink-2: #222b3a; --ink-3: #3e4859; --line: rgba(15, 23, 42, .18); --line-2: rgba(15, 23, 42, .28); --glass-edge: rgba(15, 23, 42, .25); }
  .surface, .server, .dc-window, .sk-live, .hc-topic { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (forced-colors: active) {
  .atmo, .scroll-progress, .hero-shade { display: none; }
  .btn, .pill, .theme-btn, .copy-btn { border: 1px solid ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-switching::view-transition-new(root) { animation: none; }
}
[data-theme="light"] .sv-status[data-state="restarting"] .sv-word { color: var(--restarting); }
[data-theme="light"] .dc-window { background: rgba(32, 34, 42, .94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 80px -30px rgba(22, 32, 58, .45); }
[data-theme="light"] .hc-hero :is(.hc-search, .hc-popular) { color: var(--ink); }
[data-theme="light"] .hc-hero .hc-search input {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #fff, 0 24px 60px -24px rgba(6, 8, 13, .55);
}
[data-theme="light"] .hc-hero .hc-chip { background: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .8); color: var(--ink-2); }
[data-theme="light"] .hc-hero .hc-chip:hover { background: #fff; color: var(--ink); }
[data-theme="light"] .hc-hero .hc-pop-k { color: var(--ink-2); }
[data-theme="light"] .page-hero-art::after {
  background: linear-gradient(180deg, transparent 50%, rgb(238 241 247 / .6) 80%, var(--page) 100%), linear-gradient(90deg, rgb(var(--abyss) / .85) 0%, rgb(var(--abyss) / .5) 50%, rgb(var(--abyss) / .12)), linear-gradient(180deg, rgb(var(--abyss) / .5), transparent 26%);
}
[data-theme="light"] body[data-page="rules"] .page-hero-art::after {
  background: linear-gradient(180deg, rgb(var(--abyss) / .55) 0%, rgb(var(--abyss) / .66) 62%, rgb(238 241 247 / .5) 86%, var(--page) 100%);
}
[data-theme="light"] body[data-page="rules"] .page-hero { padding-bottom: clamp(72px, 9vw, 120px); }
/* ---------- 29. Shared header extras, change-log timeline & uptime bars (2026-10) ---------- */
.nav a .ext { display: inline-block; width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px; opacity: .6; }
@media (max-width: 1080px) and (min-width: 861px) {
  .nav a:not(.btn) { padding: 9px 10px; font-size: 14px; }
  .nav .btn { margin-left: 4px; }
}
.noscript-nav { display: flex; gap: 18px; justify-content: center; padding: 18px; font-weight: 600; }
/* ----- Change-log timeline (Rules → What changed) ----- */
.uf-row { display: flex; flex-wrap: wrap; gap: 6px; }
.uf { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 550; color: var(--ink-2); background: rgb(var(--tint) / .05); border: 1px solid var(--line-2); transition: color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.uf i { width: 8px; height: 8px; border-radius: 50%; }
.uf:hover { color: var(--ink); border-color: var(--line-3); }
.uf[aria-pressed="true"] { color: var(--on-ink); background: var(--ink); border-color: transparent; }
.um + .um { margin-top: 28px; }
.um-h { margin: 0 0 14px 92px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ue-list { display: grid; gap: 14px; }
.ue { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start; }
.ue::before { content: ""; position: absolute; left: 35px; top: 58px; bottom: -14px; width: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--line)); }
.ue:last-child::before { display: none; }
.ue-date { display: grid; justify-items: center; align-content: center; width: 72px; height: 58px; border-radius: var(--r-md); background: rgb(var(--tint) / .04); border: 1px solid var(--glass-edge); box-shadow: var(--glass-top); }
.ue-date b { font-size: 22px; font-weight: 720; line-height: 1; letter-spacing: -.03em; }
.ue-date span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ue-card { padding: 18px 22px 20px; border-radius: var(--r-lg); }
.ue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ue-type, .ue-ver, .ue-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.ue-type svg { width: 13px; height: 13px; }
.ue-type { color: var(--moon); background: rgb(var(--moon-rgb) / .1); }
.ue-type--rules { color: var(--ink-2); background: rgb(var(--tint) / .06); }
.ue-ver { font-family: var(--mono); color: var(--ink); background: rgb(var(--tint) / .06); }
.ue-tag--new { color: var(--on-ink); background: var(--lantern); }
.ue-title { margin-top: 12px; font-size: 1.25rem; font-weight: 680; letter-spacing: -.02em; }
.ue.is-flash .ue-card { animation: rx-flash 1.8s var(--ease); }
@media (max-width: 560px) {
  .ue { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ue::before { display: none; }
  .ue-date { width: auto; height: auto; padding: 4px 12px; justify-self: start; display: flex; gap: 6px; align-items: baseline; border-radius: 999px; }
  .ue-date b { font-size: 15px; }
  .um-h { margin-left: 0; }
}
/* ----- Uptime bars & incident rows (server Details panel) ----- */
.st-up--good { color: var(--online); }
.st-up--ok { color: var(--online); }
.st-up--warn { color: var(--unknown); }
.st-up--bad { color: var(--danger); }
.st-up--none { color: var(--ink-3); }
.st-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 36px; }
.st-bar { position: relative; border-radius: 4px; background: var(--online); opacity: .85; transform-origin: 50% 100%; transition: opacity var(--t) var(--ease), transform .3s var(--ease-out); }
.st-bar--ok { background: color-mix(in srgb, var(--online) 70%, var(--unknown)); }
.st-bar--warn { background: var(--unknown); }
.st-bar--bad { background: var(--danger); }
.st-bar--none { background: rgb(var(--tint) / .08); }
.st-bar:hover { opacity: 1; transform: scaleY(1.12); }
.st-bar::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 5; padding: 6px 10px; border-radius: var(--r-sm); white-space: nowrap; font-size: 12.5px; font-weight: 550; color: var(--ink); background: rgb(var(--panel) / .95); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .2s var(--ease), transform .3s var(--ease-out); }
.st-bar:hover::after { opacity: 1; transform: translate(-50%, 0); }
.st-bar:nth-child(-n/**/+5)::after { left: 0; transform: translate(0, 4px); }
.st-bar:nth-child(-n/**/+5):hover::after { transform: none; }
.st-bar:nth-last-child(-n/**/+5)::after { left: auto; right: 0; transform: translate(0, 4px); }
.st-bar:nth-last-child(-n/**/+5):hover::after { transform: none; }
@keyframes bar-up { from { transform: scaleY(.2); opacity: 0; } }
.st-axis { display: flex; justify-content: space-between; margin-top: -6px; font-size: 12px; color: var(--ink-3); }
.si { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 16px 20px; border-radius: var(--r-md); background: rgb(var(--tint) / .03); border: 1px solid var(--line); }
.si time { font-size: 13px; color: var(--ink-3); padding-top: 2px; }
.si-lv { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 650; color: var(--ink-2); background: rgb(var(--tint) / .06); }
.si--incident .si-lv, .si--auto .si-lv { color: var(--danger); background: rgb(var(--danger-rgb) / .1); }
.si--maintenance .si-lv { color: var(--moon); background: rgb(var(--moon-rgb) / .1); }
.si--resolved .si-lv { color: var(--online); background: rgb(var(--online-rgb) / .1); }
.si b { display: block; font-weight: 640; }
.si p { margin-top: 2px; font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 860px) {
  .st-bars { gap: 2px; height: 30px; }
  .si { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
.nav a:not(.btn) { white-space: nowrap; }
/* Details panel on phones: full width, status pill clear of the close button */
@media (max-width: 700px) {
  .sheet { width: 100vw; max-width: 100vw; }
}
@media (max-width: 640px) {
  .sk-head .pill { justify-self: start; margin-top: 0; }
}
/* ---------- 31. Details panel: uptime (replaces the Status page) ---------- */
.sk-status { display: grid; gap: 12px; padding: 20px 22px; border-radius: var(--r-lg); background: rgb(var(--tint) / .03); border: 1px solid var(--glass-edge); box-shadow: var(--glass-top); }
.sk-up-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sk-up-head h3 { font-size: 13px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sk-up-head p { margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.sk-up-pct { font-size: 30px; font-weight: 720; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.sk-up-note { padding: 10px 14px; border-radius: var(--r-md); font-size: 14px; color: var(--ink); background: rgb(var(--unknown-rgb) / .1); border: 1px solid rgb(var(--unknown-rgb) / .25); }
.sk-up-note[data-state="offline"] { background: rgb(var(--danger-rgb) / .08); border-color: rgb(var(--danger-rgb) / .25); }
.sk-up-note[data-state="restarting"] { background: rgb(var(--lantern-rgb) / .1); border-color: rgb(var(--lantern-rgb) / .3); }
.sk-status .st-bars { height: 34px; }
.sk-status.is-first .st-bar { animation: bar-up .6s var(--ease-out) both; animation-delay: calc(.25s + var(--i, 0) * 14ms); }
.sk-up-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.sk-up-facts div { display: grid; gap: 1px; padding: 11px 13px; border-radius: var(--r-md); background: rgb(var(--tint) / .03); border: 1px solid var(--line); }
.sk-up-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sk-up-facts dd { font-size: 16px; font-weight: 660; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.sk-up-facts small { font-size: 12.5px; color: var(--ink-3); }
.sk-inc { display: grid; gap: 6px; }
.sk-inc .si { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: var(--r-md); }
.sk-inc .si-lv { margin-bottom: 4px; }
.sk-up-foot { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 700px) {
  .sk-up-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-inc .si { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sk-status { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-status .st-bar { animation: none; }
}
/* ---------- 32. Rules: "What changed" log ---------- */
.tag--upd { color: var(--moon); background: rgb(var(--moon-rgb) / .12); border: 1px solid rgb(var(--moon-rgb) / .3); }
.chg-filter { margin-bottom: 18px; }
.chg-filter[hidden] { display: none; }
.chg-log .um-h { margin-left: 92px; }
.chg-time { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.chg-sum { margin-top: 4px; font-size: 14px; color: var(--ink-3); }
.chg-items { display: grid; gap: 8px; margin-top: 14px; }
.chg-item { padding: 12px 14px; border-radius: var(--r-md); background: rgb(var(--tint) / .03); border: 1px solid var(--line); }
.chg-item[hidden] { display: none; }
.chg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.chg-k { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.chg-k--add { color: var(--online); background: rgb(var(--online-rgb) / .12); }
.chg-k--del { color: var(--danger); background: rgb(var(--danger-rgb) / .1); }
.chg-k--upd { color: var(--moon); background: rgb(var(--moon-rgb) / .12); }
.chg-k--oth { color: var(--lantern); background: rgb(var(--lantern-rgb) / .12); }
.chg-rule { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); }
.chg-rule b { font-weight: 640; }
.chg-rule small { font-size: 12.5px; color: var(--ink-3); }
a.chg-rule:hover b { text-decoration: underline; text-underline-offset: 3px; }
.chg-rule.is-gone { color: var(--ink-3); }
.chg-id { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.chg-item > p { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
.chg-item .chg-sub { font-size: 13px; color: var(--ink-3); }
.chg-sub a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.chg-fields { display: grid; gap: 6px; margin-top: 8px; }
.chg-fields li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.chg-f { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.chg-f--add { color: var(--online); }
.chg-f--del { color: var(--danger); }
.chg-log ins { text-decoration: none; color: var(--ink); background: rgb(var(--online-rgb) / .16); border-radius: 4px; padding: 0 2px; }
.chg-log del { color: var(--ink-3); text-decoration-color: rgb(var(--danger-rgb) / .7); background: rgb(var(--danger-rgb) / .07); border-radius: 4px; padding: 0 2px; }
.chg-empty { padding: 22px; text-align: center; font-size: 14.5px; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.chg-log .ue-card { min-width: 0; }
@media (max-width: 560px) {
  .chg-log .um-h { margin-left: 0; }
  .chg-fields li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .chg-time { margin-left: 0; width: 100%; }
}
.chg-to { color: var(--ink-3); margin: 0 2px; }
/* ---------- 33. Motion layer v2 (2026-10) ----------
   Research-led upgrades, all progressive and all off for reduced motion:
   · real spring curves (CSS linear()), so presses and pops settle naturally
   · Details panel morphs out of the card you clicked (View Transitions)
   · direction-aware page transitions (forward slides left, back slides right)
   · scroll-linked effects on the compositor (animation-timeline), no JS jank
   · ambient light that takes on the colour of the server you're looking at */
/* Spring curves, sampled from a damped spring. Older browsers keep the cubic-bezier fallbacks. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
      --spring-soft: linear(0, 0.02, 0.068, 0.134, 0.209, 0.286, 0.364, 0.437, 0.506, 0.569, 0.626, 0.677, 0.723, 0.762, 0.797, 0.827, 0.853, 0.876, 0.895, 0.911, 0.925, 0.937, 0.947, 0.956, 0.963, 0.969, 0.974, 0.979, 0.982, 0.985, 0.988, 0.99, 0.992, 0.993, 0.994, 0.995, 0.996, 0.997, 0.997, 0.998, 1);
      --spring-snappy: linear(0, 0.019, 0.067, 0.135, 0.213, 0.297, 0.382, 0.463, 0.54, 0.611, 0.676, 0.733, 0.782, 0.826, 0.862, 0.893, 0.919, 0.94, 0.957, 0.971, 0.981, 0.99, 0.996, 1, 1.004, 1.006, 1.007, 1.008, 1.008, 1.008, 1.007, 1.007, 1.006, 1.006, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1);
      --spring-bouncy: linear(0, 0.027, 0.098, 0.198, 0.316, 0.441, 0.564, 0.681, 0.786, 0.876, 0.951, 1.011, 1.055, 1.086, 1.106, 1.115, 1.115, 1.11, 1.1, 1.088, 1.074, 1.059, 1.045, 1.032, 1.021, 1.011, 1.003, 0.997, 0.992, 0.989, 0.987, 0.987, 0.987, 0.988, 0.989, 0.99, 0.992, 0.994, 0.995, 0.997, 1);
      --ease-spring: var(--spring-bouncy);
    }
  .btn { transition: transform .55s var(--spring-snappy), background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow .45s var(--ease-out), border-color var(--t) var(--ease), outline-offset .2s var(--ease); }
  .btn:active { transform: scale(.96); transition-duration: 90ms; transition-timing-function: var(--ease-out); }
  .copy-btn { transition: transform .62s cubic-bezier(.22, 1, .36, 1), background .68s cubic-bezier(.22, 1, .36, 1), color .68s cubic-bezier(.22, 1, .36, 1), box-shadow .68s cubic-bezier(.22, 1, .36, 1); }
  .copy-btn:active { transform: scale(.94); transition-duration: 90ms; }
  .toast { transition: transform .7s var(--spring-snappy), opacity .3s var(--ease); }
  .rx-pm, .sheet-close, .uf, .mini, .tag, .chg-k { transition-timing-function: var(--spring-snappy); }
  .nav-ind { transition: transform .6s var(--spring-snappy), width .6s var(--spring-snappy), opacity .3s var(--ease); }
  .sheet { transition: opacity .35s var(--ease), transform .75s var(--spring-soft), overlay .75s allow-discrete, display .75s allow-discrete; }
  .tag--new, .tag--upd, .ue-tag--new { animation: pop-spring .7s var(--spring-bouncy) both; }
  @keyframes pop-spring { from { transform: scale(.5); opacity: 0; } }
}
/* Details panel: morph from the card's artwork */
.sheet.is-morphing, .sheet.is-morphing::backdrop { transition: none !important; }
.sheet.is-morphing .sheet-hero img { animation: none; }
.sheet.is-morphing .sheet-body > * { animation-delay: calc(.12s + var(--k, 0) * .05s); }
::view-transition-group(sk-art) { animation-duration: .62s; animation-timing-function: var(--spring-soft, var(--ease-out)); z-index: 3; }
::view-transition-image-pair(sk-art) { overflow: hidden; border-radius: var(--r-md); }
::view-transition-old(sk-art), ::view-transition-new(sk-art) { height: 100%; width: 100%; object-fit: cover; animation-duration: .4s; }
.vt-morph::view-transition-group(root) { animation-duration: .45s; }
.vt-morph::view-transition-old(root) { animation: vt-fade-out .3s var(--ease) both; }
.vt-morph::view-transition-new(root) { animation: vt-fade-in .45s var(--ease-out) both; }
.vt-close::view-transition-group(sk-art) { animation-duration: .5s; }
.vt-morph .site-header { view-transition-name: none; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
/* Phones: drag the sheet down to dismiss */
@media (max-width: 700px) {
  .sheet[open] { transform: translateY(var(--drag, 0px)); }
  .sheet.is-dragging { transition: none !important; }
  .sheet.is-flung { transition-duration: .25s, .35s, .35s, .35s !important; }
  .sheet .sheet-hero { touch-action: pan-x; }
  .sheet-handle { top: 0; width: 64px; height: 32px; margin-left: -32px; background: transparent; touch-action: none; cursor: grab; }
  .sheet-handle::after { content: ""; position: absolute; top: 8px; left: 12px; right: 12px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .78); box-shadow: 0 1px 4px rgb(0 0 0 / .55); transition: background-color .3s var(--ease); }
  .sheet.is-dragging .sheet-handle::after { background: #fff; }
}
/* Page to page: slide in the direction you're travelling, header stays put */
html:active-view-transition-type(forward)::view-transition-old(root) { animation: vt-slide-out-l .4s var(--ease-out) both; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation: vt-slide-in-r .5s var(--ease-out) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation: vt-slide-out-r .4s var(--ease-out) both; }
html:active-view-transition-type(back)::view-transition-new(root) { animation: vt-slide-in-l .5s var(--ease-out) both; }
@keyframes vt-slide-out-l { to { transform: translateX(-24px); } }
@keyframes vt-slide-in-r { from { opacity: 0; transform: translateX(40px); } }
@keyframes vt-slide-out-r { to { transform: translateX(24px); } }
@keyframes vt-slide-in-l { from { opacity: 0; transform: translateX(-40px); } }
/* Ambient light follows the server you're looking at */
@property --tint-accent { syntax: "<color>"; inherits: true; initial-value: transparent; }
:root { transition: --tint-accent 1.2s var(--ease); }
.atmo::before { transition: opacity 1.2s var(--ease); }
.is-tinted .atmo { --_t: color-mix(in srgb, var(--tint-accent) 22%, transparent); }
.atmo { background-image: radial-gradient(60% 50% at 50% 35%, var(--_t, transparent), transparent 70%), radial-gradient(30% 24% at 15% 20%, rgba(88, 101, 242, .10), transparent 70%), radial-gradient(28% 26% at 85% 70%, rgb(var(--lantern-rgb) / .07), transparent 70%); }
@property --_t { syntax: "<color>"; inherits: false; initial-value: transparent; }
.atmo { transition: --_t 1.2s var(--ease); }
[data-theme="light"] .is-tinted .atmo { --_t: color-mix(in srgb, var(--tint-accent) 14%, transparent); }
/* Scroll-linked motion on the compositor. Browsers without support keep the JS versions. */
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: sk-grow linear both; animation-timeline: scroll(root block); transform: none; scale: 0 1; transform-origin: 0 50%; }
  @keyframes sk-grow { to { scale: 1 1; } }
  .server-art img { animation: sk-art-drift linear both; animation-timeline: view(block); animation-range: cover 0% cover 100%; }
  @keyframes sk-art-drift { from { translate: 0 -4%; scale: 1.1; } to { translate: 0 4%; scale: 1.1; } }
  .server-art { overflow: hidden; }
  .section-head .h2, .rule-group > header .h3, .chg .ue-card { animation: sk-focus linear both; animation-timeline: view(block); animation-range: entry 0% entry 70%; }
  @keyframes sk-focus { from { opacity: .25; filter: blur(5px); translate: 0 14px; } }
  .site-footer > .wrap, .legal { animation: sk-rise linear both; animation-timeline: view(block); animation-range: entry 0% entry 80%; }
  @keyframes sk-rise { from { opacity: 0; translate: 0 30px; } }
}
/* Uptime bars: tooltip springs up, bars grow on hover */
.st-bar::after { transition: opacity .2s var(--ease), transform .45s var(--spring-snappy, var(--ease-out)); }
/* Scrollbars match the theme */
html { scrollbar-color: rgb(var(--tint) / .22) transparent; }
.sheet-scroll, .mc-results { scrollbar-width: thin; scrollbar-color: rgb(var(--tint) / .2) transparent; }
/* Focus rings glide into place */
:focus-visible { outline-offset: 4px; transition: outline-offset .35s var(--spring-snappy, var(--ease-out)), outline-color .2s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .server-art img, .section-head .h2, .rule-group > header .h3, .chg .ue-card, .site-footer > .wrap, .legal, .tag--new, .tag--upd, .ue-tag--new { animation: none !important; }
  .scroll-progress { animation: none !important; }
  :root, .atmo { transition: none !important; }
}
.glass-lite .server-art img, .glass-lite .section-head .h2 { animation: none !important; }
[data-theme="light"] .atmo { background-image: radial-gradient(60% 50% at 50% 35%, var(--_t, transparent), transparent 70%), radial-gradient(34% 28% at 12% 18%, rgba(120, 140, 255, .16), transparent 70%), radial-gradient(30% 28% at 88% 64%, rgba(255, 176, 102, .18), transparent 70%), radial-gradient(36% 30% at 40% 98%, rgba(120, 214, 200, .14), transparent 70%); }
/* ==========================================================================
   34. Premium system (2026-10)
   Restraint over effects: two typefaces, one type scale, three colours with a job
   each, four surface levels, four corner sizes, an 8px spacing grid, one button
   size system. This layer is last in the file, so it wins over earlier rules.
   ========================================================================== */
/* ----- 1. Typefaces (bundled, latin subset, variable weight) -----
   Inter for everything; EB Garamond italic only for accent words.
   The fallbacks are metric-matched so text doesn't jump when the fonts arrive. */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-italic-latin.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 107.4%; ascent-override: 90%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Garamond Fallback"; src: local("Georgia"), local("Times New Roman"); font-style: italic; size-adjust: 92%; ascent-override: 98%; descent-override: 30%; }
:root {
  --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "EB Garamond", "Garamond Fallback", Georgia, serif;

  /* Type scale: 1.25 ratio from 16px */
  --fs-xs: .8rem;      /* 12.8  labels */
  --fs-sm: .875rem;    /* 14    meta */
  --fs-base: 1rem;     /* 16    body */
  --fs-lg: 1.25rem;    /* 20    lede */
  --fs-xl: clamp(1.4rem, 1.2rem + .8vw, 1.95rem);   /* card + group titles */
  --fs-2xl: clamp(2.2rem, 1.6rem + 2.6vw, 3.8rem);  /* section titles */
  --fs-3xl: clamp(3rem, 1.6rem + 6vw, 6.4rem);      /* hero */

  /* Spacing on an 8px grid */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
  --section: clamp(var(--s-7), 10vw, var(--s-8));

  /* Four corner sizes */
  --r-xs: 10px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 24px; --r-pill: 999px;
}
html { font-family: var(--font); font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font); font-size: var(--fs-base); line-height: 1.6; letter-spacing: -.011em; font-feature-settings: "cv11", "ss01", "ss03"; }
.h1 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.045em; line-height: .98; }
.h2 { font-size: var(--fs-2xl); font-weight: 680; letter-spacing: -.04em; line-height: 1.02; }
.h3 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.028em; line-height: 1.15; }
.h4 { font-size: var(--fs-lg); font-weight: 620; letter-spacing: -.02em; line-height: 1.3; }
.lede { font-size: var(--fs-lg); line-height: 1.55; letter-spacing: -.015em; }
.eyebrow, .server-tagline, .rx-k, .sheet-body h3, .sk-stat .k, .sk-tile .k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; }
.eyebrow::before { display: none; }
.num, .n, code, .sv-count, .sk-count b { font-feature-settings: "tnum", "cv11"; font-variant-numeric: tabular-nums; }
code { font-family: var(--mono); letter-spacing: 0; }
/* Accent words: one serif italic, one colour */
.glint { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--lantern); padding-right: .02em; }
.h2 .glint, .h1 .glint { font-size: 1.12em; line-height: .9; }
/* ----- 3. Colour: gold (brand), blue (secondary), status colours only for status ----- */
:root, [data-theme="dark"] { --glint: none; }
[data-theme="light"] { --lantern: #b56a12; --lantern-rgb: 181 106 18; }
[data-theme="light"] :is(.hero, .page-hero, .hc-hero, .nf, .server-art, .sheet-hero, .dc-window) { --lantern: #ffc47a; --lantern-rgb: 255 196 122; }
.atmo { animation: none !important; filter: none !important; }
.atmo::before { animation: none !important; opacity: .7;
  background: radial-gradient(50% 40% at 85% 0%, rgb(var(--moon-rgb) / .10), transparent 70%),
              radial-gradient(45% 40% at 5% 45%, rgb(var(--lantern-rgb) / .06), transparent 70%); }
.atmo { background-image: radial-gradient(60% 50% at 50% 35%, var(--_t, transparent), transparent 70%); }
[data-theme="light"] .atmo { background-image: radial-gradient(60% 50% at 50% 35%, var(--_t, transparent), transparent 70%), radial-gradient(40% 30% at 12% 15%, rgb(var(--moon-rgb) / .35), transparent 70%); }
.scroll-progress { background: var(--lantern); box-shadow: none; opacity: .9; }
/* ----- 4. Depth: four solid surface levels; glass only for things that float ----- */
:root, [data-theme="dark"] {
  --l0: #08090c;   /* page */
  --l1: #111318;   /* cards */
  --l2: #171a21;   /* raised: hovered cards, inputs, inner panels */
  --l3: #1f232c;   /* floating: menus, tooltips */
  --page: #08090c; --bg: #08090c; --card-rgb: 17 19 24; --sheet-rgb: 17 19 24; --panel: 17 19 24;
  --ink: #f3f4f6; --ink-2: #b4bac5; --ink-3: #868d9a;
  --line: rgba(255, 255, 255, .06); --line-2: rgba(255, 255, 255, .1); --line-3: rgba(255, 255, 255, .18);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .06);
}
[data-theme="light"] {
  --l0: #f4f5f8; --l1: #ffffff; --l2: #f7f8fb; --l3: #ffffff;
  --page: #f4f5f8; --bg: #f4f5f8; --card-rgb: 255 255 255; --sheet-rgb: 255 255 255;
  --ink: #0e1116; --ink-2: #444b57; --ink-3: #6b7280;
  --line: rgba(14, 17, 22, .07); --line-2: rgba(14, 17, 22, .11); --line-3: rgba(14, 17, 22, .2);
  --edge: 0 1px 2px rgba(14, 17, 22, .04), 0 8px 24px -12px rgba(14, 17, 22, .12);
}
body { background: var(--l0); }
/* Regular content cards: solid, quiet edge, no blur */
.surface, .server, .sv-status, .sk-live, .sk-status, .hc-topic, .rule-big, .act, .limits, .modcheck, .ue-card, .chg-item, .rtools, .rx-list-wrap, .hc-list, .enf-steps li {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.surface, .server, .rule-big, .act, .ue-card, .rx-list-wrap, .hc-list, .limits, .modcheck {
  background: var(--l1); border: 1px solid var(--line); box-shadow: var(--edge);
}
.surface::after, .server::after, .rule-big::before { display: none !important; }
.server::before { display: none !important; }
.sv-status, .sk-live, .sk-status, .chg-item, .ex, .sk-up-facts div, .limits-grid div, .sk-tile, .sk-stat, .ip, .field input, .mc-row {
  background: var(--l2); border-color: var(--line);
}
.rtools { background: color-mix(in srgb, var(--l1) 88%, transparent); -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; }
/* Hover lifts a card one level */
@media (hover: hover) {
  .server:hover, .rule-big:hover, .act:hover, .hc-topic:hover { background: var(--l2); border-color: var(--line-2); }
}
/* Floating layers keep the frosted glass */
.site-header .bar, .sheet, .toast, .theme-menu, .launch-check {
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
}
.sheet { background: color-mix(in srgb, var(--l1) 94%, transparent); border: 1px solid var(--line-2); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 120px -30px rgba(0, 0, 0, .7); }
[data-theme="light"] .sheet { box-shadow: 0 40px 120px -30px rgba(14, 17, 22, .3); }
.atmo::after { opacity: .025; }
/* ----- 5. One button system: 48 regular, 40 small, 56 large ----- */
.btn { --h: 48px; height: var(--h); padding: 0 var(--s-3); border-radius: var(--r-pill); font-size: 15px; font-weight: 600; letter-spacing: -.012em; gap: 10px; }
.btn--sm { --h: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { --h: 56px; padding: 0 30px; font-size: 16px; }
.btn--primary { background: var(--ink); color: var(--l0); box-shadow: none; }
.btn--primary:hover { box-shadow: 0 8px 24px -10px rgb(var(--lantern-rgb) / .55); }
.btn--glass, .btn--ghost { background: var(--l2); border: 1px solid var(--line-2); box-shadow: none; }
.btn--glass:hover, .btn--ghost:hover { background: var(--l3); border-color: var(--line-3); }
.btn::after { display: none; }
.copy-btn { border-radius: var(--r-pill); }
/* ----- 2. Server cards: artwork, name, status, Copy IP. Everything else is in Details. ----- */
.server { border-radius: var(--r-lg); overflow: hidden; transform-style: flat; }
.server:hover, .js .server[data-reveal].is-in:hover { transform: translateY(-4px); }
.server-art { aspect-ratio: 16 / 9; background: rgb(var(--card-rgb)); }
.server-art::after { background: linear-gradient(180deg, rgb(0 0 0 / .25) 0%, transparent 30%, transparent 45%, rgb(var(--card-rgb) / .7) 78%, rgb(var(--card-rgb)) 88%); }
.server-body { padding: 0 var(--s-3) var(--s-3); gap: var(--s-2); }
.sv-head { align-items: center; margin-top: calc(var(--s-5) * -1); position: relative; z-index: 2; }
.sv-icon { display: none; }
.sv-title { display: grid; gap: 2px; }
.server-name { font-size: var(--fs-xl); font-weight: 680; letter-spacing: -.03em; margin: 0; }
.server-tagline { order: 2; font-size: var(--fs-sm); font-weight: 450; letter-spacing: -.005em; text-transform: none; color: var(--ink-3); }
.sv-info { height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13.5px; background: var(--l2); border: 1px solid var(--line-2); }
.sv-status { padding: var(--s-2) 18px; border-radius: var(--r-md); }
.sv-status::before, .sv-status::after { display: none; }
.sv-top { align-items: center; }
.sv-count .n { font-size: 34px; font-weight: 700; letter-spacing: -.04em; }
.sv-sub:empty { display: none; }
.sv-sub { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--ink-3); }
.sv-ip .ip { border-radius: var(--r-pill); padding: 6px 6px 6px 18px; }
.servers-grid { gap: var(--s-3); }
/* ----- 6. Fewer effects ----- */
.server, .rule-big, .act { --rx: 0deg !important; --ry: 0deg !important; }
.server-badge { background: rgb(0 0 0 / .45); border: 1px solid rgba(255, 255, 255, .14); color: #fff; }
/* ----- 7. Hero: one full-screen moment ----- */
.hero { min-height: 100svh; align-items: center; }
.hero-content { padding-top: calc(var(--header-h) + var(--s-5)); padding-bottom: var(--s-7); display: grid; justify-items: start; }
.hero-shade { background: linear-gradient(90deg, rgb(4 6 10 / .82) 0%, rgb(4 6 10 / .55) 45%, rgb(4 6 10 / .1) 80%), linear-gradient(180deg, rgb(4 6 10 / .4) 0%, transparent 25%, transparent 70%, var(--page) 100%); }
.hero-content .eyebrow { margin-bottom: var(--s-3); color: rgb(255 255 255 / .72); }
.hero-title { display: grid; gap: var(--s-1); margin: 0; color: #fff; }
.ht-brand { font-size: var(--fs-3xl); font-weight: 720; letter-spacing: -.055em; line-height: .92; }
.ht-line { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem); letter-spacing: -.015em; line-height: 1.05; color: var(--lantern); }
.hero-live { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: var(--s-4); font-size: var(--fs-lg); color: rgb(255 255 255 / .82); }
.hero-live b { color: #fff; font-weight: 700; }
.hero-live .dot { width: 10px; height: 10px; }
.hero-live-s { font-size: var(--fs-sm); color: rgb(255 255 255 / .55); }
.hero-live-s:not(:empty)::before { content: "·"; margin-right: 10px; }
.hero-live[data-state="loading"] [data-hero-live-t] { opacity: .7; }
.hero-connect { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.hero .connect { background: rgb(10 12 16 / .55); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-pill); padding: 6px 6px 6px 22px; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.hero .connect .copy-btn { --h: 48px; min-width: 128px; }
.hero-more { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: rgb(255 255 255 / .82); transition: color var(--t) var(--ease); }
.hero-more:hover { color: #fff; }
.hero-more svg { width: 16px; height: 16px; transition: transform .5s var(--spring-snappy, var(--ease-out)); }
.hero-more:hover svg { transform: translateY(3px); }
@media (max-width: 640px) {
  .hero-shade { background: linear-gradient(180deg, rgb(4 6 10 / .55) 0%, rgb(4 6 10 / .7) 60%, var(--page) 100%); }
  .hero .connect { width: 100%; }
  .hero-live { font-size: var(--fs-base); }
}
/* ----- 8. Spacing rhythm ----- */
.section-head { margin-bottom: var(--s-5); }
.rule-group { padding-bottom: var(--s-6); }
.rule-group > header { margin-bottom: var(--s-3); }
.sv-top { display: flex !important; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: var(--s-2); min-height: 48px; }
.sv-heads { margin: 0 !important; }
.sv-heads-row { flex-wrap: nowrap; padding-left: 8px; }
.sv-big { flex: 0 0 auto; }
.sv-count { margin: 0; }
.sv-count .n { line-height: 1; }
.server-tagline { color: rgb(255 255 255 / .7); }
[data-theme="light"] .server-tagline { color: var(--ink-3); }
[data-theme="light"] .preview-note { color: var(--ink); background: rgb(255 255 255 / .9); }
.sv-heads-row { align-items: center !important; height: 34px; }
.sv-heads-row .sv-head, .sv-heads-row .sv-more-n { margin-top: 0 !important; transform: none; align-self: center; }
.hc-topic, .hc-status { background: var(--l1); border: 1px solid var(--line); box-shadow: var(--edge); }
@media (max-width: 640px) {
  .hero-live-s { flex-basis: 100%; }
  .hero-live-s:not(:empty)::before { display: none; }
}
/* ==========================================================================
   35. Usability & finish pass (2026-10)
   ========================================================================== */
/* ----- 11. Readability: secondary text one step stronger ----- */
:root, [data-theme="dark"] { --ink-3: #9aa1ad; --ink-2: #c0c6cf; }
[data-theme="light"] { --ink-3: #5b6270; --ink-2: #3c4350; }
.server-tagline, .server-best { color: rgb(255 255 255 / .82); }
/* ----- 1. Player heads: a soft silhouette while loading or if a head can't load ----- */
:root { --head-ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23272b33'/%3E%3Crect x='8' y='7' width='16' height='16' rx='2' fill='%23434955'/%3E%3Crect x='11' y='13' width='3' height='3' fill='%23272b33'/%3E%3Crect x='18' y='13' width='3' height='3' fill='%23272b33'/%3E%3Crect x='13' y='19' width='6' height='2' fill='%23272b33'/%3E%3C/svg%3E"); }
[data-theme="light"] { --head-ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e6e9ef'/%3E%3Crect x='8' y='7' width='16' height='16' rx='2' fill='%23c9ced8'/%3E%3Crect x='11' y='13' width='3' height='3' fill='%23e6e9ef'/%3E%3Crect x='18' y='13' width='3' height='3' fill='%23e6e9ef'/%3E%3Crect x='13' y='19' width='6' height='2' fill='%23e6e9ef'/%3E%3C/svg%3E"); }
img[data-head], .av, .av--ghost { background: var(--head-ghost) center / cover no-repeat; image-rendering: pixelated; color: transparent !important; font-size: 0 !important; }
img[data-head].is-loaded { animation: head-fade .35s var(--ease) both; }
@keyframes head-fade { from { opacity: .3; } }
.dc-faces:empty { display: none; }
/* ----- 2. Loading skeletons instead of "Checking…" and "–" ----- */
@keyframes skel { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
.sk-skel { display: inline-block; border-radius: 6px; color: transparent !important; background: linear-gradient(100deg, rgb(var(--tint) / .06) 35%, rgb(var(--tint) / .14) 50%, rgb(var(--tint) / .06) 65%) 0 0 / 250% 100%; animation: skel 1.4s ease-in-out infinite; }
.sk-skel { width: 56px; height: .9em; vertical-align: -1px; }
.sv-status[data-state="loading"] .sv-word { visibility: hidden; position: relative; }
.sv-status[data-state="loading"] .sv-big::before { content: ""; grid-area: 1 / 1; align-self: center; width: 112px; height: 34px; border-radius: 10px; background: linear-gradient(100deg, rgb(var(--tint) / .06) 35%, rgb(var(--tint) / .14) 50%, rgb(var(--tint) / .06) 65%) 0 0 / 250% 100%; animation: skel 1.4s ease-in-out infinite; }
.sv-status[data-state="loading"] .sv-heads::before { content: ""; display: block; width: 120px; height: 30px; border-radius: 999px; background: linear-gradient(100deg, rgb(var(--tint) / .06) 35%, rgb(var(--tint) / .14) 50%, rgb(var(--tint) / .06) 65%) 0 0 / 250% 100%; animation: skel 1.4s ease-in-out infinite; }
.sv-status[data-state="loading"] .sv-heads:empty { display: block; }
.hero-live[data-state="loading"] [data-hero-live-t] { color: transparent; border-radius: 8px; background: linear-gradient(100deg, rgb(255 255 255 / .08) 35%, rgb(255 255 255 / .2) 50%, rgb(255 255 255 / .08) 65%) 0 0 / 250% 100%; animation: skel 1.4s ease-in-out infinite; }
.hero-live[data-state="loading"] .dot { opacity: .4; }
[data-hc-status][data-state="loading"] [data-hc-status-t] { color: transparent; border-radius: 6px; background: linear-gradient(100deg, rgb(var(--tint) / .06) 35%, rgb(var(--tint) / .14) 50%, rgb(var(--tint) / .06) 65%) 0 0 / 250% 100%; animation: skel 1.4s ease-in-out infinite; }
/* ----- 3. Footer ----- */
.site-footer { margin-top: var(--s-7); border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgb(var(--tint) / .015)); }
.sf-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--s-3) var(--s-2); padding: var(--s-3) 0 var(--s-2); }
.sf-brand { display: grid; align-content: start; gap: var(--s-1); }
.sf-brand p { max-width: 34ch; font-size: var(--fs-sm); color: var(--ink-3); }
.sf-ip { display: grid; gap: 6px; max-width: 360px; margin-top: var(--s-1); }
.sf-ip-k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sf-ip .ip { padding: 5px 5px 5px 16px; border-radius: var(--r-pill); }
.sf-ip .ip code { font-size: 13.5px; }
.sf-ip .copy-btn { --h: 38px; min-width: 106px; font-size: 13.5px; }
.sf-col h2 { margin-bottom: var(--s-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sf-col ul { display: grid; gap: 6px; }
.sf-col a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); transition: color var(--t) var(--ease); }
.sf-col a:hover { color: var(--ink); }
.sf-col a svg { width: 12px; height: 12px; opacity: .6; }
.sf-status a { display: grid; grid-template-columns: 8px auto 1fr; align-items: center; gap: 10px; width: 100%; }
.sf-status small { justify-self: end; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.site-footer .legal { width: auto; margin: 0; padding: var(--s-2) 0 var(--s-3); text-align: left; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .sf-grid { grid-template-columns: 1fr 1fr; }
  .sf-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .sf-grid { grid-template-columns: 1fr; gap: var(--s-2); padding-top: var(--s-3); }
  .site-footer .legal { text-align: center; }
}
/* ----- 4. Details tabs + sticky bar ----- */
.sk-tabs { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: var(--s-2); margin: 0 calc(clamp(20px, 4vw, 44px) * -1); padding: 10px clamp(20px, 4vw, 44px); background: color-mix(in srgb, var(--l1) 88%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.sheet.is-stuck .sk-tabs { border-bottom-color: var(--line); }
.sk-tabs-row { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--l2); border: 1px solid var(--line); }
.sk-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--ink-3); transition: color .3s var(--ease); }
.sk-tab:hover { color: var(--ink); }
.sk-tab[aria-selected="true"] { color: var(--ink); }
.sk-tab:focus-visible { outline-offset: 2px; }
.sk-tab-n:empty { display: none; }
.sk-tab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; color: var(--online); background: rgb(var(--online-rgb) / .14); }
.sk-tab-ink { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: var(--r-pill); background: var(--l3); border: 1px solid var(--line-2); box-shadow: 0 2px 8px -4px rgb(0 0 0 / .4); transition: transform .5s var(--spring-snappy, var(--ease-out)), width .5s var(--spring-snappy, var(--ease-out)); }
[data-theme="light"] .sk-tab-ink { background: #fff; }
.sk-mini { display: flex; align-items: center; gap: 10px; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; transition: max-width .45s var(--ease-out), opacity .3s var(--ease); }
.sk-mini b { font-size: 15px; font-weight: 680; letter-spacing: -.02em; }
.sk-mini .copy-btn { --h: 34px; min-width: 0; padding: 0 12px; font-size: 13px; }
.sheet.is-stuck .sk-mini { max-width: 340px; opacity: 1; }
.sheet.is-stuck .sk-tabs-row { margin-left: auto; }
.sk-panel { display: grid; gap: var(--s-2); padding-top: var(--s-2); min-height: 340px; }
.sk-panel[hidden] { display: none; }
.sk-panel.is-in > * { animation: fade-up .45s var(--ease-out) both; }
.sk-panel.is-in > *:nth-child(2) { animation-delay: .05s; }
.sk-panel.is-in > *:nth-child(3) { animation-delay: .1s; }
.sk-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); }
.sk-g { display: grid; gap: 2px; padding: 14px 16px; text-align: left; border-radius: var(--r-md); background: var(--l2); border: 1px solid var(--line); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), transform .45s var(--spring-snappy, var(--ease-out)); }
.sk-g:hover { border-color: var(--line-3); transform: translateY(-2px); }
.sk-g .k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sk-g b { font-size: 22px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sk-g b i { margin-left: 4px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.sk-g small { font-size: 12.5px; color: var(--ink-3); }
.sk-new { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: var(--fs-sm); color: var(--ink-3); }
.sk-new b { color: var(--ink); font-weight: 620; }
.sk-new svg { width: 14px; height: 14px; transition: transform .4s var(--ease-out); }
.sk-new:hover svg { transform: translateX(3px); }
.sk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 640px) {
  .sk-glance { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sk-glance .sk-g:first-child { grid-column: 1 / -1; }
  .sk-tab { padding: 0 12px; }
  .sheet.is-stuck .sk-mini { max-width: 0; opacity: 0; }
  .sheet.is-stuck .sk-tabs-row { margin-left: 0; }
}
/* ----- 5. "Best for" line on cards ----- */
.server-best { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 550; letter-spacing: -.005em; }
.server-best::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
[data-theme="light"] .server-best { color: rgb(255 255 255 / .9); }
/* ----- 6. How to join strip ----- */
.howto { counter-reset: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); margin-top: var(--s-3); padding: 6px; border-radius: var(--r-lg); background: var(--l1); border: 1px solid var(--line); }
.howto a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; border-radius: calc(var(--r-lg) - 6px); transition: background-color var(--t) var(--ease); }
.howto a:hover { background: var(--l2); }
.howto-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--lantern); background: rgb(var(--lantern-rgb) / .12); border: 1px solid rgb(var(--lantern-rgb) / .25); }
.howto-t { display: grid; gap: 1px; }
.howto-t b { font-size: 15px; font-weight: 640; letter-spacing: -.015em; }
.howto-t small { font-size: 13px; color: var(--ink-3); }
.howto li + li a { position: relative; }
@media (min-width: 761px) {
  .howto li + li { border-left: 1px solid var(--line); padding-left: var(--s-1); }
}
@media (max-width: 760px) {
  .howto { grid-template-columns: minmax(0, 1fr); }
}
/* ----- 7. Quick search (Ctrl K / the 404 page button; no header button) ----- */
.qs kbd, .nf-search kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; font-family: var(--font); font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: rgb(var(--tint) / .06); border: 1px solid var(--line-2); }
.qs { width: min(640px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 120px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg); color: var(--ink); background: color-mix(in srgb, var(--l1) 94%, transparent); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 40px 120px -30px rgb(0 0 0 / .7); overflow: hidden; }
.qs[open] { animation: qs-in .32s var(--spring-snappy, var(--ease-out)) both; }
.qs.is-closing { animation: qs-out .14s var(--ease) both; }
.qs::backdrop { background: rgb(var(--abyss) / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-theme="light"] .qs::backdrop { background: rgb(230 234 242 / .6); }
@keyframes qs-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes qs-out { to { opacity: 0; transform: translateY(-6px) scale(.99); } }
.qs-box { display: flex; flex-direction: column; max-height: inherit; }
.qs-field { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 60px; border-bottom: 1px solid var(--line); }
.qs-field svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.qs-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 17px; }
.qs-field input::placeholder { color: var(--ink-3); }
.qs-list { flex: 1; overflow-y: auto; padding: 8px; scrollbar-width: thin; }
.qs-g { padding: 10px 10px 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.qs-i { display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; }
.qs-i[aria-selected="true"] { background: rgb(var(--tint) / .07); }
.qs-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); color: var(--ink-2); background: var(--l2); border: 1px solid var(--line); }
.qs-ic svg { width: 17px; height: 17px; }
.qs-ic--server, .qs-ic--copy { color: var(--lantern); }
.qs-txt { display: grid; min-width: 0; }
.qs-txt b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-txt small { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs mark { background: none; color: var(--lantern); }
.qs-go { opacity: 0; color: var(--ink-3); transition: opacity .2s var(--ease); }
.qs-go svg { width: 16px; height: 16px; }
.qs-i[aria-selected="true"] .qs-go { opacity: 1; }
.qs-empty { padding: 32px 16px; text-align: center; font-size: 14.5px; color: var(--ink-3); }
.qs-foot { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.qs-foot kbd { min-width: 20px; height: 20px; margin-right: 3px; }
@media (max-width: 640px) {
  .qs { margin-top: 12px; }
  .qs-foot { display: none; }
}
/* ----- 8. Phones: Copy IP bar ----- */
.ip-dock { display: none; }
@media (max-width: 700px) {
  .ip-dock { position: fixed; z-index: 90; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 16px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--l1) 85%, transparent); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -16px rgb(0 0 0 / .6); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); transform: translateY(140%); opacity: 0; transition: transform .55s var(--spring-snappy, var(--ease-out)), opacity .3s var(--ease); }
  .ip-dock.is-on { transform: none; opacity: 1; }
  .ip-dock-t { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .ip-dock-t > span:last-child { display: grid; min-width: 0; line-height: 1.2; }
  .ip-dock b { font-size: 13.5px; font-weight: 650; }
  .ip-dock code { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ip-dock .copy-btn { --h: 42px; flex: none; min-width: 112px; }
  .has-ip-dock .preview-note, .has-ip-dock .to-top { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* ----- 10. Rules: last changed + recently changed ----- */
.rm-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .2); }
.rm-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--s-2); }
.rm-recent[hidden] { display: none; }
.rm-recent-k { margin-right: 4px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rm-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 550; color: var(--ink); background: var(--l1); border: 1px solid var(--line); animation: fade-up .5s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
a.rm-chip:hover { background: var(--l2); border-color: var(--line-3); }
.rm-chip.is-gone { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgb(var(--danger-rgb) / .5); }
/* ----- 12. 404 ----- */
.nf-code { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1; color: var(--lantern); background: none; -webkit-background-clip: border-box; background-clip: border-box; animation: none; }
.nf .h2 { font-size: var(--fs-2xl); color: #fff; }
.nf .lede { color: rgb(255 255 255 / .78); }
.nf-search { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-2); height: 44px; padding: 0 8px 0 16px; border-radius: var(--r-pill); font-size: 14.5px; color: rgb(255 255 255 / .75); background: rgb(10 12 16 / .45); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.nf-search:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.nf-search svg { width: 16px; height: 16px; }
.nf-search kbd { color: rgb(255 255 255 / .6); background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); }
@media (prefers-reduced-motion: reduce) {
  .sk-skel, .sv-status[data-state="loading"] .sv-big::before, .sv-status[data-state="loading"] .sv-heads::before, .hero-live[data-state="loading"] [data-hero-live-t], .rm-chip, .sk-panel.is-in > *, .qs[open] { animation: none !important; }
  .ip-dock, .sk-tab-ink, .sk-mini { transition: none !important; }
}
/* light theme: restore the panel channel that section 34's :root block overrode */
[data-theme="light"] { --panel: 255 255 255; }
[data-theme="light"] :is(.hero, .page-hero, .hc-hero, .nf, .server-art, .sheet-hero, .dc-window) { --panel: 16 21 32; --l1: #111318; --l2: #171a21; --l3: #1f232c; --ink: #f3f4f6; --ink-2: #c0c6cf; --ink-3: #9aa1ad; --line: rgba(255,255,255,.06); --line-2: rgba(255,255,255,.1); --line-3: rgba(255,255,255,.18); }
.dc-faces img { background: var(--head-ghost) center / cover; }
.sk-panel { padding-top: var(--s-1); }
.sheet-body { gap: var(--s-2); }
[data-theme="light"] :is(.hero, .page-hero, .hc-hero, .nf, .server-art, .sheet-hero, .dc-window) { --l0: #08090c; }
.nf .btn--primary { background: #fff; color: #0e1116; }
/* ==========================================================================
   36. Refinement pass (2026-10)
   ========================================================================== */
/* Tighter rhythm between the big sections */
#servers { padding-top: clamp(var(--s-5), 6vw, var(--s-6)); }
#community { padding-top: clamp(var(--s-6), 7vw, var(--s-7)); padding-bottom: clamp(var(--s-5), 6vw, var(--s-6)); }
.site-footer { margin-top: var(--s-3); }
.hero { min-height: min(100svh, 920px); }
/* Light theme: the hero stays a crisp night scene and only fades at the very bottom */
[data-theme="light"] .hero-shade { background: linear-gradient(90deg, rgb(4 6 10 / .8) 0%, rgb(4 6 10 / .5) 45%, rgb(4 6 10 / .08) 80%), linear-gradient(180deg, rgb(4 6 10 / .4) 0%, transparent 25%, transparent 84%, var(--page) 100%); }
@media (max-width: 640px) {
  [data-theme="light"] .hero-shade { background: linear-gradient(180deg, rgb(4 6 10 / .55) 0%, rgb(4 6 10 / .72) 70%, var(--page) 100%); }
}
[data-theme="light"] .page-hero-art::after { background: linear-gradient(180deg, rgb(4 6 10 / .5) 0%, rgb(4 6 10 / .62) 70%, var(--page) 100%) !important; }
/* Discord section: solid card like the rest, no purple bloom underneath */
.dc { background: var(--l1); border: 1px solid var(--line); box-shadow: var(--edge); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dc::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 0% 0%, rgba(88, 101, 242, .12), transparent 70%); }
.dc-channels li { background: var(--l2); border-color: var(--line); }
.dc-ch-ic { color: #aab2ff; background: rgba(88, 101, 242, .14); }
[data-theme="light"] .dc-ch-ic { color: #4f5bd5; }
/* Discord member faces stay invisible until they've actually loaded */
.dc-faces img { opacity: 0; background: none !important; transition: opacity .4s var(--ease); }
.dc-faces img.is-loaded { opacity: 1; }
.dc-faces:not(:has(img.is-loaded)) { display: none; }
/* Server artwork opens Details; the visible button remains the only Details cue. */
.server .server-art { cursor: pointer; }
/* Count box: lighter, so the number leads */
.sv-status { background: transparent !important; border: 1px solid var(--line); padding: 12px 16px; }
.server .sv-status { border-top-color: transparent; box-shadow: none; }
/* Rules search bar: solid with a soft shadow only while pinned */
.rtools { transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.rtools.is-stuck { background: color-mix(in srgb, var(--l1) 96%, transparent); box-shadow: 0 12px 32px -16px rgb(0 0 0 / .55); border-color: var(--line-2); }
[data-theme="light"] .rtools.is-stuck { box-shadow: 0 12px 32px -16px rgb(14 17 22 / .25); }
.rules-short { margin-bottom: var(--s-5) !important; }
[data-theme="light"] .hero-media { -webkit-mask-image: linear-gradient(#000 82%, transparent 100%); mask-image: linear-gradient(#000 82%, transparent 100%); }
[data-theme="light"] .dc { background: var(--l1); border-color: var(--line); box-shadow: var(--edge); }
#servers { padding-bottom: 0; }
#community { padding-top: clamp(var(--s-6), 8vw, var(--s-7)); }
/* Card artwork: drift stays inside the frame (no exposed edge on hover) */
.server-art img, .server:hover .server-art img { transform: none !important; }
@supports (animation-timeline: view()) {
  @keyframes sk-art-drift { from { translate: 0 -3%; scale: 1.12; } to { translate: 0 3%; scale: 1.12; } }
}
[data-theme="light"] .server-best { color: var(--ink-2); }
[data-theme="light"] .server-best::before { box-shadow: none; filter: saturate(1.6) brightness(.75); }
/* Phones: address and Copy IP stay on one row */
@media (max-width: 560px) {
  .ip { flex-wrap: nowrap !important; }
  .ip code { flex: 1 1 auto; min-width: 0; text-align: left !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ip .copy-btn { flex: 0 0 auto !important; --h: 42px; min-width: 104px; }
  .sv-info { height: 34px; padding: 0 12px; }
  .server-best { white-space: nowrap; }
}
[data-theme="light"] .hero-media { -webkit-mask-image: linear-gradient(#000 88%, transparent 100%); mask-image: linear-gradient(#000 88%, transparent 100%); }
/* Light cards: the name sits on white below the art, never on the fade */
[data-theme="light"] .sv-head { margin-top: var(--s-2); }
[data-theme="light"] .server-art::after { background: linear-gradient(180deg, rgb(0 0 0 / .25) 0%, transparent 35%); }
[data-theme="light"] .server-body { margin-top: 0; }
[data-theme="light"] .sv-head { margin-top: var(--s-2) !important; }
.server-art > picture { position: absolute; inset: 0; display: block; }
.server-art > picture img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   37. Polish pass (2026-10)
   ========================================================================== */
/* Home hero: no empty band under the content on large screens */
.hero { min-height: min(92svh, 860px); }
.hero-content { padding-bottom: var(--s-6); }
@media (max-width: 640px) {
  .hero { min-height: 0; }
  .hero-media img { height: 100%; }
}
:root:not([data-theme="light"]) .hero-media { -webkit-mask-image: linear-gradient(#000 72%, transparent 100%); mask-image: linear-gradient(#000 72%, transparent 100%); }
#servers { padding-top: clamp(var(--s-4), 4vw, var(--s-5)); }
/* Support hero: "Popular" label readable on the night artwork in both themes */
.hc-hero .hc-pop-k, [data-theme="light"] .hc-hero .hc-pop-k { color: rgb(255 255 255 / .78); }
/* 404: search pill stays on one line; shortcut hint only where there's a keyboard */
.nf-search { white-space: nowrap; }
@media (hover: none) { .nf-search kbd { display: none; } }
/* Footer: calm status dots (no ping rings in a list of three) */
.sf-status .dot::after { display: none; }
/* Cards: keep the count box and the IP row the same width and rhythm */
.server-body > * { min-width: 0; }

/* ==========================================================================
   38. Details morph v2 + motion fixes (2026-10)
   ========================================================================== */
/* The card frame grows into the panel; artwork, name and address glide on top.
   spring-soft settles without overshoot, which suits something this large. */
::view-transition-group(sk-card) { animation-duration: .58s; animation-timing-function: var(--spring-soft, var(--ease-out)); z-index: 2; }
::view-transition-image-pair(sk-card) { isolation: auto; }
::view-transition-old(sk-card) { animation: vt-fade-out .22s var(--ease) both; }
::view-transition-new(sk-card) { animation: vt-fade-in .34s var(--ease) .08s both; }
::view-transition-old(sk-card), ::view-transition-new(sk-card) { height: 100%; width: 100%; object-fit: fill; overflow: hidden; border-radius: var(--r-lg); }
::view-transition-group(sk-art) { animation-duration: .58s; animation-timing-function: var(--spring-soft, var(--ease-out)); z-index: 3; }
::view-transition-group(sk-name), ::view-transition-group(sk-ip) { animation-duration: .52s; animation-timing-function: var(--spring-soft, var(--ease-out)); z-index: 4; }
::view-transition-old(sk-name), ::view-transition-new(sk-name), ::view-transition-old(sk-ip), ::view-transition-new(sk-ip) { height: 100%; width: auto; object-fit: none; object-position: left center; }
::view-transition-old(sk-name), ::view-transition-old(sk-ip) { animation: vt-fade-out .2s var(--ease) both; }
::view-transition-new(sk-name), ::view-transition-new(sk-ip) { animation: vt-fade-in .3s var(--ease) .12s both; }
.vt-close::view-transition-group(sk-card), .vt-close::view-transition-group(sk-art) { animation-duration: .46s; }
.vt-close::view-transition-old(sk-card) { animation: vt-fade-out .3s var(--ease) both; }
.vt-close::view-transition-new(sk-card) { animation: vt-fade-in .2s var(--ease) both; }
/* Behind the panel, the page dims and softens while the card grows */
.vt-open::view-transition-new(root) { animation: vt-dim-in .5s var(--ease-out) both; }
.vt-close::view-transition-old(root) { animation: vt-dim-out .4s var(--ease) both; }
@keyframes vt-dim-in { from { opacity: .6; filter: blur(0); } }
@keyframes vt-dim-out { to { opacity: .6; } }
/* Panel contents arrive in order, after the panel has opened */
.sheet.is-morphing .sheet-body > * { animation: fade-up .5s var(--ease-out) both; }
.sheet.is-morphing .sheet-body > .sk-head { animation-delay: .18s; }
.sheet.is-morphing .sheet-body > .sk-tabs { animation-delay: .26s; }
.sheet.is-morphing .sheet-body > .sk-panel > * { animation: fade-up .5s var(--ease-out) both; animation-delay: calc(.32s + var(--k, 0) * .05s); }
.sheet.is-morphing .sheet-body > .sk-panel > :nth-child(2) { --k: 1; }
.sheet.is-morphing .sheet-body > .sk-panel > :nth-child(3) { --k: 2; }
.sheet.is-morphing .sheet-body > .sk-panel > :nth-child(4) { --k: 3; }
.sheet.is-morphing .sheet-close { animation: fade-up .4s var(--ease-out) .3s both; }

/* Tabs: the new panel slides in from the side you're moving toward */
.sk-panel.is-in > * { animation: tab-in .42s var(--ease-out) both; }
@keyframes tab-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 18px)); } }
/* Players: faces and uptime bars appear in a gentle wave the first time */
.sk-live.is-first .sk-people a { animation: head-in .45s var(--spring-snappy, var(--ease-out)) both; animation-delay: calc(min(var(--i), 20) * 22ms); }

/* Fix: card artwork never shows half-drawn (no wipe; a short fade instead) */
.js .server[data-reveal] .server-art img { clip-path: none !important; }
/* Fix: nothing can be left half-blurred if you stop scrolling mid-effect */
@supports (animation-timeline: view()) {
  .section-head .h2, .rule-group > header .h3, .chg .ue-card, .site-footer > .wrap, .legal { animation: none !important; }
}
.js [data-reveal] { filter: none !important; }

/* Cards: one consistent hover — lift, deeper shadow, artwork brightens a touch */
@media (hover: hover) {
  .server { transition: transform .55s var(--spring-snappy, var(--ease-out)), box-shadow .55s var(--ease-out), border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
  .server:hover { box-shadow: var(--edge), 0 30px 60px -32px color-mix(in srgb, var(--accent) 35%, rgb(0 0 0 / .8)); }
  .server-art picture img { transition: filter .6s var(--ease); }
  .server:hover .server-art picture img { filter: brightness(1.08) saturate(1.06); }
}
.server:active { transform: translateY(-2px) scale(.995); transition-duration: 120ms; }

/* Copy IP: a light sweep runs along the whole address field */
.ip, .connect { position: relative; overflow: hidden; }
.ip::after, .connect::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgb(var(--online-rgb) / .22) 50%, transparent 70%); transform: translateX(-110%); }
.ip.is-copied::after, .connect.is-copied::after { animation: ip-sweep .8s var(--ease-out); }
@keyframes ip-sweep { to { transform: translateX(110%); } }

/* Discord window: old messages fade out in place; the list glides (FLIP in app.js) */
.dc-msg.is-out { animation: msg-fade .4s var(--ease) forwards; }
@keyframes msg-fade { to { opacity: 0; transform: translateY(-6px); } }
.dc-msg.is-new { animation: msg-in-2 .55s var(--ease-out) both; }
@keyframes msg-in-2 { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.dc-msg.is-channel-out { animation: dc-channel-out .24s var(--ease) both; pointer-events: none; }
@keyframes dc-channel-out { to { opacity: 0; transform: translateY(-7px) scale(.99); } }

@media (prefers-reduced-motion: reduce) {
  .sheet.is-morphing .sheet-body > *, .sheet.is-morphing .sheet-body > .sk-panel > *, .sk-panel.is-in > *, .sk-live.is-first .sk-people a, .ip::after, .connect::after { animation: none !important; }
  .js .server[data-reveal] .server-art picture { opacity: 1; transition: none; }
}
/* Morph tuning: the panel is revealed through the growing frame (cropped, never squished);
   the card's own snapshot steps aside almost at once so nothing looks stretched. */
::view-transition-old(sk-card), ::view-transition-new(sk-card) { object-fit: cover; object-position: top center; }
::view-transition-old(sk-card) { animation: vt-fade-out .12s linear both; }
::view-transition-new(sk-card) { animation: vt-fade-in .2s var(--ease) both; }
::view-transition-old(sk-name), ::view-transition-old(sk-ip) { animation: vt-fade-out .14s linear both; }
.vt-close::view-transition-old(sk-card) { animation: vt-fade-out .22s var(--ease) both; }
.vt-close::view-transition-new(sk-card) { animation: vt-fade-in .3s var(--ease) .12s both; }
/* Morph timing: contents follow the frame closely so the panel is never empty */
::view-transition-new(sk-name), ::view-transition-new(sk-ip) { animation: vt-fade-in .24s var(--ease) .04s both; }
.sheet.is-morphing .sheet-body > * { animation-duration: .42s; }
.sheet.is-morphing .sheet-body > .sk-head { animation-delay: .06s; }
.sheet.is-morphing .sheet-body > .sk-tabs { animation-delay: .12s; }
.sheet.is-morphing .sheet-body > .sk-panel > * { animation-duration: .42s; animation-delay: calc(.16s + var(--k, 0) * .04s); }
.sheet.is-morphing .sheet-hero img { animation: none; }
::view-transition-new(sk-name) { animation: vt-fade-in .22s var(--ease) .1s both; }
/* Closing: the page is there immediately; only the dimmed copy fades away */
.vt-close::view-transition-new(root) { animation: none; }
.vt-close::view-transition-old(root) { animation: vt-fade-out .3s var(--ease) both; }

/* ==========================================================================
   39. Consistency pass (2026-10)
   ========================================================================== */
/* Details: one steady height on desktop, so switching tabs never makes the panel jump */
@media (min-width: 701px) {
  .sheet[open] { height: min(calc(100vh - 48px), 900px); }
  .sheet-scroll { height: 100%; max-height: none; }
}
.sk-up-facts div { align-content: start; }
/* Rules: normal gap before the footer */
.rules-layout { padding-bottom: var(--s-6); }
/* Toast: matches the solid surfaces */
.toast { background: color-mix(in srgb, var(--l1) 94%, transparent); border: 1px solid var(--line-2); }
/* Hero sub-line a touch brighter on the artwork */
.hero-live-s { color: rgb(255 255 255 / .66); }
/* Entrances stay crisp: fade and rise only (no blur), which is also lighter for phones */
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }

/* ==========================================================================
   40. Support center v3: tables, related articles (2026-10)
   ========================================================================== */
.hc-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .hc-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hc-topics { grid-template-columns: minmax(0, 1fr); } }

/* Tables inside articles */
.hc-table-wrap { margin-top: var(--s-2); overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); }
.hc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hc-table th, .hc-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.hc-table thead th { border-top: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: rgb(var(--tint) / .03); }
.hc-table tbody th { font-weight: 620; color: var(--ink); white-space: nowrap; }
.hc-table td { color: var(--ink-2); }
.hc-table b { color: var(--ink); font-weight: 620; }
@media (max-width: 560px) { .hc-table tbody th { white-space: normal; } }

/* "Our servers" + related */
.hc-ours { width: 100%; display: grid; gap: 6px; }
.hc-ours ul { display: grid; gap: 4px; }
.hc-ours li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: var(--r-sm); background: rgb(var(--tint) / .03); border: 1px solid var(--line); font-size: 14px; }
.hc-ours li span { color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-ours li em { font-style: normal; font-weight: 650; color: var(--lantern); }
.hc-related { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s-2); }
.hc-related .rx-k { margin: 0 4px 0 0; }
.hc-related a { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 12px; border-radius: 999px; font-size: 13px; color: var(--ink-2); background: rgb(var(--tint) / .04); border: 1px solid var(--line); transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.hc-related a:hover { color: var(--ink); border-color: var(--line-3); }
.hc-related a svg { width: 13px; height: 13px; opacity: .6; }

/* ==========================================================================
   41. Players tab (assets/js/players.js)
      Stats strip · Most played podium · paged Online/Offline player lists
      with playtime bars · 14-day chart ·
       activity timeline. Gold = rank and highlights, green = online only.
   ========================================================================== */
.pl { display: grid; gap: var(--s-4); }
.pl-sec { display: grid; gap: 12px; min-width: 0; }
.pl-h { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.pl-h h3 { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pl-h-s { margin-left: auto; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pl-empty { padding: 14px 16px; border-radius: var(--r-md); font-size: 14px; color: var(--ink-3); background: var(--l2); border: 1px dashed var(--line-2); list-style: none; }
.pl-empty--big { display: flex; align-items: center; gap: 12px; padding: 22px; }
.pl-empty--big svg { flex: none; width: 22px; height: 22px; opacity: .7; }
.pl-empty .link { font-size: inherit; }
.pl-note, .pl-foot { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.pl-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.pl-foot { display: block; padding-top: var(--s-1); border-top: 1px solid var(--line); }
.pl-warn { display: block; margin-top: 4px; color: var(--unknown); }
.pl-warn code { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--l2); border: 1px solid var(--line); color: var(--ink); }
.pl-k { font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* Faces: pixel heads in a soft frame; coloured initials when a head can't load */
.pl-av { position: relative; display: inline-grid; flex: none; border-radius: 10px; }
.pl-av img[data-head], .pl-av .av { display: block; }
.pl-av img[data-head], .pl-av .pl-ini, .pl-av .av { border-radius: 10px; image-rendering: pixelated; box-shadow: 0 0 0 1px rgb(var(--tint) / .08), 0 6px 14px -8px rgb(0 0 0 / .6); }
.pl-ini, .pl-av .pl-ini { display: grid; place-items: center; line-height: 1; width: var(--s, 32px); height: var(--s, 32px); border-radius: 10px; font-size: calc(var(--s, 32px) * .42); font-weight: 720; letter-spacing: -.02em; color: hsl(var(--h) 70% 88%); background: linear-gradient(145deg, hsl(var(--h) 45% 38%), hsl(calc(var(--h) + 30) 45% 24%)); }
[data-theme="light"] .pl-ini { color: hsl(var(--h) 60% 22%); background: linear-gradient(145deg, hsl(var(--h) 70% 86%), hsl(calc(var(--h) + 30) 60% 76%)); }
.pl-av.is-on img[data-head], .pl-av.is-on .pl-ini, .pl-av.is-on .av { box-shadow: 0 0 0 2px rgb(var(--online-rgb) / .55), 0 0 18px -4px rgb(var(--online-rgb) / .55); }
.pl-av.is-on::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--online); border: 2.5px solid var(--l1); }
.pl-tag { display: inline-flex; align-items: center; height: 18px; margin-left: 7px; padding: 0 7px; border-radius: 999px; vertical-align: 2px; font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: #1a1206; background: var(--lantern); }
.pl-tag--soft { color: var(--lantern); background: rgb(var(--lantern-rgb) / .12); border: 1px solid rgb(var(--lantern-rgb) / .28); }

/* Stats strip */
.pl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pl-stat { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-md); background: var(--l2); border: 1px solid var(--line); overflow: hidden; animation: fade-up .5s var(--ease-out) both; }
.pl-stat:nth-child(2) { animation-delay: 50ms; } .pl-stat:nth-child(3) { animation-delay: 100ms; } .pl-stat:nth-child(4) { animation-delay: 150ms; }
.pl-stat::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgb(var(--c, var(--moon-rgb)) / .1), transparent 60%); }
.pl-stat--players { --c: var(--moon-rgb); } .pl-stat--new { --c: var(--lantern-rgb); } .pl-stat--hours { --c: var(--online-rgb); } .pl-stat--avg { --c: var(--moon-rgb); }
.pl-stat-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: rgb(var(--c)); background: rgb(var(--c) / .12); }
.pl-stat-ic svg { width: 18px; height: 18px; }
.pl-stat-t { display: grid; min-width: 0; }
.pl-stat-t b { font-size: 22px; font-weight: 720; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pl-stat-t b .sk-skel { width: 44px; height: 18px; }
.pl-stat-t small { font-size: 12px; color: var(--ink-3); }

/* Most played podium: 2 · 1 · 3 */
.pl-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
.pl-pod { --m: var(--lantern); --m-rgb: var(--lantern-rgb); animation: fade-up .55s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
.pl-pod--gold { order: 2; }
.pl-pod--silver { order: 1; --m: #c9d3e0; --m-rgb: 201 211 224; }
.pl-pod--bronze { order: 3; --m: #d6a073; --m-rgb: 214 160 115; }
[data-theme="light"] .pl-pod--silver { --m: #7d8899; --m-rgb: 125 136 153; }
[data-theme="light"] .pl-pod--bronze { --m: #a86a3c; --m-rgb: 168 106 60; }
.pl-pod-b { position: relative; display: grid; justify-items: center; gap: 6px; width: 100%; padding: 18px 10px 0; border-radius: var(--r-md); text-align: center; color: inherit; transition: background-color var(--t) var(--ease); }
.pl-pod-b:hover { background: rgb(var(--m-rgb) / .06); }
.pl-pod-b:hover .pl-av { transform: translateY(-3px); }
.pl-pod-b .pl-av { transition: transform .45s var(--spring-snappy, var(--ease-out)); }
.pl-pod-b .pl-av img[data-head], .pl-pod-b .pl-av .pl-ini { box-shadow: 0 0 0 2px rgb(var(--m-rgb) / .7), 0 10px 24px -10px rgb(var(--m-rgb) / .6); }
.pl-pod-rank { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 750; color: var(--m); background: rgb(var(--m-rgb) / .12); border: 1px solid rgb(var(--m-rgb) / .3); }
.pl-pod-rank svg { width: 12px; height: 12px; }
.pl-pod-n { max-width: 100%; font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-pod-h { font-size: 13px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-pod-step { display: block; width: 100%; height: 34px; margin-top: 4px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, rgb(var(--m-rgb) / .22), rgb(var(--m-rgb) / .04)); border: 1px solid rgb(var(--m-rgb) / .22); border-bottom: 0; transform-origin: bottom; animation: pl-rise-step .7s var(--spring-soft, var(--ease-out)) both; animation-delay: calc(var(--i) * 70ms + 200ms); }
.pl-pod--gold .pl-pod-step { height: 54px; }
.pl-pod--bronze .pl-pod-step { height: 22px; }
@keyframes pl-rise-step { from { transform: scaleY(0); } }

/* Tools: search, filter, sort */
.pl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-search { position: relative; flex: 1 1 200px; display: flex; align-items: center; }
.pl-search > svg { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.pl-search input { width: 100%; height: 40px; padding: 0 36px 0 38px; border-radius: var(--r-pill); font: inherit; font-size: 14.5px; color: var(--ink); background: var(--l2); border: 1px solid var(--line-2); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.pl-search input::placeholder { color: var(--ink-3); }
.pl-search input::-webkit-search-cancel-button { display: none; }
.pl-search input:focus { outline: none; border-color: rgb(var(--lantern-rgb) / .5); box-shadow: 0 0 0 4px rgb(var(--lantern-rgb) / .1); }
.pl-clear { position: absolute; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); }
.pl-clear:hover { color: var(--ink); background: rgb(var(--tint) / .07); }
.pl-clear svg { width: 13px; height: 13px; }
.pl-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--l2); border: 1px solid var(--line); }
.pl-seg-b { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--ink-3); transition: color var(--t) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.pl-seg-b:hover { color: var(--ink); }
.pl-seg-b[aria-pressed="true"] { color: var(--ink); background: var(--l3); box-shadow: 0 1px 0 rgb(var(--tint) / .06) inset, 0 2px 8px -4px rgb(0 0 0 / .4); }
[data-theme="light"] .pl-seg-b[aria-pressed="true"] { background: #fff; }
.pl-seg-n { font-size: 11.5px; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pl-seg-n:empty { display: none; }
.pl-sort { position: relative; display: inline-flex; align-items: center; }
.pl-sort select { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 34px 0 14px; border-radius: var(--r-pill); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--l2); border: 1px solid var(--line-2); cursor: pointer; }
.pl-sort select:focus-visible { outline: 2px solid rgb(var(--lantern-rgb) / .7); outline-offset: 2px; }
.pl-sort svg { position: absolute; right: 12px; width: 14px; height: 14px; color: var(--ink-3); pointer-events: none; }

/* All players */
.pl-roster { display: grid; gap: 2px; padding: 6px; border-radius: var(--r-lg); background: var(--l2); border: 1px solid var(--line); min-height: 120px; align-content: start; transition: opacity .2s var(--ease); }
.pl-roster[aria-busy="true"] { opacity: .6; }
.pl-roster > .pl-empty { border: 0; background: none; }
.pl-groups { display: grid; gap: var(--s-3); }
.pl-group { display: grid; gap: 8px; min-width: 0; }
.pl-group[hidden], .pl-pager[hidden] { display: none; }
.pl-group .pl-h { justify-content: space-between; }
.pl-fallback-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; }
.pl-pager { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pl-pager button { min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-2); background: var(--l2); font-size: 13px; }
.pl-pager button:hover:not(:disabled) { color: var(--ink); border-color: var(--line-2); }
.pl-pager button:disabled { opacity: .45; cursor: default; }
.pl-pager span { min-width: 92px; color: var(--ink-3); font-size: 12.5px; text-align: center; font-variant-numeric: tabular-nums; }
.pl-row { border-radius: var(--r-md); transition: background-color var(--t) var(--ease), box-shadow .3s var(--ease); animation: fade-up .35s var(--ease-out) both; animation-delay: calc(min(var(--i), 12) * 18ms); }
.pl-row:hover { background: rgb(var(--tint) / .04); }
.pl-row.is-open { background: var(--l1); box-shadow: 0 0 0 1px var(--line-2), 0 12px 30px -18px rgb(0 0 0 / .6); }
.pl-row.is-flash { animation: rx-flash 1.4s var(--ease); }
.pl-row-b { display: grid; grid-template-columns: 34px minmax(0, 1fr) 76px 18px; align-items: center; gap: 12px; width: 100%; padding: 9px 10px 9px 9px; border-radius: var(--r-md); text-align: left; color: inherit; }
.pl-row-b:focus-visible { outline: 2px solid rgb(var(--lantern-rgb) / .7); outline-offset: -2px; }
.pl-row:not(.is-online) .pl-av img[data-head] { filter: saturate(.6) brightness(.92); }
.pl-row-t { display: grid; min-width: 0; }
.pl-row-t b { font-size: 14.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-row-t mark { background: none; color: var(--lantern); }
.pl-st { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pl-st.is-on { color: var(--online); }
.pl-row-pt { display: grid; justify-items: end; gap: 5px; }
.pl-row-pt b { font-size: 13.5px; font-weight: 680; font-variant-numeric: tabular-nums; }
.pl-ptbar { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgb(var(--tint) / .07); overflow: hidden; }
.pl-ptbar i { position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--w, 0)); background: linear-gradient(90deg, rgb(var(--lantern-rgb) / .45), var(--lantern)); animation: pl-grow .9s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 12) * 18ms + 150ms); }
@keyframes pl-grow { from { transform: scaleX(0); } }
.pl-row-chev svg { width: 16px; height: 16px; color: var(--ink-3); transition: transform .4s var(--spring-snappy, var(--ease-out)); }
.pl-row.is-open .pl-row-chev svg { transform: rotate(180deg); color: var(--ink); }
.pl-row-d { padding: 2px 14px 16px 55px; display: grid; gap: 14px; animation: fade-up .35s var(--ease-out) both; }
.pl-detail-skel { display: grid; gap: 8px; }
.pl-detail-skel i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(100deg, rgb(var(--tint) / .05) 35%, rgb(var(--tint) / .12) 50%, rgb(var(--tint) / .05) 65%) 0 0 / 250% 100%; animation: skel 1.4s ease-in-out infinite; }
.pl-detail-skel i:first-child { height: 64px; } .pl-detail-skel i:last-child { width: 60%; }

/* 14-day chart */
.pl-days { display: grid; gap: 8px; padding: 14px 14px 10px; border-radius: var(--r-md); background: var(--l2); border: 1px solid var(--line); }
.pl-days-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pl-days-h small { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pl-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; height: 76px; }
.pl-bars li { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 4px; height: 100%; }
.pl-bars i { align-self: end; display: block; height: max(3px, calc(var(--h) * 100%)); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--lantern), rgb(var(--lantern-rgb) / .45)); transform-origin: bottom; animation: pl-rise-step .6s var(--ease-out) both; animation-delay: calc(var(--i) * 25ms); transition: filter .2s var(--ease); }
.pl-bars li.is-zero i { background: rgb(var(--tint) / .08); }
.pl-bars li:hover i { filter: brightness(1.2); }
.pl-bars li.is-today i { box-shadow: 0 0 12px -2px rgb(var(--lantern-rgb) / .6); }
.pl-bars span { font-size: 10px; font-weight: 600; text-align: center; color: var(--ink-3); }
.pl-bars li.is-today span { color: var(--lantern); }
.pl-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pl-facts div { padding: 10px 12px; border-radius: var(--r-sm); background: var(--l2); border: 1px solid var(--line); }
.pl-facts dt { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pl-facts dd { margin-top: 2px; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pl-visits { display: grid; gap: 2px; }
.pl-visits li { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-visits li:nth-child(odd) { background: rgb(var(--tint) / .03); }
.pl-visits b { font-weight: 640; color: var(--ink); }
.pl-now-txt { font-style: normal; font-weight: 650; color: var(--online); }
.pl-namemc { font-size: 13.5px; width: fit-content; }

/* Activity timeline */
.pl-act { display: grid; }
.pl-day { padding: 12px 0 6px 76px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); list-style: none; }
.pl-day:first-child { padding-top: 0; }
.pl-ev { position: relative; display: grid; grid-template-columns: 64px 26px 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 4px; font-size: 14px; color: var(--ink-2); animation: fade-up .35s var(--ease-out) both; animation-delay: calc(min(var(--i), 12) * 22ms); }
.pl-ev::before { content: ""; position: absolute; left: calc(4px + 64px + 10px + 12px); top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.pl-day + .pl-ev::before { top: 50%; }
.pl-ev:has(+ .pl-day)::before, .pl-ev:last-child::before { bottom: 50%; }
.pl-day + .pl-ev:has(+ .pl-day)::before, .pl-day + .pl-ev:last-child::before { display: none; }
.pl-ev-clock { font-size: 12.5px; font-weight: 600; text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-ev-node { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--l1); }
.pl-ev-node svg { width: 13px; height: 13px; }
.pl-ev--join .pl-ev-node { color: var(--online); background: color-mix(in srgb, var(--online) 18%, var(--l1)); }
.pl-ev--leave .pl-ev-node { color: var(--ink-3); background: var(--l2); }
.pl-ev .pl-av img[data-head], .pl-ev .pl-av .pl-ini { border-radius: 6px; }
.pl-ev-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-ev-t b { color: var(--ink); font-weight: 620; }
.pl-ev-dur { color: var(--ink-3); }
.pl-ev-ago { font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Loading rows */
.pl-skel { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 9px; list-style: none; }
.pl-skel i, .pl-skel b, .pl-skel small { display: block; border-radius: 8px; background: linear-gradient(100deg, rgb(var(--tint) / .05) 35%, rgb(var(--tint) / .12) 50%, rgb(var(--tint) / .05) 65%) 0 0 / 250% 100%; animation: skel 1.4s ease-in-out infinite; }
.pl-skel i { width: 34px; height: 34px; }
.pl-skel span { display: grid; gap: 6px; }
.pl-skel b { width: 40%; height: 12px; }
.pl-skel small { width: 25%; height: 10px; }
.pl-skel--sm i { width: 24px; height: 24px; }

@media (max-width: 760px) {
  .pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pl { gap: var(--s-3); }
  .pl-stat { padding: 12px; gap: 10px; }
  .pl-stat-ic { width: 32px; height: 32px; }
  .pl-stat-t b { font-size: 19px; }
  .pl-tools { gap: 6px; }
  .pl-search { flex-basis: 100%; }
  .pl-seg { flex: 1; }
  .pl-seg-b { flex: 1; justify-content: center; padding: 0 8px; }
  .pl-row-b { grid-template-columns: 34px minmax(0, 1fr) 58px; }
  .pl-row-chev { display: none; }
  .pl-row-d { padding-left: 12px; padding-right: 12px; }
  .pl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-visits li { grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; font-size: 13px; }
  .pl-visits li > span:nth-child(2) { grid-column: 1; font-size: 12px; color: var(--ink-3); }
  .pl-visits li > b { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .pl-ev-t { white-space: normal; line-height: 1.35; }
  .pl-stat-ic { display: none; }
  .pl-stat-t small { white-space: normal; line-height: 1.3; }
  .pl-podium { gap: 4px; }
  .pl-pod-b { padding: 14px 4px 0; }
  .pl-pod-n { font-size: 13px; }
  .pl-day { padding-left: 0; }
  .pl-ev { grid-template-columns: 26px 24px minmax(0, 1fr) auto; }
  .pl-ev-clock { display: none; }
  .pl-ev::before { left: calc(4px + 12px); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-stat, .pl-pod, .pl-pod-step, .pl-row, .pl-row-d, .pl-ev, .pl-bars i, .pl-ptbar i, .pl-skel i, .pl-skel b, .pl-skel small, .pl-detail-skel i { animation: none !important; }
}
/* ==========================================================================
   42. Player activity chart (assets/js/chart.js)
       Green = players, gold = peak, hatched grey = server offline.
   ========================================================================== */
.skc { --skc-y: 34px; display: grid; gap: 12px; margin-top: var(--s-2); padding: 16px 18px 14px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgb(var(--online-rgb) / .045), transparent 55%), var(--l2); border: 1px solid var(--line); }
.skc.is-switch .skc-body { animation: skc-fade .35s var(--ease) both; }
.skc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.skc-head h3 { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.skc-range { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--l1); border: 1px solid var(--line); }
.skc-range button { height: 26px; padding: 0 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); transition: color var(--t) var(--ease), background-color var(--t) var(--ease); }
.skc-range button:hover:not(:disabled) { color: var(--ink); }
.skc-range button[aria-pressed="true"] { color: var(--ink); background: var(--l3); box-shadow: 0 1px 0 rgb(var(--tint) / .06) inset, 0 2px 8px -4px rgb(0 0 0 / .45); }
[data-theme="light"] .skc-range button[aria-pressed="true"] { background: #fff; }
.skc-range button:disabled { opacity: .4; cursor: not-allowed; }
.skc-sum { display: flex; gap: 6px 20px; margin-left: auto; }
.skc-sum span { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; }
.skc-sum small { grid-column: 1 / -1; font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.skc-sum b { font-size: 18px; font-weight: 720; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.skc-sum em { font-style: normal; font-size: 12px; color: var(--ink-3); white-space: nowrap; }

.skc-body { display: grid; grid-template-columns: var(--skc-y) minmax(0, 1fr); grid-template-rows: auto auto; }
.skc-y { position: relative; grid-row: 1; }
.skc-y span { position: absolute; right: 10px; translate: 0 -50%; font-size: 11px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.skc-plot { position: relative; height: 190px; color: var(--online); cursor: crosshair; touch-action: pan-y; border-radius: 6px; outline: none; }
.skc-plot:focus-visible { box-shadow: 0 0 0 2px rgb(var(--lantern-rgb) / .6); }
.skc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.skc-grid, .skc-v { stroke: rgb(var(--tint) / .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.skc-v { stroke-dasharray: 2 4; }
.skc-base { stroke: rgb(var(--tint) / .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.skc-out { opacity: .9; }
.skc-hatch { fill: rgb(var(--tint) / .09); }
.skc-avg { stroke: rgb(var(--tint) / .3); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.skc-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 4px 8px rgb(var(--online-rgb) / .35)); }
.skc.is-first .skc-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: skc-draw 1.6s var(--ease-out) .15s forwards; }
.skc.is-first .skc-area { opacity: 0; animation: skc-fade .9s var(--ease) .7s forwards; }
.skc.is-first .skc-peak, .skc.is-first .skc-now, .skc.is-first .skc-avg-l { opacity: 0; animation: skc-fade .5s var(--ease) 1.4s forwards; }
@keyframes skc-draw { to { stroke-dashoffset: 0; } }

.skc-peak, .skc-now, .skc-dot { position: absolute; width: 0; height: 0; pointer-events: none; }
.skc-peak i, .skc-now i, .skc-dot::before { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; content: ""; }
.skc-peak i { background: var(--lantern); box-shadow: 0 0 0 3px var(--l2), 0 0 14px rgb(var(--lantern-rgb) / .7); }
.skc-peak b { position: absolute; bottom: 10px; left: 0; translate: -50% 0; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 720; white-space: nowrap; color: #1a1206; background: var(--lantern); box-shadow: 0 6px 14px -6px rgb(var(--lantern-rgb) / .7); }
.skc-peak.is-left b { translate: -12px 0; }
.skc-peak.is-right b { translate: calc(-100% + 12px) 0; }
.skc-now i { background: var(--online); box-shadow: 0 0 0 3px var(--l2); }
.skc-now i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--online); opacity: 0; animation: ping 2.4s var(--ease-out) infinite; }
.skc-avg-l { position: absolute; right: 0; translate: 0 -120%; padding: 0 2px; font-size: 10.5px; font-weight: 650; color: var(--ink-3); pointer-events: none; }

/* Reading a moment */
.skc-cross, .skc-dot, .skc-tip { opacity: 0; transition: opacity .15s var(--ease); }
.skc-plot.is-reading .skc-cross, .skc-plot.is-reading .skc-dot:not([hidden]), .skc-plot.is-reading .skc-tip { opacity: 1; }
.skc-plot.is-reading .skc-peak b, .skc-plot.is-reading .skc-avg-l { opacity: .25; transition: opacity .15s var(--ease); }
.skc-cross { position: absolute; top: 0; bottom: 0; width: 1px; translate: -.5px 0; background: linear-gradient(180deg, transparent, rgb(var(--tint) / .35) 15%, rgb(var(--tint) / .35) 85%, transparent); pointer-events: none; }
.skc-dot::before { background: var(--online); box-shadow: 0 0 0 3px var(--l1), 0 0 0 5px rgb(var(--online-rgb) / .3); }
.skc-tip { position: absolute; top: 4px; display: grid; gap: 1px; padding: 7px 11px; border-radius: 10px; white-space: nowrap; pointer-events: none; background: var(--l3); border: 1px solid var(--line-2); box-shadow: 0 12px 28px -12px rgb(0 0 0 / .6); z-index: 2; }
[data-theme="light"] .skc-tip { background: #fff; }
.skc-tip small { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.skc-tip b { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.skc-tip.is-out b { color: var(--ink-2); }

.skc-x { position: relative; grid-column: 2; height: 22px; margin-top: 6px; }
.skc-x span { position: absolute; top: 0; translate: -50% 0; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--ink-3); }
.skc-x span.is-today { color: var(--online); }
.skc-legend { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }
.skc-key-out { width: 14px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(45deg, rgb(var(--tint) / .22) 0 3px, transparent 3px 6px); }

/* Not enough data yet */
.skc-wait { position: relative; display: grid; gap: 10px; padding: 18px; border-radius: var(--r-md); border: 1px dashed var(--line-2); overflow: hidden; }
.skc-wait svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 60%; opacity: .5; }
.skc-wait path { fill: none; stroke: rgb(var(--online-rgb) / .35); stroke-width: 2; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; animation: skc-flow 2.5s linear infinite; }
@keyframes skc-flow { to { stroke-dashoffset: -24; } }
.skc-wait p { position: relative; display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-3); }
.skc-wait p b { font-size: 14.5px; color: var(--ink); }
.skc-prog { position: relative; display: block; height: 4px; border-radius: 4px; background: rgb(var(--tint) / .08); overflow: hidden; }
.skc-prog::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p)); border-radius: inherit; background: linear-gradient(90deg, rgb(var(--online-rgb) / .5), var(--online)); }

@media (max-width: 640px) {
  .skc { --skc-y: 28px; padding: 14px 12px 12px; }
  .skc-sum { width: 100%; margin-left: 0; justify-content: flex-start; }
  .skc-range { margin-left: auto; }
  .skc-plot { height: 160px; }
  .skc-sum b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .skc .skc-line, .skc .skc-area, .skc .skc-peak, .skc .skc-now, .skc .skc-avg-l { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .skc-now i::after, .skc-wait path, .skc.is-switch .skc-body { animation: none; }
}
@keyframes skc-fade { from { opacity: 0; } to { opacity: 1; } }
/* ==========================================================================
   43. Details: Overview, Uptime and world ping (app.js, worldping.js)
       Same language as the Players tab: --l2 cards on the --l1 panel,
       small uppercase labels, green/amber/red only for status.
   ========================================================================== */
#sk-panel-overview { gap: var(--s-2); }
.ov-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 700px) { .ov-top { grid-template-columns: minmax(0, 1fr); } }

/* Status card */
.ov-state { --c: var(--ink-3); --c-rgb: var(--tint); display: grid; gap: 16px; padding: 18px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgb(var(--c-rgb) / .1), transparent 55%), var(--l2); border: 1px solid rgb(var(--c-rgb) / .2); transition: border-color .5s var(--ease), background .5s var(--ease); }
.ov-state[data-state="online"] { --c: var(--online); --c-rgb: var(--online-rgb); }
.ov-state[data-state="restarting"] { --c: var(--restarting); --c-rgb: var(--restart-rgb); }
.ov-state[data-state="offline"] { --c: var(--danger); --c-rgb: var(--danger-rgb); }
.ov-state[data-state="unknown"] { --c: var(--unknown); --c-rgb: var(--unknown-rgb); }
.ov-state-h { display: flex; align-items: center; gap: 14px; }
.ov-orb { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgb(var(--c-rgb) / .14); }
.ov-orb .dot { width: 12px; height: 12px; --c: inherit; background: var(--c); box-shadow: 0 0 14px var(--c); }
.ov-state[data-state="online"] .ov-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: ping 2.6s var(--ease-out) infinite; }
.ov-state[data-state="restarting"] .ov-orb::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--c); border-right-color: var(--c); animation: spin 1.1s linear infinite; }
.ov-state-w { display: block; font-size: 24px; font-weight: 720; letter-spacing: -.03em; line-height: 1.1; color: var(--c); }
.ov-state[data-state="loading"] .ov-state-w { color: var(--ink-3); }
.ov-state-s { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ov-state-s .sk-skel { width: 120px; }
.ov-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ov-fact { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); text-align: left; color: inherit; background: rgb(var(--tint) / .03); border: 1px solid var(--line); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); min-width: 0; }
button.ov-fact:hover { border-color: var(--line-3); background: rgb(var(--tint) / .05); }
.ov-fact-ic { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 8px; color: var(--ink-3); background: rgb(var(--tint) / .06); }
.ov-fact-ic svg { width: 14px; height: 14px; }
.ov-fact-t { display: grid; min-width: 0; }
.ov-fact-t small { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-fact-t b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-fact-t em { font-style: normal; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .ov-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ov-facts > :last-child { grid-column: 1 / -1; } }

/* Players card */
.ov-players { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 16px 18px 14px; border-radius: var(--r-lg); text-align: left; color: inherit; background: var(--l2); border: 1px solid var(--line); overflow: hidden; transition: border-color var(--t) var(--ease), transform .45s var(--spring-snappy, var(--ease-out)); }
.ov-players:hover { border-color: var(--line-3); transform: translateY(-2px); }
.ov-pl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ov-pl-k { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ov-pl-k svg { width: 15px; height: 15px; }
.ov-heads { display: inline-flex; align-items: center; padding-left: 6px; }
.ov-heads img, .ov-heads .av { width: 24px; height: 24px; margin-left: -6px; border-radius: 7px; border: 2px solid var(--l2); }
.ov-heads i { margin-left: 6px; font-style: normal; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.ov-pl-mid { display: grid; }
.ov-pl-n { font-size: 34px; font-weight: 720; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ov-pl-n i { margin-left: 6px; font-style: normal; font-size: 15px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.ov-pl-n--off { color: var(--ink-3); }
.ov-pl-mid small { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.ov-spark { display: block; height: 44px; color: var(--online); align-self: end; }
.ov-spark .spark { width: 100%; height: 100%; }
.ov-pl-go { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ov-pl-go svg { width: 14px; height: 14px; transition: transform .4s var(--ease-out); }
.ov-players:hover .ov-pl-go svg { transform: translateX(3px); }

/* Notices */
.ov-notices { display: grid; gap: 8px; }
.ov-notices:empty { display: none; }
.ov-n { --c: var(--moon); --c-rgb: var(--moon-rgb); display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: rgb(var(--c-rgb) / .08); border: 1px solid rgb(var(--c-rgb) / .28); animation: fade-up .45s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
.ov-n--warn { --c: var(--unknown); --c-rgb: var(--unknown-rgb); }
.ov-n--bad { --c: var(--danger); --c-rgb: var(--danger-rgb); }
.ov-n--gold { --c: var(--lantern); --c-rgb: var(--lantern-rgb); }
.ov-n--wipe { --c: #69dfc8; --c-rgb: 76 210 187; background: linear-gradient(115deg,rgb(var(--c-rgb) / .15),rgb(var(--c-rgb) / .045) 68%); border-color: rgb(var(--c-rgb) / .4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06),0 12px 32px -24px rgb(var(--c-rgb) / .32); }
.ov-n--early { background: linear-gradient(115deg,rgb(var(--c-rgb) / .14),rgb(var(--c-rgb) / .055) 65%); border-color: rgb(var(--c-rgb) / .42); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07),0 12px 30px -24px rgb(var(--c-rgb) / .4); }
.ov-n--early .ov-n-ic { animation: ov-early-spark 4.8s ease-in-out infinite; }
.ov-n--early .early-access-store { display: inline-flex; margin-left: 6px; color: var(--c); font-weight: 700; white-space: nowrap; }
@keyframes ov-early-spark { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(var(--c-rgb) / .12); } 50% { transform: scale(1.06); box-shadow: 0 0 14px 2px rgb(var(--c-rgb) / .28); } }
.ov-n-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; color: var(--c); background: rgb(var(--c-rgb) / .14); }
.ov-n-ic svg { width: 16px; height: 16px; }
.ov-n b { display: block; font-weight: 650; }
.ov-n p { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.ov-n-when { display: block; margin-top: 2px; font-size: 13px; color: var(--c); font-weight: 600; }

/* Join card */
.ov-join { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-lg); background: var(--l2); border: 1px solid var(--line); }
.ov-join-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-join-h h3, .ov-wipe-h h3, .up-sec-h h3, .wp-head h3 { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ov-help { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ov-help svg { width: 13px; height: 13px; }
.ov-help:hover { color: var(--ink); }
.ov-join .sk-ip .ip { padding: 7px 7px 7px 20px; border-radius: var(--r-pill); background: var(--l1); }
.ov-join .sk-ip .ip code { font-size: 16px; }
.ov-join .sk-ip .copy-btn { --h: 46px; min-width: 120px; }
.ov-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ov-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--r-md); background: rgb(var(--tint) / .025); border: 1px solid var(--line); min-width: 0; }
.ov-step-n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--lantern); background: rgb(var(--lantern-rgb) / .12); border: 1px solid rgb(var(--lantern-rgb) / .28); }
.ov-step-t { display: grid; gap: 1px; min-width: 0; }
.ov-step-t b { font-size: 14px; font-weight: 640; letter-spacing: -.01em; }
.ov-step-t small { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.ov-step-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ov-step-btns .btn { --h: 34px; padding: 0 12px; font-size: 13px; }
.ov-step-btns .btn svg { width: 14px; height: 14px; }
@media (max-width: 700px) { .ov-steps { grid-template-columns: minmax(0, 1fr); } }

/* Specs + wipes */
.ov-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ov-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ov-spec { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--l2); border: 1px solid var(--line); }
.ov-spec-ic { display: grid; place-items: center; grid-row: span 3; width: 30px; height: 30px; border-radius: 9px; color: var(--moon); background: rgb(var(--moon-rgb) / .1); }
.ov-spec-ic svg { width: 16px; height: 16px; }
.ov-spec small, .ov-wipe-row small { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ov-spec b, .ov-wipe-row b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-spec em, .ov-wipe-row em { font-style: normal; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-wipe { display: grid; gap: 12px; align-content: start; padding: 14px 16px; border-radius: var(--r-md); background: var(--l2); border: 1px solid var(--line); }
.ov-wipe.is-soon { border-color: rgb(var(--lantern-rgb) / .4); background: linear-gradient(160deg, rgb(var(--lantern-rgb) / .1), transparent 60%), var(--l2); }
.ov-wipe.is-in-progress { border-color: rgb(76 210 187 / .38); background: linear-gradient(120deg,rgb(76 210 187 / .11),transparent 68%),var(--l2); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05),0 16px 38px -30px rgb(76 210 187 / .38); animation: wipe-panel-glow 4.8s ease-in-out infinite; }
.ov-wipe.is-in-progress .ov-wipe-h h3 { color: #69dfc8; }
@keyframes wipe-panel-glow { 0%,100% { border-color: rgb(76 210 187 / .24); } 50% { border-color: rgb(76 210 187 / .52); } }
.ov-wipe-h { display: flex; align-items: center; gap: 10px; }
.ov-wipe-h .ov-spec-ic { color: var(--lantern); background: rgb(var(--lantern-rgb) / .12); }
.ov-wipe-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ov-wipe-row > div { display: grid; min-width: 0; }
.ov-wipe.is-soon .ov-wipe-row > div:last-child em { color: var(--lantern); font-weight: 650; }
.ov-season { display: grid; gap: 6px; }
.ov-season-bar { position: relative; display: block; height: 6px; border-radius: 6px; background: rgb(var(--tint) / .08); overflow: hidden; }
.ov-season-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p)); border-radius: inherit; background: linear-gradient(90deg, rgb(var(--lantern-rgb) / .45), var(--lantern)); animation: pl-grow 1s var(--ease-out) both .2s; }
.ov-season-l { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ov-season-l b { font-weight: 600; color: var(--ink-2); }
@media (max-width: 700px) { .ov-about { grid-template-columns: minmax(0, 1fr); } }

/* World ping styles: see section 44 */
/* ---------- Uptime tab ---------- */
.sk-status.up { gap: var(--s-2); padding: 0; background: none; border: 0; box-shadow: none; }
.up-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--l2); border: 1px solid var(--line); }
.up-ring-wrap { position: relative; width: 132px; height: 132px; }
.up-ring { width: 100%; height: 100%; rotate: -90deg; }
.up-ring circle { fill: none; stroke-width: 10; }
.up-ring-bg { stroke: rgb(var(--tint) / .07); }
.up-ring-fg { stroke: currentColor; stroke-linecap: round; stroke-dashoffset: var(--off); filter: drop-shadow(0 0 6px currentColor); }
.sk-status.is-first .up-ring-fg { animation: up-ring 1.2s var(--ease-out) both; }
@keyframes up-ring { from { stroke-dashoffset: var(--c); } }
.up-ring.st-up--none .up-ring-fg { opacity: 0; }
.up-ring-t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.up-ring-t b { font-size: 26px; font-weight: 740; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.up-ring-t small { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.up-hero-r { display: grid; gap: 12px; min-width: 0; }
.up-hero-r h3 { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.up-stats, .up-restart-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.up-stat { display: grid; padding: 10px 12px; border-radius: var(--r-md); background: rgb(var(--tint) / .03); border: 1px solid var(--line); min-width: 0; }
.up-stat small { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.up-stat b { font-size: 19px; font-weight: 720; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-stat em { font-style: normal; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-sec { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--l2); border: 1px solid var(--line); }
.up-sec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.up-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11.5px; color: var(--ink-3); }
.up-legend i { width: 9px; height: 9px; margin-left: 6px; border-radius: 3px; }
.up-legend i:first-child { margin-left: 0; }
.up-src { font-size: 12px; font-weight: 600; color: var(--ink-3); }
/* Bars are buttons now: one per day, inside an <li> */
.up-bars { height: 44px; }
.up-bars li { display: grid; }
.up-bars .st-bar { width: 100%; height: 100%; border-radius: 4px; cursor: pointer; }
.up-bars .st-bar.is-sel { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; transform: scaleY(1.06); }
.up-bars .st-bar:focus-visible { outline: 2px solid rgb(var(--lantern-rgb) / .8); outline-offset: 2px; }
.up-bars li:nth-child(-n+5) .st-bar::after { left: 0; transform: translate(0, 4px); }
.up-bars li:nth-child(-n+5) .st-bar:hover::after { transform: none; }
.up-bars li:nth-last-child(-n+5) .st-bar::after { left: auto; right: 0; transform: translate(0, 4px); }
.up-bars li:nth-last-child(-n+5) .st-bar:hover::after { transform: none; }
.sk-status.is-first .up-bars .st-bar { animation: bar-up .6s var(--ease-out) both; animation-delay: calc(.2s + var(--i, 0) * 14ms); }
.up-day-d { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--l1); border: 1px solid var(--line); animation: fade-up .3s var(--ease-out) both; }
.up-day-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.up-day-p { font-size: 18px; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.up-muted { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-3); }
.up-muted svg { width: 15px; height: 15px; color: var(--online); }
.up-os { display: grid; gap: 4px; }
.up-o { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.up-o b { color: var(--ink); font-weight: 650; }
.up-o-k { justify-self: start; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
.up-o--out .up-o-k { color: var(--danger); background: rgb(var(--danger-rgb) / .1); }
.up-o--open .up-o-k { color: var(--danger); background: rgb(var(--danger-rgb) / .16); }
.up-o--planned .up-o-k { color: var(--moon); background: rgb(var(--moon-rgb) / .12); }
/* Restart pattern: a 24-hour track with the restart times and "now" */
.up-trk { display: grid; gap: 6px; margin-top: 4px; }
.up-trk-bar { position: relative; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgb(var(--tint) / .04), rgb(var(--tint) / .08)); border: 1px solid var(--line); }
.up-trk-r, .up-trk-now { position: absolute; top: 50%; left: var(--x); translate: -50% -50%; }
.up-trk-r { width: 12px; height: 12px; border-radius: 50%; background: var(--moon); box-shadow: 0 0 0 3px var(--l2), 0 0 10px rgb(var(--moon-rgb) / .6); }
.up-trk-now { width: 2px; height: 20px; border-radius: 2px; background: var(--lantern); box-shadow: 0 0 8px rgb(var(--lantern-rgb) / .7); }
.up-trk-x { position: relative; height: 16px; }
.up-trk-x span { position: absolute; left: var(--x); translate: -50% 0; font-size: 11px; color: var(--ink-3); }
.up-trk-x span:first-child { translate: 0 0; }
/* Incident timeline */
.up-log { display: grid; }
.up-log-day { padding: 10px 0 4px 74px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.up-log-day:first-child { padding-top: 0; }
.up-ev { position: relative; display: grid; grid-template-columns: 58px 16px minmax(0, 1fr); gap: 0 10px; padding: 6px 0; animation: fade-up .35s var(--ease-out) both; animation-delay: calc(min(var(--i), 10) * 30ms); }
.up-ev::before { content: ""; position: absolute; left: calc(58px + 10px + 7px); top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.up-log-day + .up-ev::before { top: 14px; }
.up-ev:last-child::before, .up-ev:has(+ .up-log-day)::before { bottom: calc(100% - 14px); }
.up-ev time { padding-top: 2px; font-size: 12.5px; font-weight: 600; text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.up-ev-dot { position: relative; z-index: 1; width: 12px; height: 12px; margin: 4px 2px 0; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 3px var(--l2); }
.up-ev--auto .up-ev-dot, .up-ev--incident .up-ev-dot, .up-ev--open .up-ev-dot { background: var(--danger); }
.up-ev--maintenance .up-ev-dot, .up-ev--planned .up-ev-dot { background: var(--moon); }
.up-ev--resolved .up-ev-dot { background: var(--online); }
.up-ev--open .up-ev-dot { animation: breathe 1.4s ease-in-out infinite; }
.up-ev .si-lv { margin-bottom: 2px; }
.up-ev--planned .si-lv { color: var(--moon); background: rgb(var(--moon-rgb) / .1); }
.up-ev--open .si-lv { color: var(--danger); background: rgb(var(--danger-rgb) / .14); }
.up-ev b { display: block; font-weight: 640; }
.up-ev p { margin-top: 1px; font-size: 13.5px; color: var(--ink-2); }
.up-empty { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.up-empty svg { width: 18px; height: 18px; color: var(--online); }
@media (max-width: 640px) {
  .up-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 16px; }
  .up-hero-r { width: 100%; }
  .up-hero-r h3 { text-align: center; }
  .up-stats, .up-restart-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .up-stat { padding: 9px 10px; }
  .up-stat b { font-size: 16px; }
  .up-sec { padding: 14px; }
  .up-bars { height: 36px; gap: 2px; }
  .up-log-day { padding-left: 0; }
  .up-ev { grid-template-columns: 16px minmax(0, 1fr); }
  .up-ev time { grid-column: 2; grid-row: 1; text-align: left; padding: 0; order: -1; }
  .up-ev-dot { grid-row: 1 / 3; grid-column: 1; }
  .up-ev > div { grid-column: 2; }
  .up-ev::before { left: 7px; }
  .up-o { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-n, .ov-season-bar i, .up-day-d, .up-ev, .sk-status.is-first .up-ring-fg, .sk-status.is-first .up-bars .st-bar, .ov-state .ov-orb::after, .up-ev--open .up-ev-dot { animation: none !important; }
}
/* 43b. Overview fixes: facts as compact rows, step buttons fit, spec icons aligned */
.ov-facts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.ov-fact { align-items: center; padding: 8px 10px; }
.ov-fact-t { flex: 1; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.ov-fact-t small { grid-column: 1; grid-row: 1; }
.ov-fact-t em { grid-column: 1; grid-row: 2; }
.ov-fact-t b { grid-column: 2; grid-row: 1 / 3; font-size: 17px; }
.ov-fact-t > :only-child, .ov-fact-t small:nth-last-child(2) { grid-row: 1 / 3; }
@media (max-width: 520px) { .ov-facts { grid-template-columns: minmax(0, 1fr); } .ov-facts > :last-child { grid-column: auto; } }
.ov-step-btns .btn { max-width: 100%; }
.ov-spec-ic { grid-row: 1 / span 3; align-self: start; margin-top: 2px; }
.up-ev { grid-template-columns: 70px 16px minmax(0, 1fr); }
.up-ev::before { left: calc(70px + 10px + 7px); }
.up-log-day { padding-left: 86px; }
.up-ev time { white-space: nowrap; }
@media (max-width: 640px) { .up-ev { grid-template-columns: 16px minmax(0, 1fr); } .up-ev::before { left: 7px; } .up-log-day { padding-left: 0; } }
.up-ring { overflow: visible; }
.up-legend i { background: var(--online); }
.up-legend i.st-bar--warn { background: var(--unknown); }
.up-legend i.st-bar--bad { background: var(--danger); }
.up-legend i.st-bar--none { background: rgb(var(--tint) / .12); }
/* ==========================================================================
   44. Details: "Ping" tab (worldping.js), pop-up corner buttons, and the
       full server page (server.html). Same cards and labels as the other tabs.
   ========================================================================== */
/* Pop-up corner: Open full page + Close */
.sheet-corner { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 8px; }
.sheet-corner .sheet-close { position: static; }
.sheet-expand { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: rgb(var(--panel) / .65); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color var(--t) var(--ease), transform .45s var(--spring-snappy, var(--ease-out)); }
.sheet-expand:hover { background: rgb(var(--panel) / .9); transform: scale(1.06); }
.sheet-expand:focus-visible { outline: 2px solid rgb(var(--lantern-rgb) / .8); outline-offset: 2px; }
.sheet-expand svg { width: 16px; height: 16px; }
.sheet.is-morphing .sheet-expand { animation: fade-up .4s var(--ease-out) .3s both; }

/* ---------- The full server page ---------- */
.sv-page { padding: calc(var(--header-h) + 18px) 0 clamp(48px, 7vw, 96px); }
.sv-page-wrap { display: grid; gap: 16px; }
.sv-crumbs { margin: 0; }
.sheet.sheet--page { position: relative; width: 100%; max-width: none; max-height: none; margin: 0; overflow: visible; opacity: 1; transform: none; transition: none; border-radius: var(--r-xl); }
.sheet--page .sheet-scroll { max-height: none; overflow: visible; }
.sheet--page .sheet-hero { aspect-ratio: 16 / 5; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.sheet--page .sheet-body { margin-top: -110px; padding-bottom: clamp(28px, 4vw, 48px); }
.sheet--page .sk-title { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; letter-spacing: -.035em; }
.sheet--page .sk-tabs { top: calc(var(--header-h) + 4px); border-radius: 0; }
.site-header.is-hidden ~ main .sheet--page .sk-tabs { top: 0; }
.sheet--page.is-stuck .sk-tabs { border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 16px 32px -20px rgb(0 0 0 / .55); }
.sheet--page .sk-panel { min-height: 40vh; }
.sheet--page.is-missing { min-height: 0; }
.sv-missing { display: grid; justify-items: start; gap: 12px; padding: clamp(28px, 5vw, 56px); }
.sv-missing h1 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.03em; }
.sv-missing p { color: var(--ink-2); }
.sv-others { display: grid; gap: 12px; margin-top: 12px; }
.sv-others[hidden] { display: none; }
.sv-others-h { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sv-others-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sv-other { display: grid; grid-template-columns: 76px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: var(--r-lg); color: inherit; background: var(--l2); border: 1px solid var(--line); transition: border-color var(--t) var(--ease), transform .45s var(--spring-snappy, var(--ease-out)); }
.sv-other:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); transform: translateY(-2px); }
.sv-other-art { display: block; width: 76px; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; }
.sv-other-art .pic, .sv-other-art img { width: 100%; height: 100%; object-fit: cover; }
.sv-other-t { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.sv-other-t b { font-size: 16px; font-weight: 680; letter-spacing: -.02em; }
.sv-other-t small { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sv-other-t .pill { transform: scale(.9); transform-origin: left center; }
.sv-other-go { width: 16px; height: 16px; color: var(--ink-3); transition: transform .35s var(--ease-out); }
.sv-other:hover .sv-other-go { transform: translateX(3px); color: var(--ink); }
@media (max-width: 700px) {
  .sv-page { padding-top: calc(var(--header-h) + 10px); }
  .sv-page-wrap { padding-left: 0; padding-right: 0; gap: 12px; }
  .sv-crumbs { padding: 0 var(--gutter, 16px); }
  .sheet.sheet--page { border-radius: 0; border-left: 0; border-right: 0; }
  .sheet--page .sheet-hero { aspect-ratio: 16 / 9; border-radius: 0; }
  .sheet--page .sheet-body { margin-top: -64px; }
  .sv-others { padding: 0 var(--gutter, 16px); }
}

/* ---------- Ping tab ---------- */
.wp { --g: var(--ink-3); --g-good: #9ad66a; display: grid; gap: 14px; }
[data-theme="light"] .wp, [data-theme="light"] .wp-mini { --g-good: #4f8f1f; }
.wp--great { --g: var(--online); } .wp--good { --g: var(--g-good, #9ad66a); } .wp--fair { --g: var(--unknown); } .wp--poor { --g: var(--danger); } .wp--na { --g: var(--ink-3); }
.wp-head { display: flex; gap: 12px; align-items: center; }
.wp-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; color: var(--moon); background: rgb(var(--moon-rgb) / .12); }
.wp-ic svg { width: 18px; height: 18px; }
.wp-head p { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-wp-body] { display: grid; gap: 14px; }
.wp-loading { display: grid; gap: 10px; }
.wp-loading i { display: block; height: 64px; border-radius: var(--r-lg); background: linear-gradient(100deg, rgb(var(--tint) / .04) 35%, rgb(var(--tint) / .1) 50%, rgb(var(--tint) / .04) 65%) 0 0 / 250% 100%; animation: skel 1.4s ease-in-out infinite; }
.wp-loading i:nth-child(2) { height: 220px; }
.wp-empty, .wp-note { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); font-size: 13.5px; color: var(--ink-2); border: 1px dashed var(--line-2); }
.wp-note { border-style: solid; border-color: color-mix(in srgb, var(--unknown) 35%, transparent); background: color-mix(in srgb, var(--unknown) 8%, transparent); }
.wp-empty > svg, .wp-note > svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.wp-empty .btn { margin-left: auto; }
.wp-empty .btn svg { width: 14px; height: 14px; }

/* Your region */
.wp-you { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; padding: 18px 20px; border-radius: var(--r-lg); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--g) 16%, transparent), transparent 60%), var(--l2); border: 1px solid color-mix(in srgb, var(--g) 30%, var(--line)); }
.wp-you-main { display: grid; gap: 4px; }
.wp-you-k { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.wp-you-k svg { width: 14px; height: 14px; color: var(--g); }
.wp-you-n { font-size: clamp(40px, 6vw, 56px); font-weight: 740; line-height: 1; letter-spacing: -.045em; color: var(--g); font-variant-numeric: tabular-nums; }
.wp-you-n i, .wp-ms b i, .wp-mini-n b i { margin-left: 4px; font-style: normal; font-size: .38em; font-weight: 650; letter-spacing: 0; color: var(--ink-3); }
.wp-you-n--na { color: var(--ink-3); }
.wp-you-v { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.wp-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--g); background: color-mix(in srgb, var(--g) 14%, transparent); border: 1px solid color-mix(in srgb, var(--g) 30%, transparent); }
.wp-pick { display: grid; gap: 4px; font-size: 12px; color: var(--ink-3); }
.wp-select { position: relative; display: inline-flex; align-items: center; }
.wp-select select { appearance: none; -webkit-appearance: none; height: 38px; min-width: 190px; padding: 0 34px 0 14px; border-radius: var(--r-pill); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--l1); border: 1px solid var(--line-2); cursor: pointer; }
.wp-select select:focus-visible { outline: 2px solid rgb(var(--lantern-rgb) / .7); outline-offset: 2px; }
.wp-select svg { position: absolute; right: 12px; width: 14px; height: 14px; color: var(--ink-3); pointer-events: none; }

/* Summary */
.wp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wp-stat { --g: var(--moon); display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--l2); border: 1px solid var(--line); min-width: 0; }
.wp-stat.wp--great { --g: var(--online); } .wp-stat.wp--good { --g: var(--g-good); } .wp-stat.wp--fair { --g: var(--unknown); } .wp-stat.wp--poor { --g: var(--danger); }
.wp-stat-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; color: var(--g); background: color-mix(in srgb, var(--g) 13%, transparent); }
.wp-stat-ic svg { width: 15px; height: 15px; }
.wp-stat > span:last-child { display: grid; min-width: 0; }
.wp-stat small { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wp-stat b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-stat em { font-style: normal; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-stat--location b, .wp-stat--location em { white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }
@media (max-width: 760px) {
  .wp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-stat--location { grid-column: 1 / -1; }
}

/* Map */
.wp-map { position: relative; aspect-ratio: 1440 / 550; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(80% 90% at 50% 40%, rgb(var(--moon-rgb) / .07), transparent 70%), var(--l2); border: 1px solid var(--line); }
.wp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wp-land { fill: rgb(var(--tint) / .1); }
[data-theme="light"] .wp-land { fill: rgb(20 30 50 / .09); }
.wp-arc { fill: none; stroke: var(--g); stroke-width: 1.6; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wp.is-first .wp-arc { stroke-dashoffset: 1; animation: wp-draw 2.8s cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: calc(.6s + var(--i) * 180ms); }
@keyframes wp-draw { to { stroke-dashoffset: 0; } }
.wp-pin, .wp-here, .wp-home { position: absolute; translate: -50% -50%; }
.wp-pin { z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 999px; font-size: 12px; font-weight: 720; color: var(--ink); background: color-mix(in srgb, var(--l1) 82%, transparent); border: 1px solid color-mix(in srgb, var(--g) 45%, var(--line-2)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .8s cubic-bezier(.22, 1, .36, 1), box-shadow .8s cubic-bezier(.22, 1, .36, 1), opacity .8s cubic-bezier(.22, 1, .36, 1); }
.wp-pin small { margin-left: 2px; font-size: .72em; font-weight: 650; color: var(--ink-3); }
.wp-flag { flex: none; font-size: 15px; line-height: 1; }
.wp-pin .wp-flag { font-size: 13px; }
.wp-pin:hover, .wp-pin.is-sel { transform: scale(1.05); z-index: 3; box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 22%, transparent); }
.wp-pin:focus-visible { outline: 2px solid rgb(var(--lantern-rgb) / .9); outline-offset: 2px; z-index: 3; }
.wp-pin.is-me { border-width: 2px; }
.wp.is-first .wp-pin { animation: wp-pop 1.4s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.9s + var(--i) * 160ms); }
@keyframes wp-pop { from { opacity: 0; scale: .96; filter: blur(3px); } }
.wp-lead { stroke: rgb(var(--tint) / .28); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wp-pin.is-fastest { border-color: color-mix(in srgb, var(--lantern) 65%, transparent); }
.wp-pin svg { position: static; flex: none; }
.wp.is-first .wp-lead { animation: skc-fade 1.8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .9s; }
@media (max-width: 600px) {
  .wp-pin { padding: 1px 5px 1px 3px; font-size: 10px; gap: 3px; }
  .wp-pin .wp-flag { font-size: 12px; }
}
.wp-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: var(--ink-3); }
.wp-key span { display: inline-flex; align-items: center; gap: 6px; }
.wp-key span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--g); }
.wp-key .wp-key-server::before { display: none; }
.wp-key .wp-key-server svg { width: 13px; height: 13px; color: var(--lantern); }
.wp-key .wp-key-you::before { width: 9px; height: 9px; background: rgb(var(--lantern-rgb) / .2); border: 2px solid var(--lantern); }

/* Regions */
.wp-list-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.wp-list-h h4 { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wp-sort { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--l2); border: 1px solid var(--line); }
.wp-sort button { height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: var(--ink-3); transition: color var(--t) var(--ease), background-color var(--t) var(--ease); }
.wp-sort button:hover { color: var(--ink); }
.wp-sort button[aria-pressed="true"] { color: var(--ink); background: var(--l3); box-shadow: 0 1px 0 rgb(var(--tint) / .06) inset, 0 2px 8px -4px rgb(0 0 0 / .4); }
[data-theme="light"] .wp-sort button[aria-pressed="true"] { background: #fff; }
.wp-list { display: grid; gap: 2px; padding: 6px; border-radius: var(--r-lg); background: var(--l2); border: 1px solid var(--line); }
.wp-row { border-radius: var(--r-md); transition: background-color var(--t) var(--ease), box-shadow .3s var(--ease); }
.wp.is-first .wp-row { animation: fade-up .4s var(--ease-out) both; animation-delay: calc(.2s + var(--i) * 35ms); }
.wp-row:hover { background: rgb(var(--tint) / .035); }
.wp-row.is-open { background: var(--l1); box-shadow: 0 0 0 1px var(--line-2), 0 12px 30px -18px rgb(0 0 0 / .6); }
.wp-row.is-flash { animation: rx-flash 1.2s var(--ease); }
.wp-row-b { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(0, 1.3fr) 90px 92px 16px; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border-radius: var(--r-md); text-align: left; color: inherit; }
.wp-row-b:focus-visible { outline: 2px solid rgb(var(--lantern-rgb) / .7); outline-offset: -2px; }
.wp-where { display: grid; min-width: 0; }
.wp-where b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 640; white-space: nowrap; }
.wp-where small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-tag { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--lantern); background: rgb(var(--lantern-rgb) / .12); }
.wp-tag svg { width: 11px; height: 11px; }
.wp-tag--fastest { color: var(--lantern); background: color-mix(in srgb, var(--lantern) 13%, transparent); }
.wp-bar { position: relative; display: block; height: 6px; border-radius: 6px; background: rgb(var(--tint) / .07); overflow: hidden; }
.wp-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--w)); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--g) 55%, transparent), var(--g)); }
.wp.is-first .wp-bar i { animation: pl-grow .8s var(--ease-out) both; animation-delay: calc(.3s + var(--i) * 35ms); }
.wp-line { display: block; width: 100%; height: 24px; overflow: visible; }
.wp-line .wp-stroke, .wp-big .wp-stroke { fill: none; stroke: var(--g); stroke-width: 1.6; stroke-linejoin: round; opacity: .85; }
.wp-ms { display: grid; justify-items: end; line-height: 1.15; }
.wp-ms b { font-size: 17px; font-weight: 720; color: var(--g); font-variant-numeric: tabular-nums; }
.wp-ms small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.wp-chev svg { width: 16px; height: 16px; color: var(--ink-3); transition: transform .4s var(--spring-snappy, var(--ease-out)); }
.wp-row.is-open .wp-chev svg { transform: rotate(180deg); color: var(--ink); }
.wp-detail { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--ease-out), visibility 0s .5s; }
.wp-detail.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .55s var(--ease-out), visibility 0s; }
.wp-detail-in { overflow: hidden; min-height: 0; }
.wp-detail-pad { display: grid; gap: 12px; padding: 4px 14px 16px; opacity: 0; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .4s var(--ease-out); }
.wp-detail.is-open .wp-detail-pad { opacity: 1; transform: none; transition: opacity .45s var(--ease) .1s, transform .55s var(--ease-out) .05s; }
.wp-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.wp-facts div { padding: 9px 11px; border-radius: var(--r-sm); background: var(--l2); border: 1px solid var(--line); }
.wp-facts dt { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.wp-facts dd { margin-top: 2px; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.wp-chart { padding: 10px 12px 8px; border-radius: var(--r-md); background: var(--l2); border: 1px solid var(--line); }
.wp-big { display: block; width: 100%; height: 72px; overflow: visible; }
.wp-big .wp-area { fill: color-mix(in srgb, var(--g) 14%, transparent); }
.wp-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--ink-3); }
.wp-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.wp-warn svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--unknown); }
.wp-foot { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.wp-foot .link { font-size: inherit; }
@media (max-width: 760px) { .wp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .wp-you { padding: 16px; }
  .wp-pick, .wp-select select { width: 100%; }
  .wp-row-b { grid-template-columns: minmax(0, 1fr) 80px 14px; row-gap: 8px; padding: 10px; }
  .wp-row-b .wp-bar { grid-column: 1 / -1; grid-row: 2; }
  .wp-row-b .wp-line { display: none; }
  .wp-ms { grid-row: 1; grid-column: 2; }
  .wp-chev { grid-row: 1; grid-column: 3; }
  .wp-detail-pad { padding: 2px 10px 14px; }
  .wp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "Ping near you" chip on the Overview tab */
.wp-mini { --g: var(--ink-3); --g-good: #9ad66a; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 12px 16px 12px 12px; border-radius: var(--r-lg); text-align: left; color: inherit; background: linear-gradient(100deg, color-mix(in srgb, var(--g) 10%, transparent), transparent 55%), var(--l2); border: 1px solid var(--line); transition: border-color var(--t) var(--ease), transform .45s var(--spring-snappy, var(--ease-out)); }
.wp-mini[hidden] { display: none; }
.wp-mini:hover { border-color: color-mix(in srgb, var(--g) 40%, var(--line-2)); transform: translateY(-1px); }
.wp-mini:focus-visible { outline: 2px solid rgb(var(--lantern-rgb) / .7); outline-offset: 2px; }
.wp-mini-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--g); background: color-mix(in srgb, var(--g) 14%, transparent); }
.wp-mini-ic svg { width: 17px; height: 17px; }
.wp-mini-t { display: grid; min-width: 0; }
.wp-mini-t small { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wp-mini-t b { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-mini-n { display: grid; justify-items: end; line-height: 1.1; }
.wp-mini-n b { font-size: 22px; font-weight: 740; letter-spacing: -.03em; color: var(--g); font-variant-numeric: tabular-nums; }
.wp-mini-n small { font-size: 11.5px; color: var(--ink-3); }
.wp-mini-go { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.wp-mini-go svg { width: 14px; height: 14px; transition: transform .35s var(--ease-out); }
.wp-mini:hover .wp-mini-go svg { transform: translateX(3px); }
@media (max-width: 520px) { .wp-mini-go { display: none; } .wp-mini { grid-template-columns: auto minmax(0, 1fr) auto; } }

@media (prefers-reduced-motion: reduce) {
  .wp .wp-arc, .wp .wp-pin, .wp .wp-row, .wp .wp-bar i, .wp .wp-lead, .wp-loading i { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* Leave room for the pop-up's corner buttons when the tab bar is stuck to the top */
.sheet.is-stuck:not(.sheet--page) .sk-tabs { padding-right: calc(clamp(20px, 4vw, 44px) + 52px); }
.sheet.is-stuck:not(.sheet--page):has(.sheet-expand) .sk-tabs { padding-right: calc(clamp(20px, 4vw, 44px) + 102px); }
/* Four tabs on small phones: share the width, scroll sideways if a label still doesn't fit */
@media (max-width: 640px) {
  .sk-tabs-row { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sk-tabs-row::-webkit-scrollbar { display: none; }
  .sk-tab { flex: 1 0 auto; justify-content: center; padding: 0 10px; font-size: 13.5px; }
}
/* The full page has no inner scroll box, so clip glows and pulses that would widen the page */
.sv-page, .sheet--page .sheet-scroll { overflow-x: clip; }
/* Panel contents never force the panel wider than its column (long names, nowrap labels) */
.sk-panel { grid-template-columns: minmax(0, 1fr); }
.sk-panel > * { min-width: 0; }
@media (max-width: 700px) {
  .sv-page-wrap.wrap { width: 100%; max-width: none; margin: 0; }
}

/* Server cards: the artwork fade and the body share one background colour, so hover
   can't split the card in half or leave a seam where the image ends. */
.server, .server:hover { --card-bg: var(--l1); background: var(--card-bg); }
@media (hover: hover) {
  .server:hover { --card-bg: var(--l2); }
  /* Only --card-bg animates: background-color would interpolate on its own curve and
     drift out of step with the gradient mid-hover, flashing a seam. */
  .server { transition: transform .55s var(--spring-snappy, var(--ease-out)), box-shadow .55s var(--ease-out), border-color var(--t) var(--ease), --card-bg var(--t) var(--ease); }
}
@property --card-bg { syntax: "<color>"; inherits: true; initial-value: transparent; }
.server-art { background: var(--card-bg); }
.server-art::after {
  background: linear-gradient(180deg, rgb(0 0 0 / .25) 0%, transparent 30%, transparent 45%,
    color-mix(in srgb, var(--card-bg) 70%, transparent) 78%, var(--card-bg) 88%);
}
[data-theme="light"] .server-art::after { background: linear-gradient(180deg, rgb(0 0 0 / .25) 0%, transparent 35%); }
/* The artwork box can land on a fractional pixel, and the compositor then leaks a row of
   raw image at its bottom edge (a hairline that flashes while the hover transform runs).
   Masking the last 2px away lets the card's own background own that edge instead. */
.server-art {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 2px), transparent calc(100% - 1px));
  mask-image: linear-gradient(#000 calc(100% - 2px), transparent calc(100% - 1px));
}

/* ----- Header: a calmer capsule that condenses as you scroll ----- */
.site-header .bar {
  gap: 14px;
  padding: 0 10px 0 18px;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease),
    width .5s var(--ease), -webkit-backdrop-filter .5s var(--ease), backdrop-filter .5s var(--ease);
}
.site-header.is-scrolled .bar, .menu-open .site-header .bar {
  width: min(100% - 24px, var(--wrap));
  background: rgb(var(--panel) / .82);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  backdrop-filter: blur(26px) saturate(175%);
}
/* Light panels are close to the page colour, so they need more fill to stay readable */
[data-theme="light"] .site-header.is-scrolled .bar, [data-theme="light"].menu-open .site-header .bar { background: rgb(var(--panel) / .96); }
.brand small { font-size: 12.5px; letter-spacing: 0; align-self: center; }
/* The links read as one group; the Discord and theme controls as another */
.nav .btn { margin-left: 14px; }
.nav .theme-wrap { margin-left: 8px; }
.theme-btn { background: transparent; border-color: transparent; }
.theme-btn:hover { background: rgb(var(--tint) / .1); border-color: rgb(var(--tint) / .12); }
.nav a[aria-current="page"], .nav a.is-active { font-weight: 640; }
@media (max-width: 860px) {
  .site-header .bar { padding: 0 8px 0 16px; }
}
/* ==========================================================================
   45. Rules: "What changed" as its own section below the rules
       (outside the side navigation, reading progress and search)
   ========================================================================== */
.rules-layout { padding-bottom: var(--s-5); }
.rules-chg { padding-bottom: clamp(var(--s-6), 8vw, var(--s-7)); scroll-margin-top: calc(var(--header-h) + 16px); }
.rules-chg-in { padding: clamp(20px, 3vw, 36px); border-radius: var(--r-xl); }
.rules-chg-h { display: flex; align-items: flex-start; gap: 14px; margin-bottom: var(--s-3); }
.rules-chg-h .tile { margin-top: 2px; }
.rules-chg-h > div { flex: 1; min-width: 0; }
.rules-chg-h p { margin-top: 4px; font-size: 14.5px; color: var(--ink-3); }
.rules-chg-h .g-count { margin-top: 6px; white-space: nowrap; }
.rules-chg .chg-filter { margin-bottom: var(--s-3); }
.rules-chg .ue-card { background: var(--l2); box-shadow: none; }
@media (max-width: 560px) {
  .rules-chg-h { flex-wrap: wrap; }
  .rules-chg-h .g-count { margin-left: 58px; margin-top: 0; }
}

/* ==========================================================================
   46. Support: "Open a ticket on Discord"
   ========================================================================== */
.hc-ticket { align-items: start; background: linear-gradient(160deg, rgba(88, 101, 242, .12), transparent 45%), var(--l1); border-color: rgba(140, 150, 255, .2); }
.tk-intro .dc-logo { width: 52px; height: 52px; }
.tk-intro .dc-logo svg { width: 28px; height: 28px; }
.tk-intro .lede { max-width: 40ch; }
.tk-meta { gap: 14px; margin-top: 4px; }
.tk-meta li { align-items: flex-start; gap: 12px; }
.tk-meta li > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--lantern); }
.tk-meta li > span { display: grid; gap: 1px; }
.tk-meta b { font-weight: 640; color: var(--ink); }
.tk-meta small { font-size: 13.5px; color: var(--ink-3); }
.tk-actions { margin-top: 6px; }
.tk-actions .btn svg { width: 18px; height: 18px; }
.hc-ticket .dc-stats { margin-top: 2px; }
.tk-how { display: grid; gap: var(--s-3); min-width: 0; }
.tk-steps { display: grid; gap: 8px; }
.tk-steps li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--l2); border: 1px solid var(--line); }
.tk-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--lantern); background: rgb(var(--lantern-rgb) / .12); border: 1px solid rgb(var(--lantern-rgb) / .28); }
.tk-steps li > span:last-child { display: grid; gap: 1px; min-width: 0; }
.tk-steps b { font-weight: 640; }
.tk-steps small { font-size: 13.5px; color: var(--ink-3); }
.tk-cats-wrap .rx-k { margin-bottom: 10px; }
.tk-cats { display: grid; gap: 6px; }
.tk-cat { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: var(--r-sm); background: rgb(var(--tint) / .03); border: 1px solid var(--line); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.tk-cat b { font-size: 14px; font-weight: 640; }
.tk-cat span { font-size: 13.5px; color: var(--ink-3); }
.tk-cat.is-on { border-color: rgb(88 101 242 / .55); background: rgb(88 101 242 / .1); }
.tk-cat.is-on b { color: var(--ink); }
.tk-cat.is-flash { animation: rx-flash 1.4s var(--ease); }
@media (max-width: 560px) {
  .tk-cat { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tk-actions .btn { flex: 1 1 100%; }
}
[data-theme="light"] .hc-ticket { background: linear-gradient(160deg, rgba(88, 101, 242, .1), transparent 45%), var(--l1); }

/* ==========================================================================
   47. Phone fixes (2026-10 mobile review)
   ========================================================================== */
/* Server addresses: long ones (.ip--long) use an icon-only copy button on narrow phones so the
   address isn't cut off (the button keeps its "Copy server address …" label for screen readers) */
@media (max-width: 420px) {
  .ip--long .copy-btn { min-width: 0 !important; width: var(--h, 44px); padding: 0; justify-content: center; }
  .ip--long .copy-btn .txt { display: none; }
  .ip--long code { font-size: 14px; }
  .sv-ip .ip--long code { font-size: 13.5px; }
}
/* Rules: the search bar sticks right under the category chips (it used to overlap them when the
   header was showing, and leave a gap when it wasn't). One compact row on phones. */
@media (max-width: 900px) {
  .rtools { top: 61px; flex-wrap: nowrap; gap: 6px; }
  .site-header:not(.is-hidden) ~ main .rtools { top: 129px; }
  .rtools .field--search { flex: 1 1 auto; min-width: 0; }
  .rtools .field--search input { height: 44px; font-size: 14.5px; padding-right: 96px; }
  .rtools .field--search input:placeholder-shown { padding-right: 10px; text-overflow: ellipsis; }
  .rtools .field--search kbd { display: none; }
  .rtools { background: color-mix(in srgb, var(--l1) 97%, transparent); transition: top .5s var(--ease-out), box-shadow .3s var(--ease); }
}
/* Rules: "What changed" header used the full row only when it had an update count */
.rules-chg-h .g-count:empty { display: none; }
@media (max-width: 560px) { .rules-chg-h .g-count { flex-basis: 100%; } }
/* Footer: bigger tap targets on phones, and room so the back-to-top button doesn't cover the last line */
@media (max-width: 700px) {
  .sf-col ul { gap: 2px; }
  .sf-col a { min-height: 40px; }
  .site-footer .legal { padding-bottom: calc(var(--s-4) + 56px); }
}
/* Details tabs on phones: four tabs (with the player count) fit on one row, also when the bar is
   stuck to the top of the pop-up next to the close button ("Open full page" is at the top). */
@media (max-width: 640px) {
  .sk-tab { padding: 0 7px; font-size: 13px; gap: 4px; }
  .sk-tab-n { min-width: 18px; height: 18px; line-height: 18px; padding: 0 4px; font-size: 11px; }
  .sheet.is-stuck:not(.sheet--page) .sheet-expand { display: none; }
  .sheet.is-stuck:not(.sheet--page) .sk-tabs, .sheet.is-stuck:not(.sheet--page):has(.sheet-expand) .sk-tabs { padding-left: 10px; padding-right: 62px; }
  /* Ping tab: let long values wrap instead of cutting them off */
  .wp-stat b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
  .wp-row-b { grid-template-columns: minmax(0, 1fr) minmax(80px, auto) 14px; }
  .wp-ms small { white-space: normal; text-align: right; }
}
/* ==========================================================================
   48. Ping tab v2: gauge, "feels like", living map, spectrum, range bars
   ========================================================================== */
/* Your region: gauge on the left, verdict + what it feels like on the right */
.wp-you { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); align-items: center; gap: 18px 28px; padding: 20px 24px; }
.wp-you-g { position: relative; }
.wp-gauge { display: block; width: 100%; overflow: visible; }
.wp-gauge .wp-gz { fill: none; stroke: var(--g); stroke-width: 12; stroke-linecap: round; opacity: .16; }

.wp-gauge text { font-size: 10px; font-weight: 600; fill: var(--ink-3); }
.wp-gv { fill: none; stroke: var(--g); stroke-width: 12; stroke-linecap: round; stroke-dasharray: var(--f) 1; filter: drop-shadow(0 0 8px var(--g)); }
.wp.is-first .wp-gv { animation: wp-gfill 1.1s var(--ease-out) both .2s; }
@keyframes wp-gfill { from { stroke-dasharray: 0 1; } }
.wp-gdot { fill: var(--l1); stroke: var(--g); stroke-width: 4; }
.wp.is-first .wp-gdot { animation: skc-fade .3s var(--ease) both 1.1s; }
.wp-you-c { position: absolute; left: 0; right: 0; bottom: 4px; display: grid; justify-items: center; gap: 4px; pointer-events: none; }
.wp-you-c .wp-you-n { font-size: clamp(30px, 4.4vw, 40px); }
.wp-you-main { display: grid; gap: 10px; align-content: center; }
.wp-you-v { font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.wp-you-from { font-weight: 500; color: var(--ink-3); }
.wp-feel { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-feel li { display: inline-grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; padding: 6px 12px 6px 8px; border-radius: 12px; background: rgb(var(--tint) / .04); border: 1px solid var(--line); }
.wp-feel svg { grid-row: span 2; width: 18px; height: 18px; padding: 3px; border-radius: 50%; }
.wp-feel span { font-size: 13px; font-weight: 640; line-height: 1.2; }
.wp-feel small { font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.wp-feel--ok svg { color: #06240f; background: var(--online); }
.wp-feel--meh svg { color: #2a1d00; background: var(--unknown); }
.wp-feel--bad svg { color: #2a0705; background: var(--danger); }
.wp-you .wp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
@media (max-width: 640px) {
  .wp-you { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; gap: 14px; }
  .wp-you-g { max-width: 250px; margin: 0 auto; width: 100%; }
  .wp-you-main { justify-items: start; }
  .wp-you .wp-pick { width: 100%; }
  .wp-you .wp-pick .wp-select { flex: 1; }
}

/* The map: graticule, live night shading, dotted land, server beacon, round-trip packets */
.wp-map { aspect-ratio: 1440 / 550; background: radial-gradient(70% 90% at 50% 45%, rgb(var(--moon-rgb) / .09), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--l2) 70%, #0a1a33), var(--l2)); }
[data-theme="light"] .wp-map { background: radial-gradient(70% 90% at 50% 45%, rgb(var(--moon-rgb) / .1), transparent 70%), linear-gradient(180deg, #eaf0fa, var(--l2)); }
.wp-grat { fill: none; stroke: rgb(var(--tint) / .05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wp-night { fill: #00040c; opacity: .62; }
[data-theme="light"] .wp-night { fill: #1b2a4a; opacity: .2; }
.wp-land { fill: rgb(var(--tint) / .06); }
.wp-dots { fill: none; stroke: rgb(var(--tint) / .26); stroke-width: 3.4; stroke-linecap: round; }
[data-theme="light"] .wp-dots { stroke: rgb(20 30 50 / .22); }
.wp-arc { stroke-width: 1.5; opacity: .5; transition: opacity .9s cubic-bezier(.22, 1, .36, 1), stroke-width .9s cubic-bezier(.22, 1, .36, 1); }
.wp-arc.is-sel { opacity: .95; stroke-width: 2.4; filter: drop-shadow(0 0 3px var(--g)); }
.wp-arc.is-dim, .wp-lead.is-dim, .wp-pkt.is-dim, .wp-pdot.is-dim { opacity: .12; }
.wp-pin.is-dim { opacity: .45; }
.wp-pdot { fill: var(--g); stroke: var(--l2); stroke-width: 3; }
.wp-pkt { fill: #fff; opacity: .6; filter: drop-shadow(0 0 3px var(--g)); transition: opacity .9s cubic-bezier(.22, 1, .36, 1); }
.wp-pkt.wp--great, .wp-pkt.wp--good { fill: color-mix(in srgb, var(--g) 35%, #fff); }
.wp-srv { position: absolute; z-index: 1; display: grid; place-items: center; width: 0; height: 0; pointer-events: none; }
.wp-srv b { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; color: #1a1206; background: var(--lantern); box-shadow: 0 0 0 4px rgb(var(--lantern-rgb) / .25), 0 0 22px rgb(var(--lantern-rgb) / .7); }
.wp-srv b svg { position: static; inset: auto; width: 15px; height: 15px; }
.wp-srv i { position: absolute; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; border: 1.5px solid rgb(var(--lantern-rgb) / .55); opacity: 0; animation: wp-sonar 7s cubic-bezier(.33, 0, .2, 1) infinite; }
.wp-srv i + i { animation-delay: 3.5s; }
@keyframes wp-sonar { 0% { scale: 1; opacity: 0; } 12% { opacity: .5; } 100% { scale: 2.4; opacity: 0; } }
.wp-here { position: absolute; z-index: 1; display: grid; justify-items: center; gap: 2px; translate: -50% -8px; pointer-events: none; }
.wp-here i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--moon); background: rgb(var(--moon-rgb) / .3); box-shadow: 0 0 0 5px rgb(var(--moon-rgb) / .12); }
.wp-here b { font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--moon); text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.wp-key .wp-key-night::before { width: 14px; height: 9px; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--tint) / .25), #000814); }
.wp-key .wp-key-pkt::before { width: 7px; height: 7px; background: #fff; box-shadow: 0 0 6px var(--online); }
.wp-key .wp-key-you::before { border-color: var(--moon); background: rgb(var(--moon-rgb) / .25); }
@media (max-width: 600px) {
  .wp-map { aspect-ratio: 1440 / 640; }
  .wp-srv b { width: 22px; height: 22px; } .wp-srv b svg { width: 12px; height: 12px; } .wp-srv i { width: 22px; height: 22px; }
  .wp-here b { display: none; }
}

/* Narrow screens: the whole map, with labels in bands above and below it */
.wp-map.is-call .wp-pin { padding: 3px 7px 3px 5px; gap: 3px; font-size: 11px; }
.wp-map.is-call .wp-pin .wp-flag { display: inline; font-size: 11px; }
.wp-map.is-call .wp-pin small { display: none; }
.wp-map.is-call .wp-pin b { color: var(--g); }
.wp-lead--call { fill: none; stroke: var(--g); stroke-width: 1; opacity: .4; stroke-dasharray: 2 3; transition: opacity .9s cubic-bezier(.22, 1, .36, 1); }
.wp-lead--call.is-sel { opacity: .9; stroke-dasharray: none; }
.wp-map.is-call .wp-srv b { width: 20px; height: 20px; box-shadow: 0 0 0 3px rgb(var(--lantern-rgb) / .2), 0 0 10px rgb(var(--lantern-rgb) / .4); }
.wp-map.is-call .wp-srv b svg { width: 11px; height: 11px; }
.wp-map.is-call .wp-srv i { width: 20px; height: 20px; }
.wp-map.is-call .wp-pdot { r: 8px; }

/* Region rows: lowest–highest range behind the average */
.wp-bar s { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: color-mix(in srgb, var(--g) 30%, transparent); }
.wp-bar i { z-index: 1; }
.wp-bar { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .wp-srv i, .wp .wp-gv, .wp .wp-gdot { animation: none !important; }
}
/* ==========================================================================
   49. Uptime tab v2: headline + streaks, date axis, 24-hour day strip,
       downtime-by-hour heat track
   ========================================================================== */
.up-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.up-head { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 640; color: var(--ink); }
.up-head .dot { --c: var(--online); width: 8px; height: 8px; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.up-head[data-state="restarting"] .dot { --c: var(--restarting); }
.up-head[data-state="offline"] .dot { --c: var(--danger); }
.up-ring-wrap::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--online) 14%, transparent), transparent 70%); }
/* Date ticks under the daily bars, one per week */
.up-axis { position: relative; height: 18px; margin-top: -2px; }
.up-axis span { position: absolute; left: calc((var(--i) + .5) / 30 * 100%); translate: -50% 0; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.up-axis span:last-child { left: auto; right: 0; translate: 0 0; color: var(--ink-2); font-weight: 600; }
.up-axis span:first-child { translate: -20% 0; }
/* The selected day as a 24-hour strip */
.up-dd { display: grid; gap: 5px; margin: 2px 0 4px; }
.up-dd-bar { position: relative; height: 14px; border-radius: 7px; overflow: hidden; background: linear-gradient(90deg, color-mix(in srgb, var(--online) 55%, transparent), color-mix(in srgb, var(--online) 75%, transparent)); }
.up-dd-bar i { position: absolute; top: 0; bottom: 0; }
.up-dd-gap { background: repeating-linear-gradient(135deg, rgb(var(--tint) / .1) 0 4px, rgb(var(--tint) / .03) 4px 8px); }
.up-dd-future { background: rgb(var(--tint) / .07); }
.up-dd-o--out, .up-dd-o--open { background: var(--danger); box-shadow: 0 0 10px rgb(var(--danger-rgb) / .6); }
.up-dd-o--planned { background: var(--moon); }
.up-dd-now { width: 2px; margin-left: -1px; background: var(--ink); box-shadow: 0 0 6px rgb(var(--tint) / .7); }
.up-day-d .up-dd-bar { animation: up-dd-in .5s var(--ease-out) both; transform-origin: left; }
@keyframes up-dd-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.up-dd-x { position: relative; height: 15px; }
.up-dd-x span { position: absolute; translate: -50% 0; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.up-dd-x span:first-child { translate: 0 0; } .up-dd-x span:last-child { translate: -100% 0; }
/* Restart track: the background shows when the server tends to be offline */
.up-trk-bar { height: 22px; border-radius: 8px; overflow: visible; background: rgb(var(--tint) / .04); }
.up-trk-heat { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; padding: 2px; border-radius: inherit; }
.up-trk-h { border-radius: 4px; background: color-mix(in srgb, var(--danger) calc(var(--v) * 85%), rgb(var(--tint) / .06)); }
.up-trk-r { z-index: 1; width: 14px; height: 14px; border: 3px solid var(--l2); box-shadow: 0 0 10px rgb(var(--moon-rgb) / .7); }
.up-trk-now { z-index: 2; height: 30px; }
.up-trk-k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11.5px; color: var(--ink-3); }
.up-trk-k i, .up-trk-k b, .up-trk-k em { display: inline-block; flex: none; }
.up-trk-k i { width: 26px; height: 9px; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--tint) / .08), var(--danger)); }
.up-trk-k b { width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: var(--moon); }
.up-trk-k em { width: 2px; height: 12px; margin-left: 6px; border-radius: 2px; background: var(--lantern); }
@media (max-width: 640px) {
  .up-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-head { font-size: 14px; justify-content: center; width: 100%; }
  .up-axis span { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .up-day-d .up-dd-bar { animation: none; } }
/* Phones: map labels show just the number, so they don't crowd each other (flags stay in the list below) */
@media (max-width: 600px) {
  .wp-map .wp-pin { padding: 1px 6px; gap: 0; font-size: 10.5px; }
  .wp-map .wp-pin .wp-flag, .wp-map .wp-pin small { display: none; }
  .wp-pdot { r: 9px; }
}

/* 50. Server cards v2: world portals. Scoped, no build step. */
.servers-grid:has(.server--v2){grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:20px;perspective:none}
@media(min-width:1200px){.servers-grid:has(.server--v2){grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.server.server--v2{height:var(--equal-height,auto);border-radius:22px;border:1px solid var(--line-2);background:var(--card-bg);transform-style:flat;--sv2-x:0;--sv2-y:0;transition:transform .45s var(--ease-out),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.server--v2:hover{--card-bg:var(--l1)}
.server--v2:has(.server-badge--early){border-color:color-mix(in srgb,var(--lantern) 34%,var(--line-2));box-shadow:0 0 0 1px rgb(var(--lantern-rgb) / .08),0 12px 32px -28px rgb(var(--lantern-rgb) / .32)}
/* Donor early access: gold edge light, sparkles over the art, and a phase timeline */
.server--v2[data-ea][data-card-state="online"] .sv-ring,.server--v2[data-ea][data-card-state="loading"] .sv-ring{--ring-rgb:var(--lantern-rgb);opacity:.9;background:conic-gradient(from var(--sv-ang),transparent 0 18%,rgb(var(--lantern-rgb) / .9) 30%,transparent 42% 68%,rgb(var(--lantern-rgb) / .9) 80%,transparent 92%);animation:sv-ring-spin 9s linear infinite}
.server--v2[data-ea][data-card-state="online"]{animation:sv-ea-glow 5s ease-in-out infinite}
.server--v2.is-offscreen,.server--v2.is-offscreen *, .hero.is-offscreen,.hero.is-offscreen *, .dc.is-offscreen,.dc.is-offscreen *{animation-play-state:paused!important}
@keyframes sv-ea-glow{0%,100%{box-shadow:0 0 0 1px rgb(var(--lantern-rgb) / .1),0 14px 36px -30px rgb(var(--lantern-rgb) / .35)}50%{box-shadow:0 0 0 1px rgb(var(--lantern-rgb) / .22),0 20px 50px -26px rgb(var(--lantern-rgb) / .6)}}
.server--v2 .sv-sparks{position:absolute;inset:0;z-index:2;display:none;pointer-events:none}
.server--v2[data-ea][data-card-state="online"] .sv-sparks{display:block}
.sv-sparks i{position:absolute;top:var(--y);left:var(--x);width:3px;height:3px;border-radius:50%;background:#fff6dd;box-shadow:0 0 6px 2px rgb(var(--lantern-rgb) / .8);opacity:0;animation:sv-twinkle 3.8s ease-in-out infinite;animation-delay:var(--d)}
.sv-sparks i:nth-child(1){--x:18%;--y:30%;--d:0s}.sv-sparks i:nth-child(2){--x:34%;--y:18%;--d:1.3s}.sv-sparks i:nth-child(3){--x:56%;--y:36%;--d:2.4s}
.sv-sparks i:nth-child(4){--x:72%;--y:22%;--d:.7s}.sv-sparks i:nth-child(5){--x:85%;--y:42%;--d:1.9s}.sv-sparks i:nth-child(6){--x:46%;--y:12%;--d:3.1s}
@keyframes sv-twinkle{0%,100%{opacity:0;transform:scale(.4) translateY(4px)}45%{opacity:1;transform:scale(1.2) translateY(-2px)}70%{opacity:.4;transform:scale(.8) translateY(-6px)}}
.server--v2 .sv-ea{position:absolute;right:12px;bottom:10px;left:12px;z-index:3;padding:9px 12px 8px;border:1px solid rgb(var(--lantern-rgb) / .42);border-radius:14px;color:#fff;background:linear-gradient(120deg,rgb(var(--lantern-rgb) / .2),rgb(8 12 20 / .74) 58%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),0 0 26px -10px rgb(var(--lantern-rgb) / .6);animation:sv-chip-in .9s cubic-bezier(.22,1,.36,1) both}
.server--v2 .sv-ea[hidden]{display:none}
.sv-ea-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sv-ea-k{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--lantern)}
.sv-ea-k svg{width:11px;height:11px;animation:sv-spark-spin 6s cubic-bezier(.45,0,.55,1) infinite;filter:drop-shadow(0 0 4px rgb(var(--lantern-rgb) / .8))}
@keyframes sv-spark-spin{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.25)}}
.sv-ea-cd{font-size:11.5px;font-weight:650;color:rgb(255 255 255 / .88);font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-ea-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:8px}
.sv-ea-seg{display:grid;gap:5px;min-width:0}
.sv-ea-seg i{position:relative;display:block;height:4px;overflow:hidden;border-radius:4px;background:rgb(255 255 255 / .14)}
.sv-ea-seg i::before{position:absolute;inset:0;content:"";border-radius:inherit;transform-origin:left;transform:scaleX(var(--f,0));background:linear-gradient(90deg,rgb(var(--lantern-rgb) / .6),var(--lantern));box-shadow:0 0 8px rgb(var(--lantern-rgb) / .8);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.sv-ea-seg.is-now i::after{position:absolute;inset:0;content:"";background:linear-gradient(90deg,transparent,rgb(255 255 255 / .55),transparent) 0 0/40% 100% no-repeat;animation:sv-ea-shine 2.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sv-ea-shine{from{background-position:-60% 0}to{background-position:160% 0}}
.sv-ea-seg em{overflow:hidden;font-size:10px;font-style:normal;font-weight:600;color:rgb(255 255 255 / .5);white-space:nowrap;text-overflow:ellipsis}
.sv-ea-seg.is-done em{color:rgb(255 255 255 / .75)}
.sv-ea-seg.is-now em{font-weight:750;color:var(--lantern)}
@media(max-width:480px){.server--v2 .sv-ea{right:10px;bottom:8px;left:10px;padding:8px 10px 7px}}
.server--v2 .server-art{aspect-ratio:16/7.2}
.server--v2 .server-art picture img{animation:none!important;translate:none;scale:1;transform:scale(1.055)!important;transition:transform .7s var(--ease-out),filter .4s var(--ease)}
.server--v2 .server-art .pill{top:14px;left:14px;height:30px;background:rgb(8 12 20 / .82);border-color:rgb(255 255 255 / .22);color:#fff}
.server--v2 .server-badge{top:14px;right:14px;max-width:48%;height:auto;min-height:28px;padding:5px 10px;font-size:11px;line-height:1.25}
@keyframes sv-early-glow{0%,100%{border-color:rgb(var(--lantern-rgb) / .45);box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),0 0 9px 1px rgb(var(--lantern-rgb) / .18)}50%{border-color:rgb(var(--lantern-rgb) / .82);box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),0 0 22px 3px rgb(var(--lantern-rgb) / .45)}}
.server--v2 .server-body,[data-theme="light"] .server--v2 .server-body{margin-top:0;padding:18px;gap:14px}
.server--v2 .sv-head,[data-theme="light"] .server--v2 .sv-head{margin-top:0!important;gap:10px}
.server--v2 .sv-title{gap:5px}
.server--v2 .server-name{font-size:clamp(24px,2.5vw,34px);line-height:1.08;overflow-wrap:anywhere}
.server--v2 .server-best,[data-theme="light"] .server--v2 .server-best,.server--v2 .server-tagline{color:var(--ink-2);white-space:normal;font-size:13px;line-height:1.45}
.server--v2 .server-best::before{display:none}
.server--v2 .sv-info{height:44px;padding:0 14px;background:color-mix(in srgb,var(--accent) 8%,var(--l2));border-color:color-mix(in srgb,var(--accent) 25%,var(--line-2));color:var(--ink)}
.server--v2 .sv-icon.has-icon{display:block;width:52px;height:52px;border-radius:15px;background:color-mix(in srgb,var(--accent) 12%,var(--l2));border-color:color-mix(in srgb,var(--accent) 34%,var(--line-2));box-shadow:0 8px 22px -10px color-mix(in srgb,var(--accent) 46%,transparent),inset 0 1px 0 rgb(255 255 255 / .1)}
.server--v2 .sv-icon img{object-fit:cover}
.server--v2 .sv-specs{grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.4fr);border:0;border-radius:0;background:none}
.server--v2 .sv-specs>div{padding:0 10px;gap:6px}
.server--v2 .sv-specs>div:first-child{padding-left:0}
.server--v2 .sv-specs small{font-size:7px;letter-spacing:.04em;white-space:nowrap}
.server--v2 .sv-specs b{font-size:13px;white-space:normal;overflow-wrap:anywhere}
.server--v2 .sv-status{min-height:var(--equal-status-height,0px);padding:14px;border:1px solid color-mix(in srgb,var(--accent) 15%,var(--line))!important;border-radius:15px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 68%),var(--l2)!important;gap:9px}
/* Live card states: the whole card reflects what the server is doing right now */
@property --sv-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.server--v2{--st:var(--restarting);--st-rgb:255 179 71}
.server--v2[data-card-state="wipe"]{--st:#69dfc8;--st-rgb:76 210 187}
.server--v2[data-card-state="offline"]{--st:var(--danger);--st-rgb:var(--danger-rgb)}
.server--v2[data-card-state="maintenance"]{--st:var(--moon);--st-rgb:var(--moon-rgb)}
.server--v2:is([data-card-state="wipe"],[data-card-state="maintenance"],[data-card-state="restarting"],[data-card-state="offline"]){border-color:rgb(var(--st-rgb) / .38);animation:sv-card-glow 4.5s ease-in-out infinite}
.server--v2:is([data-card-state="wipe"],[data-card-state="maintenance"],[data-card-state="restarting"],[data-card-state="offline"]) .sv-status{border-color:rgb(var(--st-rgb) / .3)!important;background:linear-gradient(120deg,rgb(var(--st-rgb) / .1),transparent 70%),var(--l2)!important}
.server--v2:is([data-card-state="wipe"],[data-card-state="maintenance"]) :is(.sv2-live-label,.sv-word){color:var(--st)}
@keyframes sv-card-glow{0%,100%{box-shadow:0 0 0 1px rgb(var(--st-rgb) / .06),0 14px 34px -30px rgb(var(--st-rgb) / .35)}50%{box-shadow:0 0 0 1px rgb(var(--st-rgb) / .16),0 18px 44px -26px rgb(var(--st-rgb) / .55)}}
.server--v2 .sv-status:not([data-state="loading"]) .sv-spin{display:none}
.server--v2 .server-art picture img{transition:transform .7s var(--ease-out),filter 1.1s cubic-bezier(.22,1,.36,1)}
.server.server--v2[data-card-state="wipe"] .server-art picture img{filter:saturate(.35) brightness(.62) blur(1.5px)}
.server.server--v2[data-card-state="restarting"] .server-art picture img{filter:saturate(.45) brightness(.55)}
.server.server--v2[data-card-state="offline"] .server-art picture img{filter:grayscale(.9) brightness(.42)}
.server.server--v2[data-card-state="maintenance"] .server-art picture img{filter:saturate(.4) brightness(.5) hue-rotate(-10deg)}
/* Rotating light around the card edge */
.server--v2 .sv-ring{position:absolute;inset:0;z-index:5;padding:1.5px;border-radius:inherit;pointer-events:none;opacity:0;background:conic-gradient(from var(--sv-ang),transparent 0 60%,rgb(var(--ring-rgb,var(--st-rgb)) / .95) 82%,transparent 97%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .9s cubic-bezier(.22,1,.36,1)}
.server--v2[data-card-state="wipe"] .sv-ring{opacity:1;animation:sv-ring-spin 5.5s linear infinite}
.server--v2[data-card-state="restarting"] .sv-ring{opacity:1;animation:sv-ring-spin 2.4s linear infinite}
.server--v2[data-card-state="offline"] .sv-ring{opacity:.55;background:linear-gradient(rgb(var(--st-rgb) / .3),rgb(var(--st-rgb) / .3))}
.server--v2[data-card-state="maintenance"] .sv-ring{opacity:.9;background:conic-gradient(from var(--sv-ang),transparent 0 20%,rgb(var(--st-rgb) / .8) 25%,transparent 30% 70%,rgb(var(--st-rgb) / .8) 75%,transparent 80%);animation:sv-ring-spin 8s linear infinite}
.server--v2[data-mood="restart-soon"] .sv-ring{--ring-rgb:255 179 71;opacity:.75;animation:sv-ring-spin 4s linear infinite}
.server--v2[data-mood="wipe-soon"] .sv-ring{--ring-rgb:76 210 187;opacity:.6;animation:sv-ring-spin 7s linear infinite}
.server--v2[data-mood="maint-soon"] .sv-ring{--ring-rgb:var(--moon-rgb);opacity:.6;animation:sv-ring-spin 7s linear infinite}
.server--v2[data-mood="full"]{border-color:rgb(var(--danger-rgb) / .35)}
@keyframes sv-ring-spin{to{--sv-ang:360deg}}
/* Artwork overlay */
.server--v2 .sv-veil{position:absolute;inset:0;z-index:2;display:grid;place-items:center;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .8s cubic-bezier(.22,1,.36,1)}
.server--v2:is([data-card-state="wipe"],[data-card-state="maintenance"],[data-card-state="restarting"],[data-card-state="offline"]) .sv-veil{opacity:1}
.sv-veil::before{position:absolute;inset:0;content:"";background:radial-gradient(70% 95% at 50% 55%,rgb(var(--st-rgb) / .18),rgb(6 9 14 / .5) 72%)}
.sv-veil-in{position:relative;z-index:2;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:11px;row-gap:1px;margin-top:22px;padding:9px 16px 9px 10px;border:1px solid rgb(var(--st-rgb) / .38);border-radius:14px;color:#fff;text-align:left;background:rgb(8 12 20 / .58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 32px -10px rgb(var(--st-rgb) / .55);animation:sv-veil-in .9s cubic-bezier(.22,1,.36,1) both}
.sv-veil-in b{font-size:14px;font-weight:720;letter-spacing:.01em}
.sv-veil-in small{grid-column:2;font-size:11.5px;color:rgb(255 255 255 / .74)}
.sv-veil-ic{display:grid;place-items:center;grid-row:span 2;width:34px;height:34px;border-radius:50%;color:var(--st);background:rgb(var(--st-rgb) / .15);box-shadow:0 0 0 1px rgb(var(--st-rgb) / .25)}
.sv-veil-ic svg{width:18px;height:18px}
@keyframes sv-veil-in{from{opacity:0;transform:translateY(8px) scale(.96);filter:blur(4px)}}
.sv-veil-grid,.sv-veil-scan,.sv-veil-rings,.sv-veil-stripes,.sv-veil-lines,.sv-veil-bits{position:absolute;inset:0;display:none}
/* Wipe: a voxel grid regenerates under a sweeping scan line, steps cycle */
[data-card-state="wipe"] .sv-veil-grid{display:block;background-image:linear-gradient(rgb(var(--st-rgb) / .22) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--st-rgb) / .22) 1px,transparent 1px);background-size:14px 14px;-webkit-mask:linear-gradient(180deg,transparent 0 30%,#000 45% 55%,transparent 70%) 0 0/100% 300% no-repeat;mask:linear-gradient(180deg,transparent 0 30%,#000 45% 55%,transparent 70%) 0 0/100% 300% no-repeat;animation:sv-grid-sweep 3.6s linear infinite}
[data-card-state="wipe"] .sv-veil-scan{display:block;background:linear-gradient(180deg,transparent 48%,rgb(var(--st-rgb) / .9) 50%,transparent 52%) 0 0/100% 300% no-repeat;filter:drop-shadow(0 0 6px rgb(var(--st-rgb) / .8));animation:sv-scan 3.6s linear infinite}
[data-card-state="wipe"] .sv-veil-ic svg{animation:sv-spin 7s linear infinite}
@keyframes sv-scan{from{background-position:0 100%}to{background-position:0 0}}
@keyframes sv-grid-sweep{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
.sv-steps{position:relative;display:grid;min-width:150px;height:1.4em;overflow:hidden}
.sv-steps span{grid-area:1/1;opacity:0;animation:sv-step 7.5s cubic-bezier(.22,1,.36,1) infinite}
.sv-steps span:nth-child(2){animation-delay:2.5s}
.sv-steps span:nth-child(3){animation-delay:5s}
@keyframes sv-step{0%{opacity:0;transform:translateY(70%)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-70%)}}
/* Restarting: rings ripple out from the centre, icon spins */
[data-card-state="restarting"] .sv-veil-rings{display:grid;place-items:center}
.sv-veil-rings i{grid-area:1/1;width:90px;height:90px;border:1.5px solid rgb(var(--st-rgb) / .55);border-radius:50%;opacity:0;animation:sv-ripple 2.7s cubic-bezier(.22,1,.36,1) infinite}
.sv-veil-rings i:nth-child(2){animation-delay:.9s}
.sv-veil-rings i:nth-child(3){animation-delay:1.8s}
[data-card-state="restarting"] .sv-veil-ic svg{animation:sv-spin 1.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sv-ripple{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(2.6)}}
@keyframes sv-spin{to{transform:rotate(360deg)}}
/* Offline: still and quiet, the icon breathes */
[data-card-state="offline"] .sv-veil-ic{animation:sv-breathe 3.2s ease-in-out infinite}
@keyframes sv-breathe{50%{box-shadow:0 0 0 1px rgb(var(--st-rgb) / .4),0 0 18px 2px rgb(var(--st-rgb) / .35)}}
/* Overlay polish: glass top edge, icon halo */
.sv-veil-in::before{position:absolute;inset:0;border-radius:inherit;content:"";pointer-events:none;background:linear-gradient(180deg,rgb(255 255 255 / .09),transparent 45%)}
.sv-veil-ic{position:relative}
.sv-veil-ic::after{position:absolute;inset:-4px;border-radius:50%;content:"";opacity:0;background:conic-gradient(from var(--sv-ang),transparent 0 65%,rgb(var(--st-rgb) / .9) 90%,transparent);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px))}
:is([data-card-state="wipe"],[data-card-state="restarting"]) .sv-veil-ic::after{opacity:1;animation:sv-ring-spin 2.2s linear infinite}
/* Wipe: block fragments drift up as the new world forms */
[data-card-state="wipe"] .sv-veil-bits{display:block}
.sv-veil-bits i{position:absolute;bottom:-12px;left:var(--x);width:7px;height:7px;border-radius:2px;background:rgb(var(--st-rgb) / .55);box-shadow:0 0 8px rgb(var(--st-rgb) / .6);opacity:0;animation:sv-bit 5.4s cubic-bezier(.3,.6,.4,1) infinite;animation-delay:var(--d)}
.sv-veil-bits i:nth-child(1){--x:12%;--d:0s}.sv-veil-bits i:nth-child(2){--x:28%;--d:1.8s}.sv-veil-bits i:nth-child(3){--x:44%;--d:.9s}
.sv-veil-bits i:nth-child(4){--x:61%;--d:2.7s}.sv-veil-bits i:nth-child(5){--x:76%;--d:.4s}.sv-veil-bits i:nth-child(6){--x:89%;--d:3.6s}
@keyframes sv-bit{0%{opacity:0;transform:translateY(0) rotate(0) scale(.6)}15%{opacity:.9}100%{opacity:0;transform:translateY(-150px) rotate(140deg) scale(1)}}
/* Restarting: progress toward the usual return time */
.sv-veil-bar{grid-column:1/-1;display:block;height:3px;margin-top:8px;overflow:hidden;border-radius:3px;background:rgb(255 255 255 / .12)}
.sv-veil-bar i{display:block;height:100%;border-radius:inherit;transform-origin:left;transform:scaleX(var(--p,.05));background:linear-gradient(90deg,rgb(var(--st-rgb) / .6),var(--st));box-shadow:0 0 8px rgb(var(--st-rgb) / .7);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
/* Maintenance: slow-moving work stripes, the wrench turns now and then */
[data-card-state="maintenance"] .sv-veil-stripes{display:block;opacity:.5;background:repeating-linear-gradient(-45deg,rgb(var(--st-rgb) / .14) 0 14px,transparent 14px 28px) 0 0/40px 40px;-webkit-mask:radial-gradient(80% 90% at 50% 55%,transparent 30%,#000 75%);mask:radial-gradient(80% 90% at 50% 55%,transparent 30%,#000 75%);animation:sv-stripes 2.4s linear infinite}
[data-card-state="maintenance"] .sv-veil-ic svg{animation:sv-wrench 3.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sv-stripes{to{background-position:40px 0}}
@keyframes sv-wrench{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-28deg)}80%{transform:rotate(18deg)}90%{transform:rotate(-8deg)}}
/* Offline: faint scan lines that flicker slowly */
[data-card-state="offline"] .sv-veil-lines{display:block;background:repeating-linear-gradient(180deg,rgb(255 255 255 / .05) 0 1px,transparent 1px 4px);animation:sv-flicker 6s steps(1) infinite}
@keyframes sv-flicker{0%,100%{opacity:.7}42%{opacity:.4}44%{opacity:.8}46%{opacity:.5}}
/* Live chip on the artwork while the server is up */
.server--v2 .sv-chip{--ch-rgb:var(--moon-rgb);position:absolute;bottom:12px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 9px;border:1px solid rgb(var(--ch-rgb) / .45);border-radius:999px;font-size:11.5px;font-weight:680;color:#fff;background:rgb(8 12 20 / .72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 18px -6px rgb(var(--ch-rgb) / .6);animation:sv-chip-in .8s cubic-bezier(.22,1,.36,1) both}
.server--v2 .sv-chip[hidden]{display:none}
.sv-chip i{width:7px;height:7px;flex:none;border-radius:50%;background:rgb(var(--ch-rgb));box-shadow:0 0 8px rgb(var(--ch-rgb) / .8)}
@keyframes sv-chip-in{from{opacity:0;transform:translateY(6px) scale(.94);filter:blur(3px)}}
[data-mood="restart-soon"] .sv-chip{--ch-rgb:255 179 71}
[data-mood="restart-soon"] .sv-chip i{animation:sv-blink 1.1s ease-in-out infinite}
[data-mood="maint-soon"] .sv-chip{--ch-rgb:var(--moon-rgb)}
[data-mood="maint-soon"] .sv-chip i{animation:sv-blink 1.6s ease-in-out infinite}
[data-mood="wipe-soon"] .sv-chip{--ch-rgb:76 210 187}
[data-mood="wipe-soon"] .sv-chip i{animation:sv-blink 2s ease-in-out infinite}
[data-mood="full"] .sv-chip{--ch-rgb:var(--danger-rgb)}
[data-mood="busy"] .sv-chip{--ch-rgb:255 179 71}
:is([data-mood="full"],[data-mood="busy"]) .sv-chip i{animation:sv-heat 1.4s ease-in-out infinite}
[data-mood="quiet"] .sv-chip{--ch-rgb:var(--moon-rgb);font-weight:600;color:rgb(255 255 255 / .85)}
[data-mood="quiet"] .sv-chip i{animation:sv-blink 3.2s ease-in-out infinite}
[data-mood="back"] .sv-chip{--ch-rgb:var(--online-rgb);animation:sv-chip-in .8s cubic-bezier(.22,1,.36,1) both,sv-chip-glow 2s ease-in-out .8s 2}
@keyframes sv-blink{50%{opacity:.35;transform:scale(.8)}}
@keyframes sv-heat{50%{box-shadow:0 0 14px 2px rgb(var(--ch-rgb) / .9);transform:scale(1.25)}}
@keyframes sv-chip-glow{50%{box-shadow:0 0 26px -2px rgb(var(--ch-rgb) / .75)}}
/* Busy and full: the capacity bar runs hot */
[data-mood="busy"] .sv-capacity-track>span{background:linear-gradient(90deg,var(--accent),#ffb347)}
[data-mood="full"] .sv-capacity-track>span{background:linear-gradient(90deg,#ffb347,var(--danger));animation:sv-heat-bar 2.4s ease-in-out infinite}
@keyframes sv-heat-bar{50%{filter:brightness(1.35)}}
@media(max-width:480px){.server--v2 .sv-chip{bottom:10px;left:11px;height:26px;font-size:11px}}
.sv2-live-label{font-size:10px;font-weight:650;letter-spacing:.14em;color:var(--ink-3)}
.server--v2 .sv-count .n{display:inline-block;font-size:38px;text-shadow:none;transform-origin:center}
.server--v2 .sv-count .n.is-changing[data-trend="up"]{animation:sv-player-up 1.05s cubic-bezier(.22,1,.36,1)}
.server--v2 .sv-count .n.is-changing[data-trend="down"]{animation:sv-player-down 1.05s cubic-bezier(.22,1,.36,1)}
@keyframes sv-player-up{0%,100%{transform:scale(1)}24%{transform:scale(1.065);text-shadow:0 0 18px rgb(var(--online-rgb) / .48)}68%{transform:scale(1.015);text-shadow:0 0 8px rgb(var(--online-rgb) / .2)}}
@keyframes sv-player-down{0%,100%{transform:scale(1)}24%{transform:scale(1.04);text-shadow:0 0 16px rgb(var(--lantern-rgb) / .38)}68%{transform:scale(1.01);text-shadow:0 0 7px rgb(var(--lantern-rgb) / .16)}}
.server--v2 .sv-top{flex-wrap:wrap;gap:12px}
.server--v2 .sv-big{flex:1 1 auto;min-width:0}
.server--v2 .sv-word{white-space:normal;font-size:19px}
.server--v2 .sv-sub{margin-top:0;font-size:12px}
.server--v2 .sv-capacity-track{height:6px;background:rgb(var(--tint) / .07)}
.server--v2 .sv-capacity-track>span{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,var(--moon)),var(--accent))}
.server--v2 .sv-ip{margin-top:auto}
.sv2-connect-label{display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.12em;font-weight:650;color:var(--ink-3);margin-bottom:8px}
.sv2-connect-label>span:last-child{font-size:11px;letter-spacing:0;font-weight:450}
.server--v2 .sv-ip .ip{border-radius:16px;background:var(--l2);padding:6px 6px 6px 14px}
.server--v2 .sv-ip .copy-btn{--h:44px;min-width:98px;border-radius:12px}
.server--v2 .sv-ip code{font-size:13px}
.server--v2[data-state="offline"] .server-art img{filter:grayscale(.65) brightness(.65)}
.server--v2[data-state="restarting"] .server-art img{filter:saturate(.65)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.server.server--v2:hover,.js .server.server--v2[data-reveal].is-in:hover{transform:translateY(-6px);box-shadow:var(--edge),0 26px 60px -34px color-mix(in srgb,var(--accent) 28%,rgb(0 0 0 / .65))}
.server--v2.sv2-tracking .server-art picture img{transform:translate(calc(var(--sv2-x) * -10px),calc(var(--sv2-y) * -8px)) scale(1.085)!important}
.server--v2[data-state="offline"]:hover .server-art picture img{filter:grayscale(.65) brightness(.7)}
}
.server.server--v2:has(:focus-visible){border-color:color-mix(in srgb,var(--accent) 45%,var(--line-2))}
@media(max-width:899px){.servers-grid:has(.server--v2){grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:480px){
.server--v2 .server-body,[data-theme="light"] .server--v2 .server-body{padding:15px;gap:12px}
.server--v2 .server-art{aspect-ratio:16/8}
.server--v2 .server-name{font-size:25px}
.server--v2 .sv-icon.has-icon{width:44px;height:44px;border-radius:13px}
.server--v2 .sv-status{padding:14px}
.server--v2 .sv-count .n{font-size:38px}
.server--v2 .server-art .pill{top:11px;left:11px}
.server--v2 .server-badge{top:11px;right:11px;left:auto;max-width:48%}
.server--v2 .sv-specs>div{padding-inline:8px}
.server--v2 .sv-specs small{font-size:7px}
.server--v2 .sv-ip .ip--long .copy-btn{min-width:44px!important;width:44px;padding:0}
.server--v2 .sv-ip .ip--long .copy-btn .txt{display:none}
}
@media(max-width:620px){.servers-grid:has(.server--v2){grid-template-columns:minmax(0,1fr);gap:14px}}
@media(prefers-reduced-motion:reduce){
.server.server--v2,.js .server.server--v2[data-reveal].is-in:hover{transform:none!important}
.server--v2 .server-art picture img{transform:none!important;animation:none!important}
}
.glass-lite .server--v2 .server-art picture img{transform:none!important}
@media(forced-colors:active){.server--v2,.server--v2 .sv-status,.server--v2 .sv-info{border:1px solid CanvasText!important}}
/* ---------- 51. Phone menu v2: circular reveal, aurora, live worlds ---------- */
.mobile-menu {
  --mm-ease: cubic-bezier(.16, 1, .3, 1);
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: calc(var(--header-h) + 12px) var(--gutter) max(20px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--l0);
  isolation: isolate;
  visibility: hidden;
  clip-path: circle(0 at var(--mm-x, calc(100% - 40px)) var(--mm-y, 36px));
  transition: clip-path .25s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .25s;
}
.menu-open .mobile-menu {
  visibility: visible;
  clip-path: circle(150vmax at var(--mm-x, calc(100% - 40px)) var(--mm-y, 36px));
  transition: clip-path .85s var(--mm-ease), visibility 0s;
}
/* Do not spend frames animating the covered page while the menu is active. */
.menu-open body > :not(.mobile-menu):not(.site-header),
.menu-open body > :not(.mobile-menu):not(.site-header) * {
  animation-play-state: paused !important;
  transition: none !important;
}
/* Static aurora keeps the colour without animating full-screen blurred layers. */
.mm-fx {
  --mm-gold: .19;
  --mm-blue: .18;
  --mm-green: .07;
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 42% at 100% 0%, rgb(255 196 122 / var(--mm-gold)), transparent 100%),
    radial-gradient(ellipse 75% 52% at 0% 100%, rgb(88 101 242 / var(--mm-blue)), transparent 100%),
    radial-gradient(ellipse 55% 45% at 42% 55%, rgb(94 227 154 / var(--mm-green)), transparent 100%);
}
[data-theme="light"] .mm-fx { --mm-gold: .28; --mm-blue: .13; --mm-green: .06; }
/* Shared entrance: rise, unblur, fade (staggered by --i) */
.mm-link, .mm-live, .mm-foot, .mobile-menu .theme-mobile {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .25s var(--ease), transform .3s var(--ease);
}
.menu-open :is(.mm-link, .mm-live, .mm-foot, .theme-mobile) {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease) var(--d, 0s), transform .9s var(--mm-ease) var(--d, 0s);
}
.menu-open .mm-link { --d: calc(.16s + var(--i) * .06s); }
.menu-open .mm-live { --d: .4s; }
.menu-open .mm-foot { --d: .48s; }
.menu-open .mobile-menu .theme-mobile { --d: .54s; }
/* Links */
.mm-nav { display: flex; flex-direction: column; }
.mm-link {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 11px 2px;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.mm-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--line-2), var(--line) 70%, transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.menu-open .mm-link::after { transform: scaleX(1); transition: transform 1.1s var(--mm-ease) calc(var(--d) + .1s); }
.mm-n { align-self: start; margin-top: 9px; font: 600 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .06em; color: var(--ink-3); transition: color .3s var(--ease); }
.mm-t {
  font-size: clamp(30px, 9vw, 38px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--ink) 0 50%, var(--lantern) 50% 100%) 0 0 / 200% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position .5s var(--mm-ease), transform .5s var(--mm-ease);
}
.mm-go {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  overflow: hidden;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .5s var(--mm-ease);
}
.mm-go svg { width: 17px; height: 17px; transition: transform .45s var(--mm-ease); }
.mm-go.is-ext svg { transform: rotate(-45deg); }
.mm-link:is(:hover, :focus-visible, :active) .mm-t { background-position: 100% 0; transform: translateX(4px); }
.mm-link:is(:hover, :focus-visible, :active) .mm-n { color: var(--lantern); }
.mm-link:is(:hover, :focus-visible, :active) .mm-go { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.mm-link:is(:hover, :focus-visible, :active) .mm-go svg { animation: mm-arrow .5s var(--mm-ease); }
.mm-link:is(:hover, :focus-visible, :active) .mm-go.is-ext svg { animation-name: mm-arrow-ext; }
@keyframes mm-arrow { 0% { transform: none; } 45% { transform: translateX(150%); } 46% { transform: translateX(-150%); } 100% { transform: none; } }
@keyframes mm-arrow-ext { 0% { transform: rotate(-45deg); } 45% { transform: rotate(-45deg) translateX(150%); } 46% { transform: rotate(-45deg) translateX(-150%); } 100% { transform: rotate(-45deg); } }
.mm-link:active .mm-go { transform: scale(.9); }
.mm-link[aria-current="page"] .mm-t { background-position: 100% 0; }
.mm-link[aria-current="page"] .mm-n { color: var(--lantern); }
.mm-link[aria-current="page"] .mm-n::before { content: ""; display: block; width: 6px; height: 6px; margin-bottom: 6px; border-radius: 50%; background: var(--lantern); box-shadow: 0 0 10px var(--lantern); }
.mm-link:focus-visible { outline: none; }
.mm-link:focus-visible .mm-go { box-shadow: 0 0 0 3px rgb(var(--tint) / .25); }
/* Live worlds */
.mm-live {
  position: relative;
  padding: 14px;
  border-radius: 22px;
  background: rgb(var(--tint) / .035);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
}
[data-theme="light"] .mm-live { background: rgb(255 255 255 / .88); box-shadow: 0 20px 50px -30px rgb(15 23 42 / .35); }
.mm-live-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 10px; }
.mm-k { font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.mm-total { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ink-2); background: rgb(var(--tint) / .05); border: 1px solid var(--line); }
.mm-total[data-state="online"] { color: var(--ink); }
.mm-worlds { display: grid; gap: 4px; }
.mm-world {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 10px 6px;
  border-radius: 14px;
  overflow: hidden;
  --wc: var(--offline);
  opacity: 0;
  transform: translateX(-12px);
  transition: background-color .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.menu-open .mm-world { opacity: 1; transform: none; transition: background-color .3s var(--ease), opacity .6s var(--ease) calc(.5s + var(--i) * .07s), transform .8s var(--mm-ease) calc(.5s + var(--i) * .07s); }
.mm-world:is(:hover, :active, :focus-visible) { background: rgb(var(--tint) / .06); }
.mm-world[data-state="online"] { --wc: var(--online); }
.mm-world[data-state="restarting"] { --wc: var(--restarting); }
.mm-world:is([data-state="unknown"], [data-state="maintenance"]) { --wc: var(--unknown); }
.mm-world[data-state="wipe"] { --wc: #b18cff; }
.mm-world[data-state="loading"] { --wc: var(--ink-3); }
.mm-w-ic {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  font-weight: 700; font-size: 16px; color: var(--ink-2);
  background: linear-gradient(145deg, rgb(var(--tint) / .1), rgb(var(--tint) / .03));
  border: 1px solid var(--line);
}
.mm-w-ic img { width: 100%; height: 100%; border-radius: inherit; image-rendering: pixelated; object-fit: cover; }
.mm-w-ic .dot { position: absolute; right: -3px; bottom: -3px; --c: var(--wc); box-shadow: 0 0 0 3px var(--l0); }
.mm-world[data-state="online"] .dot::after { animation: ping 2.6s var(--ease-out) infinite; }
.mm-world[data-state="restarting"] .dot, .mm-world[data-state="loading"] .dot { animation: mm-blink 1.4s ease-in-out infinite; }
@keyframes mm-blink { 50% { opacity: .35; } }
.mm-w-t { display: grid; min-width: 0; }
.mm-w-t b { font-size: 16px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-w-t small { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-world:not([data-state="online"]) .mm-w-t small { color: var(--wc); }
.mm-w-n { display: flex; align-items: baseline; gap: 1px; font-variant-numeric: tabular-nums; }
.mm-w-n b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.mm-w-n small { font-size: 12px; color: var(--ink-3); }
.mm-w-bar { position: absolute; left: 56px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: rgb(var(--tint) / .06); overflow: hidden; }
.mm-w-bar::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--wc) 40%, transparent), var(--wc));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.menu-open .mm-w-bar::before { transform: scaleX(var(--fill)); transition: transform 1.4s var(--mm-ease) calc(.7s + var(--i) * .08s); }
.mm-world[data-state="wipe"] .mm-w-bar::before { transform: scaleX(1); background: linear-gradient(90deg, transparent, var(--wc), transparent) 0 0 / 50% 100% no-repeat; animation: mm-scan 1.8s linear infinite; }
@keyframes mm-scan { from { background-position: -100% 0; } to { background-position: 200% 0; } }
.mm-more { display: block; padding: 10px 6px 4px; font-size: 13px; font-weight: 600; color: var(--ink-3); opacity: 0; transition: opacity .3s var(--ease), color .3s var(--ease); }
.menu-open .mm-more { opacity: 1; transition: opacity .6s var(--ease) .8s, color .3s var(--ease); }
.mm-more:hover { color: var(--ink); }
/* Discord */
.mm-foot { margin-top: auto; }
.mm-discord {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 12px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #6d78ff, #5865f2 45%, #4651d6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 18px 40px -18px rgb(88 101 242 / .9);
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--mm-ease);
}
.menu-open .mm-discord { animation: mm-discord-idle 4.8s ease-in-out 1s infinite; }
@keyframes mm-discord-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.mm-discord:active { transform: scale(.98); }
.mm-discord-ic { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgb(255 255 255 / .16); }
.mm-discord-ic::after { content: ""; position: absolute; inset: -3px; border: 1px solid rgb(255 255 255 / .35); border-radius: 17px; opacity: 0; transform: scale(.92); pointer-events: none; }
.menu-open .mm-discord-ic::after { animation: mm-discord-ring 3.6s ease-out 1.4s infinite; }
@keyframes mm-discord-ring { 0%, 12% { opacity: 0; transform: scale(.92); } 30% { opacity: .5; } 75%, 100% { opacity: 0; transform: scale(1.18); } }
.mm-discord-ic svg { width: 24px; height: 24px; }
.mm-discord-t { display: grid; gap: 1px; }
.mm-discord-t b { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
.mm-discord-t small { font-size: 12.5px; opacity: .78; }
.mm-discord .mm-go { width: 36px; height: 36px; border-color: rgb(255 255 255 / .3); color: #fff; }
.mm-discord .mm-go svg { transform: rotate(-45deg); }
.mm-discord:is(:hover, :focus-visible) .mm-go { background: #fff; color: #4651d6; border-color: #fff; }
/* Appearance: sliding indicator under the chosen option */
.mobile-menu .theme-mobile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; }
.mobile-menu .theme-k { font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mobile-menu .theme-seg { position: relative; flex: 0 1 260px; padding: 3px; gap: 0; border-radius: var(--r-pill); background: rgb(var(--tint) / .05); border: 1px solid var(--line-2); }
.mobile-menu .theme-seg::before {
  content: "";
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: var(--r-pill);
  background: var(--ink);
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / .5);
  transition: transform .55s var(--mm-ease);
}
.mobile-menu .theme-seg:has([data-theme-opt="light"][aria-checked="true"])::before { transform: translateX(100%); }
.mobile-menu .theme-seg:has([data-theme-opt="dark"][aria-checked="true"])::before { transform: translateX(200%); }
.mobile-menu .theme-seg button { position: relative; z-index: 1; height: 34px; gap: 5px; font-size: 13px; border-radius: var(--r-pill); background: transparent !important; transition: color .4s var(--ease); }
.mobile-menu .theme-seg button svg { width: 14px; height: 14px; }
.mobile-menu .theme-seg button[aria-checked="true"] { color: var(--on-ink); }
@media (max-height: 700px) {
  .mobile-menu { gap: 16px; }
  .mm-link { padding: 9px 2px; }
  .mm-t { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .menu-open .mobile-menu { clip-path: none; opacity: 0; transition: opacity .2s linear, visibility 0s linear .2s; }
  .menu-open .mobile-menu { opacity: 1; transition: opacity .2s linear; }
  .mm-discord, .mm-discord-ic::after, .mm-world .dot, .mm-w-bar::before { animation: none !important; }
  .mobile-menu *, .mobile-menu *::before, .mobile-menu *::after { transition-duration: .01s !important; transition-delay: 0s !important; }
}
@media (forced-colors: active) {
  .mm-fx { display: none; }
  .mm-t { -webkit-text-fill-color: currentColor; background: none; }
  .mm-live, .mm-discord { border: 1px solid CanvasText; }
}

/* Details panel entrance: the header, icon and corner buttons are part of the panel from the first frame
   (they used to fade in 0.3 s late); only the content below eases in, quickly. */
.sv-icon.has-icon { animation: icon-fade .35s var(--ease) both; }
@keyframes icon-fade { from { opacity: 0; } }
.sheet .sv-icon.has-icon { animation: none; }
.sheet.is-morphing .sheet-close, .sheet.is-morphing .sheet-expand, .sheet.is-morphing .sheet-body > .sk-head { animation: none; }
.sheet.is-morphing .sheet-body > * { animation-duration: .32s; }
.sheet.is-morphing .sheet-body > .sk-tabs { animation-delay: .04s; }
.sheet.is-morphing .sheet-body > .sk-panel > * { animation-duration: .32s; animation-delay: calc(.08s + var(--k, 0) * .03s); }

/* The icon, tagline, status pill and corner buttons overlap the artwork, which has its own layer in the morph:
   they get layers above it and fade in/out with the panel. */
::view-transition-group(sk-corner), ::view-transition-group(sk-icon), ::view-transition-group(sk-tag), ::view-transition-group(sk-pill), ::view-transition-group(sk-title) { z-index: 6; animation: none; transform-origin: 0 0; }
::view-transition-new(sk-corner), ::view-transition-new(sk-icon), ::view-transition-new(sk-tag), ::view-transition-new(sk-pill), ::view-transition-new(sk-title) { animation: vt-fade-in .24s var(--ease) .1s both; }
::view-transition-old(sk-corner), ::view-transition-old(sk-icon), ::view-transition-old(sk-tag), ::view-transition-old(sk-pill), ::view-transition-old(sk-title) { animation: vt-fade-out .14s linear both; }

/* A live backdrop blur over animating content is the costliest part of the morph */
.sheet.is-morphing .sk-tabs { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* When the open morph ends, the entrance animations are done: the longer default timings must not restart them. */
.sheet.is-morphed .sheet-body > *, .sheet.is-morphed .sheet-body > .sk-panel:not(.is-in) > * { animation: none; }

/* The morph's frame carries the panel's shadow (animated from script), so it needs the panel's corner shape.
   The corner buttons use a flat tint instead of a backdrop blur, which a view-transition snapshot can't reproduce. */
::view-transition-group(sk-card) { border-radius: var(--r-xl); }
.sheet-corner .sheet-close, .sheet-corner .sheet-expand { background: rgb(var(--panel) / .78); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sheet-corner .sheet-close:hover, .sheet-corner .sheet-expand:hover { background: rgb(var(--panel) / .92); }

@media (prefers-reduced-motion: reduce) { .wp-detail, .wp-detail-pad { transition: none !important; } }

/* Uptime: every incident, outage and restart is its own card, tinted by kind, with a gap between them
   (replaces the dotted timeline, where neighbouring entries ran together). */
.up-log { gap: 8px; }
.up-log-day { padding: 14px 2px 2px; }
.up-log-day:first-child { padding-top: 0; }
.up-ev { --k: var(--ink-3); --k-rgb: var(--tint); grid-template-columns: 70px minmax(0, 1fr); gap: 0 14px; padding: 12px 14px; border-radius: var(--r-md); background: linear-gradient(120deg, rgb(var(--k-rgb) / .06), transparent 60%), var(--l1); border: 1px solid color-mix(in srgb, rgb(var(--k-rgb)) 26%, var(--line)); transition: border-color var(--t) var(--ease), transform .45s var(--spring-snappy, var(--ease-out)); }
.up-ev:hover { border-color: color-mix(in srgb, rgb(var(--k-rgb)) 45%, var(--line-2)); transform: translateY(-1px); }
.up-ev::before, .up-ev-dot { display: none; }
.up-ev time { text-align: left; padding-top: 3px; }
.up-ev--auto, .up-ev--incident, .up-ev--open { --k: var(--danger); --k-rgb: var(--danger-rgb); }
.up-ev--maintenance, .up-ev--planned { --k: var(--moon); --k-rgb: var(--moon-rgb); }
.up-ev--resolved { --k: var(--online); --k-rgb: var(--online-rgb); }
@media (max-width: 640px) {
  .up-ev { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .up-ev time, .up-ev > div { grid-column: 1; grid-row: auto; }
}
/* The per-day outage list gets the same treatment */
.up-os { gap: 6px; }
.up-o { padding: 8px 12px; border-radius: var(--r-sm); background: rgb(var(--tint) / .03); border: 1px solid var(--line); }
.up-o--out { border-color: color-mix(in srgb, var(--danger) 24%, var(--line)); }
.up-o--open { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.up-o--planned { border-color: color-mix(in srgb, var(--moon) 24%, var(--line)); }

/* Open a ticket: one compact card (heading, button and three short steps) */
.hc-ticket { padding: clamp(20px, 3vw, 32px); gap: clamp(20px, 3vw, 40px); align-items: center; border-radius: var(--r-xl); }
.hc-ticket .h2 { font-size: var(--fs-xl); }
.tk-intro { gap: 12px; }
.tk-intro .lede { font-size: var(--fs-base); max-width: 46ch; }
.tk-steps { gap: 6px; }
.tk-steps li { padding: 10px 14px; }
#ticket { padding-top: clamp(16px, 3vw, 32px); }

/* Light header: a frosted capsule with a hairline edge and layered shadow, so it reads over both the page and artwork */
[data-theme="light"] .site-header.is-scrolled .bar, [data-theme="light"].menu-open .site-header .bar {
  background: linear-gradient(180deg, rgb(255 255 255 / .95), rgb(250 251 253 / .91));
  border-color: rgb(15 23 42 / .09);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(15 23 42 / .05), 0 10px 28px -12px rgb(15 23 42 / .22), 0 28px 56px -28px rgb(15 23 42 / .18);
}
[data-theme="light"] .site-header.is-scrolled .nav-ind { background: rgb(15 23 42 / .06); box-shadow: none; }
[data-theme="light"] .site-header.is-scrolled .theme-btn:hover { background: rgb(15 23 42 / .06); border-color: rgb(15 23 42 / .08); }
[data-theme="light"] .site-header.is-scrolled .nav a:not(.btn):not(:hover):not([aria-current="page"]) { color: #3a4456; }

/* Server card buttons: Details fills with the server's accent and the arrow leads; Copy IP lifts and a sheen sweeps across */
.server .sv-info { position: relative; isolation: isolate; overflow: hidden; transition: color .3s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease-out), transform .5s var(--ease-out); }
.server .sv-info::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); }
.server .sv-info svg { transition: transform .5s var(--spring-snappy, var(--ease-out)); }
.server .sv-info:hover, .server .sv-info:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.server .sv-info:hover::before, .server .sv-info:focus-visible::before { transform: scaleX(1); }
.server .sv-info:hover svg, .server .sv-info:focus-visible svg { transform: translateX(4px); }
.server .sv-info:active { transform: scale(.97); transition-duration: .12s; }

.server .copy-btn:not(.is-copied) { background-image: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .85) 50%, transparent 62%), linear-gradient(180deg, #fff, #d9e2ee); background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat; }
.server .copy-btn:not(.is-copied):hover, .server .copy-btn:not(.is-copied):focus-visible { transform: translateY(-2px); background-position: -30% 0, 0 0; box-shadow: inset 0 1px 0 #fff, 0 12px 26px -12px color-mix(in srgb, var(--accent, rgb(var(--moon-rgb))) 75%, transparent); transition-duration: .75s, .9s, .68s, .5s; }
.server .copy-btn:not(.is-copied):hover .ic .copy { transform: translateY(-1px) scale(1.14) rotate(-6deg); }
.server .copy-btn:not(.is-copied):active { transform: scale(.96); transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) {
  .server .sv-info, .server .sv-info::before, .server .sv-info svg, .server .copy-btn { transition: none !important; }
  .server .sv-info:hover, .server .copy-btn:hover { transform: none !important; }
}

/* Data packets stay hidden until their line has finished drawing, then fade in at the server end */
.wp.is-first .wp-pkt { opacity: 0; animation: wp-pkt-in .5s var(--ease) both; animation-delay: calc(3.4s + var(--i) * 180ms); }
@keyframes wp-pkt-in { from { opacity: 0; } to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .wp.is-first .wp-pkt { animation: none; opacity: .6; } }