:root {
  color-scheme: light;
  --paper: #ece9df;
  --paper-deep: #ded9cc;
  --ink: #1b241f;
  --muted: #667069;
  --sage: #dce7dd;
  --sage-deep: #b8cfc0;
  --forest: #183b33;
  --forest-2: #214c41;
  --mint: #2c665b;
  --gold: #d7b76f;
  --line: rgba(27, 36, 31, .14);
  --focus: #cc8c2e;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Times New Roman", serif;
  --sans: "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 0%, rgba(255, 255, 255, .7), transparent 27rem),
    var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.shell {
  width: min(100%, 1540px);
  min-height: 100svh;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 12px 15px;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  width: fit-content;
  text-decoration: none;
}
.wordmark-cn { font-family: var(--serif); font-size: 24px; letter-spacing: .06em; }
.wordmark-en { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.domain-note { color: var(--muted); font-size: 10px; letter-spacing: .12em; }

.gateways {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.wing {
  position: relative;
  isolation: isolate;
  min-height: 650px;
  overflow: hidden;
  border-radius: 30px;
  text-decoration: none;
}
.wing::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  content: "";
  pointer-events: none;
}
.wing--tools { color: #17352d; background: linear-gradient(135deg, #e7eee4 0%, #d8e5d9 54%, #c8d9cb 100%); }
.wing--learn { color: #f4f0e5; background: linear-gradient(145deg, var(--forest-2), var(--forest) 58%, #102c25); }
.wing-copy {
  position: relative;
  z-index: 4;
  width: min(88%, 570px);
  min-height: 650px;
  padding: clamp(30px, 4vw, 58px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.wing-label {
  margin: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.wing-label i {
  padding: 4px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
  opacity: .7;
}
.wing h1 {
  margin: auto 0 22px;
  font-family: var(--serif);
  font-size: clamp(50px, 5.4vw, 88px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.06em;
}
.wing--learn h1 { color: #f7f1e3; font-size: clamp(46px, 4.65vw, 76px); }
.wing-desc {
  max-width: 31em;
  margin: 0 0 30px;
  color: rgba(23, 53, 45, .7);
  font-size: 14px;
  line-height: 1.75;
}
.wing--learn .wing-desc { color: rgba(244, 240, 229, .65); }
.wing-action {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 0 21px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  transition: transform .22s ease, background .22s ease;
}
.wing--learn .wing-action { color: #17352d; background: var(--gold); box-shadow: none; }
.wing-action span { font-size: 17px; transition: transform .22s ease; }
.wing:hover .wing-action { transform: translateY(-2px); background: #fff; }
.wing--learn:hover .wing-action { background: #e5c781; }
.wing:hover .wing-action span { transform: translate(2px, -2px); }

.tool-art,
.study-art { position: absolute; inset: 0; pointer-events: none; }
.tool-art { z-index: 1; }
.art-ring {
  position: absolute;
  top: -15%;
  right: -8%;
  width: 68%;
  aspect-ratio: 1;
  border: 1px solid rgba(23, 53, 45, .15);
  border-radius: 50%;
}
.art-ring::before,
.art-ring::after {
  position: absolute;
  border: 1px solid rgba(23, 53, 45, .12);
  border-radius: inherit;
  content: "";
}
.art-ring::before { inset: 14%; }
.art-ring::after { inset: 31%; }
.receipt {
  position: absolute;
  top: 12%;
  right: 7%;
  width: clamp(178px, 18vw, 244px);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1px solid rgba(23,53,45,.15);
  border-radius: 5px 5px 18px 18px;
  background: rgba(255, 253, 246, .83);
  box-shadow: 0 22px 60px rgba(43, 75, 60, .14);
  transform: rotate(3.5deg);
}
.receipt::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 10px;
  background: linear-gradient(135deg, transparent 5px, rgba(255,253,246,.83) 0) 0 0/10px 10px;
  content: "";
}
.receipt-label { color: #527166; font-size: 10px; letter-spacing: .08em; }
.receipt strong { font-family: var(--serif); font-size: 30px; font-weight: 500; }
.receipt-rule { height: 1px; margin: 4px 0; background: rgba(23,53,45,.15); }
.receipt-row { display: flex; justify-content: space-between; gap: 16px; color: #577267; font-size: 11px; }
.receipt-row b { color: #17352d; font-weight: 650; }
.aa-card {
  position: absolute;
  right: 31%;
  bottom: 14%;
  width: clamp(150px, 15vw, 206px);
  aspect-ratio: 1.18;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 22px;
  color: #f4eee3;
  background: #316f63;
  box-shadow: 0 24px 60px rgba(26, 68, 58, .22);
  transform: rotate(-7deg);
}
.aa-card span { font-family: var(--serif); font-size: 44px; line-height: 1; }
.aa-card small { max-width: 12em; color: rgba(255,255,255,.7); font-size: 10px; line-height: 1.5; }
.cost-card {
  position: absolute;
  right: 9%;
  bottom: 10%;
  width: clamp(138px, 13vw, 185px);
  padding: 18px;
  border: 1px solid rgba(23,53,45,.14);
  border-radius: 18px;
  background: rgba(255, 253, 246, .68);
  backdrop-filter: blur(8px);
  transform: rotate(5deg);
}
.cost-card small { display: block; margin-bottom: 9px; color: #60786d; font-size: 9px; }
.cost-card b { font-family: var(--serif); font-size: 25px; font-weight: 500; }
.test-dot { position: absolute; border-radius: 50%; background: #b96a57; }
.test-dot--one { top: 49%; right: 14%; width: 12px; height: 12px; }
.test-dot--two { top: 54%; right: 11%; width: 6px; height: 6px; background: #d9b45c; }

.study-art { z-index: 1; color: rgba(231, 219, 185, .7); }
.study-art::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, transparent, #000 52%);
  content: "";
}
.study-tab {
  position: absolute;
  top: 7%;
  right: 7%;
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: .16em;
  opacity: .5;
}
.curve {
  position: absolute;
  top: 16%;
  right: 4%;
  width: min(48vw, 600px);
  height: auto;
  opacity: .82;
}
.note {
  position: absolute;
  color: #15372f;
  background: #e9dfc5;
  box-shadow: 0 18px 45px rgba(0,0,0,.17);
}
.note span { display: block; margin-bottom: 8px; font-family: var(--serif); font-size: 10px; opacity: .55; }
.note--one {
  top: 18%;
  right: 40%;
  padding: 16px 18px;
  border-radius: 2px 14px 14px 14px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  transform: rotate(-4deg);
}
.note--two {
  right: 8%;
  bottom: 26%;
  padding: 16px 18px;
  border-radius: 14px 2px 14px 14px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  background: #c8d7c8;
  transform: rotate(3deg);
}
.note--three {
  right: 42%;
  bottom: 12%;
  padding: 15px 18px;
  border: 1px solid rgba(231,219,185,.45);
  border-radius: 12px;
  color: #e7dbb9;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  line-height: 1.7;
  transform: rotate(-2deg);
}
.note--three b { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.study-index {
  position: absolute;
  right: 8%;
  bottom: 8%;
  font-size: 9px;
  letter-spacing: .12em;
  opacity: .45;
}

.footer {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  padding: 18px 12px 4px;
  color: var(--muted);
  font-size: 10px;
}
.footer p { margin: 0; }

@media (max-width: 920px) {
  .gateways { grid-template-columns: 1fr; }
  .wing { min-height: 660px; }
  .wing-copy { min-height: 660px; }
  .wing h1 { font-size: clamp(54px, 10vw, 84px); }
  .receipt { width: 220px; }
  .curve { width: min(74vw, 620px); }
}

@media (max-width: 600px) {
  .shell { padding: 10px; }
  .topbar { min-height: 62px; padding: 2px 4px 11px; }
  .wordmark-cn { font-size: 21px; }
  .gateways { gap: 9px; }
  .wing { min-height: 610px; border-radius: 24px; }
  .wing-copy { min-height: 610px; padding: 28px 24px 26px; }
  .wing h1 { font-size: clamp(42px, 13vw, 58px); }
  .wing--learn h1 { font-size: clamp(38px, 11.5vw, 52px); }
  .wing-desc { font-size: 13px; max-width: 27em; }
  .wing-action { min-height: 45px; }
  .receipt, .aa-card, .cost-card, .test-dot, .curve, .note, .study-tab, .study-index { display: none; }
  .art-ring { width: 112%; top: 4%; right: -44%; }
  .footer { display: block; padding: 14px 4px 4px; line-height: 1.6; }
  .footer p + p { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}