/* AlloyMC sites. Same metals as the app: night slate, gold, steel, and molten orange for heat.
   Archivo, set wide and heavy, carries headings; Onest does the reading; Pixelify is kept for the logo. */

@font-face {
  font-family: "Pixelify Sans";
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/pixelify-700.c836cfa5.woff2") format("woff2");
}
@font-face {
  font-family: "Pixelify Sans";
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/pixelify-500.d17198a8.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/static/fonts/archivo.e3a28ead.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/static/fonts/archivo-ext.5717f370.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/onest.052df745.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/onest-ext.14e7d307.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --night: #0d0e11;
  --slate: #17191e;
  --panel: #1c1e24;
  --raise: #23252c;
  --line: #2d3038;
  --line-soft: #23252c;
  --ink: #eceef2;
  --ink-2: #aab0bb;
  --ink-3: #8a909b;
  --gold: #f8c95a;
  --gold-hi: #ffdc88;
  --gold-deep: #d99b22;
  --gold-edge: #9c6a10;
  --gold-ink: #2b1d00;
  --steel: #8d969d;
  --steel-deep: #697279;
  --molten: #ff9a2a;
  --molten-deep: #ff5a12;
  --grass: #6fbf4a;
  --redstone: #e5484d;
  /* One metal per product: gold for Alloy, emerald for accounts, diamond for developers.
     Profiles pick from the same set (.c-*). */
  --emerald: #3fbf6f;
  --emerald-hi: #7ee6a1;
  --diamond: #4fd1c5;
  --diamond-hi: #9af0e8;

  --pixel: "Pixelify Sans", ui-monospace, monospace;
  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --sans: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 64ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wide: 1180px;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--gold-hi);
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: var(--gold);
  color: var(--gold-ink);
}
code {
  font: 500 0.88em/1 ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.12em 0.36em;
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  background: var(--gold);
  color: var(--gold-ink);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-weight: 600;
}
.skip:focus {
  top: 1rem;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin-inline: auto;
}
.prose {
  max-width: var(--measure);
}

/* ---------- type ---------- */

.display,
h1,
h2 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.9rem);
  line-height: 1.02;
}
h2 {
  font-size: clamp(1.65rem, 1.25rem + 1.4vw, 2.3rem);
  line-height: 1.1;
  font-weight: 780;
  font-stretch: 108%;
}
h2 + .lede {
  margin-top: 1rem;
}
h3 {
  font: 650 1.2rem/1.3 var(--sans);
  margin: 0;
  letter-spacing: -0.01em;
}
p {
  margin: 0;
  text-wrap: pretty;
}
.lede {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
}
.quiet {
  color: var(--ink-3);
  font-size: 0.92rem;
}

/* ---------- header ---------- */

.top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font: 700 1.35rem/1 var(--pixel);
  font-variant-ligatures: none;
}
.brand img {
  width: 30px;
  height: auto;
}
.brand:hover {
  color: var(--ink);
}
.brand small {
  font: 500 0.95rem/1 var(--pixel);
  color: var(--ink-3);
}
.nav {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
}
.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover {
  color: var(--ink);
}
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.top .block.small {
  margin-left: 0.25rem;
}
/* One bar for every site: the products, this site's pages, and you. */
.top .wrap {
  gap: 1.4rem;
}
.top-end {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.top .brand,
.top-end,
.menu {
  flex: none;
}
.signin {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.95rem;
}
.signin:hover {
  color: var(--ink);
}
.products,
.menu {
  position: relative;
}
.products > summary,
.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 0.95rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  transition:
    color var(--t) var(--ease),
    background-color var(--t) var(--ease);
}
.products > summary::-webkit-details-marker,
.menu > summary::-webkit-details-marker {
  display: none;
}
.products > summary:hover,
.products[open] > summary,
.menu > summary:hover,
.menu[open] > summary {
  color: var(--ink);
  background: rgb(255 255 255 / 0.06);
}
.products > summary svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t) var(--ease);
}
.products[open] > summary svg {
  transform: rotate(180deg);
}
.drop {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: -0.5rem;
  z-index: 40;
  width: min(25rem, calc(100vw - 2 * var(--gutter)));
  padding: 0.6rem;
  background: rgb(23 25 30 / 0.985);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.85);
  backdrop-filter: blur(14px);
  animation: drop-in 0.22s var(--ease) both;
}
@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}
.drop-label {
  margin: 0.3rem 0.6rem 0.4rem;
  font: 650 0.72rem/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.product-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.prod {
  --m: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.7rem;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--t) var(--ease);
}
.prod img {
  width: 32px;
  height: 32px;
  flex: none;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--m) 45%, transparent));
  transition: transform var(--t-slow) var(--ease-spring);
}
.prod b {
  display: block;
  font-weight: 650;
}
.prod small {
  display: block;
  color: var(--ink-3);
  font-size: 0.84rem;
  line-height: 1.35;
}
.prod:hover,
.prod[aria-current] {
  color: var(--ink);
  background: color-mix(in srgb, var(--m) 12%, transparent);
}
.prod:hover img {
  transform: rotate(-10deg) scale(1.12);
}
.prod[aria-current] b {
  color: color-mix(in srgb, var(--m) 60%, white);
}
.prod.m-emerald {
  --m: var(--emerald);
}
.prod.m-diamond {
  --m: var(--diamond);
}
.drop-foot {
  display: flex;
  gap: 1rem;
  margin: 0.4rem 0 0;
  padding: 0.7rem 0.7rem 0.3rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.84rem;
}
.drop-foot a {
  color: var(--ink-3);
  text-decoration: none;
}
.drop-foot a:hover {
  color: var(--ink);
}
.menu {
  display: none;
}
.menu > summary svg {
  width: 20px;
  height: 20px;
}
.menu .drop {
  left: auto;
  right: -0.25rem;
}
.menu-links {
  display: grid;
  padding: 0.2rem 0 0.5rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-soft);
}
.menu-links a {
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.menu-links a:hover,
.menu-links a[aria-current] {
  background: rgb(255 255 255 / 0.06);
}
@media (max-width: 960px) {
  .nav,
  .products,
  .top-end .signin,
  .top-end .ghost.small {
    display: none;
  }
  .top-end {
    margin-left: auto;
  }
  .menu {
    display: block;
  }
}
@media (max-width: 420px) {
  .top-end .block.small {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem 0.45rem;
  }
}

/* ---------- the Play block (the app's button, as a download button) ---------- */

.block {
  --lip: 6px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem 0.9rem 1.35rem;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 38%, var(--gold-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 -2px 0 rgb(0 0 0 / 0.08),
    0 var(--lip) 0 var(--gold-edge);
  color: var(--gold-ink);
  font: 780 1.2rem/1 var(--display);
  font-stretch: 108%;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 0.12s cubic-bezier(0.3, 0.7, 0.4, 1.4),
    box-shadow 0.12s,
    filter 0.3s;
}
.block svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}
.block:hover {
  color: var(--gold-ink);
  filter: saturate(1.15) brightness(1.04);
}
.block:active {
  transform: translateY(calc(var(--lip) - 1px));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 1px 0 var(--gold-edge);
}
.block .sub {
  display: block;
  font: 500 0.78rem/1.2 var(--sans);
  letter-spacing: 0;
  opacity: 0.72;
  margin-top: 0.2rem;
}
.block.small {
  --lip: 4px;
  font-size: 1rem;
  padding: 0.6rem 1rem 0.55rem 0.85rem;
  gap: 0.5rem;
}

.ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: rgb(23 25 30 / 0.65);
  text-decoration: none;
  font-weight: 550;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.ghost:hover {
  color: var(--ink);
  border-color: var(--steel);
  background: var(--panel);
}
.ghost svg {
  width: 1.1em;
  height: 1.1em;
}

/* ---------- forge hero (launcher) ---------- */

.forge {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
}
.forge-scene {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.forge-scene .stage {
  position: absolute;
  top: 50%;
  left: 70%;
  width: max(100%, 92vh * 2.359);
  aspect-ratio: 3072 / 1302;
  transform: translate(-50%, -50%);
}
.forge-scene img,
.forge-scene svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.forge-scene .bg-molten {
  fill: #ffd889;
  opacity: 0;
  animation: molten 3.4s ease-in-out infinite alternate;
}
.forge-scene .bg-molten:nth-child(3n) {
  animation-delay: -1.2s;
  animation-duration: 2.6s;
}
.forge-scene .bg-molten:nth-child(3n + 1) {
  animation-delay: -2.3s;
}
.forge-scene .bg-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  fill: #ffc25a;
  animation: flame 0.42s steps(2) infinite alternate;
}
/* Shade the left so text sits on dark stone, and fade into the page below. */
.forge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(13 14 17 / 0.94) 0%, rgb(13 14 17 / 0.78) 34%, rgb(13 14 17 / 0.1) 62%, transparent 80%),
    linear-gradient(180deg, rgb(13 14 17 / 0.55) 0%, transparent 18%, transparent 70%, var(--night) 100%);
}
.forge .copy {
  max-width: 46rem;
}
.forge .lede {
  max-width: 50ch;
}
.forge h1 {
  margin-bottom: 1.4rem;
}
.forge h1 .heat {
  color: var(--gold);
}
.forge .lede {
  margin-bottom: 2.2rem;
}
.get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.4rem;
}
.get-meta {
  margin-top: 1.4rem;
  color: var(--ink-3);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}
.get-meta a {
  color: var(--ink-2);
}
.get-note {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--ink-2);
  max-width: 46ch;
}
@media (max-width: 860px) {
  .forge {
    min-height: auto;
    padding: 110px 0 56px;
    align-items: flex-end;
  }
  /* Phones: the forge sits above the headline instead of behind it. */
  .forge-scene .stage {
    top: 0;
    left: 64%;
    width: 210vw;
    transform: translateX(-50%);
  }
  .forge::before {
    background: linear-gradient(180deg, rgb(13 14 17 / 0.55) 0%, rgb(13 14 17 / 0) 14%, rgb(13 14 17 / 0) 46vw, rgb(13 14 17 / 0.94) 80vw, var(--night) 100%);
  }
  .forge .copy {
    padding-top: 52vw;
  }
}

@keyframes molten {
  to {
    opacity: 0.32;
  }
}
@keyframes flame {
  from {
    transform: scale(1, 0.92) skewX(-2deg);
    opacity: 0.6;
  }
  to {
    transform: scale(1.04, 1.08) skewX(2deg);
    opacity: 1;
  }
}

/* ---------- product shot ---------- */

.shot {
  position: relative;
  margin: 0;
}
.shot .frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--slate);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.4),
    0 30px 80px -20px rgb(0 0 0 / 0.75);
}
.shot img {
  width: 100%;
  height: auto;
}
.shot figcaption {
  margin-top: 0.9rem;
  color: var(--ink-3);
  font-size: 0.9rem;
}
.lift {
  margin-top: -40px;
  position: relative;
  z-index: 2;
}

/* ---------- sections ---------- */

.band {
  padding: clamp(4.5rem, 3rem + 6vw, 8rem) 0;
}
.band + .band {
  border-top: 1px solid var(--line-soft);
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split.flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.split.flip > :first-child {
  order: 2;
}
@media (max-width: 900px) {
  .split,
  .split.flip {
    grid-template-columns: 1fr;
  }
  .split.flip > :first-child {
    order: 0;
  }
}
.split h2 {
  margin-bottom: 1.2rem;
}
.split .lede + .lede {
  margin-top: 1rem;
}
.points {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.points li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--ink-2);
}
.points li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--gold);
  box-shadow: 1px 1px 0 var(--gold-edge);
}
.points strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- the check, rebuilt in HTML (crisp at any size, readable by crawlers) ---------- */

