html {
  background: #0e182d;
}
body {
  min-width: 280px;
  overflow-x: clip;
}
.handmade-pixel-art main {
  overflow-x: clip;
}
.introduction {
  max-width: calc(100vw - 40px);
}
.signup {
  max-width: calc(100vw - 40px);
}
.world-heading {
  width: min(100%, 1100px);
  margin-inline: auto;
}
.world-heading > p {
  line-height: 1.4;
}
.handmade-pixel-art .planet {
  width: calc(277px * var(--planet-scale));
  height: calc(278px * var(--planet-scale));
}
.planet-glow {
  width: 100%;
  height: 100%;
}
.world-chapter #pixel-art-lighter {
  height: auto;
  min-height: var(--tool-banner-height);
  padding: 28px max(28px, calc((100vw - 1400px) / 2));
  gap: 28px;
}
.tool-details {
  min-width: 0;
}
.tool-screenshot {
  flex-shrink: 0;
}
.tool-heading h2 {
  flex-wrap: wrap;
  row-gap: 8px;
}
.tool-actions {
  flex-wrap: wrap;
}
#notice,
.creators-dialog {
  max-height: calc(100dvh - 40px);
  overflow: auto;
  overscroll-behavior: contain;
}
#notice {
  max-width: calc(100vw - 32px);
}
.creator-sprite-stage img {
  width: calc(var(--native-sprite-width) * var(--sprite-scale));
  height: calc(var(--native-sprite-height) * var(--sprite-scale));
}
.creator-sprite-stage {
  height: calc(53px * var(--sprite-scale) + 12px);
}
@media (min-width: 1001px) and (max-width: 1300px) {
  .world-chapter #pixel-art-lighter {
    gap: 22px;
    padding-inline: 28px;
  }
  .tool-screenshot {
    width: 220px;
  }
  .tool-heading h2 {
    font-size: 32px;
  }
  .tool-heading p {
    font-size: 20px;
  }
  .footer-follow {
    width: 295px;
    padding-left: 22px;
  }
  .tool-actions a {
    padding: 12px 18px;
  }
  .tool-bookmark {
    min-width: 180px;
    max-width: 210px;
  }
}
@media (max-width: 1000px) {
  :root {
    --tool-banner-height: 360px;
    --world-overlap: 110px;
  }
  .handmade-pixel-art .hero-stage {
    position: relative;
    top: auto;
    mask-image: linear-gradient(#000 calc(100% - 140px), transparent);
    -webkit-mask-image: linear-gradient(#000 calc(100% - 140px), transparent);
  }
  .handmade-pixel-art .hero-stage::after {
    mask-image: linear-gradient(
      90deg,
      #000 var(--scene-left),
      transparent calc(var(--scene-left) + 70px),
      transparent calc(var(--scene-left) + var(--scene-width) - 70px),
      #000 calc(var(--scene-left) + var(--scene-width))
    );
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 var(--scene-left),
      transparent calc(var(--scene-left) + 70px),
      transparent calc(var(--scene-left) + var(--scene-width) - 70px),
      #000 calc(var(--scene-left) + var(--scene-width))
    );
  }
  .hero-copy .introduction {
    width: min(760px, calc(100vw - 48px));
  }
  .hero-copy .introduction h2 {
    font-size: clamp(30px, 4.5vw, 42px);
    line-height: 1.15;
  }
  html[lang="ja"] .hero-copy .introduction h2 {
    font-size: clamp(26px, 3.8vw, 34px);
    line-height: 1.4;
  }
  .hero-copy .introduction p {
    font-size: 22px;
    line-height: 1.35;
  }
  html[lang="ja"] .hero-copy .introduction p {
    font-size: 20px;
    line-height: 1.6;
  }
  .hero-copy .signup {
    width: min(650px, calc(100vw - 48px));
  }
  .hero-copy .signup > p {
    font-size: 20px;
    line-height: 1.35;
  }
  .hero-copy .signup .fine {
    font-size: 16px;
    line-height: 1.3;
  }
  .hero-copy #steam {
    width: min(360px, calc(100vw - 48px));
    min-height: 86px;
    height: auto;
  }
  .tool-bookmark,
  .scroll-cue {
    display: none;
  }
  .language-switch {
    top: max(16px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
  }
  .handmade-pixel-art .world-chapter {
    margin-top: -110px;
  }
  .handmade-pixel-art .world-section {
    min-height: 0;
    padding: 24px 24px 70px;
  }
  .world-heading h2 {
    font-size: clamp(32px, 4.5vw, 46px);
  }
  html[lang="ja"] .world-heading h2 {
    font-size: clamp(26px, 3.8vw, 34px);
    line-height: 1.4;
  }
  .world-heading > p {
    font-size: 22px;
  }
  html[lang="ja"] .world-heading > p {
    font-size: 20px;
    line-height: 1.6;
  }
  .handmade-pixel-art .planet-stage {
    height: calc(278px * var(--planet-scale) + 120px);
    min-height: 0;
    max-height: none;
    margin-top: 36px;
  }
  .world-chapter #pixel-art-lighter {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 26px;
    padding: 32px;
  }
  .tool-screenshot {
    width: 200px;
  }
  .footer-follow {
    grid-column: 1 / -1;
    width: 100%;
    border-left: 0;
    border-top: 1px solid #82754888;
    padding: 24px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 18px;
  }
  .footer-identity {
    grid-column: 1;
  }
  .footer-steam {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
  }
  .footer-social-row {
    grid-column: 1;
  }
  .world-chapter footer > .tool-screenshot,
  .world-chapter footer > .tool-details,
  .world-chapter footer > .footer-follow {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .creators-dialog {
    width: calc(100vw - 40px);
  }
  .creators-dialog .creators-intro {
    font-size: 20px;
  }
  .creator-card strong {
    font-size: 25px;
  }
  .creator-role {
    font-size: 19px;
  }
  .creator-quote,
  .creator-card[data-creator="red-hat-sprite"] .creator-quote {
    max-width: 230px;
    font-size: 20px;
  }
}
@media (max-width: 700px) {
  :root {
    --sprite-scale: 2;
  }
  .hero-stage header a,
  .hero-stage header .creators-trigger {
    display: none;
  }
  .hero-stage header {
    pointer-events: none;
  }
  .hero-stage header .language-switch {
    pointer-events: auto;
  }
  .hero-copy .introduction {
    width: calc(100vw - 32px);
  }
  html[lang="ja"] .hero-copy .introduction .eyebrow {
    letter-spacing: 0.5px;
  }
  .hero-copy .introduction p {
    text-wrap: pretty;
  }
  .hero-copy .signup {
    width: calc(100vw - 36px);
  }
  .hero-copy .signup > p {
    font-size: 19px;
  }
  html[lang="ja"] .hero-copy .signup > p {
    font-size: 16px;
    line-height: 1.6;
  }
  #signup-form {
    flex-wrap: wrap;
  }
  #signup-form input {
    width: 100%;
    flex-basis: 100%;
  }
  #signup-form .highlight {
    width: 100%;
    font-size: 22px;
  }
  html[lang="ja"] #signup-form .highlight {
    font-size: 19px;
  }
  .hero-copy .signup .fine {
    font-size: 15px;
    padding-inline: 4px;
  }
  .follow {
    width: 290px;
    max-width: calc(100vw - 40px);
  }
  .follow-links > span,
  html[lang="ja"] .follow-links > span {
    font-size: 18px;
  }
  .follow nav {
    gap: 12px;
    height: 44px;
  }
  .follow a {
    width: 44px;
    height: 44px;
  }
  .follow svg {
    width: 24px;
    height: 24px;
  }
  .handmade-pixel-art .world-section {
    padding: 20px 18px 64px;
  }
  .world-heading h2 {
    font-size: clamp(29px, 7.4vw, 38px);
    line-height: 1.2;
  }
  html[lang="ja"] .world-heading h2 {
    font-size: clamp(25px, 6.3vw, 32px);
  }
  .world-heading > p {
    font-size: 20px;
    line-height: 1.4;
    text-wrap: pretty;
  }
  .handmade-pixel-art .planet-stage {
    margin-top: 36px;
    height: calc(278px * var(--planet-scale) + 110px);
  }
  .world-chapter #pixel-art-lighter {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 24px max(32px, env(safe-area-inset-bottom));
    gap: 24px;
  }
  .tool-screenshot {
    width: min(100%, 300px);
    justify-self: center;
  }
  .tool-details {
    text-align: center;
  }
  .tool-heading h2 {
    justify-content: center;
    font-size: 32px;
    gap: 10px;
  }
  .tool-badges {
    justify-content: center;
  }
  .tool-heading p,
  html[lang="ja"] .tool-heading p {
    font-size: 20px;
    line-height: 1.4;
  }
  .tool-meta {
    display: block;
    font-size: 15px;
    line-height: 1.4;
    margin-top: 10px;
  }
  .tool-actions {
    justify-content: center;
  }
  .tool-actions a {
    min-height: 48px;
    font-size: 22px;
  }
  .tool-actions .support-link {
    padding: 0;
    min-height: 44px;
  }
  .footer-follow {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 28px;
  }
  .footer-steam {
    width: min(100%, 340px);
    min-height: 76px;
  }
  .footer-steam > span,
  html[lang="ja"] .footer-steam > span {
    font-size: 23px;
  }
  .footer-social-row {
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .footer-socials {
    gap: 12px;
  }
  .footer-socials svg {
    width: 24px;
    height: 24px;
  }
  .footer-mailing,
  html[lang="ja"] .footer-mailing {
    font-size: 17px;
    min-height: 44px;
  }
  #notice {
    width: calc(100vw - 28px);
    padding: 40px 20px 26px;
  }
  #notice .notice-heading {
    flex-direction: column;
    gap: 18px;
  }
  #notice h2,
  html[lang="ja"] #notice h2 {
    font-size: 30px;
  }
  #notice p,
  html[lang="ja"] #notice p {
    font-size: 19px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  #notice .highlight {
    white-space: normal;
    min-height: 48px;
    max-width: 100%;
  }
  #notice .signup {
    width: 100%;
    max-width: 100%;
  }
  #notice .steam-mascot {
    max-width: 130px;
    height: auto;
  }

  .creators-dialog.inline-creators {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 36px 20px 64px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(#0e182d, #10313c);
    overflow: visible;
    text-align: center;
    z-index: 2;
  }
  .inline-creators .creators-close {
    display: none;
  }
  .creators-dialog.inline-creators h2,
  html[lang="ja"] .creators-dialog.inline-creators h2 {
    font-size: 32px;
    line-height: 1.3;
  }
  .creators-dialog.inline-creators .creators-intro {
    font-size: 20px;
    line-height: 1.4;
  }
  .inline-creators .creator-party {
    width: 100%;
    margin: 20px auto 0;
  }
  .inline-creators .creator-card:nth-child(n) {
    grid-column: auto;
    width: 100%;
    margin: 0;
  }
  .inline-creators .creator-sprite-stage img {
    width: calc(var(--native-sprite-width) * 2);
    height: calc(var(--native-sprite-height) * 2);
  }
  .inline-creators .creator-role {
    min-height: 0;
  }
  .creators-dialog.inline-creators .creator-hint {
    font-size: 16px;
    margin-top: 28px;
  }
  .inline-creators .creator-card {
    animation: none !important;
  }
}
@media (max-width: 360px) {
  .steam .steam-pixel-icon {
    width: 46px;
    height: 46px;
  }
  .tool-heading h2 {
    font-size: 29px;
  }
  .tool-actions a {
    padding-inline: 14px;
  }
  .footer-steam {
    padding-inline: 10px;
    gap: 10px;
  }
  .footer-steam > span,
  html[lang="ja"] .footer-steam > span {
    font-size: 21px;
  }
}
@media (max-height: 500px) and (min-width: 701px) {
  #notice,
  .creators-dialog {
    max-height: calc(100dvh - 20px);
  }
}
.world-chapter #pixel-art-lighter .tool-details {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 1000px) {
  .handmade-pixel-art .hero-dissolve {
    background: linear-gradient(
      to bottom,
      #0e182d00 calc(var(--scene-height) * 0.34),
      #0e182d18 calc(var(--scene-height) * 0.52),
      #0e182d70 calc(var(--scene-height) * 0.7),
      #0e182dcb calc(var(--scene-height) * 0.86),
      #0e182d calc(var(--scene-height) - 24px)
    );
  }
  .handmade-pixel-art .world-space-layer {
    mask-image: linear-gradient(transparent, #000 320px, #000 calc(100% - 160px), transparent);
    -webkit-mask-image: linear-gradient(
      transparent,
      #000 320px,
      #000 calc(100% - 160px),
      transparent
    );
  }
}
@media (max-width: 700px) {
  .tool-heading h2 {
    flex-wrap: wrap;
    white-space: normal;
  }
  .tool-heading h2 .tool-badges {
    flex-basis: 100%;
  }
  .tool-heading p {
    max-width: 100%;
  }
  .inline-creators .creator-party {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items: start;
    margin-top: 16px;
  }
  .inline-creators .creator-card:nth-child(n) {
    grid-row: 1;
    max-width: none;
    padding: 108px 0 0;
  }
  .inline-creators .creator-sprite-stage {
    height: 110px;
  }
  .inline-creators .creator-card strong {
    font-size: 22px;
    line-height: 1.15;
    min-height: 50px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inline-creators .creator-country,
  html[lang="ja"] .inline-creators .creator-country {
    font-size: 15px;
    margin: 5px 0 9px;
  }
  .inline-creators .creator-role,
  html[lang="ja"] .inline-creators .creator-role {
    white-space: normal;
  }
  .inline-creators .creator-quote,
  .inline-creators .creator-card[data-creator="red-hat-sprite"] .creator-quote {
    width: 240px;
    max-width: calc(100vw - 48px);
    font-size: 18px;
    padding: 10px 12px;
    z-index: 3;
  }
  html[lang="ja"] .inline-creators .creator-quote,
  html[lang="ja"] .inline-creators .creator-card[data-creator="red-hat-sprite"] .creator-quote {
    font-size: 16px;
  }
  .inline-creators .creator-card:first-child .creator-quote {
    left: -12px;
    transform: translateY(6px);
  }
  .inline-creators .creator-card:first-child[aria-expanded="true"] .creator-quote {
    transform: none;
  }
  .inline-creators .creator-card:first-child .creator-quote::after {
    left: 24px;
  }
  .inline-creators .creator-card:last-child .creator-quote {
    left: auto;
    right: -12px;
    transform: translateY(6px);
  }
  .inline-creators .creator-card:last-child[aria-expanded="true"] .creator-quote {
    transform: none;
  }
  .inline-creators .creator-card:last-child .creator-quote::after {
    left: auto;
    right: 24px;
  }
  .inline-creators .creator-card {
    min-height: 44px;
  }
  .follow nav a,
  .footer-socials a {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-basis: 44px;
  }
}
/* mobile title stacking differs from desktop */
@media (max-width: 1000px) {
  .handmade-pixel-art #game-title,
  .handmade-pixel-art[lang="ja"] #game-title {
    z-index: 11;
  }
}
/* fixed en jp text slots keep the controls aligned */
@media (max-width: 1000px) {
  .hero-copy .introduction .eyebrow {
    min-height: 24px;
    display: block;
  }
  .hero-copy .introduction h2,
  html[lang="ja"] .hero-copy .introduction h2 {
    min-height: 56px;
    margin: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-copy .introduction p {
    min-height: 68px;
  }
  .hero-copy .signup > p:first-child {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }
  .hero-copy .signup .fine {
    min-height: 40px;
    margin-top: 11px;
  }
}
@media (max-width: 700px) {
  #notice[data-kind="steam"] .steam-mascot {
    width: 104px;
    height: 100px;
    max-width: none;
    image-rendering: pixelated;
  }
  #notice[data-kind="support"] .steam-mascot {
    width: 78px;
    height: 56px;
    max-width: none;
    image-rendering: pixelated;
  }
  .world-heading h2,
  html[lang="ja"] .world-heading h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0 18px;
  }
}
@media (max-width: 360px) {
  .world-heading > p,
  html[lang="ja"] .world-heading > p {
    min-height: 160px;
  }
}

