body {
  background:
    radial-gradient(ellipse at 88% 5%, rgba(116, 95, 230, .16), transparent 38%),
    radial-gradient(ellipse at 6% 35%, rgba(69, 208, 191, .10), transparent 34%),
    var(--lab-bg);
}

body.landing-page .landing-shell {
  position: relative;
  isolation: isolate;
}

.landing-shell::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 780px;
  background-image: linear-gradient(var(--lab-border) 1px, transparent 1px), linear-gradient(90deg, var(--lab-border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 75% 25%, #000, transparent 65%);
  opacity: .38;
  pointer-events: none;
  z-index: -1;
}

body .hero {
  isolation: isolate;
  min-height: 450px;
  padding-bottom: 48px;
}

.lab-orbit {
  position: absolute;
  right: -105px;
  top: -30px;
  width: min(520px, 50vw);
  pointer-events: none;
  z-index: -1;
  opacity: .8;
}

.lab-orbit svg { display: block; width: 100%; height: auto; }
.lab-orbit-outer, .lab-orbit-inner { transform-origin: 260px 260px; }
.lab-orbit-outer { animation: lab-orbit-spin 85s linear infinite; }
.lab-orbit-inner { animation: lab-orbit-spin 65s linear infinite reverse; }

body .hero-status {
  border-color: var(--lab-border-strong);
  background: var(--lab-accent-soft);
  box-shadow: inset 0 0 18px var(--lab-accent-soft);
}

body .hero-title {
  letter-spacing: -.045em;
  background: linear-gradient(115deg, var(--lab-text) 12%, var(--lab-accent-strong) 56%, #a99ee8 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body .hero-title span {
  -webkit-text-fill-color: var(--lab-text);
  letter-spacing: -.02em;
}

body .hero-profile {
  background: var(--lab-panel-solid);
  border-color: var(--lab-border-strong);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .12), 0 0 35px var(--lab-accent-soft);
}

body .hero-profile img { border-radius: 14px; }

body .lab-button:not(.secondary) {
  position: relative;
  overflow: hidden;
  box-shadow: 0 7px 24px var(--lab-accent-soft);
}

body .lab-button:not(.secondary)::after {
  content: '';
  position: absolute;
  inset: -80% auto -80% -70%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left .65s ease;
}

body .lab-button:not(.secondary):hover::after,
body .lab-button:not(.secondary):focus-visible::after { left: 140%; }

body .landing-section {
  position: relative;
  padding-top: 42px;
}

body .section-title { letter-spacing: -.025em; }
body .section-heading { align-items: end; }

body a.activity-card,
body a.project-card,
body a.friend-card,
body a.archive-post {
  background: linear-gradient(145deg, var(--lab-panel-solid), var(--lab-bg-soft));
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

@media (hover: hover) and (pointer: fine) {
  body a.tech-card-enhanced:hover {
    border-color: var(--lab-accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12), 0 0 20px var(--lab-accent-soft);
  }
}

body .tech-card-enhanced::before {
  background: linear-gradient(90deg, var(--lab-accent), var(--lab-blue), #ab91ea);
  width: 70%;
  height: 2px;
  opacity: .8;
}

body .tech-card-glow {
  background: radial-gradient(350px circle at var(--tech-card-x, 50%) var(--tech-card-y, 50%), var(--lab-accent-soft), transparent 75%);
}

body .focus-card {
  border-top: 2px solid var(--lab-border-strong);
  background: linear-gradient(160deg, var(--lab-panel), transparent);
}

body .friend-icon {
  border-radius: 14px;
  border: 1px solid var(--lab-border-strong);
  background: var(--lab-accent-soft);
}

html[theme='light'] body .lab-orbit { opacity: .6; }
html[theme='light'] body .hero-title { background-image: linear-gradient(110deg, #162531, #087f74 58%, #6c52b4); }
.lab-paused .lab-orbit * { animation-play-state: paused; }

@keyframes lab-orbit-spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .lab-orbit { right: 0; width: min(400px, 50vw); top: 5px; }
}

@media (max-width: 760px) {
  body .hero { min-height: 0; padding-bottom: 20px; }
  .lab-orbit { width: min(360px, 100%); right: 0; top: auto; bottom: -20px; opacity: .32; }
  body .hero-copy, body .hero-profile { position: relative; z-index: 1; }
  body .landing-section { padding-top: 28px; }
  .landing-shell::before { background-size: 40px 40px; opacity: .22; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-orbit * { animation: none !important; }
  body a.tech-card-enhanced, body .lab-button::after { transition: none !important; }
  body a.tech-card-enhanced:hover { transform: none; }
}
