@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:12px;
  --header-height:80px;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 20px)}
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:var(--background)}
[hidden] {display:none!important}
.wrap {width:min(1180px,calc(100% - 96px));margin-inline:auto}
p {margin-top:0}
h1,h2,h3 {font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-.045em}
.skip-link {position:fixed;top:12px;left:12px;transform:translateY(-200%);z-index:30;padding:12px 16px;background:var(--text);color:var(--background);border-radius:6px}
.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:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-nav.wrap {width:calc(100% - 64px)}
.brand {min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.brand-symbol {width:44px;height:30px;flex:none}
.nav-links {display:flex;align-items:center;gap:34px;height:100%}
.nav-links a {position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:14px;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"] {color:var(--text)}
.nav-links a[aria-current="page"]::after {content:'';position:absolute;bottom:2px;left:0;right:0;height:2px;background:var(--blue);border-radius:2px}
.eyebrow {margin:0 0 24px;font-size:11px;line-height:1.6;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.hero {position:relative;isolation:isolate;min-height:calc(100svh - var(--header-height));padding-block:68px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.wordmark-frame {width:min(340px,76%);margin:0 auto 42px}
.wordmark {display:block;width:100%;height:auto;overflow:visible}
.hero .eyebrow {margin-bottom:20px;color:#a5adbc}
.hero h1 {font-size:clamp(58px,6.5vw,94px);line-height:1.03;margin:0;letter-spacing:-.06em}
.hero h1 span,.collection-intro h1 span {color:var(--blue)}
.hero-description {max-width:43ch;margin:26px 0 0;color:var(--muted);font-size:17px;line-height:1.65;text-wrap:pretty}
.hero-actions {display:flex;align-items:center;justify-content:center;gap:30px;margin-top:32px}
.button {display:inline-flex;align-items:center;justify-content:center;gap:30px;min-height:50px;padding:12px 22px;font-size:14px;font-weight:600;border:1px solid transparent;border-radius:7px;transition:background .2s,transform .2s}
.button-primary {background:var(--blue);color:#101925}
.button-primary:hover {background:#c4dfff;transform:translateY(-2px)}
.button>span {font-size:18px}
.text-link {display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;font-size:14px;font-weight:500;transition:color .2s}
.text-link:hover {color:var(--blue)}
.text-link>span {font-size:18px;transition:transform .2s}
.text-link:hover>span {transform:translate(2px,-2px)}
.hero-note {display:flex;align-items:center;justify-content:center;gap:10px;margin-top:54px;font-size:11px;color:#a5adbc;letter-spacing:.06em}
.small-star {color:#e8bc63;font-size:17px;line-height:1}
.about-page #main {min-height:calc(100svh - var(--header-height) - 93px);display:flex;align-items:center}
.studio-section {position:relative;width:100%;padding-block:112px;background:#0b0c10c9}
.studio-content {display:grid;grid-template-columns:1fr 1fr;gap:56px 80px}
.studio-heading .eyebrow {margin-bottom:16px}
.studio-heading h1 {margin:0;font-size:clamp(40px,4.4vw,60px);line-height:1.12}
.studio-heading h1 span {color:var(--blue)}
.studio-copy {padding-top:3px}
.studio-copy p {max-width:49ch;color:var(--muted);font-size:16px;line-height:1.8;margin-bottom:18px;text-wrap:pretty}
.studio-copy .text-link {margin-top:3px}
.collection-intro {padding-block:82px 66px}
.collection-intro .eyebrow {margin-bottom:24px}
.collection-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.collection-intro h1 {font-size:clamp(48px,5.7vw,78px);line-height:1.08;margin:0;letter-spacing:-.055em}
.collection-heading>p {margin:0 0 3px;color:#b8c1d0;font-size:16px;line-height:1.8}
.collection-caption {display:block;margin-top:16px;font-size:12px;color:#9aa4b4}
.games-section {padding-bottom:72px}
.collection-rule {display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid var(--line);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#a5adbc}
.game-grid {display:grid;grid-template-columns:1fr;gap:0}
.game-card {min-width:0}
.game-feature {display:grid;grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr);gap:48px;align-items:center;padding:36px 0 64px;border-bottom:1px solid var(--line)}
.game-feature+.game-feature {padding-top:64px}
.game-image {display:flex;align-items:center;justify-content:center;background:#070e17;border-radius:var(--radius);overflow:hidden;min-width:0;border:1px solid #ffffff0d;box-shadow:0 16px 60px #0003}
.game-image img {width:100%;height:100%;object-fit:contain}
.game-copy {min-width:0}
.game-type {display:flex;align-items:center;gap:12px;margin:0 0 17px;color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.11em;text-transform:uppercase}
.game-number {font-variant-numeric:tabular-nums;color:var(--blue)}
.game-title {font-size:clamp(30px,3vw,40px);line-height:1.13;margin:0 0 20px;letter-spacing:-.04em;text-wrap:pretty}
.game-description {max-width:34ch;margin:0 0 24px;color:var(--muted);font-size:15px;line-height:1.8;text-wrap:pretty}
.game-footer {display:flex;align-items:flex-start;flex-direction:column;gap:13px}
.game-link {display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:46px;background:var(--blue);border-radius:7px;color:#101925;padding:10px 17px;font-size:13px;font-weight:600;transition:background .2s}
.game-link:hover {background:#c4dfff}
.game-link>span {font-size:17px;line-height:1;transition:transform .2s}
.game-link:hover>span {transform:translate(2px,-2px)}
.game-status {color:#9aa4b4;font-size:11px;line-height:1.5}
.collection-end {display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:64px}
.collection-end p {margin:0;font-family:'Space Grotesk',sans-serif;font-size:24px;letter-spacing:-.03em}
/* The products own their live rendering. The studio frames and scales them. */
.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"],.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 starfield flight stays behind content on three composited planes. */
.starfield {position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#496ea70d,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}}
.shooting-stars {position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.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%,100%{transform:translate(120px,75px) rotate(32deg);opacity:0}}
@media(min-width:1500px) {.hero{padding-block:88px 42px}.hero-note{margin-top:66px}}
@media(max-width:1000px) {
  .wrap {width:calc(100% - 64px)}
  .game-feature {grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:32px}
  .game-title {font-size:32px}
  .collection-heading {gap:32px}
  .collection-heading>p {font-size:14px}
  .studio-content {gap:48px}
}
@media(max-width:760px) {
  :root {--header-height:68px}
  .wrap {width:calc(100% - 48px)}
  .site-nav.wrap {width:calc(100% - 32px)}
  .nav-links {gap:26px}
  .hero {padding-block:54px 30px}
  .wordmark-frame {width:min(300px,86%);margin-bottom:38px}
  .hero h1 {font-size:clamp(54px,10vw,76px)}
  .hero .eyebrow {font-size:9px;letter-spacing:.13em}
  .hero-description {font-size:15px;margin-top:24px}
  .hero-actions {gap:22px;margin-top:28px}
  .button {font-size:13px;padding-inline:17px;gap:24px}
  .text-link {font-size:13px;gap:14px}
  .hero-note {margin-top:42px;font-size:10px}
  .studio-section {padding-block:58px}
  .studio-content {grid-template-columns:1fr;gap:28px}
  .studio-heading h1 {font-size:clamp(36px,6.8vw,48px)}
  .studio-copy p {font-size:15px;max-width:55ch}
  .collection-intro {padding-block:52px 42px}
  .collection-intro .eyebrow {font-size:10px;margin-bottom:18px}
  .collection-heading {display:block}
  .collection-intro h1 {font-size:clamp(45px,9vw,64px)}
  .collection-heading>p {margin-top:24px;line-height:1.8;font-size:14px}
  .collection-caption {margin-top:12px}
  .collection-rule {font-size:9px;padding-block:17px}
  .game-feature {display:flex;flex-direction:column;align-items:stretch;gap:0;padding:20px 0 40px}
  .game-feature+.game-feature {padding-top:40px}
  .game-copy {padding-top:26px}
  .game-type {font-size:10px;margin-bottom:12px}
  .game-title {font-size:32px;margin-bottom:15px}
  .game-description {max-width:48ch;font-size:15px;margin-bottom:21px}
  .game-link {min-height:48px;font-size:13px;padding-inline:18px}
  .game-status {font-size:12px}
  .games-section {padding-bottom:38px}
  .collection-end {padding-bottom:42px;align-items:flex-start;flex-direction:column;gap:8px}
  .collection-end p {font-size:22px}
}
@media(max-width:400px) {
  .wrap {width:calc(100% - 40px)}
  .nav-links {gap:22px}
  .nav-links a {font-size:13px}
  .brand-symbol {width:38px;height:27px}
  .hero {padding-top:42px}
  .wordmark-frame {margin-bottom:32px}
  .hero h1 {font-size:54px}
  .hero-actions {flex-direction:column;gap:9px}
  .hero-note {margin-top:26px}
  .studio-heading h1 {font-size:34px}
}
@media(max-height:650px) and (min-width:761px) {
  .hero {min-height:650px;padding-top:48px}
  .wordmark-frame {width:260px;margin-bottom:28px}
  .hero h1 {font-size:70px}
  .hero-note {margin-top:34px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {transition:none!important}
  .shooting-stars {display:none}
  .flight-layer {animation:none;transform:none;opacity:.55}
  .flight-layer:not(:first-child) {display:none}
}

.site-copyright {margin:0 auto;color:#858f9f;font-size:11px;line-height:1.2;padding-block:8px}

/* The product owns its silent animated scene; the studio owns this frame. */
.potion-preview,.solar-preview-window[data-game-preview="potion"]{aspect-ratio:1240/660;background:#48316c}