@media (max-width: 700px) {
  .hero-copy .introduction h2,
  html[lang="ja"] .hero-copy .introduction h2,
  .world-heading h2,
  html[lang="ja"] .world-heading h2 {
    min-height: 106px;
  }
  #signup-form .highlight,
  html[lang="ja"] #signup-form .highlight {
    padding-block: 10px;
  }
}

@media (min-width: 1001px) {
  .world-chapter #pixel-art-lighter .tool-details {
    width: 420px;
    max-width: 420px;
    flex: 0 1 420px;
  }
  .tool-bookmark,
  html[lang="ja"] .tool-bookmark {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px 12px 25px;
  }
  .tool-bookmark > span,
  html[lang="ja"] .tool-bookmark > span {
    align-self: auto;
    white-space: nowrap;
    transform: none;
  }
  .tool-bookmark strong,
  html[lang="ja"] .tool-bookmark strong {
    font-size: 26px;
    line-height: 28px;
    transform: none;
  }
  .tool-bookmark small,
  html[lang="ja"] .tool-bookmark small {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (max-width: 700px) {
  .hero-copy .introduction .eyebrow {
    min-height: 20px;
    font-size: 8px;
    letter-spacing: 0.4px;
  }
  .hero-copy .introduction h2,
  html[lang="ja"] .hero-copy .introduction h2 {
    font-size: 28px;
    line-height: 1.18;
    min-height: 68px;
    margin: 8px 0;
  }
  .hero-copy .introduction p,
  html[lang="ja"] .hero-copy .introduction p {
    font-size: 18px;
    line-height: 1.25;
    min-height: 90px;
  }
  .hero-copy .signup > p:first-child {
    font-size: 17px;
    margin-bottom: 8px;
  }
  html[lang="ja"] .hero-copy .signup > p:first-child {
    font-size: 15px;
    line-height: 1.4;
  }
  .hero-copy .signup .fine:empty {
    display: none;
  }
  #signup-form {
    padding: 5px;
    gap: 5px;
  }
  #signup-form input {
    height: 44px;
    min-height: 44px;
    padding: 8px 10px;
  }
  #signup-form .highlight,
  html[lang="ja"] #signup-form .highlight {
    height: 46px;
    min-height: 46px;
    padding: 8px 10px;
  }
  .hero-copy .follow .moonfell-profile {
    width: 56px;
    height: 56px;
  }
  .hero-copy .follow {
    gap: 12px;
  }
  .hero-copy .follow nav {
    margin-top: 5px;
  }
}
@media (max-width: 360px) {
  .hero-copy .introduction h2 {
    font-size: 25px;
  }
  .hero-copy .introduction p,
  html[lang="ja"] .hero-copy .introduction p {
    min-height: 100px;
  }
}

