:root {
  color-scheme: dark;
  --background: #111111;
  --text: #d9d9d9;
  --border: #303030;
  --border-hover: #5b5b5b;
  --surface: #171717;
  --surface-hover: #1b1b1b;
  --muted: #7c7c7c;       /* quietest text that still reads at 4.5:1 on #111 */
  --muted-hover: #a8a8a8;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.7, 0, .84, 0);
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
html { background: var(--background); }
body {
  min-width: 0;
  background: var(--background);
  color: var(--text);
  font-family: 'Instrument Sans', sans-serif;
}
button { font: inherit; }
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.screen {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}
.site-topography { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
#app { position: relative; z-index: 1; }
.home, .downloads { position: relative; min-height: 100svh; }
.brand { margin: 0; font-size: inherit; }
.logo {
  position: absolute;
  top: calc(50% - 119.5px);
  left: 50%;
  width: 260px;
  height: 73px;
  object-fit: contain;
  transform: translateX(-50%);
}
.actions {
  position: absolute;
  z-index: 1;
  top: calc(50% - 4.5px);
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.action-row { display: flex; gap: 18px; }
.action-button {
  position: relative;
  isolation: isolate;
  width: 190px;
  height: 54px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: #888;
  text-decoration: none;
  display: grid;
  place-items: center;
  font-size: 23px;
  font-weight: 500;
  transition: color 220ms var(--ease), border-color 240ms var(--ease), background-color 240ms var(--ease), scale 160ms var(--ease), translate 160ms var(--ease);
}
/* Spotlight (port of React Bits Spotlight Card): a soft light that follows the cursor inside the button. */
.action-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgb(var(--spot, 255 255 255) / 7%), rgb(var(--spot, 255 255 255) / 2.5%) 45%, transparent 72%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.action-button:focus-visible, .social-link:focus-visible, .back:focus-visible { outline: 2px solid #bbb; outline-offset: 3px; }
.action-button:not([aria-disabled]):focus-visible { color: var(--text); border-color: var(--border-hover); }
.action-button:not([aria-disabled]):focus-visible::before { --spot-x: 50%; --spot-y: 50%; opacity: .8; transition-duration: 100ms; }
@media (hover: hover) {
  .action-button:not([aria-disabled]):hover { color: var(--text); border-color: var(--border-hover); background-color: var(--surface-hover); }
  .action-button:not([aria-disabled]):hover::before { opacity: 1; transition-duration: 100ms; }
}
.action-button:not([aria-disabled]):active { scale: .985; translate: 0 1px; transition-duration: 220ms, 240ms, 240ms, 90ms, 90ms; }
.action-button[aria-disabled="true"] { cursor: default; color: #4e4e4e; border-color: #232323; background: #131313; }
/* Comet lap (the React Bits Star Border idea, in CSS): one white comet runs once around the border,
   just inside it (overflow clips anything outside the padding box). ::after is free on enabled buttons;
   only the aria-disabled loading placeholders use it, for their fill. */
@property --lap { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.action-button:not([aria-disabled])::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
  padding: 1.5px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from var(--lap), transparent 0 64%, rgb(255 255 255 / .85) 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Button icons: Lucide line icons drawn twice, a dim base and a "comet glint", a short white dash that
   runs along every stroke (pathLength=1) on hover or keyboard focus, like a pulse of light running down a cable. */
.button-icon {
  position: absolute;
  bottom: -20px;
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  color: #8a8a8a;
  transition: color 240ms var(--ease);
}
.icon-left { left: -20px; }
.icon-right { right: -20px; }
.button-icon .ico {
  width: 60px;
  height: 60px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 420ms var(--ease), translate 420ms var(--ease), filter 240ms var(--ease);
}
/* Group opacity, so overlapping strokes do not double up the way rgba strokes would. */
.button-icon .ico-base { opacity: .22; transition: opacity 240ms var(--ease); }
.ico-glint {
  stroke: #fff;
  stroke-width: 1.5;
  stroke-dasharray: .16 1;
  stroke-dashoffset: .16;
  opacity: 0;
  filter: drop-shadow(0 0 2px rgb(255 255 255 / .7));
}
.ico .dl-arrow, .ico .lk-a, .ico .lk-b { transform-box: fill-box; }
.ico .dl-arrow { transition: translate 140ms var(--ease); }
.ico-key { transform-origin: 66% 34%; } /* the bow, so the key turns as if in a lock */
/* Hover and keyboard focus: the icon brightens, the glint runs once and each icon makes its own small move. */
.action-button:not([aria-disabled]):focus-visible::after { animation: lap 1100ms var(--ease); }
.action-button:not([aria-disabled]):focus-visible .button-icon { color: #d0d0d0; }
.action-button:not([aria-disabled]):focus-visible .ico-base { opacity: .34; }
.action-button:not([aria-disabled]):focus-visible .ico-glint { animation: glint 900ms var(--ease) 60ms both; }
.action-button:not([aria-disabled]):focus-visible .ico-key { rotate: -14deg; }
.action-button:not([aria-disabled]):focus-visible .dl-arrow { animation: dl-drop 700ms var(--ease); }
.action-button:not([aria-disabled]):focus-visible .ico-package { translate: 0 -2px; }
.action-button:not([aria-disabled]):focus-visible .lk-a { animation: lk-a 600ms var(--ease); }
.action-button:not([aria-disabled]):focus-visible .lk-b { animation: lk-b 600ms var(--ease); }
.action-button:not([aria-disabled]):focus-visible .ico-zap { animation: zap 520ms steps(1, end) 280ms; filter: drop-shadow(0 0 6px rgb(255 255 255 / .35)); }
@media (hover: hover) {
  .action-button:not([aria-disabled]):hover::after { animation: lap 1100ms var(--ease); }
  .action-button:not([aria-disabled]):hover .button-icon { color: #d0d0d0; }
  .action-button:not([aria-disabled]):hover .ico-base { opacity: .34; }
  .action-button:not([aria-disabled]):hover .ico-glint { animation: glint 900ms var(--ease) 60ms both; }
  .action-button:not([aria-disabled]):hover .ico-key { rotate: -14deg; }
  .action-button:not([aria-disabled]):hover .dl-arrow { animation: dl-drop 700ms var(--ease); }
  .action-button:not([aria-disabled]):hover .ico-package { translate: 0 -2px; }
  .action-button:not([aria-disabled]):hover .lk-a { animation: lk-a 600ms var(--ease); }
  .action-button:not([aria-disabled]):hover .lk-b { animation: lk-b 600ms var(--ease); }
  .action-button:not([aria-disabled]):hover .ico-zap { animation: zap 520ms steps(1, end) 280ms; filter: drop-shadow(0 0 6px rgb(255 255 255 / .35)); }
}
/* Press: the key turns further, the arrow pushes down into a lit tray. */
.action-button:not([aria-disabled]):active .ico-key { rotate: -32deg; transition-duration: 140ms; }
.action-button:not([aria-disabled]):active .dl-arrow { translate: 0 4px; }
.action-button:not([aria-disabled]):active .ico-base .dl-tray { stroke: #fff; }
/* Unavailable options and loading placeholders: a faint, still icon. */
.action-button[aria-disabled="true"] .button-icon { color: #474747; }
.action-button[aria-disabled="true"] .ico-base { opacity: .14; }
.action-button[aria-disabled] .ico-glint { display: none; }
/* Reseller logos (Shop view): each shop's own logo sits in the corner like the icons, grey and dim at rest,
   in full colour on hover or keyboard focus, with the spotlight tinted to match. The label stays on top. */
.download-options.shop-options { width: 252px; }
.action-button[data-shop="wyv"] { --spot: 168 85 247; }
.action-button[data-shop="bloxproducts"] { --spot: 105 167 239; }
.shop-label { position: relative; z-index: 1; }
.shop-logo img {
  --rim: 0 0 0 transparent;
  --glow: 0 0 0 transparent;
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: .3;
  filter: grayscale(1) drop-shadow(var(--rim)) drop-shadow(var(--glow));
  transition: opacity 240ms var(--ease), filter 240ms var(--ease), rotate 420ms var(--ease), translate 420ms var(--ease);
}
/* The flask is mostly black: a thin light rim, as on BloxProducts' own artwork, keeps its outline on the dark button. */
[data-shop="bloxproducts"] .shop-logo img { --rim: 0 0 1px rgb(255 255 255 / .7); }
.action-button[data-shop]:focus-visible .shop-logo img { opacity: .95; filter: grayscale(0) drop-shadow(var(--rim)) drop-shadow(var(--glow)); translate: 0 -2px; }
.action-button[data-shop="wyv"]:focus-visible .shop-logo img { --glow: 0 0 10px rgb(168 85 247 / .5); rotate: -5deg; }
.action-button[data-shop="bloxproducts"]:focus-visible .shop-logo img { --rim: 0 0 1px rgb(255 255 255 / .95); --glow: 0 0 9px rgb(105 167 239 / .5); animation: swirl 760ms var(--ease); }
@media (hover: hover) {
  .action-button[data-shop]:hover .shop-logo img { opacity: .95; filter: grayscale(0) drop-shadow(var(--rim)) drop-shadow(var(--glow)); translate: 0 -2px; }
  .action-button[data-shop="wyv"]:hover .shop-logo img { --glow: 0 0 10px rgb(168 85 247 / .5); rotate: -5deg; }
  .action-button[data-shop="bloxproducts"]:hover .shop-logo img { --rim: 0 0 1px rgb(255 255 255 / .95); --glow: 0 0 9px rgb(105 167 239 / .5); animation: swirl 760ms var(--ease); }
}
.socials {
  position: relative;
  width: 184px;
  height: 52px;
  margin-top: 22px;
  display: flex;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 240ms var(--ease);
}
/* One highlight that glides between icons (React Bits Glide Select technique), tinted for the brand under it. */
.social-glide {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 52px;
  border-radius: 5px;
  background: rgb(255 255 255 / 5%);
  opacity: 0;
  pointer-events: none;
  transition: transform 240ms var(--ease), opacity 160ms ease, background-color 240ms var(--ease);
}
.social-glide[data-brand="youtube"] { background: rgb(255 0 0 / 9%); }
.social-glide[data-brand="discord"] { background: rgb(88 101 242 / 13%); }
.socials.is-gliding .social-glide { opacity: 1; }
.social-link {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #787878;
  text-decoration: none;
  transition: color 220ms var(--ease), scale 160ms var(--ease);
}
/* Monochrome at rest. On hover or focus the brand marks take their official colour and a soft glow
   (colour only: no comet, no slicing), and the shop bag stays monochrome with the comet glint. */
.social-link .ico { width: 21px; height: 21px; overflow: visible; transition: translate 220ms var(--ease), filter 220ms var(--ease); }
.ico-youtube, .ico-discord { fill: currentColor; }
.ico-youtube .yt-play { fill: #fff; opacity: 0; transition: opacity 220ms var(--ease); }
.ico-bag { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* The bag turns #d9d9d9 on hover, so a 1.5 white glint would vanish into it: run it thicker than the 1.75 stroke, with a halo. */
.social-link .ico-glint { stroke-width: 2.75; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 3px rgb(255 255 255 / .55)); }
/* Inset ring: the pill's edge no longer clips it. */
.social-link:focus-visible { outline-offset: -5px; color: var(--text); }
.social-link[data-brand="youtube"]:focus-visible { color: #ff0000; }
.social-link[data-brand="youtube"]:focus-visible .yt-play { opacity: 1; }
.social-link[data-brand="youtube"]:focus-visible .ico { translate: 0 -1px; filter: drop-shadow(0 0 8px rgb(255 0 0 / .35)); }
.social-link[data-brand="discord"]:focus-visible { color: #5865f2; }
.social-link[data-brand="discord"]:focus-visible .ico { translate: 0 -1px; filter: drop-shadow(0 0 8px rgb(88 101 242 / .4)); animation: dc 380ms var(--ease); }
.social-link[data-brand="shop"]:focus-visible .ico { translate: 0 -1.5px; }
.social-link[data-brand="shop"]:focus-visible .ico-glint { animation: glint 800ms var(--ease) both; }
.socials:has(.social-link:focus-visible) { border-color: #555; }
@media (hover: hover) {
  .socials:hover { border-color: #555; }
  .social-link:hover { color: var(--text); }
  .social-link[data-brand="youtube"]:hover { color: #ff0000; }
  .social-link[data-brand="youtube"]:hover .yt-play { opacity: 1; }
  .social-link[data-brand="youtube"]:hover .ico { translate: 0 -1px; filter: drop-shadow(0 0 8px rgb(255 0 0 / .35)); }
  .social-link[data-brand="discord"]:hover { color: #5865f2; }
  .social-link[data-brand="discord"]:hover .ico { translate: 0 -1px; filter: drop-shadow(0 0 8px rgb(88 101 242 / .4)); animation: dc 380ms var(--ease); }
  .social-link[data-brand="shop"]:hover .ico { translate: 0 -1.5px; }
  .social-link[data-brand="shop"]:hover .ico-glint { animation: glint 800ms var(--ease) both; }
}
.social-link:active { scale: .92; transition-duration: 220ms, 90ms; }
/* Label bubble for the icon-only links (React Bits Warm Tooltip timing, site palette). */
.tip {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  padding: 6px 10px;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  background: #1c1c1c;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(calc(var(--tip-x, -999px) - 50%), calc(var(--tip-y, -999px) - 4px)) scale(.94);
  transform-origin: 50% 0;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.tip.is-open { opacity: 1; transform: translate(calc(var(--tip-x) - 50%), var(--tip-y)); }
.tip.is-gliding { transition: opacity 160ms var(--ease), transform 240ms var(--ease); }
.footer {
  position: absolute;
  bottom: 82px;
  left: 24px;
  right: 24px;
  color: #505050;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
.legal-links a { color: var(--muted); text-decoration-color: #3a3a3a; text-underline-offset: 2px; transition: color 220ms var(--ease), text-decoration-color 220ms var(--ease); }
.legal-links a:hover, .legal-links a:focus-visible { color: var(--muted-hover); text-decoration-color: #777; }
.legal-links a:focus-visible { outline: 2px solid #bbb; outline-offset: 2px; border-radius: 2px; }
.legal-links .docs-link { color: #8a8a8a; text-decoration-color: #4a4a4a; }
.legal-links .docs-link:hover, .legal-links .docs-link:focus-visible { color: #b4b4b4; text-decoration-color: #858585; }
@media (pointer: coarse) {
  /* Bigger hit areas for fingers, same look. */
  .legal-links { row-gap: 8px; }
  .legal-links a { display: inline-block; padding: 4px; margin: -4px; }
}

/* Entrances: the logo comes into focus as the dot wave resolves (React Bits Blur Text, "focus"),
   then the controls rise in one after another (React Bits Animated Content). Reveals play once. */
.home .logo { animation: logo-focus 820ms var(--ease) 80ms backwards; }
.home .action-row, .home .socials, .home .footer { animation: rise-in 600ms var(--ease) backwards; animation-delay: calc(200ms + var(--i, 0) * 80ms); }
.home.is-return .logo { animation: rise-in 420ms var(--ease) backwards; }
.home.is-return .action-row, .home.is-return .socials, .home.is-return .footer { animation-duration: 420ms; animation-delay: calc(var(--i, 0) * 45ms); }
.screen.is-leaving, .screen.is-settling { pointer-events: none; }
.screen.is-leaving > * { opacity: 0; translate: 0 -4px; transition: opacity 120ms var(--ease), translate 120ms var(--ease); }

.downloads {
  display: grid;
  place-items: center;
  padding: 20px;
}
.download-content { display: flex; flex-direction: column; align-items: center; }
.download-title { margin: 0 0 28px; color: #e7e7e7; font-size: 20px; font-weight: 600; letter-spacing: -.5px; }
.download-title:focus { outline: none; }
.download-title .word { display: inline-block; animation: word-blur 560ms var(--ease) backwards; animation-delay: calc(var(--i) * 90ms); }
.download-options { width: 190px; display: grid; gap: 12px; }
.download-options .action-button { width: 100%; }
.download-options.is-entering > * { animation: rise-in 520ms var(--ease) backwards; animation-delay: calc(140ms + var(--i, 0) * 60ms); }
.download-options.is-settled > * { animation: settle 220ms var(--ease) backwards; }
/* Loading placeholders: a quiet fill sweeps in while the options load (React Bits Call Chip technique). */
.action-button.is-loading { cursor: progress; color: #4e4e4e; border-color: #232323; background: #131313; }
.action-button.is-loading .button-icon { color: #474747; }
.action-button.is-loading .ico-base { opacity: .14; }
.action-button.is-loading::before { opacity: 0; }
.download-options.is-waiting .action-button.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(217 217 217 / 5%);
  transform-origin: left center;
  animation: load-fill 1400ms cubic-bezier(.3, .7, .4, 1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.download-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.download-note .back { margin: 0; padding: 4px 6px; font-size: 13px; }
.back {
  margin-top: 14px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: #4a4a4a;
  text-underline-offset: 3px;
  transition: color 220ms var(--ease), text-decoration-color 220ms var(--ease);
  animation: rise-in 480ms var(--ease) 330ms backwards;
}
.back:hover, .back:focus-visible { color: var(--muted-hover); text-decoration-color: #777; }
.back:active { color: #c4c4c4; }

/* Legal pages: same canvas and type, now with structure and a readable measure. */
.legal-screen { min-height: 100svh; overflow: auto; }
.legal {
  position: relative;
  width: min(680px, calc(100% - 48px));
  margin: 0 auto;
  padding: 56px 0 88px;
}
.legal-back { display: inline-block; margin: 0 0 22px -14px; animation: none; }
.legal-back::before { content: '←'; display: inline-block; margin-right: .4em; }
.legal-title { margin: 0 0 18px; color: #e7e7e7; font-size: 24px; font-weight: 600; letter-spacing: -.5px; animation: rise-in 520ms var(--ease) backwards; }
.legal-title:focus { outline: none; }
.legal-copy {
  color: rgb(217 217 217 / 82%);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: break-word;
  user-select: text;
}
.legal-copy.is-ready { animation: rise-in 480ms var(--ease) backwards; }
.legal-copy p { margin: 0 0 12px; }
.legal-copy strong { color: #e2e2e2; font-weight: 600; }
.legal-copy h2 { margin: 34px 0 12px; color: #e7e7e7; font-size: 17px; font-weight: 600; letter-spacing: -.25px; }
.legal-copy ul { margin: 0 0 14px; padding-left: 20px; }
.legal-copy li { margin: 6px 0; }
.legal-copy li::marker { color: #6a6a6a; }
.legal-copy li > ul { margin: 6px 0 0; padding-left: 22px; list-style: circle; }
.legal-copy code { padding: .1em .35em; border: 1px solid #343434; border-radius: 4px; background: #1a1a1a; color: #e1e1e1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86em; }
.legal-meta { margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid #262626; color: #8a8a8a; font-size: 13px; }
.legal-meta p { margin: 0 0 2px; }
.legal-loading { color: var(--muted); }

@keyframes view-in { from { opacity: 0; transform: translateY(8px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; translate: 0 10px; } }
@keyframes logo-focus {
  0% { opacity: 0; filter: blur(8px); scale: 1.04; }
  70% { opacity: .95; filter: blur(.6px); scale: .998; }
  100% { opacity: 1; filter: blur(0); scale: 1; }
}
@keyframes word-blur {
  0% { opacity: 0; filter: blur(8px); translate: 0 -8px; }
  55% { opacity: .6; filter: blur(3px); translate: 0 1px; }
  100% { opacity: 1; filter: blur(0); translate: 0 0; }
}
@keyframes settle { from { opacity: .55; } }
@keyframes load-fill { from { transform: scaleX(0); } to { transform: scaleX(.9); } }
/* Icons: the comet glint along the strokes, the comet lap around the button border, and the per-icon moves. */
@keyframes glint {
  0% { stroke-dashoffset: .16; opacity: 0; }
  12%, 85% { opacity: .95; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes lap {
  0% { --lap: 0deg; opacity: 0; }
  12%, 80% { opacity: 1; }
  100% { --lap: 360deg; opacity: 0; }
}
@keyframes dl-drop { 40% { translate: 0 3px; } }
@keyframes lk-a { 45% { translate: 1.2px 0; } }
@keyframes lk-b { 45% { translate: -1.2px 0; } }
@keyframes zap { 0% { opacity: 1; } 20% { opacity: .35; } 40% { opacity: 1; } 60% { opacity: .55; } 80%, 100% { opacity: 1; } }
@keyframes dc { 30% { rotate: -6deg; } 65% { rotate: 5deg; } }
@keyframes swirl { 25% { rotate: 9deg; } 55% { rotate: -6deg; } 80% { rotate: 2deg; } }

@media (max-width: 560px) {
  .logo {
    top: calc(50% - min(36.535px, 9.2745vw) - 110px);
    width: min(260px, 66vw);
    height: min(73px, 28.105vw);
  }
  .actions { top: calc(50% + min(36.535px, 9.2745vw) - 72px); left: 20px; right: 20px; }
  .action-row { width: min(330px, 100%); flex-direction: column; gap: 12px; }
  .action-button { width: 100%; height: 52px; font-size: 21px; }
  .socials { margin-top: 18px; }
  .footer { bottom: 38px; }
  .legal-links { max-width: 330px; margin: 0 auto; }
  .download-options, .download-options.shop-options { width: min(330px, calc(100vw - 40px)); }
  .legal { padding-top: 36px; }
}
@media (max-width: 189px) { .action-button { font-size: 16px; } }
/* Short screens (landscape phones): stack the hero and let it scroll instead of overlapping the footer. */
@media (max-height: 470px) {
  .screen { overflow: visible; }
  .home { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 30px 20px; min-height: 100svh; justify-content: center; }
  .home .logo, .home .actions, .home .footer { position: static; transform: none; }
  .home .logo { width: min(220px, 60vw); height: auto; }
  .home .actions { left: auto; right: auto; align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  /* A complete, still page: no entrances, no slides, only instant state changes. */
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .screen.is-leaving > * { translate: none; }
  .action-button:not([aria-disabled]):active, .social-link:active { scale: 1; translate: none; }
  .download-options.is-waiting .action-button.is-loading::after { animation: none; transform: scaleX(.9); }
  /* Icons keep their colour and brand fills as instant changes; the comets and the moves are dropped. */
  .ico-glint, .action-button:not([aria-disabled])::after { display: none; }
  .ico, .ico *, .shop-logo img { animation: none !important; rotate: none !important; translate: none !important; }
}

/* Documentation */
.docs-body { min-height: 100vh; overflow-y: scroll; scrollbar-gutter: stable; background: #111; color: #d9d9d9; }
.docs-topography { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.docs-progress { position: fixed; z-index: 5; top: 0; left: 0; width: 0; height: 2px; opacity: 0; background: #cfcfcf; box-shadow: 0 0 10px rgb(255 255 255 / 24%); transition: width 260ms var(--ease), opacity 180ms ease; }
#docs-app.is-done .docs-progress { width: 100%; opacity: 0; transition: width 140ms var(--ease), opacity 220ms ease 120ms; }
#docs-app.is-resetting .docs-progress { transition: none; }
#docs-app.is-navigating .docs-progress { width: 72%; opacity: 1; }
.docs-header { position: sticky; top: 0; z-index: 3; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 28px; border-bottom: 1px solid rgb(48 48 48 / 78%); background: rgb(17 17 17 / 88%); backdrop-filter: blur(14px); }
.docs-wordmark { display: flex; width: 102px; }
.docs-wordmark img { width: 100%; height: auto; }
.docs-header-title { padding-left: 16px; border-left: 1px solid #353535; color: #aaa; font-size: 14px; font-weight: 600; transform: translateY(2px); }
.docs-menu { display: none; margin-left: auto; width: 38px; height: 36px; padding: 8px; border: 2px solid #303030; border-radius: 7px; background: #171717; color: #aaa; cursor: pointer; transition: border-color 220ms var(--ease), color 220ms var(--ease); }
.docs-menu:hover { border-color: #5b5b5b; color: #e3e3e3; }
.docs-menu span { display: block; width: 18px; height: 1.5px; border-radius: 999px; background: currentColor; transition: transform 180ms var(--ease), opacity 120ms ease; }
.docs-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.docs-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.docs-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.docs-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 236px minmax(0, 920px) 220px; width: 100%; min-height: calc(100vh - 64px); margin: 0; }
.docs-sidebar { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: scroll; scrollbar-gutter: stable; padding: 28px 28px 40px; border-right: 1px solid rgb(48 48 48 / 78%); background: rgb(18 18 18 / 86%); backdrop-filter: blur(10px); }
.docs-scrim { display: none; }
.docs-sidebar::-webkit-scrollbar-track { background: transparent; }
.docs-sidebar::-webkit-scrollbar-thumb { border-color: transparent; background-clip: content-box; }
.docs-sidebar-top { position: relative; margin-bottom: 20px; }
.docs-search-label { display: block; margin-bottom: 7px; color: #808080; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.docs-search-shell { position: relative; }
.docs-search-icon { position: absolute; z-index: 1; top: 50%; left: 11px; width: 12px; height: 12px; border: 1.5px solid #707070; border-radius: 50%; pointer-events: none; transform: translateY(-58%); }
.docs-search-icon::after { content: ''; position: absolute; right: -4px; bottom: -2px; width: 5px; height: 1.5px; border-radius: 2px; background: #707070; transform: rotate(45deg); }
.docs-search { width: 100%; padding: 9px 32px 9px 32px; border: 1px solid #363636; border-radius: 7px; outline: none; background: #171717; color: #ddd; font: inherit; font-size: 13px; transition: border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.docs-search::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
.docs-search:focus { border-color: #656565; background: #1a1a1a; box-shadow: 0 0 0 3px rgb(255 255 255 / 5%); }
.docs-search-clear { position: absolute; top: 50%; right: 6px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #dedede; cursor: pointer; transform: translateY(-50%); }
.docs-search-clear::before, .docs-search-clear::after { content: ''; position: absolute; top: 11px; left: 6px; width: 12px; height: 1.5px; border-radius: 2px; background: currentColor; }
.docs-search-clear::before { transform: rotate(45deg); }
.docs-search-clear::after { transform: rotate(-45deg); }
.docs-search-clear:hover { background: #292929; color: #fff; }
.docs-search-results { display: grid; gap: 4px; margin-top: 12px; }
.docs-search-results[hidden], .docs-search-clear[hidden] { display: none; }
.docs-search-state { padding: 12px 9px; color: #808080; font-size: 12px; line-height: 1.45; }
.docs-search-result { display: grid; min-width: 0; gap: 2px; padding: 9px; border: 1px solid transparent; border-radius: 7px; color: #bbb; text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; }
.docs-search-result:hover, .docs-search-result:focus { border-color: #3a3a3a; outline: 0; background: #202020; }
.docs-search-result:focus-visible { border-color: #6a6a6a; }
.docs-search-result-name { min-width: 0; overflow: hidden; color: #ededed; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.docs-search-result-name code { color: inherit; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.docs-search-result-summary { display: -webkit-box; overflow: hidden; color: #888; font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.docs-search-result-summary code { color: #aaa; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.docs-nav { display: grid; gap: 2px; }
.docs-nav[hidden] { display: none; }
.docs-nav-library { min-width: 0; }
.docs-nav-library-row { display: flex; align-items: center; min-width: 0; border: 1px solid transparent; border-radius: 6px; transition: color 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease); }
.docs-nav-library-row:hover { border-color: #2e2e2e; background: rgb(32 32 32 / 78%); }
.docs-nav-library-row.is-active { border-color: #393939; background: #202020; }
.docs-nav-link { flex: 1; min-width: 0; padding: 8px 9px; border-radius: 6px; color: #858585; font-size: 13px; line-height: 1.25; text-decoration: none; }
.docs-nav-library-row:hover .docs-nav-link { color: #ddd; }
.docs-nav-library-row.is-active .docs-nav-link { color: #f1f1f1; font-weight: 600; }
.docs-nav-toggle { width: 7px; height: 7px; margin-right: 10px; border-right: 1px solid #8d8d8d; border-bottom: 1px solid #8d8d8d; transform: rotate(-45deg); transition: transform 180ms var(--ease), border-color 180ms var(--ease); }
.docs-nav-library.is-expanded .docs-nav-toggle { transform: rotate(45deg) translateY(-2px); }
.docs-nav-library.is-active .docs-nav-toggle { border-color: #c9c9c9; }
.docs-nav-functions { display: grid; gap: 1px; max-height: 0; margin: 0 0 0 9px; padding: 0 0 0 10px; overflow: hidden; border-left: 1px solid transparent; opacity: 0; transform: translateY(-4px); transition: max-height 280ms var(--ease), margin 280ms var(--ease), padding 280ms var(--ease), border-color 180ms var(--ease), opacity 160ms ease, transform 180ms var(--ease); }
.docs-nav-library.is-expanded .docs-nav-functions { max-height: 7000px; margin: 1px 0 5px 9px; padding: 2px 0 2px 10px; border-color: #333; opacity: 1; transform: translateY(0); }
.docs-nav-function { display: block; overflow: hidden; padding: 5px 7px; border-radius: 5px; color: #7d7d7d; font-size: 11px; line-height: 1.3; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; transition: background-color 150ms ease, color 150ms ease; }
.docs-nav-function code { color: inherit; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: inherit; }
.docs-nav-function:hover { background: #202020; color: #d3d3d3; }
.docs-nav-function.is-active { background: #262626; color: #f0f0f0; }
.docs-content { min-width: 0; min-height: calc(100vh - 64px); margin: 0 28px; padding: 56px 42px 96px; background: rgb(17 17 17 / 46%); color: #cfcfcf; font-size: 15px; line-height: 1.7; }
.docs-loading { color: #777; }
.docs-breadcrumb { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: #808080; font-size: 12px; }
/* Prefixed with .docs-content so these beat the general .docs-content a / code rules below. */
.docs-content .docs-breadcrumb a, .docs-breadcrumb a { color: #969696; text-decoration: none; }
.docs-content .docs-breadcrumb a:hover, .docs-breadcrumb a:hover { color: #e1e1e1; text-decoration: underline; }
.docs-breadcrumb span { color: #555; }
.docs-content .docs-breadcrumb code, .docs-breadcrumb code { padding: 0; border: 0; background: transparent; color: #bcbcbc; font-size: inherit; }
.docs-content h1:focus { outline: none; }
/* Long dotted function names (ImGui.SetNextWindowSizeConstraints) break instead of pushing the page sideways on phones. */
.docs-content h1, .docs-content h2, .docs-content h3 { scroll-margin-top: 82px; color: #f0f0f0; line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
.docs-content h1 { margin: 0 0 12px; font-size: 34px; }
.docs-content h2 { margin: 54px 0 14px; padding-top: 4px; font-size: 22px; }
.docs-content h3 { margin: 30px 0 10px; color: #cfcfcf; font-size: 15px; letter-spacing: 0; }
.docs-content p { margin: 0 0 18px; }
.docs-content a { color: #e5e5e5; text-decoration-color: #626262; text-underline-offset: 3px; }
.docs-content a:hover { text-decoration-color: #ddd; }
.heading-anchor { margin-left: 8px; color: #7c7c7c !important; text-decoration: none; opacity: 0; font-size: .72em; vertical-align: middle; transition: opacity 150ms ease; }
.heading-anchor:focus-visible { opacity: 1; outline: 2px solid #bbb; outline-offset: 2px; border-radius: 2px; }
.docs-content h1:hover .heading-anchor, .docs-content h2:hover .heading-anchor, .docs-content h3:hover .heading-anchor { opacity: 1; }
.docs-content code { padding: .13em .34em; border: 1px solid #343434; border-radius: 4px; background: #1a1a1a; color: #e1e1e1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88em; }
.docs-content pre { margin: 16px 0 22px; padding: 15px 17px; overflow-x: auto; border: 1px solid #303030; border-radius: 8px; background: #151515; line-height: 1.55; }
.docs-content pre code { padding: 0; border: 0; background: none; font-size: 13px; }
.docs-code { position: relative; margin: 16px 0 24px; overflow: hidden; border: 1px solid #303030; border-radius: 8px; background: #151515; }
.docs-copy { position: absolute; z-index: 1; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; border: 1px solid #3a3a3a; border-radius: 5px; background: rgb(29 29 29 / 94%); color: #bcbcbc; cursor: pointer; font-size: 0; opacity: 0; transition: opacity 150ms ease, border-color 150ms ease, color 150ms ease, background-color 150ms ease; }
.docs-copy::before, .docs-copy::after { content: ''; position: absolute; width: 9px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; }
.docs-copy::before { top: 50%; left: 50%; transform: translate(-70%, -32%); }
.docs-copy::after { top: 50%; left: 50%; background: #1d1d1d; transform: translate(-30%, -68%); }
.docs-code:hover .docs-copy, .docs-code:focus-within .docs-copy { opacity: 1; }
@media (hover: none) { .docs-copy { opacity: .85; } }
.docs-copy:focus-visible { opacity: 1; outline: 2px solid #bbb; outline-offset: 2px; }
.docs-copy:hover { border-color: #686868; background: #252525; color: #f0f0f0; }
.docs-copy.is-copied { border-color: #52634b; background: #1d251b; color: #a8c996; }
.docs-copy.is-copied::before { width: 11px; height: 6px; border-width: 0 0 1.5px 1.5px; border-radius: 0; transform: translate(-50%, -62%) rotate(-45deg); }
.docs-copy.is-copied::after { display: none; }
.docs-code pre { margin: 0; padding-right: 54px; border: 0; border-radius: 0; background: transparent; }
.token-comment { color: #7f8a78; font-style: italic; }
.token-string { color: #9fbd87; }
.token-number { color: #c4a0c9; }
.token-keyword { color: #d6a86d; }
.token-builtin { color: #d9c68e; }
.token-function { color: #91b7d1; }
.docs-content ul { margin: 0 0 20px; padding-left: 22px; }
.docs-content li { margin: 4px 0; }
.docs-content .doc-callout-title { margin-bottom: 0; padding: 18px 20px 0; border: 1px solid #39434b; border-bottom: 0; border-radius: 7px 7px 0 0; background: #182025; color: #e0e7ec; font-size: 17px; }
.docs-content .doc-callout { margin: 0 0 28px; padding: 8px 20px 18px 38px; border: 1px solid #39434b; border-top: 0; border-radius: 0 0 7px 7px; background: #182025; color: #cbd5db; }
.docs-content hr { height: 1px; margin: 34px 0; border: 0; background: #303030; }
.doc-table-wrap { margin: 16px 0 23px; overflow-x: auto; border: 1px solid #303030; border-radius: 7px; }
.docs-content table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.docs-content th, .docs-content td { padding: 10px 12px; border-bottom: 1px solid #303030; text-align: left; vertical-align: top; }
.docs-content th { background: #1b1b1b; color: #dedede; font-size: 12px; font-weight: 600; }
.docs-content tbody tr:last-child td { border-bottom: 0; }
.docs-content tbody tr:hover { background: rgb(255 255 255 / 2%); }
.docs-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 72px; padding-top: 24px; border-top: 1px solid #2d2d2d; }
.docs-pager a { display: grid; gap: 2px; padding: 13px 15px; border: 1px solid #303030; border-radius: 8px; background: #171717; text-decoration: none; transition: border-color 180ms var(--ease), background-color 180ms var(--ease); }
.docs-pager a:hover { border-color: #515151; background: #1c1c1c; }
.docs-pager a:last-child { text-align: right; }
.docs-pager small { color: #808080; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.docs-pager span { color: #cfcfcf; font-size: 13px; }
.docs-toc { position: sticky; top: 64px; height: calc(100vh - 64px); padding: 36px 18px 40px 20px; overflow-y: auto; scrollbar-width: none; }
.docs-toc::-webkit-scrollbar { width: 0; height: 0; }
.docs-toc-title { margin-bottom: 12px; color: #808080; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.docs-toc-nav { display: grid; gap: 1px; border-left: 1px solid #303030; }
.docs-toc-link { margin-left: -1px; padding: 5px 8px 5px 12px; border-left: 1px solid transparent; overflow: hidden; color: #7d7d7d; font-size: 11px; line-height: 1.35; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; transition: color 150ms ease, border-color 150ms ease; }
.docs-toc-link:hover { color: #bcbcbc; }
.docs-toc-link.is-active { border-left-color: #b8b8b8; color: #d5d5d5; }
.docs-toc-link.level-1 { color: #a4a4a4; font-weight: 600; }
.docs-toc-link.level-3 { padding-left: 21px; }
.docs-toc-empty { padding-left: 12px; color: #7c7c7c; font-size: 11px; }
/* New page content settles in instead of popping (React Bits Fade Content, without gsap). */
.docs-content.is-entering > * { animation: docs-in 280ms var(--ease) backwards; }
@keyframes docs-in { from { opacity: 0; translate: 0 6px; } }
* { scrollbar-width: thin; scrollbar-color: #4a4a4a #151515; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #151515; }
*::-webkit-scrollbar-thumb { border: 3px solid #151515; border-radius: 999px; background: #4a4a4a; }
*::-webkit-scrollbar-thumb:hover { background: #666; }
*::-webkit-scrollbar-corner { background: #151515; }
@media (max-width: 1160px) {
  .docs-layout { grid-template-columns: 236px minmax(0, 900px); }
  .docs-toc { display: none; }
}
@media (max-width: 760px) {
  .docs-header { height: 56px; padding: 0 20px; }
  .docs-wordmark { width: 90px; }
  .docs-menu { display: grid; align-content: center; justify-content: center; gap: 3.5px; }
  .docs-layout { display: block; }
  .docs-sidebar { position: fixed; z-index: 2; top: 56px; left: 0; width: min(300px, calc(100vw - 36px)); height: calc(100vh - 56px); height: calc(100dvh - 56px); padding: 22px 20px; border-right: 1px solid #383838; background: rgb(18 18 18 / 96%); box-shadow: 14px 0 35px rgb(0 0 0 / 35%); transform: translateX(-105%); visibility: hidden; transition: transform 180ms var(--ease), visibility 0s linear 180ms; }
  .docs-sidebar.is-open { transform: translateX(0); visibility: visible; transition: transform 180ms var(--ease), visibility 0s; }
  .docs-scrim { display: block; position: fixed; z-index: 1; inset: 56px 0 0; background: rgb(0 0 0 / 35%); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
  .docs-sidebar.is-open + .docs-scrim { opacity: 1; pointer-events: auto; }
  .docs-content { margin: 0; padding: 36px 22px 70px; background: rgb(17 17 17 / 46%); font-size: 14px; }
  .docs-content h1 { font-size: 29px; }
  .docs-content h2 { margin-top: 42px; font-size: 21px; }
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager a:last-child { text-align: left; }
}