/* The landing page owns this visual system. Shared game tools keep styles.css. */
@font-face {
  font-family:Barlow;
  src:url('/site/fonts/barlow-regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Barlow;
  src:url('/site/fonts/barlow-semibold.ttf') format('truetype');
  font-weight:600 900;
  font-display:swap
}

@font-face {
  font-family:'Barlow Condensed';
  src:url('/site/fonts/barlow-condensed-extrabold.ttf') format('truetype');
  font-weight:800;
  font-display:swap
}

:root {
  --bg:#101110;
  --panel:#171916;
  --ink:#f0f0e9;
  --muted:#91978e;
  --line:#ffffff21;
  --acid:#d4ff70;
  --display:'Barlow Condensed',Impact,sans-serif;
  --body:Barlow,'Trebuchet MS',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(22px,4.2vw,84px)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
  background:var(--bg)
}

body {
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:var(--body);
  font-size:16px;
  -webkit-font-smoothing:antialiased
}

body::after {
  content:'';
  position:fixed;
  inset:0;
  z-index:12;
  pointer-events:none;
  opacity:.035;
  background-image:url('/site/grain.svg')
}

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

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  border:0
}

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

h1,h2,h3,p,figure {
  margin:0
}

button:active,.button:active {
  transform:scale(.97)
}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--acid);
  outline-offset:7px
}

::selection {
  background:var(--acid);
  color:var(--bg)
}

[hidden] {
  display:none!important
}

.section-shell {
  padding-inline:var(--gutter);
  max-width:1920px;
  margin-inline:auto
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  background:var(--acid);
  color:var(--bg);
  padding:14px;
  z-index:100;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:none
}

.masthead {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:94px;
  padding:0 var(--gutter);
  border-bottom:1px solid var(--line)
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:24px;
  font-weight:600;
  letter-spacing:-.5px;
  white-space:nowrap
}

.brand-gem {
  width:28px;
  height:38px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px #31baff25)
}

.main-nav {
  display:flex;
  gap:clamp(20px,2.5vw,42px);
  align-items:center;
  font-size:12px;
  font-weight:600
}

.main-nav a {
  display:flex;
  gap:8px;
  align-items:center;
  transition:color 180ms
}

.main-nav a span {
  font-size:14px;
  color:var(--muted)
}

.main-nav a:hover {
  color:var(--acid)
}

.nav-download {
  border:1px solid #ffffff50;
  display:flex;
  gap:35px;
  align-items:center;
  font-size:12px;
  font-weight:600;
  padding:13px 19px;
  border-radius:2px;
  transition:background 180ms,color 180ms
}

.nav-download:hover {
  background:var(--ink);
  color:var(--bg)
}

.nav-download span {
  font-size:19px
}

.menu-toggle {
  display:none;
  background:none;
  width:44px;
  height:44px;
  padding:10px
}

.menu-toggle span {
  display:block;
  width:24px;
  height:1px;
  background:var(--ink);
  margin:7px 0;
  transition:transform 200ms
}

.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(4px) rotate(45deg)
}

.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-4px) rotate(-45deg)
}

.mobile-menu {
  position:absolute;
  top:78px;
  left:0;
  right:0;
  padding:20px var(--gutter) 30px;
  background:#181b16;
  border-bottom:1px solid var(--line)
}

.mobile-menu a {
  display:flex;
  justify-content:space-between;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:20px
}

.mobile-menu a span {
  color:var(--acid);
  font-size:13px
}

.hero {
  position:relative;
  min-height:800px;
  height:calc(100svh - 108px);
  max-height:1120px;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 65% 42%,#2b352737,transparent 54%),var(--bg);
  --scene-color:#d4ff70
}

.hero[data-scene='1'] {
  --scene-color:#a5e7ee
}

.hero[data-scene='2'] {
  --scene-color:#c8aff0
}

.hero-grid {
  position:absolute;
  inset:94px var(--gutter) 0;
  background:linear-gradient(90deg,transparent calc(50% - .5px),#ffffff07 50%,transparent calc(50% + .5px));
  border-inline:1px solid #ffffff07;
  pointer-events:none
}

.hero-topline {
  position:absolute;
  top:128px;
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:10px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase
}

.hero-topline p:first-child {
  display:flex;
  align-items:center;
  gap:10px
}

.hero-topline p:nth-child(2) {
  color:#8d9489
}

.hero-edition {
  color:#8d9489
}

.live-dot {
  display:inline-block;
  width:6px;
  height:6px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--acid);
  box-shadow:0 0 12px #d4ff7044
}

.hero-title-wrap {
  position:absolute;
  top:21%;
  left:var(--gutter);
  right:var(--gutter);
  z-index:1
}

.hero-title {
  display:flex;
  justify-content:center;
  font-family:var(--display);
  font-size:clamp(210px,31vw,610px);
  line-height:.72;
  letter-spacing:-.012em;
  font-weight:800
}

.hero-title span {
  display:inline-block;
  animation:letter-arrive 1.25s var(--ease) both
}

.hero-title span:nth-child(2) {
  animation-delay:70ms
}

.hero-title span:nth-child(3) {
  animation-delay:140ms
}

.hero-title span:nth-child(4) {
  animation-delay:210ms
}

.hero-title span:nth-child(5) {
  animation-delay:280ms
}

.hero-visual {
  position:absolute;
  inset:45px 0 85px;
  z-index:2;
  pointer-events:none
}

