:root {
  --theme-primary: #e10600;
  --theme-secondary: #0d0d0d;
  --theme-neutral: #ffffff;
  --theme-support: #6c757d;
  --page-bg-start: #180909;
  --page-bg-end: #090909;
  --page-grid: rgba(255, 255, 255, 0.06);
  --text-primary: #f8f9fb;
  --text-secondary: #d2d7dc;
  --text-inverse: #ffffff;
  --surface-primary: #121212;
  --surface-secondary: #1b1b1b;
  --surface-tertiary: #ffffff;
  --border-soft: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);
  --sidebar-bg: rgba(13, 13, 13, 0.92);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --menu-bg: rgba(255, 255, 255, 0.05);
  --menu-text: #ffffff;
  --menu-hover: rgba(255, 255, 255, 0.12);
  --menu-active-bg: #e10600;
  --menu-active-border: #ff6b61;
  --button-bg: #e10600;
  --button-bg-hover: #ff342d;
  --button-text: #ffffff;
  --button-shadow: rgba(225, 6, 0, 0.32);
  --link-color: #ffffff;
  --link-hover: #ff8f89;
  --link-underline: rgba(255, 255, 255, 0.36);
  --card-bg: rgba(255, 255, 255, 0.96);
  --card-border: rgba(255, 255, 255, 0.18);
  --card-shadow: rgba(0, 0, 0, 0.26);
  --hero-accent: #ffd166;
  --hero-shadow: rgba(255, 209, 102, 0.38);
  --hero-glow: rgba(225, 6, 0, 0.26);
  --table-top: #314454;
  --table-bottom: #10161d;
  --ball-bg: #fff2c4;
  --ball-text: #181818;
  --focus-ring: rgba(255, 255, 255, 0.54);
}

body {
  color: var(--text-primary);
  background:
    radial-gradient(circle at 14% 14%, color-mix(in srgb, var(--theme-primary) 26%, transparent) 0%, transparent 38%),
    radial-gradient(circle at 84% 78%, color-mix(in srgb, var(--theme-support) 20%, transparent) 0%, transparent 34%),
    linear-gradient(145deg, var(--page-bg-start), var(--page-bg-end));
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--page-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 90%);
  opacity: 0.34;
}

.coming-soon {
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--theme-primary) 14%, transparent) 0%, transparent 56%);
}

.fog-logo::after {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--theme-neutral) 12%, transparent), color-mix(in srgb, var(--page-bg-end) 84%, transparent) 70%);
}

.hero-text {
  color: var(--hero-accent);
  text-shadow: 0 2px 0 rgba(8, 14, 21, 0.72), 0 0 18px var(--hero-shadow), 0 0 34px var(--hero-glow);
}

.hero-text::before {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--hero-accent) 34%, transparent) 0%, color-mix(in srgb, var(--theme-primary) 18%, transparent) 42%, transparent 75%);
}

.ping-table::before {
  background: linear-gradient(180deg, var(--table-top) 0%, var(--table-bottom) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-neutral) 18%, transparent) inset, 0 -1px 0 color-mix(in srgb, var(--theme-neutral) 24%, transparent) inset,
    0 12px 20px rgba(4, 11, 18, 0.28);
}

#bouncing-ball {
  background-color: var(--ball-bg);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ball-bg) 76%, transparent), 0 0 18px color-mix(in srgb, var(--theme-primary) 32%, transparent);
}

#bouncing-ball::after {
  color: var(--ball-text);
}

.app-shell {
  background: linear-gradient(135deg, color-mix(in srgb, var(--page-bg-start) 90%, #ffffff 10%) 0%, color-mix(in srgb, var(--page-bg-end) 82%, #ffffff 18%) 100%);
}

.sidebar {
  border-right: 1px solid var(--sidebar-border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sidebar-bg) 96%, #ffffff 4%) 0%, color-mix(in srgb, var(--surface-primary) 92%, #000000 8%) 100%);
  color: var(--menu-text);
}

.brand-logo {
  border: 0;
  box-shadow: none;
  filter: contrast(1.08) brightness(1.03) saturate(1.04);
}

.brand-sub {
  color: var(--text-secondary);
}

.menu-toggle,
button,
.menu-item,
.menu-subitem,
.theme-button {
  color: var(--button-text);
}

.menu-toggle {
  border: 1px solid color-mix(in srgb, var(--button-bg) 60%, var(--theme-neutral) 40%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--button-bg) 90%, #ffffff 10%) 0%, color-mix(in srgb, var(--button-bg-hover) 90%, #000000 10%) 100%);
  box-shadow: 0 12px 28px var(--button-shadow);
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  background: linear-gradient(180deg, color-mix(in srgb, var(--button-bg-hover) 92%, #ffffff 8%) 0%, color-mix(in srgb, var(--button-bg) 90%, #000000 10%) 100%);
}

.menu-toggle:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.menu {
  gap: 10px;
}

.menu-group {
  gap: 10px;
}

.menu-item,
.menu-subitem,
.theme-button,
button:not(.menu-toggle):not(.menu-item):not(.menu-subitem) {
  border: 1px solid var(--border-soft);
  background: var(--menu-bg);
  color: var(--menu-text);
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--page-bg-end) 18%, transparent);
  backdrop-filter: blur(10px);
}

.menu-item:hover,
.menu-subitem:hover,
.theme-button:hover,
button:not(.menu-toggle):not(.menu-item):not(.menu-subitem):hover {
  transform: translateX(3px);
  background: var(--menu-hover);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--page-bg-end) 24%, transparent);
}

.menu-subitem {
  margin-left: 12px;
  width: calc(100% - 12px);
}

.menu-item.is-active,
.menu-subitem.is-active,
.theme-option.is-active {
  background: linear-gradient(135deg, var(--menu-active-bg) 0%, color-mix(in srgb, var(--menu-active-bg) 78%, var(--theme-secondary) 22%) 100%);
  border-color: var(--menu-active-border);
  color: var(--button-text);
}

.theme-submenu {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 0.28s ease, opacity 0.2s ease, transform 0.28s ease, margin-top 0.28s ease;
}

.theme-menu-group:not(.is-open) .theme-submenu {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  margin-top: 0;
  pointer-events: none;
}

.content {
  color: var(--text-primary);
}

.view,
.theme-card {
  background-color: var(--card-bg) !important;
  background-image:
    linear-gradient(180deg, var(--card-surface-top, var(--card-bg)) 0%, var(--card-surface-bottom, var(--card-bg)) 100%) !important;
  border: 1px solid var(--card-border);
  box-shadow: 0 20px 44px var(--card-shadow);
  color: var(--card-text, var(--theme-secondary));
}

.view h2,
.theme-card h2,
.theme-card h3 {
  color: var(--card-text-heading, var(--card-text, var(--theme-secondary)));
}

.view p,
.view li,
.theme-card p,
.theme-card li {
  color: var(--card-text-muted, color-mix(in srgb, var(--card-text, var(--theme-secondary)) 82%, #ffffff 18%));
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  word-break: normal;
  overflow-wrap: normal;
}

a {
  color: var(--link-color);
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

.view a,
.theme-card a {
  color: color-mix(in srgb, var(--link-color) 18%, var(--theme-primary) 82%);
}

.view a:hover,
.theme-card a:hover {
  color: var(--theme-support);
}

@media (max-width: 920px) {
  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .theme-submenu {
    max-height: 440px;
  }

  .theme-menu-group:not(.is-open) .theme-submenu {
    max-height: 0;
  }
}