:root {
  color-scheme: dark;
  --bg: #020711;
  --text: #eef7ff;
  --muted: #bfd2e2;
  --cyan: #2fc6ff;
  --green: #8dff5c;
  --purple: #d16cff;
  --orange: #ff9f2e;
  --planet-scale: 1.242;
  --panel-w: clamp(14.75rem, 15.25vw, 18.2rem);
  --stage-max: 106rem;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: "Chakra Petch", system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 16%, rgba(61, 155, 255, 0.22), transparent 14rem),
    radial-gradient(circle at 88% 14%, rgba(107, 60, 255, 0.24), transparent 18rem),
    radial-gradient(circle at 50% 58%, rgba(31, 157, 255, 0.18), transparent 37rem),
    #020711;
  overflow-x: hidden;
}

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

.universe-shell::before,
.universe-shell::after,
.deep-space-foundation,
.starfield,
.starfield::before,
.starfield::after {
  position: absolute;
  pointer-events: none;
}

.universe-shell::before,
.universe-shell::after,
.starfield::before,
.starfield::after {
  content: "";
}

.universe-shell::before,
.universe-shell::after {
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .34;
}

.deep-space-foundation {
  inset: 0;
  z-index: -1;
  min-height: 100vh;
  background-image: url("assets/background/deep_space_background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.universe-shell::before {
  width: min(58rem, 74vw);
  aspect-ratio: 1;
  left: max(-24rem, -23vw);
  top: max(-18rem, -22vh);
  background-image: url("assets/background/galaxy-left.png");
  background-position: left top;
  filter: saturate(1.1) blur(.2px);
}

.universe-shell::after {
  width: min(62rem, 76vw);
  aspect-ratio: 1;
  right: max(-25rem, -22vw);
  top: max(-20rem, -24vh);
  background-image: url("assets/background/nebula-right.png");
  background-position: right top;
  opacity: .4;
  filter: saturate(1.12) blur(.25px);
}

.starfield,
.starfield::before,
.starfield::after {
  inset: 0;
  z-index: 0;
}

.starfield {
  background-image: url("assets/background/stars.png");
  background-repeat: repeat;
  background-size: min(88rem, 125vw) auto;
  background-position: center top;
  opacity: .3;
}

.starfield::before {
  background: repeating-linear-gradient(105deg, transparent 0 5.8rem, rgba(59, 180, 255, .08) 5.9rem 8.2rem, transparent 8.3rem 12.8rem);
  opacity: .45;
  transform: skewX(-8deg);
}

.starfield::after {
  background: radial-gradient(ellipse at 50% 52%, rgba(21, 76, 122, .55), transparent 38rem);
  opacity: .75;
}

.hero-header {
  position: relative;
  z-index: 5;
  width: min(68rem, 92vw);
  margin: 0 auto;
  padding: clamp(.55rem, 1.2vh, 1.05rem) 0 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .34em;
  pointer-events: none;
}

.landing-logo {
  --logo-width: clamp(45rem, 53vw, 48rem);
  position: absolute;
  left: 50%;
  top: .35rem;
  z-index: 6;
  display: block;
  width: var(--logo-width);
  max-width: 72vw;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 .9rem rgba(80, 214, 255, .42));
  transform: translate(-50%, -33.7%);
}

.welcome {
  margin: 0 0 .28rem;
  color: #d9f3ff;
  font-size: clamp(.76rem, .9vw, 1.02rem);
  letter-spacing: .46em;
}

h1 {
  margin: 0;
  color: transparent;
  font-family: Orbitron, sans-serif;
  font-size: clamp(2.55rem, 4.45vw, 5.15rem);
  line-height: .94;
  text-shadow: none;
}

.tagline {
  margin: .32rem 0 0;
  color: transparent;
  font-size: clamp(.74rem, .92vw, 1.02rem);
  letter-spacing: .46em;
}