@media (max-width: 700px) {
  .hero-copy .signup > p:first-child,
  html[lang="ja"] .hero-copy .signup > p:first-child {
    min-height: 46px;
  }
}
@media (max-width: 700px) {
  .hero-copy .signup > p:first-child,
  html[lang="ja"] .hero-copy .signup > p:first-child {
    display: none;
  }
  .hero-copy #steam {
    left: 18px;
    transform: none;
    width: calc(100% - 192px);
    max-width: none;
    height: 84px;
    min-height: 84px;
    padding: 8px;
    gap: 8px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
  }
  .hero-copy #steam > span,
  html[lang="ja"] .hero-copy #steam > span {
    font-size: 20px;
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: normal;
  }
  .hero-copy #steam small,
  html[lang="ja"] .hero-copy #steam small {
    letter-spacing: 0.2px;
    margin-top: 5px;
  }
  .hero-copy .follow {
    left: auto;
    right: 18px;
    transform: none;
    width: 144px;
    max-width: 144px;
  }
  .hero-copy .follow > .moonfell-profile {
    display: none;
  }
  .hero-copy .follow-links {
    gap: 6px;
    width: 100%;
  }
  .hero-copy .follow-links > span,
  html[lang="ja"] .hero-copy .follow-links > span {
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
  }
  .hero-copy .follow nav {
    gap: 6px;
    margin: 0;
    width: 144px;
    height: 44px;
  }
}
@media (max-width: 360px) {
  .hero-copy #steam {
    grid-template-columns: 23px minmax(0, 1fr);
    gap: 7px;
  }
  .hero-copy #steam .steam-pixel-icon {
    width: 23px;
    height: 23px;
  }
  .hero-copy #steam > span,
  html[lang="ja"] .hero-copy #steam > span {
    font-size: 18px;
  }
}