.panel {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.6rem;
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.8);
}
.problems {
  border: 1px solid rgb(229 72 77 / 0.45);
  border-radius: 9px;
  background: linear-gradient(180deg, rgb(229 72 77 / 0.08), transparent 70%);
  padding: 0.85rem 0.9rem 0.5rem;
}
.problems .head,
.updates .head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 0.6rem;
}
.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--redstone);
  flex: none;
  position: relative;
}
.dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  background: var(--redstone);
  box-shadow: 0 7px 0 var(--redstone);
  transform: scaleY(0.7);
  transform-origin: top;
}
.problem {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.75rem;
  border-radius: 7px;
  background: rgb(255 255 255 / 0.025);
  margin-bottom: 0.45rem;
  font-size: 0.93rem;
  color: var(--ink-2);
}
.problem b {
  color: var(--ink);
  font-weight: 600;
}
.problem > span:first-child {
  flex: 1;
}
.fix {
  flex: none;
  font: 600 0.8rem/1 var(--sans);
  color: var(--gold-ink);
  background: var(--gold);
  border-radius: 5px;
  padding: 0.5rem 0.65rem;
  white-space: nowrap;
}
.updates {
  margin-top: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.85rem 0.9rem;
}
.update {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.5rem 0.2rem;
  font-size: 0.93rem;
}
.update .from {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.update .from b {
  color: var(--ink);
  font-weight: 500;
}
.update.held .from {
  color: var(--molten);
}
.tick {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--gold);
  position: relative;
}
.tick::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid var(--gold-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tick.off {
  background: transparent;
  border: 2px solid var(--line);
}
.tick.off::after {
  display: none;
}
@media (max-width: 520px) {
  .problem {
    flex-wrap: wrap;
  }
  .update {
    grid-template-columns: auto 1fr;
  }
  .update .from {
    grid-column: 2;
  }
}

/* ---------- loaders strip ---------- */

.loaders {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 2.6rem;
}
.loaders div {
  padding: 1.4rem 1.1rem 1.5rem;
  border-left: 1px solid var(--line);
}
.loaders div:first-child {
  border-left: 0;
  padding-left: 0;
}
.loaders dt {
  font: 780 1.35rem/1.1 var(--display);
  font-stretch: 110%;
  margin-bottom: 0.45rem;
}
.loaders dd {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.9rem;
  line-height: 1.45;
}
@media (max-width: 860px) {
  .loaders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .loaders div,
  .loaders div:first-child {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
  }
  .loaders div:nth-child(-n + 2) {
    border-top: 0;
  }
}

/* ---------- measured ---------- */

.measured {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2.4rem;
  font-variant-numeric: tabular-nums;
}
.measured th,
.measured td {
  text-align: left;
  padding: 1.1rem 1rem 1.1rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
}
.measured thead th {
  font-weight: 500;
  color: var(--ink-3);
  font-size: 0.88rem;
  padding-top: 0;
}
.measured td.now {
  font: 800 clamp(1.5rem, 1rem + 1.6vw, 2.3rem)/1 var(--display);
  font-stretch: 112%;
  color: var(--gold);
  white-space: nowrap;
}
.measured td.before {
  color: var(--ink-3);
}
.measured th[scope="row"] {
  font-weight: 500;
  color: var(--ink);
  width: 38%;
}
@media (max-width: 700px) {
  .measured thead {
    display: none;
  }
  .measured tr {
    display: grid;
    grid-template-columns: 1fr auto;
    border-bottom: 1px solid var(--line-soft);
    padding: 1rem 0;
  }
  .measured th,
  .measured td {
    border: 0;
    padding: 0.15rem 0;
  }
  .measured th[scope="row"] {
    width: auto;
    grid-column: 1 / -1;
  }
  .measured td.before {
    grid-row: 3;
    font-size: 0.88rem;
  }
}

/* ---------- sources row ---------- */

.sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
  margin-top: 2.8rem;
}
.sources h3 {
  margin-bottom: 0.6rem;
}
.sources p {
  color: var(--ink-2);
  font-size: 0.98rem;
}
@media (max-width: 860px) {
  .sources {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
}

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

.faq {
  margin-top: 2.4rem;
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font: 600 1.1rem/1.4 var(--sans);
  position: relative;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border: solid var(--ink-3);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.faq details[open] summary::after {
  transform: rotate(225deg);
  margin-top: -2px;
}
.faq summary:hover {
  color: var(--gold-hi);
}
.faq .answer {
  padding: 0 0 1.5rem;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* ---------- closing call ---------- */

.closing {
  text-align: center;
  padding: clamp(5rem, 4rem + 6vw, 9rem) 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--line-soft);
}
.closing::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40%;
  width: min(900px, 140vw);
  aspect-ratio: 2;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(255 154 42 / 0.22), rgb(255 90 18 / 0.06) 60%, transparent);
  z-index: -1;
}
.closing img.ori {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.4rem;
}
.closing h2 {
  margin-bottom: 1rem;
}
.closing .lede {
  margin: 0 auto 2.2rem;
}
.closing .get,
.closing .get-meta {
  justify-content: center;
}
.table-scroll.spaced {
  margin-top: 2.5rem;
}
#update {
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line-soft);
}

/* ---------- inner pages ---------- */

.page-head {
  padding: 150px 0 3rem;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(60% 120% at 85% 0%, rgb(255 154 42 / 0.1), transparent 60%),
    linear-gradient(180deg, #121318, var(--night));
}
.page-head h1 {
  font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.9rem);
  margin-bottom: 1rem;
}
.crumbs {
  font-size: 0.88rem;
  color: var(--ink-3);
  margin-bottom: 1.2rem;
}
.crumbs a {
  color: var(--ink-2);
}
.updated {
  margin-top: 1.2rem;
  color: var(--ink-3);
  font-size: 0.9rem;
}

.article {
  padding: 3.5rem 0 6rem;
}
.article .prose > * + * {
  margin-top: 1.1rem;
}
.article .prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  margin-top: 3rem;
}
.article .prose h3 {
  margin-top: 2rem;
}
.article .prose ul,
.article .prose ol {
  padding-left: 1.3rem;
  color: var(--ink-2);
}
.article .prose li + li {
  margin-top: 0.45rem;
}
.article .prose p {
  color: var(--ink-2);
}
.article .prose strong {
  color: var(--ink);
}
.tldr {
  border-left: 3px solid var(--gold);
  padding: 0.2rem 0 0.2rem 1.2rem;
  color: var(--ink) !important;
  font-size: 1.1rem;
}
.callout {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
}
.callout p {
  color: var(--ink-2);
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 820px;
}
.data th,
.data td {
  text-align: left;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.data thead th {
  color: var(--ink-3);
  font-weight: 500;
  font-size: 0.85rem;
  border-bottom-color: var(--line);
}
.data th[scope="row"] {
  font-weight: 600;
  color: var(--ink);
}
.data td {
  color: var(--ink-2);
}
.data .us {
  color: var(--ink);
}
.data thead .us {
  color: var(--gold);
  font: 780 1.05rem/1 var(--display);
  font-stretch: 108%;
}

/* download page */
.downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 860px) {
  .downloads {
    grid-template-columns: 1fr;
  }
}
.dl {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.6rem;
  background: var(--slate);
}
.dl.mine {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 1px var(--gold-edge) inset;
}
.dl h2 {
  font-size: 1.8rem;
  margin-bottom: 0.35rem;
}
.dl .what {
  color: var(--ink-3);
  font-size: 0.92rem;
  margin-bottom: 1.4rem;
}
.dl ol {
  margin: 1.6rem 0 0;
  padding-left: 1.2rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.dl ol li + li {
  margin-top: 0.4rem;
}
.sum {
  margin-top: 1.4rem;
  font-size: 0.8rem;
  color: var(--ink-3);
  word-break: break-all;
}
.sum code {
  white-space: normal;
  font-size: 0.95em;
}

/* changelog */
.release {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2.5rem;
  padding: 3rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.release:last-child {
  border-bottom: 0;
}
.release .ver {
  position: sticky;
  top: 1.5rem;
  align-self: start;
}
.release .ver h2 {
  font-size: 2.2rem;
}
.release .ver p {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin-top: 0.3rem;
}
.notes {
  max-width: var(--measure);
  color: var(--ink-2);
}
.notes > :first-child {
  margin-top: 0;
  color: var(--ink);
  font-size: 1.1rem;
}
.notes h3 {
  color: var(--ink);
  margin: 2rem 0 0.6rem;
}
.notes ul {
  padding-left: 1.2rem;
  margin: 0;
}
.notes li + li {
  margin-top: 0.4rem;
}
.notes p {
  margin: 0.8rem 0;
}
@media (max-width: 760px) {
  .release {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .release .ver {
    position: static;
  }
}

/* guides index */
.guide-list {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--line);
}
.guide-list li {
  border-bottom: 1px solid var(--line);
}
.guide-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 2rem;
  padding: 1.5rem 0;
  text-decoration: none;
  color: var(--ink);
}
.guide-list a:hover h2 {
  color: var(--gold);
}
.guide-list h2 {
  font: 650 1.25rem/1.35 var(--sans);
  transition: color 0.15s;
}
.guide-list p {
  color: var(--ink-3);
  font-size: 0.95rem;
  grid-column: 1;
}
.guide-list span {
  color: var(--ink-3);
  font-size: 0.88rem;
  grid-row: 1;
  grid-column: 2;
  white-space: nowrap;
}

/* ---------- lander ---------- */

.alloy {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 120px 0 80px;
  overflow: hidden;
  isolation: isolate;
}
.alloy::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(1100px, 160vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(255 154 42 / 0.16), rgb(255 90 18 / 0.05) 55%, transparent 72%);
  z-index: -1;
  animation: glow 3.2s ease-out both;
}
.cube {
  width: clamp(150px, 22vw, 230px);
  margin: 0 auto 2.4rem;
  overflow: visible;
}
/* Freshly forged: the gold arrives white-hot and cools to gold, once. */
.cube .alloy-gold path {
  animation: cool 2.6s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.cube .alloy-steel path {
  animation: steel 2.6s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.cube {
  filter: drop-shadow(0 0 0 rgb(255 154 42 / 0));
  animation: cube-glow 2.8s ease-out both;
}
@keyframes cool {
  0% {
    fill: #fff6d8;
  }
  30% {
    fill: #ffd27a;
  }
}
@keyframes steel {
  0% {
    fill: #c9cfd3;
  }
}
@keyframes cube-glow {
  0% {
    filter: drop-shadow(0 0 38px rgb(255 170 60 / 0.85));
  }
  100% {
    filter: drop-shadow(0 18px 40px rgb(0 0 0 / 0.5));
  }
}
@keyframes glow {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
}
.alloy h1 {
  font-size: clamp(3.2rem, 1.5rem + 7vw, 6.5rem);
  margin-bottom: 1.2rem;
}
.alloy .lede {
  margin: 0 auto;
}
.alloy .get {
  justify-content: center;
  margin-top: 2.6rem;
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .product {
    grid-template-columns: 1fr;
  }
}
.product .name {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.product .name img {
  width: 44px;
}
.product h2 {
  margin-bottom: 0;
}
.product .lede {
  margin-bottom: 1.8rem;
}

.next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
  margin-top: 2.6rem;
  list-style: none;
  padding: 0;
}
.next li {
  border-top: 2px solid var(--line);
  padding-top: 1.2rem;
}
.next h3 {
  margin-bottom: 0.5rem;
}
.next p {
  color: var(--ink-2);
  font-size: 0.98rem;
}
@media (max-width: 860px) {
  .next {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 3.5rem 0 3rem;
  color: var(--ink-3);
  font-size: 0.9rem;
}
.foot .cols {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2rem;
}
.foot h2 {
  font: 600 0.9rem/1.2 var(--sans);
  color: var(--ink);
  margin-bottom: 0.8rem;
}
.foot ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.45rem;
}
.foot a {
  color: var(--ink-2);
  text-decoration: none;
}
.foot a:hover {
  color: var(--ink);
}
.foot .about + .about {
  margin-top: 0.7rem;
}
.foot .legal-line {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
}
.foot .brand {
  margin-bottom: 0.9rem;
}
.foot .about {
  max-width: 34ch;
}
@media (max-width: 960px) {
  .foot .cols {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .foot .cols > :first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .foot .cols {
    grid-template-columns: 1fr 1fr;
  }
  .foot .cols > :first-child {
    grid-column: 1 / -1;
  }
}

.notfound {
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 140px 0 80px;
}
.notfound img {
  width: 140px;
  margin: 0 auto 1.6rem;
}
.notfound h1 {
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4rem);
  margin-bottom: 1rem;
}
.notfound .lede {
  margin: 0 auto 2rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .forge-scene .bg-molten {
    opacity: 0.16;
  }
}

/* Long code (error messages, file names) wraps inside reading text instead of pushing the page sideways. */
.prose code,
.callout code,
.dl code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The AlloyMC wordmark: Pixelify's own outlines, with the C opened so it never reads as an O. */
.wordmark {
  display: inline-flex;
  align-items: center;
}
.wordmark svg {
  height: 0.82em;
  width: auto;
}
.alloy h1 .wordmark {
  display: block;
}
.alloy h1 .wordmark svg {
  margin: 0 auto;
}

/* ---------- craft details ---------- */

.details {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.8rem 2.6rem;
}
.details li {
  border-top: 2px solid var(--line);
  padding-top: 1.3rem;
  position: relative;
}
.details h3 {
  margin-bottom: 0.55rem;
}
.details p {
  color: var(--ink-2);
  font-size: 0.98rem;
}
.details .try {
  border-top-color: var(--gold-deep);
}
.details .demo {
  margin-top: 1.4rem;
  min-width: 11rem;
  justify-content: center;
}
.details .demo + .quiet {
  margin-top: 1.1rem;
  font-size: 0.85rem;
}
.ori-inline {
  width: 72px;
  height: 72px;
  margin-top: 1rem;
}
@media (max-width: 960px) {
  .details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .details {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* The basics, deliberately quiet. */
.basics {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.basics li {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  color: var(--ink-2);
  font-size: 0.92rem;
}

.shot video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--slate);
}

.details.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .details.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .details.four {
    grid-template-columns: 1fr;
  }
}

/* ======================= accounts ======================= */

.c-gold { --accent: #f8c95a; }
.c-copper { --accent: #e07a3f; }
.c-redstone { --accent: #e5484d; }
.c-emerald { --accent: #3fbf6f; }
.c-diamond { --accent: #4fd1c5; }
.c-lapis { --accent: #5b8def; }
.c-amethyst { --accent: #a77bdb; }
.c-steel { --accent: #8d969d; }

.avatar,
.pixel {
  image-rendering: pixelated;
  border-radius: 6px;
  background: var(--raise);
  flex: none;
}
.avatar.big {
  width: 72px;
  height: 72px;
  border-radius: 10px;
}
.avatar.huge {
  width: 128px;
  height: 128px;
  border-radius: 16px;
  border: 4px solid var(--night);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.7);
}

/* header: signed in or not */
.signin {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.95rem;
}
.signin:hover {
  color: var(--ink);
}
.me {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 550;
}
.me img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  image-rendering: pixelated;
}
@media (max-width: 860px) {
  .me span,
  .signin {
    display: none;
  }
  .me {
    margin-left: auto;
  }
}

/* form controls */
input:not([type="radio"]):not([type="checkbox"]),
textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.7rem 0.85rem;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
textarea {
  resize: vertical;
  min-height: 5rem;
  line-height: 1.5;
}
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgb(248 201 90 / 0.18);
}
input:user-invalid {
  border-color: var(--redstone);
}
.stack {
  display: grid;
  gap: 1.1rem;
}
.stack label,
.stack fieldset {
  display: grid;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--ink);
}
.stack small,
.facts small,
.rows small {
  display: block;
  font-weight: 400;
  color: var(--ink-3);
  font-size: 0.82rem;
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
legend {
  padding: 0;
  margin-bottom: 0.4rem;
}
fieldset input + input {
  margin-top: 0.45rem;
}
.field-prefix {
  display: flex;
  align-items: center;
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding-left: 0.85rem;
  color: var(--ink-3);
}
.field-prefix:focus-within {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgb(248 201 90 / 0.18);
}
.field-prefix input {
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0.2rem !important;
  background: transparent !important;
}
.row2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) {
  .row2 {
    grid-template-columns: 1fr;
  }
}
.check {
  display: flex !important;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.check input {
  accent-color: var(--gold);
}
button.ghost,
a.ghost {
  cursor: pointer;
  font: inherit;
  font-weight: 550;
}
.ghost.small {
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
}
.ghost.danger {
  color: #ff8a8d;
}
.ghost.danger:hover {
  border-color: var(--redstone);
  color: #ffb0b2;
}
.block.wide {
  width: 100%;
  justify-content: center;
}
.alert {
  border: 1px solid rgb(229 72 77 / 0.5);
  background: rgb(229 72 77 / 0.1);
  color: #ffc2c4;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
}
.alert.ok {
  border-color: rgb(111 191 74 / 0.45);
  background: rgb(111 191 74 / 0.1);
  color: #c9f0b5;
}
.note {
  font-size: 0.88rem;
  color: var(--ink-2);
  border-left: 3px solid var(--gold-deep);
  padding-left: 0.8rem;
}
.fine {
  font-size: 0.8rem;
  color: var(--ink-3);
}
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: 0.1em;
}
.badge.ok {
  border-color: rgb(111 191 74 / 0.5);
  color: #a8e08c;
}

/* sign in / sign up / consent */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 120px var(--gutter) 80px;
  background: radial-gradient(60% 50% at 50% 0%, rgb(255 154 42 / 0.09), transparent 70%);
}
.auth-box {
  width: min(100%, 26rem);
}
.auth-box.center {
  text-align: center;
}
.auth-box.center .block {
  margin-top: 1.6rem;
}
.auth-cube {
  width: 48px;
  margin-bottom: 1.4rem;
}
.auth h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.6rem);
  margin-bottom: 0.6rem;
}
.auth .lede {
  font-size: 1.02rem;
  margin-bottom: 1.6rem;
}
.auth .alert {
  margin-bottom: 1.2rem;
}
.auth-foot {
  margin-top: 1.6rem;
  color: var(--ink-3);
  font-size: 0.92rem;
}
.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-radius: 7px;
  background: #f4f5f7;
  color: #1f2328;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.15s,
    transform 0.1s;
}
.google:hover {
  background: #fff;
  color: #1f2328;
}
.google:active {
  transform: translateY(1px);
}
.or {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink-3);
  font-size: 0.85rem;
  margin: 1.4rem 0;
}
.or::before,
.or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.consent-pair {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}
.consent-pair .dots {
  width: 40px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 8px);
}
.consent-pair .avatar {
  width: 48px;
  height: 48px;
}
.consent-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.8rem;
}
.ori-big {
  width: 120px;
  margin: 0 auto 1.2rem;
}

