@font-face { font-family: "Jersey 15"; src: url("/static/fonts/jersey15.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Rubik"; src: url("/static/fonts/rubik.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Departure Mono"; src: url("/static/fonts/departure-mono.woff2") format("woff2"); font-display: swap; }
/* The client's own icon glyphs (DejaVu Sans and Noto Sans Symbols subsets), so categories look like the menu. */
@font-face { font-family: "Jk Icons"; src: url("/static/fonts/icons-dejavu.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Jk Icons 2"; src: url("/static/fonts/icons-noto.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Jk Icons 3"; src: url("/static/fonts/icons-noto2.woff2") format("woff2"); font-display: block; }

:root {
  --obsidian: #0f0b14;
  --obsidian-2: #160f1e;
  --obsidian-3: #1e1529;
  --line: #2c2238;
  --line-2: #3d3050;
  --bone: #f1e9dc;
  --bone-2: #bfb3cc;
  --bone-3: #8d819b;
  --portal: #8b6cff;
  --portal-hi: #b6a2ff;
  --portal-fill: #6a3df2;
  --lava: #ff7a1a;
  --lava-hi: #ffa25c;
  --gold: #ffcf4a;
  --oak-ink: #2a1a0a;
  --chat: rgba(0, 0, 0, .55);
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* Jersey 15 is drawn on a 15px grid; it stays crisp at whole multiples of 15. */
  --pixel: "Jersey 15", "Departure Mono", monospace;
  --mono: "Departure Mono", ui-monospace, monospace;
  --icons: "Jk Icons", "Jk Icons 2", "Jk Icons 3", sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--obsidian);
  color: var(--bone);
  font: 400 17px/1.6 "Rubik", system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
main { flex: 1; width: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--portal-hi); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--bone); }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1; text-wrap: balance; }
h1, h2 { font-family: var(--pixel); letter-spacing: 0; }
p { margin: 0; }
code, kbd { font-family: var(--mono); font-size: .9em; }
::selection { background: var(--lava); color: var(--obsidian); }
:focus-visible { outline: 2px solid var(--lava); outline-offset: 3px; }
html { scrollbar-color: var(--line-2) var(--obsidian); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--obsidian); }
.icon { width: 18px; height: 18px; flex: none; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--bone-2); }
.lava { color: var(--lava); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--lava); color: var(--obsidian); }
.skip:focus { top: 12px; }

