:root {
  --midnight: #101d35;
  --midnight-2: #182943;
  --aqua: #3aa6a0;
  --aqua-pale: #dcefeb;
  --peach: #f0a184;
  --peach-pale: #f8dfd4;
  --porcelain: #f7f6f1;
  --white: #fffefa;
  --ink: #182237;
  --muted: #657082;
  --line: rgba(24, 34, 55, .17);
  --radius: 28px;
  --shell: min(1380px, calc(100% - 72px));
  --serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--porcelain);
  font-family: var(--sans);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
h1, h2, h3, p, figure { margin-top: 0; }
section { scroll-margin-top: 96px; }
.shell { width: var(--shell); margin-inline: auto; }
.section { padding: 124px 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--white);
  background: rgba(16, 29, 53, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px);
}
.header-inner {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 0 0 auto;
}
.brand-lockup img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--white);
}
.brand-lockup span { display: grid; line-height: 1.18; }
.brand-lockup b { font-size: 19px; letter-spacing: .12em; }
.brand-lockup small { margin-top: 5px; color: #a9c6cf; font-size: 9px; letter-spacing: .2em; }
.primary-nav { display: flex; align-items: stretch; gap: 4px; }
.primary-nav a {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: 0 14px;
  color: #c8d2df;
  font-size: 13px;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 17px;
  left: 14px;
  height: 2px;
  background: var(--peach);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a.is-active { color: var(--white); background: rgba(255, 255, 255, .04); }
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a.is-active::after { transform: scaleX(1); }
.primary-nav a:focus-visible,
.menu-toggle:focus-visible,
summary:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; }
.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  color: var(--white);
  background: transparent;
}
.menu-toggle > span:not(.sr-only) { display: block; width: 20px; height: 1px; margin: 5px auto; background: currentColor; }

