/* ==========================================================================
   h3xbit — style.css
   Colours come straight from the logo: black, #212121, white and ore red.
   ========================================================================== */

/* Pixel font, served from this site (no Google Fonts request holding up the first paint).
   Silkscreen by Jason Kottke, SIL Open Font License 1.1: github.com/googlefonts/silkscreen
   The latin-ext file only downloads if a page shows a character from it. */
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/silkscreen-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/silkscreen-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0a0a0b;
  --bg-raise: #111113;
  --bg-sunk: #070708;
  --line: #212121;          /* logo grey */
  --line-2: #2a2a2f;
  --text: #ededed;
  --muted: #9a9aa2;
  --dim: #5c5c64;
  --red: #ac3232;           /* logo ore red */
  --red-hi: #e25a5a;        /* readable red for text on dark */
  --red-deep: #3a1212;

  --page: 1040px;           /* the page never gets wider than this; the rest is side space */
  --px: 3px;                /* "pixel" border thickness */
  --font-px: "Silkscreen", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

/* faint checkerboard, same idea as the logo's checker, fading out downwards */
body::before {
  content: "";
  will-change: transform;   /* own layer: scrolling doesn't repaint the background */
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(#101013 25%, transparent 0 50%, #101013 0 75%, transparent 0) 0 0 / 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 85%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 85%);
}

img, svg { display: block; }
a { -webkit-user-drag: none; }   /* links can't be dragged around (main.js covers Firefox) */
.card, .chip, .foot-links a, .node-body, .btn { user-select: none; -webkit-user-select: none; }
img {
  -webkit-user-drag: none;   /* images can't be dragged off the page */
  user-select: none;
  -webkit-user-select: none;
}
a { color: inherit; }

:focus-visible {
  outline: 2px dashed var(--red-hi);
  outline-offset: 6px;
}

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

.px-icon { fill: currentColor; shape-rendering: crispEdges; flex: none; }

/* notched "pixel" border: four offset shadows leave the corners empty */
.pixel-box {
  --bd: var(--line-2);
  background: var(--bg-raise);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bd),
    0 var(--px) 0 0 var(--bd),
    calc(var(--px) * -1) 0 0 0 var(--bd),
    var(--px) 0 0 0 var(--bd);
}

/* ---------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 16px;
}

section { margin-top: 52px; }

/* Side rails: room kept free beside the page on wide screens, e.g. for ads later. Whatever is
   put inside .rail-left / .rail-right (index.html) shows up there and stays in view while
   scrolling. Empty, they take no space. From 1420px wide there's room for a 160px column on
   each side; on smaller screens they're hidden, so they never squeeze the page. */
.rail { display: none; }
@media (min-width: 1420px) {
  .rail:not(:empty) {
    display: block;
    position: fixed;
    top: 32px;
    width: 160px;
    max-height: calc(100vh - 64px);
    overflow: hidden;
  }
  .rail-left  { right: calc(50% + var(--page) / 2 + 4px); }   /* 20px from the page's content */
  .rail-right { left: calc(50% + var(--page) / 2 + 4px); }
}

.sec {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font: 400 16px/1 var(--font-px);
  text-transform: lowercase;
  letter-spacing: .02em;
}
.sec .px-icon { color: var(--red-hi); }
.sec::after {
  content: "";
  flex: 1;
  height: var(--px);
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px);
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 0 0;
}
.hero-info { display: flex; flex-direction: column; align-items: center; }

/* soft ore-red glow behind the logo */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80px;
  left: 50%;
  width: min(720px, 100vw);
  height: 440px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(172, 50, 50, .22), rgba(172, 50, 50, .06) 55%, transparent);
  pointer-events: none;
}

.logo {
  position: relative;
  padding: 8px 8px 28px;
  border: 0;
  background: none;
  --cur-pick: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="-1 -1 14 14" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M3 0h6v1H3zM2 1h1v1H2zM9 1h1v1H9zM1 2h1v1H1zM10 2h1v1H10zM0 3h1v1H0zM4 3h6v1H4zM0 4h1v1H0zM3 4h1v1H3zM5 4h1v1H5zM0 5h1v1H0zM3 5h2v1H3zM6 5h1v1H6zM0 6h1v1H0zM3 6h1v1H3zM5 6h1v1H5zM7 6h1v1H7zM0 7h1v1H0zM3 7h1v1H3zM6 7h1v1H6zM8 7h1v1H8zM0 8h1v1H0zM3 8h1v1H3zM7 8h1v1H7zM9 8h1v1H9zM1 9h1v1H1zM3 9h1v1H3zM8 9h1v1H8zM10 9h1v1H10zM2 10h1v1H2zM9 10h1v1H9zM11 10h1v1H11zM10 11h1v1H10zM12 11h1v1H12zM11 12h1v1H11z"/%3E%3Cpath fill="%238b5a2b" d="M3 3h1v1H3zM4 4h1v1H4zM5 5h1v1H5zM6 6h1v1H6zM7 7h1v1H7zM8 8h1v1H8zM9 9h1v1H9z"/%3E%3Cpath fill="%235c3a1a" d="M10 10h1v1H10zM11 11h1v1H11z"/%3E%3Cpath fill="%23e6e6e6" d="M3 1h6v1H3zM2 2h2v1H2zM8 2h2v1H8zM1 3h1v1H1zM1 4h1v1H1zM1 5h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 9h1v1H2z"/%3E%3Cpath fill="%239c9ca4" d="M4 2h4v1H4zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 6h1v1H2zM2 7h1v1H2zM2 8h1v1H2z"/%3E%3C/svg%3E');
  cursor: var(--cur-pick) 6 6, pointer;   /* small pickaxe: if JS is off, and main.js's backup */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
/* On touch screens the pickaxe is drawn just above the finger (main.js places it). With a mouse
   it's a real system cursor made from the same art. Its head tip is where it hits, in both frames. */
.pick {
  will-change: transform;   /* own layer: moving it never repaints the page */
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
}
.pick svg { position: absolute; shape-rendering: crispEdges; }
.pick-up    { left: -13px; top: -13px; }
.pick-swing { left: -6px; top: -26px; display: none; }
.pick.is-swing .pick-up    { display: none; }
.pick.is-swing .pick-swing { display: block; }
/* mirrored (main.js does this when it floats up-right of the finger), turning on the tip */
.pick.is-flip .pick-up    { transform: scaleX(-1); transform-origin: 13px 13px; }
.pick.is-flip .pick-swing { transform: scaleX(-1); transform-origin: 6px 26px; }
.logo:focus-visible { outline-offset: 0; }

/* Holds the logo picture and the ore score beside it. The logo stays still; it only shakes
   when it's mined (.is-hit below). */
.logo-float { display: block; position: relative; }
.logo img {
  width: 160px;   /* 16px per logo pixel */
  height: 224px;
  filter: drop-shadow(0 0 28px rgba(172, 50, 50, .35));
}

/* pixel shadow under the floating logo */
.logo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 96px;
  height: 8px;
  margin-left: -48px;
  background: #000;
  opacity: .7;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 2px, 100% 2px, 100% 6px, calc(100% - 8px) 6px, calc(100% - 8px) 100%, 8px 100%, 8px 6px, 0 6px, 0 2px, 8px 2px);
  animation: shadow 4s steps(4, jump-none) infinite alternate;
}