@media (max-width: 700px) {
  .handmade-pixel-art .native-slice.left-rocks,
  .handmade-pixel-art .native-slice.eye-1,
  .handmade-pixel-art .native-slice.eye-2 {
    left: calc(var(--scene-left) + min(18px, 4vw));
  }
  .handmade-pixel-art .native-slice.hero-platform,
  .handmade-pixel-art .native-slice.eye-3,
  .handmade-pixel-art .native-slice.eye-4,
  .handmade-pixel-art .native-slice.eye-5 {
    left: calc(var(--scene-left) - 5px);
  }
  .handmade-pixel-art .native-slice.right-rocks {
    left: calc(var(--scene-left) - min(14px, 3vw));
  }
  .creators-dialog.inline-creators h2 {
    white-space: pre-line;
  }
  .inline-creators .creator-role,
  html[lang="ja"] .inline-creators .creator-role {
    line-height: 1.5;
  }
}

/* avoid compositor rebuilds when mobile browser bars resize */
@media (max-width: 700px) {
  .handmade-pixel-art .hero-stage {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .handmade-pixel-art .hero-copy {
    will-change: auto;
  }
  .handmade-pixel-art #game-title {
    will-change: auto;
  }
  .handmade-pixel-art .godrays {
    animation: none;
    opacity: 0.35;
  }
  .language-switch {
    position: absolute;
  }
  .world-heading > p,
  html[lang="ja"] .world-heading > p {
    min-height: 100px;
  }
}

