@font-face {
  font-family:Tektur;
  src:url(fonts/tektur-latin.woff2) format('woff2');
  font-weight:400 900;
  font-display:swap
}
:root {
  --ink:#071b59;
  --aqua:#10cbed;
  --pink:#f5239c;
  --yellow:#ffe147;
  --line:#d1e5ee;
  --page:1180px;
  --header-art-height:82px;
  --hero-art-height:610px;
  --sky-art-height:calc(var(--header-art-height) + var(--hero-art-height))
}
/* Both panels reveal the same panorama, with the hero continuing below the header. */
.hub-rework .site-header,.hub-rework .launch-hero {
  background-image:url('rework/sky-clouds.webp');
  background-size:max(100vw,calc(var(--sky-art-height) * 1.75)) auto;
  background-repeat:no-repeat
}
.hub-rework .site-header {
  background-position:center top
}
.hub-rework .launch-hero {
  background-position:center calc(-1 * var(--header-art-height))
}
.hub-rework .launch-hero:before {
  background:none
}
@media(min-width:1500px) {
  :root { --hero-art-height:660px }
}
@media(max-width:900px) {
  :root { --hero-art-height:535px }
}
@media(max-width:760px) {
  :root { --hero-art-height:650px }
}
@media(max-width:620px) {
  :root { --header-art-height:72px }
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  margin:0;
  color:var(--ink);
  background:white;
  font:16px/1.5 Arial,sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit
}
button,a,input {
  touch-action:manipulation
}
button {
  cursor:pointer
}
img {
  max-width:100%;
  display:block
}
a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:5px
}
::selection {
  background:#ffe147;
  color:var(--ink)
}
[hidden] {
  display:none!important
}
.skip-link {
  position:absolute;
  top:-100px;
  left:20px;
  z-index:100;
  background:white;
  padding:12px
}
.skip-link:focus {
  top:12px
}
.wrap {
  width:min(var(--page),calc(100% - 64px));
  margin-inline:auto
}
.site-header {
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:0 max(32px,calc((100vw - var(--page))/2));
  position:relative;
  z-index:10;
  background:white;
  border-bottom:2px solid #ecfaff
}
.site-header:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:74px;
  height:100%;
  background:repeating-linear-gradient(135deg,transparent 0 25px,#23d2ed 25px 37px,transparent 37px 43px);
  clip-path:polygon(0 0,100% 0,0 100%);
  pointer-events:none
}
.wordmark {
  flex-shrink:0
}
.wordmark img {
  width:188px;
  height:66px
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:32px;
  font-weight:700;
  font-size:15px
}
.desktop-nav a {
  padding:10px 0
}
.desktop-nav a:hover {
  color:#c90879
}
.account-link {
  background:#0066ce;
  color:white;
  padding:10px 23px!important;
  border-radius:4px
}
.account-link:hover {
  background:var(--ink);
  color:white!important
}
.mobile-menu-toggle,.mobile-navigation {
  display:none
}
.launch-hero {
  height:610px;
  position:relative;
  isolation:isolate;
  background:#bceffa url('rework/sky-clouds.webp') center bottom/cover;
  overflow:hidden
}
.launch-hero:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,#f6ffffc9,transparent 58%);
  z-index:-1
}
.hero-inner {
  height:100%;
  position:relative;
  display:flex;
  align-items:center
}
.hero-copy {
  width:52%;
  position:relative;
  z-index:4;
  padding-bottom:55px
}
.hero-logo {
  width:620px;
  margin-left:-18px;
  filter:drop-shadow(0 5px 0 #ffffff80);
  transform:translate3d(var(--logo-offset-x,0px),var(--logo-offset-y,0px),0);
  transition:transform 180ms ease-out
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .hero-logo { will-change:transform }
}
.hero-copy h1 {
  margin:0
}
.hero-stage {
  width:590px;
  aspect-ratio:1;
  position:absolute;
  right:-45px;
  top:18px;
  pointer-events:none
}
.world-disc {
  position:absolute;
  inset:8%;
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 35% 25%,#41d5ff 0,#058cdb 36%,#004ca4 68%,#002875 100%);
  box-shadow:inset -20px -15px 35px #00245970,0 0 0 2px #ffffffb0,0 0 0 9px #ffffff25
}
.earth-map,.earth-geo-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.earth-atmosphere {
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(ellipse at 30% 22%,#ffffff6b 0,transparent 37%,#00185a50 85%,#001b686e);
  box-shadow:inset 5px 5px 13px white,inset -10px -10px 25px #023389
}
.earth-map svg {
  width:100%;
  height:100%
}
.earth-map--accurate svg {
  display:none
}
.orbital-ribbons {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2
}
.hero-sash {
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:94px;
  background:white;
  clip-path:polygon(0 10%,100% 92%,100% 100%,0 100%);
  z-index:5
}
.hero-sash:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--aqua) 0 42%,var(--pink) 42% 65%,var(--yellow) 65%);
  clip-path:polygon(0 10%,100% 92%,100% 98%,0 16%)
}
.hero-print {
  position:absolute;
  width:190px;
  height:100px;
  background:radial-gradient(#008ec8 1.5px,transparent 2px) 0 0/10px 10px;
  opacity:.35;
  transform:rotate(-20deg);
  top:32px;
  left:38%;
  mask-image:linear-gradient(90deg,#000,transparent)
}
.game-select {
  padding:24px 0 35px
}
.section-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-bottom:24px
}
.section-bar h2,.section-title {
  font-family:Tektur,Arial,sans-serif;
  font-weight:800;
  font-size:clamp(25px,3vw,39px);
  font-style:italic;
  letter-spacing:-1px;
  margin:0
}
.section-bar h2:before {
  content:'';
  display:inline-block;
  width:10px;
  height:22px;
  background:var(--aqua);
  transform:skew(-24deg);
  box-shadow:10px 0 var(--pink),20px 0 var(--yellow);
  margin-right:35px
}
.game-search {
  position:relative;
  width:330px
}
.game-search input {
  position:relative;
  z-index:1;
  width:100%;
  padding:12px 16px 12px 42px;
  border:1px solid transparent;
  background:transparent;
  border-radius:0;
  color:var(--ink)
}
.search-frame {
  position:absolute;
  inset:0;
  background:#7691ad;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  pointer-events:none
}
.search-frame:before {
  content:'';
  position:absolute;
  inset:1px;
  background:white;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)
}
.game-search:focus-within .search-frame {
  background:var(--ink)
}
.game-search:focus-within .search-frame:before {
  inset:3px
}
.game-search input:focus-visible {
  outline:none
}
.game-search:before,.game-search:after {
  z-index:2;
  pointer-events:none
}
.game-search:before {
  content:'';
  position:absolute;
  top:15px;
  left:17px;
  width:12px;
  height:12px;
  border:2px solid #6b829e;
  border-radius:50%
}
.game-search:after {
  content:'';
  position:absolute;
  top:28px;
  left:29px;
  width:7px;
  height:2px;
  background:#6b829e;
  transform:rotate(45deg)
}
.game-list {
  display:grid;
  gap:20px
}
.game-row {
  display:grid;
  grid-template-columns:43% 1fr auto;
  align-items:center;
  height:174px;
  border-bottom:1px solid var(--line);
  position:relative;
  isolation:isolate;
  background:white;
  overflow:hidden
}
.game-row:after {
  content:'';
  position:absolute;
  right:0;
  inset-block:0;
  width:105px;
  background:repeating-linear-gradient(135deg,transparent 0 18px,var(--game-color) 18px 23px,transparent 23px 38px);
  opacity:.3;
  z-index:-1
}
.game-art {
  height:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
  background:var(--art-background)
}
.game-art:after {
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(128deg,transparent 0 32px,#fff7 33px 35px,transparent 36px 95px);
  pointer-events:none
}
.game-art img {
  width:80%;
  max-height:130px;
  object-fit:contain;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 2px 1px #0003)
}
.chunithm {
  --game-color:#ffcf21;
  --art-background:#000
}
.chunithm .game-art {
  background:linear-gradient(90deg,#ff8500 0%,#ffb91b 48%,#fff22c 100%)
}
.chunithm .game-art:before {
  content:'';
  position:absolute;
  inset:6px;
  clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
  background:#000
}
.chunithm .game-art:after {
  content:none
}
.chunithm .game-art img {
  width:80%;
  max-height:118px;
  filter:none
}
.voltex {
  --game-color:#11d0e9;
  --art-background:#000
}
.voltex .game-art {
  background:linear-gradient(90deg,#10cbea 0%,#57cfea 45%,#f12b9c 100%)
}
.voltex .game-art:before {
  content:'';
  position:absolute;
  inset:6px;
  clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
  background:#000
}
.voltex .game-art:after {
  content:none
}
.voltex .game-art img {
  width:80%;
  max-height:118px;
  filter:none
}
.game-info {
  padding:16px 25px
}
.game-info h3 {
  font-family:Tektur,Arial,sans-serif;
  font-size:25px;
  font-weight:750;
  margin:0 0 5px;
  line-height:1.2
}
.game-info p {
  color:#566b8a;
  font-size:15px;
  margin:0
}
.game-enter {
  margin-right:28px;
  background:var(--game-color);
  padding:14px 24px;
  font-family:Tektur,Arial,sans-serif;
  font-weight:700;
  transform:skew(-18deg);
  white-space:nowrap
}
.game-enter span {
  display:block;
  transform:skew(18deg)
}
.game-row:hover .game-enter {
  background:var(--ink);
  color:white
}
.game-row:hover .game-art img {
  transform:scale(1.035)
}
.game-art img {
  transition:transform .2s
}
.game-row:focus-visible {
  outline-offset:4px;
  outline-width:3px
}
.empty-state {
  padding:24px;
  border-left:4px solid var(--pink);
  background:#fff4fa
}
.directory-summary {
  color:#6a7e98;
  font-size:13px;
  margin:12px 0 0
}
.community-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-block:12px 46px
}
.community-panel {
  min-height:145px;
  padding:25px 32px;
  position:relative;
  overflow:hidden;
  background:#e5f9ff;
  isolation:isolate;
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)
}
.community-panel h2 {
  font:italic 800 32px/1.2 Tektur,Arial,sans-serif;
  margin:0 0 6px
}
.community-panel p {
  margin:0;
  font-size:17px
}
.community-panel:hover h2 {
  text-decoration:underline
}
.community-panel--discord {
  background:#5865f2;
  color:#fff;
  padding-right:130px
}
.discord-logo {
  position:absolute;
  right:30px;
  top:50%;
  width:84px;
  height:auto;
  transform:translateY(-50%);
  pointer-events:none
}
.community-graphic {
  position:absolute;
  right:24px;
  top:24px;
  width:115px;
  height:90px;
  opacity:.45;
  z-index:-1
}
.projects {
  border-top:1px solid var(--line);
  padding-block:28px 38px
}
.projects-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px
}
.projects h2 {
  font-family:Tektur,Arial,sans-serif;
  font-size:28px;
  margin:0
}
.organize-link {
  font-size:14px;
  font-weight:700;
  color:#006f97
}
.project-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.project-link {
  display:flex;
  align-items:center;
  gap:24px;
  min-height:110px;
  font-size:16px
}
.project-link img {
  width:180px;
  height:90px;
  object-fit:contain
}
.project-link span {
  display:grid;
  color:#61728d
}
.project-link strong {
  color:var(--ink);
  font-size:22px
}
.project-link:hover strong {
  text-decoration:underline
}
.site-footer {
  border-top:1px solid var(--line);
  padding-block:26px 30px;
  position:relative
}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.footer-brand img {
  width:166px
}
.footer-meta {
  font-size:12px;
  color:#637492
}
.footer-links {
  display:flex;
  gap:24px;
  font-size:14px
}
.footer-links a:hover {
  text-decoration:underline
}
.central-flash {
  padding:14px 32px;
  background:#fff0bd;
  color:var(--ink)
}
.account-footer {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:20px;
  font-size:13px
}
.account-footer form {
  margin:0
}
.account-footer button {
  background:none;
  border:0;
  padding:0;
  color:var(--ink);
  text-decoration:underline
}
.account-footer a {
  text-decoration:underline
}
@media(min-width:1500px) {
  .launch-hero {
    height:660px
  }
  .hero-stage {
    width:650px;
    right:-70px
  }
  .hero-logo {
    width:650px
  }
}
@media(max-width:1100px) {
  .desktop-nav {
    gap:20px
  }
  .hero-stage {
    width:540px;
    right:-90px;
    top:50px
  }
  .hero-copy {
    width:55%
  }
  .game-row {
    grid-template-columns:40% 1fr auto;
    height:156px
  }
  .game-info {
    padding:15px
  }
  .game-info h3 {
    font-size:21px
  }
  .game-enter {
    margin-right:15px;
    padding:13px 18px
  }
  .community-graphic {
    right:12px;
    opacity:.22
  }
}
@media(max-width:900px) {
  .desktop-nav {
    display:none
  }
  .mobile-menu-toggle {
    display:flex;
    flex-direction:column;
    gap:5px;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    background:white
  }
  .mobile-menu-toggle i {
    display:block;
    width:21px;
    height:2px;
    background:var(--ink)
  }
  .mobile-navigation:not([hidden]) {
    display:grid;
    position:absolute;
    top:85px;
    right:0;
    left:0;
    background:white;
    padding:16px 32px;
    box-shadow:0 12px 15px #071b591a;
    gap:4px
  }
  .mobile-navigation a {
    padding:12px;
    font-weight:700
  }
  .launch-hero {
    height:535px
  }
  .hero-stage {
    width:450px;
    right:-85px;
    top:45px
  }
  .hero-copy {
    width:55%;
    padding-bottom:70px
  }
  .hero-logo {
    margin-left:-10px
  }
  .section-bar h2 {
    font-size:29px
  }
  .game-search {
    width:260px
  }
  .game-row {
    height:145px;
    grid-template-columns:37% 1fr auto
  }
  .game-info h3 {
    font-size:19px
  }
  .game-info p {
    font-size:13px
  }
  .game-enter {
    font-size:13px
  }
  .community-panel {
    padding:25px
  }
  .community-panel h2 {
    font-size:27px
  }
}
@media(max-width:620px) {
  .wrap {
    width:calc(100% - 36px)
  }
  .site-header {
    height:72px;
    padding-inline:18px
  }
  .wordmark img {
    width:158px;
    height:57px
  }
  .mobile-navigation:not([hidden]) {
    top:71px;
    padding:12px 18px
  }
  .launch-hero {
    height:650px;
    background-position:58% bottom
  }
  .hero-inner {
    align-items:flex-start
  }
  .hero-copy {
    width:100%;
    padding:30px 0 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center
  }
  .hero-logo {
    width:min(390px,100%);
    height:auto;
    margin:0
  }
  .hero-stage {
    width:365px;
    right:calc(50% - 182px);
    top:255px
  }
  .hero-sash {
    height:65px
  }
  .hero-print {
    display:none
  }
  .game-select {
    padding:18px 0 24px
  }
  .section-bar {
    align-items:stretch;
    flex-direction:column;
    gap:16px;
    margin-bottom:20px
  }
  .section-bar h2 {
    font-size:29px
  }
  .section-bar h2:before {
    height:22px;
    width:10px;
    margin-right:35px;
    box-shadow:10px 0 var(--pink),20px 0 var(--yellow)
  }
  .game-search {
    width:100%
  }
  .game-row {
    grid-template-columns:35% 1fr;
    height:132px;
    gap:0
  }
  .game-art {
    grid-row:1/3
  }
  .game-art img {
    width:94%;
    max-height:95px
  }
  .game-info {
    padding:14px 12px 4px;
    align-self:end
  }
  .game-info h3 {
    font-size:18px
  }
  .game-info p {
    font-size:12px
  }
  .game-enter {
    justify-self:start;
    align-self:start;
    margin:7px 15px 12px;
    padding:8px 17px;
    font-size:12px
  }
  .game-list {
    gap:14px
  }
  .community-links {
    gap:14px;
    grid-template-columns:1fr;
    margin-block:5px 30px
  }
  .community-panel {
    min-height:110px;
    padding:21px 24px
  }
  .community-panel h2 {
    font-size:27px
  }
  .community-panel p {
    font-size:15px
  }
  .community-graphic {
    opacity:.4;
    width:105px;
    top:14px
  }
  .projects-header {
    align-items:flex-start;
    flex-direction:column;
    gap:8px
  }
  .project-links {
    gap:20px;
    grid-template-columns:1fr
  }
  .project-link img {
    width:140px;
    height:80px
  }
  .footer-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:16px
  }
  .footer-links {
    font-size:13px
  }
  .footer-brand img {
    width:145px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important
  }
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.world-disc {
  z-index:1
}
.orbital-ribbons--back {
  z-index:0
}
@media(min-width:621px) and (max-width:760px) {
  .hero-stage {
    width:365px;
    right:-40px;
    top:82px
  }
  .hero-copy {
    width:54%
  }
  .hero-logo {
    width:100%
  }
}
.site-header {
  padding-inline:clamp(24px,4vw,64px);
  gap:46px;
  isolation:isolate;
  --header-cut-start:56%;
  --header-step-y:28px;
  --header-lower-diagonal:54px;
  --header-shelf-width:132px;
  --header-upper-diagonal:28px;
  --header-panel-gap:calc(136px + 8vw);
  padding-right:24px;
  background:#82e0fa url('rework/sky-clouds.webp') center top/cover;
  border:0
}
.site-header:before {
  inset:0;
  width:auto;
  height:auto;
  background:white;
  clip-path:polygon(
    0 0,
    calc(var(--header-cut-start) + var(--header-lower-diagonal) + var(--header-shelf-width) + var(--header-upper-diagonal)) 0,
    calc(var(--header-cut-start) + var(--header-lower-diagonal) + var(--header-shelf-width)) var(--header-step-y),
    calc(var(--header-cut-start) + var(--header-lower-diagonal)) var(--header-step-y),
    var(--header-cut-start) 100%,
    0 100%
  );
  z-index:-1
}
.header-graphics {
  position:absolute;
  inset:0;
  pointer-events:none
}
.header-graphics:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:94px;
  height:100%;
  background:linear-gradient(135deg,transparent 0 33%,#20cfea 33% 44%,transparent 44%);
  clip-path:polygon(0 0,100% 0,0 100%)
}
.header-graphics:after {
  content:'';
  position:absolute;
  left:calc(var(--header-cut-start) - 34px);
  bottom:4px;
  width:20px;
  height:calc(100% - var(--header-step-y) - 7px);
  background:var(--pink);
  transform:skewX(-45deg);
  transform-origin:left bottom;
  box-shadow:4px 0 white
}
.header-graphics i {
  position:absolute;
  left:calc(var(--header-cut-start) + var(--header-lower-diagonal) + var(--header-shelf-width) - 38px);
  top:0;
  width:32px;
  height:calc(var(--header-step-y) - 3px);
  background:var(--yellow);
  transform:skewX(-43deg);
  box-shadow:5px 0 white
}
.site-header > .wordmark,.desktop-nav,.mobile-menu-toggle {
  position:relative
}
.desktop-nav {
  flex:1;
  gap:44px
}
.desktop-nav .account-link {
  margin-left:auto
}
.site-header:after {
  content:"";
  position:absolute;
  inset:0;
  height:auto;
  width:auto;
  transform:none;
  background:white;
  /* The same edge translated right: this panel fills its complementary side. */
  clip-path:polygon(
    calc(var(--header-cut-start) + var(--header-panel-gap) + var(--header-lower-diagonal) + var(--header-shelf-width) + var(--header-upper-diagonal)) 0,
    100% 0,
    100% 100%,
    calc(var(--header-cut-start) + var(--header-panel-gap)) 100%,
    calc(var(--header-cut-start) + var(--header-panel-gap) + var(--header-lower-diagonal)) var(--header-step-y),
    calc(var(--header-cut-start) + var(--header-panel-gap) + var(--header-lower-diagonal) + var(--header-shelf-width)) var(--header-step-y)
  );
  z-index:-1;
  pointer-events:none
}
@media(max-width:1100px) {
  .site-header {
    gap:25px;
    --header-cut-start:64%;
    --header-panel-gap:136px
  }
  .desktop-nav {
    gap:26px
  }
}
@media(max-width:900px) {
  .site-header {
    --header-cut-start:50%;
    --header-shelf-width:76px;
    --header-panel-gap:min(calc(84px + 6vw),calc(50% - 262px));
    padding-right:18px
  }
}
@media(max-width:620px) {
  .site-header {
    padding-inline:18px;
    --header-cut-start:48%;
    --header-lower-diagonal:44px;
    --header-shelf-width:44px;
    --header-panel-gap:min(48px,calc(52% - 176px))
  }
  .header-graphics i {
    width:18px;
    height:calc(var(--header-step-y) - 3px)
  }
}
.wordmark img {
  object-fit:contain;
  width:192px;
  height:72px
}
.hero-logo {
  height:auto;
  width:650px;
  max-width:110%;
  margin-left:-35px
}
.hero-copy {
  width:53%
}
.hero-stage {
  width:640px;
  right:-70px;
  top:-1px
}
.hero-print {
  opacity:.3
}
.footer-brand img {
  height:auto
}
.site-header {
  height:82px
}
.hero-sash {
  height:105px
}
.launch-hero:before {
  background:linear-gradient(115deg,#f6ffff55,transparent 58%)
}
@media(max-width:1100px) {
  .hero-stage {
    width:540px;
    right:-75px;
    top:38px
  }
  .hero-logo {
    width:100%;
    margin-left:-15px
  }
}
@media(max-width:900px) {
  .mobile-navigation:not([hidden]) {
    top:81px
  }
  .hero-stage {
    width:450px;
    right:-70px;
    top:45px
  }
}
@media(max-width:760px) {
  .hero-stage {
    width:370px;
    right:-45px;
    top:82px
  }
}
@media(max-width:620px) {
  .site-header {
    height:72px
  }
  .wordmark img {
    width:166px;
    height:64px
  }
  .mobile-navigation:not([hidden]) {
    top:71px
  }
  .hero-logo {
    width:min(420px,110%);
    margin:0;
    max-width:110%
  }
  .hero-copy {
    width:100%;
    padding-top:23px
  }
  .hero-stage {
    width:365px;
    right:calc(50% - 182px);
    top:265px
  }
  .hero-sash {
    height:65px
  }
}
@media(max-width:760px) {
  .launch-hero {
    --mobile-earth-size:min(430px,94vw);
    height:calc(var(--mobile-earth-size) + 70px)
  }
  .hero-inner {
    align-items:flex-start
  }
  .hero-copy {
    position:absolute;
    top:calc(var(--mobile-earth-size) * .29 + 16px);
    left:0;
    width:100%;
    padding:0;
    z-index:2;
    display:flex;
    justify-content:center;
    text-align:center
  }
  .hero-copy h1 {
    width:min(420px,100%)
  }
  .hero-logo {
    width:100%;
    max-width:100%;
    aspect-ratio:690 / 330;
    margin:0;
    transform:none
  }
  .hero-stage {
    width:var(--mobile-earth-size);
    left:50%;
    right:auto;
    top:16px;
    margin-left:calc(var(--mobile-earth-size) / -2)
  }
  .orbital-ribbons:not(.orbital-ribbons--back) {
    z-index:3
  }
  .hero-sash {
    height:65px
  }
}

/* The footer is a dark, angular end cap with its own silhouette. */
.site-footer {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:18px;
  padding:122px 0 36px;
  border:0;
  color:#f5fbff;
  background:transparent;
}
.site-footer::before,.site-footer::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
.site-footer::before {
  z-index:-2;
  background:linear-gradient(90deg,var(--aqua) 0 33.333%,var(--pink) 33.333% 66.667%,var(--yellow) 66.667%);
  clip-path:polygon(0 74px,18% 74px,27% 0,73% 0,82% 74px,100% 74px,100% 100%,0 100%);
}
.site-footer::after {
  z-index:-1;
  background:
    linear-gradient(135deg,transparent 0 68%,rgba(24,196,232,.09) 68% 70%,transparent 70% 77%,rgba(255,255,255,.055) 77% 78%,transparent 78%),
    radial-gradient(circle at 80% 90%,#103b66 0,transparent 30%),
    linear-gradient(115deg,#071b59 0%,#081638 58%,#050c24 100%);
  clip-path:polygon(0 81px,18% 81px,27% 7px,73% 7px,82% 81px,100% 81px,100% 100%,0 100%);
}
.site-footer .footer-inner { align-items:flex-start; gap:clamp(28px,5vw,76px); }
.site-footer .footer-brand { flex:0 0 auto; display:inline-block; }
.site-footer .footer-brand img { display:block; width:clamp(185px,20vw,235px); height:auto; }
.site-footer .footer-meta { flex:1 1 320px; max-width:440px; padding-top:7px; color:#bad0e7; font-size:13px; line-height:1.65; }

.site-footer .footer-links { display:grid; align-content:start; justify-items:start; gap:12px; min-width:170px; padding-top:4px; font:700 15px Tektur,Arial,sans-serif; }
.site-footer .footer-links a { color:#f5fbff; text-decoration:none; transition:color .15s,transform .15s; }
.site-footer .footer-links a:hover,.site-footer .footer-links a:focus-visible { color:var(--aqua); transform:translateX(4px); text-decoration:none; }
.site-footer .account-footer { margin-top:32px; padding-top:17px; border-top:1px solid #ffffff38; color:#bad0e7; }
.site-footer .account-footer a,.site-footer .account-footer button { color:#f5fbff; text-decoration:none; font-weight:700; }
.site-footer .account-footer a:hover,.site-footer .account-footer button:hover,.site-footer .account-footer a:focus-visible,.site-footer .account-footer button:focus-visible { color:var(--aqua); text-decoration:underline; }
@media(max-width:900px) {
  .site-footer .footer-inner { flex-wrap:wrap; }
  .site-footer .footer-links { min-width:140px; }
}
@media(max-width:620px) {
  .site-footer { padding-top:102px; }
  .site-footer::before { clip-path:polygon(0 58px,15% 58px,37% 0,63% 0,85% 58px,100% 58px,100% 100%,0 100%); }
  .site-footer::after { clip-path:polygon(0 65px,15% 65px,37% 7px,63% 7px,85% 65px,100% 65px,100% 100%,0 100%); }
  .site-footer .footer-inner { display:grid; gap:24px; }
  .site-footer .footer-brand { justify-self:center; }
  .site-footer .footer-brand img { width:180px; }
  .site-footer .footer-meta { padding:0; }
  .site-footer .footer-links { display:flex; flex-wrap:wrap; gap:12px 22px; padding:0; }
}

.site-footer .footer-disclaimer { margin:10px 0 0; max-width:440px; color:#d7e6f3; line-height:1.55; }

/* Keep the reworked navigation visible while browsing long pages. */
.hub-rework .site-header { position:sticky; top:0; z-index:100; }
html { scroll-padding-top:100px; }
@media(max-width:620px) { html { scroll-padding-top:90px; } }

/* The cutout reveals the page beneath the sticky header. */
.hub-rework .site-header { background-image:none; background-color:transparent; }

/* Sky sits in the page, not the sticky header, so the cutout moves over content. */
body.hub-rework { position:relative; }
body.hub-rework::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:var(--header-art-height);
  z-index:0;
  pointer-events:none;
  background:#82e0fa url('rework/sky-clouds.webp') center top/max(100vw,calc(var(--sky-art-height) * 1.75)) auto no-repeat;
}


/* Planned games stay in the directory without acting like live links. */

.wacca { --game-color:#e50065; --art-background:#000; }
.wacca .game-art { background:linear-gradient(90deg,#e50065,#ffdf00,#00a7e9); }
.wacca .game-art:before { content:""; position:absolute; inset:6px; clip-path:polygon(10% 0,100% 0,90% 100%,0 100%); background:#000; }
.wacca .game-art:after { content:none; }
.wacca .game-art img { width:80%; max-height:118px; filter:none; }