@keyframes shadow { from { transform: scaleX(1); opacity: .7; } to { transform: scaleX(.75); opacity: .45; } }

.logo.is-hit img { animation: hit .24s steps(1) 1; }
@keyframes hit {
  0%   { transform: translate(-4px, 0); }
  25%  { transform: translate(4px, -4px); }
  50%  { transform: translate(-4px, 4px); }
  75%  { transform: translate(4px, 0); }
  100% { transform: translate(0, 0); }
}

/* Everyone's ore added together (all visitors' hits / 10), like a score beside the logo's lower
   right edge. Shows once the world has ore and updates live (main.js, api/mine.php). It floats
   along with the logo, never moves the page, and clicks go through it to the logo. */
.mined {
  position: absolute;
  left: 97%;
  top: 72%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font: 12px/1 var(--font-px);
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
}
.mined[hidden] { display: none; }
.mined b { font: 400 22px/1 var(--font-px); color: var(--red-hi); text-shadow: 2px 2px 0 var(--red-deep); }
.mined.is-up b { animation: mined-up .3s steps(2) 1; }   /* a quick flash when it goes up */
@keyframes mined-up { 50% { color: #fff; } }

/* bits that fly off when you mine the logo (created by main.js) */
.bit {
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
}
.pop {
  position: absolute;
  left: 50%;
  top: 0;
  font: 16px/1 var(--font-px);
  color: var(--red-hi);
  white-space: nowrap;
  text-shadow: 2px 2px 0 var(--red-deep);
  pointer-events: none;
  animation: pop 1.2s steps(12) forwards;
}
@keyframes pop {
  from { transform: translate(-50%, 0); opacity: 1; }
  to   { transform: translate(-50%, -48px); opacity: 0; }
}

.wordmark { margin: 16px 0 0; line-height: 0; }
.wordmark img { width: 240px; height: 64px; }   /* 8px per letter pixel */

.status {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.status .prompt { color: var(--red-hi); }
.cursor {
  display: inline-block;
  width: .6em;
  height: 1.1em;
  margin-left: 4px;
  vertical-align: -.2em;
  background: var(--red-hi);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.bio {
  max-width: 46em;
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--muted);
  text-wrap: balance;
}
.bio strong { color: var(--text); font-weight: 600; }

/* call-to-action buttons under the bio */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 18px 0 0;
}
.hero-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 14px;
}
.hero-cta .down { transform: rotate(90deg); }
.btn.btn-ghost {
  color: var(--text);
  background: var(--bg-raise);
  box-shadow:
    inset 0 -3px 0 #0b0b0d,
    inset 0 3px 0 #1d1d21,
    0 -3px 0 0 var(--line-2), 0 3px 0 0 var(--line-2), -3px 0 0 0 var(--line-2), 3px 0 0 0 var(--line-2);
}
.btn.btn-ghost:hover { color: #fff; background: #19191c; }


/* ---------------------------------------------------------------- link cards */
.links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.links .featured { grid-column: 1 / -1; }

.card {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 16px 18px;
  text-decoration: none;
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.card .ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--text);
  transition: color .12s;
}
.card .txt { flex: 1; min-width: 0; }
.card .t {
  display: block;
  font: 16px/1.3 var(--font-px);
}
.card .s {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}
.card .go {
  color: var(--dim);
  transition: transform .12s steps(2), color .12s;
}

.card:hover,
.card:focus-visible {
  --bd: var(--brand, var(--red));
  transform: translate(-3px, -3px);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bd),
    0 var(--px) 0 0 var(--bd),
    calc(var(--px) * -1) 0 0 0 var(--bd),
    var(--px) 0 0 0 var(--bd),
    6px 6px 0 0 color-mix(in srgb, var(--brand, var(--red)) 30%, transparent);
}
.card:focus-visible { outline: none; }
.card:hover .ic,
.card:focus-visible .ic { color: var(--brand, var(--red-hi)); }
.card:hover .go,
.card:focus-visible .go { color: var(--brand, var(--red-hi)); transform: translateX(4px); }
.card:active { transform: translate(0, 0); }

.featured .card { padding: 18px 22px; }
.featured .card .t { font-size: 24px; }

/* small social buttons under the cards */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 20px 0 0;
  padding: 0 3px;
  list-style: none;
}
.chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font: 14px/1 var(--font-px);
  text-decoration: none;
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.chip .px-icon { color: var(--muted); transition: color .12s; }
.chip:hover,
.chip:focus-visible {
  --bd: var(--brand, var(--red));
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bd),
    0 var(--px) 0 0 var(--bd),
    calc(var(--px) * -1) 0 0 0 var(--bd),
    var(--px) 0 0 0 var(--bd),
    5px 5px 0 0 color-mix(in srgb, var(--brand, var(--red)) 30%, transparent);
}
.chip:hover .px-icon,
.chip:focus-visible .px-icon { color: var(--brand, var(--red-hi)); }
.chip:active { transform: translate(0, 0); }

/* chunky red Minecraft-ish button */
.btn {
  display: inline-block;
  padding: 10px 16px;
  font: 14px/1 var(--font-px);
  color: #fff;
  text-decoration: none;
  background: var(--red);
  box-shadow:
    inset 0 -3px 0 #7a2020,
    inset 0 3px 0 #c84646,
    0 -3px 0 0 #1a0808, 0 3px 0 0 #1a0808, -3px 0 0 0 #1a0808, 3px 0 0 0 #1a0808;
  white-space: nowrap;
}
.btn:hover { background: #bd3a3a; }
.card .btn { pointer-events: none; }   /* inside a card the whole card is the link */

/* ---------------------------------------------------------------- video */
.video {
  position: relative;
  display: flex;
  overflow: hidden;
  background:
    conic-gradient(#0e0e10 25%, transparent 0 50%, #0e0e10 0 75%, transparent 0) 0 0 / 24px 24px,
    var(--bg-sunk);
}
.video.has-video { aspect-ratio: 16 / 9; }
.video-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1;
  padding: 28px 16px 30px;
  text-align: center;
}
.video-empty .px-icon { color: #26262b; }
.video-empty p { margin: 0; color: var(--muted); font-size: 14px; }
.video-empty strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font: 400 16px/1.3 var(--font-px);
}

.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.video-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
  transition: opacity .15s;
}
.video-play .px-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--red);
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .6));
  transition: transform .12s steps(2);
}
.video-play:hover img { opacity: 1; }
.video-play:hover .px-icon { transform: translate(-50%, -50%) scale(1.1); color: #c43a3a; }
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------------- projects */
.project { display: grid; overflow: hidden; }
.project-art {
  width: 100%;
  height: auto;
  aspect-ratio: 72 / 27;
  image-rendering: pixelated;
}
.project-body { padding: 16px 18px 18px; }
.project-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.project h3 { margin: 0; font: 400 20px/1.2 var(--font-px); }
.project p { margin: 10px 0 0; color: var(--muted); }
.project .meta { font-size: 12px; color: var(--dim); }
.project .meta span + span::before { content: " · "; }

/* a project that's on hold: a slim grey card under the current one */
.project.is-paused {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  margin-top: 18px;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .2s steps(2), filter .2s steps(2);
}
.project.is-paused:hover { opacity: .8; filter: grayscale(.6); }
.project.is-paused .project-art { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.project.is-paused .project-body { align-self: center; padding: 10px 14px; }
.project.is-paused h3 { font-size: 15px; }
.project.is-paused p { margin-top: 4px; font-size: 13px; }
.badge-hold { color: var(--muted); background: #1d1d21; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font: 12px/1 var(--font-px);
  color: var(--red-hi);
  background: var(--red-deep);
}
.badge i {
  width: 6px;
  height: 6px;
  background: var(--red-hi);
  animation: blink 1.6s steps(1) infinite;
}

/* ---------------------------------------------------------------- projects built */
/* Advancement-style frames, filled in from CurseForge by main.js */
.tree {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.node { position: relative; }
.node-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: inherit;
  text-decoration: none;
}
/* dashed connector to the next frame; red after a released project */
.node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 37px;
  left: calc(50% + 46px);
  width: calc(100% - 76px);
  height: var(--px);
  background: var(--line-2);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px);
          mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px);
}
.node.is-unlocked::after { background: var(--red); }
.node:nth-child(4n)::after { display: none; }   /* end of a row */

