/* Ossa Client site. Dark, flat, one accent (#2D97F8). Oxanium for headings, Inter for text.
   The wordmark is an outlined SVG in /assets, not a font, so it needs no font license. */

/* The two typefaces, served from here so visiting the site doesn't also tell Google. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/vendor/fonts/inter-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/vendor/fonts/inter-latin-wght-italic.woff2') format('woff2'); }
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/vendor/fonts/oxanium-latin-wght-normal.woff2') format('woff2'); }

:root {
  --blue: #2D97F8;
  --blue-bright: #5BB0FF;
  --blue-faint: rgba(var(--blue-rgb, 45, 151, 248), .10);
  --line-blue: rgba(var(--blue-rgb, 45, 151, 248), .30);

  --bg: #0A0D12;
  --bg-2: #10151D;
  --bg-3: #161D27;

  /* The rest of the dark surfaces, lines and greys the pages use, by name, so a look from the
     account (theme.js) can turn them all to its hue. These are the Ossa Blue values; theme.js
     sets its own over them only when somebody is wearing another look. */
  --bg-rgb: 10, 13, 18;
  --ground: #080A0E;
  --ground-rgb: 8, 10, 14;
  --veil-rgb: 6, 8, 12;
  --pit: #070A10;
  --sink: #0A0D13;
  --sink-rgb: 10, 13, 19;
  --deep: #0B0F16;
  --plate: #0E131B;
  --plate-rgb: 14, 19, 27;
  --tile: #121821;
  --tile-2: #141B26;
  --raise: #161C26;
  --bar: #0D1117;
  --mist-rgb: 11, 14, 19;
  --slab: #10141B;
  --slab-2: #141A23;
  --hollow: #0D1118;
  --abyss: #06090E;
  --lid: #111823;
  --dusk: #111A27;
  --hover: #141A24;
  --field: #1A212C;
  --shine: #1A2230;
  --rim: #2A3446;
  --rim-2: #2A3444;
  --rim-off: #2A3340;
  --rim-low: #1C2431;
  --rim-soft: #1E2734;
  --rim-faint: #1B2330;
  --rim-hi: #3A465C;
  --rim-hover: #4A5870;
  --text-1: #E3E9F1;
  --text-2: #DCE3EC;
  --text-3: #C3CCD8;
  --text-4: #AEB9C6;
  --grey: #8E9AAB;
  --faint: #7F8B9B;

  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);

  --text: #E6EDF6;
  --muted: #8C98A9;
  --dim: #5E6877;

  --ok: #37D28A;
  --warn: #F5B24A;
  --bad: #F0596A;
  --discord: #5865F2;   /* Discord's own blue, for its buttons. Not part of any look. */

  --display: 'Oxanium', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;

  --wrap: 1120px;
  --radius: 12px;
  --radius-sm: 8px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --fast: 140ms;
  --med: 220ms;
  --slow: 420ms;

  --lift: 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 4px; }

/* Wearing a look from the account: the scrollbar and selected text go with it too. Ossa Blue
   leaves both to the browser, as it always has. */
html[data-look] { scrollbar-color: var(--rim-hi) var(--bg); }
html[data-look] ::selection { background: rgba(var(--blue-rgb), .38); color: #fff; }

/* Picking a color on the dashboard fades the page from the old color to the new one
   (theme.js). While it does, nothing runs its own color transition, so the new picture is
   already finished and the fade is the only thing moving. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: ease-out; }
html.is-recolor *, html.is-recolor *::before, html.is-recolor *::after { transition: none !important; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0 0 .45em;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.kicker {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--fast) var(--ease-out),
    border-color var(--fast) var(--ease-out),
    color var(--fast) var(--ease-out),
    transform var(--fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--blue); color: var(--on-blue-ink, #04101F); }
.btn-primary:hover { background: var(--blue-bright); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .24); }
.btn-discord { background: #5865F2; color: #fff; }
.btn-discord:hover { background: #4954E6; }
.btn-lg { padding: 14px 26px; font-size: 16px; min-height: 50px; }
.btn-sm { padding: 7px 13px; font-size: 13px; min-height: 36px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Header */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--bg-rgb), .85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 22px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 30px; width: auto; }
.brand .wordmark { height: 15px; }
.hdr__nav { display: flex; gap: 2px; margin-left: 10px; }
.hdr__nav a {
  white-space: nowrap;
  font-size: 14px; font-weight: 500; color: var(--muted);
  padding: 8px 12px; border-radius: 6px;
  transition: color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
.hdr__nav a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.hdr__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hdr__user { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.hdr__user img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); }
.hdr__burger { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: 9px; }

/* Hero */
.hero { padding: 88px 0 64px; text-align: center; }
.hero__logo { width: 96px; margin: 0 auto 28px; }
.hero__wordmark { height: clamp(28px, 5vw, 44px); width: auto; margin: 0 auto 26px; }
.hero h1 { font-size: clamp(34px, 6vw, 60px); max-width: 16ch; margin-left: auto; margin-right: auto; }
.hero h1 .g { color: var(--blue); }
.hero__sub { max-width: 580px; margin: 16px auto 0; color: var(--muted); font-size: clamp(16px, 2vw, 18px); }
.hero__cta { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero__note { margin-top: 20px; font-size: 13px; color: var(--dim); display: inline-flex; gap: 8px; align-items: center; }
.hero__note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }

