:root {
  color-scheme: dark;
  --bg: #1e2129;
  --bg-deep: #171a21;
  --surface: rgba(18, 21, 31, 0.72);
  --surface-strong: rgba(22, 25, 35, 0.92);
  --text: #f4f6fb;
  --muted: #9ba5b8;
  --accent: #a47cff;
  --accent-pink: #ff63ad;
  --line: rgba(92, 101, 124, 0.58);
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.75;
  background:
    radial-gradient(circle at 82% 5%, rgba(122, 78, 228, 0.18), transparent 26rem),
    radial-gradient(circle at 12% 18%, rgba(255, 99, 173, 0.08), transparent 24rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

a { color: inherit; }
.site-head, main, .site-foot { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }

.site-head {
  min-height: 64px;
  margin-top: 22px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(72, 78, 96, 0.76);
  border-radius: 18px;
  background: rgba(24, 27, 36, 0.54);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 42px rgba(6, 8, 14, 0.18);
}

.brand { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 800; letter-spacing: .06em; text-decoration: none; }
.site-head nav { display: flex; align-items: center; gap: 8px; }
.site-head nav a { padding: 8px 12px; border-radius: 10px; color: #b3bbca; font-size: .92rem; text-decoration: none; transition: color 160ms ease, background 160ms ease; }
.site-head nav a:hover { color: #fff; background: rgba(255,255,255,.06); }

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(680px, calc(100svh - 110px));
  padding: clamp(96px, 14vw, 168px) clamp(0px, 4vw, 54px) 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid rgba(88, 96, 116, .32);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(720px, 70vw);
  aspect-ratio: 1;
  right: -12%;
  top: 3%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 79, 255, .2), rgba(132, 79, 255, .05) 38%, transparent 70%);
  filter: blur(4px);
}

.hero::after {
  content: "A  S  D  F       J  K  L";
  position: absolute;
  z-index: -1;
  right: clamp(-160px, -5vw, -40px);
  bottom: 15%;
  width: min(600px, 56vw);
  padding: 56px 28px;
  border: 1px solid rgba(96, 104, 128, .46);
  border-radius: 26px;
  color: rgba(190, 198, 216, .27);
  font: 700 clamp(.75rem, 1.55vw, 1.18rem)/1 var(--font);
  word-spacing: 1.4em;
  text-align: center;
  letter-spacing: .18em;
  background:
    repeating-linear-gradient(90deg, transparent 0 12%, rgba(120,128,150,.18) 12.2% 12.4%, transparent 12.6% 14.1%),
    rgba(15, 18, 27, .54);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 25px 70px rgba(3,5,10,.3);
  transform: perspective(900px) rotateY(-12deg) rotateX(4deg);
}

.eyebrow { margin: 0; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .2em; }
h1 { max-width: 800px; margin: 16px 0 24px; font-size: clamp(2.8rem, 6.7vw, 5.9rem); line-height: 1.05; letter-spacing: -.045em; text-wrap: balance; }
.lead { width: 100%; max-width: 680px; min-width: 0; margin: 0; color: #aab3c3; font-size: clamp(1.05rem, 1.8vw, 1.28rem); line-height: 1.9; }
.cta {
  width: fit-content;
  margin-top: 34px;
  padding: 13px 23px;
  border: 1px solid rgba(182, 152, 255, .46);
  border-radius: 13px;
  color: #fff;
  font-weight: 750;
  text-decoration: none;
  background: linear-gradient(135deg, #8258e8, #6841cc);
  box-shadow: 0 12px 30px rgba(83, 46, 170, .28);
  transition: transform 170ms ease, box-shadow 170ms ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(93, 52, 189, .38); }

.content { padding: 104px clamp(0px, 4vw, 54px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(52px, 9vw, 130px); }
.content > div:first-child { position: sticky; top: 32px; align-self: start; }
h2 { margin: 0 0 20px; font-size: clamp(1.75rem, 3vw, 2.55rem); line-height: 1.25; letter-spacing: -.02em; }
.content p, .content li, .guide p, .guide li { color: var(--muted); }
.content ul { margin: 0; padding-left: 1.25rem; }
.content li + li { margin-top: 14px; }

.guide { margin-inline: clamp(0px, 4vw, 54px); padding: 0 0 96px; border-top: 1px solid rgba(88, 96, 116, .36); }
.guide > section { padding-top: 72px; }
.guide h3 { margin: 0 0 8px; color: #eef1f7; font-size: 1.08rem; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 34px 0 0; padding: 1px; list-style-position: inside; background: rgba(90, 98, 120, .3); }
.steps li { min-height: 150px; padding: 28px; background: #1a1d25; }
.steps strong { color: #edf0f7; }
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.faq-list div { padding: 26px 0 18px; border-top: 1px solid rgba(88, 96, 116, .36); }
.faq-list p { margin: 0; }

.related { margin: 0 clamp(0px, 4vw, 54px); padding: 72px 0 90px; border-top: 1px solid rgba(88, 96, 116, .36); }
.related-links { display: flex; flex-wrap: wrap; gap: 10px; }
.related-links a { padding: 9px 14px; border: 1px solid rgba(92,101,124,.54); border-radius: 11px; color: #b8c0cf; text-decoration: none; background: rgba(255,255,255,.02); transition: border-color 160ms ease, color 160ms ease; }
.related-links a:hover { color: #fff; border-color: rgba(164,124,255,.72); }

.site-foot { padding: 30px 18px 44px; border-top: 1px solid rgba(88, 96, 116, .36); color: #7f899c; font-size: .9rem; }
.site-foot a { color: #aab2c1; }

@media (max-width: 860px) {
  .hero { min-height: 620px; padding-top: 100px; justify-content: flex-start; }
  .hero::after { right: -180px; bottom: 8%; width: 540px; opacity: .62; }
  .content { grid-template-columns: 1fr; gap: 24px; padding-block: 76px; }
  .content > div:first-child { position: static; }
}

@media (max-width: 680px) {
  .site-head, main, .site-foot { width: min(100% - 24px, 1240px); }
  .site-head { margin-top: 12px; padding-inline: 14px; }
  .site-head nav { display: none; }
  .hero { min-height: 650px; padding: 86px 8px 250px; }
  .hero::after { width: 430px; right: -154px; bottom: 42px; padding-block: 42px; }
  h1 { max-width: 100%; font-size: clamp(2.45rem, 11.8vw, 3.35rem); overflow-wrap: anywhere; }
  .lead { max-width: 100%; font-size: 1rem; overflow-wrap: anywhere; word-break: break-all; }
  .content { padding-inline: 8px; }
  .guide, .related { margin-inline: 8px; }
  .steps, .faq-list { grid-template-columns: 1fr; }
  .steps li { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta, .site-head nav a, .related-links a { transition: none; }
}