:root {
  color-scheme: dark;
  --bg: #080a0d;
  --panel: rgba(24, 27, 32, 0.92);
  --panel-deep: rgba(13, 15, 18, 0.96);
  --panel-soft: rgba(255, 255, 255, 0.035);
  --line: rgba(255, 255, 255, 0.105);
  --line-strong: rgba(255, 255, 255, 0.17);
  --text: #f5f6f8;
  --muted: #9da3ad;
  --muted-2: #737a85;
  --blue: #0097f6;
  --blue-2: #36c2ff;
  --blue-soft: rgba(0, 151, 246, 0.12);
  --workspace-surface: linear-gradient(
    180deg,
    rgba(29, 32, 38, 0.96),
    rgba(14, 16, 20, 0.985)
  );
  --bg-main:
    radial-gradient(circle at 18% -8%, rgba(65, 74, 91, 0.46), transparent 31rem),
    radial-gradient(circle at 100% 10%, rgba(0, 151, 246, 0.075), transparent 28rem),
    linear-gradient(180deg, #22252a 0%, #101216 34%, #08090b 100%);
}

html,
body {
  background: var(--bg);
  color: var(--text);
}

.lg-page {
  background: var(--bg-main);
}

.lg-logo-link:focus-visible,
.lg-tab:focus-visible,
.lg-contact-link:focus-visible,
.lg-poster-card:focus-visible,
.lg-home:focus-visible {
  outline-color: var(--blue-2);
}

.lg-tab,
.lg-contact-link {
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
  box-shadow: 0 11px 25px rgba(0, 151, 246, 0.16);
}

.lg-tab span,
.lg-contact-link span {
  background: var(--panel-deep);
  color: var(--text);
}

.lg-tab:hover span,
.lg-contact-link:hover span {
  background: linear-gradient(135deg, #007fdc, #00aaf7);
  color: #fff;
}

.lg-title,
.lg-home,
.lg-card p {
  color: var(--muted);
}

.lg-keywords {
  color: var(--muted-2);
}

.lg-card {
  background: var(--workspace-surface);
  border-color: var(--line);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
}

.lg-home:hover {
  color: var(--blue-2);
}

@media
  (max-width: 820px),
  (hover: none) and (pointer: coarse) {
  .lg-title {
    color: var(--muted);
  }

  .lg-keywords {
    color: var(--muted-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}