:root {
  --ink: #17324d;
  --muted: #63778b;
  --sky: #36a9f7;
  --sky-deep: #1687de;
  --orange: #ff8738;
  --orange-deep: #f56a1b;
  --green: #4fc878;
  --yellow: #ffd84d;
  --paper: #ffffff;
  --line: #d9ecf8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: linear-gradient(135deg, #eff9ff 0%, #fff 48%, #fff6e9 100%);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-pattern {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(54, 169, 247, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 169, 247, .055) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 76%);
}

.nav-shell, .hero-section, .content-section, .site-footer {
  width: 100%;
  max-width: 1152px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.main-nav { display: flex; align-items: center; gap: 8px; }
.nav-link, .action-button, .card-action, .coming-soon, .police-record { display: inline-flex; align-items: center; }
.nav-link, .action-button { justify-content: center; }
.nav-link { gap: 8px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.action-button { gap: 12px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.card-action { justify-content: space-between; }
.coming-soon, .police-record { gap: 8px; }
.site-footer { display: flex; align-items: center; flex-direction: column; text-align: center; }
.footer-brand { display: flex; align-items: center; gap: 8px; }
#games, #learning { scroll-margin-top: 96px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(54, 169, 247, .16);
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 5px 24px rgba(45, 132, 181, .07);
  backdrop-filter: blur(18px);
}
.nav-shell { min-height: 76px; }
.brand { min-width: 0; }
.brand-mark {
  display: flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 15px;
  background: #ffda57;
  box-shadow: 0 7px 0 #f4b92f, 0 10px 18px rgba(245, 158, 30, .2);
  font-size: 23px;
  transform: rotate(-4deg);
}
.brand-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.brand-copy strong { color: #1b4264; font-size: 16px; line-height: 1.25; white-space: nowrap; }
.brand-copy small { color: #76a3be; font-size: 8px; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.nav-link {
  min-height: 43px;
  padding: 0 17px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  transition: transform .22s ease, color .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.nav-link:hover, .nav-link:focus-visible { transform: translateY(-3px) rotate(-1deg); outline: none; }
.nav-game { border-color: #bfe7ff; color: #0b78c4; background: #eaf7ff; }
.nav-game:hover, .nav-game.is-active { border-color: #77caff; background: #dff3ff; box-shadow: 0 7px 0 #b9e3fb, 0 11px 20px rgba(33, 145, 214, .13); }
.nav-learning { border-color: #c7ebcf; color: #25864d; background: #edfaef; }
.nav-learning:hover, .nav-learning.is-active { border-color: #83d898; background: #e4f8e8; box-shadow: 0 7px 0 #b9e5c3, 0 11px 20px rgba(53, 166, 92, .12); }

.hero-section {
  position: relative;
  display: grid;
  min-height: 500px;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: center;
  gap: 36px;
  isolation: isolate;
}
.hero-copy { position: relative; z-index: 10; padding: 76px 0 82px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 18px;
  padding: 8px 13px;
  border: 1px solid #bee9d0;
  border-radius: 999px;
  color: #28814b;
  background: #eefbf2;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}
.eyebrow span { color: var(--orange); font-size: 16px; }
.hero-copy h1 {
  margin: 0;
  font-size: 68px;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}
.hero-copy h1 span,
.hero-copy h1 b {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 950;
}
.hero-copy h1 span {
  background-image: linear-gradient(110deg, #ff7629, #ffae33);
  filter: drop-shadow(0 5px 8px rgba(255, 126, 38, .15));
}
.hero-copy h1 b {
  background-image: linear-gradient(110deg, #168fe3, #55c1f5);
  filter: drop-shadow(0 5px 8px rgba(22, 143, 227, .14));
}
.hero-lead { margin: 20px 0 31px; color: #536d82; font-size: 18px; font-weight: 700; line-height: 1.8; }
.action-button {
  min-height: 52px;
  padding: 0 21px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.action-button b { margin-left: 9px; font-size: 19px; }
.action-button:hover, .action-button:focus-visible { transform: translateY(-4px); outline: none; }
.action-primary {
  color: #fff;
  background: linear-gradient(110deg, #ff7b2c, #ffa928);
  box-shadow: 0 7px 0 #e8661f, 0 14px 26px rgba(239, 107, 31, .2);
}
.action-primary:hover, .action-primary:focus-visible { box-shadow: 0 9px 0 #e8661f, 0 18px 32px rgba(239, 107, 31, .27); }
.action-secondary {
  border-color: #9fd8fb;
  color: #137ebf;
  background: #fff;
  box-shadow: 0 7px 0 #d1edfc, 0 14px 25px rgba(52, 147, 202, .1);
}
.action-secondary:hover, .action-secondary:focus-visible { border-color: #5cbbf3; background: #f4fbff; box-shadow: 0 9px 0 #c5e8fb, 0 18px 30px rgba(52, 147, 202, .15); }

.hero-visual {
  position: relative;
  width: 100%;
  height: 360px;
}
.hero-visual::before {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 42px;
  width: 76%;
  height: 30px;
  border-radius: 50%;
  background: rgba(45, 147, 205, .1);
  filter: blur(2px);
}
.rocket {
  position: absolute;
  top: 36px;
  left: 42%;
  z-index: 3;
  font-size: 116px;
  line-height: 1;
  filter: drop-shadow(0 15px 12px rgba(42, 132, 184, .18));
  transform: rotate(-8deg);
  animation: rocket-float 3.8s ease-in-out infinite;
}
.robot {
  position: absolute;
  right: 7%;
  bottom: 48px;
  z-index: 4;
  font-size: 92px;
  line-height: 1;
  filter: drop-shadow(0 12px 9px rgba(24, 117, 172, .17));
  animation: robot-wave 3s ease-in-out infinite;
}
.flight-path {
  position: absolute;
  top: 130px;
  left: 8%;
  width: 50%;
  height: 130px;
  border-bottom: 4px dashed #73c7ef;
  border-left: 4px dashed #73c7ef;
  border-radius: 0 0 0 95px;
  transform: rotate(-13deg);
}
.doodle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  line-height: 1;
}
.doodle-star { top: 38px; right: 13%; color: #ffc928; font-size: 37px; transform: rotate(12deg); }
.doodle-gear { top: 83px; left: 6%; color: #55bf74; font-size: 42px; transform: rotate(-14deg); }
.doodle-code {
  bottom: 66px;
  left: 11%;
  min-width: 62px;
  height: 46px;
  padding: 0 9px;
  border: 3px solid #8fddaa;
  border-radius: 14px;
  color: #2b9d57;
  background: #edfff2;
  box-shadow: 0 6px 0 #c8efd3;
  font-size: 18px;
}
.idea-chip {
  position: absolute;
  right: 0;
  top: 73px;
  z-index: 5;
  padding: 10px 14px;
  border: 2px solid #ffe074;
  border-radius: 999px;
  color: #b86413;
  background: #fff9db;
  box-shadow: 0 6px 0 #ffe8a1;
  font-size: 11px;
  font-weight: 900;
  transform: rotate(3deg);
}

.content-section { padding-bottom: 80px; }
.section-heading { margin-bottom: 23px; padding-top: 20px; }
.section-heading p { margin: 0 0 7px; color: var(--orange-deep); font-size: 10px; font-weight: 950; line-height: 1.3; }
.section-heading h2 { margin: 0; color: #1b4567; font-size: 31px; line-height: 1.25; letter-spacing: 0; }
.section-heading > span { padding-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature-card {
  position: relative;
  min-height: 405px;
  overflow: hidden;
  padding: 26px;
  border: 3px solid;
  border-radius: 28px;
  transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}
.feature-card::after {
  content: "";
  position: absolute;
  right: -25px;
  top: -30px;
  width: 120px;
  height: 105px;
  border: 12px solid rgba(255, 255, 255, .52);
  border-radius: 24px;
  transform: rotate(18deg);
  pointer-events: none;
}
.game-card {
  border-color: #9edbff;
  background: linear-gradient(145deg, #f1faff 0%, #e8f7ff 62%, #fff3df 100%);
  box-shadow: 0 11px 0 #bee7fb, 0 20px 38px rgba(50, 141, 194, .13);
}
.tetris-card {
  border-color: #ffd978;
  background: linear-gradient(145deg, #fffdf0 0%, #fff6d8 59%, #e8f8ff 100%);
  box-shadow: 0 11px 0 #ffe9ae, 0 20px 38px rgba(197, 142, 31, .12);
}
.learning-card {
  border-color: #a8dfb6;
  background: linear-gradient(145deg, #f3fff5 0%, #edfaef 60%, #fff9d9 100%);
  box-shadow: 0 11px 0 #c8eace, 0 20px 38px rgba(65, 151, 90, .12);
}
.game-card:hover, .game-card:focus-within { transform: translateY(-8px) rotate(-.3deg); border-color: #56bdf8; box-shadow: 0 14px 0 #a8ddf7, 0 28px 50px rgba(50, 141, 194, .2); }
.tetris-card:hover, .tetris-card:focus-within { transform: translateY(-8px) rotate(.25deg); border-color: #f5bd38; box-shadow: 0 14px 0 #ffe39b, 0 28px 50px rgba(197, 142, 31, .18); }
.learning-card:hover, .learning-card:focus-within { transform: translateY(-8px) rotate(.3deg); border-color: #68ca83; box-shadow: 0 14px 0 #bce5c5, 0 28px 50px rgba(65, 151, 90, .18); }
.card-top, .card-body, .card-action, .coming-soon { position: relative; z-index: 2; }
.card-icon {
  display: inline-flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  border-radius: 20px;
  font-size: 29px;
}
.game-card .card-icon { background: #5bc0fa; box-shadow: 0 7px 0 #249bdd, 0 11px 20px rgba(39, 148, 211, .2); }
.tetris-card .card-icon { background: #ff9b45; box-shadow: 0 7px 0 #ed7423, 0 11px 20px rgba(226, 113, 33, .18); }
.learning-card .card-icon { background: #ffdc51; box-shadow: 0 7px 0 #edbb2e, 0 11px 20px rgba(216, 167, 30, .17); }
.card-index {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  font-size: 10px;
  font-weight: 950;
}
.game-card .card-index { color: #167dbd; }
.tetris-card .card-index { color: #ac681a; }
.learning-card .card-index { color: #278348; }
.card-body { margin-top: 28px; max-width: 83%; }
.card-kicker { margin: 0 0 7px; color: var(--orange-deep); font-size: 11px; font-weight: 950; line-height: 1.3; }
.learning-card .card-kicker { color: #2b9b53; }
.tetris-card .card-kicker { color: #d27620; }
.card-body h3 { margin: 0; color: #1a4667; font-size: 34px; line-height: 1.2; letter-spacing: 0; }
.tetris-card .card-body h3 { color: #765019; }
.learning-card .card-body h3 { color: #245c3b; }
.card-description { margin: 12px 0 19px; color: #5c7183; font-size: 14px; font-weight: 650; line-height: 1.75; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-row span {
  padding: 7px 10px;
  border: 1px solid #adddf8;
  border-radius: 999px;
  color: #276f9a;
  background: rgba(255, 255, 255, .78);
  font-size: 10px;
  font-weight: 900;
}
.tetris-card .tag-row span { border-color: #f3d482; color: #8a621e; background: rgba(255, 255, 255, .8); }
.game-decoration { position: absolute; z-index: 1; top: 123px; right: 27px; }
.game-decoration span { position: absolute; top: -27px; right: 5px; color: #ffae25; font-size: 26px; transform: rotate(10deg); }
.game-decoration b { font-size: 54px; opacity: .8; filter: drop-shadow(0 8px 6px rgba(229, 156, 23, .14)); }
.tetris-decoration {
  position: absolute;
  top: 123px;
  right: 26px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 17px);
  grid-template-rows: repeat(2, 17px);
  filter: drop-shadow(0 7px 5px rgba(32, 145, 205, .16));
  transform: rotate(8deg);
}
.tetris-decoration i { border: 2px solid #fff; border-radius: 4px; background: #46b8f2; box-shadow: inset 0 -3px 0 rgba(12, 112, 169, .18); }
.tetris-decoration i:first-child { grid-column: 2; }
.tetris-decoration i:nth-child(2) { grid-column: 1; grid-row: 2; }
.tetris-decoration i:nth-child(3) { grid-column: 2; grid-row: 2; }
.tetris-decoration i:nth-child(4) { grid-column: 3; grid-row: 2; }
.card-action {
  position: absolute;
  right: 26px;
  bottom: 25px;
  left: 26px;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(105deg, #ff7b2c, #ffac2d);
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 7px 0 #e76520, 0 13px 24px rgba(230, 101, 32, .19);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card-action b { font-size: 20px; }
.card-action:hover, .card-action:focus-visible { transform: translateY(-4px); outline: none; box-shadow: 0 9px 0 #e76520, 0 18px 30px rgba(230, 101, 32, .26); }
.tetris-action { background: linear-gradient(105deg, #269ee9, #55c7f3); box-shadow: 0 7px 0 #1780c4, 0 13px 24px rgba(23, 128, 196, .18); }
.tetris-action:hover, .tetris-action:focus-visible { box-shadow: 0 9px 0 #1780c4, 0 18px 30px rgba(23, 128, 196, .25); }
.subject-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.subject-list span {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 2px solid #fff;
  border-radius: 17px;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 5px 0 rgba(70, 143, 89, .11);
  transition: transform .2s ease;
}
.subject-list span:hover { transform: translateY(-3px); }
.subject-list b { font-size: 18px; line-height: 1; }
.subject-math { color: #176da6; background: #dff3ff; }
.subject-english { color: #a85b12; background: #fff0bd; }
.subject-record { color: #267846; background: #dff6e4; }
.coming-soon {
  position: absolute;
  right: 26px;
  bottom: 26px;
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid #d9e7dc;
  border-radius: 999px;
  color: #647b69;
  background: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 900;
}
.coming-soon i { width: 8px; height: 8px; border-radius: 50%; background: #65c77e; box-shadow: 0 0 0 4px rgba(101, 199, 126, .16); }

.site-footer {
  gap: 8px;
  padding-top: 27px;
  padding-bottom: calc(27px + env(safe-area-inset-bottom));
  border-top: 1px solid #d7eaf5;
  color: #71869a;
  font-size: 10px;
}
.footer-brand { margin-bottom: 2px; color: #315a78; }
.footer-brand > span { font-size: 17px; }
.footer-brand strong { font-size: 11px; }
.site-footer a { transition: color .2s ease, transform .2s ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: #1277b8; outline: none; transform: translateY(-1px); }
.police-record img { width: 20px; height: 20px; object-fit: contain; }

@keyframes rocket-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-10px) rotate(-5deg); }
}
@keyframes robot-wave {
  0%, 100% { transform: rotate(0); }
  50% { transform: translateY(-5px) rotate(4deg); }
}

@media (max-width: 1050px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-card { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .hero-section { grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
  .hero-copy h1 { font-size: 54px; }
  .rocket { left: 37%; font-size: 98px; }
  .robot { font-size: 78px; }
  .idea-chip { right: -4px; }
  .feature-card { min-height: 425px; }
  .card-body { max-width: 100%; }
  .game-decoration { opacity: .48; }
}

@media (max-width: 700px) {
  .nav-shell { min-height: 108px; align-items: stretch; flex-direction: column; gap: 9px; padding-top: 10px; padding-bottom: 10px; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 13px; font-size: 20px; box-shadow: 0 5px 0 #f4b92f, 0 8px 14px rgba(245, 158, 30, .17); }
  .main-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .nav-link { min-height: 40px; padding: 0 10px; font-size: 11px; }
  .nav-game:hover, .nav-game.is-active, .nav-learning:hover, .nav-learning.is-active { box-shadow: 0 4px 0 rgba(91, 178, 218, .2); }
  .hero-section { display: flex; min-height: 500px; align-items: stretch; flex-direction: column; gap: 0; }
  .hero-copy { width: 100%; padding: 39px 0 8px; }
  .eyebrow { margin-bottom: 14px; padding: 7px 11px; font-size: 10px; }
  .hero-copy h1 { max-width: 390px; font-size: 43px; }
  .hero-lead { margin: 14px 0 21px; font-size: 14px; }
  .action-button { min-height: 46px; padding: 0 14px; font-size: 11px; }
  .hero-visual { height: 205px; margin-top: 9px; }
  .rocket { top: 22px; left: 42%; font-size: 78px; }
  .robot { right: 15%; bottom: 28px; font-size: 63px; }
  .flight-path { top: 75px; left: 14%; width: 40%; height: 83px; border-width: 3px; }
  .doodle-star { top: 8px; right: 15%; font-size: 26px; }
  .doodle-gear { top: 25px; left: 18%; font-size: 30px; }
  .doodle-code { bottom: 27px; left: 19%; min-width: 51px; height: 37px; border-width: 2px; border-radius: 11px; box-shadow: 0 4px 0 #c8efd3; font-size: 14px; }
  .idea-chip { top: 25px; right: 0; padding: 7px 9px; box-shadow: 0 4px 0 #ffe8a1; font-size: 9px; }
  .hero-visual::before { right: 13%; bottom: 14px; height: 19px; }
  .content-section { padding-bottom: 56px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; padding-top: 10px; }
  .section-heading h2 { font-size: 26px; }
  .feature-grid { grid-template-columns: 1fr; }
  .learning-card { grid-column: auto; }
  .feature-card { min-height: 395px; padding: 22px; border-radius: 25px; }
  .card-icon { width: 54px; height: 54px; border-radius: 18px; font-size: 26px; }
  .card-body { margin-top: 24px; }
  .card-body h3 { font-size: 29px; }
  .card-description { max-width: 92%; font-size: 13px; }
  .game-decoration { top: 84px; right: 22px; }
  .game-decoration span { top: -18px; font-size: 20px; }
  .game-decoration b { font-size: 40px; }
  .tetris-decoration { top: 84px; right: 22px; grid-template-columns: repeat(3, 14px); grid-template-rows: repeat(2, 14px); }
  .card-action { right: 22px; bottom: 22px; left: 22px; }
  .coming-soon { right: 22px; bottom: 22px; }
}

@media (max-width: 390px) {
  .hero-section, .content-section, .nav-shell, .site-footer { padding-right: 16px; padding-left: 16px; }
  .brand-copy strong { font-size: 14px; }
  .brand-copy small { font-size: 7px; }
  .hero-copy h1 { font-size: 39px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .action-button { min-width: 0; padding: 0 9px; white-space: nowrap; }
  .action-button b { display: none; }
  .rocket { left: 39%; }
  .idea-chip { right: 1px; }
  .subject-list { gap: 6px; }
  .section-heading > span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rocket, .robot { animation: none; }
  .nav-link, .action-button, .feature-card, .card-action, .subject-list span, .site-footer a { transition: none; }
}