:root {
  font-family:"Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  color:#e8f4ff;
  background:#0a1536;
  font-synthesis:none;
  --panel:#285b95;
  --edge:#163c70;
  --soft:#c6e5ff;
  --cyan:#7de8ff
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:linear-gradient(#0a1536,#172b58 700px,#294776 1700px,#10274a);
  min-width:280px
}
a {
  color:inherit
}
button,input,textarea {
  font:inherit
}
button {
  cursor:pointer
}
a,button,summary {
  touch-action:manipulation
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #b2f0ff;
  outline-offset:5px
}
[hidden] {
  display:none!important
}
.home-sky {
  position:absolute;
  inset:0 0 auto;
  height:1100px;
  overflow:hidden;
  pointer-events:none
}
.home-sky::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,#d9f4ff 1px,transparent 1.7px),radial-gradient(circle,#d9f4ff 1.5px,transparent 2px);
  background-size:183px 153px,317px 277px;
  background-position:30px 22px,81px 71px;
  opacity:.5
}
.home-moon {
  position:absolute;
  top:150px;
  right:8%;
  width:95px;
  height:95px;
  border-radius:50%;
  background:#e3f6ff;
  box-shadow:inset 12px -6px #b5d9ed,0 0 60px #c7eaff19
}
.home-cloud {
  position:absolute;
  width:170px;
  height:28px;
  border-radius:50%;
  background:#466190;
  opacity:.28
}
.home-cloud::before,.home-cloud::after {
  content:"";
  position:absolute;
  background:inherit;
  border-radius:50%;
  width:65px;
  height:65px;
  bottom:5px;
  left:25px
}
.home-cloud::after {
  width:95px;
  height:85px;
  left:65px
}
.home-cloud--one {
  top:520px;
  left:1%;
  transform:scale(1.6)
}
.home-cloud--two {
  right:1%;
  top:680px;
  transform:scale(1.3)
}
.home-horizon {
  position:absolute;
  bottom:80px;
  left:-20%;
  width:150%;
  height:220px;
  border-radius:50% 45% 0 0;
  background:#38578740;
  transform:rotate(-3deg)
}
.classic-page {
  position:relative;
  width:min(1180px,calc(100% - 64px));
  margin:auto
}
.masthead {
  display:flex;
  align-items:center;
  gap:26px;
  min-height:130px;
  border-bottom:1px solid #a2d6ff22
}
.classic-logo {
  flex:0 0 145px;
  display:block
}
.classic-logo img {
  width:145px;
  height:100px;
  object-fit:contain;
  display:block
}
.masthead nav {
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  flex:1
}
.masthead nav a {
  text-decoration:none;
  color:#bed7f2;
  font-size:14px;
  font-weight:700;
  line-height:1.3
}
.masthead nav a:hover {
  color:#7de8ff
}
.masthead nav .home-link {
  color:white
}
.home-account {
  display:flex;
  gap:6px;
  position:relative;
  align-items:center;
  flex-shrink:0;
  z-index:10
}
.account-button,.play-word,.small-play,.signup {
  border:3px solid #076294;
  border-radius:16px;
  background:linear-gradient(#b0efff,#39b8ec 34%,#078bd0 80%);
  box-shadow:inset 0 2px #d5f9ff,0 4px 6px #061c4250;
  color:white;
  font-weight:800;
  text-shadow:0 2px #0878aa;
  text-decoration:none
}
.account-button {
  padding:6px 16px;
  font-size:15px
}
.account-button:hover,.play-word:hover,.small-play:hover,.signup:hover {
  filter:brightness(1.12)
}
.account-button:disabled {
  opacity:.7;
  cursor:default
}
.play-word {
  padding:9px 37px;
  font-size:32px;
  line-height:1.2
}
.play-lettering {
  white-space:nowrap
}
.small-play {
  padding:10px 20px;
  font-size:20px;
  width:100%
}
.signup {
  padding:12px 18px;
  background:linear-gradient(#5f91c9,#32649c 28%,#1d4276 70%);
  border-color:#14345e;
  text-shadow:none;
  font-size:16px;
  line-height:1.25;
  display:inline-flex;
  align-items:center
}
.signup br {
  display:none
}
.signup strong {
  font-weight:700
}
.smiley {
  display:none
}
.home-hero {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:25px;
  align-items:center;
  min-height:520px;
  padding:55px 0 35px
}
.hero-copy h2 {
  margin:0 0 16px;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--cyan)
}
.hero-copy h1 {
  margin:0;
  font-size:clamp(34px,4vw,54px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-1.5px
}
.hero-copy>p {
  font-size:18px;
  color:var(--soft);
  line-height:1.6;
  max-width:500px;
  margin:22px 0
}
.hero-actions {
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap
}
.hero-tour {
  display:inline-block;
  margin-top:20px;
  color:var(--soft);
  text-decoration:none;
  font-size:14px;
  font-weight:700
}
.hero-tour:hover {
  color:var(--cyan)
}
.hero-scene {
  overflow:clip;
  position:relative;
  min-height:420px;
  isolation:isolate
}
.hero-orbit {
  position:absolute;
  inset:50px 0 40px;
  border:1px solid #87cfff30;
  border-radius:50%;
  transform:rotate(-25deg);
  background:radial-gradient(ellipse,#4a98d522,transparent 70%)
}
.hero-orbit--two {
  inset:15px 45px 5px;
  transform:rotate(22deg);
  background:none
}
.home-flyer {
  position:absolute;
  width:170px;
  height:170px;
  pointer-events:none;
  animation:home-float 5s ease-in-out infinite
}
.home-flyer canvas {
  display:block;
  width:100%;
  height:100%
}
.home-flyer--boomer {
  left:35%;
  top:5px
}
.home-flyer--gata {
  left:0;
  top:70px;
  animation-delay:-2s
}
.home-flyer--rasta {
  right:-5px;
  top:140px;
  animation-delay:-1s
}
.home-flyer--empollon {
  left:5%;
  top:230px;
  animation-delay:-3s
}
.home-flyer--india {
  left:38%;
  top:220px;
  animation-delay:-4s
}
.hero-scene-note {
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-size:14px;
  color:var(--soft)
}
.hero-scene-note>span:first-child {
  color:var(--cyan)
}
@keyframes home-float {
  0%,100% {
    transform:translateY(0) rotate(-3deg)
  }
  50% {
    transform:translateY(-12px) rotate(3deg)
  }
}
.section-heading {
  margin-bottom:22px
}
.section-heading h2 {
  font-size:29px;
  line-height:1.2;
  margin:0 0 7px;
  font-weight:800
}
.section-heading p {
  margin:0;
  color:var(--soft);
  font-size:16px;
  line-height:1.5
}
.characters-panel {
  padding:24px 30px;
  margin:20px 0 35px;
  border:1px solid #75b8ec33;
  border-radius:24px;
  background:#18386599;
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:22px;
  align-items:center
}
.characters-panel .section-heading {
  margin:0
}
.characters-panel h2 {
  font-size:23px
}
.cast {
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:12px
}
.cast img {
  width:13%;
  height:90px;
  object-fit:contain;
  filter:drop-shadow(0 7px 5px #05132a40)
}
.home-main-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:28px;
  align-items:start
}
.home-guides {
  min-width:0
}
.gray-panel,.coming-soon,.side-panel {
  border:7px solid var(--edge);
  border-radius:24px;
  background:var(--panel);
  box-shadow:0 9px 25px #06122e25;
  padding:24px
}
.gray-panel>h2 {
  margin:0 0 22px;
  font-size:28px;
  line-height:1.2
}
.instruction-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.instruction-grid article {
  background:#194575;
  border:1px solid #91c7f12b;
  border-radius:17px;
  padding:20px
}
.instruction-grid img {
  display:block;
  width:150px;
  max-width:100%;
  height:125px;
  object-fit:contain;
  margin:0 auto 18px;
  filter:drop-shadow(0 8px 6px #091c3650)
}
.instruction-grid h3 {
  font-size:21px;
  margin:0 0 8px;
  display:flex;
  align-items:center;
  gap:8px
}
.instruction-grid h3>span[aria-hidden] {
  color:var(--cyan);
  font-size:22px
}
.instruction-grid p {
  font-size:16px;
  line-height:1.5;
  color:var(--soft);
  margin:0
}
.home-tips {
  margin-top:34px
}
.tips-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.promo {
  position:relative;
  background:#245488;
  border:1px solid #8bc5f12b;
  border-radius:18px;
  overflow:hidden;
  min-height:160px;
  padding:22px
}
.promo--feelings p,.promo--gas p {
  position:relative;
  z-index:1;
  margin:0;
  max-width:65%;
  font-size:20px;
  line-height:1.25;
  font-weight:800
}
.promo--feelings small {
  display:block;
  font-size:14px;
  line-height:1.4;
  color:var(--soft);
  margin-top:10px;
  font-weight:600
}
.promo--feelings img {
  position:absolute;
  right:-15px;
  bottom:10px;
  width:110px;
  height:110px;
  object-fit:contain
}
.promo--gas {
  background:#1e467b
}
.promo--gas img {
  position:absolute;
  right:0;
  bottom:-5px;
  width:115px;
  height:130px;
  object-fit:contain;
  transform:rotate(-12deg)
}
.promo--gas strong {
  display:block;
  color:var(--cyan);
  font-size:46px;
  line-height:1
}
.promo--uppercut {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  min-height:145px;
  padding-right:145px;
  background:#203e6b
}
.promo--uppercut h2 {
  font-size:22px;
  line-height:1.2;
  margin:0 0 10px
}
.promo--uppercut h2 br,.promo--uppercut p br {
  display:none
}
.promo--uppercut p {
  font-size:16px;
  line-height:1.45;
  color:var(--soft);
  margin:0
}
.promo--uppercut img {
  position:absolute;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  width:90px;
  height:90px;
  object-fit:contain
}
.home-news {
  display:grid;
  gap:20px
}
.coming-soon {
  padding:25px 22px
}
.coming-top h2 {
  font-size:28px;
  margin:0 0 12px
}
.coming-top p {
  font-size:18px;
  line-height:1.4;
  color:var(--soft);
  margin:0
}
.coming-top p br {
  display:none
}
.coming-top>span {
  display:inline-block;
  margin-top:15px;
  border:1px solid #7de8ff55;
  border-radius:30px;
  padding:3px 14px;
  color:var(--cyan);
  font-size:14px;
  font-weight:700
}
.coming-top>span br {
  display:none
}
.coming-bottom {
  position:relative;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid #b4ddff30;
  min-height:180px
}
.coming-bottom h3 {
  font-size:21px;
  margin:0 0 12px
}
.coming-bottom p {
  font-size:16px;
  line-height:1.45;
  margin:0;
  position:relative;
  z-index:1;
  max-width:155px;
  color:var(--soft)
}
.coming-bottom img {
  position:absolute;
  right:-13px;
  bottom:-20px;
  width:90px;
  height:120px;
  object-fit:contain
}
.side-panel {
  background:#204675;
  padding:22px
}
.side-panel h2 {
  font-size:24px;
  margin:0 0 10px
}
.side-panel p {
  font-size:16px;
  line-height:1.5;
  color:var(--soft);
  margin:0 0 16px
}
.side-panel a {
  color:var(--cyan);
  font-size:15px;
  font-weight:700;
  text-decoration:none
}
.burst,.rainbow {
  display:none
}
.faq {
  margin-top:34px
}
.faq details {
  padding:15px 0;
  border-top:1px solid #b4ddff2b
}
.faq summary {
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  line-height:1.3
}
.faq details p {
  color:var(--soft);
  font-size:16px;
  line-height:1.5;
  margin:14px 0 0
}
.faq a {
  color:var(--cyan)
}
.side-links {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:20px
}
.side-links a {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #b4ddff30;
  border-radius:15px;
  padding:15px;
  color:var(--soft);
  text-decoration:none;
  font-size:13px;
  line-height:1.3;
  background:#15376a66
}
.side-links b {
  display:none
}
.side-icon {
  margin-left:auto;
  color:var(--cyan);
  font-size:22px
}
.side-links a:hover {
  background:#285b95
}
.home-memory {
  margin:50px 0 0
}
.giveaway {
  position:relative;
  border:1px solid #7ac8fc55;
  border-radius:24px;
  padding:30px 35px;
  background:linear-gradient(110deg,#153c70,#245c90);
  display:grid;
  grid-template-columns:1fr 1.7fr 150px;
  gap:25px;
  align-items:center;
  overflow:hidden
}
.giveaway h2 {
  font-size:38px;
  line-height:1.1;
  margin:0;
  grid-column:1;
  grid-row:1
}
.giveaway h2>span[aria-hidden] {
  color:var(--cyan);
  font-size:32px
}
.tiny-marsu {
  position:absolute;
  top:15px;
  left:230px;
  object-fit:contain;
  width:40px;
  height:50px
}
.coin {
  grid-column:3;
  grid-row:1;
  width:130px;
  height:130px;
  border:12px solid #b18110;
  border-radius:50%;
  background:linear-gradient(#ffdc5b,#e4a91d);
  display:grid;
  place-content:center;
  text-align:center;
  box-shadow:0 4px 12px #04163255;
  color:#fff
}
.coin strong {
  font-size:35px;
  line-height:1
}
.coin>span {
  font-size:17px;
  font-weight:800
}
.giveaway ul {
  grid-column:2;
  grid-row:1;
  padding-left:18px;
  margin:0;
  color:var(--soft);
  font-size:16px;
  line-height:1.4
}
.giveaway li {
  margin-bottom:9px
}
.giveaway li:last-child {
  margin:0
}
.giveaway li br {
  display:none
}
.winner-note {
  grid-column:1/-1;
  margin:0;
  padding-top:15px;
  border-top:1px solid #8dcaf033;
  color:var(--cyan);
  font-size:15px
}
.winner-note br {
  display:none
}
.winner-note>span[aria-hidden] {
  margin-right:5px
}
footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:30px 0;
  border-top:1px solid #a2d6ff22;
  margin-top:40px;
  font-size:13px;
  color:#a8c7e5
}
footer a {
  text-decoration:none
}
#popup-help:empty {
  display:none
}
#popup-help {
  padding:16px;
  border:1px solid #7de8ff55;
  border-radius:12px;
  background:#285b95;
  color:white
}
.login-panel {
  position:absolute;
  top:calc(100% + 16px);
  right:0;
  width:min(320px,calc(100vw - 32px));
  padding:25px;
  border:6px solid var(--edge);
  border-radius:20px;
  background:var(--panel);
  box-shadow:0 15px 40px #03112799;
  color:white
}
.login-panel h2 {
  margin:0 0 8px;
  font-size:25px;
  line-height:1.2
}
.login-panel p,.login-panel a {
  font-size:14px;
  line-height:1.4;
  color:var(--soft)
}
.login-panel form,.home-editor label {
  display:grid;
  gap:7px
}
.login-panel label {
  font-size:15px;
  font-weight:700;
  color:var(--soft)
}
.login-panel input,.home-editor input,.home-editor textarea {
  width:100%;
  min-width:0;
  border:2px solid transparent;
  border-radius:12px;
  padding:9px 12px;
  color:white;
  background:#4a7cb5;
  font:inherit
}
.login-panel input:focus,.home-editor input:focus,.home-editor textarea:focus {
  outline:2px solid #b4eeff;
  outline-offset:2px
}
.login-panel form button {
  margin-top:10px;
  padding:9px
}
.panel-close {
  position:absolute;
  top:4px;
  right:8px;
  border:0;
  background:none;
  color:var(--soft);
  font-size:24px
}
.home-editor {
  width:min(680px,calc(100% - 24px));
  max-height:85vh;
  border:7px solid var(--edge);
  border-radius:22px;
  padding:25px;
  background:var(--panel);
  color:white
}
.home-editor::backdrop {
  background:#030f2cbb;
  backdrop-filter:blur(3px)
}
.home-editor header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.home-editor h2 {
  margin:0;
  font-size:25px
}
.home-editor header button {
  border:0;
  background:none;
  color:white;
  font-size:28px
}
.home-editor p {
  color:var(--soft);
  font-size:15px
}
.home-editor label {
  margin:15px 0;
  font-size:14px;
  font-weight:700
}
.home-editor textarea {
  min-height:75px;
  resize:vertical;
  font-weight:500
}
.skip-link {
  position:absolute;
  top:-100px;
  left:10px;
  background:#285b95;
  z-index:20;
  padding:10px;
  border-radius:9px
}
.skip-link:focus {
  top:5px
}
@media(max-width:1050px) {
  .classic-page {
    width:calc(100% - 40px)
  }
  .masthead {
    gap:18px;
    flex-wrap:wrap;
    padding:12px 0 18px;
    min-height:0
  }
  .classic-logo {
    flex-basis:125px
  }
  .classic-logo img {
    width:125px;
    height:80px
  }
  .masthead nav {
    order:3;
    flex-basis:100%;
    justify-content:center;
    gap:20px
  }
  .home-account {
    margin-left:auto
  }
  .home-hero {
    gap:15px
  }
  .home-flyer {
    width:145px;
    height:145px
  }
  .hero-scene {
    min-height:390px
  }
  .home-flyer--india {
    top:210px
  }
  .home-flyer--empollon {
    top:210px
  }
  .home-main-grid {
    grid-template-columns:minmax(0,1fr) 270px;
    gap:20px
  }
  .gray-panel {
    padding:20px
  }
  .instruction-grid article {
    padding:16px
  }
  .side-links {
    grid-template-columns:1fr
  }
  .side-links br {
    display:none
  }
  .giveaway {
    grid-template-columns:1fr 1.4fr 130px;
    gap:18px;
    padding:25px
  }
  .tiny-marsu {
    display:none
  }
  .promo {
    padding:18px
  }
  .promo--feelings p,.promo--gas p {
    font-size:18px
  }
}
@media(max-width:780px) {
  .home-hero {
    grid-template-columns:1fr;
    padding-top:35px
  }
  .hero-copy {
    text-align:center
  }
  .hero-copy>p {
    margin:20px auto
  }
  .hero-actions {
    justify-content:center
  }
  .hero-copy h1 {
    font-size:44px
  }
  .hero-scene {
    width:min(480px,100%);
    justify-self:center;
    min-height:360px;
    margin-top:10px
  }
  .home-flyer--boomer {
    top:0
  }
  .home-flyer--gata {
    top:50px
  }
  .home-flyer--rasta {
    top:100px
  }
  .home-flyer--empollon {
    top:180px
  }
  .home-flyer--india {
    top:190px
  }
  .characters-panel {
    grid-template-columns:1fr;
    text-align:center;
    gap:15px;
    margin-top:10px
  }
  .home-main-grid {
    grid-template-columns:1fr
  }
  .home-news {
    grid-template-columns:1fr 1fr;
    align-items:start
  }
  .home-news>.small-play {
    grid-column:1/-1;
    width:auto;
    justify-self:center
  }
  .side-links {
    grid-template-columns:repeat(3,1fr)
  }
  .side-links br {
    display:block
  }
  .giveaway {
    grid-template-columns:1fr 130px
  }
  .giveaway h2 {
    font-size:34px
  }
  .giveaway ul {
    grid-column:1/-1;
    grid-row:2
  }
  .coin {
    grid-column:2
  }
  .winner-note {
    grid-row:3
  }
  .home-moon {
    top:160px;
    right:3%;
    width:60px;
    height:60px;
    opacity:.5
  }
}
@media(max-width:480px) {
  .classic-page {
    width:calc(100% - 28px)
  }
  .masthead nav {
    gap:12px;
    row-gap:8px
  }
  .masthead nav a {
    font-size:12px
  }
  .classic-logo {
    flex-basis:105px
  }
  .classic-logo img {
    width:105px;
    height:70px
  }
  .account-button {
    font-size:13px;
    padding:6px 10px
  }
  .hero-copy h1 {
    font-size:35px;
    letter-spacing:-1px
  }
  .hero-copy h2 {
    font-size:12px;
    letter-spacing:1.5px
  }
  .hero-copy>p {
    font-size:16px
  }
  .hero-actions {
    gap:10px
  }
  .play-word {
    font-size:27px;
    padding:9px 25px
  }
  .signup {
    font-size:14px;
    padding:12px
  }
  .hero-scene {
    min-height:310px
  }
  .home-flyer {
    width:120px;
    height:120px
  }
  .home-flyer--gata {
    left:0;
    top:45px
  }
  .home-flyer--rasta {
    right:0;
    top:100px
  }
  .home-flyer--empollon {
    left:0;
    top:160px
  }
  .home-flyer--india {
    left:35%;
    top:165px
  }
  .hero-scene-note {
    font-size:12px
  }
  .characters-panel {
    padding:20px 16px
  }
  .characters-panel h2 {
    font-size:22px
  }
  .cast {
    gap:6px
  }
  .cast img {
    height:75px
  }
  .gray-panel {
    border-width:5px;
    padding:18px 15px
  }
  .gray-panel>h2,.section-heading h2 {
    font-size:25px
  }
  .instruction-grid {
    grid-template-columns:1fr;
    gap:12px
  }
  .instruction-grid article {
    display:grid;
    grid-template-columns:90px 1fr;
    gap:8px 15px;
    align-items:center
  }
  .instruction-grid img {
    grid-row:1/3;
    width:90px;
    height:110px;
    margin:0
  }
  .instruction-grid h3 {
    font-size:20px;
    margin:0
  }
  .instruction-grid p {
    font-size:14px;
    grid-column:2
  }
  .tips-grid {
    gap:12px
  }
  .promo {
    padding:15px;
    min-height:170px
  }
  .promo--feelings p,.promo--gas p {
    max-width:100%;
    font-size:17px
  }
  .promo--feelings small {
    font-size:13px;
    max-width:85px
  }
  .promo--feelings img {
    width:80px;
    height:80px;
    right:-17px;
    bottom:0
  }
  .promo--gas img {
    width:82px;
    height:105px;
    bottom:-5px;
    right:-8px
  }
  .promo--gas strong {
    font-size:38px
  }
  .promo--uppercut {
    min-height:170px;
    padding-right:100px
  }
  .promo--uppercut h2 {
    font-size:20px
  }
  .promo--uppercut p {
    font-size:14px
  }
  .promo--uppercut img {
    width:70px;
    height:70px;
    right:18px
  }
  .side-links {
    grid-template-columns:1fr
  }
  .side-links br {
    display:none
  }
  .home-news {
    grid-template-columns:1fr
  }
  .home-memory {
    margin-top:35px
  }
  .giveaway {
    padding:20px;
    gap:15px;
    grid-template-columns:1fr 100px
  }
  .giveaway h2 {
    font-size:29px
  }
  .coin {
    width:100px;
    height:100px;
    border-width:9px
  }
  .coin strong {
    font-size:28px
  }
  .coin>span {
    font-size:14px
  }
  .giveaway ul {
    font-size:15px
  }
  .winner-note {
    font-size:14px
  }
  footer {
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
    gap:12px
  }
  .coming-bottom p {
    max-width:70%
  }
  .coming-bottom img {
    width:110px;
    height:140px;
    right:0
  }
  .login-panel {
    right:0
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .home-flyer {
    animation:none
  }
}

.theme-toggle {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
  width:62px;
  height:32px;
  padding:0 7px;
  border:1px solid #8dccff70;
  border-radius:999px;
  background:#15376a;
  color:#c6e5ff;
  cursor:pointer;
}
.theme-toggle__moon,.theme-toggle__sun { position:relative; z-index:1; font-size:18px; line-height:1; }
.theme-toggle__thumb { position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%; background:#417cb7; box-shadow:0 2px 4px #051c4540; transition:transform .2s; }
.theme-toggle[aria-checked="true"] .theme-toggle__thumb { transform:translateX(30px); background:#ffdc63; }
.theme-toggle[aria-checked="true"] { background:#fff6c9; color:#705415; border-color:#cfb552; }
.auth-mode-toggle { border:0; background:none; padding:0; color:var(--cyan); font-size:14px; font-weight:700; text-align:left; }
#home-confirm-field { display:grid; gap:7px; }
.gas-animation { position:absolute; right:-10px; bottom:-8px; width:150px; height:150px; pointer-events:none; }
.gas-animation canvas { display:block; width:100%; height:100%; }
.feelings-animation { position:absolute; right:-12px; bottom:-9px; width:145px; height:145px; pointer-events:none; }
.feelings-animation canvas { display:block; width:100%; height:100%; }
.promo--gas p { max-width:55%; }

:root[data-theme="day"] { background:#c4e9ff; color:#173d6b; --panel:#e3f2ff; --edge:#a7d2ee; --soft:#365f84; --cyan:#006b9c; }
[data-theme="day"] body { background:linear-gradient(#c4e9ff,#e7f6ff 700px,#b7dcf6 1700px,#e5f3ff); }
[data-theme="day"] .home-sky::before { opacity:0; }
[data-theme="day"] .home-moon { background:#ffdf6c; box-shadow:0 0 0 14px #ffd85325,0 0 70px #ffd54d66; }
[data-theme="day"] .home-cloud { background:#fff; opacity:.8; }
[data-theme="day"] .home-horizon { background:#83bfe440; }
[data-theme="day"] .masthead,[data-theme="day"] footer { border-color:#437ea33b; }
[data-theme="day"] .masthead nav a,[data-theme="day"] footer { color:#365f84; }
[data-theme="day"] .masthead nav .home-link { color:#123c69; }
[data-theme="day"] .hero-orbit { border-color:#5b9ec440; background:radial-gradient(ellipse,#77c8ed33,transparent 70%); }
[data-theme="day"] .hero-orbit--two { background:none; }
[data-theme="day"] .characters-panel { background:#eef8ffb3; border-color:#77afd14d; }
[data-theme="day"] .instruction-grid article { background:#f1f9ff; border-color:#86b6d144; }
[data-theme="day"] .promo { background:#deeffd; border-color:#77afd14d; }
[data-theme="day"] .promo--gas { background:#d1e8fa; }
[data-theme="day"] .promo--uppercut,[data-theme="day"] .side-panel { background:#e3f2ff; }
[data-theme="day"] .coming-bottom,[data-theme="day"] .faq details { border-color:#5b9ec440; }
[data-theme="day"] .side-links a { background:#e9f5ff; border-color:#77afd14d; }
[data-theme="day"] .side-links a:hover { background:#cee9fb; }
[data-theme="day"] .login-panel,[data-theme="day"] .home-editor { color:#173d6b; }
[data-theme="day"] .login-panel input,[data-theme="day"] .home-editor input,[data-theme="day"] .home-editor textarea { color:#173d6b; background:#fff; border-color:#a7d2ee; }
[data-theme="day"] .panel-close,[data-theme="day"] .home-editor header button { color:#173d6b; }
@media(max-width:480px) { .gas-animation { width:115px; height:115px; right:-20px; } .feelings-animation { width:112px; height:112px; right:-18px; } }
@media(prefers-reduced-motion:reduce) { .theme-toggle__thumb { transition:none; } }

.community-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0 35px}
.community-panel{min-width:0;padding:22px;border:1px solid #75b8ec55;border-radius:24px;background:#183865cc}
.community-panel .section-heading{margin:0 0 16px}.community-panel h2{margin:0;font-size:23px}.community-panel .section-heading p{margin:3px 0 0;color:#bcd8ed}
.popular-areas,.recent-users{display:grid;gap:10px}
.popular-area{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-height:95px;overflow:hidden;border-radius:14px;padding:13px 15px;background:#305c86 center/cover;color:#fff;text-shadow:0 2px 4px #000;isolation:isolate}
.popular-area::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#061934e6,#06193433)}
.popular-area strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:19px}.popular-area span{flex:none;border-radius:12px;padding:3px 9px;background:#071b3fcc;font-weight:800;white-space:nowrap}
.recent-user{display:flex;align-items:center;gap:13px;min-height:95px;border:1px solid #91c7f130;border-radius:14px;padding:8px 12px;background:#102d57}
.recent-user img{flex:none;width:68px;height:74px;object-fit:contain;filter:drop-shadow(0 4px 5px #0005)}.recent-user span{display:grid;min-width:0}.recent-user strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-user small{color:#bcd8ed}
.community-panel>div>p{color:#bcd8ed}
[data-theme="day"] .community-panel{background:#eef8ff;border-color:#77afd14d}[data-theme="day"] .community-panel .section-heading p,[data-theme="day"] .community-panel>div>p{color:#365f84}[data-theme="day"] .recent-user{background:#d5eafb;border-color:#77afd14d}[data-theme="day"] .recent-user small{color:#365f84}
@media(max-width:700px){.community-grid{grid-template-columns:1fr}.community-panel{padding:18px}}