.hero-visual canvas {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  opacity:0;
  transition:opacity 1s
}

.hero-visual.is-rendered canvas {
  opacity:1
}

.crystal-fallback {
  position:absolute;
  left:54%;
  top:9%;
  height:76%;
  width:auto;
  transform:rotate(24deg);
  filter:drop-shadow(0 0 40px #93bcb633);
  transition:opacity 400ms
}

.is-rendered .crystal-fallback {
  opacity:0
}

.crystal-aura {
  position:absolute;
  left:39%;
  top:4%;
  width:50%;
  height:90%;
  background:radial-gradient(ellipse,#8cba7040,transparent 65%);
  opacity:.5;
  transition:background 1s
}

.hero[data-scene='1'] .crystal-aura {
  background:radial-gradient(ellipse,#4cabb640,transparent 65%)
}

.hero[data-scene='2'] .crystal-aura {
  background:radial-gradient(ellipse,#8971c540,transparent 65%)
}

.artifact-note {
  position:absolute;
  z-index:3;
  right:var(--gutter);
  top:54%;
  display:flex;
  gap:14px;
  align-items:center;
  font-size:9px;
  line-height:1.7;
  letter-spacing:1.2px;
  color:#b9c5ad
}

.artifact-note b {
  font-weight:400;
  font-size:10px;
  color:#7f8978;
  letter-spacing:.2px
}

.crosshair {
  font-size:28px;
  font-weight:400;
  color:var(--scene-color)
}

.hero-lower {
  position:absolute;
  z-index:3;
  bottom:92px;
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px
}

.hero-statement {
  font-size:clamp(30px,3vw,52px);
  line-height:1.05;
  font-weight:600;
  letter-spacing:-1.5px;
  animation:rise-in 1s 250ms var(--ease) both
}

.hero-statement em {
  font-style:normal;
  color:var(--scene-color);
  transition:color 1s
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:27px;
  animation:rise-in 1s 400ms var(--ease) both
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:58px;
  padding:17px 22px;
  font-size:13px;
  font-weight:600;
  border-radius:2px;
  transition:transform 180ms var(--ease),background 180ms,box-shadow 180ms
}

.button-primary {
  background:var(--acid);
  color:#172011
}

.button-primary:hover {
  background:#e2ffac;
  box-shadow:0 0 30px #d4ff701a
}

.button svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round
}

.button-arrow {
  font-size:23px;
  margin-left:8px;
  line-height:1;
  transition:transform 200ms
}

.button:hover .button-arrow {
  transform:translateY(3px)
}

.install-link {
  font-size:11px;
  display:flex;
  gap:17px;
  align-items:center;
  border-bottom:1px solid #7c8077;
  padding-block:9px
}

.install-link span {
  font-size:16px
}

.scene-director {
  width:228px;
  flex-shrink:0
}

.scene-caption {
  min-height:54px;
  font-size:16px;
  line-height:1.4;
  color:#c4c9bd;
  margin-bottom:27px;
  white-space:pre-line
}

.scene-controls {
  display:flex;
  gap:12px
}

.scene-button {
  background:transparent;
  flex:1;
  text-align:left;
  padding:10px 0;
  font-size:10px;
  color:#888f80;
  min-height:44px
}

.scene-button i {
  position:relative;
  display:block;
  height:2px;
  background:#ffffff26;
  margin-top:10px;
  overflow:hidden
}

.scene-button i::after {
  content:'';
  position:absolute;
  inset:0;
  background:var(--scene-color);
  transform:scaleX(0);
  transform-origin:left
}

.scene-button.is-active {
  color:var(--scene-color)
}

.scene-button.is-active i::after {
  transform:scaleX(var(--scene-progress,0))
}

.scene-label {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  font-weight:600;
  letter-spacing:1.2px;
  color:#8c9781;
  margin-top:4px
}

.scene-label>span:first-child {
  color:var(--scene-color)
}

.hero-bottom-bar {
  position:absolute;
  bottom:24px;
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1.3px;
  font-weight:600;
  color:#949d8b;
  z-index:4
}

.hero-bottom-bar>a {
  display:flex;
  gap:23px;
  align-items:center
}

.hero-bottom-bar>a span {
  font-size:20px;
  color:var(--acid)
}

.hero-footnote {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  letter-spacing:2px;
  white-space:nowrap;
  color:#727a6c
}

.motion-toggle {
  display:flex;
  gap:10px;
  align-items:center;
  min-height:36px;
  background:none;
  color:#c3c9bb;
  padding:0;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1px
}

.motion-icon {
  font-size:17px;
  color:var(--acid);
  width:16px
}

.release-strip {
  display:flex;
  align-items:stretch;
  padding:28px var(--gutter);
  border-block:1px solid var(--line);
  background:#171a15;
  gap:40px
}

.release-status {
  display:flex;
  justify-content:center;
  flex-direction:column;
  gap:9px;
  min-width:210px
}

.server-state {
  display:flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  font-weight:600;
  font-size:10px;
  letter-spacing:1.4px
}

.server-state-dot {
  display:block;
  width:6px;
  height:6px;
  background:#acae9b;
  border-radius:50%
}

.is-online .server-state-dot {
  background:var(--acid);
  box-shadow:0 0 12px #d4ff7044
}

.is-offline .server-state-dot {
  background:#dea477
}

.release-note {
  font-size:11px;
  color:#8c9584
}

.release-facts {
  display:grid;
  grid-template-columns:.7fr .8fr 1.35fr 1fr 1fr;
  flex:1;
  margin:0;
  gap:25px
}

.release-facts>div {
  border-left:1px solid var(--line);
  padding-left:25px;
  min-width:0
}

.release-facts dt {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1.3px;
  color:#919a86;
  margin-bottom:8px;
  white-space:nowrap
}

.release-facts dd {
  margin:0;
  font-size:14px;
  line-height:1.3;
  white-space:nowrap
}

.apk-tag {
  font-size:8px;
  border:1px solid #778066;
  padding:2px 4px;
  margin-left:5px;
  vertical-align:middle;
  color:#b4c49f
}

.manifesto-band {
  overflow:hidden;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  color:#7a826f;
  background:#121510
}

.marquee-track {
  display:flex;
  width:max-content;
  animation:marquee 55s linear infinite
}

.marquee-track>span {
  white-space:nowrap;
  font-family:var(--display);
  font-size:27px;
  font-weight:800;
  letter-spacing:.2px
}

.marquee-track i {
  font-family:var(--body);
  font-size:25px;
  color:var(--acid);
  margin:0 45px;
  font-style:normal
}

.paths-section {
  padding-top:100px;
  padding-bottom:115px
}

.section-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:45px
}

.section-kicker,.tiny-label {
  font-size:9px;
  letter-spacing:1.7px;
  font-weight:600;
  line-height:1.5
}

.section-kicker {
  display:flex;
  align-items:center;
  gap:10px
}

.section-kicker i {
  width:6px;
  height:6px;
  background:var(--acid);
  display:block
}

.tiny-label {
  color:#818a77
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:52px
}

h2 {
  font-family:var(--display);
  font-size:clamp(65px,7.8vw,146px);
  font-weight:800;
  line-height:.88;
  letter-spacing:-1.3px
}

.outline-text {
  color:transparent;
  -webkit-text-stroke:1px #a4ab9a
}

.section-heading>p {
  font-size:21px;
  line-height:1.25;
  max-width:285px;
  padding-bottom:5px
}

.section-heading>p>span {
  display:block;
  font-size:13px;
  line-height:1.6;
  margin-top:16px;
  color:#8f9787
}

.paths-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}

.path-card {
  position:relative;
  padding:25px 28px 0;
  background:#1b2018;
  border:1px solid #36412d;
  overflow:hidden;
  --path-color:#d3f5a7;
  --path-glow:#b5e47b15;
  transition:background 350ms,border-color 350ms
}

.path-distance {
  background:#201d1a;
  border-color:#43392f;
  --path-color:#e7c1a2;
  --path-glow:#d8a87917
}

.path-magic {
  background:#1d1c24;
  border-color:#3a334b;
  --path-color:#c9b8eb;
  --path-glow:#b49bd817
}

.path-card-top {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:1.1px;
  color:var(--path-color);
  align-items:center
}

.path-mini-mark {
  font-size:20px;
  font-weight:400
}

.path-art {
  position:relative;
  height:245px;
  display:grid;
  place-items:center;
  perspective:700px
}

.path-art>svg {
  height:230px;
  width:230px;
  z-index:2;
  filter:drop-shadow(0 14px 20px #0006);
  animation:artifact-float 6s ease-in-out infinite;
  transition:transform 650ms var(--ease)
}

.bow-art>svg {
  animation-delay:-2s
}

.magic-art>svg {
  animation-delay:-4s
}

.art-orbit {
  position:absolute;
  width:190px;
  height:190px;
  border:1px solid color-mix(in srgb,var(--path-color) 18%,transparent);
  border-radius:50%;
  background:radial-gradient(circle,var(--path-glow),transparent 70%)
}

.art-orbit::before,.art-orbit::after {
  content:'';
  position:absolute;
  inset:20px;
  border:1px solid color-mix(in srgb,var(--path-color) 10%,transparent);
  border-radius:50%
}

.art-orbit::after {
  inset:-22px;
  border-style:dashed;
  animation:orbit-spin 100s linear infinite
}

.magic-rune {
  position:absolute;
  width:127px;
  height:127px;
  transform:rotate(45deg);
  border:1px solid #c9b8eb45;
  animation:rune-spin 30s linear infinite
}

.art-spark {
  position:absolute;
  font-size:18px;
  color:var(--path-color);
  opacity:.65
}

.spark-one {
  left:16%;
  top:27%;
  animation:spark-pulse 4s ease-in-out infinite
}

.spark-two {
  right:12%;
  bottom:25%;
  font-size:24px;
  opacity:.4
}

.path-trait {
  font-size:8px;
  letter-spacing:1.6px;
  font-weight:600;
  color:var(--path-color)
}

.path-copy h3 {
  font-size:27px;
  line-height:1.1;
  letter-spacing:-.6px;
  margin-top:12px;
  margin-bottom:13px
}

.path-copy>p {
  color:#a5ad9e;
  font-size:13px;
  line-height:1.6;
  max-width:285px;
  min-height:64px
}

.path-distance .path-copy>p {
  color:#aaa49d
}

.path-magic .path-copy>p {
  color:#a6a0b2
}

.path-card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:30px;
  border-top:1px solid color-mix(in srgb,var(--path-color) 15%,transparent);
  padding:19px 0;
  font-size:8px;
  letter-spacing:1.2px;
  color:var(--path-color)
}

.path-card-bottom>span:last-child {
  font-size:20px;
  transition:transform 200ms
}

.path-card:focus-visible {
  outline-offset:3px
}

.path-card:hover,.path-card:focus-visible {
  border-color:var(--path-color)
}

.path-card:hover .path-card-bottom>span:last-child,.path-card:focus-visible .path-card-bottom>span:last-child {
  transform:translate(3px,-3px)
}

.world-section {
  background:#e5e8de;
  color:#1c2118;
  padding-top:85px;
  padding-bottom:45px
}

.world-heading {
  position:relative;
  padding-bottom:48px
}

.world-heading>.section-kicker {
  margin-bottom:32px;
  color:#5d6852
}

.world-heading .section-kicker i {
  background:#53732a
}

.world-heading h2 {
  font-size:clamp(74px,9.5vw,170px)
}

.world-heading h2 em {
  font-style:normal;
  color:#657656
}

.world-heading>p {
  position:absolute;
  right:var(--gutter);
  bottom:54px;
  font-size:17px;
  line-height:1.4;
  color:#5b6353
}

.world-stage {
  height:650px;
  position:relative;
  overflow:hidden;
  background:#24332e;
  color:var(--ink)
}

.world-landscape {
  position:absolute;
  inset:-60px 0;
  will-change:transform
}

.world-landscape img {
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:60% center
}

.world-scrim {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#061a17ce 2%,#051b1833 70%),linear-gradient(0deg,#071b17ba,transparent 35%,transparent 70%,#0d231c4d)
}

.world-corner {
  position:absolute;
  width:35px;
  height:35px;
  color:#d4ff7080
}

.world-corner.top-left {
  left:var(--gutter);
  top:37px;
  border-top:1px solid;
  border-left:1px solid
}

.world-corner.bottom-right {
  right:var(--gutter);
  bottom:37px;
  border-bottom:1px solid;
  border-right:1px solid
}

.world-stage-top,.world-stage-bottom {
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  font-weight:600;
  letter-spacing:1.8px
}

.world-stage-top {
  top:49px;
  padding-left:16px;
  color:#c9d7bc
}

.world-stage-content {
  position:absolute;
  left:calc(var(--gutter) + 16px);
  top:50%;
  transform:translateY(-45%)
}

.world-coordinates {
  font-size:9px;
  letter-spacing:1.8px;
  color:#d4ffae
}

.world-stage-content h3 {
  font-size:clamp(34px,4.3vw,68px);
  line-height:1.05;
  letter-spacing:-1.8px;
  margin:20px 0
}

.world-stage-content p {
  font-size:13px;
  line-height:1.7;
  color:#c2cfb7
}

.world-explore {
  display:inline-flex;
  align-items:center;
  gap:70px;
  margin-top:32px;
  padding-bottom:12px;
  border-bottom:1px solid #d4ff7070;
  font-size:11px;
  font-weight:600;
  color:var(--acid)
}

.world-explore span {
  font-size:22px
}

.world-stage-bottom {
  bottom:45px;
  align-items:center;
  padding-right:16px;
  font-size:8px;
  color:#cbd5c2
}

.world-stage-bottom>span:first-child {
  display:flex;
  gap:9px;
  align-items:center
}

.field-notes {
  padding-top:60px
}

.field-intro {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:25px;
  margin-bottom:40px
}

.field-intro>.section-kicker {
  color:#6c7860;
  max-width:130px;
  font-size:8px;
  line-height:1.8
}

.field-intro>p {
  margin-right:auto;
  margin-left:70px;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.7px
}

.field-intro>p>span {
  color:#6a7760
}

.capture-label {
  font-size:8px;
  letter-spacing:1.5px;
  color:#6b7462
}

.world-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:40px 26px
}