.spacecat-tutoring-link {
  --tutoring-width: clamp(19.25rem, 20.9vw, 23.375rem);
  --tutoring-left-trim: clamp(1.85rem, 2vw, 2.24rem);
  --daily-card-right: clamp(1rem, 3.6vw, 4.2rem);
  --tutoring-visible-top: clamp(2.72rem, 2.95vw, 3.3rem);
  --tutoring-visible-top-offset: clamp(-3.3rem, -2.95vw, -2.72rem);
  --tutoring-visible-height: clamp(5.6rem, 6.08vw, 6.8rem);
  position: absolute;
  z-index: 5;
  top: calc(clamp(-3.6rem, -2.6vw, -2.15rem) + var(--tutoring-visible-top));
  right: calc(var(--daily-card-right) + var(--panel-w) + var(--tutoring-left-trim) - var(--tutoring-width));
  display: block;
  width: var(--tutoring-width);
  height: var(--tutoring-visible-height);
  overflow: hidden;
  text-decoration: none;
  filter: drop-shadow(0 0 .8rem rgba(95, 214, 255, .38));
}

.spacecat-tutoring-link img {
  position: absolute;
  inset-inline: 0;
  top: var(--tutoring-visible-top-offset);
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.solar-stage {
  position: relative;
  z-index: 1;
  width: min(var(--stage-max), 100vw);
  height: clamp(34rem, calc(100dvh - 8.6rem), 42rem);
  margin: clamp(-1.65rem, -2.4vh, -1rem) auto 0;
}


.mobile-tutoring-cta {
  display: none;
}

.solar-stage::before {
  position: absolute;
  inset: clamp(1rem, 4vh, 2.8rem) clamp(5rem, 13vw, 13rem);
  z-index: 0;
  pointer-events: none;
  content: "";
  background-image: url("assets/background/dust-overlay.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .13;
  mix-blend-mode: screen;
}

.space-object-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.space-object {
  position: absolute;
  display: block;
  width: var(--object-width);
  height: auto;
  opacity: var(--object-opacity);
  filter: blur(.55px) drop-shadow(0 0 .45rem rgba(75, 213, 255, .28));
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
}

.space-object--ufo {
  --object-width: clamp(4.25rem, 5.7vw, 5.85rem);
  --object-opacity: 1;
  left: clamp(.35rem, 1.2vw, 1.25rem);
  top: clamp(.15rem, .8vh, .5rem);
  transform: rotate(-12deg);
}

.space-object--satellite {
  --object-width: clamp(4.85rem, 6.2vw, 6.45rem);
  --object-opacity: 1;
  right: clamp(.35rem, 1.2vw, 1.25rem);
  top: clamp(.15rem, .8vh, .5rem);
  transform: rotate(16deg);
}

.destination-card {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  width: var(--panel-w);
  min-height: 11.4rem;
  padding: 1.05rem 1.15rem 1rem;
  color: inherit;
  background: linear-gradient(135deg, rgba(7, 17, 32, .9), rgba(4, 10, 20, .78));
  border: 1px solid color-mix(in srgb, var(--accent) 82%, transparent);
  box-shadow: 0 0 1.6rem color-mix(in srgb, var(--accent) 18%, transparent), inset 0 0 2rem rgba(28, 139, 215, .08);
  clip-path: polygon(7% 0, 93% 0, 100% 8%, 100% 92%, 93% 100%, 7% 100%, 0 92%, 0 8%);
  text-decoration: none;
}

.discover-panel {
  --accent: var(--cyan);
  --discover-width: clamp(10.81rem, 11.63vw, 13.44rem);
  position: absolute;
  display: inline-block;
  z-index: 5;
  left: calc(clamp(1rem, 3.9vw, 4.7rem) + (var(--panel-w) - var(--discover-width)) / 2);
  top: clamp(-5.85rem, -8.4vh, -4.6rem);
  width: var(--discover-width);
  overflow: visible;
  color: #ebfaff;
  background: none;
  border: 0;
  box-shadow: none;
  clip-path: none;
}

.discover-panel__shell {
  display: block;
  width: 100%;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 1rem rgba(58, 216, 255, .34));
}


.destination-card--regents { --accent: var(--cyan); left: clamp(1rem, 3.9vw, 4.7rem); top: 2.1rem; }
.destination-card--daily { --accent: var(--green); right: clamp(1rem, 3.6vw, 4.2rem); top: 2.15rem; }
.destination-card--games { --accent: var(--purple); left: clamp(1rem, 3.9vw, 4.7rem); bottom: 2.1rem; }
.destination-card--lab { --accent: var(--orange); right: clamp(1rem, 3.6vw, 4.2rem); bottom: 2.1rem; }

.card-heading {
  display: flex;
  gap: .7rem;
  align-items: center;
  margin-bottom: .72rem;
}

.card-icon {
  display: grid;
  flex: 0 0 2.65rem;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 1rem color-mix(in srgb, var(--accent) 36%, transparent);
  font-family: Orbitron, sans-serif;
}

.card-title {
  display: block;
  min-width: 0;
  margin: 0;
  color: var(--accent);
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.08rem, 1.16vw, 1.42rem);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}