/* Feature tiles */
.elements { padding: 8px 0 32px; }
.elements__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.el {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  transition: border-color var(--med) var(--ease-out), transform var(--med) var(--ease-out), background-color var(--med) var(--ease-out);
}
.el:hover { border-color: var(--line-2); background: var(--bg-3); transform: translateY(-2px); }
.el__sym { position: absolute; top: 14px; right: 16px; font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--dim); }
.el__icon { width: 28px; height: 28px; color: var(--blue); margin-bottom: 16px; }
.el h3 { font-size: 17px; }
.el p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

/* Sections */
.section { padding: 80px 0; }
.section--tint { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.section__head h2 { font-size: clamp(28px, 4.2vw, 40px); margin-top: 10px; }
.section__head p { color: var(--muted); font-size: 17px; }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 64px; }
.feature:last-child { margin-bottom: 0; }
.feature--flip .feature__art { order: 2; }
.feature h3 { font-size: clamp(24px, 3.2vw, 32px); margin-top: 8px; }
.feature p { color: var(--muted); font-size: 16px; max-width: 60ch; }
.feature ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.feature li { display: flex; gap: 10px; font-size: 15px; }
.feature li svg { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 3px; }
.feature__art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-3);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.feature__art img { width: 78%; border-radius: 6px; }
.feature__art .badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 6px;
  background: rgba(var(--bg-rgb), .8);
}

.panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
}
.panel--blue { border-color: var(--line-blue); }

.lock { text-align: center; max-width: 680px; margin: 0 auto; }
.lock__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--warn); padding: 6px 13px; border: 1px solid rgba(245, 178, 74, .3);
  border-radius: 999px; background: rgba(245, 178, 74, .08); margin-bottom: 20px;
}
.lock h2 { font-size: clamp(26px, 4vw, 38px); }
.lock p { color: var(--muted); font-size: 16px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; text-align: left; }
.step { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.step__n { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--blue-bright); }
.step h4 { font-size: 17px; margin: 8px 0 6px; }
.step p { font-size: 14px; color: var(--muted); margin: 0; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 44px 0 40px; margin-top: 40px; }
.footer__in { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer__brand img { height: 26px; width: auto; }
.footer__brand .wordmark { height: 13px; }
.footer__links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__links a { color: var(--muted); font-size: 14px; transition: color var(--fast) var(--ease-out); }
.footer__links a:hover { color: var(--text); }
.footer__legal { width: 100%; color: var(--dim); font-size: 13px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 4px; }

/* Dashboard and status */
.center-page { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 50px 24px; }
.card-narrow { width: 100%; max-width: 540px; animation: rise var(--slow) var(--ease-out) both; }
.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
}
.status-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.status--tester { color: var(--ok); background: rgba(55, 210, 138, .1); border: 1px solid rgba(55, 210, 138, .28); }
.status--tester .dot { background: var(--ok); }
.status--wait { color: var(--warn); background: rgba(245, 178, 74, .1); border: 1px solid rgba(245, 178, 74, .28); }
.status--wait .dot { background: var(--warn); }
.status--no { color: var(--bad); background: rgba(240, 89, 106, .1); border: 1px solid rgba(240, 89, 106, .28); }
.status--no .dot { background: var(--bad); }
.who { display: flex; align-items: center; gap: 14px; margin: 4px 0 22px; }
.who img { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2); }
.who b { font-family: var(--display); font-size: 19px; }
.who span { color: var(--muted); font-size: 13px; }

/* Admin */
.admin-wrap { max-width: 1080px; margin: 0 auto; padding: 40px 24px 80px; }
.admin-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.admin-head h1 { font-size: 28px; margin: 0; }
.admin-stats { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }

/* Whether the Discord server is deciding roles yet. */
.hookup {
  margin: -8px 0 22px;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.hookup b { color: var(--text); }
.hookup.in { animation: rise var(--slow) var(--ease-out) both; }
.hookup.on { border-left-color: #3FB950; }
.hookup.off { border-left-color: var(--warn); }
.hookup .mono { color: var(--text); }

/* Ossa+, next to the name. */
.tag-plus {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--blue-rgb, 45, 151, 248), .16);
  color: var(--blue-bright);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  vertical-align: 1px;
}
.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 18px; text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: 22px; color: var(--text); }
.stat span { font-size: 12px; color: var(--muted); }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.input {
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--body); font-size: 14px; padding: 10px 14px; min-width: 240px;
  transition: border-color var(--fast) var(--ease-out);
}
.input:focus { outline: none; border-color: var(--blue); }
.table { width: 100%; border-collapse: collapse; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 13px 16px; border-bottom: 1px solid var(--line); }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.table tr:last-child td { border-bottom: 0; }
.table tr td { transition: background-color var(--fast) var(--ease-out); }
.table tr:hover td { background: rgba(255, 255, 255, .02); }
.u-cell { display: flex; align-items: center; gap: 11px; }
.u-cell img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); }
.u-cell b { font-weight: 600; }
.u-cell span { display: block; font-size: 12px; color: var(--dim); }
.u-cell .req-msg { font-style: italic; color: var(--muted); max-width: 320px; white-space: normal; margin-top: 2px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--dim); }