/* account settings */
.page-head.slim {
  padding: 130px 0 2.2rem;
}
.acct-head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.acct-head h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
  margin: 0 0 0.2rem;
}
.acct-actions {
  margin-left: auto;
  display: flex;
  gap: 0.6rem;
}
.acct {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 3rem;
  padding: 2.5rem 0 6rem;
}
.acct-nav {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  display: grid;
  gap: 0.15rem;
}
.acct-nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 7px;
  font-size: 0.95rem;
}
.acct-nav a:hover {
  background: var(--slate);
  color: var(--ink);
}
.acct-body {
  max-width: 42rem;
  display: grid;
  gap: 1.2rem;
}
.acct-section {
  border-top: 1px solid var(--line-soft);
  padding-top: 2.2rem;
  margin-top: 1.4rem;
  display: grid;
  gap: 1.2rem;
  scroll-margin-top: 1.5rem;
}
.acct-section h2 {
  font-size: 1.7rem;
}
.acct-section h3 {
  font-size: 1.05rem;
}
.inline-form {
  padding-top: 1.4rem;
  border-top: 1px dashed var(--line);
}
@media (max-width: 860px) {
  .acct {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .acct-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 0.3rem;
  }
  .acct-nav a {
    white-space: nowrap;
    border: 1px solid var(--line);
  }
  .acct-actions {
    margin-left: 0;
  }
}
.welcome {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.welcome img {
  width: 56px;
  flex: none;
}
.swatches,
.avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.swatch input,
.pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.swatch .chip {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.25);
  cursor: pointer;
  transition: transform 0.12s;
}
.swatch:hover .chip {
  transform: translateY(-2px);
}
.swatch input:checked + .chip {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.swatch input:focus-visible + .chip,
.pick input:focus-visible + img {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.pick {
  display: grid !important;
  justify-items: center;
  gap: 0.35rem !important;
  cursor: pointer;
  font-weight: 450 !important;
  font-size: 0.82rem !important;
  color: var(--ink-2) !important;
}
.pick img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  image-rendering: pixelated;
  outline: 2px solid transparent;
  outline-offset: 3px;
}
.pick input:checked + img {
  outline-color: var(--gold);
}
.rows {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line-soft);
}
.rows li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.rows li > div {
  flex: 1;
  min-width: 0;
}
.rows li form {
  flex: none;
}
.rows.people a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  flex: 1;
}
.rows.people a:hover strong {
  color: var(--gold);
}
.device-ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--raise);
  position: relative;
  flex: none;
}
.device-ico::after {
  content: "";
  position: absolute;
  inset: 10px 9px;
  border: 2px solid var(--ink-3);
  border-radius: 3px;
}
.device-ico.app::after {
  inset: 9px;
  border-color: var(--gold);
  transform: rotate(45deg) scale(0.8);
}
.facts {
  display: grid;
  gap: 0.9rem;
  margin: 0;
}
.facts > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
}
.facts dt {
  color: var(--ink-3);
  font-size: 0.92rem;
}
.facts dd {
  margin: 0;
}
form.inline {
  display: inline;
  margin-left: 0.5rem;
}
.danger-zone {
  margin-top: 1.6rem;
  padding: 1.3rem;
  border: 1px solid rgb(229 72 77 / 0.35);
  border-radius: 10px;
}
.danger-zone p {
  color: var(--ink-2);
  font-size: 0.95rem;
}
.empty {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0;
  color: var(--ink-2);
}
.empty img {
  width: 64px;
  flex: none;
}
.tabs {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.4rem;
}
.tabs a {
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid transparent;
}
.tabs a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* public profile */
.profile {
  padding-bottom: 5rem;
}
.profile-banner {
  height: clamp(180px, 22vw, 260px);
  background:
    linear-gradient(180deg, transparent 40%, var(--night) 100%),
    radial-gradient(70% 140% at 20% 0%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(50% 120% at 90% 10%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 24px),
    #15161b;
}
.profile-head {
  display: flex;
  align-items: flex-end;
  gap: 1.4rem;
  margin-top: -64px;
  flex-wrap: wrap;
}
.profile-id {
  flex: 1;
  min-width: 12rem;
  padding-bottom: 0.4rem;
}
.profile-id h1 {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  margin-bottom: 0.25rem;
}
.handle {
  color: var(--ink-2);
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.pronouns {
  color: var(--ink-3);
}
.profile-actions {
  padding-bottom: 0.6rem;
}
.following .when-hover {
  display: none;
}
.following:hover .when-idle {
  display: none;
}
.following:hover .when-hover {
  display: inline;
  color: #ff8a8d;
}
.profile-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3rem;
  margin-top: 2rem;
}
.bio {
  font-size: 1.12rem;
  white-space: pre-line;
  max-width: 48ch;
  margin-bottom: 1.2rem;
}
.profile-meta,
.profile-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  color: var(--ink-3);
  font-size: 0.95rem;
}
.profile-meta a {
  color: var(--ink-2);
  text-decoration: none;
}
.profile-meta a:hover strong {
  color: var(--accent);
}
.profile-meta strong {
  color: var(--ink);
}
.profile-links a {
  color: var(--accent);
}
.mc-cards {
  display: flex;
  gap: 1.2rem;
}
.mc-card {
  margin: 0;
  text-align: center;
  padding: 1.2rem 1.4rem 1rem;
  border-radius: 14px;
  background:
    radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--slate);
  border: 1px solid var(--line);
}
.mc-card img {
  width: 80px;
  height: 160px;
  margin: 0 auto 0.8rem;
  background: none;
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.5));
}
.mc-card small {
  display: block;
  color: var(--ink-3);
  font-size: 0.78rem;
}
@media (max-width: 760px) {
  .profile-body {
    grid-template-columns: 1fr;
  }
  .avatar.huge {
    width: 104px;
    height: 104px;
  }
}

/* ======================= developers (api.alloymc.dev) ======================= */