.hero { overflow: hidden; background: var(--porcelain); }
.hero-grid {
  position: relative;
  min-height: 790px;
  display: grid;
  grid-template-columns: 1fr minmax(440px, 1.65fr) 1fr;
  align-items: center;
  gap: 34px;
  padding: 86px 0 72px;
}
.hero-core { position: relative; z-index: 3; text-align: center; }
.eyebrow {
  margin-bottom: 18px;
  color: #97604b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow.aqua { color: #267f7b; }
.eyebrow.peach { color: #ffb497; }
.hero h1 {
  max-width: 760px;
  margin: 0 auto 26px;
  font-family: var(--serif);
  font-size: clamp(54px, 5.7vw, 92px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.055em;
}
.hero-tagline {
  max-width: 620px;
  margin: 0 auto 18px;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.45;
}
.hero-intro { max-width: 650px; margin: 0 auto; color: var(--muted); font-size: 15px; }
.orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: -1;
  width: min(39vw, 570px);
  aspect-ratio: 1;
  border: 1px solid rgba(58, 166, 160, .34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.orbit::before { inset: 11%; }
.orbit::after { inset: 27%; background: rgba(255, 255, 255, .55); }
.orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--peach); }
.orbit i:nth-child(1) { top: 7%; left: 40%; }
.orbit i:nth-child(2) { right: 11%; bottom: 23%; background: var(--aqua); }
.orbit i:nth-child(3) { bottom: 7%; left: 30%; background: var(--midnight); }
.hero-window { position: relative; z-index: 4; margin: 0; }
.hero-window img { width: 100%; height: 100%; object-fit: cover; }
.hero-window figcaption,
.topic-visual figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.hero-window-left { align-self: start; margin-top: 28px; }
.hero-window-left img { aspect-ratio: 1; border-radius: 50% 50% 10px 50%; filter: saturate(.72); }
.hero-window-right { align-self: end; margin-bottom: 8px; }
.hero-window-right img { aspect-ratio: 4 / 5; border-radius: 10px 50% 50% 50%; filter: saturate(.72); }
.hero-coordinate { position: absolute; z-index: 5; display: grid; gap: 7px; color: #7d8795; font: 700 9px/1.2 var(--sans); letter-spacing: .14em; }
.hero-coordinate-left { left: 0; top: 74px; }
.hero-coordinate-right { right: 0; bottom: 78px; text-align: right; }
.signal-rail { color: var(--white); background: var(--midnight); border-top: 1px solid rgba(255, 255, 255, .1); }
.signal-track { min-height: 62px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; }
.signal-track span { padding: 0 20px; color: #b8c5d5; font-size: 11px; letter-spacing: .12em; text-align: center; border-right: 1px solid rgba(255, 255, 255, .13); }
.signal-track span:first-child { padding-left: 0; }
.signal-track span:last-child { padding-right: 0; border-right: 0; }

.section-code { display: block; margin-bottom: 22px; color: #8e95a0; font: 800 11px/1.2 var(--sans); letter-spacing: .18em; }
.section-code.light { color: #92a0b4; }
.positioning { background: var(--aqua-pale); }
.position-grid { display: grid; grid-template-columns: 150px minmax(340px, .92fr) minmax(360px, 1fr); gap: 52px; align-items: start; }
.position-grid h2,
.section-head h2,
.interest-intro h2,
.topic-copy h2,
.trust-head h2,
.access h2,
.faq h2,
.profile h2 {
  margin-bottom: 0;
  font-family: var(--serif);
  font-size: clamp(42px, 4.6vw, 68px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.04em;
}
.position-copy { padding-top: 44px; border-top: 1px solid rgba(24, 34, 55, .25); }
.position-copy p { color: #42586a; }
.position-copy p:last-child { margin-bottom: 0; }

.columns { background: var(--white); }
.section-head { display: grid; grid-template-columns: 150px minmax(380px, 1fr) minmax(300px, .82fr); gap: 52px; align-items: start; margin-bottom: 70px; }
.section-head > p { padding-top: 44px; color: var(--muted); border-top: 1px solid var(--line); }
.section-head.compact { margin-bottom: 54px; }
.column-ledger { border-top: 1px solid var(--line); }
.column-ledger article {
  display: grid;
  grid-template-columns: 150px minmax(220px, .75fr) minmax(300px, 1.25fr);
  gap: 52px;
  align-items: center;
  min-height: 174px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}
.column-ledger span,
.topic-list span { color: var(--aqua); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.column-ledger h3 { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 600; }
.column-ledger p { margin: 0; color: var(--muted); }

.interest { color: var(--white); background: var(--midnight); overflow: hidden; }
.interest-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(460px, 1.35fr) minmax(280px, .75fr); gap: 54px; align-items: center; }
.interest-intro p:last-child { color: #b7c4d2; }
.interest-intro h2 { margin-bottom: 26px; }
.topic-orbit { position: relative; width: min(100%, 580px); aspect-ratio: 1; margin: 0 auto; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; }
.topic-orbit::before,
.topic-orbit::after { content: ""; position: absolute; inset: 17%; border: 1px solid rgba(58, 166, 160, .35); border-radius: 50%; }
.topic-orbit::after { inset: 34%; border-color: rgba(240, 161, 132, .48); }
.topic-center,
.topic-node { position: absolute; z-index: 2; display: grid; place-items: center; text-align: center; border-radius: 50%; }
.topic-center { inset: 50% auto auto 50%; width: 128px; aspect-ratio: 1; color: var(--midnight); background: var(--peach); transform: translate(-50%, -50%); }
.topic-center b { align-self: end; font-family: var(--serif); font-size: 32px; }
.topic-center small { align-self: start; font-size: 10px; letter-spacing: .12em; }
.topic-node { width: 92px; aspect-ratio: 1; padding: 10px; color: #dce7ef; background: var(--midnight-2); border: 1px solid rgba(255, 255, 255, .24); font-size: 12px; }
.topic-node.n1 { top: 1%; left: 42%; }
.topic-node.n2 { top: 20%; right: 3%; }
.topic-node.n3 { right: 9%; bottom: 13%; }
.topic-node.n4 { bottom: 1%; left: 34%; }
.topic-node.n5 { bottom: 17%; left: 3%; }
.topic-node.n6 { top: 18%; left: 4%; }
.interest-notes { display: grid; gap: 24px; }
.interest-notes article { padding: 0 0 24px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.interest-notes b { color: var(--peach); font-family: var(--serif); font-size: 22px; font-weight: 600; }
.interest-notes p { margin: 8px 0 0; color: #aebdcb; font-size: 14px; }

.city-topics { background: var(--peach-pale); }
.topic-layout { display: grid; grid-template-columns: minmax(390px, .8fr) minmax(500px, 1.2fr); gap: 7vw; align-items: start; }
.topic-visual { position: sticky; top: 120px; margin-bottom: 0; }
.topic-visual img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 48% 48% 18px 18px; filter: saturate(.78); }
.topic-copy { padding-top: 24px; }
.topic-copy h2 { max-width: 760px; margin-bottom: 46px; }
.topic-copy > p:not(.eyebrow) { max-width: 720px; color: #665f62; }
.topic-list { margin-top: 48px; border-top: 1px solid rgba(24, 34, 55, .18); }
.topic-list article { display: grid; grid-template-columns: 110px 230px 1fr; gap: 24px; align-items: start; padding: 28px 0; border-bottom: 1px solid rgba(24, 34, 55, .18); }
.topic-list h3 { margin: 0; font-family: var(--serif); font-size: 25px; font-weight: 600; }
.topic-list p { margin: 0; color: #6d6467; font-size: 14px; }

.classroom { background: var(--white); }
.handbook-rows { border-top: 1px solid var(--line); }
.handbook-rows article { display: grid; grid-template-columns: 150px minmax(320px, .85fr) minmax(360px, 1.15fr); gap: 52px; align-items: start; padding: 34px 0; border-bottom: 1px solid var(--line); }
.handbook-no { width: 48px; height: 48px; display: grid; place-items: center; color: var(--white); background: var(--aqua); border-radius: 50%; font-size: 12px; }
.handbook-rows h3 { margin: 5px 0 0; font-family: var(--serif); font-size: 28px; font-weight: 600; }
.handbook-rows p { margin: 4px 0 0; color: var(--muted); }

.trust { color: var(--white); background: var(--midnight); }
.trust-grid { display: grid; grid-template-columns: minmax(290px, .75fr) minmax(620px, 1.5fr); gap: 7vw; }
.trust-head { position: sticky; top: 120px; align-self: start; }
.trust-head h2 { margin-bottom: 24px; }
.trust-head > p:last-child { color: #afbdca; }
.trust-panels { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255, 255, 255, .16); border-left: 1px solid rgba(255, 255, 255, .16); }
.trust-panels article { min-height: 290px; padding: 34px; border-right: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.trust-panels span { color: var(--aqua); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.trust-panels h3 { margin: 54px 0 16px; font-family: var(--serif); font-size: 27px; font-weight: 600; }
.trust-panels p { margin: 0; color: #adbac8; font-size: 14px; }
.safety-note { grid-column: 2; padding: 30px 34px; color: var(--midnight); background: var(--peach); }
.safety-note b { font-family: var(--serif); font-size: 24px; }
.safety-note p { margin: 8px 0 0; }

.access { background: var(--aqua-pale); }
.access-grid { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(600px, 1.4fr); gap: 7vw; }
.access header > p:last-child { max-width: 560px; color: #4f6674; }
.access h2 { margin-bottom: 24px; }
.access-ledger { border-top: 1px solid rgba(24, 34, 55, .22); }
.access-ledger article { display: grid; grid-template-columns: 110px 1fr; gap: 34px; padding: 31px 0; border-bottom: 1px solid rgba(24, 34, 55, .22); }
.access-ledger > article > span { color: var(--aqua); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.access-ledger h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.access-ledger p { margin: 0; color: #526772; }

.faq { background: var(--porcelain); }
.faq-grid { display: grid; grid-template-columns: minmax(320px, .75fr) minmax(600px, 1.4fr); gap: 7vw; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 26px 54px 26px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 23px; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 6px; top: 24px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--midnight); border: 1px solid var(--line); border-radius: 50%; font-family: var(--sans); font-size: 18px; }
.faq-list details[open] summary::after { content: "−"; color: var(--white); background: var(--aqua); border-color: var(--aqua); }
.faq-list details p { max-width: 760px; padding: 0 60px 28px 0; color: var(--muted); }

.profile { color: var(--white); background: var(--midnight-2); }
.profile-grid { display: grid; grid-template-columns: .72fr 1.12fr 1fr; gap: 5vw; }
.profile-copy p { color: #b5c1ce; }
.profile-ledger { margin: 0; border-top: 1px solid rgba(255, 255, 255, .17); }
.profile-ledger div { display: grid; grid-template-columns: 120px 1fr; gap: 22px; padding: 21px 0; border-bottom: 1px solid rgba(255, 255, 255, .17); }
.profile-ledger dt { color: #91a4b6; font-size: 12px; }
.profile-ledger dd { margin: 0; color: #edf3f4; }

.site-footer { padding: 44px 0; color: #aebbc9; background: #0b172b; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-grid { display: grid; grid-template-columns: .72fr 1.2fr .8fr; gap: 5vw; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; background: var(--white); }
.footer-brand div { display: grid; }
.footer-brand b { color: var(--white); letter-spacing: .12em; }
.footer-brand small { margin-top: 4px; color: #7f93a8; font-size: 10px; }
.site-footer p { margin: 0; font-size: 12px; }
.footer-domain { text-align: right; color: var(--white); font-weight: 700; letter-spacing: .14em; }
.footer-domain span { color: #8193a7; font-size: 10px; font-weight: 400; letter-spacing: 0; }

@media (max-width: 1180px) {
  :root { --shell: min(100% - 48px, 1100px); }
  .menu-toggle { display: block; }
  .primary-nav {
    position: fixed;
    inset: 84px 0 auto 0;
    max-height: calc(100vh - 84px);
    display: grid;
    padding: 18px 24px 30px;
    overflow-y: auto;
    background: var(--midnight);
    border-top: 1px solid rgba(255, 255, 255, .12);
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s ease;
  }
  .primary-nav.is-open { transform: translateY(0); visibility: visible; }
  .primary-nav a { min-height: 54px; justify-items: start; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .primary-nav a::after { right: auto; bottom: 8px; width: 38px; }
  .hero-grid { grid-template-columns: .7fr 1.5fr .7fr; min-height: 720px; }
  .hero h1 { font-size: clamp(50px, 7vw, 76px); }
  .position-grid,
  .section-head { grid-template-columns: 100px 1fr 1fr; gap: 34px; }
  .column-ledger article,
  .handbook-rows article { grid-template-columns: 100px .8fr 1.2fr; gap: 34px; }
  .interest-grid { grid-template-columns: 1fr 1.35fr; }
  .interest-notes { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .topic-layout { gap: 5vw; }
  .topic-list article { grid-template-columns: 90px 190px 1fr; }
  .trust-grid,
  .access-grid,
  .faq-grid { gap: 5vw; }
  .profile-grid { grid-template-columns: .8fr 1.2fr; }
  .profile-ledger { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  :root { --shell: min(100% - 34px, 760px); --radius: 22px; }
  .section { padding: 90px 0; }
  .hero-grid { min-height: auto; grid-template-columns: 1fr 1fr; gap: 24px; padding: 60px 0; }
  .hero-core { grid-column: 1 / -1; grid-row: 1; padding: 26px 0 40px; }
  .hero-window-left { grid-column: 1; grid-row: 2; margin-top: 0; }
  .hero-window-right { grid-column: 2; grid-row: 2; margin-bottom: 0; }
  .hero-window figcaption { display: none; }
  .hero h1 { font-size: clamp(46px, 10vw, 66px); }
  .orbit { width: 430px; }
  .hero-coordinate { display: none; }
  .signal-track { grid-template-columns: repeat(3, 1fr); padding: 14px 0; }
  .signal-track span { min-height: 36px; display: grid; place-items: center; }
  .signal-track span:nth-child(3) { border-right: 0; }
  .position-grid,
  .section-head,
  .interest-grid,
  .topic-layout,
  .trust-grid,
  .access-grid,
  .faq-grid,
  .profile-grid { grid-template-columns: 1fr; gap: 30px; }
  .position-grid .section-code,
  .section-head > .section-code { margin-bottom: -14px; }
  .position-copy,
  .section-head > p { padding-top: 25px; }
  .section-head { margin-bottom: 46px; }
  .column-ledger article,
  .handbook-rows article { grid-template-columns: 70px 1fr; gap: 20px; }
  .column-ledger p,
  .handbook-rows p { grid-column: 2; }
  .topic-orbit { width: min(100%, 520px); }
  .interest-notes { grid-column: auto; grid-template-columns: 1fr; }
  .topic-visual { position: relative; top: auto; max-width: 560px; }
  .topic-list article { grid-template-columns: 90px 1fr; }
  .topic-list p { grid-column: 2; }
  .trust-head { position: static; }
  .safety-note { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > p:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 28px); }
  .header-inner { min-height: 72px; }
  .brand-lockup img { width: 42px; height: 42px; }
  .brand-lockup b { font-size: 17px; }
  .primary-nav { inset: 72px 0 auto 0; max-height: calc(100vh - 72px); }
  .hero-grid { gap: 12px; padding: 42px 0 50px; }
  .hero-core { padding-bottom: 28px; }
  .hero h1 { font-size: clamp(41px, 12vw, 58px); }
  .hero-tagline { font-size: 20px; }
  .hero-intro { font-size: 14px; }
  .orbit { width: 350px; }
  .hero-window-left img,
  .hero-window-right img { min-height: 235px; }
  .section { padding: 72px 0; }
  .position-grid h2,
  .section-head h2,
  .interest-intro h2,
  .topic-copy h2,
  .trust-head h2,
  .access h2,
  .faq h2,
  .profile h2 { font-size: clamp(36px, 11vw, 50px); }
  .column-ledger article,
  .handbook-rows article { grid-template-columns: 48px 1fr; padding: 25px 0; }
  .column-ledger h3 { font-size: 27px; }
  .handbook-no { width: 40px; height: 40px; }
  .topic-orbit { transform: scale(.94); }
  .topic-node { width: 76px; font-size: 10px; }
  .topic-center { width: 104px; }
  .topic-list article { grid-template-columns: 72px 1fr; gap: 14px; }
  .trust-panels { grid-template-columns: 1fr; }
  .trust-panels article { min-height: 235px; padding: 28px; }
  .access-ledger article { grid-template-columns: 58px 1fr; gap: 18px; }
  .faq-list summary { font-size: 20px; }
  .profile-ledger div { grid-template-columns: 92px 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > p:nth-child(2) { grid-column: auto; grid-row: auto; }
  .footer-domain { text-align: left; }
}

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