/* Custom cursor is rendered by glitch.js as an animated SVG overlay. */
* { cursor: none !important; }

/* ── Scrollbar ─────────────────────────────────────────────────────── */

/* WebKit / Blink (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
/* Scrollbars shrink on low-res screens (::-webkit-scrollbar ignores var(), so use
   media queries). !important is required to beat site-theme.css, which sets a 9px
   stippled scrollbar and is applied after this file. Track the --dw-res-scale curve. */
@media (max-width: 1200px) { ::-webkit-scrollbar, ::-webkit-scrollbar-button { width: 6px !important; height: 6px !important; } }
@media (max-width: 1024px) { ::-webkit-scrollbar, ::-webkit-scrollbar-button { width: 5px !important; height: 5px !important; } }
@media (max-width: 800px)  { ::-webkit-scrollbar, ::-webkit-scrollbar-button { width: 3px !important; height: 3px !important; } }
::-webkit-scrollbar-track {
  background-color: #080808;
  /* same dither tile as the page background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23080808'/%3E%3Crect width='1' height='1' x='0' y='0' fill='%23141414'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23141414'/%3E%3C/svg%3E");
  background-size: 4px 4px;
}
::-webkit-scrollbar-thumb {
  /* 2×2 Bayer checkerboard between dark green and bright green */
  background-color: #1e6630;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%231e6630'/%3E%3Crect width='1' height='1' x='0' y='0' fill='%2350c864'/%3E%3Crect width='1' height='1' x='1' y='1' fill='%2350c864'/%3E%3C/svg%3E");
  background-size: 2px 2px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #27793c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%2327793c'/%3E%3Crect width='1' height='1' x='0' y='0' fill='%2362d975'/%3E%3Crect width='1' height='1' x='1' y='1' fill='%2362d975'/%3E%3C/svg%3E");
  background-size: 2px 2px;
}
::-webkit-scrollbar-corner {
  background: #080808;
}

/* ── Consistent chrome scaling across every page ─────────────────────────────
   The fixed nav buttons and sound toggle live in each page's own <style>, so they
   used to scale inconsistently (the artifact page shrank them, others didn't).
   Scaling them here — off the global --dw-res-scale — keeps them identical on
   every subpage and shrinking together on low-res screens. */
.nav-panel { zoom: var(--dw-res-scale, 1); }
#soundToggle { zoom: var(--dw-res-scale, 1); }

/* Keep the glitch canvas (z-index:0, position:fixed) below all page content.
   Without this, static (non-positioned) elements fall behind any positioned z-index:0 element. */
.page, .login-box, .section, .form-grid, .back, .preview, .filename,
.site-layout, .main-col {
  position: relative;
  z-index: 1;
}

/* Firefox */
html, body {
  overflow-x: hidden;
}
html {
  scrollbar-width: thin;
  scrollbar-color: #50c864 #080808;
}