.brand-tag {
  font: 500 0.8rem/1 var(--sans);
  color: var(--ink-3);
  border-left: 1px solid var(--line);
  padding-left: 0.6rem;
  margin-left: 0.2rem;
}
.dev-hero {
  padding: 150px 0 3.5rem;
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, transparent 60%, var(--night)),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 32px),
    radial-gradient(60% 120% at 80% 0%, rgb(248 201 90 / 0.08), transparent 70%);
}
.dev-hero h1 {
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem);
  margin-bottom: 1rem;
}
.base-url {
  display: inline-flex;
  align-items: stretch;
  margin-top: 1.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.95rem;
  max-width: 100%;
}
.base-url span {
  background: var(--raise);
  color: var(--ink-3);
  padding: 0.65rem 0.9rem;
}
.base-url code {
  border: 0;
  border-radius: 0;
  background: var(--slate);
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
  color: var(--gold-hi);
  white-space: normal;
  overflow-wrap: anywhere;
}
.dev {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 3rem;
  padding: 2.5rem 0 6rem;
}
.dev-nav {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  display: grid;
  gap: 0.1rem;
}
.dev-nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-size: 0.93rem;
}
.dev-nav a:hover {
  background: var(--slate);
  color: var(--ink);
}
.dev-nav-head {
  font-size: 0.8rem;
  color: var(--ink-3);
  padding: 1rem 0.7rem 0.3rem;
}
.dev-body {
  min-width: 0;
  max-width: 54rem;
}
.dev-section {
  padding: 1rem 0 3rem;
  scroll-margin-top: 1.5rem;
}
.dev-section > h2 {
  font-size: 2rem;
  margin-bottom: 1.2rem;
}
.dev-section > p,
.dev-section li {
  color: var(--ink-2);
}
.dev-section > p + p,
.dev-section > pre + p,
.dev-section > p + pre {
  margin-top: 1rem;
}
.code {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  background: #0a0b0d;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow-x: auto;
  font: 500 0.86rem/1.6 ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;
  color: #d6dae2;
}
.code code {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  white-space: pre;
}
.c-cmd {
  color: var(--gold);
}
.code-label {
  margin: 1rem 0 -0.4rem;
  font-size: 0.82rem;
  color: var(--ink-3);
}
.steps {
  margin: 1rem 0;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.5rem;
}
.facts.wide > div {
  grid-template-columns: 6rem 1fr;
}
.facts.wide dd {
  color: var(--ink-2);
}
.facts.wide code {
  white-space: normal;
}
.tag {
  margin-top: 2.2rem;
  scroll-margin-top: 1.5rem;
}
.tag h3 {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
}
.tag > .quiet {
  margin-bottom: 0.9rem;
}
.op {
  border: 1px solid var(--line);
  border-radius: 9px;
  margin-top: 0.55rem;
  background: var(--slate);
  scroll-margin-top: 1.5rem;
}
.op summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem;
  flex-wrap: wrap;
}
.op summary::-webkit-details-marker {
  display: none;
}
.op[open] summary {
  border-bottom: 1px solid var(--line);
}
.verb {
  font: 700 0.72rem/1 ui-monospace, monospace;
  padding: 0.35rem 0.5rem;
  border-radius: 5px;
  min-width: 3.9rem;
  text-align: center;
  background: var(--raise);
  color: var(--ink-2);
}
.v-GET { color: #8fd1ff; background: rgb(91 141 239 / 0.14); }
.v-POST { color: #a8e08c; background: rgb(111 191 74 / 0.14); }
.v-PUT,
.v-PATCH { color: var(--gold-hi); background: rgb(248 201 90 / 0.13); }
.v-DELETE { color: #ff9a9d; background: rgb(229 72 77 / 0.14); }
.path {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--ink);
  font-size: 0.9rem;
}
.op-sum {
  color: var(--ink-3);
  font-size: 0.92rem;
  flex: 1;
  min-width: 10rem;
}
.lock {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  border: 1px solid var(--gold-edge);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}
.op-body {
  padding: 1rem 1.1rem 0.4rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.params {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0;
  font-size: 0.9rem;
}
.params th,
.params td {
  text-align: left;
  padding: 0.5rem 0.8rem 0.5rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.params th {
  color: var(--ink-3);
  font-weight: 500;
}
.req {
  font-size: 0.72rem;
  color: var(--gold);
}
@media (max-width: 900px) {
  .dev {
    grid-template-columns: 1fr;
  }
  .dev-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
  }
  .dev-nav-head {
    display: none;
  }
}

/* =====================================================================
   Interaction. Everything you can point at answers: it moves, lights up
   or presses in, and eases instead of snapping. Motion here always
   reports something (hover, press, open, arrive) and switches off for
   people who ask their system for less motion.
   ===================================================================== */

:root {
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.5, 0.64, 1);
  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 560ms;
  interpolate-size: allow-keywords;
}

/* Page to page: a short crossfade, the header stays put. */
@view-transition {
  navigation: auto;
}
.top {
  view-transition-name: top;
}
::view-transition-old(root) {
  animation: 160ms var(--ease) both vt-out;
}
::view-transition-new(root) {
  animation: 260ms var(--ease) both vt-in;
}
@keyframes vt-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

a,
button,
summary,
input,
textarea,
select,
label {
  -webkit-tap-highlight-color: transparent;
}
a,
button,
summary,
label.swatch,
label.pick,
label.check {
  cursor: pointer;
}

/* Text links inside writing: the underline thickens and drifts down. */
a {
  transition:
    color var(--t) var(--ease),
    text-decoration-color var(--t) var(--ease),
    text-underline-offset var(--t) var(--ease),
    text-decoration-thickness var(--t) var(--ease);
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
a:hover {
  text-decoration-color: currentColor;
  text-underline-offset: 0.26em;
  text-decoration-thickness: 2px;
}

/* Navigation links: an underline that grows from the left. */
.nav a,
.foot a,
.signin,
.acct-nav a,
.crumbs a,
.doc-nav a,
.hub-links a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition:
    color var(--t) var(--ease),
    background-size var(--t-slow) var(--ease);
}
.nav a {
  border-bottom: 0;
  padding: 0.3rem 0 0.25rem;
}
.nav a:hover,
.foot a:hover,
.signin:hover,
.acct-nav a:hover,
.crumbs a:hover,
.doc-nav a:hover,
.hub-links a:hover {
  background-size: 100% 1.5px;
  text-decoration: none;
}
.nav a[aria-current="page"],
.doc-nav a[aria-current="page"] {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 2px;
}

/* The logo cube tips over a little and the name warms up. */
.brand img {
  transition: transform var(--t-slow) var(--ease-spring);
}
.brand:hover img {
  transform: rotate(-12deg) scale(1.08);
}
.brand:active img {
  transform: rotate(-12deg) scale(0.94);
  transition-duration: var(--t-fast);
}
.brand span,
.brand small {
  transition: color var(--t) var(--ease);
}
.brand:hover small {
  color: var(--gold);
}

/* The gold block: lifts on its lip, a glint runs across, presses in when clicked. */
.block {
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--t) var(--ease-spring),
    box-shadow var(--t) var(--ease),
    filter var(--t) var(--ease);
}
.block::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.55), transparent);
  transform: translateX(0) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.block:hover {
  transform: translateY(-2px);
  filter: saturate(1.1) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.6),
    inset 0 -2px 0 rgb(0 0 0 / 0.08),
    0 calc(var(--lip) + 2px) 0 var(--gold-edge);
}
.block:hover::before {
  animation: glint 0.9s var(--ease) both;
}
@keyframes glint {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(420%) skewX(-18deg);
  }
}
.block:hover svg {
  animation: nudge 0.7s var(--ease-spring);
}
@keyframes nudge {
  40% {
    transform: translateY(3px);
  }
}
.block:active {
  transition-duration: 60ms;
  transform: translateY(calc(var(--lip) - 1px));
  filter: brightness(0.97);
}
.block:focus-visible {
  outline-offset: 5px;
}

/* Ghost buttons: brighter edge, raised panel, press in. */
.ghost,
.google {
  transition:
    transform var(--t) var(--ease-spring),
    border-color var(--t) var(--ease),
    background-color var(--t) var(--ease),
    color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.ghost:hover,
.google:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--steel) 70%, var(--ink));
  background-color: var(--raise);
  box-shadow: 0 8px 20px -12px rgb(0 0 0 / 0.8);
}
.ghost:active,
.google:active {
  transition-duration: 60ms;
  transform: translateY(1px) scale(0.98);
  box-shadow: none;
}
.ghost svg {
  transition: transform var(--t) var(--ease-spring);
}
.ghost:hover svg {
  transform: translateX(3px);
}

/* Fields: a lighter edge under the pointer, a warm ring when typing. */
input:not([type="radio"]):not([type="checkbox"]),
textarea,
select,
.field-prefix {
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    background-color var(--t) var(--ease);
}
input:not([type="radio"]):not([type="checkbox"]):hover,
textarea:hover,
.field-prefix:hover {
  border-color: #474b55;
}
input:focus,
textarea:focus {
  background-color: #1b1d23;
}
input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
  opacity: 0.8;
  transition: opacity var(--t) var(--ease);
}
input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.4;
}
.check input,
input[type="radio"],
input[type="checkbox"] {
  transition: transform var(--t) var(--ease-spring);
}
.check:hover input {
  transform: scale(1.12);
}

/* Colour and avatar pickers. */
.swatch .chip {
  transition:
    transform var(--t) var(--ease-spring),
    box-shadow var(--t) var(--ease),
    outline-color var(--t) var(--ease);
}
.swatch:hover .chip {
  transform: translateY(-3px) scale(1.06);
}
.swatch:active .chip {
  transform: scale(0.94);
}
.swatch input:checked + .chip {
  animation: pop 0.36s var(--ease-spring);
}
@keyframes pop {
  50% {
    transform: scale(1.14);
  }
}
.pick img {
  transition:
    transform var(--t) var(--ease-spring),
    outline-color var(--t) var(--ease);
}
.pick:hover img {
  transform: translateY(-3px);
  outline-color: var(--line);
}
.pick input:checked + img {
  outline-color: var(--gold);
}
.pick span {
  transition: color var(--t) var(--ease);
}
.pick:hover span {
  color: var(--ink);
}

/* Rows, lists and cards that are links: they lift toward you. */
.guide-list a,
.rows.people a,
.hub-card,
.doc-card,
.dl {
  transition:
    transform var(--t) var(--ease),
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    color var(--t) var(--ease);
}
.guide-list a:hover {
  transform: translateX(6px);
}
.guide-list a span,
.guide-list a p {
  transition: color var(--t) var(--ease);
}
.guide-list a:hover p {
  color: var(--ink-2);
}
.rows li {
  transition: background-color var(--t) var(--ease);
}
.rows li:hover {
  background-color: rgb(255 255 255 / 0.018);
}
.rows.people a:hover {
  transform: translateX(4px);
}
.rows.people a strong {
  transition: color var(--t) var(--ease);
}
.avatar,
.rows img {
  transition: transform var(--t) var(--ease-spring);
}
.rows.people a:hover img {
  transform: rotate(-4deg) scale(1.06);
}

/* Disclosures open and close smoothly instead of jumping. */
details::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size var(--t-slow) var(--ease),
    opacity var(--t) var(--ease),
    content-visibility var(--t-slow) allow-discrete;
}
details[open]::details-content {
  block-size: auto;
  opacity: 1;
}
summary {
  transition:
    color var(--t) var(--ease),
    background-color var(--t) var(--ease),
    padding var(--t) var(--ease);
}
.faq summary:hover {
  color: var(--gold-hi);
  padding-left: 0.4rem;
}
.faq summary::after {
  transition:
    transform var(--t) var(--ease-spring),
    margin var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.faq summary:hover::after {
  border-color: var(--gold);
}
.op summary:hover {
  background-color: var(--raise);
}
.op summary:hover .path {
  color: var(--gold-hi);
}
.op summary .path {
  transition: color var(--t) var(--ease);
}

/* Code you can copy. */
.code-copy {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  padding: 0.3rem 0.6rem;
  font: 600 0.75rem/1 var(--sans);
  color: var(--ink-2);
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 5px;
  opacity: 0;
  transition:
    opacity var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease-spring);
}
pre:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}
.code-copy:hover {
  color: var(--ink);
  border-color: var(--steel);
}
.code-copy:active {
  transform: scale(0.94);
}
.code-copy.done {
  color: var(--grass);
  border-color: var(--grass);
  opacity: 1;
}
.sum code {
  cursor: copy;
  transition:
    border-color var(--t) var(--ease),
    background-color var(--t) var(--ease);
}
.sum code:hover {
  border-color: var(--steel);
}
.sum code.done {
  border-color: var(--grass);
}

/* Screens and media breathe a little under the pointer. */
.shot img,
.shot video {
  transition:
    transform var(--t-slow) var(--ease),
    box-shadow var(--t-slow) var(--ease);
}
.shot:hover img,
.shot:hover video {
  transform: translateY(-4px);
}

/* A form that's sending shows it on the button that sent it. */
button.busy {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
button.busy::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.1em;
  height: 1.1em;
  margin: -0.55em 0 0 -0.55em;
  border-radius: 50%;
  border: 2px solid var(--gold-ink);
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
  opacity: 1;
  mix-blend-mode: normal;
  background: none;
}
button.ghost.busy::after {
  border-color: var(--ink);
  border-right-color: transparent;
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* Alerts slide in so they get noticed. */
.alert {
  animation: drop 0.42s var(--ease-spring) both;
}
@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* The first screen of a page assembles itself: heading, then what follows, a beat apart.
   Pure CSS, so it never waits for scripts and never blinks. */
@media (prefers-reduced-motion: no-preference) {
  :is(.enter, .page-head > .wrap, .forge .copy, .auth-box, .profile-head) > * {
    animation: rise 0.8s var(--ease) both;
  }
  :is(.enter, .page-head > .wrap, .forge .copy, .auth-box, .profile-head) > :nth-child(2) {
    animation-delay: 80ms;
  }
  :is(.enter, .page-head > .wrap, .forge .copy, .auth-box, .profile-head) > :nth-child(3) {
    animation-delay: 160ms;
  }
  :is(.enter, .page-head > .wrap, .forge .copy, .auth-box, .profile-head) > :nth-child(4) {
    animation-delay: 240ms;
  }
  :is(.enter, .page-head > .wrap, .forge .copy, .auth-box, .profile-head) > :nth-child(5) {
    animation-delay: 320ms;
  }
  :is(.enter, .page-head > .wrap, .forge .copy, .auth-box, .profile-head) > :nth-child(n + 6) {
    animation-delay: 400ms;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(3px);
  }
}

/* Content arrives as you scroll to it (site.js adds .rv, then .in). */
.js .rv {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: calc(var(--d, 0) * 60ms);
}
.js .rv.in {
  opacity: 1;
  transform: none;
}

/* Hit areas: every control is at least 24px tall (WCAG 2.2, 2.5.8). */
.ghost.small,
.code-copy {
  min-height: 24px;
}

/* Less motion, on request: keep colour changes, drop movement. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  @view-transition {
    navigation: none;
  }
  .js .rv {
    opacity: 1;
    transform: none;
  }
  .block:hover,
  .ghost:hover,
  .guide-list a:hover,
  .rows.people a:hover {
    transform: none;
  }
  button.busy::after {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* =====================================================================
   The hub (alloymc.dev)
   ===================================================================== */

.kicker {
  font: 600 0.95rem/1.3 var(--sans);
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1rem;
  margin-top: 2rem;
}

.hub-hero {
  position: relative;
  padding: calc(76px + clamp(3rem, 2rem + 4vw, 6rem)) 0 clamp(4rem, 3rem + 4vw, 7rem);
  overflow: hidden;
}
.hub-hero::before {
  /* The forge's warmth from below, kept low so text stays crisp. */
  content: "";
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 80%;
  background: radial-gradient(60% 60% at 70% 100%, rgb(255 122 30 / 0.16), transparent 70%);
  pointer-events: none;
}
.hub-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.hub-hero h1 {
  max-width: 14ch;
}
.hub-hero .lede {
  margin-top: 1.4rem;
}
@media (max-width: 900px) {
  .hub-hero-grid {
    grid-template-columns: 1fr;
  }
}

/* The claim box: the address you'd get, typed in place. */
.claim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  margin-top: 2.2rem;
  max-width: 34rem;
}
.claim-field {
  display: flex;
  align-items: center;
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding-left: 1rem;
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    background-color var(--t) var(--ease);
}
.claim-field:hover {
  border-color: #474b55;
}
.claim-field:focus-within {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 4px rgb(248 201 90 / 0.16);
  background-color: #1b1d23;
}
.claim-prefix {
  color: var(--ink-3);
  font-size: 1.05rem;
  white-space: nowrap;
}
.claim-field input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.05rem !important;
  font-weight: 600;
  padding: 0.95rem 0.8rem 0.95rem 0.05rem !important;
  min-width: 0;
}
.claim .block {
  font-size: 1.15rem;
}
.claim-status {
  grid-column: 1 / -1;
  font-size: 0.88rem;
  color: var(--ink-3);
  min-height: 1.4em;
  transition: color var(--t) var(--ease);
}
.claim-status[data-state="free"] {
  color: var(--grass);
}
.claim-status[data-state="handle_taken"],
.claim-status[data-state="handle_reserved"],
.claim-status[data-state="handle_invalid"] {
  color: #ff9c9f;
}
.hero-alt {
  margin-top: 1.2rem;
  font-size: 0.92rem;
  color: var(--ink-3);
}
@media (max-width: 520px) {
  .claim {
    grid-template-columns: 1fr;
  }
  .claim .block {
    justify-content: center;
  }
  .claim-prefix {
    font-size: 0.92rem;
  }
}