/* Role badges and the admin role picker */
.role-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor;
  line-height: 1.5; white-space: nowrap;
}
.role-admin { color: #F5C542; background: rgba(245, 197, 66, .1); }
.role-developer { color: #F0596A; background: rgba(240, 89, 106, .1); }
.role-tester { color: var(--ok); background: rgba(55, 210, 138, .1); }
.role-free { color: #A3ACB9; background: rgba(163, 172, 185, .08); }
.role-select {
  font: 600 13px var(--body); padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid currentColor; cursor: pointer;
}
.role-select option { color: var(--text); background: var(--bg-2); }
.role-select:disabled { cursor: default; opacity: .8; }

/* Toggle */
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle .track {
  position: absolute; inset: 0; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 999px;
  transition: background-color var(--med) var(--ease-out), border-color var(--med) var(--ease-out);
}
.toggle .knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted);
  transition: transform var(--med) var(--ease-out), background-color var(--med) var(--ease-out);
}
.toggle input:checked + .track { background: var(--blue); border-color: var(--blue); }
.toggle input:checked + .track .knob { transform: translateX(20px); background: #fff; }
.toggle input:focus-visible + .track { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

/* Scroll reveal. Content is visible by default and only hidden once main.js arms it. */
.reveal { transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out); }
body.reveal-armed .reveal { opacity: 0; transform: translateY(12px); }
body.reveal-armed .reveal.in { opacity: 1; transform: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text);
  padding: 11px 18px; border-radius: var(--radius-sm); font-size: 14px; box-shadow: var(--lift);
  opacity: 0; pointer-events: none; z-index: 100;
  transition: opacity var(--med) var(--ease-in), transform var(--med) var(--ease-in);
}
.toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
  transition-timing-function: var(--ease-out);
}

@media (max-width: 860px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: block; }
  .elements__row { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .feature--flip .feature__art { order: 0; }
  .steps { grid-template-columns: 1fr; }
  .admin-stats { width: 100%; margin-left: 0; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 480px) {
  .elements__row { grid-template-columns: 1fr; }
  .hero { padding-top: 64px; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
}

/* Mobile nav */
.mnav {
  position: fixed; inset: 0; z-index: 60; background: rgba(var(--bg-rgb), .97);
  display: flex; flex-direction: column; padding: 24px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--med) var(--ease-in), transform var(--med) var(--ease-in), visibility 0s linear var(--med);
}
.mnav.open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--med) var(--ease-out), transform var(--med) var(--ease-out), visibility 0s;
}
.mnav a { font-family: var(--display); font-weight: 600; font-size: 22px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mnav__close { align-self: flex-end; background: none; border: 0; color: var(--text); font-size: 30px; cursor: pointer; min-width: 44px; min-height: 44px; }

/* ---- loading: top bar, skeletons, images, buttons */

.loadbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 2px; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity var(--med) var(--ease-out);
}
.loadbar.on { opacity: 1; }
.loadbar::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
  background: var(--blue);
  animation: loadbar 1.1s var(--ease-out) infinite;
}
@keyframes loadbar {
  from { transform: translateX(-100%); }
  to { transform: translateX(260%); }
}

.skel, .skel-box {
  position: relative; overflow: hidden;
  background: var(--bg-3);
}
.skel { display: inline-block; border-radius: 6px; }
.skel::after, .skel-box::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.3s ease-in-out infinite;
}
.skel-box.loaded::after { display: none; }
@keyframes shimmer {
  to { transform: translateX(100%); }
}
.skel-user { width: 124px; height: 34px; border-radius: 8px; }
.skel-line { display: block; height: 12px; margin: 10px 0; }
.skel-title { display: block; height: 26px; width: 60%; margin: 16px 0 10px; }
.skel-avatar { width: 52px; height: 52px; border-radius: 50%; }
.skel-btn { display: block; height: 50px; margin-top: 22px; border-radius: var(--radius-sm); }

.fade-img { opacity: 0; transition: opacity var(--slow) var(--ease-out); }
.fade-img.loaded { opacity: 1; }

.btn.loading { pointer-events: none; }
.btn .spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.swap-in { animation: rise var(--slow) var(--ease-out) both; }

/* ---- home */

.home .section { padding: 96px 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.eyebrow__mark { width: 8px; height: 8px; background: var(--blue); }
.eyebrow__mark--warn { background: var(--warn); }

.h2o { position: relative; overflow: hidden; padding: 72px 0 84px; border-bottom: 1px solid var(--line); }
.h2o__grid {
  position: absolute; inset: -60px 0 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  animation: gridDrift 18s linear infinite;
}
@keyframes gridDrift { to { transform: translateY(56px); } }

.h2o__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.h2o__title {
  margin: 18px 0 0;
  font-size: clamp(40px, 5.6vw, 72px); line-height: .98;
  text-transform: uppercase; letter-spacing: -.005em;
}
.h2o__title span { color: var(--blue); }
.h2o__sub { max-width: 52ch; margin: 22px 0 0; color: var(--muted); font-size: 17px; }
.h2o__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.h2o__meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px;
  font-size: 13px; color: var(--dim);
}
.h2o__meta span { display: inline-flex; align-items: center; gap: 8px; }
.h2o__meta span + span::before { content: ""; width: 3px; height: 3px; margin-right: 12px; margin-left: -12px; border-radius: 50%; background: var(--dim); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.dot--warn { background: var(--warn); }

/* The hero parts arrive one after another as the page opens. */
.in-seq { animation: rise .6s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms + 80ms); }