@media (max-width: 700px) {
  .footer-follow .footer-steam {
    display: none;
  }
  .tool-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) 44px;
    gap: 8px;
    align-items: center;
  }
  .tool-actions a {
    min-width: 0;
    padding: 10px 8px;
    white-space: nowrap;
  }
  .tool-actions .support-link {
    width: 44px;
    height: 44px;
  }
  html[lang="ja"] .tool-meta {
    font-size: clamp(10px, 3.2vw, 13px);
    line-height: 1.4;
    white-space: nowrap;
  }
  html[lang="ja"] .tool-actions a {
    font-size: clamp(13px, 4.1vw, 16px);
    padding-inline: 6px;
    gap: 6px;
  }
  html[lang="ja"] .tool-actions .support-link {
    padding: 0;
  }
}

.follow nav a[href*="x.com"] svg,
.footer-socials a[href*="x.com"] svg {
  width: 22px;
  height: 22px;
}

/* isolate the artwork compositor from title animation */
@media (max-width: 700px) {
  .handmade-pixel-art .parallax-art {
    display: block;
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

@media (max-width: 700px) {
  .handmade-pixel-art .star-node-field {
    left: 0;
    top: var(--mobile-spark-top);
    width: 100%;
    height: var(--mobile-spark-height);
    transform: translate3d(0, var(--star-shift, 0px), 0);
  }
  .star-node-field .star-node:nth-child(1) {
    left: 10%;
    top: 14%;
    --spark-duration: 6.4s;
    --spark-delay: -2s;
  }
  .star-node-field .star-node:nth-child(2) {
    left: 86%;
    top: 17%;
    --spark-duration: 8s;
    --spark-delay: -6s;
  }
  .star-node-field .star-node:nth-child(3) {
    left: 3%;
    top: 54%;
    --spark-duration: 8.8s;
    --spark-delay: -9s;
  }
  .star-node-field .star-node:nth-child(4) {
    left: 94%;
    top: 64%;
    --spark-duration: 7.2s;
    --spark-delay: -4s;
  }
  .star-node-field .star-node:nth-child(5) {
    left: 52%;
    top: 96%;
    --spark-duration: 9.6s;
    --spark-delay: -7s;
  }
}

@media (max-width: 700px) {
  .handmade-pixel-art #game-title,
  .handmade-pixel-art[lang="ja"] #game-title {
    z-index: 5;
  }
}
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .handmade-pixel-art .godrays {
    animation-name: godrays-dapple;
    animation-duration: 6.4s;
  }
}
@keyframes godrays-dapple {
  0%,
  100% {
    opacity: 0.3;
  }
  12% {
    opacity: 0.46;
  }
  18% {
    opacity: 0.7;
  }
  23% {
    opacity: 0.5;
  }
  29% {
    opacity: 0.78;
  }
  36% {
    opacity: 0.58;
  }
  44% {
    opacity: 0.72;
  }
  52% {
    opacity: 0.4;
  }
  59% {
    opacity: 0.64;
  }
  65% {
    opacity: 0.8;
  }
  69% {
    opacity: 0.56;
  }
  78% {
    opacity: 0.7;
  }
  88% {
    opacity: 0.43;
  }
}