/* The card: what your profile will look like, live. */
.claim-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 1.6rem 1.5rem;
  box-shadow:
    0 30px 60px -30px rgb(0 0 0 / 0.9),
    0 0 0 1px rgb(255 255 255 / 0.02) inset;
  transform: rotate(1.2deg);
  transition:
    transform var(--t-slow) var(--ease-spring),
    box-shadow var(--t-slow) var(--ease);
}
.claim-card:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 40px 70px -30px rgb(0 0 0 / 0.95);
}
.claim-banner {
  height: 88px;
  margin: 0 -1.6rem;
  border-radius: 13px 13px 0 0;
  background:
    linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.35)),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.05) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.05) 0 8px, transparent 8px 16px),
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 70%, var(--panel)), color-mix(in srgb, var(--accent) 35%, var(--panel)));
  transition: background var(--t-slow) var(--ease);
}
.claim-avatar {
  width: 96px;
  height: 96px;
  margin-top: -48px;
  border-radius: 12px;
  border: 4px solid var(--panel);
  image-rendering: pixelated;
  background: var(--slate);
  transition: transform var(--t-slow) var(--ease-spring);
}
.claim-avatar.swap {
  animation: flip 0.5s var(--ease-spring);
}
@keyframes flip {
  45% {
    transform: rotateY(90deg) scale(0.9);
  }
}
.claim-reroll {
  position: absolute;
  top: 100px;
  left: calc(1.6rem + 104px);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--raise);
  color: var(--ink-2);
  transition:
    transform var(--t) var(--ease-spring),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.claim-reroll svg {
  width: 16px;
  height: 16px;
}
.claim-reroll:hover {
  color: var(--gold);
  border-color: var(--gold-deep);
  transform: rotate(-14deg) scale(1.08);
}
.claim-reroll:active {
  transform: rotate(90deg) scale(0.92);
}
.claim-name {
  margin-top: 0.9rem;
  font: 800 1.45rem/1.15 var(--display);
  font-stretch: 110%;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.claim-url {
  color: var(--ink-2);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.claim-url span {
  color: color-mix(in srgb, var(--accent) 80%, white);
  transition: color var(--t) var(--ease);
}
.claim-meta {
  margin-top: 0.7rem;
  color: var(--ink-3);
  font-size: 0.85rem;
}
.claim-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.2rem;
}
.claim-color {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 0;
  background: var(--accent);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.25);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition:
    transform var(--t) var(--ease-spring),
    outline-color var(--t) var(--ease);
}
.claim-color:hover {
  transform: translateY(-3px) scale(1.08);
}
.claim-color:active {
  transform: scale(0.92);
}
.claim-color[aria-checked="true"] {
  outline-color: var(--ink);
}
.claim-hint {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--ink-3);
}
.enter-late {
  animation: card-in 1s var(--ease-spring) 0.25s both;
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: rotate(6deg) translateY(30px) scale(0.96);
  }
}
@media (max-width: 900px) {
  .claim-card {
    max-width: 26rem;
    transform: none;
  }
}

/* =====================================================================
   The island: the hub's hero is a small world (js/world.js), with a still of it underneath.
   ===================================================================== */

.world-hero {
  min-height: clamp(660px, 94vh, 940px);
  display: grid;
  align-items: center;
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  isolation: isolate;
}
.world-hero::before {
  display: none;
}
.world {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 82%, transparent);
}
.world-still,
.world-still img,
.world-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.world-still img {
  object-fit: cover;
  object-position: 70% 50%;
}
.world-still {
  pointer-events: none; /* the island under it takes the clicks */
  transition: opacity 1.2s var(--ease);
}
.world-canvas {
  display: block;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  touch-action: pan-y;
}
.world.live .world-canvas {
  opacity: 1;
}
/* Keeps the words readable where they cross the sky. */
.world::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(13 14 17 / 0.92) 0, rgb(13 14 17 / 0.6) 28%, transparent 52%);
  pointer-events: none;
}
.world.live .world-still {
  opacity: 0;
}
.world-hero .hub-hero-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  pointer-events: none;
}
.world-hero .enter {
  pointer-events: auto;
}
.world-hero h1 {
  font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.6rem);
  font-stretch: 118%;
  text-shadow: 0 2px 30px rgb(13 14 17 / 0.9);
}
.world-hero .lede {
  text-shadow: 0 1px 18px rgb(13 14 17 / 0.95);
}
.world-hint {
  position: absolute;
  right: var(--gutter);
  bottom: 1.4rem;
  margin: 0;
  font: 500 0.8rem/1 var(--pixel);
  color: var(--ink-3);
  opacity: 0;
  transition: opacity 1s var(--ease) 2.5s;
  pointer-events: none;
}
.world-hero:has(.world.live) .world-hint {
  opacity: 0.85;
}
@media (hover: none) {
  .world-hint {
    display: none;
  }
}

/* What AlloyMC makes, each in its metal. */
.metals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.metals a {
  --m: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem 0.4rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--m) 38%, transparent);
  background: color-mix(in srgb, var(--m) 11%, rgb(13 14 17 / 0.7));
  color: color-mix(in srgb, var(--m) 55%, white);
  font: 650 0.82rem/1 var(--sans);
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition:
    transform var(--t) var(--ease-spring),
    background-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.metals a:hover {
  color: white;
  transform: translateY(-2px);
  background-color: color-mix(in srgb, var(--m) 22%, rgb(13 14 17 / 0.7));
  box-shadow: 0 8px 24px -10px var(--m);
}
.metals img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  transition: transform var(--t-slow) var(--ease-spring);
}
.metals a:hover img {
  transform: rotate(-12deg) scale(1.25);
}
.m-gold {
  --m: var(--gold);
}
.metals .m-emerald {
  --m: var(--emerald);
}
.metals .m-diamond {
  --m: var(--diamond);
}

/* Your banner: colour and sigil, mirrored on the island. */
.banner-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.4rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(23 25 30 / 0.72);
  backdrop-filter: blur(8px);
}
.banner-sigil {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  image-rendering: pixelated;
  box-shadow: 0 0 0 2px var(--accent);
  transition: box-shadow var(--t) var(--ease);
}
.banner-sigil.swap {
  animation: flip 0.5s var(--ease-spring);
}
.banner-pick .claim-colors {
  margin: 0;
  gap: 0.35rem;
}
.banner-pick .claim-color {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.banner-pick .claim-reroll {
  position: static;
}
@media (max-width: 900px) {
  .world-hero {
    min-height: 0;
    padding-top: 0;
    align-items: start;
  }
  .world {
    position: relative;
    inset: auto;
    height: min(92vw, 520px);
    margin-top: 76px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 80%, transparent);
    mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 80%, transparent);
  }
  .world-still img {
    object-position: 50% 50%;
  }
  .world::after {
    display: none;
  }
  .world-hero .hub-hero-grid {
    grid-template-columns: 1fr;
    margin-top: -2.5rem;
  }
}

/* Rows of the hub: each its own composition. */
.hub-row {
  padding: clamp(4rem, 3rem + 4vw, 7rem) 0;
  border-top: 1px solid var(--line-soft);
}
.hub-alloy {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hub-alloy .shot {
  margin: 0;
}
.hub-copy h2 {
  max-width: 18ch;
}
.hub-copy .lede {
  margin-top: 1.1rem;
}
.facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.facts-grid dt {
  font-size: 0.8rem;
  color: var(--ink-3);
}
.facts-grid dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
}
@media (max-width: 900px) {
  .hub-alloy,
  .hub-dev {
    grid-template-columns: 1fr;
  }
}

.hub-dev {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hub-links {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0;
  display: grid;
  gap: 0.75rem;
}
.hub-links a {
  color: var(--ink);
  font-weight: 600;
  padding-bottom: 0.15rem;
}
.hub-links a::after {
  content: " \2192";
  color: var(--gold);
  display: inline-block;
  transition: transform var(--t) var(--ease-spring);
}
.hub-links a:hover::after {
  transform: translateX(4px);
}

/* A terminal that shows a real response. */
.term {
  background: #0a0b0d;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.95);
  transition:
    border-color var(--t) var(--ease),
    transform var(--t-slow) var(--ease);
}
.term:hover {
  border-color: #3a3e48;
  transform: translateY(-3px);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--slate);
}
.term-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.term-bar p {
  margin-left: 0.6rem;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.term-bar p::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--grass);
  vertical-align: 1px;
}
@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}
.term pre {
  margin: 0;
  padding: 1.2rem 1.3rem 1.4rem;
  font: 0.9rem/1.65 ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;
  color: var(--ink-2);
  overflow-x: auto;
  border: 0;
  background: none;
}
.term pre code {
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
  font: inherit;
}
.t-prompt {
  color: var(--gold);
}
.t-out {
  display: block;
  margin-top: 0.4rem;
  color: #c9d1dc;
  transition: opacity var(--t) var(--ease);
}
.t-out.fresh {
  animation: fresh 0.9s var(--ease);
}
@keyframes fresh {
  from {
    color: var(--gold-hi);
  }
}

/* Roadmap: a track with stations. */
.road {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  counter-reset: road;
}
.road li {
  position: relative;
  padding: 2.2rem 1.2rem 0 0;
  border-top: 2px solid var(--line);
}
.road li::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--night);
  border: 2px solid var(--line);
  transition: transform var(--t) var(--ease-spring);
}
.road li:hover::before {
  transform: rotate(45deg) scale(1.15);
}
.road li.done {
  border-top-color: var(--gold-deep);
}
.road li.done::before {
  background: var(--gold);
  border-color: var(--gold);
}
.road li.now {
  border-image: linear-gradient(90deg, var(--molten), var(--line)) 1;
}
.road li.now::before {
  background: var(--molten);
  border-color: var(--molten);
  box-shadow: 0 0 0 0 rgb(255 154 42 / 0.6);
  animation: beacon 2s ease-out infinite;
}
@keyframes beacon {
  to {
    box-shadow: 0 0 0 10px rgb(255 154 42 / 0);
  }
}
.road-state {
  display: block;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}
.road .done .road-state {
  color: var(--gold);
}
.road .now .road-state {
  color: var(--molten);
}
.road h3 {
  font-size: 1.05rem;
}
.road p {
  margin-top: 0.4rem;
  color: var(--ink-3);
  font-size: 0.9rem;
}
@media (max-width: 1000px) {
  .road {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .road li {
    border-top: 0;
    border-left: 2px solid var(--line);
    padding: 0 0 1.8rem 1.6rem;
  }
  .road li.done {
    border-left-color: var(--gold-deep);
  }
  .road li.now {
    border-image: linear-gradient(180deg, var(--molten), var(--line)) 1;
  }
  .road li::before {
    top: 0;
    left: -8px;
  }
}

.hub-close {
  padding: clamp(5rem, 4rem + 5vw, 8rem) 0;
  border-top: 1px solid var(--line-soft);
  background: radial-gradient(50% 80% at 50% 100%, rgb(248 201 90 / 0.08), transparent 70%);
}
.hub-close .wrap {
  display: grid;
  justify-items: start;
}
.hub-close h2 {
  max-width: 20ch;
}
.hub-close .lede {
  margin-top: 1rem;
}

/* Sign-up page: the sigil picked on the hub comes along. */
.signup-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 9px;
  background: var(--slate);
}
.signup-card img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  image-rendering: pixelated;
}
.signup-card strong {
  display: block;
  font-size: 0.95rem;
}

/* =====================================================================
   Documents: legal pages and developer docs, from Markdown.
   ===================================================================== */