.shot {
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
  transform-origin: 50% 100%;
}
.shot.in-seq { animation-name: shotIn; animation-duration: .9s; }
@keyframes shotIn {
  from { opacity: 0; transform: perspective(1400px) rotateX(8deg) translateY(28px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.shot__bar {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  border-bottom: 1px solid var(--line); background: var(--bg-3);
}
.shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.shot__bar span { margin-left: 10px; font-size: 12px; color: var(--dim); }
.shot__view { aspect-ratio: 1600 / 1025; }
.shot__view img { width: 100%; height: 100%; object-fit: cover; }

.ticker { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ticker__track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker__track span {
  padding: 16px 28px; white-space: nowrap;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.ticker__track span::after { content: "/"; margin-left: 56px; color: var(--line-2); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

.lab-head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 40px; }
.lab-head__n {
  flex: none; padding-top: 6px;
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--blue);
  border-top: 2px solid var(--blue); min-width: 44px;
}
.lab-head h2 { margin: 0; font-size: clamp(28px, 3.6vw, 42px); text-transform: uppercase; }
.lab-head p { margin: 6px 0 0; color: var(--muted); font-size: 17px; }

.cells {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--line); gap: 1px;
}
.cell {
  position: relative; padding: 26px 24px 28px; background: var(--bg);
  transition: background-color var(--med) var(--ease-out);
}
.cell::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease-out);
}
.cell:hover { background: var(--bg-2); }
.cell:hover::before { transform: scaleX(1); }
.cell__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.cell__sym {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line-2); border-radius: 8px;
  font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--text);
}
.cell__icon { width: 22px; height: 22px; color: var(--dim); transition: color var(--med) var(--ease-out); }
.cell:hover .cell__icon { color: var(--blue); }
.cell h3 { font-size: 18px; margin-bottom: 8px; }
.cell p { margin: 0; color: var(--muted); font-size: 14.5px; }
.cells .reveal { transition-delay: calc(var(--i, 0) * 60ms); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--flip .split__art { order: -1; }
.split .lab-head { margin-bottom: 20px; }
.split__text { color: var(--muted); font-size: 16px; max-width: 58ch; margin: 0; }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; font-size: 15px; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 6px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg);
}

.art-card {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg-2);
}
.art-card img { width: 42%; }
.art-card__label {
  position: absolute; top: 14px; left: 14px; padding: 4px 9px;
  border: 1px solid var(--line-2); border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}

