@charset "UTF-8";

/* Reading edition: generous type, strong contrast, explicit optional steps. */
:root {
  --blue: #2d57ce;
  --blue-dark: #2144ac;
  --ink: #17283f;
  --muted: #52647b;
  --line: #dce3ee;
  --bg: #f5f7fb;
  --green: #24765c;
  --sidebar: 292px;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body { font-size: 18px; line-height: 1.85; }
.brand { padding: 0 25px; font-size: 23px; gap: 12px; }
.brand-mark { width: 40px; height: 40px; font-size: 36px; }
.brand small { font-size: 11px; color: var(--muted); }
.sidebar-body { padding: 26px 15px; }
.nav-eyebrow { font-size: 13px; color: #5b6d85; letter-spacing: 1.5px; }
.overview-link { font-size: 16px; font-weight: 650; }
.nav-label { font-size: 12px; color: #596c85; padding: 27px 15px 10px; letter-spacing: 0; }
nav a { padding: 14px 12px; font-size: 15px; gap: 12px; }
nav a > span:nth-child(2) { min-width: 0; }
.nav-num { width: 30px; height: 30px; font-size: 12px; color: #536880; border-color: #cad5e5; }
nav small { font-size: 12px; color: #5d7088; line-height: 1.7; margin-top: 4px; }
nav i { display: none; }
.faq-link { font-size: 15px; color: #465d7a; }
.faq-link > span { width: 19px; height: 19px; font-size: 13px; line-height: 16px; border-color: #657a96; }
.sidebar-bottom { margin: auto 25px 25px; flex-shrink: 0; }
.completion-label, .completion-label strong { font-size: 13px; }
.completion-label { color: #4b607c; }
.completion-track { height: 7px; background: #e6ecf5; }
.sidebar-bottom p, .local-note { font-size: 12px; color: #5b6e87; }
.local-note { margin-top: 18px; }
.breadcrumb { font-size: 14px; color: #586b84; }
.breadcrumb strong { font-weight: 600; color: #253e60; }
.breadcrumb span { color: #8291a6; }
.guide-badge { font-size: 13px; color: #526783; }
.print-button { font-size: 13px; color: #435c7d; border: 1px solid #d6dfec; padding: 7px 11px; border-radius: 7px; }
.print-button svg { width: 17px; height: 17px; }
.read-track { height: 3px; }
main { max-width: 1280px; padding: 36px 40px 0; }
.hero { min-height: 420px; padding: 38px; grid-template-columns: 1.15fr 1fr; gap: 24px; border-color: #d7e1f3; background: linear-gradient(115deg,#edf2ff,#f1f5ff 60%,#e9f5f0); }
.eyebrow { font-size: 12px; color: #385b9f; letter-spacing: 1.1px; }
h1 { font-size: clamp(36px,3.25vw,48px); margin: 17px 0 18px; line-height: 1.4; }
.hero-copy > p { font-size: 17px; color: #405b80; line-height: 1.9; }
.hero-buttons { flex-wrap: wrap; }
.button { font-size: 15px; font-weight: 600; gap: 18px; }
.primary { padding: 11px 20px; }
.text-button { font-size: 14px; color: #3f5d91; gap: 8px; }
.hero-meta { flex-wrap: wrap; font-size: 12px; color: #52698b; gap: 17px; }
.hero-meta svg { width: 15px; height: 15px; }
.subscription-ticket { width: 280px; padding: 22px; }
.ticket-back { width: 265px; height: 235px; left: calc(50% - 132px); top: calc(50% - 117px); }
.ticket-top { font-size: 21px; }
.ticket-top small { font-size: 8px; color: #5b7090; }
.ticket-title { font-size: 25px; }
.ticket-title > span { font-size: 12px; color: #526987; letter-spacing: 0; }
.ticket-bottom { font-size: 11px; color: #4e6585; gap: 10px; }
.floating-note { font-size: 12px; right: -8px; padding: 11px 13px; }
.floating-note small { font-size: 11px; color: #526987; }
.roadmap { margin: 34px 0 25px; }
.section-kicker h2 { font-size: 20px; font-weight: 700; }
.section-kicker > span { font-size: 13px; color: #566a86; }
.roadmap-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.roadmap-grid a { padding: 21px 16px; }
.flow-icon { width: 37px; height: 37px; color: #355daa; background: #eaf0ff; }
.flow-icon svg { width: 20px; height: 20px; }
.flow-icon.green { color: var(--green); }
.roadmap-grid small { font-size: 11px; letter-spacing: .3px; color: #4f6587; }
.roadmap-grid strong { font-size: 16px; font-weight: 650; }
.roadmap-grid a > span:last-of-type { font-size: 12px; color: #566b86; }
.roadmap-grid b { display: none; }
.before-start { padding: 21px 23px; gap: 13px; border-color: #d1dff6; margin-bottom: 34px; }
.info-icon { width: 20px; height: 20px; font-size: 13px; color: #456aa6; border-color: #456aa6; margin-top: 5px; }
.before-start strong { font-size: 17px; color: #264977; font-weight: 650; }
.before-start p { font-size: 15px; color: #496183; margin-top: 5px; }
.before-start a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.before-tag { display: none; }
.chapter { margin-bottom: 30px; border-color: var(--line); }
.chapter-heading { padding: 31px 34px 27px; border-color: var(--line); gap: 18px; }
.chapter-heading > div { min-width: 0; }
.chapter-number { width: 53px; height: 53px; font-size: 23px; }
.chapter-eyebrow { font-size: 11px; color: #526a8b; letter-spacing: 1.1px; }
.chapter-heading h2 { font-size: 28px; font-weight: 700; line-height: 1.55; }
.chapter-heading p { font-size: 16px; color: var(--muted); margin-top: 7px; }
.chapter-tag { font-size: 12px; color: #4a6386; background: #f0f4fb; border-color: #d8e2f0; }
.optional-badge { display: inline-block; vertical-align: middle; font-size: 14px; line-height: 1.6; font-weight: 600; letter-spacing: 0; background: #fff2d6; border: 1px solid #e0bc72; color: #74500c; border-radius: 6px; padding: 3px 10px; margin-left: 9px; }
.chapter-content { padding: 31px 34px 34px; }
.chapter-content h3 { font-size: 21px; line-height: 1.7; font-weight: 650; gap: 11px; margin-bottom: 12px; }
.chapter-content > h3:not(:first-child) { margin-top: 39px; }
.substep { width: 26px; height: 26px; font-size: 14px; color: var(--blue); }
.chapter-content p { font-size: 18px; color: #354960; line-height: 1.95; }
.chapter-content p + p { margin-top: 17px; }
.url-box { padding: 16px 18px; margin-top: 21px; gap: 16px; background: #f3f6fc; border-color: #d7e0ee; }
.url-box > div { min-width: 0; }
.link-label { font-size: 12px; color: #516987; letter-spacing: .6px; font-weight: 600; margin-bottom: 4px; }
.url-box a { font-size: 16px; color: #234faa; }
.copy-button { font-size: 13px; color: #37577f; border-color: #c9d5e8; padding: 8px 11px; min-height: 40px; gap: 7px; }
.copy-button svg { width: 16px; height: 16px; }
kbd { font-size: 14px; color: #314d76; border-color: #bfcde1; padding: 2px 7px; white-space: nowrap; }
.screenshot { margin-top: 24px; border-color: #d9e1ed; }
.screenshot figcaption { font-size: 14px; line-height: 1.8; color: #4b607d; padding: 13px 17px; border-color: #d9e1ed; }
.screenshot figcaption > span { font-size: 12px; color: #415e87; padding: 2px 6px; margin-right: 8px; }
.zoom-label { opacity: 1; font-size: 12px; color: #304e79; border-color: #bfcde4; padding: 4px 9px; }
.compact { max-width: 620px; }
.session-shot { max-width: 780px; }
.session-shot img { max-height: none; }
.portrait { max-width: 760px; }
.notice { padding: 18px 20px; gap: 12px; margin-top: 22px; background: #fff8e8; border-color: #e4ce98; }
.notice svg { color: #8a620f; width: 22px; height: 22px; margin-top: 5px; }
.notice p { font-size: 15px; color: #70521f; line-height: 1.9; }
.notice strong { color: #674512; }
.split-content { grid-template-columns: 1fr 42%; gap: 30px; }
.inline-tip { margin-top: 24px; padding: 17px 20px; font-size: 16px; color: #425d80; line-height: 1.9; border-left: 3px solid #658acb; background: #f0f5fd; }
.inline-tip > span { font-size: 15px; color: #2f5182; }
.chapter-content .muted-note { font-size: 14px; color: #5b6c82; margin-top: 19px; }
.optional-notice { background: #fff8e9; border: 1px solid #e6ce96; border-radius: 9px; padding: 20px; margin-bottom: 27px; }
.optional-notice strong { font-size: 18px; color: #684709; }
.optional-notice p { font-size: 16px; color: #705322; margin-top: 6px; }
.optional-notice a { display: inline-flex; align-items: center; gap: 16px; font-size: 16px; font-weight: 650; color: #704a05; text-decoration: underline; text-underline-offset: 5px; margin-top: 13px; }
.chapter-footer { padding: 19px 34px; flex-wrap: wrap; gap: 17px; background: #f7f9fd; border-color: var(--line); }
.chapter-footer label { font-size: 15px; color: #3e587b; min-height: 36px; gap: 10px; }
.chapter-footer input, .custom-check { width: 20px; height: 20px; }
.custom-check { border-color: #9bb0cf; }
.chapter-footer input:checked + .custom-check:after { font-size: 14px; }
.chapter-footer > a { font-size: 14px; color: #2b52a5; margin-left: auto; }
.chapter-footer > a span { font-size: 20px; }
.mini-flow { font-size: 15px; font-weight: 600; color: #34598f; padding: 16px 20px; margin-bottom: 29px; gap: 10px; background: #edf3ff; border-color: #d1dff5; }
.mini-flow i { color: #617caa; }
.paired-steps { gap: 28px; margin-top: 33px; }
.paired-steps .screenshot { margin-top: 21px; }
.paired-steps figcaption { font-size: 14px; padding: 13px 17px; }
.green-number { color: var(--green); }
.green-tag { color: #2c6b50; border-color: #bddcca; }
.success-note { margin-top: 30px; padding: 24px; gap: 17px; background: #eaf7ef; border-color: #bbdcca; }
.success-note > span { width: 38px; height: 38px; background: #d2ebdc; color: #226b49; }
.success-note h3 { font-size: 19px; color: #235e43; margin-bottom: 5px; }
.success-note p { font-size: 16px; color: #38664f; }
.faq-section { grid-template-columns: 230px 1fr; gap: 35px; padding: 34px 0 42px; }
.faq-heading h2 { font-size: 28px; }
.faq-heading p { font-size: 16px; color: #52647b; }
.faq-heading .chapter-eyebrow { color: #526a8b; }
.faq-items, details { border-color: #cdd8e8; }
summary { font-size: 17px; color: #273f5f; font-weight: 600; padding: 21px 0; }
summary > span { font-size: 24px; color: #4b6488; }
details p { font-size: 16px; color: #435972; line-height: 1.95; padding-bottom: 21px; }
.page-footer { font-size: 13px; color: #506782; flex-wrap: wrap; }
.footer-brand { font-size: 24px; }
.footer-brand strong { font-size: 17px; color: #2b466c; }
.footer-brand > span { font-size: 12px; color: #526780; border-color: #bdccdf; }
.page-footer > p, .page-footer > a:last-child { font-size: 13px; }
.dialog-toolbar { font-size: 16px; }
.dialog-hint { font-size: 13px; color: #506780; }
.toast { font-size: 16px; }

@media (max-width: 1250px) {
  :root { --sidebar: 270px; }
  .brand { font-size: 21px; padding-left: 20px; }
  .sidebar-body { padding: 22px 10px; }
  nav a { gap: 10px; padding: 13px 10px; font-size: 14px; }
  .topbar { padding: 0 28px; }
  main { padding: 28px 28px 0; }
  .hero { grid-template-columns: 1fr; padding: 34px; min-height: auto; }
  .hero-art { display: none; }
  .hero-copy > p br { display: none; }
  .hero-buttons { margin-top: 22px; }
  .roadmap-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .roadmap-grid a { padding: 20px; }
  .roadmap-grid a:nth-child(4) { border-left: 0; }
  .roadmap-grid a:nth-child(n+4) { border-top: 1px solid var(--line); }
  .chapter-heading, .chapter-content { padding: 28px; }
  .chapter-footer { padding: 18px 28px; }
  .chapter-tag { display: none; }
  .split-content, .paired-steps { grid-template-columns: 1fr; }
  .split-content .screenshot { max-width: 520px; margin: 0 auto; }
  .paired-steps { gap: 36px; }
  .paired-steps .screenshot { max-width: 760px; margin-left: auto; margin-right: auto; }
  .faq-section { grid-template-columns: 1fr; gap: 24px; }
  .page-footer > p { display: none; }
}
@media (max-height: 850px) and (min-width: 901px) {
  .sidebar-body { padding-top: 17px; padding-bottom: 17px; }
  .nav-label { padding-top: 16px; }
  nav a { padding-top: 11px; padding-bottom: 11px; }
  .sidebar-bottom { margin-bottom: 17px; }
  .local-note { margin-top: 9px; }
}
@media (max-width: 900px) {
  :root { --sidebar: 292px; --header: 68px; }
  .sidebar { transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); }
  .mobile-scrim.visible { display: block; position: fixed; inset: 0; background: #17294377; z-index: 25; backdrop-filter: blur(2px); }
  .page-shell { margin-left: 0; }
  .topbar { padding: 0 20px; justify-content: flex-start; }
  .topbar .menu-button { display: grid; margin-right: 12px; }
  .header-actions { margin-left: auto; }
  .guide-badge { display: none; }
  main { max-width: 820px; padding: 26px 26px 0; }
  .hero { padding: 34px; }
  .hero h1 { font-size: 44px; }
  .roadmap-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .roadmap-grid a { padding: 17px 12px; }
  .roadmap-grid a:nth-child(4) { border-left: 1px solid var(--line); }
  .roadmap-grid a:nth-child(n+4) { border-top: 0; }
  .roadmap-grid a > span:last-of-type { display: none; }
  .roadmap-grid strong { font-size: 15px; }
  .toast { left: 50%; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 88px; }
  body { font-size: 17px; }
  main { padding: 18px 14px 0; }
  .topbar { padding: 0 10px; }
  .topbar .menu-button { margin-right: 7px; }
  .breadcrumb { font-size: 12px; }
  .breadcrumb span { margin: 0 6px; }
  .print-button { padding: 8px; min-width: 38px; min-height: 38px; }
  .print-button > span { display: none; }
  .hero { padding: 27px 23px; border-radius: 12px; }
  .eyebrow { font-size: 11px; letter-spacing: .5px; }
  .hero h1 { font-size: 37px; margin: 16px 0; line-height: 1.45; }
  .hero-copy > p { font-size: 16px; }
  .hero-buttons { gap: 18px; margin-top: 23px; }
  .button { font-size: 15px; }
  .text-button { font-size: 14px; }
  .hero-meta { gap: 12px; font-size: 12px; margin-top: 24px; }
  .section-kicker { align-items: flex-start; margin-bottom: 15px; }
  .section-kicker h2 { font-size: 20px; }
  .section-kicker > span { display: none; }
  .roadmap { margin: 27px 0 23px; }
  .roadmap-grid { display: block; padding: 0 17px; }
  .roadmap-grid a { display: grid; grid-template-columns: 38px 1fr; column-gap: 15px; padding: 16px 0; align-items: center; }
  .roadmap-grid a + a, .roadmap-grid a:nth-child(4), .roadmap-grid a:nth-child(n+4) { border-left: 0; border-top: 1px solid var(--line); }
  .roadmap-grid .flow-icon { grid-column: 1; grid-row: 1 / 3; margin: 0; width: 38px; height: 38px; }
  .roadmap-grid small { grid-column: 2; grid-row: 1; margin: 0; font-size: 12px; }
  .roadmap-grid strong { grid-column: 2; grid-row: 2; font-size: 17px; }
  .roadmap-grid a > span:last-of-type { display: none; }
  .before-start { padding: 19px 17px; gap: 10px; margin-bottom: 25px; }
  .before-start strong { font-size: 16px; }
  .before-start p { font-size: 15px; line-height: 1.9; margin-top: 7px; }
  .info-icon { width: 18px; height: 18px; margin-top: 6px; }
  .chapter { margin-bottom: 25px; border-radius: 11px; }
  .chapter-heading { padding: 25px 20px; gap: 12px; align-items: flex-start; }
  .chapter-number { width: 40px; height: 40px; border-radius: 10px; font-size: 19px; margin-top: 3px; }
  .chapter-eyebrow { font-size: 10px; letter-spacing: .6px; }
  .chapter-heading h2 { font-size: 24px; line-height: 1.5; }
  .chapter-heading p { font-size: 15px; line-height: 1.9; margin-top: 9px; }
  .optional-badge { font-size: 13px; padding: 2px 8px; margin-left: 4px; }
  .chapter-content { padding: 25px 20px; }
  .chapter-content h3 { font-size: 20px; gap: 9px; line-height: 1.65; align-items: flex-start; }
  .chapter-content p { font-size: 17px; line-height: 1.95; }
  .chapter-content > h3:not(:first-child) { margin-top: 32px; }
  .substep { width: 24px; height: 24px; font-size: 13px; margin-top: 4px; }
  .url-box { padding: 15px; gap: 13px; align-items: flex-start; flex-wrap: wrap; }
  .url-box a { font-size: 15px; }
  .link-label { font-size: 12px; }
  .copy-button { font-size: 13px; padding: 8px 10px; }
  kbd { font-size: 13px; padding: 2px 5px; }
  .notice { padding: 16px 13px; gap: 9px; }
  .notice svg { width: 19px; height: 19px; margin-top: 4px; }
  .notice p { font-size: 15px; }
  .image-button, .paired-steps .image-button { padding: 7px; }
  .screenshot { margin-top: 21px; border-radius: 8px; }
  .screenshot figcaption, .paired-steps figcaption { font-size: 13px; padding: 12px 13px; }
  .screenshot figcaption > span { font-size: 11px; margin-right: 6px; }
  .zoom-label { font-size: 12px; padding: 3px 7px; bottom: 14px; right: 14px; }
  .split-content { gap: 27px; }
  .chapter-footer { padding: 17px 20px; gap: 13px; }
  .chapter-footer label { font-size: 14px; min-height: 38px; }
  .chapter-footer > a { font-size: 14px; line-height: 1.8; }
  .inline-tip { font-size: 16px; padding: 15px 17px; }
  .inline-tip > span { font-size: 15px; }
  .chapter-content .muted-note { font-size: 14px; }
  .optional-notice { padding: 18px; }
  .optional-notice p { font-size: 16px; }
  .optional-notice a { font-size: 15px; }
  .mini-flow { flex-wrap: wrap; justify-content: flex-start; font-size: 14px; padding: 15px; gap: 6px 10px; }
  .paired-steps { margin-top: 29px; }
  .success-note { padding: 19px 15px; gap: 12px; align-items: flex-start; }
  .success-note > span { width: 29px; height: 29px; margin-top: 2px; }
  .success-note h3 { font-size: 18px; }
  .success-note p { font-size: 16px; }
  .faq-section { padding: 25px 4px 31px; }
  .faq-heading h2 { font-size: 27px; }
  .faq-heading p { font-size: 16px; }
  summary { font-size: 17px; line-height: 1.8; padding: 20px 0; }
  details p { font-size: 16px; }
  .page-footer { padding: 23px 4px; gap: 12px; }
  .footer-brand { font-size: 21px; }
  .footer-brand strong { font-size: 16px; }
  .footer-brand > span { display: none; }
  .page-footer > a:last-child { font-size: 13px; }
  .dialog-toolbar { padding: 10px 13px; font-size: 14px; }
  .dialog-image-wrap { padding: 9px; }
  .dialog-hint { font-size: 12px; }
  .toast { font-size: 15px; width: max-content; }
}
@media print {
  .chapter-content p { font-size: 12pt; color: #222; }
  .paired-steps, .split-content { display: block; }
  .optional-notice { break-inside: avoid; }
}