@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  color-scheme:dark;
  --background:#0b0c10;
  --text:#f3f6fb;
  --muted:#aab2bf;
  --blue:#a5c9f7;
  --line:#ffffff17;
  --focus:#f6c659;
  --radius:10px;
  --header-height:72px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + 16px)
}

body {
  margin:0;
  background:var(--background);
  color:var(--text);
  font:16px/1.65 'DM Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  isolation:isolate
}

img {
  display:block;
  max-width:100%
}

a {
  color:inherit;
  text-decoration:none
}

a:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:6px
}

::selection {
  background:var(--blue);
  color:#0b0c10
}

[hidden] {
  display:none!important
}

.wrap {
  width:min(1180px,calc(100% - 80px));
  margin-inline:auto
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  transform:translateY(-200%);
  z-index:30;
  padding:12px 16px;
  background:var(--text);
  color:var(--background)
}

.skip-link:focus {
  transform:none
}

.logo-filters {
  position:absolute;
  pointer-events:none
}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--background);
  border-bottom:1px solid var(--line)
}

.site-nav {
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-size:17px;
  font-weight:500;
  letter-spacing:-.025em;
  white-space:nowrap
}

.site-nav.wrap {
  width:calc(100% - 40px)
}

.brand-symbol {
  width:44px;
  height:30px;
  flex:none
}

.nav-links {
  display:flex;
  align-items:center;
  gap:30px
}

.nav-links a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--muted);
  font-size:13px;
  transition:color .2s
}

.nav-links a:hover {
  color:var(--text)
}

h1,h2,h3 {
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  letter-spacing:-.035em
}

p {
  margin-top:0
}

.hero {
  position:relative;
  min-height:calc(100svh - var(--header-height));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-block:96px 120px;
}

.wordmark-frame {
  width:min(460px,100%);
  margin:0 auto
}

/* Occasional fine meteor trails, confined to the landing viewport. */
.shooting-stars {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none
}

.hero {
  isolation:isolate
}

.shooting-stars span {
  position:absolute;
  top:16%;
  left:12%;
  width:110px;
  height:1px;
  background:linear-gradient(90deg,transparent,#b6cffb66 75%,#e7f1ff);
  opacity:0;
  animation:shooting-star 21s linear infinite;
  animation-delay:-7s
}

.shooting-stars span:nth-child(2) {
  top:65%;
  left:59%;
  width:80px;
  animation-duration:29s;
  animation-delay:-18s
}

.shooting-stars span:nth-child(3) {
  top:30%;
  left:70%;
  width:95px;
  animation-duration:37s;
  animation-delay:-30s
}

@keyframes shooting-star {
  0% {transform:translate(-90px,-56px) rotate(32deg);opacity:0}
  1.5% {opacity:.25}
  5% {transform:translate(120px,75px) rotate(32deg);opacity:0}
  100% {transform:translate(120px,75px) rotate(32deg);opacity:0}
}

.wordmark {
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}

h1 {
  font-size:clamp(32px,4vw,44px);
  line-height:1.15;
  margin:22px 0 0
}

.games-section {
  min-height:100svh;
  border-top:1px solid var(--line);
  padding:72px 0 80px
}

.section-head {
  margin-bottom:26px
}

.section-head h2 {
  margin:0;
  font-size:24px;
  line-height:1.3;
  letter-spacing:-.025em
}

.game-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:80px
}

.game-card {
  min-width:0;
  display:flex;
  flex-direction:column;
  background:none;
  border:0
}

.game-feature {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr);
  gap:40px;
  align-items:center
}

.game-image {
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16/10;
  background:#070e17;
  border-radius:var(--radius);
  overflow:hidden;
  min-width:0
}

.game-image img {
  width:100%;
  height:100%;
  object-fit:contain
}

.game-image:focus-visible {
  outline-offset:4px
}

.game-copy {
  padding:22px 0 0;
  display:flex;
  flex:1;
  flex-direction:column
}