.doc-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 200px;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  padding: calc(76px + 2.5rem) 0 6rem;
  align-items: start;
}
.doc-nav,
.doc-toc {
  position: sticky;
  top: 1.5rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  font-size: 0.9rem;
}
.doc-nav ul,
.doc-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.15rem;
}
.doc-nav a {
  display: block;
  color: var(--ink-2);
  padding: 0.38rem 0.7rem;
  border-radius: 6px;
  background-image: none;
  border-left: 2px solid transparent;
  transition:
    color var(--t) var(--ease),
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    padding var(--t) var(--ease);
}
.doc-nav a:hover {
  color: var(--ink);
  background-color: var(--slate);
  padding-left: 0.95rem;
}
.doc-nav a[aria-current="page"] {
  color: var(--ink);
  background-color: var(--panel);
  border-left-color: var(--gold);
  background-image: none;
}
.doc-nav-sec {
  margin: 1.3rem 0 0.35rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.doc-toc p {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--ink-3);
  margin-bottom: 0.6rem;
}
.doc-toc a {
  display: block;
  color: var(--ink-3);
  text-decoration: none;
  padding: 0.25rem 0 0.25rem 0.8rem;
  border-left: 1px solid var(--line);
  transition:
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.doc-toc a:hover,
.doc-toc a.on {
  color: var(--ink);
  border-left-color: var(--gold);
}
.doc-head h1 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
}
.doc-head .lede {
  margin-top: 1rem;
}
.doc-meta {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}
.doc-body {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
  max-width: 72ch;
}
.doc-body > * + * {
  margin-top: 1.05rem;
}
.doc-body h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  margin-top: 3rem;
  scroll-margin-top: 1.5rem;
}
.doc-body h3 {
  margin-top: 2rem;
  scroll-margin-top: 1.5rem;
}
.doc-body p,
.doc-body li {
  color: var(--ink-2);
}
.doc-body strong {
  color: var(--ink);
}
.doc-body ul,
.doc-body ol {
  padding-left: 1.3rem;
}
.doc-body li + li {
  margin-top: 0.45rem;
}
.doc-body li::marker {
  color: var(--gold-deep);
}
.doc-body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--gold);
  background: var(--slate);
  border-radius: 0 8px 8px 0;
}
.doc-body blockquote p {
  color: var(--ink);
}
.doc-body pre {
  background: #0a0b0d;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  font: 0.88rem/1.6 ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;
  color: #c9d1dc;
}
.doc-body pre code {
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
  font: inherit;
}
.doc-body table.data {
  font-size: 0.92rem;
}
.doc-body .table-scroll {
  margin-top: 1.4rem;
}
.doc-body table.data th,
.doc-body table.data td {
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  text-align: left;
}
.doc-body table.data thead th {
  color: var(--ink);
  font-weight: 650;
  border-bottom-color: var(--line);
}
.doc-body hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 2.5rem 0;
}
@media (max-width: 1180px) {
  .doc-layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .doc-toc {
    display: none;
  }
}
@media (max-width: 820px) {
  .doc-layout {
    grid-template-columns: 1fr;
    padding-top: calc(76px + 1.5rem);
  }
  .doc-nav {
    position: static;
    max-height: none;
    order: 2;
    border-top: 1px solid var(--line-soft);
    padding-top: 1.5rem;
  }
}

/* legal.alloymc.dev index */
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.legal-list a {
  display: grid;
  gap: 0.45rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  background: var(--slate);
  transition:
    transform var(--t) var(--ease),
    border-color var(--t) var(--ease),
    background-color var(--t) var(--ease);
}
.legal-list a:hover {
  transform: translateY(-3px);
  border-color: #474b55;
  background: var(--panel);
}
.legal-list h2 {
  font-size: 1.3rem;
}
.legal-list p {
  color: var(--ink-2);
  font-size: 0.95rem;
}
.legal-list span {
  color: var(--ink-3);
  font-size: 0.82rem;
  align-self: end;
}
.legal-company {
  margin: 3rem 0 6rem;
  max-width: 70ch;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .legal-list {
    grid-template-columns: 1fr;
  }
}
.page-head + .wrap > .legal-list {
  margin-top: 2.5rem;
}

/* =====================================================================
   api.alloymc.dev: the developer portal
   ===================================================================== */

.dev-hero {
  position: relative;
  padding: calc(76px + clamp(3rem, 2rem + 3vw, 5rem)) 0 clamp(3.5rem, 3rem + 3vw, 6rem);
  overflow: hidden;
}
.dev-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgb(255 255 255 / 0.025) 1px, transparent 1px) 0 0 / 32px 32px;
  mask-image: radial-gradient(70% 80% at 30% 30%, black, transparent);
  pointer-events: none;
}
.dev-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.dev-hero .lede {
  margin-top: 1.2rem;
}
.dev-hero .lede code {
  white-space: nowrap;
}
.dev-hero .base-url {
  margin-top: 1.6rem;
}
@media (max-width: 900px) {
  .dev-hero-grid {
    grid-template-columns: 1fr;
  }
}

.doc-cards {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.9rem;
}
.doc-card {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  height: 100%;
  padding: 1.3rem 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--slate);
  color: var(--ink);
  text-decoration: none;
}
.doc-card:hover {
  transform: translateY(-3px);
  border-color: #474b55;
  background-color: var(--panel);
}
.doc-card h3 {
  transition: color var(--t) var(--ease);
}
.doc-card:hover h3 {
  color: var(--gold-hi);
}
.doc-card p {
  color: var(--ink-3);
  font-size: 0.9rem;
}
.doc-card-sec {
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.dev-ideas {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.dev-ideas .lede {
  margin-top: 1rem;
}
.dev-uses {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: use;
  border-top: 1px solid var(--line);
}
.dev-uses li {
  counter-increment: use;
  position: relative;
  padding: 1.2rem 0 1.2rem 3.2rem;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t) var(--ease);
}
.dev-uses li::before {
  content: counter(use, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.25rem;
  font: 800 1rem/1 var(--display);
  font-stretch: 112%;
  color: var(--gold-deep);
}
.dev-uses li:hover {
  background-color: rgb(255 255 255 / 0.015);
}
.dev-uses p {
  margin-top: 0.3rem;
  color: var(--ink-3);
  font-size: 0.95rem;
}
@media (max-width: 900px) {
  .dev-ideas {
    grid-template-columns: 1fr;
  }
}

.doc-next {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.doc-next a {
  display: inline-grid;
  gap: 0.2rem;
  color: var(--ink);
  font: 780 1.25rem/1.2 var(--display);
  font-stretch: 108%;
  text-decoration: none;
}
.doc-next small {
  font: 500 0.82rem/1 var(--sans);
  color: var(--ink-3);
}
.doc-next svg {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.05em;
  color: var(--gold);
  transition: transform var(--t) var(--ease-spring);
}
.doc-next a:hover svg {
  transform: translateX(5px);
}
.ref {
  margin-top: 2rem;
}
.ref-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ref-jump a {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink-2);
  text-decoration: none;
  transition:
    color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    background-color var(--t) var(--ease);
}
.ref-jump a:hover {
  color: var(--ink);
  border-color: var(--steel);
  background: var(--slate);
}
.ref .tag {
  margin-top: 2.5rem;
  scroll-margin-top: 1.5rem;
}
.ref .tag h2 {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}
.ref .tag > .quiet {
  margin-bottom: 1rem;
}

/* Printing shows everything at once, whatever has scrolled into view. */
@media print {
  .js .rv {
    opacity: 1 !important;
    transform: none !important;
  }
  .top,
  .foot,
  .doc-nav,
  .doc-toc {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* =====================================================================
   admin.alloymc.dev
   ===================================================================== */

.admin .top,
body.admin .top {
  top: 0;
}
body.admin .top {
  position: relative;
  border-bottom: 1px solid var(--line-soft);
  background: #0a0b0d;
}
body.admin .nav .count {
  display: inline-grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  margin-left: 0.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--redstone);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.admin-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--ink-2);
}
.admin-me img {
  border-radius: 6px;
  image-rendering: pixelated;
}
.admin-me small {
  color: var(--gold);
}
.wrap.admin {
  padding: 2.5rem 0 5rem;
}
.admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}
.admin-head h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem);
}
.admin-person img {
  border-radius: 10px;
  image-rendering: pixelated;
}
.admin-person > div {
  flex: 1;
  min-width: 0;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.kpi {
  display: grid;
  gap: 0.25rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--slate);
  color: var(--ink);
  text-decoration: none;
  transition:
    transform var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
a.kpi:hover {
  transform: translateY(-2px);
  border-color: #474b55;
}
.kpi span {
  font-size: 0.82rem;
  color: var(--ink-3);
}
.kpi strong {
  font: 800 2.2rem/1 var(--display);
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
}
.kpi small {
  font-size: 0.8rem;
  color: var(--ink-3);
}
.kpi.hot {
  border-color: rgb(229 72 77 / 0.6);
}
.kpi.hot strong {
  color: #ff8a8d;
}
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.4rem;
  margin-bottom: 1.4rem;
}
@media (max-width: 960px) {
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
  .admin-grid {
    grid-template-columns: 1fr;
  }
}
.panel-box {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--slate);
  min-width: 0;
}
.panel-box h2 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.panel-box h3 {
  font-size: 0.95rem;
  margin: 1.4rem 0 0.6rem;
}
.panel-box .stack + .stack {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.bars {
  display: block;
  width: 100%;
  height: 140px;
  margin-bottom: 0.9rem;
}
.bars rect {
  fill: var(--gold-deep);
  transition: fill var(--t) var(--ease);
}
.bars rect:hover {
  fill: var(--gold-hi);
}
.log {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.1rem;
  font-size: 0.9rem;
}
.log li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.log time {
  color: var(--ink-3);
  font-size: 0.82rem;
}
.log q {
  color: var(--ink-2);
}
.admin-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex: 1;
  min-width: min(100%, 420px);
}
.admin-search input {
  flex: 1;
  min-width: 12rem;
}
select {
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
}
select:hover {
  border-color: #474b55;
}
.admin-table .person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
}
.admin-table .person img {
  border-radius: 6px;
  image-rendering: pixelated;
}
.admin-table .person small {
  display: block;
  color: var(--ink-3);
  font-weight: 400;
}
.admin-table .person:hover strong {
  color: var(--gold-hi);
}
.admin-table tbody tr {
  transition: background-color var(--t) var(--ease);
}
.admin-table tbody tr:hover {
  background: rgb(255 255 255 / 0.02);
}
.badge.bad {
  color: #ff9c9f;
  border-color: rgb(229 72 77 / 0.5);
}
.pager {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.tabs {
  display: flex;
  gap: 0.4rem;
}
.tabs a {
  padding: 0.45rem 0.9rem;
  border-radius: 7px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  text-decoration: none;
  transition:
    color var(--t) var(--ease),
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.tabs a:hover {
  color: var(--ink);
  border-color: #474b55;
}
.tabs a[aria-current] {
  color: var(--gold-ink);
  background: var(--gold);
  border-color: var(--gold);
}
.reports {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.8rem;
}
.report {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--night);
}
.report-head small {
  color: var(--ink-3);
}
.report-details {
  margin-top: 0.5rem;
  color: var(--ink-2);
  white-space: pre-wrap;
}
.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.report-actions input {
  flex: 1;
  min-width: 12rem;
  padding: 0.45rem 0.7rem !important;
  font-size: 0.88rem !important;
}

/* Profile extras */
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.share svg {
  width: 1em;
  height: 1em;
}
.share.done {
  border-color: var(--grass);
  color: var(--grass);
}
.quiet-action {
  color: var(--ink-3) !important;
}
.reroll svg {
  width: 1em;
  height: 1em;
}
.check.radio {
  font-weight: 450 !important;
}

/* Links to the page you're on still answer the pointer. */
.nav a[aria-current]:hover,
.doc-nav a[aria-current]:hover,
.doc-toc a.on:hover {
  color: var(--gold-hi);
}
.claim-color:focus-visible {
  outline-color: var(--gold);
  outline-offset: 3px;
}

/* The trailer: plays muted on loop; sound and pause are one click away. */
.trailer {
  margin: 0;
}
.trailer .frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.95);
  background: #000;
}
.trailer video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.trailer-controls {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  display: flex;
  gap: 0.5rem;
}
.trailer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
  background: rgb(10 11 13 / 0.72);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font: 600 0.85rem/1 var(--sans);
  transition:
    transform var(--t) var(--ease-spring),
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.trailer-btn:hover {
  transform: translateY(-2px);
  background: rgb(10 11 13 / 0.9);
  border-color: var(--gold);
}
.trailer-btn:active {
  transform: scale(0.95);
}
.trailer-btn[data-sound][aria-pressed="false"] {
  border-color: rgb(248 201 90 / 0.6);
  animation: nudge-sound 2.6s var(--ease) 2s 2;
}
@keyframes nudge-sound {
  0%, 100% { box-shadow: 0 0 0 0 rgb(248 201 90 / 0); }
  30% { box-shadow: 0 0 0 6px rgb(248 201 90 / 0.25); }
}
.ico-pause,
.ico-sound {
  width: 12px;
  height: 12px;
  display: inline-block;
  background: currentColor;
}
.ico-pause {
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}
[data-pause][aria-pressed="true"] .ico-pause {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ico-sound {
  clip-path: polygon(0 30%, 30% 30%, 70% 0, 70% 100%, 30% 70%, 0 70%);
}
[data-sound][aria-pressed="true"] .ico-sound {
  clip-path: polygon(0 30%, 25% 30%, 55% 0, 55% 100%, 25% 70%, 0 70%, 0 30%, 70% 35%, 80% 35%, 80% 65%, 70% 65%, 70% 35%, 88% 20%, 98% 20%, 98% 80%, 88% 80%);
}
.trailer figcaption {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: var(--ink-3);
}
.trailer summary {
  color: var(--ink-2);
}
.trailer summary:hover {
  color: var(--ink);
}
.trailer details p {
  margin-top: 0.6rem;
  max-width: 72ch;
}

/* =====================================================================
   Seasons: holidays and the seasons of the year, on every site but legal and admin.
   The server picks the season (internal/site/season.go); js/season.js adds what moves.
   Everything here is decoration: html.decor-off (the switch in the header) takes it away.
   ===================================================================== */

.season-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem 0.35rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  color: color-mix(in srgb, var(--gold) 60%, white);
  font: 600 0.8rem/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--t) var(--ease-spring),
    background-color var(--t) var(--ease),
    opacity var(--t) var(--ease);
}
.season-chip img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  transition: transform var(--t-slow) var(--ease-spring), filter var(--t) var(--ease);
}
.season-chip:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--gold) 18%, transparent);
}
.season-chip:hover img {
  transform: rotate(-12deg) scale(1.2);
}
.season-chip[aria-pressed="false"] {
  opacity: 0.6;
}
.season-chip[aria-pressed="false"] img {
  filter: grayscale(1);
}
html:not(.js) .season-chip {
  display: none; /* the switch needs the script */
}
.season-chip.in-menu {
  width: 100%;
  justify-content: flex-start;
  margin-top: 0.4rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
}
.season-chip.in-menu small {
  margin-left: auto;
  color: var(--ink-3);
  font-weight: 500;
}
@media (max-width: 1180px) {
  .top-end .season-chip span {
    display: none;
  }
  .top-end .season-chip {
    padding: 0.4rem;
  }
}
@media (max-width: 960px) {
  .top-end .season-chip {
    display: none;
  }
}