.destination-card--lab .card-title {
  font-size: clamp(.84rem, .88vw, .98rem);
  letter-spacing: .015em;
  overflow-wrap: normal;
  word-break: normal;
}

.card-description {
  display: block;
  margin: 0 0 .95rem;
  color: #e6f0ff;
  font-size: clamp(.82rem, .78vw, .94rem);
  font-weight: 500;
  line-height: 1.42;
}

.destination-card__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 2.35rem;
  padding: 0 1rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  text-decoration: none;
  text-transform: uppercase;
  font-family: Orbitron, sans-serif;
  font-weight: 800;
  letter-spacing: .12em;
  background: rgba(0, 0, 0, .22);
}

.destination-card:hover,
.destination-card:focus-visible {
  box-shadow: 0 0 2rem color-mix(in srgb, var(--accent) 28%, transparent), inset 0 0 2rem rgba(28, 139, 215, .12);
}

.destination-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: .18rem;
}

.orbit-system {
  position: absolute;
  inset: 2.6rem 12rem 2.8rem;
  z-index: 1;
  pointer-events: none;
}

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(47, 198, 255, .26);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  box-shadow: 0 0 1.4rem rgba(47, 198, 255, .15);
}

.orbit--one { width: min(74vw, 69rem); height: 17rem; }
.orbit--two { width: min(65vw, 58rem); height: 11rem; border-color: rgba(255, 159, 46, .32); }
.orbit--three { width: min(51vw, 43rem); height: 6.5rem; border-color: rgba(255, 235, 133, .32); }

.background-planets {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.background-planet {
  position: absolute;
  z-index: 1;
  left: var(--planet-left);
  top: var(--planet-top);
  width: var(--planet-size);
  height: var(--planet-size);
  object-fit: contain;
  opacity: .9;
  filter: drop-shadow(0 0 .55rem rgba(106, 205, 255, .45));
  transform: translate(-50%, -50%) rotate(7deg);
  pointer-events: none;
  user-select: none;
}

.background-planet--outer-left {
  --planet-left: 1.7%;
  --planet-top: 62.9%;
  --planet-size: clamp(1.25rem, 1.85vw, 1.65rem);
}

.background-planet--inner-left {
  --planet-left: 3%;
  --planet-top: 32.9%;
  --planet-size: clamp(1.55rem, 2.25vw, 2.25rem);
}

.background-planet--upper {
  --planet-left: 25%;
  --planet-top: 6.7%;
  --planet-size: clamp(1.85rem, 2.55vw, 2.75rem);
}

.background-planet--right-middle {
  --planet-left: 98.3%;
  --planet-top: 37.1%;
  --planet-size: clamp(1.7rem, 2.45vw, 2.65rem);
}

.background-planet--lower-right {
  --planet-left: 88.3%;
  --planet-top: 82.1%;
  --planet-size: clamp(1.9rem, 2.8vw, 3.125rem);
}

.background-planet--outer-right {
  --planet-left: 95.3%;
  --planet-top: 71.1%;
  --planet-size: clamp(1.35rem, 2vw, 1.9rem);
}

.planet {
  --base-size: 13rem;
  --planet-size: calc(var(--base-size) * var(--planet-scale));
  --sprite-width: calc(var(--planet-size) * 1.5);
  position: absolute;
  z-index: 4;
  display: block;
  width: var(--sprite-width);
  height: var(--planet-size);
  color: var(--accent);
  text-decoration: none;
}

.planet--regents { --accent: var(--cyan); --base-size: clamp(11rem, 12.7vw, 14.4rem); left: clamp(15.1rem, 21.2vw, 24rem); top: 3.05rem; }
.planet--daily { --accent: var(--green); --base-size: clamp(11rem, 12.7vw, 14.4rem); right: clamp(14.9rem, 20.4vw, 23rem); top: 2.75rem; }
.planet--games { --accent: var(--purple); --base-size: clamp(10.2rem, 12vw, 13.6rem); left: clamp(15rem, 21.2vw, 23.8rem); bottom: 2.35rem; }
.planet--lab { --accent: var(--orange); --base-size: clamp(10.2rem, 12vw, 13.6rem); right: clamp(14.8rem, 20.4vw, 22.8rem); bottom: 2.3rem; }

.planet img,
.core-sun img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.sprite-glow {
  position: absolute;
  inset: 10% 12%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 52%, transparent), transparent 68%);
  filter: blur(1rem);
  opacity: .72;
  transform: scale(1.04);
}