.world-window {
  min-width:0
}

.world-window>img {
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#c8cec1;
  border:1px solid #bfc8b4;
  transition:filter 300ms
}

.world-window figcaption {
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px;
  padding-top:15px
}

.world-window figcaption>span:first-child {
  grid-column:1;
  font-size:8px;
  letter-spacing:1.4px;
  color:#66755b
}

.world-window figcaption>strong {
  grid-column:1;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.4px
}

.world-window figcaption>span:last-child {
  grid-column:2;
  grid-row:1/3;
  font-size:30px;
  color:#7a886d;
  align-self:center
}

.world-values {
  display:flex;
  justify-content:space-between;
  gap:25px;
  margin-top:55px;
  padding-top:25px;
  border-top:1px solid #1a341d22;
  font-size:8px;
  font-weight:600;
  letter-spacing:1.2px;
  color:#64705a
}

.install-section {
  padding-top:100px;
  padding-bottom:75px
}

.install-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  margin-bottom:60px
}

.install-heading h2 {
  font-size:clamp(80px,10vw,180px);
  line-height:.88
}

.install-heading h2 em {
  font-style:normal;
  color:var(--acid)
}

.install-aside {
  padding-right:4vw
}

.install-star {
  display:block;
  font-size:126px;
  line-height:1.15;
  color:var(--acid);
  margin-bottom:30px;
  /* Keep the former star's footprint while the crystal turns inside it. */
  width:.89em;
  height:1.15em;
  padding-block:.1em;
  perspective:600px;
}