@media (min-width: 701px) {
  .handmade-pixel-art .star-node-field {
    left: calc(50% - var(--desktop-spark-width) / 2);
    top: var(--mobile-spark-top);
    width: var(--desktop-spark-width);
    height: var(--desktop-spark-height);
    transform: translate3d(0, var(--star-shift, 0px), 0);
  }
  .star-node-field .star-node:nth-child(1) {
    left: 12%;
    top: 12%;
    --spark-duration: 7.2s;
    --spark-delay: -2s;
  }
  .star-node-field .star-node:nth-child(2) {
    left: 84%;
    top: 16%;
    --spark-duration: 8.8s;
    --spark-delay: -6s;
  }
  .star-node-field .star-node:nth-child(3) {
    left: 0%;
    top: 56%;
    --spark-duration: 9.6s;
    --spark-delay: -9s;
  }
  .star-node-field .star-node:nth-child(4) {
    left: 97%;
    top: 62%;
    --spark-duration: 8s;
    --spark-delay: -4s;
  }
  .star-node-field .star-node:nth-child(5) {
    left: 48%;
    top: 94%;
    --spark-duration: 10.4s;
    --spark-delay: -7s;
  }
}
@media (min-width: 701px) {
  #notice[data-kind="steam"] {
    width: 620px;
    max-width: calc(100vw - 40px);
  }
  #notice[data-kind="steam"] #notice-body {
    white-space: pre-line;
  }
}