.core-sun {
  --accent: #ffb12c;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: clamp(17.4rem, 19.44vw, 22.32rem);
  height: clamp(11.64rem, 12.96vw, 14.88rem);
  transform: translate(-50%, -50%);
}

.core-sun .sprite-glow {
  inset: 4% 16%;
  background: radial-gradient(circle, rgba(255, 188, 64, .88), rgba(255, 133, 0, .42) 42%, transparent 72%);
  filter: blur(1.05rem);
  opacity: .86;
}

@media (max-width: 78rem) {
  :root { --panel-w: min(20rem, 88vw); }

  .universe-shell {
    overflow: hidden;
  }

  .solar-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, auto);
    gap: clamp(1rem, 3.6vw, 1.45rem);
    width: min(42rem, 92vw);
    height: auto;
    min-height: 0;
    margin-top: clamp(-1rem, -2.5vw, -.35rem);
    padding: 0 0 2.75rem;
  }

  .solar-stage::before {
    inset: 5.25rem calc(50% - .055rem) 7.75rem;
    z-index: 2;
    width: .11rem;
    background: linear-gradient(to bottom, transparent, rgba(47, 198, 255, .68) 9%, rgba(141, 255, 92, .62) 36%, rgba(209, 108, 255, .58) 66%, rgba(255, 159, 46, .62) 88%, transparent);
    border-radius: 999px;
    box-shadow: 0 0 .95rem rgba(47, 198, 255, .5);
    opacity: .56;
  }

  .landing-logo {
    --logo-width: clamp(19rem, 76vw, 34rem);
    top: .2rem;
    max-width: 90vw;
  }

  .spacecat-tutoring-link {
    display: none;
  }

  .mobile-tutoring-cta,
  .discover-panel,
  .destination-card,
  .planet,
  .core-sun,
  .orbit-system {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
  }

  .mobile-tutoring-cta,
  .discover-panel,
  .destination-card,
  .planet,
  .core-sun {
    grid-column: 1;
  }

  .mobile-tutoring-cta,
  .destination-card {
    width: 100%;
    justify-self: center;
  }

  .mobile-tutoring-cta {
    --mobile-tutoring-width: min(100%, clamp(11.5rem, 48vw, 14.75rem));
    --mobile-tutoring-visible-top: clamp(1.68rem, 7vw, 2.34rem);
    --mobile-tutoring-visible-height: clamp(3.45rem, 14.4vw, 4.8rem);
    grid-row: 1;
    z-index: 7;
    display: block;
    width: var(--mobile-tutoring-width);
    height: var(--mobile-tutoring-visible-height);
    overflow: hidden;
    text-decoration: none;
    filter: drop-shadow(0 0 .68rem rgba(95, 214, 255, .42));
  }

  .mobile-tutoring-cta img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: calc(var(--mobile-tutoring-visible-top) * -1);
    pointer-events: none;
    user-select: none;
  }

  .mobile-tutoring-cta:focus-visible {
    outline: .18rem solid rgba(141, 255, 92, .95);
    outline-offset: .22rem;
  }

  .discover-panel {
    display: none;
  }

  .destination-card {
    z-index: 7;
    min-height: 11.75rem;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 48%),
      linear-gradient(135deg, rgba(7, 17, 32, .94), rgba(4, 10, 20, .84));
    backdrop-filter: blur(4px);
  }

  .destination-card--regents { grid-row: 2; }
  .destination-card--daily { grid-row: 3; }
  .destination-card--games { grid-row: 4; }
  .destination-card--lab { grid-row: 5; }

  .planet {
    --base-size: clamp(5.9rem, 22vw, 7.6rem);
    z-index: 5;
    display: block;
    align-self: center;
    opacity: .92;
    pointer-events: none;
    filter: saturate(1.08) drop-shadow(0 0 .85rem color-mix(in srgb, var(--accent) 45%, transparent));
  }

  .planet--regents {
    grid-row: 2;
    justify-self: end;
    transform: translate(16%, -18%) rotate(3deg);
  }

  .planet--daily {
    grid-row: 3;
    justify-self: start;
    transform: translate(-18%, -12%) rotate(-4deg);
  }

  .planet--games {
    grid-row: 4;
    justify-self: end;
    transform: translate(18%, -8%) rotate(5deg);
  }

  .planet--lab {
    grid-row: 5;
    justify-self: start;
    transform: translate(-17%, -12%) rotate(-3deg);
  }

  .orbit-system,
  .space-object-layer {
    display: none;
  }

  .core-sun {
    grid-row: 6;
    z-index: 7;
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    justify-self: center;
    width: min(100%, 20rem);
    height: auto;
    min-height: 12.75rem;
    margin: .4rem 0 0;
    padding: .7rem 1rem 1rem;
    border: 1px solid rgba(255, 177, 44, .56);
    border-radius: 2rem;
    background: radial-gradient(circle at 50% 28%, rgba(255, 177, 44, .26), transparent 8.8rem), rgba(7, 17, 32, .58);
    box-shadow: 0 0 1.6rem rgba(255, 159, 46, .2), inset 0 0 1.6rem rgba(255, 188, 64, .08);
    text-decoration: none;
  }

  .core-sun img {
    width: 11rem;
    height: 8rem;
  }

  .core-sun::after {
    content: "Contact";
    align-self: end;
    min-width: min(14rem, 100%);
    padding: .72rem 1rem;
    color: #ffd98c;
    border: 1px solid rgba(255, 207, 92, .8);
    font-family: Orbitron, sans-serif;
    font-weight: 800;
    letter-spacing: .16em;
    text-align: center;
    text-transform: uppercase;
    background: rgba(0, 0, 0, .26);
    box-shadow: 0 0 1rem rgba(255, 159, 46, .18);
  }


  @media (min-width: 23.75rem) {
    .solar-stage {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: clamp(.3rem, 1.6vw, .75rem);
      row-gap: clamp(1rem, 3.4vw, 1.45rem);
      width: min(42rem, 94vw);
    }

    .solar-stage::before {
      inset-inline: calc(50% - .055rem);
      transform: translateX(-1.35rem);
    }

    .mobile-tutoring-cta,
    .discover-panel,
    .core-sun {
      grid-column: 1 / -1;
    }

    .destination-card {
      min-height: 10.7rem;
      padding: .9rem .85rem .85rem;
    }

    .card-heading {
      gap: .55rem;
      margin-bottom: .6rem;
    }

    .card-icon {
      flex-basis: 2.25rem;
      width: 2.25rem;
      height: 2.25rem;
    }

    .card-title {
      font-size: clamp(.92rem, 3.25vw, 1.16rem);
      letter-spacing: .045em;
    }

    .destination-card--lab .card-title {
      font-size: clamp(.66rem, 2.35vw, .86rem);
      letter-spacing: 0;
    }

    .card-description {
      margin-bottom: .72rem;
      font-size: clamp(.74rem, 2.45vw, .84rem);
      line-height: 1.36;
    }

    .destination-card__cta {
      min-height: 2.05rem;
      padding: 0 .75rem;
      font-size: .76rem;
      letter-spacing: .1em;
    }

    .planet {
      --base-size: clamp(4.35rem, 16vw, 5.35rem);
      align-self: center;
      justify-self: center;
      margin-inline: calc((var(--sprite-width) - var(--planet-size)) / -2);
      opacity: .98;
    }

    .destination-card--regents { grid-column: 1; }
    .destination-card--daily { grid-column: 2; }
    .destination-card--games { grid-column: 1; }
    .destination-card--lab { grid-column: 2; }

    .planet--regents {
      grid-column: 2;
      transform: rotate(3deg);
    }

    .planet--daily {
      grid-column: 1;
      transform: rotate(-4deg);
    }

    .planet--games {
      grid-column: 2;
      transform: rotate(5deg);
    }

    .planet--lab {
      grid-column: 1;
      transform: rotate(-3deg);
    }
  }

  @media (max-width: 23.6875rem) {
    .planet {
      display: none;
    }
  }

  .core-sun .sprite-glow {
    inset: 6% 26% 35%;
  }

}

