@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Medium.ttf') format('truetype');font-weight:500 600;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Bold.ttf') format('truetype');font-weight:700 900;font-display:swap}
:root{--font-inter:Inter;--guide-bg:#fff;--guide-ink:#1a1a20;--guide-muted:#676b76;--guide-fill:var(--cc-surface-interactive-bg-light);--guide-hover:var(--cc-surface-interactive-hover-light);--guide-action:var(--cc-action-primary-bg-light);--guide-action-hover:var(--cc-action-primary-hover-light);--guide-on-action:#FAFAFF;--guide-annotation:#FAFAFF;color-scheme:light}
:root.dark{--guide-bg:#1F1F24;--guide-ink:#f4f4f7;--guide-muted:#c5c7d0;--guide-fill:rgba(250,250,255,.08);--guide-hover:rgba(250,250,255,.16);--guide-action:#FAFAFF;--guide-action-hover:#ededf2;--guide-on-action:#292933;color-scheme:dark}
*{box-sizing:border-box}html{hyphens:none;scroll-padding-top:100px}body{margin:0;background:var(--guide-bg);color:var(--guide-ink);font-family:var(--ds-font-sans);font-size:16px;line-height:1.65}a{color:inherit;text-underline-offset:4px}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button,.primary{border:0;border-radius:var(--cc-radius-control-compact);padding:10px 16px;min-height:44px;background:var(--guide-fill);color:var(--guide-ink);text-decoration:none;transition:background-color .2s cubic-bezier(.34,.8,.34,1)}button:hover{background:var(--guide-hover)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ds-focus-ring);outline-offset:4px}.skip{position:fixed;left:20px;top:-100px;z-index:10;background:var(--guide-bg);padding:12px}.skip:focus{top:10px}.topbar{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 32px;border-bottom:1px solid var(--guide-fill)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:20px;font-weight:600;line-height:1.3}.brand strong{font-weight:400;color:var(--guide-muted)}.brand small{display:block;font-size:12px;font-weight:400;margin-top:4px;color:var(--guide-muted)}.header-actions{display:flex;align-items:center;gap:24px;font-size:13px}.header-actions>a{text-decoration:none}.layout{display:grid;grid-template-columns:300px minmax(0,1fr);max-width:1460px;margin:auto}aside{padding:28px 20px 48px;background:var(--guide-fill);min-height:calc(100vh - 88px)}aside nav section+section{margin-top:24px}aside h2{font-size:12px;letter-spacing:.04em;color:var(--guide-muted);margin:0 12px 6px}aside a{display:block;font-size:13px;line-height:1.5;text-decoration:none;padding:10px 12px;border-radius:var(--cc-radius-nav-item)}aside a:hover{background:var(--guide-hover)}aside a[aria-current]{background:var(--guide-bg);font-weight:600}summary{cursor:pointer;font-weight:500}main{min-width:0;width:100%;max-width:990px;padding:32px 56px 56px;margin:auto}.search{margin-bottom:40px}.search label{display:block;font-size:13px;font-weight:500;margin-bottom:8px}.search-field{display:flex;gap:8px}.search input{min-width:0;flex:1}.search-field button{background:var(--guide-action);color:var(--guide-on-action)}#search-status:empty{display:none}#search-status{font-size:14px;color:var(--guide-muted)}#search-results{padding:8px;background:var(--guide-fill);border-radius:var(--cc-radius-surface);max-height:420px;overflow:auto}#search-results a{display:block;padding:12px;border-radius:var(--cc-radius-nav-item);text-decoration:none}#search-results a:hover{background:var(--guide-hover)}#search-results span{display:block;color:var(--guide-muted);font-size:13px}h1{font-size:36px;line-height:1.22;letter-spacing:-.035em;margin:0 0 20px;font-weight:600}h2{font-size:21px;line-height:1.35;letter-spacing:-.015em;margin:32px 0 16px;font-weight:600}h3{font-size:17px;line-height:1.4;margin:0 0 6px;font-weight:600}p{margin:0 0 16px}.lead{font-size:18px;color:var(--guide-muted);line-height:1.7;max-width:65ch}.eyebrow{font-size:13px;color:var(--guide-muted);margin-bottom:12px}.onboarding{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px;background:var(--guide-fill);border-radius:var(--cc-radius-surface);margin:28px 0 32px}.onboarding h2{margin:0 0 8px}.onboarding p{font-size:14px;color:var(--guide-muted);margin:0}.primary{display:inline-flex;align-items:center;justify-content:center;background:var(--guide-action);color:var(--guide-on-action);white-space:nowrap}.primary:hover,.search-field button:hover{background:var(--guide-action-hover)}.groups{display:grid;grid-template-columns:1fr 1fr;gap:16px}.group{background:var(--guide-fill);padding:24px;border-radius:var(--cc-radius-surface)}.group h2{margin:0 0 12px;font-size:18px}.group ul,.related ul{list-style:none;padding:0;margin:0}.group li+li,.related li+li{margin-top:12px}.group a,.related a{font-size:14px;text-decoration:none}.group a:hover,.related a:hover{text-decoration:underline}.breadcrumbs{font-size:12px;color:var(--guide-muted);margin-bottom:20px}.breadcrumbs a{text-decoration:none}.steps{padding-left:28px}.steps>li{padding-left:10px;margin:0 0 28px}.steps>li::marker{font-weight:600;color:var(--guide-muted)}.steps p{margin:0}.note{padding:22px 24px;background:var(--guide-fill);border-radius:var(--cc-radius-surface);margin:28px 0}.note h2{margin:0 0 8px;font-size:17px}.note p{margin:0;font-size:15px}.platform-link{display:inline-block;margin:14px 0;font-size:14px}.related{margin-top:28px}.related h2{margin-top:0}figure{margin:32px 0}.screenshot{position:relative;overflow:hidden;border-radius:var(--cc-radius-control);background:var(--guide-fill)}.screenshot img{display:block;width:100%;height:auto}.annotation{position:absolute;border:2px solid var(--guide-annotation);border-radius:6px;pointer-events:none}.annotation.dim{box-shadow:0 0 0 2000px rgba(0,0,0,.35)}.marker{position:absolute;top:-13px;left:-13px;display:grid;place-items:center;width:26px;height:26px;background:var(--guide-annotation);color:#292933;border-radius:50%;font:600 14px Inter,system-ui,sans-serif}figcaption{font-size:13px;color:var(--guide-muted);margin-top:12px}figcaption ol{padding-left:22px}.image-link{font-size:12px;color:var(--guide-muted)}video{width:100%;border-radius:var(--cc-radius-surface)}footer{margin-top:64px;font-size:12px;color:var(--guide-muted)}
@media(min-width:1000px){summary{display:none}}
@media(max-width:1100px){main{padding:28px 32px}.layout{grid-template-columns:270px minmax(0,1fr)}.onboarding{align-items:flex-start;flex-direction:column}}
@media(max-width:999px){.layout{display:block}aside{min-height:0;padding:14px 24px}aside nav{padding-top:24px;columns:2}aside section{break-inside:avoid}main{padding:28px 24px 48px;max-width:850px}.topbar{padding:16px 24px}.header-actions{gap:10px}.header-actions>a{max-width:110px;line-height:1.4}}
@media(max-width:600px){h1{font-size:29px}.groups{grid-template-columns:1fr}.brand{font-size:16px}.brand img{width:30px;height:30px}.header-actions>a{display:none}.header-actions button{font-size:12px;padding:10px}.lead{font-size:16px}main{padding:24px 20px 48px}aside nav{columns:1}.search{margin-bottom:28px}.onboarding{padding:20px}.group{padding:20px}.marker{width:20px;height:20px;font-size:11px;top:-10px;left:-10px}.annotation{border-width:1px}.note{padding:20px}.steps{padding-left:22px}.steps>li{padding-left:4px}}
@media print{.topbar,aside,.search,.platform-link,.related,footer,.image-link{display:none}.layout{display:block}main{padding:0;max-width:none}body{background:white;color:black}.note{break-inside:avoid}figure{break-inside:avoid}}

/* Brand and theme control adapted from chinachild-site. */
.theme-toggle {
  position: relative;
  flex-shrink: 0;
  width: 61px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: #86b5df;
  transition: background-color 240ms ease;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle-thumb {
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 35px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
  transition: left 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle-sun,
.theme-toggle-night {
  position: absolute;
  z-index: 1;
  top: 4px;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.theme-toggle-sun {
  left: 6px;
  fill: #ffce5d;
  stroke: #ffce5d;
  stroke-width: 2.1;
  stroke-linecap: round;
  opacity: 1;
  transition: opacity 120ms ease;
}

.theme-toggle-night {
  right: 5px;
  fill: #202020;
  opacity: 0;
  transition: opacity 120ms ease;
}

html[data-theme="dark"] .theme-toggle {
  background: #4d4d4d;
}

html[data-theme="dark"] .theme-toggle-sun {
  opacity: 0;
}

html[data-theme="dark"] .theme-toggle-night {
  opacity: 1;
}

html[data-theme="dark"] .theme-toggle-thumb {
  left: 2px;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--guide-ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle-thumb {
    transition: none;
  }
}


.topbar{position:fixed;top:8px;left:0;width:100%;z-index:30;min-height:0;padding:0 16px;border:0;display:block}
.topbar-inner{height:56px;max-width:1400px;margin:auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:var(--cc-radius-control);background:rgb(255 255 255 / 80%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dark .topbar-inner{background:rgb(38 38 43 / 80%)}
.brand{gap:10px}.brand-mark{width:32px;height:32px;display:grid;place-items:center;overflow:hidden;border-radius:8px}.brand-mark img{width:32px;height:32px}.mark-dark,.dark .mark-light{display:none}.dark .mark-dark{display:block}
.wordmark{display:block;width:128px;height:21px;background:currentColor;mask:url('/brand/ChinaChild.svg') center/contain no-repeat;-webkit-mask:url('/brand/ChinaChild.svg') center/contain no-repeat}.brand-guide{font-size:17px;font-weight:400;color:var(--guide-muted)}
.theme-toggle{min-height:28px}.theme-toggle:hover{background:#86b5df}.header-actions{gap:20px}
.layout{margin:88px auto 24px;padding:0 16px;gap:16px;align-items:start;grid-template-columns:280px minmax(0,1fr)}
aside{border-radius:var(--ds-sidebar-radius-right);padding:24px 16px;min-height:0;position:sticky;top:88px;max-height:calc(100dvh - 112px);overflow:auto}
aside a{font-size:14px;padding:12px 16px;font-weight:500}aside h2{margin-left:16px}aside a:hover{background:var(--cc-nav-hover-bg-light)}.dark aside a:hover{background:var(--cc-nav-hover-bg-dark)}aside a[aria-current]{background:#1a1a1a;color:white}.dark aside a[aria-current]{background:#e8e8e8;color:#141414}
main{padding-top:16px}.search-field button{height:var(--ds-field-height);min-height:var(--ds-field-height)}
.article-header{padding:28px 32px;margin-bottom:32px;background:var(--guide-fill);border-radius:var(--cc-radius-surface)}.article-header .lead{margin-bottom:0}
.screenshot-stage{padding:clamp(18px,4vw,44px);background:#edc4d7 url('/screenshots/backdrop.jpg') center/cover;border-radius:var(--cc-radius-surface)}
summary{list-style:none;align-items:center;justify-content:space-between;gap:16px}summary::-webkit-details-marker{display:none}summary::marker{content:''}summary svg{flex-shrink:0;transition:transform .2s}details[open]>summary svg{transform:rotate(180deg)}
@media(max-width:1100px){.layout{grid-template-columns:260px minmax(0,1fr)}main{padding:16px 24px 48px}}
@media(max-width:999px){.layout{display:block}aside{position:static;max-height:none;border-radius:var(--cc-radius-surface);padding:16px 20px;margin-bottom:16px}summary{display:flex}main{padding:24px 8px 48px}}
@media(max-width:600px){.topbar{padding:0 12px}.topbar-inner{padding:0 12px}.layout{padding:0 12px}.wordmark{width:108px;height:18px}.brand{gap:8px}.brand-guide{font-size:15px}.header-actions button{padding:0}.article-header{padding:24px 20px}.screenshot-stage{padding:18px}.header-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){summary svg{transition:none}}
@media print{.layout{margin:0;padding:0}.screenshot-stage{padding:0;background:none}}

/* Minimal guide navigation: each adjacent interactive shape has a 2px gap. */
aside{background:transparent;border-radius:0}
#navigation>nav{display:flex;flex-direction:column;gap:2px;columns:auto}
.nav-group>summary{display:flex;padding:12px 16px;min-height:44px;border-radius:var(--cc-radius-nav-item);font-size:14px;font-weight:500;color:var(--guide-muted);transition:background-color .2s,color .2s}
.nav-group>summary:hover{background:var(--guide-fill);color:var(--guide-ink)}
.nav-group[open]>summary{color:var(--guide-ink)}
.nav-items{display:flex;flex-direction:column;gap:2px;margin:2px 0 10px 14px;padding-left:10px;border-left:1px solid var(--guide-fill)}
.nav-items>a{font-size:13px;font-weight:400;color:var(--guide-muted);transition:background-color .2s,color .2s}
.nav-items>a:hover,.dark .nav-items>a:hover,.nav-items>a[aria-current],.dark .nav-items>a[aria-current]{background:var(--guide-fill);color:var(--guide-ink)}
.nav-items>a[aria-current]{font-weight:500}
@media(max-width:999px){aside{padding:8px 0 16px}#navigation>summary{padding:12px 16px;border-radius:var(--cc-radius-nav-item)}#navigation>summary:hover{background:var(--guide-fill)}#navigation>nav{padding-top:12px}}