@media (max-width: 700px) {
  .handmade-pixel-art .planet-bg-art,
  .handmade-pixel-art .planet-stars-art {
    left: var(--space-scene-left);
    width: var(--space-scene-width);
    height: calc(500px * var(--space-pixel-scale));
  }
  .star-node-field {
    --pixel-scale: var(--space-pixel-scale);
  }
}

@media (prefers-reduced-motion: reduce) {
  .handmade-pixel-art .star-node-field {
    transform: none;
  }
}

.tool-release-banner {
  display: none;
}
@media (max-width: 700px) {
  .tool-release-banner {
    position: absolute;
    z-index: 30;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(52px + env(safe-area-inset-top));
    padding: calc(6px + env(safe-area-inset-top)) 14px 6px;
    background: #123e43d9;
    color: #d7ec8d;
    border-bottom: 2px solid #736f53;
    font:
      18px/1.2 PixelOperator,
      monospace;
    text-align: center;
    text-wrap: balance;
  }
  .tool-release-banner:hover {
    background: #174b50d9;
  }
  html[lang="ja"] .tool-release-banner {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 700px) {
  .world-chapter #pixel-art-lighter {
    background: #0c4650;
    box-shadow: none;
  }
  .world-chapter #pixel-art-lighter .tool-screenshot,
  .world-chapter #pixel-art-lighter .tool-screenshot:hover,
  .world-chapter #pixel-art-lighter .tool-screenshot:focus-visible {
    box-shadow: none;
    filter: none;
  }
}