.frame {
  --bd: var(--line-2);
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: none;
  background: var(--bg-raise);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bd), 0 var(--px) 0 0 var(--bd),
    calc(var(--px) * -1) 0 0 0 var(--bd), var(--px) 0 0 0 var(--bd);
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.frame img { width: 52px; height: 52px; object-fit: cover; }
/* Every frame in a row is as tall as the row, and the small line (downloads) sits at the bottom,
   so the download counts line up across the row however many lines the names above wrap to. */
.node-body { height: 100%; }
.node-text { display: flex; flex: 1; flex-direction: column; align-items: center; max-width: 100%; margin-top: 16px; }
.node strong { display: block; font: 400 16px/1.3 var(--font-px); overflow-wrap: anywhere; }
.node small  { display: block; margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--muted); }

.is-unlocked .frame {
  --bd: var(--red);
  background: #1a0b0b;
  color: var(--text);
}
a.node-body:hover .frame,
a.node-body:focus-visible .frame {
  --bd: var(--red-hi);
  transform: translate(-2px, -2px);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bd), 0 var(--px) 0 0 var(--bd),
    calc(var(--px) * -1) 0 0 0 var(--bd), var(--px) 0 0 0 var(--bd),
    5px 5px 0 0 rgba(172, 50, 50, .3);
}
a.node-body:hover strong { color: var(--red-hi); }

.is-locked .frame { color: #34343a; }
.is-locked strong { color: var(--muted); }
.is-locked small  { color: var(--dim); }
.is-filler { opacity: .5; }   /* empty slots after "next project" */
.lock {
  position: absolute;
  right: -10px;
  top: -10px;
  padding: 4px;
  color: var(--muted);
  background: var(--bg);
}

/* "view projects" tour: a glowing pixel selection box travels from the button to each
   project picture while the rest of the page dims (main.js moves it) */
.duo-projects { position: relative; }
.spotlight {
  position: absolute;
  z-index: 5;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(4, 4, 6, 0);
  transition:
    left .3s steps(6), top .3s steps(6), width .3s steps(6), height .3s steps(6),
    box-shadow .24s ease;
}
.spotlight[hidden] { display: none; }
.spotlight.jump { transition: box-shadow .24s ease; }
.spotlight.is-touring { box-shadow: 0 0 0 200vmax rgba(4, 4, 6, .66); }   /* dims everything else */
/* corner brackets */
.spotlight::before {
  --c: var(--red-hi);
  --t: 4px;   /* bracket thickness */
  --l: 20px;  /* bracket length */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) left top / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) right top / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) right top / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) left bottom / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) left bottom / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) right bottom / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) right bottom / var(--t) var(--l);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(226, 90, 90, .9));
  animation: spot-breathe .4s steps(2, jump-none) infinite alternate;
}
@keyframes spot-breathe { to { inset: -6px; } }
/* white "ping" each time it lands on a picture */
.spotlight::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 3px solid #fff;
  opacity: 0;
}
.spotlight.land::after { animation: spot-land .3s steps(4) 1; }
@keyframes spot-land {
  from { opacity: 1; inset: 4px; }
  to   { opacity: 0; inset: -14px; }
}
/* label above the box */
.spot-tag {
  position: absolute;
  left: -6px;
  bottom: calc(100% + 12px);
  padding: 5px 9px;
  font: 400 12px/1 var(--font-px);
  color: #fff;
  white-space: nowrap;
  background: var(--red);
  box-shadow: 0 -2px 0 #1a0808, 0 2px 0 #1a0808, -2px 0 0 #1a0808, 2px 0 0 #1a0808,
    inset 0 -2px 0 #7a2020;
}
.spot-tag:empty { display: none; }
.spotlight.land .spot-tag { animation: tag-pop .25s steps(3) 1; }
@keyframes tag-pop { from { transform: translateY(6px); opacity: 0; } }
.project-art { transition: filter .2s steps(2); }
.project-art.is-lit { filter: brightness(1.2); }
.frame.is-lit { --bd: var(--red-hi); }

.built-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--dim);
}
.built-note a { color: var(--muted); text-decoration: none; }
.built-note a:hover { color: var(--red-hi); }

/* ---------------------------------------------------------------- footer */
.site-foot {
  margin-top: 0;
  padding-top: 56px;         /* space between the projects and the footer */
}
.foot-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: var(--page);
  margin: 0 auto;
  padding: 18px 16px 22px;
  text-align: center;
}
/* same dashed line as the section headings */
.foot-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: var(--px);
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px);
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 16px/1 var(--font-px);
}
.foot-brand img { width: 30px; height: 42px; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 0 4px;
  list-style: none;
}
.foot-links a {
  --bd: var(--line-2);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--muted);
  background: var(--bg-raise);
  box-shadow: 0 -2px 0 var(--bd), 0 2px 0 var(--bd), -2px 0 0 var(--bd), 2px 0 0 var(--bd);
  transition: transform .12s steps(2), color .12s, box-shadow .12s steps(2);
}
.foot-links a:hover,
.foot-links a:focus-visible {
  --bd: var(--brand, var(--red));
  color: var(--brand, var(--red-hi));
  transform: translate(-2px, -2px);
  box-shadow: 0 -2px 0 var(--bd), 0 2px 0 var(--bd), -2px 0 0 var(--bd), 2px 0 0 var(--bd),
    4px 4px 0 color-mix(in srgb, var(--brand, var(--red)) 30%, transparent);
  outline: none;
}
.foot-copy { margin: 0; font-size: 12px; color: var(--dim); }