/* ---- Buttons: square, with a pixel-deep bottom edge that presses in ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; padding: 0 16px; border: 2px solid transparent; border-radius: 0;
  font: 500 15px/1 "Rubik", system-ui, sans-serif; color: var(--bone); text-decoration: none; cursor: pointer;
  background: transparent; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease, box-shadow .08s ease;
}
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn.lg { min-height: 54px; padding: 0 22px 4px; font: 400 30px/1 var(--pixel); }
.btn.primary { background: var(--portal-fill); border-color: #8f6bff; color: #fff; box-shadow: inset 0 -4px 0 #3e1fa3; }
.btn.primary:hover { background: #7a52ff; color: #fff; }
.btn.primary:active, .btn.ghost:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 #3e1fa3; }
.btn.primary .icon { transition: transform .2s var(--ease); }
.btn.primary:hover .icon { transform: translateX(3px); }
.btn.ghost { border-color: var(--bone-3); background: rgba(15, 11, 20, .55); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .45); }
.btn.ghost:hover { border-color: var(--bone); color: var(--bone); }
.btn.ghost:active { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45); }
.btn.quiet { color: var(--bone-2); }
.btn.quiet:hover { color: var(--bone); background: var(--obsidian-3); }
.btn.good { background: rgba(139, 108, 255, .14); border-color: var(--portal); color: var(--portal-hi); }
.btn.good:hover { background: var(--portal); color: #fff; }
.btn.danger { background: rgba(255, 122, 26, .1); border-color: rgba(255, 122, 26, .55); color: var(--lava-hi); }
.btn.danger:hover { background: var(--lava); color: var(--obsidian); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Nav ---- */
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 2px solid transparent; transition: background-color .2s ease, border-color .2s ease; }
.nav.solid, .nav:not(.over-hero) { background: var(--obsidian); border-bottom-color: var(--line); }
.page-index .nav { position: fixed; left: 0; right: 0; }
.nav-inner { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); height: 64px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); text-decoration: none; font: 400 30px/1 var(--pixel); padding-bottom: 3px; }
.brand img { image-rendering: auto; margin-top: 3px; }
.brand:hover { color: var(--bone); }
.links { display: flex; gap: 2px; }
.links a { color: var(--bone-2); text-decoration: none; font-size: 15px; padding: 8px 12px; transition: color .12s ease, background-color .12s ease; }
.links a:hover { color: var(--obsidian); background: var(--bone); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-end form { margin: 0; }
.user { display: inline-flex; align-items: center; gap: 9px; color: var(--bone); text-decoration: none; font-weight: 500; font-size: 15px; padding: 4px 10px 4px 4px; }
.user:hover { background: var(--obsidian-3); color: var(--bone); }
.user img { image-rendering: pixelated; }

/* ---- Chat: the game's own chat lines, used for facts ---- */
.chat { font: 400 16px/1 var(--mono); display: grid; justify-items: start; gap: 2px; }
.chat p { background: var(--chat); padding: 5px 8px 6px; color: var(--bone); max-width: 100%; }
.chat .who { color: var(--portal-hi); }
.chat .srv { color: var(--gold); }
.chat .kick { color: var(--lava); }
.chat .ok { color: var(--portal-hi); }

/* ---- Oak sign: pixel sprite at 5x, four short lines like the one in game ---- */
.sign { position: relative; width: 240px; font: 400 16px/23px var(--mono); color: var(--oak-ink); text-align: center; }
.sign-board { height: 130px; padding: 18px 10px 0; background: url("/static/img/sign.png") 0 0 / 240px 130px no-repeat; image-rendering: pixelated; }
.sign-board span { display: block; height: 23px; }
.sign-post { width: 20px; height: 80px; margin: 0 auto; background: url("/static/img/sign-post.png") 0 0 / 20px 40px repeat-y; image-rendering: pixelated; }

/* ---- Hero ---- */
.hero { position: relative; min-height: min(100svh, 960px); display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; }
.hero-shot { position: absolute; inset: 64px 0 0; z-index: -2; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 0; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(15, 11, 20, .9) 0%, rgba(15, 11, 20, .55) 34%, rgba(15, 11, 20, 0) 56%),
    linear-gradient(0deg, var(--obsidian) 0%, rgba(15, 11, 20, .45) 18%, rgba(15, 11, 20, 0) 38%),
    linear-gradient(180deg, rgba(15, 11, 20, .6) 0%, rgba(15, 11, 20, 0) 14%);
}
.hero-copy { padding-top: 120px; padding-bottom: clamp(48px, 8vh, 88px); }
.hero h1 { font-size: 120px; line-height: .8; }
.hero h1 .lava { display: inline-block; }
.hero .chat { margin-top: 30px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-meta { margin-top: 20px; font-size: 14px; color: var(--bone-2); }
.hero-sign { position: absolute; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); bottom: 16%; }
.hero-sign .sign-post { height: 100px; }

/* ---- Section rhythm ---- */
section { position: relative; }
.modes, .tools, .modules, .join, .faq { padding-top: clamp(96px, 12vw, 160px); }
h2 { font-size: 75px; line-height: .85; }
.section-head { max-width: 44rem; }
.section-head p { margin-top: 18px; color: var(--bone-2); font-size: 18px; max-width: 36rem; }

/* ---- Modes ---- */
.modes-shot { margin-top: 40px; width: fit-content; max-width: 100%; }
.modes .chat-lg { margin-top: 18px; }