.install-crystal {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:rotateZ(-10deg);
  animation:install-crystal-turn 8s linear infinite;
}

@keyframes install-crystal-turn {
  0% { transform:rotateZ(-10deg) rotateY(0deg); filter:brightness(1); }
  25% { transform:rotateZ(-10deg) rotateY(90deg); filter:brightness(.85); }
  50% { transform:rotateZ(-10deg) rotateY(180deg); filter:brightness(1.12); }
  75% { transform:rotateZ(-10deg) rotateY(270deg); filter:brightness(.85); }
  100% { transform:rotateZ(-10deg) rotateY(360deg); filter:brightness(1); }
}

.install-aside>p {
  font-size:19px;
  line-height:1.3;
  letter-spacing:-.3px;
  margin-bottom:28px
}

.install-aside .button {
  font-size:12px;
  gap:35px
}

.install-platform {
  display:block;
  margin-top:13px;
  font-size:8px;
  letter-spacing:1.7px;
  color:#7c8870
}

.install-steps {
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none;
  gap:38px
}

.install-steps>li {
  border-top:1px solid var(--line);
  padding-top:22px;
  position:relative
}

.step-icon {
  font-family:var(--display);
  font-size:40px;
  color:var(--acid);
  display:block;
  margin-bottom:26px
}

