:root {
  --background-image: url("backgrounds/downsampled/10-6.png");
  --theme-rgb: 64 32 96;
  --glass-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  --sidebar-width: 24rem;
  --sidebar-scroll-offset: 5px;
  --content-scroll-offset: 5px;
  --content-scroll-inset-y: 0.5rem;
  --page-inline-padding: clamp(var(--space-6), 4vw, var(--space-10));
  --launchpad-column-count: 5;
  --site-background-bleed: 0rem;
  --site-background-scale: 1.12;
  --site-background-blur: 48px;
  --site-background-saturate: 1.4;
  --site-background-theme-alpha: 0.14;
  --site-background-shade-alpha: 0.10;
  /* ── Launchpad geometry (everything derives from --app-icon-size) ────── */
  --app-icon-size: 2.35rem;
  --inter-icon-spacing:           calc(var(--app-icon-size) * 0.13);
  --app-group-inset:              calc(var(--app-icon-size) * 0.30);
  --launchpad-group-gap:          calc(var(--app-icon-size) * 0.25);
  --launchpad-group-label-height: calc(var(--app-icon-size) * 0.55);
  --inter-app-group-spacing:      calc(var(--app-icon-size) + (2 * var(--inter-icon-spacing)) - (2 * var(--app-group-inset)));
  --app-group-size-1x1: calc((2 * var(--app-group-inset)) + (4 * var(--app-icon-size)) + (3 * var(--inter-icon-spacing)));
  --app-group-size-2x1: calc((2 * var(--app-group-size-1x1)) + var(--inter-app-group-spacing));
  --app-group-size-1x2: calc((2 * var(--app-group-size-1x1)) + var(--inter-app-group-spacing));
  --app-group-size-2x2: calc((2 * var(--app-group-size-1x1)) + var(--inter-app-group-spacing));
  --app-group-total-height-1x1: calc(var(--app-group-size-1x1) + var(--launchpad-group-gap) + var(--launchpad-group-label-height));
  --app-group-total-height-2x: calc((2 * var(--app-group-total-height-1x1)) + var(--inter-app-group-spacing));
  --content-max-width: calc((var(--launchpad-column-count) * var(--app-group-size-1x1)) + ((var(--launchpad-column-count) - 1) * var(--inter-app-group-spacing)));
  --launchpad-group-radius: 2.4rem;
  --launchpad-icon-radius: 22%;
  --app-icon-size-2x2: calc((2 * var(--app-icon-size)) + var(--inter-icon-spacing));
  --sidebar-surface: var(--material-panel-bg);
  --content-surface: var(--material-panel-bg);
  --scrollbar-thumb: rgb(0 0 0 / 0.18);
  --scrollbar-thumb-hover: rgb(0 0 0 / 0.28);
  --content-scrollbar-thumb: rgb(255 255 255 / 0.5);
  --content-scrollbar-thumb-hover: rgb(255 255 255 / 0.68);
  /* Shared hover tint for sidebar interactive elements. */
  --sidebar-hover-bg: rgb(0 0 0 / 0.06);

  --catalogue-icon-size: calc(2 * var(--app-icon-size));
  --catalogue-icon-content-spacing: calc(var(--app-icon-size) / 2);
}

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
  font-family: var(--font-family-sans);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}

.site-shell {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: visible;
}

.site-background {
  position: fixed;
  inset: calc(-1 * var(--site-background-bleed));
  background:
    rgb(var(--theme-rgb)) var(--background-image) center center / cover no-repeat;
  transform: scale(var(--site-background-scale));
  filter: blur(var(--site-background-blur)) saturate(var(--site-background-saturate));
  z-index: -2;
}

.site-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(var(--theme-rgb) / var(--site-background-theme-alpha)) 0%,
    rgb(0 0 0 / var(--site-background-shade-alpha)) 100%
  );
}

.content-area {
  height: 100vh;
  overflow-y: auto;
  overflow-x: visible;
  margin-right: var(--content-scroll-offset);
  padding: var(--space-6) 0 var(--space-10);
  scrollbar-width: thin;
  scrollbar-color: var(--content-scrollbar-thumb) transparent;
}

@supports selector(::-webkit-scrollbar) {
  .content-area {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  .content-area::-webkit-scrollbar {
    width: 0.45rem;
    background: transparent;
  }

  .content-area::-webkit-scrollbar-track {
    background: transparent;
    margin-block: var(--content-scroll-inset-y);
  }

  .content-area::-webkit-scrollbar-track-piece {
    background: transparent;
  }

  .content-area::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--content-scrollbar-thumb);
  }

  .content-area::-webkit-scrollbar-corner {
    background: transparent;
  }

  .content-area::-webkit-resizer {
    background: transparent;
  }

  .content-area::-webkit-scrollbar-thumb:hover {
    background: var(--content-scrollbar-thumb-hover);
  }
}