/* ---- Game screenshots at 1:1, so the GUI's pixels stay pixels ---- */
.shot { margin: 0; position: relative; }
.shot.native img { border: 2px solid var(--line-2); image-rendering: pixelated; }
.shot.bleed img { width: 100%; border-top: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); }
@media (min-width: 861px) {
  .shot.bleed img { aspect-ratio: 12 / 5; max-height: 560px; object-fit: cover; object-position: 50% 55%; }
  .native-row .shot img { max-height: 520px; object-fit: cover; object-position: 0 0; }
}
.shot .sign { position: absolute; z-index: 1; right: clamp(16px, 4vw, 48px); bottom: 2px; }
.shot .sign-post { height: 40px; }
.chat-lg { font-size: 17px; line-height: 1; gap: 3px; }
.chat-lg p, .chat-lg li, .chat-lg dt, .chat-lg dd { line-height: 1.45; max-width: 74ch; }
.chat b { font-weight: 400; color: #fff; }
.chat b.lava { color: var(--lava); }

/* ---- Features ---- */
.features { padding-top: clamp(104px, 13vw, 176px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(104px, 12vw, 168px); }
.feature { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.feature.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
.feature.flip .feature-shot, .feature.flip .shot { order: 2; }
.feature.native-row { grid-template-columns: auto minmax(0, 1fr); }
.feature.native-row.flip { grid-template-columns: minmax(0, 1fr) auto; }
.feature-shot { margin: 0; position: relative; }
.feature-shot img { border: 2px solid var(--line-2); }
@media (min-width: 1021px) {
  .bleed-left { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2)); }
  .bleed-left img { border-right: 0; }
}
.feature-copy h2 { font-size: 60px; }
.feature-copy > p { margin-top: 18px; color: var(--bone-2); }
.feature-copy > p b { color: var(--bone); font-weight: 500; }
.facts { list-style: none; padding: 0; margin: 26px 0 0; border-top: 2px solid var(--line); }
.facts li { padding: 12px 0; border-bottom: 2px solid var(--line); color: var(--bone-2); font-size: 16px; }
.facts b { color: var(--bone); font-weight: 500; }
.feature-shot .sign { position: absolute; z-index: 1; right: clamp(16px, 4vw, 48px); bottom: 2px; }
.feature-shot .sign-post { height: 40px; }
.feature.wide { display: block; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); margin-top: 32px; align-items: start; }
.split h2 { font-size: 60px; }
.split p { margin-top: 18px; color: var(--bone-2); }
.split .facts { margin-top: 0; }
.feature-copy > .chat { margin-top: 16px; }
.tools .chat { margin-top: 18px; }

/* ---- Tools ---- */
.tool-list { margin: 44px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); }
.tool-list > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 20px; padding: 16px 0; border-top: 2px solid var(--line); align-items: baseline; }
.tool-list dt { color: var(--bone-3); font: 400 15px/1.4 var(--mono); }
.tool-list dt code { display: inline-block; background: var(--chat); color: var(--bone); padding: 4px 7px 5px; font-size: 15px; }
.tool-list dd { margin: 0; color: var(--bone-2); font-size: 16px; }
.tool-list dd b { color: var(--bone); font-weight: 500; }

/* ---- Module browser ---- */
.modules-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.switch-wrap { display: grid; gap: 10px; justify-items: end; }
.mode-switch { display: inline-flex; align-items: center; gap: 4px; }
.mode-switch[hidden] { display: none; }
.mode-switch button {
  display: inline-flex; align-items: baseline; gap: 10px; min-height: 46px; padding: 0 12px 3px; border: 0;
  background: transparent; color: var(--bone-2); font: 400 30px/1 var(--pixel); cursor: pointer;
  transition: color .12s ease, background-color .12s ease;
}
.lever { width: 80px; height: 60px; flex: none; background: url("/static/img/lever.png") 100% 100% / 160px 60px no-repeat; image-rendering: pixelated; cursor: pointer; }
.mode-switch[data-mode="pvp"] .lever { background-position: 0 100%; }
.mode-switch button span { font: 400 15px/1 var(--mono); color: var(--bone-3); font-variant-numeric: tabular-nums; }
.mode-switch button:hover { color: var(--bone); }
.mode-switch button[aria-checked="true"] { background: var(--bone); color: var(--obsidian); }
.mode-switch button[aria-checked="true"] span { color: var(--obsidian); }
.switch-log { min-height: 28px; }
.switch-log p { animation: chat-in .3s var(--ease); }
@keyframes chat-in { from { opacity: 0; transform: translateY(6px); } }