/* Daily Lessons Hub */
.hub-page .universe-shell {
  overflow: clip;
}

.daily-hub-shell {
  padding: clamp(.55rem, 1.1vw, 1rem) clamp(1rem, 3.5vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.daily-hub-header,
.daily-hub-controls,
.daily-hub-content,
.daily-empty-state {
  position: relative;
  z-index: 5;
}

.daily-hub-header {
  width: min(74rem, 100%);
  margin: 0 auto;
  padding: clamp(.6rem, 1.3vw, 1.2rem) 0 clamp(.95rem, 2.2vw, 1.65rem);
  text-align: center;
}

.hub-logo-link {
  position: relative;
  z-index: 8;
  display: block;
  width: min(52rem, 94vw);
  height: min(15.2rem, 27.5vw);
  margin: 0 auto clamp(.65rem, 1.7vw, 1.35rem);
  overflow: hidden;
  border-radius: 999px;
  transform: translateY(0);
  transition: filter .2s ease, transform .2s ease;
}

.hub-logo-link:focus-visible {
  outline: .18rem solid rgba(141, 255, 92, .95);
  outline-offset: .35rem;
}

.hub-logo-link:hover {
  filter: drop-shadow(0 0 1.1rem rgba(141, 255, 92, .4));
  transform: translateY(-.08rem);
}

.hub-logo {
  position: static;
  width: 100%;
  max-width: none;
  pointer-events: auto;
  transform: translateY(-18.1%);
}

.daily-section-label,
.daily-card-eyebrow,
.daily-search-label {
  color: var(--green);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.daily-hub-header h1 {
  color: #f4fbff;
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  line-height: .92;
  text-shadow: 0 0 1.25rem rgba(47, 198, 255, .5), 0 0 3rem rgba(209, 108, 255, .28);
}

.hub-tagline {
  max-width: 54rem;
  margin: clamp(.9rem, 2vw, 1.25rem) auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.24rem);
  line-height: 1.55;
}

.daily-hub-controls {
  width: min(48rem, 100%);
  margin: 0 auto clamp(1.15rem, 2.8vw, 2rem);
}

.daily-search-label {
  display: block;
  margin: 0 0 .55rem;
  font-size: .78rem;
}

.daily-search-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .95rem;
  border: 1px solid rgba(47, 198, 255, .34);
  border-radius: 1.15rem;
  background: linear-gradient(135deg, rgba(7, 18, 37, .9), rgba(17, 35, 61, .76));
  box-shadow: 0 1.1rem 2.8rem rgba(0, 0, 0, .26), inset 0 0 1.6rem rgba(47, 198, 255, .09);
}

.daily-search-wrap span {
  color: var(--cyan);
  font-size: 1.5rem;
  line-height: 1;
}

.daily-search-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--text);
  font: 600 1rem/1.4 "Chakra Petch", system-ui, sans-serif;
  background: transparent;
}

