:root {
  --slide-color: hsl(18, 100%, 50%);
  --active-color: 18; /* fallback */
  --theme: hsl(var(--active-color), 100%, 50%);
  --glow-sens: 30;
  --card-bg: radial-gradient(at bottom right, #101010 20%, #272024);
  --blend: soft-light;
  --glow-blend: plus-lighter;
  --glow-blend2: screen;
  --glow-color: 281 73.8% 82%;
  --glow-line: var(--slide-color);
  /* Darkened overall page background (near-black with subtle depth) */
  --mainbg: radial-gradient(at 25% 20%, hsl(260 15% 6%), hsl(260 10% 3%));
  /* Neutral panel surface slightly lighter than --mainbg for section containers */
  /* Panel surface: bring gray closer to main background (subtle separation only) */
  --panel-bg: linear-gradient(145deg, hsl(260 10% 9%), hsl(260 10% 5%));
  --fg: white;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --icon-1: hsl(var(--active-color), 5%, 90%);
  --icon-2: hsl(var(--active-color), 77%, 50%);
  --icon-2-light: hsl(var(--active-color), 77%, 70%);
  --icon-2-dark: hsl(var(--active-color), 77%, 30%);
  --icon-2-trans: hsla(var(--active-color), 77%, 25%, 0.3);
  --icon-3: hsl(var(--active-color), 50%, 15%);
  --icon-4: hsl(var(--active-color), 25%, 10%);
  --icon-5: hsl(calc(var(--active-color)-70), 5%, 35%);
  --icon-6: hsl(calc(var(--active-color)-70), 3%, 25%);
  --icon-7: hsl(calc(var(--active-color)-70), 2%, 10%);
  --icon-7-trans: hsla(calc(var(--active-color)-70), 2%, 10%, 0.3);
  --icon-8: hsl(calc(var(--active-color)-70), 5%, 95%);
  /* particle colors used by GoopeyNav (fallbacks for --color-N) */
  /* particle/color fallbacks all use the same translucent active color */
  --color-1: var(--icon-2-trans);
  --color-2: var(--icon-2-trans);
  --color-3: var(--icon-2-trans);
  --color-4: var(--icon-2-trans);
  --dbbtn-left: radial-gradient(
    at top left,
    hsla(calc(var(--active-color) + 10), 100%, 80%, 0.15),
    hsla(calc(var(--active-color) - 10), 100%, 30%, 0.5)
  );
  --bggr: linear-gradient(
    hsla(calc(var(--active-color) + 10), 25%, 25%, 0.15),
    hsla(calc(var(--active-color) - 10), 7%, 7%, 0.55)
    );

  --gr1: radial-gradient(
    at bottom right,
    hsla(calc(var(--active-color) + 10), 100%, 80%, 0.85),
    hsla(calc(var(--active-color) - 10), 100%, 45%, 0.75)
  );

  --gr2: radial-gradient(
    at bottom right,
    hsl(calc(var(--active-color) + 10), 100%, 55%),
    hsl(calc(var(--active-color) - 10), 100%, 30%)
  );
  --gr3: radial-gradient(
    at bottom right,
    hsla(calc(var(--active-color) + 10), 4%, 2%, 0.80),
    hsla(calc(var(--active-color) - 10), 9%, 5%, 0.95)
  );
  --gr4: radial-gradient(
    at bottom right,
    hsla(calc(var(--active-color) + 10), 7%, 5%, 0.20),
    hsla(calc(var(--active-color) - 10), 15%, 12%, 0.45)
  );
  --gr5: radial-gradient(
    at bottom right,
    hsla(calc(var(--active-color) + 10), 7%, 92%, 0.20),
    hsla(calc(var(--active-color) - 10), 15%, 80%, 0.45)
  );
  --glow-border:
  radial-gradient(at 80% 55%, hsla(calc(var(--active-color) + 20), 100%, 76%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 69% 34%, hsla(calc(var(--active-color) + 65), 100%, 74%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 8% 6%,  hsla(calc(var(--active-color) - 20), 100%, 78%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 41% 38%, hsla(calc(var(--active-color) + 1), 100%, 64%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 86% 85%, hsla(calc(var(--active-color) - 60), 100%, 74%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 82% 18%, hsla(calc(var(--active-color) - 95), 100%, 65%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 51% 4%,  hsla(calc(var(--active-color) + 35), 100%, 72%, 1) 0px, transparent 50%) padding-box,
  linear-gradient(hsla(calc(var(--active-color) + 1), 100%, 80%, 1) 0 100%) padding-box;

  --alt-glow-border:
  radial-gradient(at 80% 55%, hsla(calc(var(--active-color) + 20 - 180), 100%, 76%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 69% 34%, hsla(calc(var(--active-color) + 65 - 180), 100%, 74%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 8% 6%,  hsla(calc(var(--active-color) - 20 - 180), 100%, 78%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 41% 38%, hsla(calc(var(--active-color) + 1 - 180), 100%, 64%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 86% 85%, hsla(calc(var(--active-color) - 60 - 180), 100%, 74%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 82% 18%, hsla(calc(var(--active-color) - 95 - 180), 100%, 65%, 1) 0px, transparent 50%) padding-box,
  radial-gradient(at 51% 4%,  hsla(calc(var(--active-color) + 35 - 180), 100%, 72%, 1) 0px, transparent 50%) padding-box,
  linear-gradient(hsla(calc(var(--active-color) + 1), 100%, 80%, 1) 0 100%) padding-box;
  }

body {
  --page-inline-pad: 0rem; /* single source of truth for horizontal gutter */
  background: var(--mainbg);
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, sans-serif;
  display: block; /* use normal document flow to avoid forcing every page into a flex layout */
  padding: 0 var(--page-inline-pad) 2rem; /* horizontal gutter and bottom spacing; top padding is added by Header.css */
  box-sizing: border-box;
  color: var(--fg);
  overflow-x: hidden; /* prevent horizontal scroll from bleed adjustments */
}

/* Utility container to center page content when needed */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
  box-sizing: border-box;
}



/* Target the entire scrollbar */
::-webkit-scrollbar {
  width: 1.7rem;         /* vertical scrollbar width */
  height: 0px;        /* horizontal scrollbar height */
  background-blend-mode: luminosity;
  mix-blend-mode: var(--blend);
  position: absolute;
}

/* Background (track) */
::-webkit-scrollbar-track {
  background: var(--icon-4); 
  border-radius: 10px;
}

/* The draggable part (thumb) */
::-webkit-scrollbar-thumb {
  background: var(--gr2);
  transition: all 0.4s ease;
  border-radius: 1.2rem;
  border: 3px solid var(--icon-4); /* creates padding around */
}

/* Hover effect */
::-webkit-scrollbar-thumb:hover {
  background: var(--icon-2);
  transform: scale(1.05);
}

/* Corner (when both scrollbars meet) */
::-webkit-scrollbar-corner {
  background: var(--icon-4);
}

/* Basic responsive media reset */
img, picture, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent the slider or media from causing layout overflow */
/* Full-bleed slider: counteract body horizontal padding so media touches viewport edges */
.wrapper-slider {
  margin-inline: calc(-1 * var(--page-inline-pad));
  width: calc(100% + (var(--page-inline-pad) * 2));
  box-sizing: border-box;
}
.swiper, .swiper-slide, .item { width: 100%; box-sizing: border-box; }