.browser { margin-top: 32px; display: grid; grid-template-columns: 236px minmax(0, 1fr); border: 2px solid var(--line); background: var(--obsidian-2); min-height: 560px; }
.cat-list { display: flex; flex-direction: column; padding: 10px; border-right: 2px solid var(--line); background: var(--obsidian); }
.cat {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: var(--bone-2);
  font: 400 15px/1.2 "Rubik", system-ui, sans-serif; text-align: left; cursor: pointer; transition: background-color .1s ease, color .1s ease;
}
.cat i { font: normal 16px/1 var(--icons); width: 18px; text-align: center; color: var(--bone-3); }
.cat-name { flex: 1; }
.cat-count { font: 400 14px/1 var(--mono); color: var(--bone-3); font-variant-numeric: tabular-nums; }
.cat:hover { background: var(--obsidian-3); color: var(--bone); }
.cat[aria-selected="true"] { background: var(--bone); color: var(--obsidian); }
.cat[aria-selected="true"] i, .cat[aria-selected="true"] .cat-count { color: var(--obsidian); }
.cat.no-fair { opacity: .4; }
.cat-panels { padding: clamp(18px, 2.4vw, 28px); }
.panel-title { display: flex; align-items: baseline; gap: 12px; font: 400 45px/.9 var(--pixel); margin-bottom: 20px; }
.panel-title i { font: normal 26px/1 var(--icons); color: var(--portal-hi); align-self: center; }
.panel-title small { font: 400 15px/1 var(--mono); color: var(--bone-3); }
.mods { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 2px solid var(--line); }
.mod { display: flex; align-items: flex-start; gap: 12px; padding: 13px 12px 13px 4px; border-bottom: 2px solid var(--line); transition: opacity .2s ease, background-color .15s ease; }
.mod:hover { background: var(--obsidian-3); }
.mod i { font: normal 16px/1.35 var(--icons); width: 20px; flex: none; text-align: center; color: var(--bone-3); }
.mod div { flex: 1; min-width: 0; }
.mod b { display: block; font-weight: 500; font-size: 16px; }
.mod span { display: block; margin-top: 2px; color: var(--bone-2); font-size: 14px; line-height: 1.45; }
.mod em { flex: none; font: 500 12px/1 "Rubik", sans-serif; font-style: normal; color: var(--lava); padding: 4px 6px 5px; background: rgba(255, 122, 26, .12); margin-top: 2px; }
.mod.hack i { color: var(--lava); }
.mods-empty { display: none; padding-top: 24px; }
.js .cat-panel { display: none; }
.js .cat-panel.active { display: block; }
.cat-panel + .cat-panel { margin-top: 32px; }
.js .cat-panel + .cat-panel { margin-top: 0; }
.browser[data-mode="pvp"] .mod.hack { display: none; }
.browser[data-mode="pvp"] .mods-empty { display: grid; }
/* Kicked: the hack flashes lava, then drops out of the list. */
.mod.leaving { animation: kicked .26s steps(4, end) forwards; }
@keyframes kicked { 0% { background: var(--lava); color: var(--obsidian); } 100% { background: var(--lava); opacity: 0; } }
.mod.entering { animation: rejoin .3s steps(3, end) both; }
@keyframes rejoin { from { opacity: 0; background: var(--obsidian-3); } }

/* ---- Join ---- */
.join-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 56px); counter-reset: step; }
.join-steps li { counter-increment: step; display: grid; align-content: start; gap: 8px; padding-top: 16px; border-top: 2px solid var(--line-2); }
.join-steps li::before { content: counter(step); font: 400 45px/.8 var(--pixel); color: var(--portal-hi); }
.join-steps b { font-weight: 500; font-size: 19px; line-height: 1.3; }
.join-steps span { color: var(--bone-2); font-size: 16px; }
.join-steps.compact { grid-template-columns: 1fr; gap: 22px; margin-top: 22px; }
.join-steps.compact li { padding-top: 14px; }
.join-steps.compact li::before { font-size: 30px; }
.join-steps.compact b { font-size: 16.5px; }
.join-steps.compact span { font-size: 15px; }

.join-log, .faq-log { margin: 32px 0 0; padding: 0; list-style: none; }
.chat li, .chat dt, .chat dd { background: var(--chat); padding: 5px 8px 6px; margin: 0; }
.faq-log dt { margin-top: 14px; color: var(--bone-2); }
.faq-log dt:first-child { margin-top: 0; }
.chat .you { color: var(--bone-3); }

/* ---- FAQ ---- */

/* ---- Final ---- */
.final { margin-top: clamp(112px, 14vw, 184px); border-top: 2px solid var(--line); background: var(--obsidian-2); }
.final-inner { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 112px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: end; }
.final h2 { font-size: 90px; }
.final .chat { margin-top: 22px; }
.final .cta { margin-top: 0; }