.install-steps h3 {
  font-size:22px;
  letter-spacing:-.5px;
  margin-bottom:12px
}

.install-steps p {
  font-size:13px;
  color:#949e8b;
  line-height:1.7;
  max-width:325px;
  overflow-wrap:anywhere
}

.testing-note {
  margin-top:40px;
  font-size:10px;
  line-height:1.6;
  color:#727d69
}

.footer {
  background:#171b14;
  padding-top:45px;
  padding-bottom:22px;
  border-top:1px solid var(--line)
}

.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding-bottom:40px
}

.footer-top>.brand {
  font-size:32px
}

.footer-top>.brand .brand-gem {
  width:36px;
  height:48px
}

.footer-top>p {
  font-size:17px;
  line-height:1.25;
  color:#a1ae93;
  margin-right:auto;
  margin-left:10%
}

.back-top {
  display:flex;
  gap:30px;
  align-items:center;
  text-transform:uppercase;
  font-size:9px;
  font-weight:600;
  letter-spacing:1px
}

.back-top>span {
  font-size:27px;
  color:var(--acid)
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:9px;
  color:#7e8a72
}

.footer-bottom nav {
  display:flex;
  gap:25px
}

.footer-bottom nav a:hover {
  color:var(--acid)
}

.footer-bottom>span:last-child {
  font-size:8px;
  letter-spacing:1px
}

/* Progressive enhancement: without JavaScript, every section remains visible. */
.reveal-ready [data-reveal] {
  opacity:0;
  transform:translateY(30px);
  transition:opacity 900ms var(--ease),transform 900ms var(--ease)
}

.reveal-ready [data-reveal].is-visible {
  opacity:1;
  transform:none
}

.paths-grid [data-reveal]:nth-child(2),.install-steps [data-reveal]:nth-child(2) {
  transition-delay:90ms
}

.paths-grid [data-reveal]:nth-child(3),.install-steps [data-reveal]:nth-child(3) {
  transition-delay:180ms
}

.world-gallery [data-reveal]:nth-child(even) {
  transition-delay:80ms
}

.motion-paused *,.motion-paused *::before,.motion-paused *::after {
  animation-play-state:paused!important
}

.motion-paused [data-reveal] {
  transition:none;
  opacity:1;
  transform:none
}

