/* ---- Main site stylesheet (single source) ---- */
:root {
  --mc-void: #0f130d;
  --mc-night: #171d14;
  --mc-forest: #1f2a1a;
  --mc-stone: #2d352a;
  --mc-deepslate: #1e241c;
  --mc-dirt: #5b4028;
  --mc-dirt-dark: #45301f;
  --mc-grass: #72a84f;
  --mc-grass-dark: #4d7d34;
  --mc-grass-light: #8ec765;
  --mc-sand: #d4c18d;
  --mc-gold: #f6d57a;
  --mc-emerald: #4fd68e;
  --mc-redstone: #e35d5d;
  --mc-sky: #5ca4e8;
  --mc-water: #3f7eb5;
  --mc-lava: #db7738;
  --mc-text: #eef4e6;
  --mc-text-dim: #b8c7ad;
  --mc-text-dead: #8ea08a;
  --mc-border: #596a50;
  --mc-border-dark: #3d4838;
  --mc-panel-top: #2a3226;
  --mc-panel-bottom: #21291d;
  --mc-shadow: rgba(0, 0, 0, 0.45);
  --mc-inner-shadow: rgba(0, 0, 0, 0.35);
  --mc-glow: rgba(114, 168, 79, 0.35);
  --mc-focus: #d7e88c;
  --mc-radius: 0px;
  --mc-ease: cubic-bezier(0.22, 0.84, 0.24, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  image-rendering: pixelated;
}

body {
  position: relative;
  color: var(--mc-text);
  font-family: "VT323", monospace;
  letter-spacing: 0.22px;
  line-height: 1.28;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(88, 134, 64, 0.07), transparent 42%),
    linear-gradient(0deg, rgba(45, 53, 42, 0.75), rgba(23, 29, 20, 0.85)),
    radial-gradient(1600px 820px at 12% -16%, rgba(83, 148, 210, 0.2), transparent 64%),
    radial-gradient(1200px 700px at 88% -8%, rgba(131, 88, 50, 0.17), transparent 60%),
    linear-gradient(160deg, var(--mc-forest), var(--mc-night) 48%, var(--mc-void));
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -4;
}

body::before {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015) 0,
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.015) 0,
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: soft-light;
  opacity: 0.32;
  animation: pixelDrift 42s linear infinite;
}

body::after {
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 234, 183, 0.22), transparent 16%),
    radial-gradient(circle at 84% 16%, rgba(95, 165, 234, 0.22), transparent 20%),
    radial-gradient(circle at 46% 86%, rgba(92, 133, 74, 0.28), transparent 28%);
  filter: blur(34px) saturate(108%);
  opacity: 0.58;
  animation: skyPulse 16s var(--mc-ease) infinite alternate;
}

.mc-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.08) 0,
      rgba(0, 0, 0, 0.08) 2px,
      transparent 2px,
      transparent 7px
    );
  background-size: 16px 16px, 16px 16px, 40px 40px;
  animation: shaderGrid 21s linear infinite;
}

.hero {
  position: relative;
  border-bottom: 4px solid var(--mc-border);
  background:
    linear-gradient(180deg, rgba(51, 63, 46, 0.96), rgba(36, 43, 31, 0.95)),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.08) 0,
      rgba(0, 0, 0, 0.08) 4px,
      transparent 4px,
      transparent 8px
    );
  box-shadow:
    0 18px 34px var(--mc-shadow),
    inset 0 -4px 0 rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.hero::before {
  width: 640px;
  height: 280px;
  left: -120px;
  bottom: -120px;
  background:
    radial-gradient(ellipse at center, rgba(86, 140, 58, 0.35), rgba(86, 140, 58, 0));
  filter: blur(10px);
  animation: biomeFog 13s var(--mc-ease) infinite alternate;
}

.hero::after {
  width: 440px;
  height: 220px;
  right: -80px;
  top: -100px;
  background:
    radial-gradient(ellipse at center, rgba(255, 212, 141, 0.24), rgba(255, 212, 141, 0));
  filter: blur(8px);
  animation: lightSweep 12s var(--mc-ease) infinite alternate;
}

.container {
  width: min(1100px, calc(100% - 2.2rem));
  margin: 0 auto;
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 2.5rem 0 2.2rem;
  text-align: center;
}

.hero-title {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 2.4vw, 1.7rem);
  line-height: 1.6;
  letter-spacing: 0.4px;
  color: var(--mc-gold);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    2px 2px 0 rgba(0, 0, 0, 0.42),
    0 0 22px rgba(246, 213, 122, 0.22);
  animation: titleFlicker 6s steps(6, end) infinite;
}

.hero-sub {
  margin: 1rem auto 0;
  max-width: 760px;
  color: var(--mc-text-dim);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  line-height: 1.22;
  text-wrap: balance;
}

.hero-sub strong {
  color: var(--mc-text);
}

.pixel-nav {
  margin-top: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.64rem;
}

.pixel-link {
  --link-bg: #343f30;
  --link-bg-hover: #43523c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.48rem 0.82rem;
  text-decoration: none;
  color: var(--mc-text);
  font-size: 1.3rem;
  letter-spacing: 0.1px;
  border: 2px solid var(--mc-border-dark);
  outline: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.09)),
    var(--link-bg);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 0 rgba(0, 0, 0, 0.25);
  transition:
    transform 120ms var(--mc-ease),
    filter 120ms var(--mc-ease),
    border-color 120ms var(--mc-ease),
    background 120ms var(--mc-ease);
}

.pixel-link:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1)),
    var(--link-bg-hover);
  border-color: #6a7f5c;
  filter: saturate(106%);
}

.pixel-link:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 0 rgba(0, 0, 0, 0.2);
}

.pixel-link:focus-visible,
.pixel-btn:focus-visible,
.drop-zone:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mc-focus);
  outline-offset: 2px;
}

.pixel-link.active {
  color: #10210f;
  border-color: #396226;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(0, 0, 0, 0.12)),
    linear-gradient(180deg, var(--mc-grass-light), var(--mc-grass-dark));
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.2),
    0 6px 0 rgba(0, 0, 0, 0.24),
    0 0 16px rgba(114, 168, 79, 0.25);
}

.page {
  padding: 2.1rem 0 3.4rem;
}

.panel {
  position: relative;
  border: 3px solid var(--mc-border);
  border-radius: var(--mc-radius);
  padding: 1rem;
  background:
    linear-gradient(180deg, var(--mc-panel-top), var(--mc-panel-bottom));
  box-shadow:
    0 12px 24px var(--mc-shadow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 -4px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.01) 0,
      rgba(255, 255, 255, 0.01) 2px,
      transparent 2px,
      transparent 6px
    );
  opacity: 0.6;
}

.panel + .panel {
  margin-top: 1rem;
}

.section-title {
  margin: 0 0 0.88rem;
  font-family: "Press Start 2P", monospace;
  color: var(--mc-gold);
  font-size: clamp(0.75rem, 1.7vw, 1.1rem);
  line-height: 1.55;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

.drop-zone {
  position: relative;
  min-height: 156px;
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
  border: 3px dashed var(--mc-border);
  border-radius: var(--mc-radius);
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.03)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.015) 0,
      rgba(255, 255, 255, 0.015) 2px,
      transparent 2px,
      transparent 6px
    );
  transition:
    border-color 140ms var(--mc-ease),
    background 140ms var(--mc-ease),
    transform 140ms var(--mc-ease),
    box-shadow 140ms var(--mc-ease);
}

.drop-zone::before,
.drop-zone::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.drop-zone::before {
  inset: 0;
  background:
    radial-gradient(circle at 20% 26%, rgba(125, 189, 91, 0.13), transparent 24%),
    radial-gradient(circle at 78% 74%, rgba(96, 155, 225, 0.1), transparent 28%);
  opacity: 0;
  transition: opacity 180ms var(--mc-ease);
}

.drop-zone::after {
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.drop-zone:hover,
.drop-zone.dragover {
  border-color: #7fae60;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(143, 204, 102, 0.08)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 2px,
      transparent 2px,
      transparent 6px
    );
  box-shadow:
    0 0 0 2px rgba(140, 201, 104, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.32);
  transform: translateY(-1px);
}

.drop-zone:hover::before,
.drop-zone.dragover::before {
  opacity: 1;
}

.drop-zone p {
  margin: 0;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  color: var(--mc-text-dim);
}

.drop-zone code {
  color: var(--mc-gold);
}

.controls {
  margin-top: 0.92rem;
  display: flex;
  align-items: stretch;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.pixel-btn {
  position: relative;
  border: 2px solid #253120;
  border-radius: var(--mc-radius);
  padding: 0.82rem 1rem;
  min-width: 210px;
  min-height: 44px;
  font-family: "Press Start 2P", monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  color: #0f170a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, var(--mc-grass), var(--mc-grass-dark));
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 6px 0 rgba(0, 0, 0, 0.26);
  cursor: pointer;
  transition:
    transform 120ms var(--mc-ease),
    filter 120ms var(--mc-ease),
    box-shadow 120ms var(--mc-ease);
}

.pixel-btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.pixel-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05) saturate(1.08);
}

.pixel-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 3px 0 rgba(0, 0, 0, 0.24);
}

.pixel-btn:disabled {
  cursor: not-allowed;
  color: #344130;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, #7d9071, #5c6b55);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.2),
    0 4px 0 rgba(0, 0, 0, 0.2);
  filter: grayscale(0.32);
}

.file-pill {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 2px solid var(--mc-border-dark);
  border-radius: var(--mc-radius);
  padding: 0.5rem 0.7rem;
  color: var(--mc-text-dim);
  font-size: 1.27rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2)),
    #1c2218;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.status-line {
  margin-top: 0.78rem;
  color: var(--mc-text-dim);
  font-size: 1.24rem;
}

.status-line.error {
  color: #ffaeae;
}

.status-line.success {
  color: #b6f2a0;
}

.progress-wrap {
  position: relative;
  margin-top: 0.8rem;
  border: 2px solid var(--mc-border-dark);
  height: 32px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.33), rgba(255, 255, 255, 0.04)),
    #161b14;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.03),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}

.progress-bar {
  height: 100%;
  width: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.18)),
    repeating-linear-gradient(
      90deg,
      #9ad66d 0,
      #9ad66d 12px,
      #7db357 12px,
      #7db357 24px
    );
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 0 18px rgba(154, 214, 109, 0.35);
  transition: width 220ms var(--mc-ease);
}

.progress-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Press Start 2P", monospace;
  font-size: 0.62rem;
  color: #12200e;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 4px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.log-box {
  margin-top: 0.82rem;
  border: 2px solid var(--mc-border-dark);
  padding: 0.74rem;
  min-height: 120px;
  max-height: 270px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 1.11rem;
  line-height: 1.12;
  color: var(--mc-text-dim);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.18)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.016) 0,
      rgba(255, 255, 255, 0.016) 2px,
      transparent 2px,
      transparent 8px
    ),
    #11160f;
}

.log-box strong {
  color: var(--mc-gold);
}

.log-box::-webkit-scrollbar {
  width: 10px;
}

.log-box::-webkit-scrollbar-track {
  background: #161e14;
}

.log-box::-webkit-scrollbar-thumb {
  background: #4e6741;
  border: 2px solid #161e14;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}

.info-card {
  border: 2px solid var(--mc-border-dark);
  padding: 0.78rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.16)),
    #263022;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.2);
  transition: transform 140ms var(--mc-ease), border-color 140ms var(--mc-ease);
}

.info-card:hover {
  transform: translateY(-1px);
  border-color: #6f875f;
}

.info-card h3 {
  margin: 0 0 0.5rem;
  color: var(--mc-gold);
  font-family: "Press Start 2P", monospace;
  font-size: 0.62rem;
  line-height: 1.6;
  text-transform: uppercase;
}

.info-card p,
.info-card li {
  margin: 0;
  color: var(--mc-text-dim);
  font-size: 1.18rem;
}

.info-card ul,
.info-card ol {
  margin: 0;
  padding-left: 1.1rem;
}

.info-card code,
.drop-zone code,
.file-pill code,
.footer code,
.status-line code {
  font-family: "VT323", monospace;
  color: var(--mc-sand);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 0.22rem;
}

.footer {
  margin-top: 1rem;
  border-top: 3px solid var(--mc-border);
  padding: 0.9rem 0.9rem 1.3rem;
  text-align: center;
  color: var(--mc-text-dead);
  font-size: 1.12rem;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.28)),
    #1a2017;
}

.footer a {
  color: var(--mc-gold);
}

.error {
  color: #ffb1b1;
}

.success {
  color: #b8f0a8;
}

.muted {
  color: var(--mc-text-dead);
}

.glow {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 22px var(--mc-glow);
}

.texture-noise {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.012) 0,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 3px
    );
}

.scanline {
  position: relative;
}

.scanline::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(0, 0, 0, 0.08) 2px,
      rgba(0, 0, 0, 0.08) 4px
    );
}