/* ---- Footer ---- */
.footer { border-top: 2px solid var(--line); }
.footer-inner { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 32px var(--gutter) 40px; display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.footer-brand p { margin-top: 12px; color: var(--bone-3); font-size: 14px; line-height: 1.55; }
.footer nav { margin-left: auto; display: flex; gap: 6px 22px; flex-wrap: wrap; }
.footer nav a { color: var(--bone-2); text-decoration: none; font-size: 15px; }
.footer nav a:hover { color: var(--bone); text-decoration: underline; }

/* ---- Pages: application, error, admin ---- */
.page { padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(56px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(28px, 5vw, 64px); align-items: start; max-width: 1040px; }
.page.single { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.page.single.wide { max-width: 1040px; }
.panel { background: var(--obsidian-2); border: 2px solid var(--line); padding: clamp(22px, 3.4vw, 36px); }
.panel.center { text-align: center; display: grid; justify-items: center; gap: 16px; }
.panel.center h1 { font-family: var(--pixel); font-size: 60px; line-height: .85; }
.panel.center .chat { justify-items: center; }
.panel.center .btn { margin-top: 6px; }
.panel-head { margin-bottom: 26px; }
.panel-head h1 { font-family: var(--pixel); font-size: 60px; line-height: .85; }
.panel-head p { margin-top: 10px; color: var(--bone-2); }
.apply-aside { padding-top: 8px; }
.apply-aside h2 { font-size: 45px; }
.form { display: grid; gap: 20px; }
.form label { display: grid; gap: 8px; font-weight: 500; font-size: 15px; }
.form label .muted { font-weight: 400; font-size: 14px; }
.form .btn { justify-self: start; }
input, textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--line-2); border-radius: 0;
  background: var(--obsidian); color: var(--bone); font: 400 16px/1.4 "Rubik", system-ui, sans-serif; caret-color: var(--lava);
  transition: border-color .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--bone-3); }