.daily-search-wrap input::placeholder {
  color: rgba(191, 210, 226, .68);
}

.daily-search-help {
  margin: .6rem 0 0;
  color: rgba(191, 210, 226, .8);
  font-size: .92rem;
}

.daily-hub-content {
  display: grid;
  gap: clamp(1.3rem, 3vw, 2.1rem);
  width: min(76rem, 100%);
  margin: 0 auto;
}

.daily-resource-section {
  padding: clamp(1.05rem, 2.4vw, 1.55rem);
  border: 1px solid rgba(47, 198, 255, .2);
  border-radius: 1.4rem;
  background: linear-gradient(145deg, rgba(4, 12, 28, .82), rgba(11, 26, 49, .68));
  box-shadow: 0 1.4rem 3.5rem rgba(0, 0, 0, .28), inset 0 0 2rem rgba(47, 198, 255, .05);
  backdrop-filter: blur(10px);
}

.daily-resource-section--featured {
  border-color: rgba(141, 255, 92, .28);
  background: linear-gradient(145deg, rgba(5, 19, 32, .9), rgba(16, 38, 48, .72));
}

.daily-resource-section--guides {
  border-color: rgba(255, 159, 46, .4);
  background: linear-gradient(145deg, rgba(41, 22, 6, .78), rgba(27, 17, 31, .72));
}