@keyframes letter-arrive {
  from {
    opacity:0;
    transform:translateY(100px) rotate(7deg)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes rise-in {
  from {
    opacity:0;
    transform:translateY(22px)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes marquee {
  to {
    transform:translateX(-50%)
  }
}

@keyframes artifact-float {
  0%,100% {
    transform:translateY(5px) rotate(-3deg)
  }
  50% {
    transform:translateY(-8px) rotate(3deg)
  }
}

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

@keyframes rune-spin {
  to {
    transform:rotate(405deg)
  }
}

@keyframes spark-pulse {
  50% {
    opacity:.25;
    transform:scale(.75)
  }
}

@media(hover:hover) and (pointer:fine) {
  .path-card:hover .path-art>svg {
    animation-play-state:paused;
    transform:translateY(-12px) rotate(-10deg) scale(1.08)
  }
  .world-window:hover>img {
    filter:brightness(1.08)
  }
}

@media(min-width:1700px) {
  .hero-title-wrap {
    top:19%
  }
  .hero-lower {
    bottom:105px
  }
  .hero-statement {
    font-size:54px
  }
  .hero-topline {
    top:135px
  }
  .hero-visual {
    inset:50px 0 80px
  }
  .hero-title {
    font-size:30.7vw
  }
}

@media(max-width:1150px) {
  .main-nav {
    gap:20px;
    font-size:11px
  }
  .masthead {
    gap:20px
  }
  .hero {
    min-height:760px
  }
  .hero-title-wrap {
    top:25%
  }
  .hero-title {
    font-size:31vw
  }
  .artifact-note {
    top:54%;
    font-size:8px
  }
  .artifact-note b {
    display:none
  }
  .scene-director {
    width:190px
  }
  .release-strip {
    gap:24px
  }
  .release-status {
    min-width:160px
  }
  .release-facts {
    gap:18px
  }
  .release-facts>div {
    padding-left:18px
  }
  .release-facts dd {
    font-size:12px
  }
  .release-facts dt {
    font-size:8px
  }
  .release-note {
    font-size:10px
  }
  .path-card {
    padding:20px 22px 0
  }
  .path-art {
    height:220px
  }
  .path-art>svg {
    width:205px;
    height:205px
  }
  .path-copy h3 {
    font-size:23px
  }
  .path-copy>p {
    min-height:85px
  }
  .world-stage {
    height:590px
  }
  .install-aside {
    padding-right:0
  }
  .field-intro>p {
    margin-left:40px
  }
  .footer-bottom {
    flex-wrap:wrap
  }
  .footer-bottom nav {
    order:3;
    flex-basis:100%
  }
}

@media(max-width:820px) {
  .masthead {
    min-height:78px
  }
  .main-nav {
    display:none
  }
  .nav-download {
    margin-left:auto;
    padding:10px 15px;
    font-size:11px;
    gap:20px
  }
  .menu-toggle:not([hidden]) {
    display:block
  }
  .hero {
    height:850px;
    min-height:850px
  }
  .hero-topline {
    top:107px;
    font-size:8px;
    letter-spacing:1px
  }
  .hero-topline p:nth-child(2) {
    display:none
  }
  .hero-title-wrap {
    top:24%
  }
  .hero-title {
    font-size:31.7vw
  }
  .hero-visual {
    inset:80px -12% 150px
  }
  .artifact-note {
    top:48%;
    right:30px
  }
  .hero-lower {
    bottom:85px;
    gap:25px
  }
  .hero-statement {
    font-size:37px
  }
  .hero-actions {
    gap:18px;
    align-items:flex-start;
    flex-direction:column;
    margin-top:22px
  }
  .hero-actions .button {
    min-height:54px;
    font-size:12px;
    padding:16px 19px
  }
  .install-link {
    font-size:10px;
    padding-bottom:5px
  }
  .scene-director {
    width:170px;
    margin-bottom:7px
  }
  .scene-caption {
    font-size:14px
  }
  .hero-footnote {
    display:none
  }
  .release-strip {
    padding-block:26px;
    gap:24px;
    flex-direction:column
  }
  .release-status {
    flex-direction:row;
    justify-content:space-between;
    align-items:center
  }
  .release-facts {
    gap:16px;
    grid-template-columns:.65fr .75fr 1.3fr 1fr 1fr
  }
  .release-facts>div {
    padding-left:16px
  }
  .release-facts>div:first-child {
    border:0;
    padding-left:0
  }
  .paths-section {
    padding-block:75px
  }
  .tiny-label {
    font-size:8px
  }
  .section-heading {
    gap:25px
  }
  .section-heading>p {
    font-size:17px
  }
  .section-heading>p>span {
    font-size:11px
  }
  .section-heading h2 {
    font-size:clamp(60px,9vw,80px)
  }
  .paths-grid {
    gap:10px
  }
  .path-card {
    padding:18px 16px 0
  }
  .path-card-top {
    font-size:8px
  }
  .path-art {
    height:190px
  }
  .path-art>svg {
    width:170px;
    height:170px
  }
  .art-orbit {
    width:140px;
    height:140px
  }
  .magic-rune {
    width:100px;
    height:100px
  }
  .path-copy h3 {
    font-size:21px
  }
  .path-copy>p {
    font-size:12px;
    min-height:96px
  }
  .path-trait {
    font-size:7px;
    letter-spacing:1px
  }
  .path-card-bottom {
    font-size:7px;
    letter-spacing:.4px;
    margin-top:24px
  }
  .world-section {
    padding-top:65px
  }
  .world-heading>p {
    font-size:13px;
    bottom:50px
  }
  .world-stage {
    height:530px
  }
  .world-stage-content h3 {
    font-size:43px
  }
  .world-stage-top,.world-stage-bottom {
    font-size:7px;
    letter-spacing:1px
  }
  .world-stage-top>span:last-child {
    display:none
  }
  .field-intro>.section-kicker {
    max-width:110px
  }
  .field-intro>p {
    margin-left:10px;
    font-size:28px
  }
  .capture-label {
    max-width:120px;
    line-height:1.7;
    font-size:7px
  }
  .install-section {
    padding-block:75px 60px
  }
  .install-heading h2 {
    font-size:clamp(65px,10.5vw,100px)
  }
  .install-star {
    font-size:90px;
    margin-bottom:15px
  }
  .install-aside>p {
    font-size:16px
  }
  .install-aside .button {
    font-size:11px;
    gap:10px;
    padding:15px 17px;
    min-height:53px
  }
  .install-steps {
    gap:25px
  }
  .install-steps h3 {
    font-size:19px
  }
  .install-steps p {
    font-size:12px
  }
  .footer-top>p {
    margin-left:4%;
    font-size:15px
  }
  .back-top {
    gap:18px;
    font-size:8px
  }
}

@media(max-width:580px) {
  :root {
    --gutter:22px
  }
  .masthead {
    gap:12px
  }
  .brand {
    font-size:21px;
    gap:7px
  }
  .brand-gem {
    width:24px;
    height:32px
  }
  .nav-download {
    font-size:10px;
    gap:18px;
    padding:9px 12px
  }
  .menu-toggle {
    width:34px;
    padding:5px
  }
  .hero {
    height:860px;
    min-height:860px;
    max-height:none
  }
  .hero-topline {
    top:108px;
    font-size:7px;
    letter-spacing:1px;
    gap:10px
  }
  .hero-topline p:first-child {
    gap:6px
  }
  .hero-edition {
    font-size:6.5px
  }
  .hero-title-wrap {
    top:190px;
    left:16px;
    right:16px
  }
  .hero-title {
    font-size:33vw;
    line-height:.72
  }
  .hero-visual {
    inset:112px -36% 294px
  }
  .crystal-fallback {
    left:38%;
    top:10%;
    height:72%
  }
  .crystal-aura {
    left:28%;
    width:58%
  }
  .artifact-note {
    top:375px;
    right:22px;
    font-size:7px;
    gap:7px;
    letter-spacing:.7px
  }
  .artifact-note .crosshair {
    font-size:21px
  }
  .hero-lower {
    left:22px;
    right:22px;
    bottom:95px;
    display:block
  }
  .hero-statement {
    font-size:37px;
    line-height:1.08;
    letter-spacing:-1.25px
  }
  .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:17px;
    margin-top:23px
  }
  .hero-actions .button {
    font-size:11px;
    padding:15px;
    gap:10px;
    min-height:52px
  }
  .hero-actions .button svg {
    width:17px
  }
  .hero-actions .button-arrow {
    font-size:21px;
    margin-left:3px
  }
  .install-link {
    font-size:9px;
    gap:8px;
    white-space:nowrap
  }
  .scene-director {
    width:100%;
    margin:28px 0 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:35px;
    align-items:center
  }
  .scene-caption {
    font-size:12px;
    margin:0;
    min-height:0;
    grid-row:1/3
  }
  .scene-controls {
    gap:9px
  }
  .scene-button {
    font-size:8px;
    padding-top:0
  }
  .scene-label {
    font-size:7px;
    margin-top:0;
    letter-spacing:.8px
  }
  .hero-bottom-bar {
    bottom:25px;
    font-size:8px
  }
  .hero-bottom-bar>a {
    gap:12px
  }
  .motion-toggle {
    font-size:8px
  }
  .release-strip {
    padding:24px 22px;
    gap:24px
  }
  .release-note {
    font-size:9px
  }
  .server-state {
    font-size:8px;
    letter-spacing:1px
  }
  .release-facts {
    grid-template-columns:1fr 1fr 1.2fr;
    gap:25px 15px
  }
  .release-facts>div:nth-child(4) {
    border-left:0;
    padding-left:0
  }
  .release-facts dd {
    font-size:13px
  }
  .release-facts dt {
    font-size:7px;
    letter-spacing:1px
  }
  .manifesto-band {
    padding:17px 0
  }
  .marquee-track>span {
    font-size:22px
  }
  .marquee-track i {
    font-size:20px;
    margin-inline:28px
  }
  .paths-section {
    padding-block:62px
  }
  .section-top {
    margin-bottom:32px
  }
  .tiny-label {
    display:none
  }
  .section-kicker {
    font-size:8px;
    letter-spacing:1.2px
  }
  .section-heading {
    display:block;
    margin-bottom:30px
  }
  .section-heading h2 {
    font-size:clamp(62px,16vw,88px);
    letter-spacing:-.6px
  }
  .section-heading>p {
    margin-top:26px;
    font-size:17px
  }
  .section-heading>p br:first-child {
    display:none
  }
  .section-heading>p>span {
    font-size:12px;
    margin-top:12px
  }
  .paths-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .path-card {
    padding:22px 24px 0
  }
  .path-card-top {
    font-size:10px
  }
  .path-art {
    height:242px
  }
  .path-art>svg {
    width:238px;
    height:238px
  }
  .art-orbit {
    width:190px;
    height:190px
  }
  .magic-rune {
    width:125px;
    height:125px
  }
  .path-trait {
    font-size:8px;
    letter-spacing:1.5px
  }
  .path-copy h3 {
    font-size:28px
  }
  .path-copy>p {
    min-height:auto;
    max-width:290px;
    font-size:13px
  }
  .path-card-bottom {
    font-size:8px;
    letter-spacing:1.1px;
    padding-block:18px
  }
  .world-section {
    padding-top:55px;
    padding-bottom:30px
  }
  .world-heading {
    padding-bottom:32px
  }
  .world-heading>.section-kicker {
    margin-bottom:26px
  }
  .world-heading h2 {
    font-size:clamp(67px,17vw,98px);
    letter-spacing:-.8px
  }
  .world-heading>p {
    position:static;
    margin-top:23px;
    font-size:14px
  }
  .world-heading>p br {
    display:none
  }
  .world-stage {
    height:580px
  }
  .world-landscape {
    inset:-40px -100% -40px -70%
  }
  .world-landscape img {
    object-position:65% center
  }
  .world-scrim {
    background:linear-gradient(90deg,#071b15c4,#0c1e1940),linear-gradient(0deg,#071b15bd,transparent 60%)
  }
  .world-stage-top {
    top:40px;
    font-size:7px
  }
  .world-corner.top-left {
    top:26px
  }
  .world-stage-content {
    left:32px;
    right:28px;
    transform:translateY(-40%)
  }
  .world-stage-content h3 {
    font-size:37px;
    letter-spacing:-1px
  }
  .world-stage-content p {
    font-size:12px;
    line-height:1.65
  }
  .world-stage-content p br {
    display:none
  }
  .world-coordinates {
    font-size:7px;
    letter-spacing:1.3px
  }
  .world-explore {
    font-size:10px;
    gap:52px
  }
  .world-stage-bottom {
    bottom:36px;
    font-size:7px;
    line-height:1.7;
    padding-right:5px
  }
  .world-stage-bottom>span:nth-child(2) {
    display:none
  }
  .world-corner.bottom-right {
    bottom:26px
  }
  .field-notes {
    padding-top:36px
  }
  .field-intro {
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:28px
  }
  .field-intro>.section-kicker {
    flex-basis:100%;
    max-width:none;
    font-size:7px
  }
  .field-intro>p {
    font-size:28px;
    margin-left:0
  }
  .capture-label {
    max-width:95px;
    font-size:6px
  }
  .world-gallery {
    grid-template-columns:1fr;
    gap:30px
  }
  .world-window figcaption>strong {
    font-size:22px
  }
  .world-values {
    margin-top:35px;
    font-size:7px;
    line-height:1.5;
    gap:15px;
    flex-direction:column
  }
  .install-section {
    padding-top:58px
  }
  .install-heading {
    display:block;
    margin-bottom:45px
  }
  .install-heading h2 {
    font-size:clamp(75px,20vw,112px)
  }
  .install-aside {
    position:relative;
    padding-top:38px
  }
  .install-star {
    position:absolute;
    right:0;
    top:35px;
    font-size:60px;
    line-height:1
  }
  .install-aside>p {
    font-size:17px;
    margin-bottom:22px
  }
  .install-aside .button {
    font-size:12px;
    min-height:55px;
    gap:40px
  }
  .install-platform {
    font-size:7px
  }
  .install-steps {
    grid-template-columns:1fr;
    gap:28px
  }
  .install-steps>li {
    display:grid;
    grid-template-columns:50px 1fr;
    column-gap:16px;
    padding-top:22px
  }
  .step-icon {
    grid-row:1/3;
    font-size:37px;
    margin:0
  }
  .install-steps h3 {
    font-size:23px;
    margin-bottom:10px
  }
  .install-steps p {
    font-size:13px;
    max-width:100%
  }
  .testing-note {
    font-size:9px;
    margin-top:28px
  }
  .footer {
    padding-top:32px
  }
  .footer-top {
    flex-wrap:wrap;
    gap:25px;
    padding-bottom:28px
  }
  .footer-top>.brand {
    font-size:26px
  }
  .footer-top>.brand .brand-gem {
    width:28px;
    height:38px
  }
  .footer-top>p {
    font-size:13px;
    margin-left:auto;
    margin-right:0
  }
  .back-top {
    flex-basis:100%;
    justify-content:space-between
  }
  .footer-bottom {
    gap:17px;
    font-size:8px
  }
  .footer-bottom>span:last-child {
    font-size:7px
  }
  .footer-bottom nav {
    gap:12px 18px;
    flex-wrap:wrap;
    font-size:9px;
    line-height:1.6
  }
}

@media(max-width:360px) {
  :root {
    --gutter:18px
  }
  .hero-actions {
    gap:12px
  }
  .hero-actions .button {
    padding-inline:12px;
    font-size:10px;
    gap:8px
  }
  .hero-actions .button svg {
    display:none
  }
  .hero-statement {
    font-size:33px
  }
  .install-link {
    font-size:8px
  }
  .hero-topline {
    font-size:6.5px
  }
  .hero-edition {
    font-size:6px
  }
  .release-note {
    font-size:8px
  }
  .release-facts {
    column-gap:12px
  }
  .release-facts>div {
    padding-left:12px
  }
  .release-facts dd {
    font-size:12px
  }
  .hero-lower {
    left:18px;
    right:18px
  }
  .hero-title-wrap {
    top:180px
  }
  .hero-visual {
    inset:100px -36% 310px
  }
  .artifact-note {
    top:360px
  }
}

/* Release values can grow with localization; never clip a date or platform label. */
.release-facts dd {
  white-space:normal;
  overflow-wrap:anywhere
}

.apk-tag {
  display:inline-block
}

.motion-paused .hero-title span,.motion-paused .hero-statement,.motion-paused .hero-actions {
  animation:none;
  opacity:1;
  transform:none
}

@media(max-width:820px) {
  html:not(.home-enhanced) .main-nav {
    display:flex;
    position:absolute;
    top:78px;
    left:var(--gutter);
    right:var(--gutter);
    flex-wrap:wrap;
    gap:14px;
    padding-block:12px;
    font-size:10px
  }
  html:not(.home-enhanced) .hero-topline {
    top:148px
  }
}

@media(max-width:580px) {
  .install-heading h2 {
    font-size:clamp(65px,19vw,108px)
  }
  .install-star {
    right:10px
  }
  .hero-topline {
    font-size:8px;
    letter-spacing:.6px
  }
  .hero-edition {
    font-size:7px;
    letter-spacing:.5px
  }
  .scene-button {
    font-size:9px
  }
  .scene-label {
    font-size:8px;
    letter-spacing:.4px
  }
  .release-facts dt {
    font-size:8px
  }
  .path-trait,.path-card-bottom {
    font-size:9px
  }
  .world-window figcaption>span:first-child {
    font-size:9px
  }
  .testing-note {
    font-size:11px
  }
  .install-platform {
    font-size:8px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .reveal-ready [data-reveal] {
    opacity:1;
    transform:none
  }
  .world-landscape {
    will-change:auto
  }
  .hero-title span,.hero-statement,.hero-actions {
    opacity:1;
    transform:none
  }
}