.game-feature .game-copy {
  padding:0
}

.game-type {
  margin:0 0 11px;
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase
}

.game-title {
  font-size:28px;
  line-height:1.2;
  margin:0 0 15px;
  letter-spacing:-.03em;
  text-wrap:pretty
}

.game-feature .game-title {
  font-size:40px;
  line-height:1.15;
  margin-bottom:20px
}

.game-description {
  max-width:44ch;
  margin:0 0 20px;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  text-wrap:pretty
}

.game-feature .game-description {
  max-width:32ch;
  font-size:17px;
  line-height:1.75;
  margin-bottom:25px
}

.game-footer {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:8px;
  margin-top:auto
}

.game-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:44px;
  font-size:14px;
  font-weight:500;
  color:var(--text);
  transition:color .2s
}

.game-link>span {
  font-size:18px;
  line-height:1;
  transition:transform .2s
}

.game-link:hover>span {
  transform:translate(2px,-2px)
}

.game-link:hover {
  color:var(--blue)
}

.game-feature .game-link {
  background:var(--blue);
  border-radius:7px;
  color:#0d1827;
  padding:10px 18px;
  gap:30px;
  font-weight:600
}

.game-feature .game-link:hover {
  background:#c0ddff
}

.game-status {
  color:#858f9f;
  font-size:13px;
  line-height:1.5
}

.game-feature .game-status {
  margin-top:3px
}

.studio-section {
  border-top:1px solid var(--line);
  padding-block:48px
}

.studio-content {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:10px 48px
}

.studio-content h2 {
  display:flex;
  align-items:center;
  align-self:start;
  gap:14px;
  grid-column:1;
  grid-row:1/3;
  margin:0;
  font-size:22px;
  line-height:1.4
}

.studio-symbol {
  display:block;
  width:56px;
  height:auto;
  flex:none
}

.studio-content p {
  grid-column:2;
  margin:0;
  max-width:62ch;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
  text-wrap:pretty
}





/* The product owns its live rendering; this window only frames and scales it. */
.solar-preview {
  position:relative;
  aspect-ratio:1150/650;
  background:#050b14
}

.solar-preview-window {
  position:relative;
  width:100%;
  aspect-ratio:1150/650;
  overflow:hidden;
  border-radius:inherit;
  background:#050b14
}

.solar-preview-window>img {
  width:100%;
  height:100%;
  object-fit:contain
}

.solar-preview-window>iframe {
  position:absolute;
  inset:0;
  width:var(--preview-width,1166px);
  height:var(--preview-height,650px);
  max-width:none;
  border:0;
  pointer-events:none;
  transform:scale(var(--solar-preview-scale,.3)) translate(var(--preview-x,0px),var(--preview-y,0px));
  transform-origin:0 0;
  opacity:0
}

.solar-preview-window.is-live>iframe {
  opacity:1
}

.solar-preview-window[data-game-preview="rainbow"] {
  aspect-ratio:1180/757
}

.rainbow-preview {
  aspect-ratio:1180/757
}

.solar-showcase,.solar-preview-window[data-game-preview="solar"] {
  aspect-ratio:1150/550
}

.edge-showcase,.solar-preview-window[data-game-preview="edge"] {
  aspect-ratio:850/570
}

.solar-preview-link {
  position:absolute;
  inset:0;
  z-index:2
}

.solar-preview-link:focus-visible {
  outline-offset:-5px
}

/* Slow flight stays behind content, with three inexpensive composited planes. */
.starfield {
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%,#496ea708,transparent 68%);
  perspective:700px;
  perspective-origin:50% 38%
}

.flight-layer {
  position:absolute;
  inset:-12%;
  background:url("assets/starfield.svg") center/cover no-repeat;
  transform-origin:50% 38%;
  backface-visibility:hidden;
  animation:space-flight 54s linear infinite;
  opacity:0;
  --tilt:0deg
}