.daily-section-header {
  display: grid;
  gap: .35rem;
  margin-bottom: clamp(1rem, 2vw, 1.35rem);
}

.daily-section-label,
.daily-card-eyebrow {
  font-size: .72rem;
}

.daily-resource-section--guides .daily-section-label,
.daily-resource-card--guide .daily-card-eyebrow {
  color: var(--orange);
}

.daily-section-header h2 {
  margin: 0;
  color: #f4fbff;
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: .04em;
}

.daily-section-header p {
  max-width: 48rem;
  margin: 0;
  color: rgba(191, 210, 226, .9);
  font-size: 1rem;
  line-height: 1.55;
}

.daily-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.85rem, 1.8vw, 1.1rem);
}

.daily-resource-grid--featured {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.daily-resource-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 14rem;
  padding: 1rem;
  border: 1px solid rgba(47, 198, 255, .22);
  border-radius: 1rem;
  color: var(--text);
  text-decoration: none;
  background: radial-gradient(circle at 16% 12%, rgba(47, 198, 255, .18), transparent 9rem), rgba(7, 17, 34, .88);
  box-shadow: inset 0 0 1.4rem rgba(47, 198, 255, .05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.daily-resource-card:hover,
.daily-resource-card:focus-visible {
  border-color: rgba(141, 255, 92, .62);
  box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .22), 0 0 1.2rem rgba(47, 198, 255, .18), inset 0 0 1.4rem rgba(47, 198, 255, .08);
  transform: translateY(-.12rem);
}

.daily-resource-card:focus-visible {
  outline: .16rem solid rgba(141, 255, 92, .95);
  outline-offset: .2rem;
}

.daily-resource-card--featured {
  min-height: 15.5rem;
  border-color: rgba(141, 255, 92, .3);
  background: radial-gradient(circle at 16% 12%, rgba(141, 255, 92, .16), transparent 9rem), rgba(6, 22, 35, .92);
}

.daily-resource-card--guide {
  border-color: rgba(255, 159, 46, .32);
  background: radial-gradient(circle at 16% 12%, rgba(255, 159, 46, .18), transparent 9rem), rgba(27, 16, 22, .9);
}

.daily-resource-card h3 {
  margin: .55rem 0 .55rem;
  color: #f7fcff;
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.02rem, 1.7vw, 1.24rem);
  line-height: 1.16;
  letter-spacing: .02em;
}

.daily-resource-card p {
  margin: 0;
  color: rgba(191, 210, 226, .9);
  font-size: .98rem;
  line-height: 1.45;
}

.daily-card-link {
  align-self: end;
  margin-top: 1rem;
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: .05em;
}

.daily-resource-card:hover .daily-card-link,
.daily-resource-card:focus-visible .daily-card-link {
  color: var(--green);
}

.daily-empty-state {
  width: min(48rem, 100%);
  margin: 1.5rem auto 0;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255, 159, 46, .38);
  border-radius: 1rem;
  color: #ffe6bd;
  background: rgba(41, 22, 6, .72);
  text-align: center;
}