@media (max-width: 700px) {
  .language-switch {
    transform: scale(0.9);
    transform-origin: top right;
  }
}

.tool-release-banner {
  gap: 6px;
  font-family: PixelOperator, DotGothic16, monospace;
}
.tool-release-name {
  font:
    18px/1.2 PixelOperator,
    monospace;
  white-space: nowrap;
}
.tool-release-copy {
  font: inherit;
}
.tool-release-arrow {
  flex: none;
  width: 16px;
  height: 14px;
  image-rendering: pixelated;
}
@media (max-width: 700px) {
  html[lang="en"] #notice[data-kind="steam"] #notice-body {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
  }
}

@media (max-width: 700px) {
  .language-switch {
    top: max(13px, env(safe-area-inset-top));
    right: max(13px, env(safe-area-inset-right));
  }
  .tool-release-visit .language-switch {
    top: calc(65px + env(safe-area-inset-top));
  }
  .inline-creators .creator-quote,
  .inline-creators .creator-card[data-creator="red-hat-sprite"] .creator-quote {
    bottom: calc(100% + 24px);
  }
}
html[lang="en"] #notice[data-kind="support"] #notice-body {
  white-space: pre-line;
  text-wrap: balance;
  overflow-wrap: normal;
}

@media (max-width: 700px) {
  html[lang="en"] .hero-copy .introduction p,
  html[lang="en"] .world-heading > p,
  html[lang="en"] .creators-dialog.inline-creators .creators-intro,
  html[lang="en"] .tool-heading p {
    font-size: 20px;
    line-height: 1.3;
  }
  html[lang="ja"] .hero-copy .introduction p,
  html[lang="ja"] .world-heading > p,
  html[lang="ja"] .creators-dialog.inline-creators .creators-intro,
  html[lang="ja"] .tool-heading p {
    font-size: 18px;
    line-height: 1.4;
  }
  .tool-heading p,
  html[lang="ja"] .tool-heading p,
  html[lang="en"] .tool-heading p {
    white-space: normal;
    text-wrap: balance;
  }
}

@media (max-width: 700px) {
  html[lang="en"] .hero-copy .introduction h2 {
    font-size: 30px;
    line-height: 1.18;
    text-wrap: balance;
  }
  html[lang="ja"] .hero-copy .introduction h2 {
    font-size: 26px;
    line-height: 1.35;
    text-wrap: balance;
  }
  html[lang="en"] .hero-copy .introduction .eyebrow {
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.3px;
  }
  html[lang="ja"] .hero-copy .introduction .eyebrow {
    font-size: 14px;
    line-height: 1.5;
  }
}
@media (max-width: 360px) {
  html[lang="en"] .hero-copy .introduction h2 {
    font-size: 28px;
  }
  html[lang="ja"] .hero-copy .introduction h2 {
    font-size: 24px;
  }
}

@media (max-width: 700px) {
  .hero-copy #steam small,
  html[lang="ja"] .hero-copy #steam small {
    font-size: 12px;
    line-height: 14px;
  }
  .world-heading h2,
  html[lang="ja"] .world-heading h2 {
    margin-bottom: 12px;
  }
  .inline-creators .creator-role,
  html[lang="ja"] .inline-creators .creator-role {
    font-size: 17px;
  }
}
@media (max-width: 360px) {
  .hero-copy #steam small,
  html[lang="ja"] .hero-copy #steam small {
    font-size: 11px;
    line-height: 13px;
  }
}

@media (max-width: 700px) {
  html[lang="ja"] .creators-dialog.inline-creators .creator-hint {
    font-size: 14px;
  }
}