.pack-demo { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 18px; }
.pack-demo__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.pack-demo__head b { font-family: var(--display); font-size: 18px; }
.pack-demo__head span { color: var(--dim); font-size: 13px; }
.pack-demo__row {
  display: flex; align-items: center; gap: 12px; padding: 10px; margin-top: 6px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.pack-demo__row i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  font-style: normal; font-family: var(--display); font-weight: 700; color: #04101F;
}
.pack-demo__row .t1 { background: var(--blue-bright); }
.pack-demo__row .t2 { background: #9AA7B8; }
.pack-demo__row .t3 { background: #37D28A; }
.pack-demo__row span { flex: 1; font-weight: 600; font-size: 14px; }
.pack-demo__row em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; }
.pack-demo__row em.mio { color: #8FC6FF; }
.pack-demo__bar { height: 4px; margin-top: 16px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.pack-demo__bar span { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
/* Once the demo scrolls into view it plays a pack install on a loop. */
.reveal.in .pack-demo__row { animation: rowIn .5s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms + 150ms); }
.reveal.in .pack-demo__bar span { animation: packFill 3.4s var(--ease-out) .8s infinite; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } }
@keyframes packFill {
  0% { transform: scaleX(0); background: var(--blue); }
  70% { transform: scaleX(1); background: var(--blue); }
  80%, 92% { transform: scaleX(1); background: var(--ok); }
  100% { transform: scaleX(1); background: var(--ok); opacity: 0; }
}

.steps .reveal { transition-delay: calc(var(--i, 0) * 80ms); }
.home .step { background: var(--bg); padding: 24px; }
.home .section--tint .step { background: var(--bg); }
.home .step__n { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--muted); }

.cta { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2); }
.cta__stripe {
  height: 6px;
  background: repeating-linear-gradient(135deg, var(--warn) 0 12px, transparent 12px 24px);
  opacity: .5;
}
.cta__body { padding: 48px 40px 44px; text-align: center; }
.cta h2 { margin: 16px 0 10px; font-size: clamp(28px, 4vw, 40px); text-transform: uppercase; }
.cta p { max-width: 560px; margin: 0 auto; color: var(--muted); font-size: 16px; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

@media (max-width: 960px) {
  .h2o__in, .split { grid-template-columns: 1fr; gap: 40px; }
  .split--flip .split__art { order: 0; }
  .cells { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cells { grid-template-columns: 1fr; }
  .home .section { padding: 64px 0; }
  .h2o { padding-top: 48px; }
  .cta__body { padding: 36px 22px; }
}

/* ---- legal pages */

.legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 40px; }
.legal__head { padding-bottom: 26px; border-bottom: 1px solid var(--line); animation: rise var(--slow) var(--ease-out) both; }
.legal__head h1 { margin: 14px 0 6px; font-size: clamp(32px, 5vw, 46px); text-transform: uppercase; }
.legal__date { margin: 0; color: var(--dim); font-size: 14px; }
.legal__tabs { display: flex; gap: 6px; margin-top: 22px; }
.legal__tabs a {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
.legal__tabs a:hover { color: var(--text); border-color: var(--line-2); }
.legal__tabs a.on { color: var(--text); border-color: var(--blue); background: var(--blue-faint); }
.legal__body { animation: rise var(--slow) var(--ease-out) 80ms both; }
.legal__lead { margin: 28px 0 8px; font-size: 17px; color: var(--text); }
.legal section { padding-top: 26px; }
.legal h2 { margin: 0 0 10px; font-size: 20px; }
.legal p, .legal li { color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal li { margin: 4px 0; }
.legal a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal b { color: var(--text); }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; padding: 1px 6px; border-radius: 5px; background: var(--bg-3); color: var(--text); }
.legal__table { overflow-x: auto; margin: 6px 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.legal__table table { width: 100%; border-collapse: collapse; }
.legal__table th, .legal__table td { padding: 10px 14px; text-align: left; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.legal__table th { color: var(--dim); font-size: 12px; font-weight: 600; background: var(--bg-2); }
.legal__table td { color: var(--muted); }
.legal__table tr:last-child td { border-bottom: 0; }

.agree { margin: 18px 0 0; font-size: 13px; color: var(--dim); }
.agree a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.agree a:hover { color: var(--text); }
.legal-foot { display: flex; justify-content: center; gap: 18px; padding: 0 0 28px; margin-top: -40px; }
.legal-foot a { font-size: 13px; color: var(--dim); transition: color var(--fast) var(--ease-out); }
.legal-foot a:hover { color: var(--muted); }

/* Windows reports reduced motion whenever its "show animations" switch is off, which a lot
   of people turn off for speed. So only the big movement goes: scrolling, looping
   animations and the fade-ins. Hovers and the menu keep their short transitions. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-iteration-count: 1 !important; }
  body.reveal-armed .reveal { opacity: 1; transform: none; }
  .ticker__track, .h2o__grid { animation: none !important; }
}

/* Account menu in the header. */
.acct { position: relative; }
.acct__btn {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 8px 5px 5px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: 600 15px var(--body); cursor: pointer;
  transition: background-color 180ms ease-out;
}
.acct__btn:hover, .acct.open .acct__btn { background: rgba(255, 255, 255, .06); }
.acct__btn img { width: 30px; height: 30px; border-radius: 50%; }
.acct__chev { width: 16px; height: 16px; color: var(--muted); transition: transform 220ms ease-out; }
.acct.open .acct__chev { transform: rotate(180deg); }
.acct__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 240px; padding: 6px;
  background: #11161E; border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.97); transform-origin: top right;
  transition: opacity 160ms ease-in, transform 200ms ease-in, visibility 0s linear 200ms;
}
.acct.open .acct__menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 220ms ease-out, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
/* The rows follow the panel in, one after another. */
.acct__menu > * { opacity: 0; transform: translateY(-4px); transition: opacity 150ms ease-in, transform 150ms ease-in; }
.acct.open .acct__menu > * { opacity: 1; transform: none; transition: opacity 260ms ease-out, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms ease-out, color 150ms ease-out; }
.acct.open .acct__menu > :nth-child(2) { transition-delay: 30ms; }
.acct.open .acct__menu > :nth-child(3) { transition-delay: 60ms; }
.acct.open .acct__menu > :nth-child(4) { transition-delay: 90ms; }
.acct.open .acct__menu > :nth-child(5) { transition-delay: 120ms; }
.acct.open .acct__menu > :nth-child(6) { transition-delay: 150ms; }
.acct__head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.acct__head img { width: 36px; height: 36px; border-radius: 50%; }
.acct__head b { display: block; font-size: 14px; }
.acct__head span { font-size: 12px; color: var(--dim); }
.acct__item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 9px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: #CDD6E1;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.acct__item:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* The icon tile, cut like BONELAB's mod icons: a dark square with a thick coloured frame, a
   tab in the top corner and line art inside. The tab starts small and opens out on hover,
   the same move the .picker button makes, so the two read as one family. */
.acct__ico {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 2px solid var(--ico);
  border-radius: 9px;
  background: var(--abyss);
  color: var(--ico);
  transition: background-color 180ms var(--ease-out), transform 260ms var(--ease-out);
}
.acct__ico::after {
  content: "";
  position: absolute; top: -2px; right: -2px;
  width: 9px; height: 9px;
  border-radius: 0 8px 0 3px;
  background: var(--ico);
  opacity: .6;
  transform: scale(.86); transform-origin: top right;
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease-out;
}
.acct__ico svg { width: 17px; height: 17px; }
.acct__item:hover .acct__ico { background: color-mix(in srgb, var(--ico) 16%, var(--abyss)); }
.acct__item:hover .acct__ico::after { transform: none; opacity: 1; }

/* A colour per row, from the set BONELAB's mod icons use. */
.acct__ico--dash   { --ico: var(--blue); }
.acct__ico--gear   { --ico: #7C5CF5; }
.acct__ico--shield { --ico: #F2A81D; }
.acct__ico--help   { --ico: #2FC6D9; }
.acct__ico--add    { --ico: #34C24C; }
.acct__ico--out    { --ico: #E5443A; }

/* Signing out is the one row that should feel like a way out, not a place to go. */
.acct__item:has(.acct__ico--out):hover { background: rgba(229, 68, 58, .10); color: #FF8A80; }

@media (prefers-reduced-motion: reduce) {
  .acct__ico, .acct__ico::after { transition: none; }
}
.acct__sep { height: 1px; margin: 6px 4px; background: var(--line); }

/* Other accounts signed in on this browser. One click each, and nothing at all when there
   is only the one, which is nearly always. */
.acct__label {
  padding: 4px 10px 6px;
  color: var(--dim);
  font: 600 11px var(--body);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.acct__who {
  width: 100%;
  border: 0;
  background: none;
  font: 500 14px var(--body);
  text-align: left;
  cursor: pointer;
}
.acct__who img { width: 22px; height: 22px; border-radius: 50%; }
.acct__who span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- dropdown, cut like BONELAB's tiles

   The browser's own select looks like Windows, not like this. This one is a dark tile with a
   thick frame and a tab in the corner, and it drops a panel of big rows. */

.picker { position: relative; display: inline-block; text-align: left; }

.picker__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 132px;
  padding: 7px 12px;
  border: 2px solid var(--line-2);
  border-radius: 10px;
  background: var(--sink);
  color: var(--text);
  font: 700 13px var(--body);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.picker__btn::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  border-radius: 0 10px 0 5px;
  background: currentColor;
  opacity: .55;
  transform: scale(.6);
  transform-origin: top right;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}

.picker__btn:hover,
.picker.open .picker__btn {
  border-color: var(--blue);
  background: #0E141F;
  transform: translateY(-1px);
}

.picker__btn:hover::after,
.picker.open .picker__btn::after { transform: none; opacity: 1; }

.picker.busy .picker__btn { opacity: .6; cursor: default; transform: none; }

.picker__chev { width: 15px; height: 15px; transition: transform .22s ease; }
.picker.open .picker__chev { transform: rotate(180deg); }

.picker__menu {
  position: fixed;
  z-index: 140;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .16s ease, transform .2s cubic-bezier(.22,1,.36,1);
}

.picker__menu.up { transform: translateY(6px) scale(.98); }

.picker__menu.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.picker__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: 600 13px var(--body);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

.picker__item:hover { background: rgba(255, 255, 255, .06); }
.picker__item.on { color: var(--blue-bright); }
.picker__tick { width: 14px; height: 14px; }

/* The role picker borrows the colour of the role it's showing. */
.picker[data-value="free"] .picker__btn { color: var(--muted); }
.picker[data-value="tester"] .picker__btn { color: var(--ok); }
.picker[data-value="developer"] .picker__btn { color: var(--bad); }

/* ---- Discord ids, kept covered until you ask */

.id-cell { display: inline-flex; align-items: center; gap: 8px; }

.id-peek {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform var(--fast) var(--ease-out);
}

.id-peek:hover { border-color: var(--line-blue); background: var(--blue-faint); color: var(--text); }
.id-peek:active { transform: scale(.9); }
.id-peek.on { color: var(--blue); border-color: var(--line-blue); }
.id-peek svg { width: 15px; height: 15px; }

.id-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  /* Only the width: the spacing has to land at once or the new width is measured wrong. */
  transition: width var(--slow) var(--ease-out);
}

.id-text.hidden { color: var(--dim); letter-spacing: .18em; }

/* ---- the shared packs queue on the admin page */

.packs { display: flex; flex-direction: column; gap: 12px; }

/* Side by side when there are a lot to look through. */
.packs.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  align-items: start;
}

.packs-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 42px 0;
  color: var(--muted);
}

.packs .packs .pack {
  position: relative;
  display: grid;
  gap: 0 16px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  transition: border-color var(--fast) var(--ease-out);
}

.packs .pack:hover { border-color: var(--line-2); }

.packs .pack.changed { border-color: rgba(245, 178, 74, .35); }

.packs .pack.banned { border-color: rgba(240, 89, 106, .3); }/* Side by side: the picture across the top,
everything else under it. */
.packs .packs.gallery .pack {
  grid-template-columns: 1fr;
}

.packs.gallery .pack__cover {
  width: 100%;
  border-radius: 0;
}/* One a line: the picture down the left,
the words beside it,
the mods under both. */
.packs .packs.list .pack {
  grid-template-columns: 172px minmax(0, 1fr);
}

.packs.list .pack__cover {
  grid-row: 1 / span 2;
  width: 100%;
  height: 100%;
  min-height: 116px;
  border-radius: 0;
}

.packs .pack__cover {
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-3);
}

.packs .pack__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.packs .pack__cover.none { background: linear-gradient(140deg, var(--bg-3), var(--bg-2)); }

.packs .pack__head {
  display: block;
  min-width: 0;
  padding: 14px 16px 0;
}

.packs.list .pack__head { padding: 14px 16px 0 0; }

.packs .pack__head h3 {
  margin: 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.packs .pack__state {
  display: inline-block;
  margin: 6px 0 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.packs .pack__state.new { background: rgba(245, 178, 74, .16); color: var(--warn); }

.packs .pack__state.changed { background: rgba(245, 178, 74, .16); color: var(--warn); }

.packs .pack__state.checked { background: rgba(55, 210, 138, .16); color: var(--ok); }

.packs .pack__state.banned { background: rgba(240, 89, 106, .16); color: var(--bad); }

.packs .pack__by {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--text);
  font-size: 13px;
}

.packs .pack__by img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }

.packs .pack__by span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }/* The numbers,
on their own line with dots between them. */
.packs .pack__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.packs .pack__stats span { position: relative; }

.packs .pack__stats span + span::before {
  content: "\00b7";
  position: absolute;
  left: -9px;
  color: var(--dim);
}

.packs .pack__desc {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.packs .pack__changed {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0;
  background: rgba(245, 178, 74, .08);
  color: var(--warn);
  font-size: 12.5px;
  line-height: 1.5;
}

.packs .pack__note {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(240, 89, 106, .1);
  color: var(--bad);
  font-size: 12.5px;
}/* The menu sits in the card's corner,
over the picture in gallery. */
.packs .pack__acts {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

.packs .pack__menu {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(8, 12, 18, .72);
  backdrop-filter: blur(6px);
}

.packs .pack__menu svg { width: 15px; height: 15px; }/* What's in it: each one opens where it came from,
so it can be looked at. */
.packs .pack__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 14px 16px 16px;
  list-style: none;
  min-width: 0;
}

.packs.list .pack__items { padding: 12px 16px 16px 0; }

.packs .pack__items a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 230px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text);
  font-size: 12.5px;
  text-decoration: none;
  transition: border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}

.packs .pack__items a:hover { border-color: var(--line-blue); background: var(--blue-faint); }

.packs .pack__items a img { border-radius: 4px; flex: none; }

.packs .pack__items a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.packs .pack__more {
  align-self: center;
  color: var(--dim);
  font-size: 12px;
}

.toolbar .grow { flex: 1; }

/* A row of buttons where one is picked, like the app's. */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
}

.seg button {
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: 700 12.5px var(--body);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.seg button:hover { color: var(--text); }
.seg button.on { background: var(--blue-faint); color: var(--blue-bright); box-shadow: inset 0 0 0 1px var(--line-blue); }

/* ---- admin motion
   Everything that arrives, arrives: rows come in one after another, numbers count up to
   what they are, and an id that's asked for is spelled out rather than appearing. */

.row-in {
  animation: rise var(--med) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 34ms);
}

.stat b {
  font-variant-numeric: tabular-nums;
}

/* The width follows what's in it, so dots growing into an id is one movement. */
.id-text .ch {
  display: inline-block;
  animation: charIn 340ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 16ms);
}

@keyframes charIn {
  from { opacity: 0; transform: translateY(5px) scale(.86); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* A role that was just changed, so it's clear which row took it. */
@keyframes rowTook {
  0% { background: rgba(var(--blue-rgb, 45, 151, 248), .22); }
  100% { background: transparent; }
}

.row-took td { animation: rowTook 1.1s var(--ease-out) both; }

.packs .pack { animation: rise var(--med) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 44ms); }

.packs-wait { animation: rise var(--med) var(--ease-out) both; }

/* ---- Ossa+ by the clock, and bans */

.table td.when { color: var(--muted); white-space: nowrap; }

.row-acts {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* The Ossa+ one carries a date rather than a word, so it needs the room. */
.picker--slim .picker__btn {
  min-width: 118px;
  padding: 6px 10px;
  font-size: 12px;
}

.picker--slim[data-value="off"] .picker__btn { color: var(--muted); }
.picker--slim[data-value="0"] .picker__btn,
.picker--slim[data-value="timed"] .picker__btn { color: var(--blue-bright); }

.row-ban {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--dim);
  cursor: pointer;
  transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out),
    background var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}

.row-ban svg { width: 16px; height: 16px; }
.row-ban:hover { color: var(--bad); border-color: rgba(240, 89, 106, .45); background: rgba(240, 89, 106, .10); }
.row-ban:active { transform: scale(.9); }
.row-ban.on { color: var(--ok); border-color: rgba(55, 210, 138, .4); }
.row-ban.on:hover { color: var(--ok); border-color: rgba(55, 210, 138, .6); background: rgba(55, 210, 138, .10); }

/* A banned account still shows, dimmed, with the reason under the name. */
tr.banned { background: rgba(240, 89, 106, .05); }
tr.banned .u-cell img { filter: grayscale(1); opacity: .6; }
tr.banned td { color: var(--dim); }

.row-why {
  display: block;
  margin-top: 2px;
  color: var(--bad);
  font-size: 12px;
}

/* ---- the owner's dropdowns, and the packs they act on */

.admin-drop { position: relative; }

.admin-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  animation: rise var(--fast) var(--ease-out) both;
}