/* ---------------------------------------------------------------- 404 */
.lost {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px;
  text-align: center;
}
.lost h1 { margin: 0; font: 400 48px/1 var(--font-px); color: var(--red-hi); text-shadow: 4px 4px 0 var(--red-deep); }
.lost p  { margin: 0; color: var(--muted); }

/* ---------------------------------------------------------------- wide screens */
/* Two rows of pairs: links | latest video, then current project | projects built */
@media (min-width: 900px) {
  .duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 48px;
  }
  .duo-links { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .duo > section { display: flex; flex-direction: column; margin-top: 0; }
  .duo .video:not(.has-video) { flex: 1; }   /* video box fills its column */
  .duo .project-art { aspect-ratio: 3 / 1; object-fit: cover; }

  /* projects row: both columns end on the same line. The current project card
     stretches to match the projects built column (its picture grows a little),
     and the "released so far" note sits at the bottom, level with the card.
     Any spare height is shared out evenly: the gap between the rows of frames and
     the gap above the note always match (the empty last row is the note's gap). */
  .duo-projects .project:not(.is-paused) { flex: 1; display: flex; flex-direction: column; }
  .duo-projects .project:not(.is-paused) .project-art { flex: 1 1 auto; min-height: 0; height: auto; }
  .duo-projects .tree { flex: 1 0 auto; align-content: space-between; }
  .duo-projects .tree::after { content: ""; grid-column: 1 / -1; }
  .duo-projects .built-note { margin-top: 0; }

  /* projects built: three frames per row inside its half */
  .duo .tree { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duo .node:nth-child(4n)::after { display: block; }
  .duo .node:nth-child(3n)::after,
  .duo .node:last-child::after { display: none; }

  /* footer on one row: logo left, icons middle, copyright right */
  .foot-inner { flex-direction: row; justify-content: space-between; }
  .foot-brand, .foot-copy { flex: 1; }
  .foot-copy { text-align: right; }
}

/* shorter screens (most laptops): a slightly smaller logo so more fits */
@media (min-width: 601px) and (max-height: 960px) {
  .logo img { width: 120px; height: 168px; }       /* 12px per logo pixel */
  .logo::after { width: 72px; margin-left: -36px; }
}

/* ---------------------------------------------------------------- small screens */
@media (max-width: 600px) {
  section { margin-top: 40px; }
  .site-foot { padding-top: 48px; }
  .foot-links { gap: 6px; }
  .socials li { flex: 1 1 auto; }                 /* chips fill their rows evenly */
  .socials .chip { justify-content: center; }
  .foot-links a { width: 36px; height: 36px; }   /* all 8 on one row */
  .hero { padding-top: 28px; }
  .logo img { width: 120px; height: 168px; }       /* 12px per logo pixel */
  .logo::after { width: 72px; margin-left: -36px; }
  .wordmark img { width: 180px; height: 48px; }    /* 6px per letter pixel */
  .mined b { font-size: 18px; }

  .links { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .featured .card { padding: 18px; }
  .featured .card .t { font-size: 20px; }
  .featured .btn { display: none; }

  .project.is-paused { grid-template-columns: 88px minmax(0, 1fr); }
  .tree { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .node:not(:last-child)::after { display: block; width: calc(100% - 80px); }
  .node:nth-child(2n)::after { display: none; }   /* two per row on phones */
  .node-text { margin-top: 12px; }
  .node strong { font-size: 14px; }
}

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

/* ---------------------------------------------------------------- custom link cursor */
/* Over platform links the mouse pointer becomes a pixel hand with a wristband in the platform's
   colour and its icon as a badge. Hover: the badge bobs. Press: the finger taps and sparks fly.
   Hold: the badge charges up and keeps sparking. main.js builds each frame from the art below
   (made by tools/make_cursors.py) and uses it as a real system cursor, so it never lags. */

/* link cursors: generated by tools/make_cursors.py, edit that instead */
:root {
  --lc-hand-up: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="30" viewBox="0 0 8 10" shape-rendering="crispEdges"%3E%3Cpath fill="%23ffffff" d="M2 0h2v1H2zM1 1h1v1H1zM4 1h1v1H4zM1 2h1v1H1zM4 2h1v1H4zM1 3h1v1H1zM4 3h3v1H4zM0 4h2v1H0zM4 4h1v1H4zM7 4h1v1H7zM0 5h1v1H0zM7 5h1v1H7zM0 6h1v1H0zM7 6h1v1H7zM1 7h1v1H1zM6 7h1v1H6zM1 8h1v1H1zM6 8h1v1H6zM1 9h6v1H1z"/%3E%3Cpath fill="%23000000" d="M2 1h1v1H2zM3 2h1v1H3zM2 3h1v1H2zM3 4h1v1H3zM5 4h1v1H5zM2 5h1v1H2zM4 5h1v1H4zM6 5h1v1H6zM1 6h1v1H1zM3 6h1v1H3zM2 7h1v1H2zM4 7h1v1H4z"/%3E%3Cpath fill="%23212121" d="M3 1h1v1H3zM2 2h1v1H2zM3 3h1v1H3zM2 4h1v1H2zM6 4h1v1H6zM1 5h1v1H1zM3 5h1v1H3zM5 5h1v1H5zM2 6h1v1H2zM4 6h1v1H4zM6 6h1v1H6zM3 7h1v1H3zM5 7h1v1H5z"/%3E%3Cpath fill="%23ac3232" d="M5 6h1v1H5z"/%3E%3Cpath fill="%23808080" d="M2 8h4v1H2z"/%3E%3C/svg%3E');
  --lc-hand-press: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="30" viewBox="0 0 8 10" shape-rendering="crispEdges"%3E%3Cpath fill="%23ffffff" d="M2 1h2v1H2zM1 2h1v1H1zM4 2h1v1H4zM1 3h1v1H1zM4 3h3v1H4zM0 4h2v1H0zM4 4h1v1H4zM7 4h1v1H7zM0 5h1v1H0zM7 5h1v1H7zM0 6h1v1H0zM7 6h1v1H7zM1 7h1v1H1zM6 7h1v1H6zM1 8h1v1H1zM6 8h1v1H6zM1 9h6v1H1z"/%3E%3Cpath fill="%23212121" d="M2 2h1v1H2zM3 3h1v1H3zM2 4h1v1H2zM6 4h1v1H6zM1 5h1v1H1zM3 5h1v1H3zM5 5h1v1H5zM2 6h1v1H2zM4 6h1v1H4zM6 6h1v1H6zM3 7h1v1H3zM5 7h1v1H5z"/%3E%3Cpath fill="%23000000" d="M3 2h1v1H3zM2 3h1v1H2zM3 4h1v1H3zM5 4h1v1H5zM2 5h1v1H2zM4 5h1v1H4zM6 5h1v1H6zM1 6h1v1H1zM3 6h1v1H3zM2 7h1v1H2zM4 7h1v1H4z"/%3E%3Cpath fill="%23ac3232" d="M5 6h1v1H5z"/%3E%3Cpath fill="%23808080" d="M2 8h4v1H2z"/%3E%3C/svg%3E');
  --lc-hand-tip: 9 1;
  --cur-youtube: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="22" viewBox="-1 -1 14 11" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M1 -1h10v1H1zM0 0h1v1H0zM11 0h1v1H11zM-1 1h1v1H-1zM12 1h1v1H12zM-1 2h1v1H-1zM12 2h1v1H12zM-1 3h1v1H-1zM12 3h1v1H12zM-1 4h1v1H-1zM12 4h1v1H12zM-1 5h1v1H-1zM12 5h1v1H12zM-1 6h1v1H-1zM12 6h1v1H12zM-1 7h1v1H-1zM12 7h1v1H12zM0 8h1v1H0zM11 8h1v1H11zM1 9h10v1H1z"/%3E%3Cpath fill="%23ff0033" d="M1 0h10v1H1zM0 1h12v1H0zM0 2h5v1H0zM6 2h6v1H6zM0 3h5v1H0zM7 3h5v1H7zM0 4h5v1H0zM8 4h4v1H8zM0 5h5v1H0zM7 5h5v1H7zM0 6h5v1H0zM6 6h6v1H6zM0 7h12v1H0zM1 8h10v1H1z"/%3E%3Cpath fill="%23ffffff" d="M5 2h1v1H5zM5 3h2v1H5zM5 4h3v1H5zM5 5h2v1H5zM5 6h1v1H5z"/%3E%3C/svg%3E');
  --cur-youtube-colour: #ff0033;
  --cur-curseforge: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="18" viewBox="-1 -1 14 9" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M0 -1h12v1H0zM-1 0h1v1H-1zM12 0h1v1H12zM0 1h1v1H0zM12 1h1v1H12zM1 2h3v1H1zM11 2h1v1H11zM4 3h1v1H4zM10 3h1v1H10zM4 4h1v1H4zM10 4h1v1H10zM3 5h1v1H3zM11 5h1v1H11zM2 6h1v1H2zM12 6h1v1H12zM3 7h9v1H3z"/%3E%3Cpath fill="%23f16436" d="M0 0h12v1H0zM1 1h11v1H1zM4 2h7v1H4zM5 3h5v1H5zM5 4h5v1H5zM4 5h7v1H4zM3 6h9v1H3z"/%3E%3C/svg%3E');
  --cur-curseforge-colour: #f16436;
  --cur-modrinth: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-1 -1 12 12" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M4 -1h2v1H4zM3 0h1v1H3zM6 0h1v1H6zM3 1h1v1H3zM6 1h1v1H6zM1 2h3v1H1zM6 2h3v1H6zM0 3h1v1H0zM3 3h1v1H3zM6 3h1v1H6zM9 3h1v1H9zM1 4h1v1H1zM8 4h1v1H8zM2 5h1v1H2zM7 5h1v1H7zM3 6h1v1H3zM6 6h1v1H6zM0 7h1v1H0zM4 7h2v1H4zM9 7h1v1H9zM-1 8h1v1H-1zM1 8h8v1H1zM10 8h1v1H10zM-1 9h1v1H-1zM10 9h1v1H10zM0 10h10v1H0z"/%3E%3Cpath fill="%231bd96a" d="M4 0h2v1H4zM4 1h2v1H4zM4 2h2v1H4zM1 3h2v1H1zM4 3h2v1H4zM7 3h2v1H7zM2 4h6v1H2zM3 5h4v1H3zM4 6h2v1H4zM0 8h1v1H0zM9 8h1v1H9zM0 9h10v1H0z"/%3E%3C/svg%3E');
  --cur-modrinth-colour: #1bd96a;
  --cur-github: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="26" height="18" viewBox="-1 -1 13 9" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M6 -1h1v1H6zM2 0h1v1H2zM5 0h1v1H5zM7 0h2v1H7zM1 1h1v1H1zM3 1h1v1H3zM5 1h1v1H5zM7 1h1v1H7zM9 1h1v1H9zM0 2h1v1H0zM2 2h1v1H2zM4 2h1v1H4zM6 2h1v1H6zM8 2h1v1H8zM10 2h1v1H10zM-1 3h1v1H-1zM1 3h1v1H1zM4 3h1v1H4zM6 3h1v1H6zM9 3h1v1H9zM11 3h1v1H11zM0 4h1v1H0zM2 4h1v1H2zM4 4h1v1H4zM6 4h1v1H6zM8 4h1v1H8zM10 4h1v1H10zM1 5h1v1H1zM3 5h1v1H3zM5 5h1v1H5zM7 5h1v1H7zM9 5h1v1H9zM2 6h2v1H2zM5 6h1v1H5zM8 6h1v1H8zM4 7h1v1H4z"/%3E%3Cpath fill="%23f0f6fc" d="M6 0h1v1H6zM2 1h1v1H2zM6 1h1v1H6zM8 1h1v1H8zM1 2h1v1H1zM5 2h1v1H5zM9 2h1v1H9zM0 3h1v1H0zM5 3h1v1H5zM10 3h1v1H10zM1 4h1v1H1zM5 4h1v1H5zM9 4h1v1H9zM2 5h1v1H2zM4 5h1v1H4zM8 5h1v1H8zM4 6h1v1H4z"/%3E%3C/svg%3E');
  --cur-github-colour: #f0f6fc;
  --cur-twitch: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="26" height="24" viewBox="-1 -1 13 12" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M1 -1h10v1H1zM0 0h1v1H0zM11 0h1v1H11zM-1 1h1v1H-1zM11 1h1v1H11zM-1 2h1v1H-1zM11 2h1v1H11zM-1 3h1v1H-1zM11 3h1v1H11zM-1 4h1v1H-1zM11 4h1v1H11zM-1 5h1v1H-1zM11 5h1v1H11zM-1 6h1v1H-1zM10 6h1v1H10zM-1 7h1v1H-1zM9 7h1v1H9zM0 8h2v1H0zM4 8h5v1H4zM1 9h1v1H1zM3 9h1v1H3zM2 10h1v1H2z"/%3E%3Cpath fill="%239146ff" d="M1 0h10v1H1zM0 1h11v1H0zM0 2h5v1H0zM6 2h2v1H6zM9 2h2v1H9zM0 3h5v1H0zM6 3h2v1H6zM9 3h2v1H9zM0 4h5v1H0zM6 4h2v1H6zM9 4h2v1H9zM0 5h11v1H0zM0 6h10v1H0zM0 7h9v1H0zM2 8h2v1H2zM2 9h1v1H2z"/%3E%3Cpath fill="%23ffffff" d="M5 2h1v1H5zM8 2h1v1H8zM5 3h1v1H5zM8 3h1v1H8zM5 4h1v1H5zM8 4h1v1H8z"/%3E%3C/svg%3E');
  --cur-twitch-colour: #9146ff;
  --cur-patreon: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="26" height="22" viewBox="-1 -1 13 11" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M0 -1h2v1H0zM5 -1h4v1H5zM-1 0h1v1H-1zM2 0h1v1H2zM4 0h1v1H4zM9 0h1v1H9zM-1 1h1v1H-1zM2 1h2v1H2zM10 1h1v1H10zM-1 2h1v1H-1zM2 2h1v1H2zM11 2h1v1H11zM-1 3h1v1H-1zM2 3h1v1H2zM11 3h1v1H11zM-1 4h1v1H-1zM2 4h1v1H2zM11 4h1v1H11zM-1 5h1v1H-1zM2 5h2v1H2zM10 5h1v1H10zM-1 6h1v1H-1zM2 6h1v1H2zM4 6h1v1H4zM9 6h1v1H9zM-1 7h1v1H-1zM2 7h1v1H2zM5 7h4v1H5zM-1 8h1v1H-1zM2 8h1v1H2zM0 9h2v1H0z"/%3E%3Cpath fill="%23ff424d" d="M0 0h2v1H0zM5 0h4v1H5zM0 1h2v1H0zM4 1h6v1H4zM0 2h2v1H0zM3 2h8v1H3zM0 3h2v1H0zM3 3h8v1H3zM0 4h2v1H0zM3 4h8v1H3zM0 5h2v1H0zM4 5h6v1H4zM0 6h2v1H0zM5 6h4v1H5zM0 7h2v1H0zM0 8h2v1H0z"/%3E%3C/svg%3E');
  --cur-patreon-colour: #ff424d;
  --cur-bluesky: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="26" height="24" viewBox="-1 -1 13 12" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M0 -1h1v1H0zM10 -1h1v1H10zM-1 0h1v1H-1zM1 0h1v1H1zM9 0h1v1H9zM11 0h1v1H11zM-1 1h1v1H-1zM2 1h1v1H2zM8 1h1v1H8zM11 1h1v1H11zM-1 2h1v1H-1zM3 2h1v1H3zM7 2h1v1H7zM11 2h1v1H11zM-1 3h1v1H-1zM4 3h1v1H4zM6 3h1v1H6zM11 3h1v1H11zM-1 4h1v1H-1zM5 4h1v1H5zM11 4h1v1H11zM0 5h1v1H0zM10 5h1v1H10zM1 6h1v1H1zM5 6h1v1H5zM9 6h1v1H9zM0 7h1v1H0zM5 7h1v1H5zM10 7h1v1H10zM0 8h1v1H0zM4 8h1v1H4zM6 8h1v1H6zM10 8h1v1H10zM1 9h1v1H1zM3 9h1v1H3zM7 9h1v1H7zM9 9h1v1H9zM2 10h1v1H2zM8 10h1v1H8z"/%3E%3Cpath fill="%231185fe" d="M0 0h1v1H0zM10 0h1v1H10zM0 1h2v1H0zM9 1h2v1H9zM0 2h3v1H0zM8 2h3v1H8zM0 3h4v1H0zM7 3h4v1H7zM0 4h5v1H0zM6 4h5v1H6zM1 5h9v1H1zM2 6h3v1H2zM6 6h3v1H6zM1 7h4v1H1zM6 7h4v1H6zM1 8h3v1H1zM7 8h3v1H7zM2 9h1v1H2zM8 9h1v1H8z"/%3E%3C/svg%3E');
  --cur-bluesky-colour: #1185fe;
  --cur-instagram: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-1 -1 13 13" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M1 -1h9v1H1zM0 0h1v1H0zM10 0h1v1H10zM-1 1h1v1H-1zM11 1h1v1H11zM-1 2h1v1H-1zM11 2h1v1H11zM-1 3h1v1H-1zM11 3h1v1H11zM-1 4h1v1H-1zM11 4h1v1H11zM-1 5h1v1H-1zM11 5h1v1H11zM-1 6h1v1H-1zM11 6h1v1H11zM-1 7h1v1H-1zM11 7h1v1H11zM-1 8h1v1H-1zM11 8h1v1H11zM-1 9h1v1H-1zM11 9h1v1H11zM0 10h1v1H0zM10 10h1v1H10zM1 11h9v1H1z"/%3E%3Cpath fill="%23e1306c" d="M1 0h9v1H1zM0 1h1v1H0zM10 1h1v1H10zM0 2h1v1H0zM8 2h1v1H8zM10 2h1v1H10zM0 3h1v1H0zM4 3h3v1H4zM10 3h1v1H10zM0 4h1v1H0zM3 4h1v1H3zM7 4h1v1H7zM10 4h1v1H10zM0 5h1v1H0zM3 5h1v1H3zM7 5h1v1H7zM10 5h1v1H10zM0 6h1v1H0zM3 6h1v1H3zM7 6h1v1H7zM10 6h1v1H10zM0 7h1v1H0zM4 7h3v1H4zM10 7h1v1H10zM0 8h1v1H0zM10 8h1v1H10zM0 9h1v1H0zM10 9h1v1H10zM1 10h9v1H1z"/%3E%3Cpath fill="%23000000" d="M1 1h9v1H1zM1 2h7v1H1zM9 2h1v1H9zM1 3h3v1H1zM7 3h3v1H7zM1 4h2v1H1zM4 4h3v1H4zM8 4h2v1H8zM1 5h2v1H1zM4 5h3v1H4zM8 5h2v1H8zM1 6h2v1H1zM4 6h3v1H4zM8 6h2v1H8zM1 7h3v1H1zM7 7h3v1H7zM1 8h9v1H1zM1 9h9v1H1z"/%3E%3C/svg%3E');
  --cur-instagram-colour: #e1306c;
  --cur-reddit: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="22" viewBox="-1 -1 16 11" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M9 -1h2v1H9zM8 0h1v1H8zM11 0h1v1H11zM7 1h1v1H7zM11 1h1v1H11zM0 2h2v1H0zM4 2h3v1H4zM8 2h3v1H8zM12 2h2v1H12zM-1 3h1v1H-1zM2 3h2v1H2zM10 3h2v1H10zM14 3h1v1H14zM-1 4h1v1H-1zM2 4h1v1H2zM11 4h1v1H11zM14 4h1v1H14zM0 5h2v1H0zM12 5h2v1H12zM1 6h1v1H1zM12 6h1v1H12zM2 7h1v1H2zM11 7h1v1H11zM3 8h1v1H3zM10 8h1v1H10zM4 9h6v1H4z"/%3E%3Cpath fill="%23ff4500" d="M9 0h2v1H9zM8 1h3v1H8zM7 2h1v1H7zM0 3h2v1H0zM4 3h6v1H4zM12 3h2v1H12zM0 4h2v1H0zM3 4h8v1H3zM12 4h2v1H12zM2 5h2v1H2zM6 5h2v1H6zM10 5h2v1H10zM2 6h2v1H2zM5 6h4v1H5zM10 6h2v1H10zM3 7h2v1H3zM9 7h2v1H9zM4 8h6v1H4z"/%3E%3Cpath fill="%23ffffff" d="M4 5h2v1H4zM8 5h2v1H8zM4 6h1v1H4zM9 6h1v1H9zM5 7h4v1H5z"/%3E%3C/svg%3E');
  --cur-reddit-colour: #ff4500;
  --cur-discord: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="26" height="20" viewBox="-1 -1 13 10" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M1 -1h2v1H1zM8 -1h2v1H8zM0 0h1v1H0zM3 0h5v1H3zM10 0h1v1H10zM-1 1h1v1H-1zM11 1h1v1H11zM-1 2h1v1H-1zM11 2h1v1H11zM-1 3h1v1H-1zM11 3h1v1H11zM-1 4h1v1H-1zM11 4h1v1H11zM-1 5h1v1H-1zM11 5h1v1H11zM-1 6h1v1H-1zM4 6h3v1H4zM11 6h1v1H11zM0 7h1v1H0zM3 7h1v1H3zM7 7h1v1H7zM10 7h1v1H10zM1 8h2v1H1zM8 8h2v1H8z"/%3E%3Cpath fill="%235865f2" d="M1 0h2v1H1zM8 0h2v1H8zM0 1h11v1H0zM0 2h11v1H0zM0 3h2v1H0zM4 3h3v1H4zM9 3h2v1H9zM0 4h2v1H0zM4 4h3v1H4zM9 4h2v1H9zM0 5h11v1H0zM0 6h4v1H0zM7 6h4v1H7zM1 7h2v1H1zM8 7h2v1H8z"/%3E%3Cpath fill="%23ffffff" d="M2 3h2v1H2zM7 3h2v1H7zM2 4h2v1H2zM7 4h2v1H7z"/%3E%3C/svg%3E');
  --cur-discord-colour: #5865f2;
  --cur-x: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="-1 -1 10 9" shape-rendering="crispEdges"%3E%3Cpath fill="%23000" d="M0 -1h2v1H0zM7 -1h1v1H7zM-1 0h1v1H-1zM2 0h1v1H2zM6 0h1v1H6zM8 0h1v1H8zM0 1h1v1H0zM3 1h1v1H3zM5 1h1v1H5zM7 1h1v1H7zM1 2h1v1H1zM4 2h1v1H4zM6 2h1v1H6zM2 3h1v1H2zM5 3h1v1H5zM1 4h1v1H1zM3 4h1v1H3zM6 4h1v1H6zM0 5h1v1H0zM2 5h1v1H2zM4 5h1v1H4zM7 5h1v1H7zM-1 6h1v1H-1zM1 6h1v1H1zM5 6h1v1H5zM8 6h1v1H8zM0 7h1v1H0zM6 7h2v1H6z"/%3E%3Cpath fill="%23e7e9ea" d="M0 0h2v1H0zM7 0h1v1H7zM1 1h2v1H1zM6 1h1v1H6zM2 2h2v1H2zM5 2h1v1H5zM3 3h2v1H3zM2 4h1v1H2zM4 4h2v1H4zM1 5h1v1H1zM5 5h2v1H5zM0 6h1v1H0zM6 6h2v1H6z"/%3E%3C/svg%3E');
  --cur-x-colour: #e7e9ea;
  --cur-arrow: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10" shape-rendering="crispEdges"%3E%3Cpath fill="%23ffffff" d="M0 0h1v1H0zM0 1h2v1H0zM0 2h1v1H0zM2 2h1v1H2zM0 3h1v1H0zM3 3h1v1H3zM0 4h1v1H0zM4 4h1v1H4zM0 5h1v1H0zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6zM0 7h1v1H0zM0 8h1v1H0zM0 9h1v1H0z"/%3E%3Cpath fill="%23000000" d="M1 2h1v1H1zM2 3h1v1H2zM1 4h1v1H1zM3 4h1v1H3zM2 5h1v1H2zM4 5h1v1H4zM1 6h1v1H1zM3 6h1v1H3zM2 7h1v1H2zM1 8h1v1H1z"/%3E%3Cpath fill="%23212121" d="M1 3h1v1H1zM1 5h1v1H1zM3 5h1v1H3zM2 6h1v1H2zM4 6h1v1H4zM1 7h1v1H1zM3 7h1v1H3zM2 8h1v1H2z"/%3E%3Cpath fill="%23ac3232" d="M2 4h1v1H2zM5 6h1v1H5zM4 7h4v1H4zM3 8h1v1H3zM1 9h2v1H1z"/%3E%3C/svg%3E');
  --cur-arrow-glint-1: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10" shape-rendering="crispEdges"%3E%3Cpath fill="%23ffffff" d="M0 0h1v1H0zM0 1h2v1H0zM0 2h1v1H0zM2 2h1v1H2zM0 3h1v1H0zM3 3h1v1H3zM0 4h1v1H0zM4 4h1v1H4zM0 5h1v1H0zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6zM0 7h1v1H0zM0 8h1v1H0zM0 9h1v1H0z"/%3E%3Cpath fill="%23000000" d="M1 2h1v1H1zM2 3h1v1H2zM1 4h1v1H1zM3 4h1v1H3zM2 5h1v1H2zM4 5h1v1H4zM1 6h1v1H1zM3 6h1v1H3zM2 7h1v1H2zM1 8h1v1H1z"/%3E%3Cpath fill="%23212121" d="M1 3h1v1H1zM1 5h1v1H1zM3 5h1v1H3zM2 6h1v1H2zM4 6h1v1H4zM1 7h1v1H1zM3 7h1v1H3zM2 8h1v1H2z"/%3E%3Cpath fill="%23e25a5a" d="M2 4h1v1H2z"/%3E%3Cpath fill="%23ac3232" d="M5 6h1v1H5zM4 7h4v1H4zM3 8h1v1H3zM1 9h2v1H1z"/%3E%3C/svg%3E');
  --cur-arrow-glint-2: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10" shape-rendering="crispEdges"%3E%3Cpath fill="%23ffffff" d="M0 0h1v1H0zM0 1h2v1H0zM0 2h1v1H0zM2 2h1v1H2zM0 3h1v1H0zM3 3h1v1H3zM0 4h1v1H0zM4 4h1v1H4zM0 5h1v1H0zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6zM0 7h1v1H0zM0 8h1v1H0zM0 9h1v1H0z"/%3E%3Cpath fill="%23000000" d="M1 2h1v1H1zM2 3h1v1H2zM1 4h1v1H1zM3 4h1v1H3zM2 5h1v1H2zM4 5h1v1H4zM1 6h1v1H1zM3 6h1v1H3zM2 7h1v1H2zM1 8h1v1H1z"/%3E%3Cpath fill="%23212121" d="M1 3h1v1H1zM1 5h1v1H1zM3 5h1v1H3zM2 6h1v1H2zM4 6h1v1H4zM1 7h1v1H1zM3 7h1v1H3zM2 8h1v1H2z"/%3E%3Cpath fill="%23ac3232" d="M2 4h1v1H2zM4 7h4v1H4zM3 8h1v1H3zM1 9h2v1H1z"/%3E%3Cpath fill="%23e25a5a" d="M5 6h1v1H5z"/%3E%3C/svg%3E');
  --cur-arrow-press: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10" shape-rendering="crispEdges"%3E%3Cpath fill="%23ffffff" d="M0 0h1v1H0zM0 1h2v1H0zM8 1h1v1H8zM0 2h1v1H0zM2 2h1v1H2zM0 3h1v1H0zM3 3h1v1H3zM0 4h1v1H0zM4 4h1v1H4zM0 5h1v1H0zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6zM0 7h1v1H0zM0 8h1v1H0zM0 9h1v1H0z"/%3E%3Cpath fill="%23000000" d="M1 2h1v1H1zM2 3h1v1H2zM1 4h1v1H1zM3 4h1v1H3zM2 5h1v1H2zM4 5h1v1H4zM1 6h1v1H1zM3 6h1v1H3zM2 7h1v1H2zM1 8h1v1H1z"/%3E%3Cpath fill="%23212121" d="M1 3h1v1H1zM1 5h1v1H1zM3 5h1v1H3zM2 6h1v1H2zM4 6h1v1H4zM1 7h1v1H1zM3 7h1v1H3zM2 8h1v1H2z"/%3E%3Cpath fill="%23e25a5a" d="M5 2h1v1H5zM2 4h1v1H2zM7 4h1v1H7zM5 6h1v1H5z"/%3E%3Cpath fill="%23ac3232" d="M4 7h4v1H4zM3 8h1v1H3zM1 9h2v1H1z"/%3E%3C/svg%3E');
  --cur-arrow-hold-1: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10" shape-rendering="crispEdges"%3E%3Cpath fill="%23ffffff" d="M0 0h1v1H0zM0 1h2v1H0zM0 2h1v1H0zM2 2h1v1H2zM0 3h1v1H0zM3 3h1v1H3zM0 4h1v1H0zM4 4h1v1H4zM0 5h1v1H0zM5 5h1v1H5zM8 5h1v1H8zM0 6h1v1H0zM6 6h1v1H6zM0 7h1v1H0zM0 8h1v1H0zM0 9h1v1H0z"/%3E%3Cpath fill="%23000000" d="M1 2h1v1H1zM2 3h1v1H2zM1 4h1v1H1zM3 4h1v1H3zM2 5h1v1H2zM4 5h1v1H4zM1 6h1v1H1zM3 6h1v1H3zM2 7h1v1H2zM1 8h1v1H1z"/%3E%3Cpath fill="%23212121" d="M1 3h1v1H1zM1 5h1v1H1zM3 5h1v1H3zM2 6h1v1H2zM4 6h1v1H4zM1 7h1v1H1zM3 7h1v1H3zM2 8h1v1H2z"/%3E%3Cpath fill="%23e25a5a" d="M6 1h1v1H6zM9 3h1v1H9zM2 4h1v1H2zM5 6h1v1H5z"/%3E%3Cpath fill="%23ac3232" d="M4 7h4v1H4zM3 8h1v1H3zM1 9h2v1H1z"/%3E%3C/svg%3E');
  --cur-arrow-hold-2: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 10 10" shape-rendering="crispEdges"%3E%3Cpath fill="%23ffffff" d="M0 0h1v1H0zM6 0h1v1H6zM0 1h2v1H0zM0 2h1v1H0zM2 2h1v1H2zM0 3h1v1H0zM3 3h1v1H3zM0 4h1v1H0zM2 4h1v1H2zM4 4h1v1H4zM0 5h1v1H0zM5 5h1v1H5zM0 6h1v1H0zM5 6h2v1H5zM0 7h1v1H0zM0 8h1v1H0zM0 9h1v1H0z"/%3E%3Cpath fill="%23000000" d="M1 2h1v1H1zM2 3h1v1H2zM1 4h1v1H1zM3 4h1v1H3zM2 5h1v1H2zM4 5h1v1H4zM1 6h1v1H1zM3 6h1v1H3zM2 7h1v1H2zM1 8h1v1H1z"/%3E%3Cpath fill="%23212121" d="M1 3h1v1H1zM1 5h1v1H1zM3 5h1v1H3zM2 6h1v1H2zM4 6h1v1H4zM1 7h1v1H1zM3 7h1v1H3zM2 8h1v1H2z"/%3E%3Cpath fill="%23ac3232" d="M4 7h4v1H4zM3 8h1v1H3zM1 9h2v1H1z"/%3E%3Cpath fill="%23e25a5a" d="M8 0h1v1H8zM9 5h1v1H9z"/%3E%3C/svg%3E');
}
html { cursor: var(--cur-arrow) 1 1, auto; }
html[data-cur="glint-1"] { cursor: var(--cur-arrow-glint-1) 1 1, auto; }
html[data-cur="glint-2"] { cursor: var(--cur-arrow-glint-2) 1 1, auto; }
html[data-cur="press"] { cursor: var(--cur-arrow-press) 1 1, auto; }
html[data-cur="hold-1"] { cursor: var(--cur-arrow-hold-1) 1 1, auto; }
html[data-cur="hold-2"] { cursor: var(--cur-arrow-hold-2) 1 1, auto; }
a[href*="youtube.com"], .video-play { cursor: var(--cur-youtube) 14 11, pointer; }
a[href*="curseforge.com"] { cursor: var(--cur-curseforge) 14 9, pointer; }
a[href*="modrinth.com"] { cursor: var(--cur-modrinth) 12 12, pointer; }
a[href*="github.com"] { cursor: var(--cur-github) 13 9, pointer; }
a[href*="twitch.tv"] { cursor: var(--cur-twitch) 13 12, pointer; }
a[href*="patreon.com"] { cursor: var(--cur-patreon) 13 11, pointer; }
a[href*="bsky.app"] { cursor: var(--cur-bluesky) 13 12, pointer; }
a[href*="instagram.com"] { cursor: var(--cur-instagram) 13 13, pointer; }
a[href*="reddit.com"] { cursor: var(--cur-reddit) 16 11, pointer; }
a[href*="discord.gg"], a[href*="discord.com"] { cursor: var(--cur-discord) 13 10, pointer; }
a[href^="https://x.com"], a[href^="https://twitter.com"] { cursor: var(--cur-x) 10 9, pointer; }
.lc-ready :is(a[href*="youtube.com"], .video-play, a[href*="curseforge.com"], a[href*="modrinth.com"], a[href*="github.com"], a[href*="twitch.tv"], a[href*="patreon.com"], a[href*="bsky.app"], a[href*="instagram.com"], a[href*="reddit.com"], a[href*="discord.gg"], a[href*="discord.com"], a[href^="https://x.com"], a[href^="https://twitter.com"]) * { cursor: inherit; }
/* end link cursors */