.block-border {
  border: 3px solid var(--mc-border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.shade-stone {
  background: linear-gradient(180deg, #394137, #2c3429);
}

.shade-grass {
  background: linear-gradient(180deg, #86c762, #5f9342);
}

.shade-dirt {
  background: linear-gradient(180deg, #7a5636, #5c3f29);
}

.shade-water {
  background: linear-gradient(180deg, #5b99d0, #3b71a3);
}

.shade-lava {
  background: linear-gradient(180deg, #f08d48, #c8652b);
}

@media (max-width: 920px) {
  .hero-inner {
    padding: 2rem 0 1.8rem;
  }

  .pixel-link {
    font-size: 1.2rem;
  }

  .info-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100%, calc(100% - 1.1rem));
  }

  .hero-sub {
    font-size: clamp(1.2rem, 4vw, 1.45rem);
  }

  .controls {
    flex-direction: column;
  }

  .pixel-btn {
    width: 100%;
    min-width: 0;
  }

  .file-pill {
    width: 100%;
  }

  .drop-zone {
    min-height: 138px;
  }
}

@media (max-width: 520px) {
  .hero-inner {
    padding: 1.7rem 0 1.5rem;
  }

  .hero-title {
    line-height: 1.7;
  }

  .panel {
    padding: 0.76rem;
  }

  .section-title {
    line-height: 1.7;
  }

  .drop-zone p {
    font-size: 1.18rem;
  }

  .progress-text {
    font-size: 0.56rem;
  }
}

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

@keyframes pixelDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-4px, -2px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes shaderGrid {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }

  100% {
    background-position: 64px 32px, 32px 64px, 40px 0;
  }
}

@keyframes skyPulse {
  0% {
    opacity: 0.45;
    transform: scale(1);
  }

  100% {
    opacity: 0.62;
    transform: scale(1.07);
  }
}

@keyframes biomeFog {
  0% {
    transform: translateX(-10px) translateY(0);
    opacity: 0.7;
  }

  100% {
    transform: translateX(12px) translateY(-6px);
    opacity: 0.35;
  }
}

@keyframes lightSweep {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0.35;
  }

  100% {
    transform: translateX(-26px) translateY(8px);
    opacity: 0.6;
  }
}

@keyframes titleFlicker {
  0%,
  94%,
  100% {
    opacity: 1;
  }

  95% {
    opacity: 0.9;
  }

  96% {
    opacity: 0.98;
  }

  97% {
    opacity: 0.9;
  }
}

/* Shader helper overlays */
.shader-aurora {
  position: relative;
  overflow: hidden;
}

.shader-aurora::before,
.shader-aurora::after {
  content: "";
  position: absolute;
  inset: -25%;
  pointer-events: none;
}

.shader-aurora::before {
  background:
    radial-gradient(circle at 30% 20%, rgba(103, 173, 84, 0.24), transparent 28%),
    radial-gradient(circle at 75% 78%, rgba(88, 139, 213, 0.2), transparent 30%);
  filter: blur(24px);
  animation: auroraA 14s ease-in-out infinite alternate;
}

.shader-aurora::after {
  background:
    radial-gradient(circle at 80% 20%, rgba(251, 210, 125, 0.16), transparent 26%),
    radial-gradient(circle at 16% 82%, rgba(87, 170, 120, 0.16), transparent 28%);
  filter: blur(20px);
  animation: auroraB 17s ease-in-out infinite alternate;
}

@keyframes auroraA {
  0% {
    transform: translateX(-2%) translateY(0) scale(1);
  }

  100% {
    transform: translateX(5%) translateY(-3%) scale(1.06);
  }
}

@keyframes auroraB {
  0% {
    transform: translateX(3%) translateY(2%) scale(1);
  }

  100% {
    transform: translateX(-4%) translateY(-2%) scale(1.04);
  }
}

/* Structural utility classes used by extended pages */
.stack {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

.row.wrap {
  flex-wrap: wrap;
}

.row.between {
  justify-content: space-between;
}

.center {
  display: grid;
  place-items: center;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.round {
  border-radius: 999px;
}

.no-select {
  user-select: none;
}

.clickable {
  cursor: pointer;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

/* Extended utility scale for advanced pixel composition */
.m-0 { margin: 0rem; }
.mt-0 { margin-top: 0rem; }
.mr-0 { margin-right: 0rem; }
.mb-0 { margin-bottom: 0rem; }
.ml-0 { margin-left: 0rem; }
.mx-0 { margin-left: 0rem; margin-right: 0rem; }
.my-0 { margin-top: 0rem; margin-bottom: 0rem; }
.p-0 { padding: 0rem; }
.pt-0 { padding-top: 0rem; }
.pr-0 { padding-right: 0rem; }
.pb-0 { padding-bottom: 0rem; }
.pl-0 { padding-left: 0rem; }
.px-0 { padding-left: 0rem; padding-right: 0rem; }
.py-0 { padding-top: 0rem; padding-bottom: 0rem; }
.m-1 { margin: 0.125rem; }
.mt-1 { margin-top: 0.125rem; }
.mr-1 { margin-right: 0.125rem; }
.mb-1 { margin-bottom: 0.125rem; }
.ml-1 { margin-left: 0.125rem; }
.mx-1 { margin-left: 0.125rem; margin-right: 0.125rem; }
.my-1 { margin-top: 0.125rem; margin-bottom: 0.125rem; }
.p-1 { padding: 0.125rem; }
.pt-1 { padding-top: 0.125rem; }
.pr-1 { padding-right: 0.125rem; }
.pb-1 { padding-bottom: 0.125rem; }
.pl-1 { padding-left: 0.125rem; }
.px-1 { padding-left: 0.125rem; padding-right: 0.125rem; }
.py-1 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.m-2 { margin: 0.25rem; }
.mt-2 { margin-top: 0.25rem; }
.mr-2 { margin-right: 0.25rem; }
.mb-2 { margin-bottom: 0.25rem; }
.ml-2 { margin-left: 0.25rem; }
.mx-2 { margin-left: 0.25rem; margin-right: 0.25rem; }
.my-2 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.p-2 { padding: 0.25rem; }
.pt-2 { padding-top: 0.25rem; }
.pr-2 { padding-right: 0.25rem; }
.pb-2 { padding-bottom: 0.25rem; }
.pl-2 { padding-left: 0.25rem; }
.px-2 { padding-left: 0.25rem; padding-right: 0.25rem; }
.py-2 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.m-3 { margin: 0.375rem; }
.mt-3 { margin-top: 0.375rem; }
.mr-3 { margin-right: 0.375rem; }
.mb-3 { margin-bottom: 0.375rem; }
.ml-3 { margin-left: 0.375rem; }
.mx-3 { margin-left: 0.375rem; margin-right: 0.375rem; }
.my-3 { margin-top: 0.375rem; margin-bottom: 0.375rem; }
.p-3 { padding: 0.375rem; }
.pt-3 { padding-top: 0.375rem; }
.pr-3 { padding-right: 0.375rem; }
.pb-3 { padding-bottom: 0.375rem; }
.pl-3 { padding-left: 0.375rem; }
.px-3 { padding-left: 0.375rem; padding-right: 0.375rem; }
.py-3 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.m-4 { margin: 0.5rem; }
.mt-4 { margin-top: 0.5rem; }
.mr-4 { margin-right: 0.5rem; }
.mb-4 { margin-bottom: 0.5rem; }
.ml-4 { margin-left: 0.5rem; }
.mx-4 { margin-left: 0.5rem; margin-right: 0.5rem; }
.my-4 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.p-4 { padding: 0.5rem; }
.pt-4 { padding-top: 0.5rem; }
.pr-4 { padding-right: 0.5rem; }
.pb-4 { padding-bottom: 0.5rem; }
.pl-4 { padding-left: 0.5rem; }
.px-4 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-4 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.m-5 { margin: 0.625rem; }
.mt-5 { margin-top: 0.625rem; }
.mr-5 { margin-right: 0.625rem; }
.mb-5 { margin-bottom: 0.625rem; }
.ml-5 { margin-left: 0.625rem; }
.mx-5 { margin-left: 0.625rem; margin-right: 0.625rem; }
.my-5 { margin-top: 0.625rem; margin-bottom: 0.625rem; }
.p-5 { padding: 0.625rem; }
.pt-5 { padding-top: 0.625rem; }
.pr-5 { padding-right: 0.625rem; }
.pb-5 { padding-bottom: 0.625rem; }
.pl-5 { padding-left: 0.625rem; }
.px-5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.m-6 { margin: 0.75rem; }
.mt-6 { margin-top: 0.75rem; }
.mr-6 { margin-right: 0.75rem; }
.mb-6 { margin-bottom: 0.75rem; }
.ml-6 { margin-left: 0.75rem; }
.mx-6 { margin-left: 0.75rem; margin-right: 0.75rem; }
.my-6 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.p-6 { padding: 0.75rem; }
.pt-6 { padding-top: 0.75rem; }
.pr-6 { padding-right: 0.75rem; }
.pb-6 { padding-bottom: 0.75rem; }
.pl-6 { padding-left: 0.75rem; }
.px-6 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-6 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.m-7 { margin: 0.875rem; }
.mt-7 { margin-top: 0.875rem; }
.mr-7 { margin-right: 0.875rem; }
.mb-7 { margin-bottom: 0.875rem; }
.ml-7 { margin-left: 0.875rem; }
.mx-7 { margin-left: 0.875rem; margin-right: 0.875rem; }
.my-7 { margin-top: 0.875rem; margin-bottom: 0.875rem; }
.p-7 { padding: 0.875rem; }
.pt-7 { padding-top: 0.875rem; }
.pr-7 { padding-right: 0.875rem; }
.pb-7 { padding-bottom: 0.875rem; }
.pl-7 { padding-left: 0.875rem; }
.px-7 { padding-left: 0.875rem; padding-right: 0.875rem; }
.py-7 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.m-8 { margin: 1rem; }
.mt-8 { margin-top: 1rem; }
.mr-8 { margin-right: 1rem; }
.mb-8 { margin-bottom: 1rem; }
.ml-8 { margin-left: 1rem; }
.mx-8 { margin-left: 1rem; margin-right: 1rem; }
.my-8 { margin-top: 1rem; margin-bottom: 1rem; }
.p-8 { padding: 1rem; }
.pt-8 { padding-top: 1rem; }
.pr-8 { padding-right: 1rem; }
.pb-8 { padding-bottom: 1rem; }
.pl-8 { padding-left: 1rem; }
.px-8 { padding-left: 1rem; padding-right: 1rem; }
.py-8 { padding-top: 1rem; padding-bottom: 1rem; }
.m-9 { margin: 1.125rem; }
.mt-9 { margin-top: 1.125rem; }
.mr-9 { margin-right: 1.125rem; }
.mb-9 { margin-bottom: 1.125rem; }
.ml-9 { margin-left: 1.125rem; }
.mx-9 { margin-left: 1.125rem; margin-right: 1.125rem; }
.my-9 { margin-top: 1.125rem; margin-bottom: 1.125rem; }
.p-9 { padding: 1.125rem; }
.pt-9 { padding-top: 1.125rem; }
.pr-9 { padding-right: 1.125rem; }
.pb-9 { padding-bottom: 1.125rem; }
.pl-9 { padding-left: 1.125rem; }
.px-9 { padding-left: 1.125rem; padding-right: 1.125rem; }
.py-9 { padding-top: 1.125rem; padding-bottom: 1.125rem; }
.m-10 { margin: 1.25rem; }
.mt-10 { margin-top: 1.25rem; }
.mr-10 { margin-right: 1.25rem; }
.mb-10 { margin-bottom: 1.25rem; }
.ml-10 { margin-left: 1.25rem; }
.mx-10 { margin-left: 1.25rem; margin-right: 1.25rem; }
.my-10 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.p-10 { padding: 1.25rem; }
.pt-10 { padding-top: 1.25rem; }
.pr-10 { padding-right: 1.25rem; }
.pb-10 { padding-bottom: 1.25rem; }
.pl-10 { padding-left: 1.25rem; }
.px-10 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-10 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.m-11 { margin: 1.375rem; }
.mt-11 { margin-top: 1.375rem; }
.mr-11 { margin-right: 1.375rem; }
.mb-11 { margin-bottom: 1.375rem; }
.ml-11 { margin-left: 1.375rem; }
.mx-11 { margin-left: 1.375rem; margin-right: 1.375rem; }
.my-11 { margin-top: 1.375rem; margin-bottom: 1.375rem; }
.p-11 { padding: 1.375rem; }
.pt-11 { padding-top: 1.375rem; }
.pr-11 { padding-right: 1.375rem; }
.pb-11 { padding-bottom: 1.375rem; }
.pl-11 { padding-left: 1.375rem; }
.px-11 { padding-left: 1.375rem; padding-right: 1.375rem; }
.py-11 { padding-top: 1.375rem; padding-bottom: 1.375rem; }
.m-12 { margin: 1.5rem; }
.mt-12 { margin-top: 1.5rem; }
.mr-12 { margin-right: 1.5rem; }
.mb-12 { margin-bottom: 1.5rem; }
.ml-12 { margin-left: 1.5rem; }
.mx-12 { margin-left: 1.5rem; margin-right: 1.5rem; }
.my-12 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.p-12 { padding: 1.5rem; }
.pt-12 { padding-top: 1.5rem; }
.pr-12 { padding-right: 1.5rem; }
.pb-12 { padding-bottom: 1.5rem; }
.pl-12 { padding-left: 1.5rem; }
.px-12 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-12 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.m-13 { margin: 1.625rem; }
.mt-13 { margin-top: 1.625rem; }
.mr-13 { margin-right: 1.625rem; }
.mb-13 { margin-bottom: 1.625rem; }
.ml-13 { margin-left: 1.625rem; }
.mx-13 { margin-left: 1.625rem; margin-right: 1.625rem; }
.my-13 { margin-top: 1.625rem; margin-bottom: 1.625rem; }
.p-13 { padding: 1.625rem; }
.pt-13 { padding-top: 1.625rem; }
.pr-13 { padding-right: 1.625rem; }
.pb-13 { padding-bottom: 1.625rem; }
.pl-13 { padding-left: 1.625rem; }
.px-13 { padding-left: 1.625rem; padding-right: 1.625rem; }
.py-13 { padding-top: 1.625rem; padding-bottom: 1.625rem; }
.m-14 { margin: 1.75rem; }
.mt-14 { margin-top: 1.75rem; }
.mr-14 { margin-right: 1.75rem; }
.mb-14 { margin-bottom: 1.75rem; }
.ml-14 { margin-left: 1.75rem; }
.mx-14 { margin-left: 1.75rem; margin-right: 1.75rem; }
.my-14 { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.p-14 { padding: 1.75rem; }
.pt-14 { padding-top: 1.75rem; }
.pr-14 { padding-right: 1.75rem; }
.pb-14 { padding-bottom: 1.75rem; }
.pl-14 { padding-left: 1.75rem; }
.px-14 { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-14 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.m-15 { margin: 1.875rem; }
.mt-15 { margin-top: 1.875rem; }
.mr-15 { margin-right: 1.875rem; }
.mb-15 { margin-bottom: 1.875rem; }
.ml-15 { margin-left: 1.875rem; }
.mx-15 { margin-left: 1.875rem; margin-right: 1.875rem; }
.my-15 { margin-top: 1.875rem; margin-bottom: 1.875rem; }
.p-15 { padding: 1.875rem; }
.pt-15 { padding-top: 1.875rem; }
.pr-15 { padding-right: 1.875rem; }
.pb-15 { padding-bottom: 1.875rem; }
.pl-15 { padding-left: 1.875rem; }
.px-15 { padding-left: 1.875rem; padding-right: 1.875rem; }
.py-15 { padding-top: 1.875rem; padding-bottom: 1.875rem; }
.m-16 { margin: 2rem; }
.mt-16 { margin-top: 2rem; }
.mr-16 { margin-right: 2rem; }
.mb-16 { margin-bottom: 2rem; }
.ml-16 { margin-left: 2rem; }
.mx-16 { margin-left: 2rem; margin-right: 2rem; }
.my-16 { margin-top: 2rem; margin-bottom: 2rem; }
.p-16 { padding: 2rem; }
.pt-16 { padding-top: 2rem; }
.pr-16 { padding-right: 2rem; }
.pb-16 { padding-bottom: 2rem; }
.pl-16 { padding-left: 2rem; }
.px-16 { padding-left: 2rem; padding-right: 2rem; }
.py-16 { padding-top: 2rem; padding-bottom: 2rem; }
.m-17 { margin: 2.125rem; }
.mt-17 { margin-top: 2.125rem; }
.mr-17 { margin-right: 2.125rem; }
.mb-17 { margin-bottom: 2.125rem; }
.ml-17 { margin-left: 2.125rem; }
.mx-17 { margin-left: 2.125rem; margin-right: 2.125rem; }
.my-17 { margin-top: 2.125rem; margin-bottom: 2.125rem; }
.p-17 { padding: 2.125rem; }
.pt-17 { padding-top: 2.125rem; }
.pr-17 { padding-right: 2.125rem; }
.pb-17 { padding-bottom: 2.125rem; }
.pl-17 { padding-left: 2.125rem; }
.px-17 { padding-left: 2.125rem; padding-right: 2.125rem; }
.py-17 { padding-top: 2.125rem; padding-bottom: 2.125rem; }
.m-18 { margin: 2.25rem; }
.mt-18 { margin-top: 2.25rem; }
.mr-18 { margin-right: 2.25rem; }
.mb-18 { margin-bottom: 2.25rem; }
.ml-18 { margin-left: 2.25rem; }
.mx-18 { margin-left: 2.25rem; margin-right: 2.25rem; }
.my-18 { margin-top: 2.25rem; margin-bottom: 2.25rem; }
.p-18 { padding: 2.25rem; }
.pt-18 { padding-top: 2.25rem; }
.pr-18 { padding-right: 2.25rem; }
.pb-18 { padding-bottom: 2.25rem; }
.pl-18 { padding-left: 2.25rem; }
.px-18 { padding-left: 2.25rem; padding-right: 2.25rem; }
.py-18 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.m-19 { margin: 2.375rem; }
.mt-19 { margin-top: 2.375rem; }
.mr-19 { margin-right: 2.375rem; }
.mb-19 { margin-bottom: 2.375rem; }
.ml-19 { margin-left: 2.375rem; }
.mx-19 { margin-left: 2.375rem; margin-right: 2.375rem; }
.my-19 { margin-top: 2.375rem; margin-bottom: 2.375rem; }
.p-19 { padding: 2.375rem; }
.pt-19 { padding-top: 2.375rem; }
.pr-19 { padding-right: 2.375rem; }
.pb-19 { padding-bottom: 2.375rem; }
.pl-19 { padding-left: 2.375rem; }
.px-19 { padding-left: 2.375rem; padding-right: 2.375rem; }
.py-19 { padding-top: 2.375rem; padding-bottom: 2.375rem; }
.m-20 { margin: 2.5rem; }
.mt-20 { margin-top: 2.5rem; }
.mr-20 { margin-right: 2.5rem; }
.mb-20 { margin-bottom: 2.5rem; }
.ml-20 { margin-left: 2.5rem; }
.mx-20 { margin-left: 2.5rem; margin-right: 2.5rem; }
.my-20 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.p-20 { padding: 2.5rem; }
.pt-20 { padding-top: 2.5rem; }
.pr-20 { padding-right: 2.5rem; }
.pb-20 { padding-bottom: 2.5rem; }
.pl-20 { padding-left: 2.5rem; }
.px-20 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-20 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.m-21 { margin: 2.625rem; }
.mt-21 { margin-top: 2.625rem; }
.mr-21 { margin-right: 2.625rem; }
.mb-21 { margin-bottom: 2.625rem; }
.ml-21 { margin-left: 2.625rem; }
.mx-21 { margin-left: 2.625rem; margin-right: 2.625rem; }
.my-21 { margin-top: 2.625rem; margin-bottom: 2.625rem; }
.p-21 { padding: 2.625rem; }
.pt-21 { padding-top: 2.625rem; }
.pr-21 { padding-right: 2.625rem; }
.pb-21 { padding-bottom: 2.625rem; }
.pl-21 { padding-left: 2.625rem; }
.px-21 { padding-left: 2.625rem; padding-right: 2.625rem; }
.py-21 { padding-top: 2.625rem; padding-bottom: 2.625rem; }
.m-22 { margin: 2.75rem; }
.mt-22 { margin-top: 2.75rem; }
.mr-22 { margin-right: 2.75rem; }
.mb-22 { margin-bottom: 2.75rem; }
.ml-22 { margin-left: 2.75rem; }
.mx-22 { margin-left: 2.75rem; margin-right: 2.75rem; }
.my-22 { margin-top: 2.75rem; margin-bottom: 2.75rem; }
.p-22 { padding: 2.75rem; }
.pt-22 { padding-top: 2.75rem; }
.pr-22 { padding-right: 2.75rem; }
.pb-22 { padding-bottom: 2.75rem; }
.pl-22 { padding-left: 2.75rem; }
.px-22 { padding-left: 2.75rem; padding-right: 2.75rem; }
.py-22 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.m-23 { margin: 2.875rem; }
.mt-23 { margin-top: 2.875rem; }
.mr-23 { margin-right: 2.875rem; }
.mb-23 { margin-bottom: 2.875rem; }
.ml-23 { margin-left: 2.875rem; }
.mx-23 { margin-left: 2.875rem; margin-right: 2.875rem; }
.my-23 { margin-top: 2.875rem; margin-bottom: 2.875rem; }
.p-23 { padding: 2.875rem; }
.pt-23 { padding-top: 2.875rem; }
.pr-23 { padding-right: 2.875rem; }
.pb-23 { padding-bottom: 2.875rem; }
.pl-23 { padding-left: 2.875rem; }
.px-23 { padding-left: 2.875rem; padding-right: 2.875rem; }
.py-23 { padding-top: 2.875rem; padding-bottom: 2.875rem; }
.m-24 { margin: 3rem; }
.mt-24 { margin-top: 3rem; }
.mr-24 { margin-right: 3rem; }
.mb-24 { margin-bottom: 3rem; }
.ml-24 { margin-left: 3rem; }
.mx-24 { margin-left: 3rem; margin-right: 3rem; }
.my-24 { margin-top: 3rem; margin-bottom: 3rem; }
.p-24 { padding: 3rem; }
.pt-24 { padding-top: 3rem; }
.pr-24 { padding-right: 3rem; }
.pb-24 { padding-bottom: 3rem; }
.pl-24 { padding-left: 3rem; }
.px-24 { padding-left: 3rem; padding-right: 3rem; }
.py-24 { padding-top: 3rem; padding-bottom: 3rem; }
.m-25 { margin: 3.125rem; }
.mt-25 { margin-top: 3.125rem; }
.mr-25 { margin-right: 3.125rem; }
.mb-25 { margin-bottom: 3.125rem; }
.ml-25 { margin-left: 3.125rem; }
.mx-25 { margin-left: 3.125rem; margin-right: 3.125rem; }
.my-25 { margin-top: 3.125rem; margin-bottom: 3.125rem; }
.p-25 { padding: 3.125rem; }
.pt-25 { padding-top: 3.125rem; }
.pr-25 { padding-right: 3.125rem; }
.pb-25 { padding-bottom: 3.125rem; }
.pl-25 { padding-left: 3.125rem; }
.px-25 { padding-left: 3.125rem; padding-right: 3.125rem; }
.py-25 { padding-top: 3.125rem; padding-bottom: 3.125rem; }
.m-26 { margin: 3.25rem; }
.mt-26 { margin-top: 3.25rem; }
.mr-26 { margin-right: 3.25rem; }
.mb-26 { margin-bottom: 3.25rem; }
.ml-26 { margin-left: 3.25rem; }
.mx-26 { margin-left: 3.25rem; margin-right: 3.25rem; }
.my-26 { margin-top: 3.25rem; margin-bottom: 3.25rem; }
.p-26 { padding: 3.25rem; }
.pt-26 { padding-top: 3.25rem; }
.pr-26 { padding-right: 3.25rem; }
.pb-26 { padding-bottom: 3.25rem; }
.pl-26 { padding-left: 3.25rem; }
.px-26 { padding-left: 3.25rem; padding-right: 3.25rem; }
.py-26 { padding-top: 3.25rem; padding-bottom: 3.25rem; }
.m-27 { margin: 3.375rem; }
.mt-27 { margin-top: 3.375rem; }
.mr-27 { margin-right: 3.375rem; }
.mb-27 { margin-bottom: 3.375rem; }
.ml-27 { margin-left: 3.375rem; }
.mx-27 { margin-left: 3.375rem; margin-right: 3.375rem; }
.my-27 { margin-top: 3.375rem; margin-bottom: 3.375rem; }
.p-27 { padding: 3.375rem; }
.pt-27 { padding-top: 3.375rem; }
.pr-27 { padding-right: 3.375rem; }
.pb-27 { padding-bottom: 3.375rem; }
.pl-27 { padding-left: 3.375rem; }
.px-27 { padding-left: 3.375rem; padding-right: 3.375rem; }
.py-27 { padding-top: 3.375rem; padding-bottom: 3.375rem; }
.m-28 { margin: 3.5rem; }
.mt-28 { margin-top: 3.5rem; }
.mr-28 { margin-right: 3.5rem; }
.mb-28 { margin-bottom: 3.5rem; }
.ml-28 { margin-left: 3.5rem; }
.mx-28 { margin-left: 3.5rem; margin-right: 3.5rem; }
.my-28 { margin-top: 3.5rem; margin-bottom: 3.5rem; }
.p-28 { padding: 3.5rem; }
.pt-28 { padding-top: 3.5rem; }
.pr-28 { padding-right: 3.5rem; }
.pb-28 { padding-bottom: 3.5rem; }
.pl-28 { padding-left: 3.5rem; }
.px-28 { padding-left: 3.5rem; padding-right: 3.5rem; }
.py-28 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.m-29 { margin: 3.625rem; }
.mt-29 { margin-top: 3.625rem; }
.mr-29 { margin-right: 3.625rem; }
.mb-29 { margin-bottom: 3.625rem; }
.ml-29 { margin-left: 3.625rem; }
.mx-29 { margin-left: 3.625rem; margin-right: 3.625rem; }
.my-29 { margin-top: 3.625rem; margin-bottom: 3.625rem; }
.p-29 { padding: 3.625rem; }
.pt-29 { padding-top: 3.625rem; }
.pr-29 { padding-right: 3.625rem; }
.pb-29 { padding-bottom: 3.625rem; }
.pl-29 { padding-left: 3.625rem; }
.px-29 { padding-left: 3.625rem; padding-right: 3.625rem; }
.py-29 { padding-top: 3.625rem; padding-bottom: 3.625rem; }
.m-30 { margin: 3.75rem; }
.mt-30 { margin-top: 3.75rem; }
.mr-30 { margin-right: 3.75rem; }
.mb-30 { margin-bottom: 3.75rem; }
.ml-30 { margin-left: 3.75rem; }
.mx-30 { margin-left: 3.75rem; margin-right: 3.75rem; }
.my-30 { margin-top: 3.75rem; margin-bottom: 3.75rem; }
.p-30 { padding: 3.75rem; }
.pt-30 { padding-top: 3.75rem; }
.pr-30 { padding-right: 3.75rem; }
.pb-30 { padding-bottom: 3.75rem; }
.pl-30 { padding-left: 3.75rem; }
.px-30 { padding-left: 3.75rem; padding-right: 3.75rem; }
.py-30 { padding-top: 3.75rem; padding-bottom: 3.75rem; }

/* Width and height pixel scale */
.w-1 { width: 6px; }
.h-1 { height: 6px; }
.min-w-1 { min-width: 6px; }
.min-h-1 { min-height: 6px; }
.max-w-1 { max-width: 6px; }
.max-h-1 { max-height: 6px; }
.w-2 { width: 12px; }
.h-2 { height: 12px; }
.min-w-2 { min-width: 12px; }
.min-h-2 { min-height: 12px; }
.max-w-2 { max-width: 12px; }
.max-h-2 { max-height: 12px; }
.w-3 { width: 18px; }
.h-3 { height: 18px; }
.min-w-3 { min-width: 18px; }
.min-h-3 { min-height: 18px; }
.max-w-3 { max-width: 18px; }
.max-h-3 { max-height: 18px; }
.w-4 { width: 24px; }
.h-4 { height: 24px; }
.min-w-4 { min-width: 24px; }
.min-h-4 { min-height: 24px; }
.max-w-4 { max-width: 24px; }
.max-h-4 { max-height: 24px; }
.w-5 { width: 30px; }
.h-5 { height: 30px; }
.min-w-5 { min-width: 30px; }
.min-h-5 { min-height: 30px; }
.max-w-5 { max-width: 30px; }
.max-h-5 { max-height: 30px; }
.w-6 { width: 36px; }
.h-6 { height: 36px; }
.min-w-6 { min-width: 36px; }
.min-h-6 { min-height: 36px; }
.max-w-6 { max-width: 36px; }
.max-h-6 { max-height: 36px; }
.w-7 { width: 42px; }
.h-7 { height: 42px; }
.min-w-7 { min-width: 42px; }
.min-h-7 { min-height: 42px; }
.max-w-7 { max-width: 42px; }
.max-h-7 { max-height: 42px; }
.w-8 { width: 48px; }
.h-8 { height: 48px; }
.min-w-8 { min-width: 48px; }
.min-h-8 { min-height: 48px; }
.max-w-8 { max-width: 48px; }
.max-h-8 { max-height: 48px; }
.w-9 { width: 54px; }
.h-9 { height: 54px; }
.min-w-9 { min-width: 54px; }
.min-h-9 { min-height: 54px; }
.max-w-9 { max-width: 54px; }
.max-h-9 { max-height: 54px; }
.w-10 { width: 60px; }
.h-10 { height: 60px; }
.min-w-10 { min-width: 60px; }
.min-h-10 { min-height: 60px; }
.max-w-10 { max-width: 60px; }
.max-h-10 { max-height: 60px; }
.w-11 { width: 66px; }
.h-11 { height: 66px; }
.min-w-11 { min-width: 66px; }
.min-h-11 { min-height: 66px; }
.max-w-11 { max-width: 66px; }
.max-h-11 { max-height: 66px; }
.w-12 { width: 72px; }
.h-12 { height: 72px; }
.min-w-12 { min-width: 72px; }
.min-h-12 { min-height: 72px; }
.max-w-12 { max-width: 72px; }
.max-h-12 { max-height: 72px; }
.w-13 { width: 78px; }
.h-13 { height: 78px; }
.min-w-13 { min-width: 78px; }
.min-h-13 { min-height: 78px; }
.max-w-13 { max-width: 78px; }
.max-h-13 { max-height: 78px; }
.w-14 { width: 84px; }
.h-14 { height: 84px; }
.min-w-14 { min-width: 84px; }
.min-h-14 { min-height: 84px; }
.max-w-14 { max-width: 84px; }
.max-h-14 { max-height: 84px; }
.w-15 { width: 90px; }
.h-15 { height: 90px; }
.min-w-15 { min-width: 90px; }
.min-h-15 { min-height: 90px; }
.max-w-15 { max-width: 90px; }
.max-h-15 { max-height: 90px; }
.w-16 { width: 96px; }
.h-16 { height: 96px; }
.min-w-16 { min-width: 96px; }
.min-h-16 { min-height: 96px; }
.max-w-16 { max-width: 96px; }
.max-h-16 { max-height: 96px; }
.w-17 { width: 102px; }
.h-17 { height: 102px; }
.min-w-17 { min-width: 102px; }
.min-h-17 { min-height: 102px; }
.max-w-17 { max-width: 102px; }
.max-h-17 { max-height: 102px; }
.w-18 { width: 108px; }
.h-18 { height: 108px; }
.min-w-18 { min-width: 108px; }
.min-h-18 { min-height: 108px; }
.max-w-18 { max-width: 108px; }
.max-h-18 { max-height: 108px; }
.w-19 { width: 114px; }
.h-19 { height: 114px; }
.min-w-19 { min-width: 114px; }
.min-h-19 { min-height: 114px; }
.max-w-19 { max-width: 114px; }
.max-h-19 { max-height: 114px; }
.w-20 { width: 120px; }
.h-20 { height: 120px; }
.min-w-20 { min-width: 120px; }
.min-h-20 { min-height: 120px; }
.max-w-20 { max-width: 120px; }
.max-h-20 { max-height: 120px; }
.w-21 { width: 126px; }
.h-21 { height: 126px; }
.min-w-21 { min-width: 126px; }
.min-h-21 { min-height: 126px; }
.max-w-21 { max-width: 126px; }
.max-h-21 { max-height: 126px; }
.w-22 { width: 132px; }
.h-22 { height: 132px; }
.min-w-22 { min-width: 132px; }
.min-h-22 { min-height: 132px; }
.max-w-22 { max-width: 132px; }
.max-h-22 { max-height: 132px; }
.w-23 { width: 138px; }
.h-23 { height: 138px; }
.min-w-23 { min-width: 138px; }
.min-h-23 { min-height: 138px; }
.max-w-23 { max-width: 138px; }
.max-h-23 { max-height: 138px; }
.w-24 { width: 144px; }
.h-24 { height: 144px; }
.min-w-24 { min-width: 144px; }
.min-h-24 { min-height: 144px; }
.max-w-24 { max-width: 144px; }
.max-h-24 { max-height: 144px; }
.w-25 { width: 150px; }
.h-25 { height: 150px; }
.min-w-25 { min-width: 150px; }
.min-h-25 { min-height: 150px; }
.max-w-25 { max-width: 150px; }
.max-h-25 { max-height: 150px; }
.w-26 { width: 156px; }
.h-26 { height: 156px; }
.min-w-26 { min-width: 156px; }
.min-h-26 { min-height: 156px; }
.max-w-26 { max-width: 156px; }
.max-h-26 { max-height: 156px; }
.w-27 { width: 162px; }
.h-27 { height: 162px; }
.min-w-27 { min-width: 162px; }
.min-h-27 { min-height: 162px; }
.max-w-27 { max-width: 162px; }
.max-h-27 { max-height: 162px; }
.w-28 { width: 168px; }
.h-28 { height: 168px; }
.min-w-28 { min-width: 168px; }
.min-h-28 { min-height: 168px; }
.max-w-28 { max-width: 168px; }
.max-h-28 { max-height: 168px; }
.w-29 { width: 174px; }
.h-29 { height: 174px; }
.min-w-29 { min-width: 174px; }
.min-h-29 { min-height: 174px; }
.max-w-29 { max-width: 174px; }
.max-h-29 { max-height: 174px; }
.w-30 { width: 180px; }
.h-30 { height: 180px; }
.min-w-30 { min-width: 180px; }
.min-h-30 { min-height: 180px; }
.max-w-30 { max-width: 180px; }
.max-h-30 { max-height: 180px; }
.w-31 { width: 186px; }
.h-31 { height: 186px; }
.min-w-31 { min-width: 186px; }
.min-h-31 { min-height: 186px; }
.max-w-31 { max-width: 186px; }
.max-h-31 { max-height: 186px; }
.w-32 { width: 192px; }
.h-32 { height: 192px; }
.min-w-32 { min-width: 192px; }
.min-h-32 { min-height: 192px; }
.max-w-32 { max-width: 192px; }
.max-h-32 { max-height: 192px; }
.w-33 { width: 198px; }
.h-33 { height: 198px; }
.min-w-33 { min-width: 198px; }
.min-h-33 { min-height: 198px; }
.max-w-33 { max-width: 198px; }
.max-h-33 { max-height: 198px; }
.w-34 { width: 204px; }
.h-34 { height: 204px; }
.min-w-34 { min-width: 204px; }
.min-h-34 { min-height: 204px; }
.max-w-34 { max-width: 204px; }
.max-h-34 { max-height: 204px; }
.w-35 { width: 210px; }
.h-35 { height: 210px; }
.min-w-35 { min-width: 210px; }
.min-h-35 { min-height: 210px; }
.max-w-35 { max-width: 210px; }
.max-h-35 { max-height: 210px; }
.w-36 { width: 216px; }
.h-36 { height: 216px; }
.min-w-36 { min-width: 216px; }
.min-h-36 { min-height: 216px; }
.max-w-36 { max-width: 216px; }
.max-h-36 { max-height: 216px; }

/* Shader intensity classes for background experiments */
.shader-alpha-1 { opacity: 0.028; }
.shader-blur-1 { filter: blur(0.8px); }
.shader-alpha-2 { opacity: 0.056; }
.shader-blur-2 { filter: blur(1.6px); }
.shader-alpha-3 { opacity: 0.083; }
.shader-blur-3 { filter: blur(2.4px); }
.shader-alpha-4 { opacity: 0.111; }
.shader-blur-4 { filter: blur(3.2px); }
.shader-alpha-5 { opacity: 0.139; }
.shader-blur-5 { filter: blur(4px); }
.shader-alpha-6 { opacity: 0.167; }
.shader-blur-6 { filter: blur(4.8px); }
.shader-alpha-7 { opacity: 0.194; }
.shader-blur-7 { filter: blur(5.6px); }
.shader-alpha-8 { opacity: 0.222; }
.shader-blur-8 { filter: blur(6.4px); }
.shader-alpha-9 { opacity: 0.25; }
.shader-blur-9 { filter: blur(7.2px); }
.shader-alpha-10 { opacity: 0.278; }
.shader-blur-10 { filter: blur(8px); }
.shader-alpha-11 { opacity: 0.306; }
.shader-blur-11 { filter: blur(8.8px); }
.shader-alpha-12 { opacity: 0.333; }
.shader-blur-12 { filter: blur(9.6px); }
.shader-alpha-13 { opacity: 0.361; }
.shader-blur-13 { filter: blur(10.4px); }
.shader-alpha-14 { opacity: 0.389; }
.shader-blur-14 { filter: blur(11.2px); }
.shader-alpha-15 { opacity: 0.417; }
.shader-blur-15 { filter: blur(12px); }
.shader-alpha-16 { opacity: 0.444; }
.shader-blur-16 { filter: blur(12.8px); }
.shader-alpha-17 { opacity: 0.472; }
.shader-blur-17 { filter: blur(13.6px); }
.shader-alpha-18 { opacity: 0.5; }
.shader-blur-18 { filter: blur(14.4px); }
.shader-alpha-19 { opacity: 0.528; }
.shader-blur-19 { filter: blur(15.2px); }
.shader-alpha-20 { opacity: 0.556; }
.shader-blur-20 { filter: blur(16px); }
.shader-alpha-21 { opacity: 0.583; }
.shader-blur-21 { filter: blur(16.8px); }
.shader-alpha-22 { opacity: 0.611; }
.shader-blur-22 { filter: blur(17.6px); }
.shader-alpha-23 { opacity: 0.639; }
.shader-blur-23 { filter: blur(18.4px); }
.shader-alpha-24 { opacity: 0.667; }
.shader-blur-24 { filter: blur(19.2px); }
.shader-alpha-25 { opacity: 0.694; }
.shader-blur-25 { filter: blur(20px); }
.shader-alpha-26 { opacity: 0.722; }
.shader-blur-26 { filter: blur(20.8px); }
.shader-alpha-27 { opacity: 0.75; }
.shader-blur-27 { filter: blur(21.6px); }
.shader-alpha-28 { opacity: 0.778; }
.shader-blur-28 { filter: blur(22.4px); }
.shader-alpha-29 { opacity: 0.806; }
.shader-blur-29 { filter: blur(23.2px); }
.shader-alpha-30 { opacity: 0.833; }
.shader-blur-30 { filter: blur(24px); }
.shader-alpha-31 { opacity: 0.861; }
.shader-blur-31 { filter: blur(24.8px); }
.shader-alpha-32 { opacity: 0.889; }
.shader-blur-32 { filter: blur(25.6px); }
.shader-alpha-33 { opacity: 0.917; }
.shader-blur-33 { filter: blur(26.4px); }
.shader-alpha-34 { opacity: 0.944; }
.shader-blur-34 { filter: blur(27.2px); }
.shader-alpha-35 { opacity: 0.972; }
.shader-blur-35 { filter: blur(28px); }
.shader-alpha-36 { opacity: 1; }
.shader-blur-36 { filter: blur(28.8px); }

/* Procedural block tones */
.block-moss-1 { background: linear-gradient(180deg, #87be62, #638f45); border-color: rgba(0,0,0,0.1); }
.block-moss-2 { background: linear-gradient(180deg, #87be62, #638f45); border-color: rgba(0,0,0,0.2); }
.block-moss-3 { background: linear-gradient(180deg, #87be62, #638f45); border-color: rgba(0,0,0,0.3); }
.block-moss-4 { background: linear-gradient(180deg, #87be62, #638f45); border-color: rgba(0,0,0,0.4); }
.block-moss-5 { background: linear-gradient(180deg, #87be62, #638f45); border-color: rgba(0,0,0,0.5); }
.block-moss-6 { background: linear-gradient(180deg, #87be62, #638f45); border-color: rgba(0,0,0,0.6); }
.block-moss-7 { background: linear-gradient(180deg, #87be62, #638f45); border-color: rgba(0,0,0,0.7); }
.block-moss-8 { background: linear-gradient(180deg, #87be62, #638f45); border-color: rgba(0,0,0,0.8); }
.block-moss-9 { background: linear-gradient(180deg, #87be62, #638f45); border-color: rgba(0,0,0,0.9); }
.block-moss-10 { background: linear-gradient(180deg, #87be62, #638f45); border-color: rgba(0,0,0,1); }
.block-spruce-1 { background: linear-gradient(180deg, #4e6c3e, #354c2c); border-color: rgba(0,0,0,0.1); }
.block-spruce-2 { background: linear-gradient(180deg, #4e6c3e, #354c2c); border-color: rgba(0,0,0,0.2); }
.block-spruce-3 { background: linear-gradient(180deg, #4e6c3e, #354c2c); border-color: rgba(0,0,0,0.3); }
.block-spruce-4 { background: linear-gradient(180deg, #4e6c3e, #354c2c); border-color: rgba(0,0,0,0.4); }
.block-spruce-5 { background: linear-gradient(180deg, #4e6c3e, #354c2c); border-color: rgba(0,0,0,0.5); }
.block-spruce-6 { background: linear-gradient(180deg, #4e6c3e, #354c2c); border-color: rgba(0,0,0,0.6); }
.block-spruce-7 { background: linear-gradient(180deg, #4e6c3e, #354c2c); border-color: rgba(0,0,0,0.7); }
.block-spruce-8 { background: linear-gradient(180deg, #4e6c3e, #354c2c); border-color: rgba(0,0,0,0.8); }
.block-spruce-9 { background: linear-gradient(180deg, #4e6c3e, #354c2c); border-color: rgba(0,0,0,0.9); }
.block-spruce-10 { background: linear-gradient(180deg, #4e6c3e, #354c2c); border-color: rgba(0,0,0,1); }
.block-slate-1 { background: linear-gradient(180deg, #505a4d, #323a2f); border-color: rgba(0,0,0,0.1); }
.block-slate-2 { background: linear-gradient(180deg, #505a4d, #323a2f); border-color: rgba(0,0,0,0.2); }
.block-slate-3 { background: linear-gradient(180deg, #505a4d, #323a2f); border-color: rgba(0,0,0,0.3); }
.block-slate-4 { background: linear-gradient(180deg, #505a4d, #323a2f); border-color: rgba(0,0,0,0.4); }
.block-slate-5 { background: linear-gradient(180deg, #505a4d, #323a2f); border-color: rgba(0,0,0,0.5); }
.block-slate-6 { background: linear-gradient(180deg, #505a4d, #323a2f); border-color: rgba(0,0,0,0.6); }
.block-slate-7 { background: linear-gradient(180deg, #505a4d, #323a2f); border-color: rgba(0,0,0,0.7); }
.block-slate-8 { background: linear-gradient(180deg, #505a4d, #323a2f); border-color: rgba(0,0,0,0.8); }
.block-slate-9 { background: linear-gradient(180deg, #505a4d, #323a2f); border-color: rgba(0,0,0,0.9); }
.block-slate-10 { background: linear-gradient(180deg, #505a4d, #323a2f); border-color: rgba(0,0,0,1); }
.block-sand-1 { background: linear-gradient(180deg, #dfcf9b, #b8a477); border-color: rgba(0,0,0,0.1); }
.block-sand-2 { background: linear-gradient(180deg, #dfcf9b, #b8a477); border-color: rgba(0,0,0,0.2); }
.block-sand-3 { background: linear-gradient(180deg, #dfcf9b, #b8a477); border-color: rgba(0,0,0,0.3); }
.block-sand-4 { background: linear-gradient(180deg, #dfcf9b, #b8a477); border-color: rgba(0,0,0,0.4); }
.block-sand-5 { background: linear-gradient(180deg, #dfcf9b, #b8a477); border-color: rgba(0,0,0,0.5); }
.block-sand-6 { background: linear-gradient(180deg, #dfcf9b, #b8a477); border-color: rgba(0,0,0,0.6); }
.block-sand-7 { background: linear-gradient(180deg, #dfcf9b, #b8a477); border-color: rgba(0,0,0,0.7); }
.block-sand-8 { background: linear-gradient(180deg, #dfcf9b, #b8a477); border-color: rgba(0,0,0,0.8); }
.block-sand-9 { background: linear-gradient(180deg, #dfcf9b, #b8a477); border-color: rgba(0,0,0,0.9); }
.block-sand-10 { background: linear-gradient(180deg, #dfcf9b, #b8a477); border-color: rgba(0,0,0,1); }
.block-copper-1 { background: linear-gradient(180deg, #c77c49, #935837); border-color: rgba(0,0,0,0.1); }
.block-copper-2 { background: linear-gradient(180deg, #c77c49, #935837); border-color: rgba(0,0,0,0.2); }
.block-copper-3 { background: linear-gradient(180deg, #c77c49, #935837); border-color: rgba(0,0,0,0.3); }
.block-copper-4 { background: linear-gradient(180deg, #c77c49, #935837); border-color: rgba(0,0,0,0.4); }
.block-copper-5 { background: linear-gradient(180deg, #c77c49, #935837); border-color: rgba(0,0,0,0.5); }
.block-copper-6 { background: linear-gradient(180deg, #c77c49, #935837); border-color: rgba(0,0,0,0.6); }
.block-copper-7 { background: linear-gradient(180deg, #c77c49, #935837); border-color: rgba(0,0,0,0.7); }
.block-copper-8 { background: linear-gradient(180deg, #c77c49, #935837); border-color: rgba(0,0,0,0.8); }
.block-copper-9 { background: linear-gradient(180deg, #c77c49, #935837); border-color: rgba(0,0,0,0.9); }
.block-copper-10 { background: linear-gradient(180deg, #c77c49, #935837); border-color: rgba(0,0,0,1); }
.block-ice-1 { background: linear-gradient(180deg, #9fd4ef, #6ea6c4); border-color: rgba(0,0,0,0.1); }
.block-ice-2 { background: linear-gradient(180deg, #9fd4ef, #6ea6c4); border-color: rgba(0,0,0,0.2); }
.block-ice-3 { background: linear-gradient(180deg, #9fd4ef, #6ea6c4); border-color: rgba(0,0,0,0.3); }
.block-ice-4 { background: linear-gradient(180deg, #9fd4ef, #6ea6c4); border-color: rgba(0,0,0,0.4); }
.block-ice-5 { background: linear-gradient(180deg, #9fd4ef, #6ea6c4); border-color: rgba(0,0,0,0.5); }
.block-ice-6 { background: linear-gradient(180deg, #9fd4ef, #6ea6c4); border-color: rgba(0,0,0,0.6); }
.block-ice-7 { background: linear-gradient(180deg, #9fd4ef, #6ea6c4); border-color: rgba(0,0,0,0.7); }
.block-ice-8 { background: linear-gradient(180deg, #9fd4ef, #6ea6c4); border-color: rgba(0,0,0,0.8); }
.block-ice-9 { background: linear-gradient(180deg, #9fd4ef, #6ea6c4); border-color: rgba(0,0,0,0.9); }
.block-ice-10 { background: linear-gradient(180deg, #9fd4ef, #6ea6c4); border-color: rgba(0,0,0,1); }
.block-amethyst-1 { background: linear-gradient(180deg, #9a83c9, #6c5a99); border-color: rgba(0,0,0,0.1); }
.block-amethyst-2 { background: linear-gradient(180deg, #9a83c9, #6c5a99); border-color: rgba(0,0,0,0.2); }
.block-amethyst-3 { background: linear-gradient(180deg, #9a83c9, #6c5a99); border-color: rgba(0,0,0,0.3); }
.block-amethyst-4 { background: linear-gradient(180deg, #9a83c9, #6c5a99); border-color: rgba(0,0,0,0.4); }
.block-amethyst-5 { background: linear-gradient(180deg, #9a83c9, #6c5a99); border-color: rgba(0,0,0,0.5); }
.block-amethyst-6 { background: linear-gradient(180deg, #9a83c9, #6c5a99); border-color: rgba(0,0,0,0.6); }
.block-amethyst-7 { background: linear-gradient(180deg, #9a83c9, #6c5a99); border-color: rgba(0,0,0,0.7); }
.block-amethyst-8 { background: linear-gradient(180deg, #9a83c9, #6c5a99); border-color: rgba(0,0,0,0.8); }
.block-amethyst-9 { background: linear-gradient(180deg, #9a83c9, #6c5a99); border-color: rgba(0,0,0,0.9); }
.block-amethyst-10 { background: linear-gradient(180deg, #9a83c9, #6c5a99); border-color: rgba(0,0,0,1); }
.block-netherrack-1 { background: linear-gradient(180deg, #8d3f3f, #602929); border-color: rgba(0,0,0,0.1); }
.block-netherrack-2 { background: linear-gradient(180deg, #8d3f3f, #602929); border-color: rgba(0,0,0,0.2); }
.block-netherrack-3 { background: linear-gradient(180deg, #8d3f3f, #602929); border-color: rgba(0,0,0,0.3); }
.block-netherrack-4 { background: linear-gradient(180deg, #8d3f3f, #602929); border-color: rgba(0,0,0,0.4); }
.block-netherrack-5 { background: linear-gradient(180deg, #8d3f3f, #602929); border-color: rgba(0,0,0,0.5); }
.block-netherrack-6 { background: linear-gradient(180deg, #8d3f3f, #602929); border-color: rgba(0,0,0,0.6); }
.block-netherrack-7 { background: linear-gradient(180deg, #8d3f3f, #602929); border-color: rgba(0,0,0,0.7); }
.block-netherrack-8 { background: linear-gradient(180deg, #8d3f3f, #602929); border-color: rgba(0,0,0,0.8); }
.block-netherrack-9 { background: linear-gradient(180deg, #8d3f3f, #602929); border-color: rgba(0,0,0,0.9); }
.block-netherrack-10 { background: linear-gradient(180deg, #8d3f3f, #602929); border-color: rgba(0,0,0,1); }

/* Animated pixel stars layer */
.star-1 { position: absolute; left: 37%; top: 53%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 2.77s ease-in-out 0.21s infinite; }
.star-2 { position: absolute; left: 74%; top: 6%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 2.94s ease-in-out 0.42s infinite; }
.star-3 { position: absolute; left: 11%; top: 59%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.11s ease-in-out 0.63s infinite; }
.star-4 { position: absolute; left: 48%; top: 12%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.28s ease-in-out 0.84s infinite; }
.star-5 { position: absolute; left: 85%; top: 65%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.45s ease-in-out 1.05s infinite; }
.star-6 { position: absolute; left: 22%; top: 18%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.62s ease-in-out 1.26s infinite; }
.star-7 { position: absolute; left: 59%; top: 71%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.79s ease-in-out 1.47s infinite; }
.star-8 { position: absolute; left: 96%; top: 24%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.96s ease-in-out 1.68s infinite; }
.star-9 { position: absolute; left: 33%; top: 77%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.13s ease-in-out 1.89s infinite; }
.star-10 { position: absolute; left: 70%; top: 30%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.3s ease-in-out 2.1s infinite; }
.star-11 { position: absolute; left: 7%; top: 83%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.47s ease-in-out 2.31s infinite; }
.star-12 { position: absolute; left: 44%; top: 36%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.64s ease-in-out 2.52s infinite; }
.star-13 { position: absolute; left: 81%; top: 89%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.81s ease-in-out 2.73s infinite; }
.star-14 { position: absolute; left: 18%; top: 42%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.98s ease-in-out 2.94s infinite; }
.star-15 { position: absolute; left: 55%; top: 95%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 5.15s ease-in-out 3.15s infinite; }
.star-16 { position: absolute; left: 92%; top: 48%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 5.32s ease-in-out 3.36s infinite; }
.star-17 { position: absolute; left: 29%; top: 1%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 2.6s ease-in-out 3.57s infinite; }
.star-18 { position: absolute; left: 66%; top: 54%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 2.77s ease-in-out 3.78s infinite; }
.star-19 { position: absolute; left: 3%; top: 7%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 2.94s ease-in-out 3.99s infinite; }
.star-20 { position: absolute; left: 40%; top: 60%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.11s ease-in-out 4.2s infinite; }
.star-21 { position: absolute; left: 77%; top: 13%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.28s ease-in-out 4.41s infinite; }
.star-22 { position: absolute; left: 14%; top: 66%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.45s ease-in-out 4.62s infinite; }
.star-23 { position: absolute; left: 51%; top: 19%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.62s ease-in-out 0s infinite; }
.star-24 { position: absolute; left: 88%; top: 72%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.79s ease-in-out 0.21s infinite; }
.star-25 { position: absolute; left: 25%; top: 25%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.96s ease-in-out 0.42s infinite; }
.star-26 { position: absolute; left: 62%; top: 78%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.13s ease-in-out 0.63s infinite; }
.star-27 { position: absolute; left: 99%; top: 31%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.3s ease-in-out 0.84s infinite; }
.star-28 { position: absolute; left: 36%; top: 84%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.47s ease-in-out 1.05s infinite; }
.star-29 { position: absolute; left: 73%; top: 37%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.64s ease-in-out 1.26s infinite; }
.star-30 { position: absolute; left: 10%; top: 90%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.81s ease-in-out 1.47s infinite; }
.star-31 { position: absolute; left: 47%; top: 43%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.98s ease-in-out 1.68s infinite; }
.star-32 { position: absolute; left: 84%; top: 96%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 5.15s ease-in-out 1.89s infinite; }
.star-33 { position: absolute; left: 21%; top: 49%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 5.32s ease-in-out 2.1s infinite; }
.star-34 { position: absolute; left: 58%; top: 2%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 2.6s ease-in-out 2.31s infinite; }
.star-35 { position: absolute; left: 95%; top: 55%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 2.77s ease-in-out 2.52s infinite; }
.star-36 { position: absolute; left: 32%; top: 8%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 2.94s ease-in-out 2.73s infinite; }
.star-37 { position: absolute; left: 69%; top: 61%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.11s ease-in-out 2.94s infinite; }
.star-38 { position: absolute; left: 6%; top: 14%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.28s ease-in-out 3.15s infinite; }
.star-39 { position: absolute; left: 43%; top: 67%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.45s ease-in-out 3.36s infinite; }
.star-40 { position: absolute; left: 80%; top: 20%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.62s ease-in-out 3.57s infinite; }
.star-41 { position: absolute; left: 17%; top: 73%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.79s ease-in-out 3.78s infinite; }
.star-42 { position: absolute; left: 54%; top: 26%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.96s ease-in-out 3.99s infinite; }
.star-43 { position: absolute; left: 91%; top: 79%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.13s ease-in-out 4.2s infinite; }
.star-44 { position: absolute; left: 28%; top: 32%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.3s ease-in-out 4.41s infinite; }
.star-45 { position: absolute; left: 65%; top: 85%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.47s ease-in-out 4.62s infinite; }
.star-46 { position: absolute; left: 2%; top: 38%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.64s ease-in-out 0s infinite; }
.star-47 { position: absolute; left: 39%; top: 91%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.81s ease-in-out 0.21s infinite; }
.star-48 { position: absolute; left: 76%; top: 44%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.98s ease-in-out 0.42s infinite; }
.star-49 { position: absolute; left: 13%; top: 97%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 5.15s ease-in-out 0.63s infinite; }
.star-50 { position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 5.32s ease-in-out 0.84s infinite; }
.star-51 { position: absolute; left: 87%; top: 3%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 2.6s ease-in-out 1.05s infinite; }
.star-52 { position: absolute; left: 24%; top: 56%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 2.77s ease-in-out 1.26s infinite; }
.star-53 { position: absolute; left: 61%; top: 9%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 2.94s ease-in-out 1.47s infinite; }
.star-54 { position: absolute; left: 98%; top: 62%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.11s ease-in-out 1.68s infinite; }
.star-55 { position: absolute; left: 35%; top: 15%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.28s ease-in-out 1.89s infinite; }
.star-56 { position: absolute; left: 72%; top: 68%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.45s ease-in-out 2.1s infinite; }
.star-57 { position: absolute; left: 9%; top: 21%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.62s ease-in-out 2.31s infinite; }
.star-58 { position: absolute; left: 46%; top: 74%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.79s ease-in-out 2.52s infinite; }
.star-59 { position: absolute; left: 83%; top: 27%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 3.96s ease-in-out 2.73s infinite; }
.star-60 { position: absolute; left: 20%; top: 80%; width: 2px; height: 2px; background: rgba(255,255,255,0.7); animation: twinkle 4.13s ease-in-out 2.94s infinite; }
@keyframes twinkle {
  0% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.6); }
  100% { opacity: 0.2; transform: scale(1); }
}

/* Depth shadow classes */
.depth-1 { box-shadow: 0 0.5px 0.9px rgba(0, 0, 0, 0.082); }
.depth-2 { box-shadow: 0 1px 1.8px rgba(0, 0, 0, 0.084); }
.depth-3 { box-shadow: 0 1.5px 2.7px rgba(0, 0, 0, 0.086); }
.depth-4 { box-shadow: 0 2px 3.6px rgba(0, 0, 0, 0.088); }
.depth-5 { box-shadow: 0 2.5px 4.5px rgba(0, 0, 0, 0.09); }
.depth-6 { box-shadow: 0 3px 5.4px rgba(0, 0, 0, 0.092); }
.depth-7 { box-shadow: 0 3.5px 6.3px rgba(0, 0, 0, 0.094); }
.depth-8 { box-shadow: 0 4px 7.2px rgba(0, 0, 0, 0.096); }
.depth-9 { box-shadow: 0 4.5px 8.1px rgba(0, 0, 0, 0.098); }
.depth-10 { box-shadow: 0 5px 9px rgba(0, 0, 0, 0.1); }
.depth-11 { box-shadow: 0 5.5px 9.9px rgba(0, 0, 0, 0.102); }
.depth-12 { box-shadow: 0 6px 10.8px rgba(0, 0, 0, 0.104); }
.depth-13 { box-shadow: 0 6.5px 11.7px rgba(0, 0, 0, 0.106); }
.depth-14 { box-shadow: 0 7px 12.6px rgba(0, 0, 0, 0.108); }
.depth-15 { box-shadow: 0 7.5px 13.5px rgba(0, 0, 0, 0.11); }
.depth-16 { box-shadow: 0 8px 14.4px rgba(0, 0, 0, 0.112); }
.depth-17 { box-shadow: 0 8.5px 15.3px rgba(0, 0, 0, 0.114); }
.depth-18 { box-shadow: 0 9px 16.2px rgba(0, 0, 0, 0.116); }
.depth-19 { box-shadow: 0 9.5px 17.1px rgba(0, 0, 0, 0.118); }
.depth-20 { box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12); }
.depth-21 { box-shadow: 0 10.5px 18.9px rgba(0, 0, 0, 0.122); }
.depth-22 { box-shadow: 0 11px 19.8px rgba(0, 0, 0, 0.124); }
.depth-23 { box-shadow: 0 11.5px 20.7px rgba(0, 0, 0, 0.126); }
.depth-24 { box-shadow: 0 12px 21.6px rgba(0, 0, 0, 0.128); }
.depth-25 { box-shadow: 0 12.5px 22.5px rgba(0, 0, 0, 0.13); }
.depth-26 { box-shadow: 0 13px 23.4px rgba(0, 0, 0, 0.132); }
.depth-27 { box-shadow: 0 13.5px 24.3px rgba(0, 0, 0, 0.134); }
.depth-28 { box-shadow: 0 14px 25.2px rgba(0, 0, 0, 0.136); }
.depth-29 { box-shadow: 0 14.5px 26.1px rgba(0, 0, 0, 0.138); }
.depth-30 { box-shadow: 0 15px 27px rgba(0, 0, 0, 0.14); }
.depth-31 { box-shadow: 0 15.5px 27.9px rgba(0, 0, 0, 0.142); }
.depth-32 { box-shadow: 0 16px 28.8px rgba(0, 0, 0, 0.144); }
.depth-33 { box-shadow: 0 16.5px 29.7px rgba(0, 0, 0, 0.146); }
.depth-34 { box-shadow: 0 17px 30.6px rgba(0, 0, 0, 0.148); }
.depth-35 { box-shadow: 0 17.5px 31.5px rgba(0, 0, 0, 0.15); }
.depth-36 { box-shadow: 0 18px 32.4px rgba(0, 0, 0, 0.152); }
.depth-37 { box-shadow: 0 18.5px 33.3px rgba(0, 0, 0, 0.154); }
.depth-38 { box-shadow: 0 19px 34.2px rgba(0, 0, 0, 0.156); }
.depth-39 { box-shadow: 0 19.5px 35.1px rgba(0, 0, 0, 0.158); }
.depth-40 { box-shadow: 0 20px 36px rgba(0, 0, 0, 0.16); }
.depth-41 { box-shadow: 0 20.5px 36.9px rgba(0, 0, 0, 0.162); }
.depth-42 { box-shadow: 0 21px 37.8px rgba(0, 0, 0, 0.164); }
.depth-43 { box-shadow: 0 21.5px 38.7px rgba(0, 0, 0, 0.166); }
.depth-44 { box-shadow: 0 22px 39.6px rgba(0, 0, 0, 0.168); }
.depth-45 { box-shadow: 0 22.5px 40.5px rgba(0, 0, 0, 0.17); }
.depth-46 { box-shadow: 0 23px 41.4px rgba(0, 0, 0, 0.172); }
.depth-47 { box-shadow: 0 23.5px 42.3px rgba(0, 0, 0, 0.174); }
.depth-48 { box-shadow: 0 24px 43.2px rgba(0, 0, 0, 0.176); }
.depth-49 { box-shadow: 0 24.5px 44.1px rgba(0, 0, 0, 0.178); }
.depth-50 { box-shadow: 0 25px 45px rgba(0, 0, 0, 0.18); }
.depth-51 { box-shadow: 0 25.5px 45.9px rgba(0, 0, 0, 0.182); }
.depth-52 { box-shadow: 0 26px 46.8px rgba(0, 0, 0, 0.184); }
.depth-53 { box-shadow: 0 26.5px 47.7px rgba(0, 0, 0, 0.186); }
.depth-54 { box-shadow: 0 27px 48.6px rgba(0, 0, 0, 0.188); }
.depth-55 { box-shadow: 0 27.5px 49.5px rgba(0, 0, 0, 0.19); }
.depth-56 { box-shadow: 0 28px 50.4px rgba(0, 0, 0, 0.192); }
.depth-57 { box-shadow: 0 28.5px 51.3px rgba(0, 0, 0, 0.194); }
.depth-58 { box-shadow: 0 29px 52.2px rgba(0, 0, 0, 0.196); }
.depth-59 { box-shadow: 0 29.5px 53.1px rgba(0, 0, 0, 0.198); }
.depth-60 { box-shadow: 0 30px 54px rgba(0, 0, 0, 0.2); }
.depth-61 { box-shadow: 0 30.5px 54.9px rgba(0, 0, 0, 0.202); }
.depth-62 { box-shadow: 0 31px 55.8px rgba(0, 0, 0, 0.204); }
.depth-63 { box-shadow: 0 31.5px 56.7px rgba(0, 0, 0, 0.206); }
.depth-64 { box-shadow: 0 32px 57.6px rgba(0, 0, 0, 0.208); }
.depth-65 { box-shadow: 0 32.5px 58.5px rgba(0, 0, 0, 0.21); }
.depth-66 { box-shadow: 0 33px 59.4px rgba(0, 0, 0, 0.212); }
.depth-67 { box-shadow: 0 33.5px 60.3px rgba(0, 0, 0, 0.214); }
.depth-68 { box-shadow: 0 34px 61.2px rgba(0, 0, 0, 0.216); }
.depth-69 { box-shadow: 0 34.5px 62.1px rgba(0, 0, 0, 0.218); }
.depth-70 { box-shadow: 0 35px 63px rgba(0, 0, 0, 0.22); }

/* Color utility classes themed around minecraft materials */
.text-lava { color: #db7738; }
.bg-lava { background-color: #db7738; }
.border-lava { border-color: #db7738; }
.text-stone { color: #5a6254; }
.bg-stone { background-color: #5a6254; }
.border-stone { border-color: #5a6254; }
.text-sand { color: #d4c18d; }
.bg-sand { background-color: #d4c18d; }
.border-sand { border-color: #d4c18d; }
.text-sky { color: #6aa8e8; }
.bg-sky { background-color: #6aa8e8; }
.border-sky { border-color: #6aa8e8; }
.text-redstone { color: #e35d5d; }
.bg-redstone { background-color: #e35d5d; }
.border-redstone { border-color: #e35d5d; }
.text-slate { color: #444d42; }
.bg-slate { background-color: #444d42; }
.border-slate { border-color: #444d42; }
.text-nether { color: #8d3f3f; }
.bg-nether { background-color: #8d3f3f; }
.border-nether { border-color: #8d3f3f; }
.text-water { color: #4e88bb; }
.bg-water { background-color: #4e88bb; }
.border-water { border-color: #4e88bb; }
.text-grassdark { color: #4d7d34; }
.bg-grassdark { background-color: #4d7d34; }
.border-grassdark { border-color: #4d7d34; }
.text-obsidian { color: #2a2238; }
.bg-obsidian { background-color: #2a2238; }
.border-obsidian { border-color: #2a2238; }
.text-grass { color: #78b159; }
.bg-grass { background-color: #78b159; }
.border-grass { border-color: #78b159; }
.text-grasslight { color: #8ec765; }
.bg-grasslight { background-color: #8ec765; }
.border-grasslight { border-color: #8ec765; }
.text-dirt { color: #6c4a2f; }
.bg-dirt { background-color: #6c4a2f; }
.border-dirt { border-color: #6c4a2f; }
.text-gold { color: #f6d57a; }
.bg-gold { background-color: #f6d57a; }
.border-gold { border-color: #f6d57a; }
.text-emerald { color: #4fd68e; }
.bg-emerald { background-color: #4fd68e; }
.border-emerald { border-color: #4fd68e; }

/* Responsive generated helpers */
@media (max-width: 440px) { .hide-under-1 { display: none !important; } }
@media (min-width: 440px) { .show-over-1 { display: block !important; } }
@media (max-width: 460px) { .hide-under-2 { display: none !important; } }
@media (min-width: 460px) { .show-over-2 { display: block !important; } }
@media (max-width: 480px) { .hide-under-3 { display: none !important; } }
@media (min-width: 480px) { .show-over-3 { display: block !important; } }
@media (max-width: 500px) { .hide-under-4 { display: none !important; } }
@media (min-width: 500px) { .show-over-4 { display: block !important; } }
@media (max-width: 520px) { .hide-under-5 { display: none !important; } }
@media (min-width: 520px) { .show-over-5 { display: block !important; } }
@media (max-width: 540px) { .hide-under-6 { display: none !important; } }
@media (min-width: 540px) { .show-over-6 { display: block !important; } }
@media (max-width: 560px) { .hide-under-7 { display: none !important; } }
@media (min-width: 560px) { .show-over-7 { display: block !important; } }
@media (max-width: 580px) { .hide-under-8 { display: none !important; } }
@media (min-width: 580px) { .show-over-8 { display: block !important; } }
@media (max-width: 600px) { .hide-under-9 { display: none !important; } }
@media (min-width: 600px) { .show-over-9 { display: block !important; } }
@media (max-width: 620px) { .hide-under-10 { display: none !important; } }
@media (min-width: 620px) { .show-over-10 { display: block !important; } }
@media (max-width: 640px) { .hide-under-11 { display: none !important; } }
@media (min-width: 640px) { .show-over-11 { display: block !important; } }
@media (max-width: 660px) { .hide-under-12 { display: none !important; } }
@media (min-width: 660px) { .show-over-12 { display: block !important; } }
@media (max-width: 680px) { .hide-under-13 { display: none !important; } }
@media (min-width: 680px) { .show-over-13 { display: block !important; } }
@media (max-width: 700px) { .hide-under-14 { display: none !important; } }
@media (min-width: 700px) { .show-over-14 { display: block !important; } }
@media (max-width: 720px) { .hide-under-15 { display: none !important; } }
@media (min-width: 720px) { .show-over-15 { display: block !important; } }
@media (max-width: 740px) { .hide-under-16 { display: none !important; } }
@media (min-width: 740px) { .show-over-16 { display: block !important; } }
@media (max-width: 760px) { .hide-under-17 { display: none !important; } }
@media (min-width: 760px) { .show-over-17 { display: block !important; } }
@media (max-width: 780px) { .hide-under-18 { display: none !important; } }
@media (min-width: 780px) { .show-over-18 { display: block !important; } }

/* ---- Modern Scenic Minecraft Overrides (Professional UI) ---- */
:root {
  --mx-sky-top: #86d6ff;
  --mx-sky-bottom: #d9f1ff;
  --mx-cloud: rgba(255, 255, 255, 0.55);
  --mx-grass: #5cae48;
  --mx-grass-2: #78c75f;
  --mx-stone: #d7dee7;
  --mx-slate: #b3becc;
  --mx-ink: #162236;
  --mx-muted: #40536c;
  --mx-accent: #2e8cff;
  --mx-accent-2: #42c4ff;
  --mx-panel: rgba(255, 255, 255, 0.78);
  --mx-panel-border: rgba(255, 255, 255, 0.95);
  --mx-shadow: 0 24px 56px rgba(24, 56, 97, 0.2);
}

html,
body {
  image-rendering: auto;
}

body {
  font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--mx-ink);
  letter-spacing: 0;
  line-height: 1.45;
  background:
    radial-gradient(1200px 420px at 50% 100%, rgba(65, 164, 72, 0.45), transparent 60%),
    linear-gradient(180deg, var(--mx-sky-top) 0%, #bfe7ff 35%, var(--mx-sky-bottom) 65%, #f6fbff 100%);
}

body::before {
  z-index: -3;
  opacity: 1;
  background:
    radial-gradient(180px 60px at 10% 18%, var(--mx-cloud), transparent 72%),
    radial-gradient(220px 70px at 30% 14%, var(--mx-cloud), transparent 70%),
    radial-gradient(240px 74px at 65% 16%, rgba(255, 255, 255, 0.5), transparent 72%),
    radial-gradient(160px 52px at 86% 20%, rgba(255, 255, 255, 0.45), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  mix-blend-mode: normal;
  animation: cloudDrift 36s linear infinite;
}

body::after {
  z-index: -2;
  opacity: 1;
  filter: none;
  background:
    linear-gradient(175deg, rgba(255, 255, 255, 0) 42%, rgba(93, 169, 79, 0.32) 43%, rgba(93, 169, 79, 0.32) 56%, rgba(255, 255, 255, 0) 57%),
    linear-gradient(184deg, rgba(255, 255, 255, 0) 52%, rgba(75, 140, 68, 0.26) 53%, rgba(75, 140, 68, 0.26) 64%, rgba(255, 255, 255, 0) 65%),
    linear-gradient(0deg, rgba(90, 180, 80, 0.34), rgba(90, 180, 80, 0));
  animation: none;
}

.mc-grid {
  opacity: 0.12;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  animation: none;
}

.hero {
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(243, 250, 255, 0.52));
  box-shadow: 0 10px 36px rgba(52, 98, 160, 0.16);
  backdrop-filter: blur(6px);
}

.hero::before,
.hero::after {
  display: none;
}

.hero-inner {
  padding: 2.2rem 0 1.8rem;
}

.hero-title {
  font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
  text-transform: none;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #123257;
  text-shadow: none;
  animation: none;
}

.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.55;
  color: var(--mx-muted);
}

.hero-sub strong {
  color: #1c3f64;
}

.pixel-nav {
  gap: 0.62rem;
}

.pixel-link {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 248, 255, 0.94));
  box-shadow: 0 8px 20px rgba(36, 91, 160, 0.14);
  color: #21507e;
  font-size: 0.93rem;
  font-weight: 700;
  padding: 0.56rem 1rem;
}

.pixel-link:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff, #eef7ff);
  border-color: rgba(255, 255, 255, 1);
  filter: none;
}

.pixel-link:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(36, 91, 160, 0.14);
}

.pixel-link.active {
  color: #fff;
  border-color: rgba(46, 140, 255, 0.8);
  background: linear-gradient(135deg, var(--mx-accent), var(--mx-accent-2));
  box-shadow: 0 10px 24px rgba(46, 140, 255, 0.3);
  text-shadow: none;
}

.page {
  padding: 2rem 0 3rem;
}

.panel {
  border: 1px solid var(--mx-panel-border);
  border-radius: 24px;
  padding: 1.25rem;
  background: var(--mx-panel);
  box-shadow: var(--mx-shadow);
  backdrop-filter: blur(10px);
}

.panel::before {
  display: none;
}

.section-title {
  font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.01em;
  color: #183a61;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  text-shadow: none;
}

.drop-zone {
  min-height: 170px;
  border: 2px dashed rgba(46, 140, 255, 0.35);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 248, 255, 0.86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.drop-zone::after {
  display: none;
}

.drop-zone p {
  font-size: 1.03rem;
  font-weight: 600;
  color: #2e4f70;
}

.drop-zone:hover,
.drop-zone.dragover {
  border-color: rgba(46, 140, 255, 0.65);
  background: linear-gradient(180deg, #ffffff, #eaf5ff);
  box-shadow: 0 14px 30px rgba(38, 112, 201, 0.18);
}

.pixel-btn {
  border: 0;
  border-radius: 14px;
  min-width: 190px;
  min-height: 44px;
  padding: 0.76rem 1rem;
  font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  background: linear-gradient(135deg, #35a74b, #7bd85c);
  box-shadow: 0 12px 24px rgba(53, 167, 75, 0.3);
}

.pixel-btn::after {
  display: none;
}

.pixel-btn:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.pixel-btn:active {
  transform: translateY(0);
}

.pixel-btn:disabled {
  background: linear-gradient(135deg, #8eb99a, #9cc7a7);
  color: rgba(255, 255, 255, 0.8);
}

.file-pill {
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.85);
  color: #2d4f72;
  font-size: 0.95rem;
  font-weight: 600;
}

.status-line {
  color: #2f587e;
  font-size: 0.93rem;
  font-weight: 600;
}

.status-line.error {
  color: #c03848;
}

.status-line.success {
  color: #2a8c45;
}

.progress-wrap {
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  overflow: hidden;
  height: 28px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.progress-bar {
  background: linear-gradient(90deg, #35a74b, #72d057 45%, #44b2ff);
  box-shadow: none;
}

.progress-text {
  color: #164468;
  text-shadow: none;
  font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
}

.log-box {
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  color: #2b4e71;
  font-size: 0.86rem;
  line-height: 1.5;
}

.log-box strong {
  color: #1e4875;
}

.info-grid {
  gap: 0.9rem;
}

.info-card {
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 0.95rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 26px rgba(27, 73, 126, 0.12);
}

.info-card h3 {
  font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 800;
  color: #14385d;
  text-transform: none;
}

.info-card p,
.info-card li {
  color: #3b5676;
  font-size: 0.93rem;
  line-height: 1.55;
}

.info-card code,
.drop-zone code,
.file-pill code,
.footer code,
.status-line code {
  font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
  border-radius: 6px;
  border: 0;
  background: rgba(46, 140, 255, 0.12);
  color: #1f5f9f;
}

.footer {
  margin-top: 1.3rem;
  border-top: 0;
  background: transparent;
  color: #35567b;
  font-size: 0.93rem;
  font-weight: 600;
}

.footer a {
  color: #1f6fbc;
}

@keyframes cloudDrift {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-220px);
  }
}

@media (max-width: 740px) {
  .hero-title {
    font-size: 1.55rem;
  }

  .hero-sub {
    font-size: 1rem;
  }

  .panel {
    border-radius: 18px;
    padding: 1rem;
  }

  .pixel-link {
    width: 100%;
  }
}

/* ---- Scenic Minecraft Background + Theme Toggle ---- */
body {
  --scene-overlay: rgba(12, 28, 48, 0.38);
  --scene-overlay-2: rgba(24, 68, 108, 0.2);
  --ui-panel: rgba(255, 255, 255, 0.56);
  --ui-panel-border: rgba(255, 255, 255, 0.68);
  --ui-text: #162236;
  --ui-muted: #3f5671;
  --ui-button: #39b74f;
  --ui-button-2: #2e9642;
  --ui-link: #2f7fce;
  --ui-shadow: 0 24px 56px rgba(16, 42, 78, 0.2);

  color: var(--ui-text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.16)),
    linear-gradient(120deg, var(--scene-overlay), var(--scene-overlay-2)),
    url("3.jpg") center center / cover no-repeat fixed;
}

body::before {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    url("1.jpg") center top / cover no-repeat fixed;
  opacity: 0.42;
  animation: slowPanA 34s linear infinite alternate;
}

body::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.16)),
    url("2.jpg") center bottom / cover no-repeat fixed;
  opacity: 0.34;
  animation: slowPanB 42s linear infinite alternate;
}

body[data-theme="dark"] {
  --scene-overlay: rgba(7, 14, 25, 0.64);
  --scene-overlay-2: rgba(18, 35, 56, 0.52);
  --ui-panel: rgba(14, 24, 38, 0.54);
  --ui-panel-border: rgba(131, 165, 203, 0.44);
  --ui-text: #e6f1ff;
  --ui-muted: #afc4de;
  --ui-button: #46ba62;
  --ui-button-2: #30874b;
  --ui-link: #7db7ff;
  --ui-shadow: 0 24px 56px rgba(2, 8, 18, 0.42);
}

.hero {
  background: color-mix(in srgb, var(--ui-panel) 40%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ui-panel-border) 85%, transparent);
}

.hero-title,
.section-title,
.info-card h3 {
  color: var(--ui-text);
}

.hero-sub,
.status-line,
.info-card p,
.info-card li,
.log-box,
.footer {
  color: var(--ui-muted);
}

.panel,
.info-card,
.drop-zone,
.file-pill,
.log-box,
.progress-wrap {
  background: var(--ui-panel);
  border-color: var(--ui-panel-border);
  box-shadow: var(--ui-shadow);
}

.panel,
.info-card,
.drop-zone,
.file-pill,
.log-box {
  backdrop-filter: blur(8px);
}

.drop-zone {
  background: color-mix(in srgb, var(--ui-panel) 72%, transparent);
}

.log-box {
  background: color-mix(in srgb, var(--ui-panel) 68%, transparent);
}

.pixel-link {
  color: var(--ui-link);
}

.pixel-link.active {
  color: #fff;
}

.pixel-btn {
  background: linear-gradient(135deg, var(--ui-button), var(--ui-button-2));
}

.theme-toggle {
  margin-top: 0.9rem;
  border: 1px solid var(--ui-panel-border);
  background: color-mix(in srgb, var(--ui-panel) 88%, transparent);
  color: var(--ui-text);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
}

@keyframes slowPanA {
  0% { transform: scale(1.06) translateX(0); }
  100% { transform: scale(1.12) translateX(-28px); }
}

@keyframes slowPanB {
  0% { transform: scale(1.04) translateX(0); }
  100% { transform: scale(1.1) translateX(24px); }
}

@media (max-width: 740px) {
  body::before,
  body::after,
  body {
    background-attachment: scroll;
  }

  .theme-toggle {
    width: 100%;
  }
}


/* ---- Consolidated page styles extracted from HTML files ---- */
/* source: about.html */
:root{
      --bg:#121212;
      --header:#1c1c28;
      --card:#1e1e1e;
      --card2:#1a1a26;
      --txt:#f0f0f0;
      --mut:#bdbdbd;
      --brand:#ffcc66;
      --r:18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:'Poppins',sans-serif;
      background:var(--bg);
      color:var(--txt);
      line-height:1.7;
    }
    a{color:inherit}

    .container{
      width:min(1100px,calc(100% - 32px));
      margin:0 auto;
    }

    /* ===== WOW HERO (same as converter vibe) ===== */
    header{
      position:relative;
      text-align:center;
      padding:3rem 1rem 2.25rem;
      background:var(--header);
      border-bottom:3px solid var(--brand);
      overflow:hidden;
    }
    header::before{
      content:"";
      position:absolute;
      width:520px;height:520px;
      right:-220px;top:-240px;
      background:radial-gradient(circle,rgba(255,204,102,.18),rgba(255,204,102,0) 60%);
      animation:glow 8s ease-in-out infinite;
      pointer-events:none;
    }
    header::after{
      content:"";
      position:absolute;
      width:640px;height:640px;
      left:-320px;bottom:-360px;
      background:radial-gradient(circle,rgba(255,204,102,.12),rgba(255,204,102,0) 62%);
      animation:glow2 10s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes glow{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-18px,18px) rotate(10deg)}}
    @keyframes glow2{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(22px,-10px) rotate(-10deg)}}

    .sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.9}
    .spark{position:absolute;width:6px;height:6px;border-radius:999px;background:rgba(255,204,102,.35);animation:float 7s linear infinite}
    .spark:nth-child(1){left:10%;top:72%;animation-duration:9s;transform:scale(.8)}
    .spark:nth-child(2){left:22%;top:22%;animation-duration:11s;transform:scale(1.1)}
    .spark:nth-child(3){left:38%;top:65%;animation-duration:10s;transform:scale(.7)}
    .spark:nth-child(4){left:58%;top:30%;animation-duration:12s;transform:scale(.9)}
    .spark:nth-child(5){left:75%;top:60%;animation-duration:9.5s;transform:scale(1.2)}
    .spark:nth-child(6){left:88%;top:20%;animation-duration:13s;transform:scale(.75)}
    @keyframes float{
      0%{transform:translateY(0) translateX(0) scale(1);opacity:.15}
      10%{opacity:.6}
      100%{transform:translateY(-120px) translateX(30px) scale(1.2);opacity:0}
    }

    header h1{
      margin:0 0 .35rem;
      font-size:clamp(2rem,3vw,2.7rem);
      color:var(--brand);
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      position:relative;
      z-index:2;
    }
    header p{
      margin:.25rem auto 0;
      font-size:1.05rem;
      color:#ccc;
      max-width:900px;
      position:relative;
      z-index:2;
    }

    nav{
      margin-top:1.5rem;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
      position:relative;
      z-index:2;
    }
    nav a{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:10px 12px;
      border-radius:12px;
      font-size:.98rem;
      font-weight:500;
      text-decoration:none;
      transition:color .25s,background .25s,transform .15s;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      backdrop-filter:blur(6px);
    }
    nav a:hover{
      color:var(--brand);
      background:rgba(255,255,255,.06);
      transform:translateY(-1px);
    }

    /* Active link style (About page) */
    nav a.active{
      color:var(--brand);
      border-color:rgba(255,204,102,.35);
      background:rgba(255,204,102,.08);
    }

    /* ===== CONTENT ===== */
    .wrap{
      padding:2.4rem 0 0;
    }

    .card{
      background:var(--card2);
      border-radius:var(--r);
      padding:2.2rem;
      margin:2rem auto;
      box-shadow:0 18px 50px rgba(0,0,0,.55);
      border:1px solid rgba(255,255,255,.06);
      position:relative;
      overflow:hidden;
      opacity:0;
      transform:translateY(14px);
      animation:enter .65s ease forwards .12s;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:linear-gradient(120deg,rgba(255,204,102,0),rgba(255,204,102,.18),rgba(255,204,102,0));
      transform:translateX(-60%);
      animation:sweep 5.2s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes sweep{0%,100%{transform:translateX(-60%)}50%{transform:translateX(60%)}}
    @keyframes enter{to{opacity:1;transform:translateY(0)}}

    .title-row{
      position:relative;
      z-index:2;
      text-align:left;
      display:flex;
      flex-wrap:wrap;
      align-items:flex-end;
      justify-content:space-between;
      gap:14px;
      margin-bottom:1.2rem;
    }
    .title-row h2{
      margin:0;
      font-size:2.1rem;
      color:var(--brand);
    }
    .subtitle{
      margin:0;
      color:#aaa;
      font-size:1.05rem;
    }

    .section{
      position:relative;
      z-index:2;
      margin-top:1.7rem;
    }
    .section h3{
      margin:0 0 .75rem;
      font-size:1.25rem;
      color:var(--brand);
      display:flex;
      align-items:center;
      gap:.55rem;
    }
    .section p{
      margin:.55rem 0 0;
      color:rgba(240,240,240,.90);
    }

    .tag{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:4px 10px;
      border-radius:999px;
      font-weight:700;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      font-size:.92rem;
    }
    .tag.brand{
      color:var(--brand);
      border-color:rgba(255,204,102,.25);
      background:rgba(255,204,102,.08);
    }

    /* Features grid (wow hover) */
    .features{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:1rem;
      margin-top:1rem;
    }
    .feature{
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.06);
      padding:1.1rem 1.1rem;
      border-radius:14px;
      display:flex;
      align-items:flex-start;
      gap:12px;
      transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
      position:relative;
      overflow:hidden;
    }
    .feature i{
      font-size:1.35rem;
      color:var(--brand);
      margin-top:2px;
      flex-shrink:0;
    }
    .feature:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 34px rgba(0,0,0,.45);
      border-color:rgba(255,204,102,.22);
    }
    .feature::after{
      content:"";
      position:absolute;
      top:0;left:-70%;
      width:40%;height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,204,102,.12),transparent);
      transform:skewX(-20deg);
      opacity:0;
    }
    .feature:hover::after{
      opacity:1;
      animation:shimmer 1.1s ease;
    }
    @keyframes shimmer{0%{left:-70%}100%{left:150%}}

    /* Steps */
    .steps{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:1rem;
      margin-top:1rem;
    }
    .step{
      border-radius:14px;
      padding:1.1rem;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(0,0,0,.18);
      transition:transform .18s ease, border-color .25s ease;
    }
    .step:hover{
      transform:translateY(-3px);
      border-color:rgba(255,204,102,.22);
    }
    .step .num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:36px;height:36px;
      border-radius:12px;
      font-weight:800;
      background:rgba(255,204,102,.12);
      color:var(--brand);
      border:1px solid rgba(255,204,102,.22);
      margin-bottom:.6rem;
    }
    .step h4{margin:.1rem 0 .2rem;color:#fff}
    .step p{margin:0;color:rgba(240,240,240,.85);font-size:.98rem}

    /* External links buttons */
    .external-links{
      margin-top:1.9rem;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:center;
    }
    .btn-link{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:12px 16px;
      border-radius:12px;
      font-size:1rem;
      font-weight:700;
      text-decoration:none;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.06);
      transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .btn-link:hover{
      transform:translateY(-3px);
      box-shadow:0 16px 30px rgba(0,0,0,.45);
      border-color:rgba(255,204,102,.22);
    }
    .btn-link.discord{background:#5865f2;color:#fff;border-color:rgba(255,255,255,.12)}
    .btn-link.github{background:#24292e;color:#fff;border-color:rgba(255,255,255,.12)}
    .btn-link.zinth{background:var(--brand);color:#222;border-color:rgba(0,0,0,.2)}

    /* Footer (same as converter) */
    footer{
      text-align:center;
      padding:2.2rem 1rem;
      background:linear-gradient(135deg,#1f1f2e,#29293d);
      color:#eee;
      margin-top:3rem;
      border-top:2px solid var(--brand);
      opacity:0;
      transform:translateY(14px);
      animation:enter .65s ease forwards .22s;
    }
    footer a{
      color:var(--brand);
      text-decoration:none;
      font-weight:700;
    }
    footer a:hover{text-decoration:underline}

    /* Motion safety */
    @media (prefers-reduced-motion: reduce){
      *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
    }
    @media (max-width:520px){
      header{padding:2.4rem 1rem 1.8rem}
      .card{padding:1.35rem}
      nav a{padding:9px 10px;font-size:.95rem}
      .title-row{flex-direction:column;align-items:flex-start}
    }

/* source: discord.html */
:root{
      --bg:#121212;
      --header:#1c1c28;
      --card:#1e1e1e;
      --txt:#e0e0e0;
      --brand:#ffcc66;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:'Poppins',sans-serif;
      background:var(--bg);
      color:var(--txt);
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }
    a{color:inherit}

    /* ===== HEADER ===== */
    header{
      position:relative;
      text-align:center;
      padding:3rem 1rem 2.2rem;
      background:var(--header);
      border-bottom:3px solid var(--brand);
      overflow:hidden;
    }
    header::before{
      content:"";
      position:absolute;
      width:520px;height:520px;
      right:-220px;top:-240px;
      background:radial-gradient(circle,rgba(255,204,102,.18),rgba(255,204,102,0) 60%);
      animation:glow 8s ease-in-out infinite;
    }
    header::after{
      content:"";
      position:absolute;
      width:640px;height:640px;
      left:-320px;bottom:-360px;
      background:radial-gradient(circle,rgba(255,204,102,.12),rgba(255,204,102,0) 62%);
      animation:glow2 10s ease-in-out infinite;
    }
    @keyframes glow{50%{transform:translate(-18px,18px) rotate(10deg)}}
    @keyframes glow2{50%{transform:translate(22px,-10px) rotate(-10deg)}}

    .sparks{position:absolute;inset:0;pointer-events:none}
    .spark{
      position:absolute;width:6px;height:6px;border-radius:999px;
      background:rgba(255,204,102,.35);
      animation:float 8s linear infinite;
    }
    .spark:nth-child(1){left:12%;top:70%}
    .spark:nth-child(2){left:30%;top:25%}
    .spark:nth-child(3){left:52%;top:65%}
    .spark:nth-child(4){left:70%;top:35%}
    .spark:nth-child(5){left:85%;top:22%}
    @keyframes float{
      from{transform:translateY(0);opacity:.5}
      to{transform:translateY(-140px);opacity:0}
    }

    header h1{
      margin:0 0 .4rem;
      font-size:clamp(2rem,3vw,2.7rem);
      color:var(--brand);
      display:inline-flex;
      gap:.6rem;
      align-items:center;
    }
    header p{color:#ccc;margin:0}

    nav{
      margin-top:1.5rem;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
    }
    nav a{
      padding:10px 12px;
      border-radius:12px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      text-decoration:none;
      font-weight:500;
      transition:.2s;
    }
    nav a:hover{color:var(--brand)}
    nav a.active{
      color:var(--brand);
      background:rgba(255,204,102,.08);
      border-color:rgba(255,204,102,.3);
    }

    /* ===== MAIN ===== */
    main{
      flex:1;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:2.5rem 1rem;
    }
    .card{
      background:var(--card);
      border-radius:18px;
      padding:2.5rem;
      max-width:820px;
      width:100%;
      text-align:center;
      box-shadow:0 18px 50px rgba(0,0,0,.55);
      border:1px solid rgba(255,255,255,.06);
      opacity:0;
      transform:translateY(14px);
      animation:enter .7s ease forwards;
      position:relative;
      overflow:hidden;
    }
    @keyframes enter{to{opacity:1;transform:translateY(0)}}
    .card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:linear-gradient(120deg,transparent,rgba(255,204,102,.18),transparent);
      transform:translateX(-60%);
      animation:sweep 5s ease-in-out infinite;
    }
    @keyframes sweep{50%{transform:translateX(60%)}}

    .discord-logo{
      font-size:5rem;
      color:#5865F2;
      margin-bottom:1rem;
      animation:floaty 3s ease-in-out infinite;
    }
    @keyframes floaty{50%{transform:translateY(-8px)}}

    .card h2{color:var(--brand);margin:.2rem 0}
    .card p{color:#ddd;max-width:680px;margin:.8rem auto 1.4rem}

    .discord-btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:14px 26px;
      border-radius:12px;
      background:#5865F2;
      color:white;
      font-weight:800;
      text-decoration:none;
      transition:.25s;
    }
    .discord-btn:hover{
      background:#4752c4;
      transform:translateY(-3px);
      box-shadow:0 14px 30px rgba(0,0,0,.45);
    }

    /* ===== FOOTER ===== */
    footer{
      text-align:center;
      padding:2.2rem 1rem;
      background:linear-gradient(135deg,#1f1f2e,#29293d);
      border-top:2px solid var(--brand);
    }
    .footer-icons a{
      margin:0 12px;
      font-size:1.5rem;
      transition:.2s;
      display:inline-block;
    }
    .footer-icons a:hover{color:var(--brand);transform:scale(1.15)}
    footer a{color:var(--brand);font-weight:700;text-decoration:none}

    @media (prefers-reduced-motion: reduce){
      *{animation:none!important;transition:none!important}
    }

/* source: feedback.html */
:root{
      --bg:#121212;
      --header:#1c1c28;
      --card:#1e1e1e;
      --card2:#1a1a26;
      --txt:#e0e0e0;
      --mut:#c9c9c9;
      --brand:#ffcc66;
      --r:18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      font-family:'Poppins',sans-serif;
      margin:0;
      padding:0;
      background:var(--bg);
      color:var(--txt);
      min-height:100vh;
      display:flex;
      flex-direction:column;
      line-height:1.6;
    }
    a{color:inherit}
    .container{
      width:min(1100px,calc(100% - 32px));
      margin:0 auto;
    }

    /* ===== WOW HERO ===== */
    header{
      position:relative;
      text-align:center;
      padding:3rem 1rem 2.25rem;
      background:var(--header);
      border-bottom:3px solid var(--brand);
      overflow:hidden;
    }
    header::before{
      content:"";
      position:absolute;
      width:520px;height:520px;
      right:-220px;top:-240px;
      background:radial-gradient(circle,rgba(255,204,102,.18),rgba(255,204,102,0) 60%);
      animation:glow 8s ease-in-out infinite;
      pointer-events:none;
    }
    header::after{
      content:"";
      position:absolute;
      width:640px;height:640px;
      left:-320px;bottom:-360px;
      background:radial-gradient(circle,rgba(255,204,102,.12),rgba(255,204,102,0) 62%);
      animation:glow2 10s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes glow{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-18px,18px) rotate(10deg)}}
    @keyframes glow2{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(22px,-10px) rotate(-10deg)}}

    .sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.9}
    .spark{position:absolute;width:6px;height:6px;border-radius:999px;background:rgba(255,204,102,.35);animation:float 7s linear infinite}
    .spark:nth-child(1){left:10%;top:72%;animation-duration:9s;transform:scale(.8)}
    .spark:nth-child(2){left:22%;top:22%;animation-duration:11s;transform:scale(1.1)}
    .spark:nth-child(3){left:38%;top:65%;animation-duration:10s;transform:scale(.7)}
    .spark:nth-child(4){left:58%;top:30%;animation-duration:12s;transform:scale(.9)}
    .spark:nth-child(5){left:75%;top:60%;animation-duration:9.5s;transform:scale(1.2)}
    .spark:nth-child(6){left:88%;top:20%;animation-duration:13s;transform:scale(.75)}
    @keyframes float{
      0%{transform:translateY(0) translateX(0) scale(1);opacity:.15}
      10%{opacity:.6}
      100%{transform:translateY(-120px) translateX(30px) scale(1.2);opacity:0}
    }

    header .container{position:relative;z-index:2}
    header h1{
      margin:0 0 .35rem;
      font-size:clamp(2rem,3vw,2.7rem);
      color:var(--brand);
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      letter-spacing:.2px;
    }
    header p{
      margin:.25rem auto 0;
      font-size:1.05rem;
      color:#ccc;
      max-width:900px;
    }

    nav{
      margin-top:1.5rem;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
    }
    nav a{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:10px 12px;
      border-radius:12px;
      font-size:.98rem;
      font-weight:500;
      text-decoration:none;
      transition:color .25s,background .25s,transform .15s;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      backdrop-filter:blur(6px);
    }
    nav a:hover{
      color:var(--brand);
      background:rgba(255,255,255,.06);
      transform:translateY(-1px);
    }
    nav a.active{
      color:var(--brand);
      border-color:rgba(255,204,102,.35);
      background:rgba(255,204,102,.08);
    }

    /* ===== MAIN ===== */
    main{flex:1}
    .wrap{padding:2rem 0 0}
    .card{
      background:var(--card);
      border-radius:16px;
      padding:2.2rem;
      box-shadow:0 18px 50px rgba(0,0,0,.55);
      border:1px solid rgba(255,255,255,.06);
      position:relative;
      overflow:hidden;
      opacity:0;
      transform:translateY(14px);
      animation:enter .65s ease forwards .12s;
      text-align:left;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:linear-gradient(120deg,rgba(255,204,102,0),rgba(255,204,102,.18),rgba(255,204,102,0));
      transform:translateX(-60%);
      animation:sweep 5.2s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes sweep{0%,100%{transform:translateX(-60%)}50%{transform:translateX(60%)}}
    @keyframes enter{to{opacity:1;transform:translateY(0)}}

    .card-head{
      position:relative;
      z-index:2;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:1.2rem;
    }
    .card h2{
      margin:0;
      font-size:1.9rem;
      color:var(--brand);
      display:flex;
      align-items:center;
      gap:.55rem;
    }
    .card p{
      margin:.5rem 0 0;
      color:rgba(224,224,224,.88);
      max-width:760px;
    }
    .hint{
      position:relative;
      z-index:2;
      margin-top:.9rem;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      font-size:.95rem;
      color:rgba(224,224,224,.85);
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      font-weight:700;
    }
    .pill.brand{
      color:var(--brand);
      background:rgba(255,204,102,.08);
      border-color:rgba(255,204,102,.22);
    }

    /* ===== FORM ===== */
    form{
      position:relative;
      z-index:2;
      margin-top:1.3rem;
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    label{
      font-size:.95rem;
      color:rgba(224,224,224,.90);
      font-weight:600;
      display:flex;
      align-items:center;
      gap:.5rem;
    }
    .row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    input,textarea,select{
      width:100%;
      padding:14px;
      border:none;
      border-radius:12px;
      background:#2a2a2a;
      color:#e0e0e0;
      font-size:15px;
      outline:none;
      transition:background .25s, transform .15s, box-shadow .2s;
      border:1px solid rgba(255,255,255,.06);
    }
    input:focus,textarea:focus,select:focus{
      background:#333;
      box-shadow:0 0 0 3px rgba(255,204,102,.14);
      transform:translateY(-1px);
    }
    textarea{resize:vertical;min-height:140px}
    input::placeholder,textarea::placeholder{color:rgba(255,255,255,.6)}
    select option{color:#111}

    .actions{
      display:flex;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
      margin-top:2px;
    }
    button{
      padding:14px 16px;
      background:var(--brand);
      color:#121212;
      border:none;
      border-radius:12px;
      font-size:1rem;
      font-weight:800;
      cursor:pointer;
      transition:background .25s, transform .15s, box-shadow .2s;
      box-shadow:0 12px 22px rgba(0,0,0,.35);
      display:inline-flex;
      align-items:center;
      gap:10px;
    }
    button:hover{background:#e6b955;transform:translateY(-2px)}
    button:active{transform:translateY(0) scale(.99)}
    button:disabled{opacity:.7;cursor:not-allowed;box-shadow:none}

    /* success + error */
    .success-message{
      display:none;
      margin-top:14px;
      padding:14px;
      background:rgba(40,167,69,.16);
      border:1px solid rgba(40,167,69,.55);
      color:#8df0a3;
      border-radius:12px;
      text-align:center;
      font-weight:700;
      position:relative;
      z-index:2;
      animation:pop .28s ease;
    }
    @keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

    .error-message{
      display:none;
      margin-top:14px;
      padding:14px;
      background:rgba(220,53,69,.16);
      border:1px solid rgba(220,53,69,.55);
      color:#ffb3bd;
      border-radius:12px;
      text-align:center;
      font-weight:700;
      position:relative;
      z-index:2;
      animation:pop .28s ease;
    }

    /* ===== FOOTER (same as other pages) ===== */
    footer{
      text-align:center;
      padding:2.2rem 1rem;
      background:linear-gradient(135deg,#1f1f2e,#29293d);
      color:#eee;
      border-top:2px solid var(--brand);
      margin-top:2.4rem;
      opacity:0;
      transform:translateY(14px);
      animation:enter .65s ease forwards .22s;
    }
    .footer-icons a{
      color:#eee;
      margin:0 12px;
      font-size:1.5rem;
      transition:color .2s, transform .2s;
      display:inline-block;
    }
    .footer-icons a:hover{color:var(--brand);transform:scale(1.15)}
    footer a{color:var(--brand);text-decoration:none;font-weight:800}
    footer a:hover{text-decoration:underline}

    /* Motion safety */
    @media (prefers-reduced-motion: reduce){
      *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    }

/* ===== Global Unified Theme Layer (Final) ===== */
:root {
  --site-glass: rgba(255, 255, 255, 0.34);
  --site-glass-border: rgba(255, 255, 255, 0.66);
  --site-text: #102641;
  --site-muted: #2f4f70;
  --site-accent: #1f78d7;
  --site-cta: #2ea84c;
  --site-cta-2: #247f3c;
  --site-shadow: 0 14px 28px rgba(14, 42, 76, 0.18);
}

body[data-theme="dark"] {
  --site-glass: rgba(8, 18, 32, 0.42);
  --site-glass-border: rgba(132, 168, 208, 0.42);
  --site-text: #ecf3ff;
  --site-muted: #b6c9e0;
  --site-accent: #84bfff;
  --site-shadow: 0 16px 30px rgba(2, 8, 18, 0.34);
}

body,
body p,
body li,
body span,
body a,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif !important;
}

body {
  color: var(--site-text);
}

header,
.hero,
main,
section,
article,
.card,
.panel,
.info-card,
.upload-section,
.drop-zone,
.file-pill,
.log-box,
.progress-wrap,
footer,
.toc,
.note {
  border-color: var(--site-glass-border) !important;
  background: var(--site-glass) !important;
  color: var(--site-text) !important;
  box-shadow: var(--site-shadow) !important;
  backdrop-filter: blur(5px);
}

.hero-sub,
.status-line,
.subtext,
.card p,
.info-card p,
.info-card li,
.footer,
footer,
.note,
.log-box,
pre {
  color: var(--site-muted) !important;
}

nav a,
.pixel-link,
.btn-secondary,
.toc a {
  background: rgba(255, 255, 255, 0.6) !important;
  color: var(--site-accent) !important;
  border: 1px solid var(--site-glass-border) !important;
  border-radius: 999px !important;
}

nav a.active,
.pixel-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, #2d8cf0, #3cbaf8) !important;
}

button,
.pixel-btn,
.btn,
#uploadBtn,
.close-btn,
.btn-primary {
  background: linear-gradient(135deg, var(--site-cta), var(--site-cta-2)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
}

.progress-bar {
  background: linear-gradient(90deg, #2ea84c, #58d067, #3ca8ff) !important;
}

.theme-toggle {
  border-radius: 999px !important;
  border: 1px solid var(--site-glass-border) !important;
  background: rgba(255, 255, 255, 0.66) !important;
}

body[data-theme="dark"] .theme-toggle {
  background: rgba(12, 26, 44, 0.7) !important;
}

/* 20+ lightweight animation presets */
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes g-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes g-float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes g-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes g-float-c { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes g-hover { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes g-sheen { from { background-position: 0 0; } to { background-position: 110px 0; } }
@keyframes g-breathe { 0%,100% { opacity: 1; } 50% { opacity: 0.94; } }
@keyframes g-wave { 0%,100% { transform: translateX(0); } 50% { transform: translateX(1px); } }
@keyframes g-in-left { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes g-in-right { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes g-in-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes g-swing-soft { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(0.35deg); } }
@keyframes g-glow { 0%,100% { box-shadow: var(--site-shadow); } 50% { box-shadow: 0 18px 34px rgba(16, 42, 76, 0.24); } }
@keyframes g-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes g-slide-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes g-blink-soft { 0%,100% { opacity: 1; } 50% { opacity: 0.9; } }
@keyframes g-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes g-idle { 0%,100% { transform: scale(1); } 50% { transform: scale(1.01); } }
@keyframes g-cloud-a { from { transform: translateX(0); } to { transform: translateX(-50px); } }
@keyframes g-cloud-b { from { transform: translateX(0); } to { transform: translateX(40px); } }

/* Apply only subtle animations for low lag */
.hero-inner,
.card,
.panel,
.upload-section,
.info-card,
footer {
  animation: g-slide-up 520ms ease both;
}

.info-card:nth-child(odd) { animation: g-float-a 7s ease-in-out infinite; }
.info-card:nth-child(even) { animation: g-float-b 8s ease-in-out infinite; }
.progress-bar { animation: g-sheen 2.8s linear infinite; }

nav a:hover,
.pixel-link:hover,
button:hover,
.btn:hover,
.pixel-btn:hover {
  animation: g-hover 200ms ease both;
}

/* Mini games widget */
.mini-games {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  width: 260px;
  max-width: calc(100vw - 20px);
  border: 1px solid var(--site-glass-border);
  border-radius: 14px;
  background: var(--site-glass);
  box-shadow: var(--site-shadow);
  backdrop-filter: blur(6px);
}

.mini-games__toggle {
  width: 100%;
  border-radius: 12px;
  border: 0;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
}

.mini-games__panel { padding: 10px; }
.mini-games--collapsed .mini-games__panel { display: none; }
.mini-games__title { margin: 0 0 8px; font-size: 0.95rem; color: var(--site-text); }
.mini-games__tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.mini-games__tab {
  flex: 1;
  border: 1px solid var(--site-glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--site-accent);
  font-size: 0.78rem;
  padding: 6px 8px;
  cursor: pointer;
}
.mini-games__tab.is-active { background: linear-gradient(135deg, #2d8cf0, #3cbaf8); color: #fff; }
.mini-games__text { margin: 0 0 8px; font-size: 0.78rem; color: var(--site-muted); }
.mini-games__row { display: flex; align-items: center; gap: 6px; }
.mini-games__row span { font-size: 0.78rem; color: var(--site-muted); }
.mini-games__row input { width: 64px; padding: 5px 7px; border-radius: 8px; border: 1px solid var(--site-glass-border); }
.mini-games__row button { flex: 1; padding: 6px 8px; border-radius: 9px; border: 0; cursor: pointer; }
.mini-games__result { margin: 8px 0 0; font-size: 0.78rem; color: var(--site-muted); }

.mini-games__click-area {
  position: relative;
  height: 92px;
  border: 1px solid var(--site-glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
  margin-bottom: 8px;
}

.mini-games__target {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #2ea84c, #65d96a);
  cursor: pointer;
  transition: transform 120ms ease;
}

@media (max-width: 780px) {
  .info-card:nth-child(odd),
  .info-card:nth-child(even),
  .progress-bar {
    animation: none;
  }

  .mini-games {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-inner,
  .card,
  .panel,
  .upload-section,
  .info-card,
  .progress-bar,
  footer,
  nav a:hover,
  .pixel-link:hover,
  button:hover,
  .btn:hover,
  .pixel-btn:hover {
    animation: none !important;
  }
}

/* ===== Final Scenic Clarity + Performance Animations ===== */
body {
  --final-panel: rgba(255, 255, 255, 0.42);
  --final-panel-border: rgba(255, 255, 255, 0.72);
  --final-text: #0f223a;
  --final-muted: #2e4b68;
  --final-link: #1f6fbc;
  --final-shadow: 0 16px 34px rgba(16, 42, 78, 0.18);
  color: var(--final-text);
}

body[data-theme="dark"] {
  --final-panel: rgba(9, 20, 34, 0.44);
  --final-panel-border: rgba(138, 176, 218, 0.45);
  --final-text: #edf4ff;
  --final-muted: #b7c9df;
  --final-link: #8ec1ff;
  --final-shadow: 0 18px 36px rgba(2, 8, 18, 0.36);
}

body::before {
  opacity: 0.24;
}

body::after {
  opacity: 0.2;
}

.hero-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 2rem 1rem 1.55rem;
  border-radius: 24px;
  border: 1px solid var(--final-panel-border);
  background: var(--final-panel);
  box-shadow: var(--final-shadow);
  backdrop-filter: blur(5px);
}

.hero-title {
  color: var(--final-text);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.24);
}

.hero-sub,
.status-line,
.footer,
.info-card p,
.info-card li,
.log-box {
  color: var(--final-muted);
}

.section-title,
.info-card h3 {
  color: var(--final-text);
}

.panel,
.info-card,
.drop-zone,
.file-pill,
.progress-wrap,
.log-box {
  background: var(--final-panel);
  border-color: var(--final-panel-border);
  box-shadow: var(--final-shadow);
  backdrop-filter: blur(4px);
}

.pixel-link {
  color: var(--final-link);
}

.drop-zone p,
.file-pill {
  color: var(--final-muted);
}

.log-box {
  background: color-mix(in srgb, var(--final-panel) 88%, transparent);
}

/* Lightweight animation runtime: transform/opacity only. */
.hero-inner,
.hero-title,
.hero-sub,
.pixel-link,
.theme-toggle,
.panel,
.info-card,
.drop-zone,
.pixel-btn,
.footer {
  will-change: transform, opacity;
}

.hero-inner { animation: fx-fade-in 720ms ease-out both; }
.hero-title { animation: fx-rise-soft 680ms ease-out both 80ms; }
.hero-sub { animation: fx-fade-up 760ms ease-out both 130ms; }

.pixel-nav .pixel-link:nth-child(1) { animation: fx-pop-in 420ms ease-out both 180ms; }
.pixel-nav .pixel-link:nth-child(2) { animation: fx-pop-in 420ms ease-out both 230ms; }
.pixel-nav .pixel-link:nth-child(3) { animation: fx-pop-in 420ms ease-out both 280ms; }
.pixel-nav .pixel-link:nth-child(4) { animation: fx-pop-in 420ms ease-out both 330ms; }
.pixel-nav .pixel-link:nth-child(5) { animation: fx-pop-in 420ms ease-out both 380ms; }

.theme-toggle { animation: fx-breathe 4.2s ease-in-out infinite; }
.panel:nth-of-type(1) { animation: fx-slide-up 640ms ease-out both 160ms; }
.panel:nth-of-type(2) { animation: fx-slide-up 640ms ease-out both 260ms; }
.panel:nth-of-type(3) { animation: fx-slide-up 640ms ease-out both 360ms; }

.info-card:nth-child(odd) { animation: fx-float-a 8s ease-in-out infinite; }
.info-card:nth-child(even) { animation: fx-float-b 9s ease-in-out infinite; }

.drop-zone { animation: fx-soft-pulse 6.5s ease-in-out infinite; }
.progress-bar { animation: fx-progress-sheen 2.6s linear infinite; }
.footer { animation: fx-fade-in 760ms ease-out both 420ms; }

.pixel-btn:hover { animation: fx-hover-lift 240ms ease-out both; }
.pixel-link:hover { animation: fx-hover-lift 220ms ease-out both; }
.theme-toggle:hover { animation: fx-hover-lift 220ms ease-out both; }

/* 22 low-cost keyframes */
@keyframes fx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fx-fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fx-rise-soft { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fx-pop-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fx-slide-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fx-slide-right { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fx-slide-left { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fx-float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fx-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes fx-float-c { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes fx-soft-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.006); opacity: 0.98; } }
@keyframes fx-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes fx-hover-lift { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes fx-progress-sheen { from { background-position: 0 0; } to { background-position: 120px 0; } }
@keyframes fx-glow-soft { 0%,100% { opacity: 0.9; } 50% { opacity: 1; } }
@keyframes fx-orbit-a { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fx-orbit-b { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes fx-cloud-a { from { transform: translateX(0); } to { transform: translateX(-90px); } }
@keyframes fx-cloud-b { from { transform: translateX(0); } to { transform: translateX(80px); } }
@keyframes fx-blink-soft { 0%,100% { opacity: 1; } 50% { opacity: 0.88; } }
@keyframes fx-tilt-soft { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(0.4deg); } }

@media (prefers-reduced-motion: reduce) {
  .hero-inner,
  .hero-title,
  .hero-sub,
  .pixel-link,
  .theme-toggle,
  .panel,
  .info-card,
  .drop-zone,
  .pixel-btn,
  .footer,
  .progress-bar {
    animation: none !important;
    transform: none !important;
  }
}
    @media (max-width:700px){
      .row{grid-template-columns:1fr}
      header{padding:2.4rem 1rem 1.8rem}
      nav a{padding:9px 10px;font-size:.95rem}
      .card{padding:1.35rem}
    }

/* source: github.html */
:root{
      --bg:#121212;
      --header:#1c1c28;
      --card:#1e1e1e;
      --txt:#e0e0e0;
      --mut:#c9c9c9;
      --brand:#ffcc66;
      --r:18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      font-family:'Poppins',sans-serif;
      margin:0;
      padding:0;
      background:var(--bg);
      color:var(--txt);
      min-height:100vh;
      display:flex;
      flex-direction:column;
      line-height:1.6;
    }
    a{color:inherit}
    .container{
      width:min(1100px,calc(100% - 32px));
      margin:0 auto;
    }

    /* ===== WOW HERO ===== */
    header{
      position:relative;
      text-align:center;
      padding:3rem 1rem 2.25rem;
      background:var(--header);
      border-bottom:3px solid var(--brand);
      overflow:hidden;
    }
    header::before{
      content:"";
      position:absolute;
      width:520px;height:520px;
      right:-220px;top:-240px;
      background:radial-gradient(circle,rgba(255,204,102,.18),rgba(255,204,102,0) 60%);
      animation:glow 8s ease-in-out infinite;
      pointer-events:none;
    }
    header::after{
      content:"";
      position:absolute;
      width:640px;height:640px;
      left:-320px;bottom:-360px;
      background:radial-gradient(circle,rgba(255,204,102,.12),rgba(255,204,102,0) 62%);
      animation:glow2 10s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes glow{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-18px,18px) rotate(10deg)}}
    @keyframes glow2{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(22px,-10px) rotate(-10deg)}}

    .sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.9}
    .spark{position:absolute;width:6px;height:6px;border-radius:999px;background:rgba(255,204,102,.35);animation:float 7s linear infinite}
    .spark:nth-child(1){left:10%;top:72%;animation-duration:9s;transform:scale(.8)}
    .spark:nth-child(2){left:22%;top:22%;animation-duration:11s;transform:scale(1.1)}
    .spark:nth-child(3){left:38%;top:65%;animation-duration:10s;transform:scale(.7)}
    .spark:nth-child(4){left:58%;top:30%;animation-duration:12s;transform:scale(.9)}
    .spark:nth-child(5){left:75%;top:60%;animation-duration:9.5s;transform:scale(1.2)}
    .spark:nth-child(6){left:88%;top:20%;animation-duration:13s;transform:scale(.75)}
    @keyframes float{
      0%{transform:translateY(0) translateX(0) scale(1);opacity:.15}
      10%{opacity:.6}
      100%{transform:translateY(-120px) translateX(30px) scale(1.2);opacity:0}
    }

    header .container{position:relative;z-index:2}
    header h1{
      margin:0 0 .35rem;
      font-size:clamp(2rem,3vw,2.7rem);
      color:var(--brand);
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      letter-spacing:.2px;
    }
    header p{
      margin:.25rem auto 0;
      font-size:1.05rem;
      color:#ccc;
      max-width:900px;
    }

    nav{
      margin-top:1.5rem;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
    }
    nav a{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:10px 12px;
      border-radius:12px;
      font-size:.98rem;
      font-weight:500;
      text-decoration:none;
      transition:color .25s,background .25s,transform .15s;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      backdrop-filter:blur(6px);
    }
    nav a:hover{
      color:var(--brand);
      background:rgba(255,255,255,.06);
      transform:translateY(-1px);
    }
    nav a.active{
      color:var(--brand);
      border-color:rgba(255,204,102,.35);
      background:rgba(255,204,102,.08);
    }

    /* ===== MAIN ===== */
    main{flex:1}
    .wrap{padding:2rem 0 0}

    .card{
      background:var(--card);
      border-radius:16px;
      padding:2.2rem;
      box-shadow:0 18px 50px rgba(0,0,0,.55);
      border:1px solid rgba(255,255,255,.06);
      position:relative;
      overflow:hidden;
      opacity:0;
      transform:translateY(14px);
      animation:enter .65s ease forwards .12s;
      text-align:center;
      width:min(860px,100%);
      margin:0 auto;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:linear-gradient(120deg,rgba(255,204,102,0),rgba(255,204,102,.18),rgba(255,204,102,0));
      transform:translateX(-60%);
      animation:sweep 5.2s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes sweep{0%,100%{transform:translateX(-60%)}50%{transform:translateX(60%)}}
    @keyframes enter{to{opacity:1;transform:translateY(0)}}

    .github-logo{
      font-size:5rem;
      margin:0 0 .7rem;
      color:#f5f5f5;
      position:relative;
      z-index:2;
      animation:floaty 2.8s ease-in-out infinite;
      text-shadow:0 10px 22px rgba(0,0,0,.45);
    }
    @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

    .card h2{
      margin:.2rem 0 .6rem;
      font-size:1.95rem;
      color:var(--brand);
      position:relative;
      z-index:2;
    }
    .card p{
      margin:0 auto 1.2rem;
      max-width:720px;
      color:rgba(224,224,224,.88);
      position:relative;
      z-index:2;
    }

    .actions{
      position:relative;
      z-index:2;
      display:flex;
      gap:12px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:1rem;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:14px 18px;
      border-radius:12px;
      font-size:1rem;
      font-weight:800;
      text-decoration:none;
      transition:transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
      border:1px solid rgba(255,255,255,.10);
    }
    .btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(0,0,0,.45)}
    .btn:active{transform:translateY(0) scale(.99)}

    .btn-github{background:#24292e;color:#fff}
    .btn-github:hover{background:#333}

    .btn-profile{
      background:rgba(255,204,102,.10);
      color:var(--brand);
      border-color:rgba(255,204,102,.22);
    }
    .btn-profile:hover{
      background:rgba(255,204,102,.14);
    }

    .mini{
      position:relative;
      z-index:2;
      margin-top:1.3rem;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:center;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      font-weight:700;
      font-size:.92rem;
      color:rgba(224,224,224,.92);
    }
    .pill.brand{
      color:var(--brand);
      background:rgba(255,204,102,.08);
      border-color:rgba(255,204,102,.22);
    }

    /* ===== FOOTER ===== */
    footer{
      text-align:center;
      padding:2.2rem 1rem;
      background:linear-gradient(135deg,#1f1f2e,#29293d);
      color:#eee;
      border-top:2px solid var(--brand);
      margin-top:2.4rem;
      opacity:0;
      transform:translateY(14px);
      animation:enter .65s ease forwards .22s;
    }
    .footer-icons a{
      color:#eee;
      margin:0 12px;
      font-size:1.5rem;
      transition:color .2s, transform .2s;
      display:inline-block;
    }
    .footer-icons a:hover{color:var(--brand);transform:scale(1.15)}
    footer a{color:var(--brand);text-decoration:none;font-weight:800}
    footer a:hover{text-decoration:underline}

    /* Motion safety */
    @media (prefers-reduced-motion: reduce){
      *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    }
    @media (max-width:700px){
      header{padding:2.4rem 1rem 1.8rem}
      nav a{padding:9px 10px;font-size:.95rem}
      .card{padding:1.35rem}
      .github-logo{font-size:4.2rem}
    }

/* source: privacy-policy.html */
:root{
      --bg:#121212;
      --header:#1c1c28;
      --card:#1e1e1e;
      --card2:#1a1a26;
      --txt:#e0e0e0;
      --mut:#c9c9c9;
      --brand:#ffcc66;
      --r:18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:'Poppins',sans-serif;
      background:var(--bg);
      color:var(--txt);
      line-height:1.7;
    }
    a{color:inherit}
    .container{
      width:min(1100px,calc(100% - 32px));
      margin:0 auto;
    }

    /* ===== WOW HEADER ===== */
    header{
      position:relative;
      text-align:center;
      padding:3rem 1rem 2.25rem;
      background:var(--header);
      border-bottom:3px solid var(--brand);
      overflow:hidden;
    }
    header::before{
      content:"";
      position:absolute;
      width:520px;height:520px;
      right:-220px;top:-240px;
      background:radial-gradient(circle,rgba(255,204,102,.18),rgba(255,204,102,0) 60%);
      animation:glow 8s ease-in-out infinite;
      pointer-events:none;
    }
    header::after{
      content:"";
      position:absolute;
      width:640px;height:640px;
      left:-320px;bottom:-360px;
      background:radial-gradient(circle,rgba(255,204,102,.12),rgba(255,204,102,0) 62%);
      animation:glow2 10s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes glow{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-18px,18px) rotate(10deg)}}
    @keyframes glow2{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(22px,-10px) rotate(-10deg)}}

    .sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.9}
    .spark{position:absolute;width:6px;height:6px;border-radius:999px;background:rgba(255,204,102,.35);animation:float 7s linear infinite}
    .spark:nth-child(1){left:10%;top:72%;animation-duration:9s;transform:scale(.8)}
    .spark:nth-child(2){left:22%;top:22%;animation-duration:11s;transform:scale(1.1)}
    .spark:nth-child(3){left:38%;top:65%;animation-duration:10s;transform:scale(.7)}
    .spark:nth-child(4){left:58%;top:30%;animation-duration:12s;transform:scale(.9)}
    .spark:nth-child(5){left:75%;top:60%;animation-duration:9.5s;transform:scale(1.2)}
    .spark:nth-child(6){left:88%;top:20%;animation-duration:13s;transform:scale(.75)}
    @keyframes float{
      0%{transform:translateY(0) translateX(0) scale(1);opacity:.15}
      10%{opacity:.6}
      100%{transform:translateY(-120px) translateX(30px) scale(1.2);opacity:0}
    }

    header .container{position:relative;z-index:2}
    header h1{
      margin:0 0 .35rem;
      font-size:clamp(2rem,3vw,2.7rem);
      color:var(--brand);
      display:inline-flex;
      align-items:center;
      gap:.55rem;
    }
    header p{
      margin:.25rem auto 0;
      font-size:1.05rem;
      color:#ccc;
      max-width:900px;
    }

    nav{
      margin-top:1.5rem;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
    }
    nav a{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:10px 12px;
      border-radius:12px;
      font-size:.98rem;
      font-weight:500;
      text-decoration:none;
      transition:color .25s,background .25s,transform .15s;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      backdrop-filter:blur(6px);
    }
    nav a:hover{color:var(--brand);background:rgba(255,255,255,.06);transform:translateY(-1px)}
    nav a.active{
      color:var(--brand);
      border-color:rgba(255,204,102,.35);
      background:rgba(255,204,102,.08);
    }

    /* ===== CONTENT ===== */
    main{padding:2rem 0 0}
    .layout{
      display:grid;
      grid-template-columns: 280px 1fr;
      gap:18px;
      align-items:start;
      margin-bottom:2rem;
    }

    .toc{
      background:var(--card2);
      border:1px solid rgba(255,255,255,.06);
      border-radius:var(--r);
      padding:1rem;
      position:sticky;
      top:18px;
      box-shadow:0 18px 50px rgba(0,0,0,.35);
      opacity:0;
      transform:translateY(14px);
      animation:enter .65s ease forwards .10s;
    }
    .toc h3{
      margin:.2rem 0 .8rem;
      color:var(--brand);
      display:flex;
      align-items:center;
      gap:.55rem;
      font-size:1.05rem;
    }
    .toc a{
      display:block;
      padding:10px 10px;
      border-radius:12px;
      text-decoration:none;
      color:rgba(224,224,224,.90);
      font-weight:600;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.04);
      margin:.55rem 0;
      transition:.2s;
    }
    .toc a:hover{
      color:var(--brand);
      border-color:rgba(255,204,102,.18);
      transform:translateY(-1px);
    }

    .card{
      background:var(--card);
      border-radius:var(--r);
      padding:2rem 2rem;
      box-shadow:0 18px 50px rgba(0,0,0,.55);
      border:1px solid rgba(255,255,255,.06);
      position:relative;
      overflow:hidden;
      opacity:0;
      transform:translateY(14px);
      animation:enter .65s ease forwards .14s;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:linear-gradient(120deg,rgba(255,204,102,0),rgba(255,204,102,.18),rgba(255,204,102,0));
      transform:translateX(-60%);
      animation:sweep 5.2s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes sweep{0%,100%{transform:translateX(-60%)}50%{transform:translateX(60%)}}
    @keyframes enter{to{opacity:1;transform:translateY(0)}}

    .meta{
      position:relative;
      z-index:2;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-bottom:1rem;
      color:rgba(224,224,224,.88);
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      font-weight:700;
      font-size:.92rem;
    }
    .pill.brand{
      color:var(--brand);
      background:rgba(255,204,102,.08);
      border-color:rgba(255,204,102,.22);
    }

    .card h2{
      position:relative;
      z-index:2;
      margin:1.4rem 0 .55rem;
      color:var(--brand);
      font-size:1.25rem;
      display:flex;
      align-items:center;
      gap:.55rem;
    }
    .card h1{
      position:relative;
      z-index:2;
      margin:.2rem 0 .4rem;
      color:var(--brand);
      font-size:2.1rem;
      letter-spacing:.2px;
    }
    .card p, .card ul{
      position:relative;
      z-index:2;
      margin:.65rem 0;
      color:rgba(224,224,224,.90);
    }
    .card ul{padding-left:1.1rem}
    .card li{margin:.45rem 0}

    .note{
      position:relative;
      z-index:2;
      margin-top:1rem;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(255,204,102,.22);
      background:rgba(255,204,102,.08);
      color:rgba(255,255,255,.92);
      font-weight:700;
    }

    /* ===== FOOTER ===== */
    footer{
      text-align:center;
      padding:2.2rem 1rem;
      background:linear-gradient(135deg,#1f1f2e,#29293d);
      color:#eee;
      margin-top:3rem;
      border-top:2px solid var(--brand);
      opacity:0;
      transform:translateY(14px);
      animation:enter .65s ease forwards .22s;
    }
    footer a{color:var(--brand);text-decoration:none;font-weight:800}
    footer a:hover{text-decoration:underline}

    /* Responsive */
    @media (max-width: 900px){
      .layout{grid-template-columns:1fr}
      .toc{position:relative;top:auto}
    }
    @media (max-width:520px){
      header{padding:2.4rem 1rem 1.8rem}
      nav a{padding:9px 10px;font-size:.95rem}
      .card{padding:1.35rem}
    }
    @media (prefers-reduced-motion: reduce){
      *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    }