.admin-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: 600 13px var(--body);
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}

.admin-menu__item svg { width: 15px; height: 15px; flex: none; opacity: .8; transition: transform var(--fast) var(--ease-out), opacity var(--fast) var(--ease-out); }
.admin-menu__item:hover svg { opacity: 1; transform: scale(1.12); }
.admin-menu__item:hover { background: var(--blue-faint); color: var(--blue-bright); }
.admin-menu__item.danger { color: var(--bad); }
.admin-menu__item.danger:hover { background: rgba(240, 89, 106, .12); }
.admin-menu__item.on { color: var(--blue-bright); }
.admin-menu__sep { height: 1px; margin: 5px 6px; background: var(--line); }

.btn.danger svg { color: inherit; }

.look-seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-2);
}

.look-seg button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}

.look-seg button svg { width: 15px; height: 15px; }
.look-seg button:hover { color: var(--text); }
.look-seg button.on { background: var(--blue-faint); color: var(--blue-bright); }

/* ---- a shared pack, opened from a link */

/* A page that fills the window, so the legal line sits at the bottom of it rather than
   somewhere down past the fold. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
body > .legal-foot { flex: none; }

.packpage { padding: 48px 24px 80px; }

.packpage__head {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: flex-start;
}

.packpage__cover {
  flex: none;
  width: 340px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
}

.packpage__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No picture on it yet: its first letter, rather than an empty box. */
.packpage__cover {
  display: grid;
  place-items: center;
}