/* The layer season.js draws on: above the page, under the header, never in the way. */
.season-sky {
  position: fixed;
  inset: 0;
  z-index: 15;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}
.mob-sky {
  position: fixed;
  inset: 0;
  z-index: 14;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html.decor-off .season-sky,
html.decor-off .mob-sky,
html.decor-off .egg {
  display: none;
}

/* ----- Colours: each holiday takes over the gold ----- */
html:not(.decor-off) body[data-season="halloween"] {
  --gold: #ff9a3c;
  --gold-hi: #ffc27e;
  --gold-deep: #e8640f;
  --gold-edge: #8f3a07;
  --gold-ink: #2a0e00;
  --night: #0f0c13;
  --slate: #19151f;
  --panel: #1f1a26;
  background: radial-gradient(120% 60% at 50% 0%, #1d1226, var(--night) 60%) fixed;
}
html:not(.decor-off) body:is([data-season="christmas"], [data-season="swiss"]) {
  --gold: #f2545b;
  --gold-hi: #ff8f94;
  --gold-deep: #c8232c;
  --gold-edge: #7c0f15;
  --gold-ink: #fff6f6;
}
html:not(.decor-off) body[data-season="valentine"] {
  --gold: #ff7eb6;
  --gold-hi: #ffb6d6;
  --gold-deep: #e0478f;
  --gold-edge: #8a1f52;
  --gold-ink: #3a0820;
}
html:not(.decor-off) body[data-season="easter"] {
  --gold: #f6d365;
  --gold-hi: #fff0a8;
  --gold-deep: #d9a933;
  --gold-edge: #8f6a12;
}
html:not(.decor-off) body[data-season="mcbirthday"] {
  --gold: #8fd16a;
  --gold-hi: #c2f0a2;
  --gold-deep: #5fa83d;
  --gold-edge: #2f6418;
  --gold-ink: #0f2406;
}

/* ----- Halloween: cobwebs in the corners of cards and panels ----- */
html:not(.decor-off) body[data-season="halloween"] :is(.panel, .term, .callout, .shot, .trailer, .doc-card, .hub-card, .faq) {
  position: relative;
}
html:not(.decor-off) body[data-season="halloween"] :is(.panel, .term, .callout, .shot, .trailer, .doc-card, .hub-card, .faq)::after,
html:not(.decor-off) body[data-season="halloween"] .foot .wrap::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 2;
  width: 48px;
  height: 48px;
  background: url("../img/season/cobweb.png") top right / 100% no-repeat;
  image-rendering: pixelated;
  opacity: 0.55;
  pointer-events: none;
}
html:not(.decor-off) body[data-season="halloween"] .foot .wrap {
  position: relative;
}
html:not(.decor-off) body[data-season="halloween"] .foot .wrap::after {
  top: -3.4rem;
  width: 96px;
  height: 96px;
  opacity: 0.35;
}

/* ----- Christmas: lights under the header, snow on buttons and panels ----- */
html:not(.decor-off) body[data-season="christmas"] .top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 10px);
  height: 16px;
  pointer-events: none;
  background:
    radial-gradient(circle at 8px 9px, #ff4d55 3px, transparent 4px) 0 0 / 64px 16px repeat-x,
    radial-gradient(circle at 24px 9px, #57d86b 3px, transparent 4px) 0 0 / 64px 16px repeat-x,
    radial-gradient(circle at 40px 9px, #ffd24a 3px, transparent 4px) 0 0 / 64px 16px repeat-x,
    radial-gradient(circle at 56px 9px, #59b8ff 3px, transparent 4px) 0 0 / 64px 16px repeat-x,
    linear-gradient(transparent 4px, rgb(255 255 255 / 0.18) 4px, rgb(255 255 255 / 0.18) 5px, transparent 5px);
  filter: drop-shadow(0 0 4px rgb(255 220 150 / 0.6));
  animation: lights 1.6s steps(1) infinite;
}
@keyframes lights {
  50% {
    background-position: 16px 0, 16px 0, 16px 0, 16px 0, 0 0;
  }
}
html:not(.decor-off) body:is([data-season="christmas"], [data-season="winter"]) :is(.block, .panel, .term, .shot, .trailer, .callout, .doc-card) {
  position: relative;
}
html:not(.decor-off) body[data-season="christmas"] :is(.block, .panel, .term, .shot, .trailer, .callout)::after,
html:not(.decor-off) body[data-season="winter"] :is(.panel, .term, .shot, .trailer)::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: -6px;
  height: 10px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' shape-rendering='crispEdges' fill='%23f4f8ff'%3E%3Cpath d='M0 6h4V4h6v2h4V3h8v3h4V5h6v5H0z'/%3E%3C/svg%3E") 0 0 / 32px 10px repeat-x;
  filter: drop-shadow(0 1px 0 rgb(170 190 220 / 0.6));
}

/* ----- Easter: eggs hidden around the site (season.js places them) ----- */
.egg {
  position: absolute;
  z-index: 5;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: egg-wobble 3s ease-in-out infinite;
}
.egg img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.5));
}
.egg.found {
  animation: egg-pop 0.45s var(--ease-spring) forwards;
}
@keyframes egg-wobble {
  0%, 80%, 100% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(-14deg);
  }
  92% {
    transform: rotate(12deg);
  }
}
@keyframes egg-pop {
  to {
    transform: translateY(-24px) scale(1.4);
    opacity: 0;
  }
}
.season-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 50;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(23 25 30 / 0.97);
  color: var(--ink);
  font-size: 0.92rem;
  box-shadow: 0 20px 40px -16px rgb(0 0 0 / 0.8);
  animation: drop-in 0.3s var(--ease) both;
}
.season-toast img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}

/* =====================================================================
   The hub below the island. It speaks the game's interface: a chest of modpacks with the
   item tooltip, the Tab player list, the advancements screen and its toast. No glows, no
   badges: plain headings, left-aligned, and one object per section.
   ===================================================================== */

.packs,
.alloy-sec,
.pair,
.adv-sec {
  border-top: 1px solid var(--line-soft);
}
.packs h2,
.alloy-sec h2,
.pair h2,
.adv-sec h2 {
  max-width: 20ch;
}
.packs p,
.pair p {
  color: var(--ink-2);
  max-width: 46ch;
}

/* ----- A chest of modpacks ----- */
.packs {
  --px: 3px;
  padding: clamp(4rem, 3rem + 4vw, 7rem) 0;
}
.packs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.packs-copy p {
  margin-top: 1rem;
}
.chest {
  position: relative;
  width: calc(176 * var(--px));
  height: calc(96 * var(--px));
  background: url("../img/gui/chest.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 calc(4 * var(--px)) 0 rgb(0 0 0 / 0.35));
}
.chest .chest-title {
  position: absolute;
  top: calc(5 * var(--px));
  left: calc(8 * var(--px));
  margin: 0;
  font: 500 calc(7 * var(--px))/1 var(--pixel);
  color: #404040;
}
.slots {
  position: absolute;
  top: calc(17 * var(--px));
  left: calc(7 * var(--px));
  display: grid;
  grid-template-columns: repeat(9, calc(18 * var(--px)));
  grid-auto-rows: calc(18 * var(--px));
  list-style: none;
  margin: 0;
  padding: 0;
}
.slots li {
  position: relative;
}
.slot {
  position: absolute;
  inset: var(--px);
  display: block;
  outline: none;
}
.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}
/* The game's slot highlight: a white wash over the item. */
.slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.5);
  opacity: 0;
}
.slot:hover::after,
.slot:focus-visible::after {
  opacity: 1;
}
.slot:focus-visible {
  outline: var(--px) solid #fff;
  outline-offset: 0;
}
/* The item tooltip: the game's dark box and purple frame, title in white, details in grey,
   and where it comes from in blue italics, as mods show it. */
.tip {
  position: absolute;
  z-index: 10;
  top: calc(-14 * var(--px));
  left: calc(14 * var(--px));
  display: none;
  width: max-content;
  max-width: 19rem;
  padding: 7px 10px 8px;
  border: 6px solid transparent;
  border-image: url("../img/gui/background.png") 9 fill / 18px / 6px stretch;
  font: 500 15px/1.45 var(--pixel);
  color: #aaa;
  text-align: left;
  image-rendering: pixelated;
  pointer-events: none;
}
.tip::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 20px solid transparent;
  border-image: url("../img/gui/frame.png") 10 / 20px stretch;
}
.slot:hover .tip,
.slot:focus-visible .tip {
  display: grid;
}
.slots li:nth-child(9n) .tip,
.slots li:nth-child(9n - 1) .tip,
.slots li:nth-child(9n - 2) .tip {
  left: auto;
  right: calc(14 * var(--px));
}
.tip b {
  font-weight: 500;
  color: #fff;
}
.tip i {
  color: #5555ff;
}
.tip-loaders {
  color: #ffaa00;
}
@media (max-width: 1100px) {
  .packs-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .packs {
    --px: 2px;
  }
  .chest {
    margin-inline: auto;
  }
  .tip {
    font-size: 13px;
    max-width: 14rem;
  }
}
@media (max-width: 380px) {
  .packs {
    --px: 1.75px;
  }
}

/* ----- Alloy: the trailer wide, then what it is and what's new ----- */
.alloy-sec {
  padding: clamp(4rem, 3rem + 4vw, 7rem) 0 clamp(3.5rem, 2.5rem + 3vw, 6rem);
}
.alloy-sec .trailer {
  margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.alloy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.alloy-sec .lede {
  margin-top: 1rem;
}
.alloy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 1.8rem;
}
.notes {
  padding-top: 0.4rem;
}
.notes h3 {
  margin: 0;
  font: 700 1.1rem/1.3 var(--display);
}
.notes .quiet {
  margin: 0.2rem 0 0;
}
.notes ul {
  margin: 1rem 0;
  padding-left: 1.1rem;
  color: var(--ink-2);
}
.notes li + li {
  margin-top: 0.4rem;
}
@media (max-width: 900px) {
  .alloy-grid {
    grid-template-columns: 1fr;
  }
}

/* ----- Accounts and the API, side by side ----- */
.pair {
  padding: clamp(4rem, 3rem + 4vw, 7rem) 0;
}
.pair-half {
  min-width: 0;
}
.pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
}
.pair-half > * + * {
  margin-top: 1.2rem;
}
.pair .term {
  margin-top: 1.6rem;
}
@media (max-width: 900px) {
  .pair-grid {
    grid-template-columns: 1fr;
  }
}
.block.emerald {
  --gold-hi: var(--emerald-hi);
  --gold: var(--emerald);
  --gold-deep: #2c9a55;
  --gold-edge: #1d5e35;
  --gold-ink: #04160c;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 var(--lip) 0 var(--gold-edge);
}
/* The Tab player list: translucent rows, a head and a name each. */
.tablist {
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  background: rgb(0 0 0 / 0.5);
}
.tablist .tablist-head {
  margin: 2px 0 6px !important;
  text-align: center;
  font: 500 15px/1.2 var(--pixel);
  color: #fff;
  max-width: none !important;
}
.tablist ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 12.5rem));
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tablist a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding-right: 6px;
  background: rgb(255 255 255 / 0.13);
  color: #fff;
  font: 500 15px/1 var(--pixel);
  text-decoration: none;
}
.tablist a:hover,
.tablist a:focus-visible {
  background: rgb(255 255 255 / 0.28);
}
.tablist img {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}
.tablist span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .tablist ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tablist {
    width: 100%;
  }
}