input:hover, textarea:hover { border-color: var(--bone-3); }
input:focus, textarea:focus { outline: none; border-color: var(--portal); }
input:user-invalid { border-color: var(--lava); }
textarea { resize: vertical; min-height: 120px; }
.alert, .flash { padding: 10px 12px; font: 400 15px/1.4 var(--mono); margin: 0 0 20px; background: var(--chat); }
.alert { color: var(--lava); }
.flash { color: var(--portal-hi); }
.badge { display: inline-flex; align-items: center; padding: 4px 7px; font: 500 12px/1 "Rubik", sans-serif; text-transform: lowercase; }
.badge.pending { color: var(--bone); background: var(--obsidian-3); }
.badge.approved { color: var(--portal-hi); background: rgba(139, 108, 255, .16); }
.badge.rejected, .badge.revoked { color: var(--lava); background: rgba(255, 122, 26, .12); }
.badge.free, .badge.sub-paid { color: var(--gold); background: rgba(255, 207, 74, .12); }
.badge.sub-unpaid { color: var(--lava); background: rgba(255, 122, 26, .12); }
.status-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--obsidian); border: 2px solid var(--line); margin-bottom: 22px; }
.status-card img { image-rendering: pixelated; }
.status-card h2 { font: 400 30px/1 var(--pixel); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-card p { margin-top: 4px; color: var(--bone-2); font-size: 15px; }
.progress { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.progress li { padding-top: 10px; border-top: 6px solid var(--line-2); color: var(--bone-3); font-size: 14px; font-weight: 500; }
.progress li.done { border-color: var(--portal); color: var(--bone); }
.progress li.now { border-color: var(--bone-3); color: var(--bone); }
.apply > p { color: var(--bone-2); }
.apply > p + p { margin-top: 12px; }
.apply > p b { color: var(--bone); font-weight: 500; }
.apply .subscribe { margin: 18px 0 12px; }
.apply .billing { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.apply > .chat { margin-top: 14px; }
.apply .small, .apply-aside .small { font-size: 14px; }

.admin { padding: 0; }
.admin .panel-head { padding: clamp(22px, 3.4vw, 32px) clamp(22px, 3.4vw, 32px) 0; margin-bottom: 18px; }
.admin-tabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 0 clamp(16px, 3vw, 26px) 14px; border-bottom: 2px solid var(--line); }
.admin-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--bone-2); text-decoration: none; font-weight: 500; font-size: 15px; }
.admin-tabs a:hover { color: var(--bone); background: var(--obsidian-3); }
.admin-tabs a.active { color: var(--obsidian); background: var(--bone); }
.admin-tabs span { font: 400 13px/1 var(--mono); color: inherit; opacity: .75; }
.admin-body { padding: clamp(16px, 3vw, 26px); }
.apps { display: grid; border-top: 2px solid var(--line); }
.app { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 4px; border-bottom: 2px solid var(--line); }
.app:hover { background: var(--obsidian-3); }
.avatars { position: relative; width: 44px; height: 44px; }
.avatars .mc { image-rendering: pixelated; }
.avatars .dc { position: absolute; right: -6px; bottom: -6px; border: 2px solid var(--obsidian-2); }
.app h3 { font-size: 18px; font-weight: 500; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meta { color: var(--bone-2); font-size: 14px; margin-top: 4px; }
.meta b { color: var(--bone); font-weight: 500; }
.meta code { font-size: 13px; color: var(--bone-3); }
.message { margin-top: 10px; padding: 10px 12px; background: var(--obsidian); border: 2px solid var(--line); white-space: pre-wrap; font-size: 15px; }
.note { display: flex; gap: 8px; margin-top: 10px; }
.note input { padding: 6px 10px; font-size: 14px; }
.decide { display: grid; gap: 6px; min-width: 110px; }
.decide form { margin: 0; }
.decide .btn { width: 100%; }
.empty { text-align: center; color: var(--bone-2); padding: 48px 0; font-family: var(--mono); }
.add { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; padding: 16px; border: 2px dashed var(--line-2); }
.add h4 { width: 100%; font: 400 30px/1 var(--pixel); }
.add input { flex: 1 1 180px; }

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

/* ---- Smaller screens: pixel sizes step down a whole multiple of 15 ---- */
@media (max-width: 1020px) {
  .hero h1 { font-size: 105px; }
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feature-shot { margin: 0 calc(-1 * var(--gutter)); }
  .feature-shot img { border-left: 0; border-right: 0; }
  .feature.flip .feature-shot, .feature.flip .shot { order: 0; }
  .feature.native-row, .feature.native-row.flip { grid-template-columns: minmax(0, 1fr); }
  .shot.native img { width: 100%; image-rendering: auto; }
  .modes-shot { width: auto; }
  .tool-list { grid-template-columns: minmax(0, 1fr); }
  .tool-list > div:last-child { border-bottom: 2px solid var(--line); }
  .page { grid-template-columns: minmax(0, 1fr); }
  .final-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 860px) {
  .links { display: none; }
  .hero { flex-wrap: wrap; }
  .hero-copy { flex: 1 1 100%; }
  .hero-sign { position: static; margin: 28px var(--gutter) 0; align-self: flex-start; }
  .hero-sign .sign-post { height: 24px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .browser { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cat-list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 2px solid var(--line); scrollbar-width: none; }
  .cat-list::-webkit-scrollbar { display: none; }
  .cat { width: auto; flex: none; }
  .join-steps { grid-template-columns: minmax(0, 1fr); }
  .switch-wrap { justify-items: start; }
  h2 { font-size: 60px; }
  .final h2 { font-size: 75px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hide-sm { display: none; }
  .user span { display: none; }
  .nav-inner { height: 60px; gap: 12px; }
  .hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .hero-shot { position: relative; inset: auto; height: 46svh; min-height: 280px; }
  .hero-shot img { object-position: 50% 45%; }
  .hero::before { background: linear-gradient(0deg, var(--obsidian) 0%, rgba(15, 11, 20, 0) 24%) top / 100% 46svh no-repeat, linear-gradient(180deg, rgba(15, 11, 20, .6) 0%, rgba(15, 11, 20, 0) 30%) top / 100% 46svh no-repeat; }
  .hero-copy { padding-top: 0; margin-top: -44px; padding-bottom: 24px; }
  .hero h1 { font-size: 75px; }
  .chat { font-size: 15px; }
  .cta .btn { flex: 1 1 100%; }
  h2, .feature-copy h2 { font-size: 45px; }
  .final h2 { font-size: 60px; }
  .panel-title { font-size: 30px; }
  .split h2 { font-size: 45px; }
  .chat-lg { font-size: 15px; }
  .panel-head h1, .panel.center h1 { font-size: 45px; }
  .feature-shot .sign { display: none; }
  .tool-list > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mode-switch { width: 100%; justify-content: space-between; }
  .mode-switch button { padding: 0 10px 3px; }
  .shot .sign { display: none; }
  .mods { grid-template-columns: minmax(0, 1fr); }
  .app { grid-template-columns: auto minmax(0, 1fr); }
  .decide { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .progress { grid-auto-flow: row; }
  .footer nav { margin-left: 0; }
}

/* ---- Install guide ---- */
.guide-head h1 { font-size: 90px; line-height: .85; }
.guide-head .chat { margin-top: 18px; }
.guide { row-gap: 0; }
.install-steps { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: step; }
.install-steps > li { counter-increment: step; display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 20px; padding: 26px 0 30px; border-top: 2px solid var(--line-2); }
.install-steps > li::before { content: counter(step); grid-row: span 9; font: 400 60px/.8 var(--pixel); color: var(--portal-hi); }
.install-steps > li > * { grid-column: 2; }
.install-steps h2 { font-size: 45px; line-height: .9; }
.install-steps h2 small { font: 400 15px/1 var(--mono); color: var(--bone-3); vertical-align: middle; }
.install-steps p { margin: 14px 0 0; max-width: 62ch; color: var(--bone-2); }
.install-steps p b { color: var(--bone); font-weight: 500; }
.install-steps .chat { margin-top: 14px; }
.install-steps .chat p { margin: 0; color: var(--bone); }
.install-steps .chat a { color: var(--portal-hi); }
.install-steps .small { font-size: 14px; }
.install-steps .hash { font-family: var(--mono); }
@media (max-width: 860px) {
  .guide-head h1 { font-size: 60px; }
  .install-steps > li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .install-steps > li::before { font-size: 45px; }
  .install-steps h2 { font-size: 30px; }
  .paths p { overflow-wrap: anywhere; }
}

/* ---- The quiet ones ---- */
.quiet { padding-top: clamp(40px, 7vw, 88px); }
.quiet .guide-head h1 .lava { color: var(--lava); }
.quiet-mod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(64px, 9vw, 112px); align-items: start; }
.quiet-name h2 { font-size: 60px; }
.quiet-name p { margin-top: 16px; color: var(--bone-2); max-width: 30ch; }
.quiet .facts { margin-top: 0; }
.quiet .teaser, .section-head .teaser { margin-top: 18px; }
.quiet-sign { margin-top: 28px; }
.quiet-sign .sign-post { height: 40px; }
.quiet-faq { margin-top: clamp(64px, 9vw, 112px); }
@media (max-width: 860px) {
  .quiet-mod { grid-template-columns: minmax(0, 1fr); }
  .quiet-name h2 { font-size: 45px; }
}

/* ---- Support ---- */
.support .panel-head .chat { margin-top: 16px; }
.ticket-tabs { margin-top: 18px; }
.tickets { list-style: none; padding: 0; margin: 0 0 32px; border-top: 2px solid var(--line); }
.tickets li { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 2px solid var(--line); }
.tickets li a { flex: 1; min-width: 0; display: grid; gap: 4px; color: var(--bone); text-decoration: none; }
.tickets li a b { font-weight: 500; overflow-wrap: anywhere; }
.tickets li a:hover b { color: var(--portal-hi); }
.support .empty { margin-bottom: 32px; color: var(--bone-2); }
.ticket-new h2 { font: 400 30px/1 var(--pixel); }
.ticket-subject { overflow-wrap: anywhere; }
.thread { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.thread li { background: var(--obsidian-2); border: 2px solid var(--line); padding: 14px 16px; }
.thread li.staff { border-color: var(--portal); }
.thread .who-line b { font: 400 15px/1 var(--mono); color: var(--bone); }
.thread li.staff .who-line b { color: var(--portal-hi); }
.thread .body { margin-top: 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--bone-2); }
.ticket-actions { display: flex; gap: 12px; }
.ticket-close { margin-top: 14px; }
.nav-count { display: inline-block; min-width: 18px; padding: 1px 5px; background: var(--lava); color: var(--obsidian); font-size: 12px; text-align: center; }