.content-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: var(--space-3) clamp(var(--space-6), 4vw, var(--space-10)) 0;
  color: rgb(255 255 255 / 0.78);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.2);
}

.content-breadcrumb__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: inherit;
  text-decoration: none;
}

.content-breadcrumb__logo {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  transform: translateY(1px);
}

.content-breadcrumb__link,
.content-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
}

.content-breadcrumb__separator {
  color: rgb(255 255 255 / 0.5);
}

.content-breadcrumb__current {
  color: rgb(255 255 255 / 0.96);
}

/* Collapsed sidebar */
.site-shell--sidebar-collapsed,
html.sidebar-boot-collapsed .site-shell {
  --sidebar-width: 5rem;
}

:is(.site-shell--sidebar-collapsed, html.sidebar-boot-collapsed .site-shell) .sidebar {
  padding: var(--space-6) 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

:is(.site-shell--sidebar-collapsed, html.sidebar-boot-collapsed .site-shell) .sidebar__inner {
  height: auto;
  width: 3.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  gap: 0;
  justify-content: center;
  align-items: center;
}

:is(.site-shell--sidebar-collapsed, html.sidebar-boot-collapsed .site-shell) .sidebar__inner::after {
  display: none;
}

:is(.site-shell--sidebar-collapsed, html.sidebar-boot-collapsed .site-shell) .sidebar-collapse-btn {
  width: 3.5rem;
  height: 3.5rem;
  justify-content: center;
  padding: 0;
}

:is(.site-shell--sidebar-collapsed, html.sidebar-boot-collapsed .site-shell) .sidebar-collapse-btn img {
  width: 1.5rem;
  height: 1.5rem;
  filter: brightness(0) invert(1);
}

:is(.site-shell--sidebar-collapsed, html.sidebar-boot-collapsed .site-shell) .sidebar-header {
  padding: 0;
}

:is(.site-shell--sidebar-collapsed, html.sidebar-boot-collapsed .site-shell) .sidebar-search,
:is(.site-shell--sidebar-collapsed, html.sidebar-boot-collapsed .site-shell) .sidebar__mode,
:is(.site-shell--sidebar-collapsed, html.sidebar-boot-collapsed .site-shell) .sidebar__body {
  display: none;
}

/* ─── Site Footer ────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: var(--space-16);
  padding-block: var(--space-10) var(--space-12);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto;
  row-gap: var(--space-6);
  width: min(100%, var(--content-max-width));
  margin: 0 auto;
  padding-inline: var(--space-8);
}

/* Section labels: Apps (cols 1–3) and Games (cols 5–6) */
.site-footer__section-label {
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.28);
  padding-bottom: var(--space-3);
  text-decoration: none;
}

.site-footer__section-label:hover {
  color: rgb(255 255 255 / 0.55);
}

.site-footer__section-label--apps  { grid-column: 1 / 4; grid-row: 1; }
.site-footer__section-label--games { grid-column: 4 / 6; grid-row: 1; text-align: right; }

/* 5 content columns */
.site-footer__inner > .site-footer__col:nth-child(3) { grid-column: 1; grid-row: 2; }
.site-footer__inner > .site-footer__col:nth-child(4) { grid-column: 2; grid-row: 2; }
.site-footer__inner > .site-footer__col:nth-child(5) { grid-column: 3; grid-row: 2; }
.site-footer__inner > .site-footer__col:nth-child(6) { grid-column: 4; grid-row: 2; text-align: right; }
.site-footer__inner > .site-footer__col:nth-child(7) { grid-column: 5; grid-row: 2; text-align: right; }

.site-footer__title-link {
  color: inherit;
  text-decoration: none;
}

.site-footer__title-link:hover {
  color: rgb(255 255 255 / 0.72);
}

.site-footer__col-title {
  margin-bottom: var(--space-3);
  font-size: 0.7rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.42);
}

.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__link {
  font-size: 0.8rem;
  color: rgb(255 255 255 / 0.5);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer__link:hover {
  color: rgb(255 255 255 / 0.88);
}

.site-footer__curve {
  display: block;
  width: min(100%, var(--content-max-width));
  height: 70px;
  margin-top: var(--space-8);
  margin-inline: auto;
  overflow: visible;
}

.site-footer__byline {
  padding-top: var(--space-4);
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  padding-inline: var(--space-8);
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.28);
  text-align: center;
}

.site-footer__byline-link {
  color: rgb(255 255 255 / 0.45);
  text-decoration: none;
}

.site-footer__byline-link:hover {
  color: rgb(255 255 255 / 0.8);
}