html { scroll-behavior: smooth; }
    body {
      position: relative;
      overflow-x: hidden;
      font-family: "Segoe UI", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(249,115,22,.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(249,115,22,.18), transparent 28%),
        radial-gradient(circle at top right, rgba(125,211,252,.16), transparent 24%),
        linear-gradient(180deg, #0b1220 0%, #0f172a 48%, #0b1220 100%);
    }
    html:not(.dark) body {
      background:
        radial-gradient(circle at top left, rgba(249,115,22,.10), transparent 28%),
        radial-gradient(circle at bottom right, rgba(249,115,22,.10), transparent 28%),
        radial-gradient(circle at top right, rgba(14,165,233,.10), transparent 24%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 48%, #f8fafc 100%);
      color: #0f172a;
    }
    .grid-overlay {
      background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 34px 34px;
    }
    html:not(.dark) .grid-overlay {
      background-image:
        linear-gradient(rgba(15,23,42,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.06) 1px, transparent 1px);
    }
    .mono { font-family: "Consolas", "SFMono-Regular", "Liberation Mono", monospace; }
    .page-art {
      position: absolute;
      left: 50%;
      top: calc(5.75rem + 700px);
      z-index: -20;
      width: min(92vw, 82rem);
      aspect-ratio: 1458 / 1041;
      background:
        radial-gradient(circle at center, rgba(11,18,32,.08) 0%, rgba(11,18,32,.52) 58%, rgba(11,18,32,.9) 100%),
        url("../pictures/banner-arma3.png") center / cover no-repeat;
      opacity: .21;
      filter: saturate(.82) contrast(1.04);
      pointer-events: none;
      transform: translate3d(-50%, 0, 0);
      transform-origin: center top;
      will-change: transform;
    }
    html:not(.dark) .page-art {
      background:
        radial-gradient(circle at center, rgba(248,250,252,.04) 0%, rgba(248,250,252,.52) 58%, rgba(248,250,252,.9) 100%),
        url("../pictures/banner-arma3.png") center / cover no-repeat;
      opacity: .12;
      filter: saturate(.72) contrast(.96);
    }
    @media (max-width: 768px) {
      .page-art {
        top: calc(5.25rem + 630px);
        width: 135vw;
        opacity: .16;
      }
      html:not(.dark) .page-art {
        opacity: .09;
      }
    }
    html:not(.dark) .bg-slate-950\/70,
    html:not(.dark) .bg-slate-900\/75,
    html:not(.dark) .bg-white\/5 {
      background-color: rgba(255,255,255,.72) !important;
    }
    html:not(.dark) .border-white\/10,
    html:not(.dark) .border-white\/15 {
      border-color: rgba(15,23,42,.12) !important;
    }
    html:not(.dark) .text-white { color: #0f172a !important; }
    html:not(.dark) .text-slate-300,
    html:not(.dark) .text-slate-400 { color: #475569 !important; }
    html:not(.dark) .shadow-glow {
      box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 20px 80px rgba(15,23,42,.08) !important;
    }
    html:not(.dark) header,
    html:not(.dark) footer {
      background-color: rgba(255,255,255,.74) !important;
    }
    #gallery-stage {
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }
    .gallery-thumb.active {
      border-color: rgba(125,211,252,.9) !important;
      transform: translateY(-2px);
    }
    .mod-details {
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(2,6,23,.58);
      border-radius: 1.25rem;
      overflow: hidden;
    }
    .mod-details summary {
      list-style: none;
      cursor: pointer;
    }
    .mod-details summary::-webkit-details-marker {
      display: none;
    }
    .mod-details[open] .mod-chevron {
      transform: rotate(180deg);
    }
    .mod-list-grid {
      display: grid;
      gap: .75rem;
    }
    .mod-pill {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 1rem;
      background: rgba(255,255,255,.04);
      padding: .9rem 1rem;
    }
    .mod-pill-name {
      color: #fff;
      font-weight: 700;
      line-height: 1.35;
    }
    .mod-pill-meta {
      flex-shrink: 0;
      color: #7dd3fc;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .mod-pill-link {
      word-break: break-all;
      color: #cbd5e1;
      font-size: .9rem;
      line-height: 1.5;
      text-decoration: none;
    }
    .mod-pill-link:hover {
      color: #fff;
    }
    html:not(.dark) .mod-details {
      border-color: rgba(15,23,42,.10);
      background: rgba(255,255,255,.72);
    }
    html:not(.dark) .mod-pill {
      border-color: rgba(15,23,42,.08);
      background: rgba(15,23,42,.03);
    }
    html:not(.dark) .mod-pill-name {
      color: #0f172a;
    }
    html:not(.dark) .mod-pill-link {
      color: #334155;
    }