/* The live terminal, typing its next request. */
[data-cmd].typing::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: caret 0.8s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* ----- Roadmap: the advancements screen ----- */
.adv-sec {
  padding: clamp(4rem, 3rem + 4vw, 7rem) 0 clamp(5rem, 4rem + 4vw, 8rem);
}
.adv-sec .lede {
  margin-top: 0.8rem;
}
.adv {
  margin-top: 2.2rem;
}
.adv-window {
  position: relative;
  padding: 1.1rem 1.4rem 1.6rem;
  border: 3px solid #0c0c0c;
  background: url("../img/adv/stone.png") 0 0 / 48px 48px;
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 2px #555, inset 0 0 60px rgb(0 0 0 / 0.55);
}
.adv-title {
  margin: 0 0 1.4rem;
  font: 500 1rem/1 var(--pixel);
  color: #e0e0e0;
  text-shadow: 2px 2px 0 #3f3f3f;
}
.adv-tree {
  list-style: none;
  margin: 0;
  padding: 0 0.4rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
}
.adv-node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  outline: none;
}
/* The line to the next advancement: white on a black edge, as the game draws it. */
.adv-node:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 25px;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  height: 3px;
  background: #fff;
  box-shadow: 0 0 0 2px #000;
}
.adv-node.s-now::after,
.adv-node.s-next::after,
.adv-node.s-later::after {
  background: #9a9a9a;
}
.adv-frame {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: url("../img/adv/task_frame_unobtained.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
}
.s-done .f-task,
.s-now .f-task {
  background-image: url("../img/adv/task_frame_obtained.png");
}
.f-goal {
  background-image: url("../img/adv/goal_frame_unobtained.png");
}
.s-done .f-goal,
.s-now .f-goal {
  background-image: url("../img/adv/goal_frame_obtained.png");
}
.f-challenge {
  background-image: url("../img/adv/challenge_frame_unobtained.png");
}
.adv-frame img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
.s-next .adv-frame img,
.s-later .adv-frame img {
  filter: brightness(0.55) saturate(0.6);
}
.adv-label {
  max-width: 9.5rem;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
  font: 500 0.92rem/1.2 var(--pixel);
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
}
.adv-label small {
  font: 500 0.8rem/1 var(--pixel);
  text-shadow: 2px 2px 0 #3f3f3f;
  color: #c6c6c6;
}
.s-done .adv-label small {
  color: #55ff55;
}
.s-now .adv-label small {
  color: #ffff55;
}
.adv-desc {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* The game's tooltip, at twice the game's size: the icon sits on the left end of its title
   box (gold when done, blue otherwise), which is as tall as the icon's frame; the description
   hangs below in a dark box. */
.adv-tip {
  position: absolute;
  z-index: 3;
  top: 0;
  left: calc(50% - 26px);
  width: 19rem;
  display: none;
  pointer-events: none;
  image-rendering: pixelated;
}
.adv-node:hover,
.adv-node:focus-visible {
  z-index: 5;
}
.adv-node:hover .adv-frame,
.adv-node:focus-visible .adv-frame {
  z-index: 4;
}
.adv-node:hover .adv-tip,
.adv-node:focus-visible .adv-tip {
  display: grid;
}
.adv-node:nth-last-child(-n + 2) .adv-tip {
  left: auto;
  right: calc(50% - 26px);
}
.adv-tip b {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 14px 2px 62px;
  border-image: url("../img/adv/box_unobtained.png") 10 fill / 20px stretch;
  font: 500 1rem/1.2 var(--pixel);
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
}
.adv-node:nth-last-child(-n + 2) .adv-tip b {
  justify-content: flex-end;
  padding: 0 62px 2px 14px;
}
.s-done .adv-tip b,
.s-now .adv-tip b {
  border-image-source: url("../img/adv/box_obtained.png");
}
.adv-tip > span {
  position: relative;
  z-index: -1;
  margin: -6px 6px 0;
  padding: 14px 14px 12px;
  border-image: url("../img/adv/title_box.png") 10 fill / 20px stretch;
  font: 400 0.84rem/1.4 var(--sans);
  color: #55ff55;
}
.s-next .adv-tip > span,
.s-later .adv-tip > span {
  color: #d0d0d0;
}
.adv-node:focus-visible .adv-frame {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 820px) {
  .adv-tree {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .adv-node {
    grid-template-columns: 52px 1fr;
    justify-items: start;
    align-items: start;
    gap: 1rem;
  }
  .adv-node:not(:last-child)::after {
    top: 54px;
    left: 24.5px;
    right: auto;
    width: 3px;
    height: calc(100% - 56px + 1.4rem);
  }
  .adv-label {
    max-width: none;
    justify-items: start;
    text-align: left;
  }
  .adv-desc {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    margin-top: 0.3rem;
    font: 400 0.88rem/1.45 var(--sans);
    text-shadow: none;
    color: #d8d8d8;
  }
  .adv-tip {
    display: none !important;
  }
}

/* The game's toast, once, when the roadmap comes into view. */
.adv-toast {
  position: fixed;
  top: 88px;
  right: var(--gutter);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 320px;
  height: 64px;
  padding: 0 16px;
  background: url("../img/adv/toast.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
  animation: toast-in 0.5s var(--ease) both, toast-out 0.5s var(--ease) 4.6s forwards;
}
.adv-toast img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
.adv-toast p {
  margin: 0;
  font: 500 0.88rem/1.35 var(--pixel);
  color: #fff;
}
.adv-toast p b {
  display: block;
  font-weight: 500;
  color: #ffff55;
}
@keyframes toast-in {
  from {
    transform: translateX(120%);
  }
}
@keyframes toast-out {
  to {
    transform: translateX(120%);
  }
}

/* =====================================================================
   The launcher page: Alloy itself, running in a window on the page (web/demo).
   ===================================================================== */

.try {
  padding: clamp(3.5rem, 2.5rem + 3vw, 6rem) 0 clamp(4rem, 3rem + 4vw, 7rem);
}
.try h2 {
  max-width: 22ch;
}
.try .lede {
  margin-top: 0.9rem;
}
.try-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
  margin-top: 2.2rem;
}
@media (max-width: 1100px) {
  .try-grid {
    grid-template-columns: 1fr;
  }
}
/* A window the size of the real one (1280 x 800), scaled to fit. */
.appwin {
  --scale: 1;
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #0b0c0f;
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.9);
}
.appwin-stage {
  position: absolute;
  inset: 0;
}
.appwin-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.appwin iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  border: 0;
  transform: scale(var(--scale));
  transform-origin: 0 0;
}
.appwin-start {
  position: absolute;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto; /* centred without a transform, so hover and press move it the way they move every button */
}
.appwin-small {
  display: none;
}
@media (max-width: 700px) {
  .appwin {
    aspect-ratio: auto;
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .appwin-stage {
    position: relative;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
  }
  .appwin-start {
    display: none;
  }
  .appwin-small {
    display: block;
    margin-top: 0.8rem;
    color: var(--ink-3);
    font-size: 0.92rem;
  }
}
.try-notes h3 {
  margin: 0;
  font: 700 1.05rem/1.3 var(--display);
}
.try-notes ul {
  margin: 0.8rem 0 1rem;
  padding-left: 1.1rem;
  color: var(--ink-2);
}
.try-notes li + li {
  margin-top: 0.6rem;
}

/* Terms and what they mean, two to a row. */
.terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem clamp(2rem, 1rem + 4vw, 5rem);
  margin: 2rem 0 0;
  max-width: 62rem;
}
.terms dt {
  font-weight: 700;
}
.terms dd {
  margin: 0.3rem 0 0;
  color: var(--ink-2);
}
@media (max-width: 700px) {
  .terms {
    grid-template-columns: 1fr;
  }
}
.appwin:not(.on) .appwin-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(8 9 11 / 0.55);
}
.appwin-start {
  z-index: 1;
}

.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem clamp(2rem, 1rem + 4vw, 5rem);
  margin-top: 2rem;
  max-width: 68rem;
}
.cols-2 h3 {
  margin: 0 0 0.5rem;
  font: 700 1.1rem/1.3 var(--display);
}
.cols-2 p {
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .cols-2 {
    grid-template-columns: 1fr;
  }
}
.plain-cols {
  columns: 3 16rem;
  column-gap: clamp(2rem, 1rem + 3vw, 4rem);
  margin: 1.8rem 0 0;
  padding-left: 1.1rem;
  color: var(--ink-2);
}
.plain-cols li {
  break-inside: avoid;
  margin-bottom: 0.5rem;
}
/* The closing call: left-aligned like the rest, no glow. */
.closing {
  text-align: left;
}
.closing::before {
  display: none;
}
.closing img.ori,
.closing .lede {
  margin-left: 0;
  margin-right: 0;
}
.closing .get,
.closing .get-meta {
  justify-content: flex-start;
}

/* =====================================================================
   Profiles: who someone is on the left, their plot of the AlloyMC world on the right
   (js/world.js, scene "plot"): their banner, their nameplate, their player.
   ===================================================================== */

.pro {
  position: relative;
  padding: calc(76px + clamp(1.5rem, 1rem + 2vw, 3rem)) 0 clamp(2.5rem, 2rem + 2vw, 4rem);
}
.pro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.pro-avatar {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px var(--accent);
}
.pro h1 {
  margin-top: 1.2rem;
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem);
  overflow-wrap: anywhere;
}
.pro-handle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.5rem 0 0;
  color: var(--ink-2);
  font-size: 1.05rem;
}
.pro-handle span:first-child {
  color: color-mix(in srgb, var(--accent) 75%, white);
  font-weight: 600;
}
.pro-badge {
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  background: var(--raise);
  color: var(--ink-2);
  font-size: 0.85rem;
}
.pro-bio {
  margin: 1.2rem 0 0;
  max-width: 46ch;
  font-size: 1.1rem;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.pro-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.pro-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 1.2rem 0 0;
  color: var(--ink-3);
}
.pro-counts a {
  color: var(--ink-2);
  text-decoration: none;
}
.pro-counts a:hover {
  color: var(--ink);
}
.pro-counts b {
  color: var(--ink);
}
.pro-private {
  margin-top: 1.2rem;
  color: var(--ink-2);
}
.pro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1rem;
  margin-top: 1.8rem;
}
.pro-actions form {
  margin: 0;
}
.pro-report {
  color: var(--ink-3);
  font-size: 0.9rem;
}
.pro-hint {
  margin-top: 1.4rem;
  max-width: 44ch;
  color: var(--ink-3);
  font-size: 0.9rem;
}
.pro-plot {
  position: relative;
  height: clamp(400px, 56vh, 600px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.pro-plot .world-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.pro-plot.live .world-canvas {
  opacity: 1;
}
.pro-still {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: 70%;
  image-rendering: pixelated;
  transition: opacity 0.8s var(--ease);
}
.pro-plot.live .pro-still {
  opacity: 0;
}
@media (max-width: 900px) {
  .pro-grid {
    grid-template-columns: 1fr;
  }
  .pro-plot {
    order: -1;
    height: min(86vw, 420px);
  }
}

.pro-more {
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0 clamp(4rem, 3rem + 3vw, 6rem);
  border-top: 1px solid var(--line-soft);
}
.pro-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 2.5rem clamp(2rem, 1rem + 3vw, 4rem);
}
.pro-h2 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
}
.pro-h2 a {
  color: var(--ink);
  text-decoration: none;
}
.pro-all {
  margin-top: 0.8rem;
  font-size: 0.92rem;
}
.tablist ul.one {
  grid-template-columns: minmax(0, 25rem);
}
.tablist .row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding-right: 8px;
  background: rgb(255 255 255 / 0.13);
  color: #fff;
  font: 500 15px/1 var(--pixel);
}
.tablist .row img {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}
.tablist .row small {
  margin-left: auto;
  color: #aaa;
  font: 500 13px/1 var(--pixel);
}
.pro .tablist,
.pro-more .tablist {
  width: 100%;
}

.pro-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.pro-card p {
  color: var(--ink-2);
  max-width: 40ch;
}
.pro-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}
@media (max-width: 900px) {
  .pro-card {
    grid-template-columns: 1fr;
  }
}

/* The plot picker in the profile editor. */
.plot-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}
.plot-pick legend {
  margin-bottom: 0.6rem;
}
.plot-preview {
  height: 320px;
  border-radius: 12px;
  -webkit-mask-image: none;
  mask-image: none;
  background: #0d0e11;
  border: 1px solid var(--line);
}
.plot-label {
  margin: 0 0 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
}
.plot-label + .seg {
  margin-bottom: 1.1rem;
}
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.seg label {
  position: relative;
  cursor: pointer;
}
.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg span {
  display: block;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 0.9rem;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.seg label:hover span {
  color: var(--ink);
  border-color: #474b55;
}
.seg input:checked + span {
  color: var(--gold-ink);
  background: var(--gold);
  border-color: var(--gold);
}
.seg input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .plot-pick {
    grid-template-columns: 1fr;
  }
}