.flight-layer:nth-child(2) {
  animation-delay:-18s;
  --tilt:37deg
}

.flight-layer:nth-child(3) {
  animation-delay:-36s;
  --tilt:73deg
}

@keyframes space-flight {
  0% {
    transform:translateZ(-1000px) rotate(var(--tilt));
    opacity:0
  }

  18% {
    opacity:.68
  }

  76% {
    opacity:.68
  }

  100% {
    transform:translateZ(350px) rotate(var(--tilt));
    opacity:0
  }

}

@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 64px)
  }

  .game-feature {
    grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);
    gap:28px
  }

  .game-feature .game-title {
    font-size:34px
  }

  .game-feature .game-description {
    font-size:16px
  }

  .studio-content {
    grid-template-columns:190px 1fr;
    gap:10px 32px
  }

}

@media(max-width:760px) {
  .site-nav.wrap {
    width:calc(100% - 32px)
  }
  .wrap {
    width:calc(100% - 48px)
  }

  .site-nav {
    height:68px
  }

  .hero {
    padding-block:80px 100px
  }

  .wordmark-frame {
    width:min(420px,100%)
  }

  h1 {
    font-size:34px;
    margin-top:20px
  }

  .games-section {
    padding-top:48px;
    padding-bottom:56px
  }

  .section-head {
    margin-bottom:22px
  }

  .game-grid {
    grid-template-columns:1fr;
    gap:40px
  }

  .game-feature {
    grid-column:auto;
    display:flex;
    gap:0
  }

  .game-feature .game-copy {
    padding-top:24px
  }

  .game-feature .game-title {
    font-size:32px;
    margin-bottom:16px
  }

  .game-feature .game-description {
    max-width:48ch;
    margin-bottom:20px
  }

  .game-title {
    font-size:27px
  }

  .game-copy {
    padding-top:20px
  }

  .game-footer {
    gap:6px
  }

  .studio-section {
    padding-block:36px
  }

  .studio-content {
    grid-template-columns:1fr;
    gap:14px
  }

  .studio-content h2 {
    grid-column:1;
    grid-row:auto;
    font-size:22px
  }

  .studio-content p {
    grid-column:1
  }

  .nav-links {
    gap:24px
  }

}

@media(max-width:400px) {
  .wrap {
    width:calc(100% - 40px)
  }

  .brand {
    font-size:15px;
    gap:7px
  }

  .brand-symbol {
    width:36px;
    height:26px
  }

  .nav-links {
    gap:18px
  }

  .nav-links a {
    font-size:14px
  }

  .hero {
    padding-block:64px 84px
  }

  h1 {
    font-size:clamp(23px,7.7vw,30px)
  }


}

@media(prefers-reduced-motion:reduce) {
  .shooting-stars {
    display:none
  }
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    transition:none!important
  }

  .flight-layer {
    animation:none;
    transform:none;
    opacity:.55
  }

  .flight-layer:not(:first-child) {
    display:none
  }

}

@media(max-width:760px){:root{--header-height:68px}}
@media(max-height:560px){.hero{min-height:calc(100svh - var(--header-height));padding-block:40px}.wordmark-frame{width:min(380px,100%)}h1{margin-top:18px}}





.hero>h1 {
  position:absolute;
  left:0;
  right:0;
  bottom:36px;
  margin:0;
}
@media(max-width:760px){.hero>h1{bottom:32px}}
@media(max-height:560px){.hero>h1{bottom:20px}}


/* Quiet bottom tagline; the brand remains the landing focal point. */
.hero>h1{font-size:32px;font-weight:400;letter-spacing:-.025em;line-height:1.25;color:#d8dfe9}
@media(max-width:760px){.hero>h1{font-size:26px}}
@media(max-width:400px){.hero>h1{font-size:clamp(20px,6vw,24px)}}

.site-copyright {position:absolute;left:0;bottom:8px;margin:0;color:#858f9f;font-size:11px;line-height:1.2}