:root {
  color-scheme: dark;
  --background: #080b16;
  --panel: #0d1223;
  --line: #202943;
  --text: #f3f5fc;
  --muted: #a4adc4;
  --accent: #8caeff;
  --font: "Geist", "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
button[hidden] { display: none; }
:focus-visible { outline: 2px solid #91c8ff; outline-offset: 5px; }
.shell { width: min(100% - 96px, 1220px); margin-inline: auto; }
.skip-link {
  position: fixed;
  z-index: 3;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: #080b16;
  background: #fff;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  border-bottom: 1px solid #1a2136;
  background: #090c18;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 9px;
  font-size: 21px;
  font-weight: 720;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.main-nav { display: flex; gap: 39px; color: #c0c8dc; font-size: 14px; }
.main-nav a, .top-link { transition: color .2s ease; }
.main-nav a:hover, .top-link:hover { color: #fff; }

.language {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  min-width: 75px;
  border: 1px solid #2b3551;
  border-radius: 7px;
  background: #0d1222;
  cursor: pointer;
  font-size: 13px;
  transition: background .2s ease, border-color .2s ease;
}
.language:hover { background: #171e35; border-color: #5a709f; }

.globe {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #a4b5d9;
  border-radius: 50%;
}
.globe::before { position: absolute; inset: -1px 3px; border: 1px solid #a4b5d9; border-radius: 50%; content: ""; }
.globe::after { position: absolute; inset: 6px 0 auto; border-top: 1px solid #a4b5d9; content: ""; }

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #1a2136;
  background:
    radial-gradient(ellipse at 75% 48%, #1c2857 0%, #10172f 33%, transparent 66%),
    #080b16;
}

.hero-inner {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 582px;
  padding-block: 60px 73px;
}

.hero-copy { position: relative; z-index: 1; width: 54%; }
.hero-kicker, .section-label {
  color: #a9baff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
}
.hero-kicker { display: flex; align-items: center; gap: 11px; margin: 0 0 23px; }
.hero-kicker > span:first-child {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #98b7ff;
  box-shadow: 0 0 12px #6598ff;
}
h1, h2, h3, p { margin: 0; }
h1 {
  font-size: clamp(40px, 5.1vw, 76px);
  font-weight: 740;
  letter-spacing: -.055em;
  line-height: 1.16;
}
h1 > span { display: block; }
.gradient-text {
  width: fit-content;
  color: #9bafff;
  background: linear-gradient(100deg, #a99afe 0%, #87acff 57%, #82e0ff 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-description {
  max-width: 380px;
  margin: 24px 0 32px;
  color: #b4bed8;
  font-size: 16px;
  line-height: 1.85;
}
.primary-link {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  min-height: 48px;
  padding: 0 17px;
  border: 1px solid #a8bcff;
  border-radius: 7px;
  background: #a7bbff;
  color: #0c1533;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s ease, box-shadow .2s ease;
}
.primary-link:hover { background: #cad7ff; box-shadow: 0 0 24px #7899ff4a; }
.primary-link > span:last-child { font-size: 18px; line-height: 1; }

.orbit-art {
  position: absolute;
  top: 50%;
  right: -62px;
  width: min(64%, 750px);
  height: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}
.orbit-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, #647fbc26 1px, transparent 1px),
    linear-gradient(to bottom, #647fbc26 1px, transparent 1px),
    radial-gradient(circle, #819fe479 1px, transparent 1.6px);
  background-size: 44px 44px, 44px 44px, 88px 88px;
  background-position: center;
  mask-image: radial-gradient(ellipse at 53% 48%, #000 8%, #000a 42%, transparent 72%);
}
.orbit-plane {
  position: absolute;
  inset: 23% 5% 24%;
  transform: rotate(-24deg);
}
.ring { position: absolute; border: 1px solid #6d8ee048; border-radius: 50%; }
.ring-outer { inset: 0; border-style: dashed; border-color: #7da9ff50; }
.ring-middle { inset: 12% 6%; border-color: #8d9bff7c; }
.ring-inner { inset: 25% 15%; border-color: #7ca9ff62; }
.ring-bright {
  inset: 17% 9% 18%;
  border-color: #9cb9ff96;
  border-left-color: #9270ff;
  border-right-color: #7de4ff;
  box-shadow: 0 0 22px #5364ff56, inset 0 0 20px #4968ff34;
}
.orbit-node, .field-star { position: absolute; display: block; border-radius: 50%; }
.orbit-node-blue {
  top: 35%;
  right: 10.8%;
  width: 8px;
  height: 8px;
  background: #b0f1ff;
  box-shadow: 0 0 18px 4px #5fd0ffb5;
}
.orbit-node-violet {
  bottom: 28%;
  left: 12%;
  width: 8px;
  height: 8px;
  background: #c1aaff;
  box-shadow: 0 0 18px 4px #996affaf;
}
.orbit-node-white {
  top: 10.3%;
  left: 47%;
  width: 5px;
  height: 5px;
  background: #d0e0ff;
  box-shadow: 0 0 12px #92b9ff;
}
.field-star { width: 3px; height: 3px; background: #9ab9ff; box-shadow: 0 0 11px 2px #5b79dc85; }
.field-star-north { top: 19%; left: 42%; }
.field-star-east { top: 50%; right: 8%; }
.field-star-south { bottom: 22%; right: 27%; }
.field-star-west { bottom: 27%; left: 9%; }
.mark-glow {
  position: absolute;
  top: 50%;
  left: 51%;
  width: 69%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #4569ff5e, #3f69ff27 37%, transparent 69%);
}
.hero-mark {
  position: absolute;
  top: 48%;
  left: 51%;
  width: 49%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 20px #182cffb3) drop-shadow(0 0 26px #52afff42);
}

.section { scroll-margin-top: 32px; }
.products { padding-block: 75px 86px; }
.section-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
  margin-bottom: 30px;
}
.section-label { margin-bottom: 11px; }
h2 { font-size: clamp(28px, 3.1vw, 43px); line-height: 1.21; letter-spacing: -.045em; }
.section-intro > p { margin-bottom: 4px; color: var(--muted); font-size: 15px; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.product-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.product-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 245px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.product-art::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#889aff24 1px, transparent 1px),
    linear-gradient(90deg, #889aff24 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
  content: "";
}
.sentence-art { background: radial-gradient(ellipse at 46% 66%, #1a3478, #101a38 57%, #0c1429); }
.learning-art { background: radial-gradient(ellipse at 49% 65%, #34246d, #1a1740 58%, #13132b); }
.writing-sheet {
  position: relative;
  width: min(77%, 363px);
  border: 1px solid #5478bf80;
  border-radius: 11px;
  background: #101b36;
  box-shadow: 0 17px 44px #070d27b3, 0 0 26px #456dff2b;
  transform: rotate(-4deg);
}
.sheet-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border-bottom: 1px solid #344569;
  color: #afbee2;
  font-size: 11px;
}
.window-lights { display: flex; gap: 4px; }
.window-lights i { width: 5px; height: 5px; border-radius: 50%; background: #607cb7; }
.window-lights i:first-child { background: #ad8ff7; }
.window-lights i:last-child { background: #72c8ef; }
.writing-content { display: grid; gap: 12px; padding: 18px; font-size: clamp(10px, 1.2vw, 15px); }
.edit-original { text-decoration: underline wavy #f78eaf; text-underline-offset: 4px; }
.writing-change {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 37px;
  padding: 5px 8px;
  border: 1px solid #3d6b8c;
  border-radius: 5px;
  background: #132c43;
}
.check-mini { color: #80e7c3; }
mark { padding: 1px 2px; border-radius: 2px; background: #244e52; color: #a6f5d3; }

.paper-stack { position: relative; width: 155px; height: 175px; margin-top: 4px; }
.paper { position: absolute; inset: 0; border: 1px solid #a58ce975; border-radius: 10px; }
.paper-back { transform: translate(26px, 6px) rotate(14deg); background: #342757; }
.paper-mid { transform: translate(-24px, 8px) rotate(-14deg); background: #392c66; }
.paper-front {
  padding: 16px;
  transform: rotate(-4deg);
  background: linear-gradient(155deg, #3c3070, #221e4b);
  box-shadow: 0 12px 32px #0e10286b;
}
.paper-head { display: flex; align-items: center; gap: 8px; color: #ddd2ff; font-size: 10px; }
.paper-symbol { display: grid; align-content: center; gap: 3px; width: 27px; height: 27px; padding: 0 6px; border-radius: 6px; background: #8273d3; }
.paper-symbol i { height: 1px; background: #f0eaff; }
.paper-symbol i:last-child { width: 65%; }
.practice-phrase { margin-top: 16px; color: #f0eaff; font-size: 17px; font-weight: 680; line-height: 1.25; }
.practice-meaning { margin-top: 9px; color: #d2c5ff; font-size: 11px; }
.product-info { display: flex; align-items: flex-start; gap: 15px; padding: 24px; }
.product-info h3 { margin: 0 0 7px; font-size: 23px; font-weight: 680; letter-spacing: -.035em; }
.product-info p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.product-link { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 8px; color: #a9baff; font-size: 14px; font-weight: 650; }
.product-link:hover { color: #dbe3ff; text-decoration: underline; }
.product-icon {
  position: relative;
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid;
  border-radius: 9px;
}
.sentence-icon { border-color: #3d548f; background: #192851; color: #b3cbff; font-size: 17px; font-weight: 700; }
.sentence-icon > span { position: absolute; right: 5px; bottom: 4px; font-size: 9px; color: #91eed2; }
.learning-icon { border-color: #544682; background: #2a214c; color: #d0bfff; font-size: 18px; font-weight: 700; }
.learning-icon > span { position: absolute; right: 6px; top: 5px; font-size: 9px; }

.about { padding-bottom: 86px; }
.about-panel {
  display: grid;
  grid-template-columns: minmax(160px, 32%) 1fr;
  align-items: center;
  gap: 40px;
  min-height: 242px;
  padding: 30px 45px 30px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(ellipse at 17% 48%, #1b2a54, transparent 53%), var(--panel);
}
.about-art { display: grid; min-height: 155px; place-items: center; }
.about-art img { filter: drop-shadow(0 0 22px #4c7fff70); }
.about-copy { max-width: 605px; margin-top: 13px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.about-copy + .about-copy { margin-top: 6px; }
.about-contact { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 17px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.about-contact a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.about-contact a:hover { color: #dbe3ff; }

.site-footer { border-top: 1px solid #1a2136; background: #090c18; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; min-height: 84px; padding-block: 16px; }
.footer-brand { font-size: 17px; }
.footer-company, .top-link { color: var(--muted); font-size: 13px; }
.footer-company { display: grid; gap: 4px; line-height: 1.5; }
.top-link > span:last-child { margin-left: 4px; }

@media (max-width: 960px) {
  .shell { width: calc(100% - 64px); }
  .hero-inner { min-height: 525px; }
  .hero-copy { width: 59%; }
  .orbit-art { right: -55px; }
  .orbit-plane { inset-block: 28% 29%; }
}

@media (max-width: 700px) {
  .shell { width: calc(100% - 36px); }
  .header-inner { grid-template-columns: 1fr auto; gap: 10px 18px; padding-block: 10px; }
  .brand { font-size: 18px; }
  .brand img { width: 33px; height: 33px; }
  .main-nav { grid-row: 2; grid-column: 1 / -1; gap: 25px; padding: 1px 3px 3px; }
  .language { min-height: 36px; min-width: 66px; }
  .hero {
    background:
      radial-gradient(ellipse at 50% 72%, #1b2858, #10172f 38%, transparent 71%),
      var(--background);
  }
  .hero-inner { display: flex; flex-direction: column; min-height: auto; padding-block: 42px 0; }
  .hero-copy { width: 100%; }
  h1 { font-size: clamp(36px, 9.4vw, 60px); }
  .hero-kicker { margin-bottom: 15px; }
  .hero-description { margin: 16px 0 22px; }
  .orbit-art { position: relative; top: auto; right: auto; width: 100%; height: clamp(218px, 72vw, 350px); margin-top: -5px; transform: none; }
  .orbit-plane { inset: 24% 4% 25%; }
  .hero-mark { width: min(49%, 230px); }
  .products { padding-block: 47px 56px; }
  .section-intro { display: block; margin-bottom: 22px; }
  .section-intro > p { margin: 11px 0 0; }
  .product-grid { grid-template-columns: 1fr; gap: 16px; }
  .product-art { height: 215px; }
  .writing-content { font-size: clamp(11px, 3vw, 15px); }
  .product-info { padding: 19px; }
  .about { padding-bottom: 55px; }
  .about-panel { grid-template-columns: 1fr; gap: 8px; padding: 16px 22px 27px; }
  .about-art { min-height: 119px; justify-items: start; }
  .about-art img { width: 116px; height: 116px; }
  .footer-inner { gap: 12px; }
  .footer-company { order: 1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}