@media (max-width: 72rem) {
  .daily-resource-grid,
  .daily-resource-grid--featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 42rem) {
  .daily-hub-shell {
    padding-inline: .85rem;
  }

  .daily-hub-header {
    padding-top: .5rem;
  }

  .hub-logo-link {
    width: min(36rem, 94vw);
    height: min(10.55rem, 27.5vw);
    margin-bottom: clamp(.8rem, 3.8vw, 1.4rem);
  }

  .daily-section-label,
  .daily-card-eyebrow,
  .daily-search-label {
    letter-spacing: .14em;
  }

  .daily-resource-grid,
  .daily-resource-grid--featured {
    grid-template-columns: 1fr;
  }

  .daily-resource-card,
  .daily-resource-card--featured {
    min-height: 12.5rem;
  }
}

.lab-page {
  --lab-gold: #ffcf5c;
  --lab-amber: #ff9f2e;
  --lab-deep: #2b1807;
}

.lab-hub-shell {
  padding-top: clamp(.45rem, .9vw, .85rem);
}

.lab-hub-header {
  padding-bottom: clamp(.85rem, 1.8vw, 1.35rem);
}

.lab-logo-link:focus-visible {
  outline-color: rgba(255, 207, 92, .95);
}

.lab-logo-link:hover {
  filter: drop-shadow(0 0 1.1rem rgba(255, 159, 46, .46));
}

.lab-kicker {
  margin: 0 0 .5rem;
  color: var(--lab-gold);
  font-weight: 700;
  font-size: clamp(.78rem, 1.45vw, .98rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  text-shadow: 0 0 .8rem rgba(255, 159, 46, .38);
}

.lab-hub-header h1 {
  text-shadow: 0 0 1.25rem rgba(255, 159, 46, .52), 0 0 3rem rgba(47, 198, 255, .24);
}

.lab-section-label,
.lab-card-eyebrow,
.lab-search-label {
  color: var(--lab-gold);
}

.lab-hub-controls {
  margin-bottom: clamp(1rem, 2.4vw, 1.65rem);
}

.lab-search-wrap {
  border-color: rgba(255, 159, 46, .4);
  background: linear-gradient(135deg, rgba(32, 18, 7, .88), rgba(17, 35, 61, .72));
  box-shadow: 0 1.1rem 2.8rem rgba(0, 0, 0, .26), inset 0 0 1.6rem rgba(255, 159, 46, .1);
}

.lab-search-wrap span {
  color: var(--lab-gold);
}

.lab-resource-section {
  border-color: rgba(255, 159, 46, .26);
  background: linear-gradient(145deg, rgba(28, 16, 5, .82), rgba(11, 26, 49, .66));
  box-shadow: 0 1.4rem 3.5rem rgba(0, 0, 0, .28), inset 0 0 2rem rgba(255, 159, 46, .06);
}

.lab-resource-section--featured {
  border-color: rgba(255, 207, 92, .42);
  background: linear-gradient(145deg, rgba(42, 24, 7, .9), rgba(19, 34, 48, .72));
}

.lab-resource-grid--featured {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lab-resource-card {
  border-color: rgba(255, 159, 46, .28);
  background: radial-gradient(circle at 16% 12%, rgba(255, 207, 92, .18), transparent 9rem), rgba(18, 18, 31, .9);
}

.lab-resource-card:hover,
.lab-resource-card:focus-visible {
  border-color: rgba(255, 207, 92, .7);
  box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .22), 0 0 1.2rem rgba(255, 159, 46, .24), inset 0 0 1.4rem rgba(255, 207, 92, .08);
}

.lab-resource-card:focus-visible {
  outline-color: rgba(255, 207, 92, .95);
}

.lab-resource-card--featured {
  border-color: rgba(255, 207, 92, .42);
  background: radial-gradient(circle at 16% 12%, rgba(255, 207, 92, .22), transparent 9rem), rgba(29, 20, 24, .92);
}

.lab-card-link {
  color: var(--lab-gold);
}

.lab-resource-card:hover .lab-card-link,
.lab-resource-card:focus-visible .lab-card-link {
  color: var(--orange);
}

.lab-empty-state {
  border-color: rgba(255, 207, 92, .42);
  color: #ffe7aa;
  background: rgba(43, 24, 7, .76);
}