.packpage__letter {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 700;
  color: var(--line-2);
}

.packpage__info { flex: 1; min-width: 260px; }
.packpage__info h1 { margin: 0 0 8px; font-size: 34px; }

.packpage__tick {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--ok);
  color: #06210f;
  font-size: 14px;
  vertical-align: 5px;
}

.packpage__by {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13.5px;
}

.packpage__by img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

.packpage__desc { margin: 16px 0 0; max-width: 60ch; line-height: 1.6; }

.packpage__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.packpage__h2 { margin: 46px 0 14px; font-size: 20px; }

.packpage__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.packpage__items a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}

.packpage__items a:hover { border-color: var(--line-blue); transform: translateY(-1px); }

.packpage__icon {
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--bg-3);
}

.packpage__icon img { width: 100%; height: 100%; object-fit: cover; }

.packpage__item-text { display: flex; flex-direction: column; min-width: 0; }
.packpage__item-text b { font-size: 13.5px; }
.packpage__item-text span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
}

.packpage__src {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: -2px;
}

.packpage__hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

/* Already on your list: the button says so rather than offering it again. */
.btn.is-saved {
  border-color: rgba(55, 210, 138, .4);
  color: var(--ok);
}

/* ---- a question of our own, instead of the browser's grey box */

.ask {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 9, 14, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--fast) var(--ease-out);
}

.ask.in { opacity: 1; }
.ask.going { opacity: 0; }

.ask__box {
  width: min(440px, 100%);
  padding: 22px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--bg-2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  transform: translateY(10px) scale(.98);
  transition: transform var(--med) var(--ease-out);
}

.ask.in .ask__box { transform: none; }
.ask.going .ask__box { transform: translateY(6px) scale(.99); }

.ask__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
}

.ask__body {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.ask__field {
  display: block;
  margin-top: 16px;
}

.ask__field span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ask__field .input { width: 100%; }

.ask__acts {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.ask__acts .btn { min-height: 40px; padding: 9px 18px; font-size: 14px; }

.btn-bad {
  background: var(--bad);
  color: #1a0508;
}

.btn-bad:hover { background: #ff7182; }

/* ---- the owner's pack list, when it's meant to be a list */

.packs .packs.list { gap: 8px; }

.packs .packs.list .pack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 14px;
  padding: 8px 48px 8px 8px;
  border-radius: 12px;
}

.packs.list .pack__cover {
  flex: none;
  width: 76px;
  height: 43px;
  min-height: 0;
  border-radius: 8px;
  aspect-ratio: auto;
}

.packs.list .pack__head {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
  padding: 0;
}

.packs.list .pack__head h3 { font-size: 14.5px; }
.packs.list .pack__state { margin: 0; }
.packs.list .pack__by { margin: 0; font-size: 12.5px; }
.packs.list .pack__by img { width: 17px; height: 17px; }
.packs.list .pack__stats { margin: 0; }
.packs.list .pack__desc { display: none; }

.packs.list .pack__changed,
.packs.list .pack__note {
  flex-basis: 100%;
  margin: 2px 0 0;
  padding: 5px 9px;
  font-size: 12px;
}

/* What's in it stays reachable, as the mods' own icons on one line. */
.packs.list .pack__items {
  flex: none;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 0;
}

.packs.list .pack__items a {
  max-width: none;
  padding: 3px;
  border-radius: 8px;
}

.packs.list .pack__items .pack__chip-nm { display: none; }
.packs.list .pack__more { font-size: 11px; }

.packs.list .pack__acts {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* A mod in a pack, with its own icon and a mark for where it came from. */
.pack__chip-art {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-2);
}

.pack__chip-art img { width: 100%; height: 100%; object-fit: cover; }

.pack__chip-art .pack__chip-src {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 4px 0 0 0;
  background: rgba(6, 9, 14, .85);
  object-fit: contain;
}

.pack__chip-art.solo .pack__chip-src {
  position: static;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: none;
}

/* ---- creator codes, in the admin panel */

.codes { display: grid; gap: 10px; }
.code-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 110px 150px auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.code-row.wait { border-color: rgba(245, 176, 65, .38); background: rgba(245, 176, 65, .05); }
.code-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.code-who img { width: 34px; height: 34px; border-radius: 50%; }
.code-who b { display: block; font-size: 15px; letter-spacing: .02em; }
.code-who span { color: var(--muted); font-size: 13px; }
.code-num b { display: block; font-family: var(--display); font-size: 17px; }
.code-num span { color: var(--dim); font-size: 12px; }
.code-acts { display: flex; justify-content: flex-end; gap: 8px; }
.pill { padding: 5px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.pill.ok { border: 1px solid rgba(58, 200, 128, .4); background: rgba(58, 200, 128, .1); color: #8ae9b6; }
@media (max-width: 860px) {
  .code-row { grid-template-columns: 1fr 1fr; }
  .code-who { grid-column: 1 / -1; }
  .code-acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* The star that makes somebody a creator. */
.row-creator {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--dim);
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
}
.row-creator svg { width: 15px; height: 15px; }
.row-creator:hover { color: #ffc23d; border-color: rgba(255, 194, 61, .5); }
.row-creator.on { color: #ffc23d; border-color: rgba(255, 194, 61, .5); background: rgba(255, 194, 61, .12); }