/* 博拓流转平台操作手册 · Offline documentation */
:root {
  color-scheme: light;
  --blue: #2459e0;
  --blue-hover: #1748c4;
  --blue-soft: #edf3ff;
  --blue-border: #dce6ff;
  --ink: #202d45;
  --text: #44516a;
  --muted: #77839a;
  --line: #e5eaf2;
  --surface: #fff;
  --background: #f6f8fc;
  --sidebar-width: 266px;
  --topbar-height: 72px;
  --reader-scale: 1.5;
  --radius: 16px;
  --shadow: 0 8px 28px rgb(28 54 101 / 4%);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--text); font-family: var(--font); font-size: calc(15px * var(--reader-scale)); line-height: 1.8; -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .38; }
button, input { border-radius: 0; }
button { touch-action: manipulation; }
img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
button .icon, a .icon { pointer-events: none; }
h1, h2, h3, h4, h5, p { margin: 0; }
h1, h2, h3, h4, h5 { color: var(--ink); }
::selection { color: #153f9d; background: #dce7ff; }
:focus-visible { outline: 3px solid #3c74ef; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 200; padding: 10px 18px; transform: translateY(-180%); border-radius: 8px; background: var(--blue); color: #fff; font-weight: 600; }
.skip-link:focus { transform: translateY(0); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #69758b; transition: color .18s, background .18s, border-color .18s; }
.icon-button:hover { color: var(--blue); background: var(--blue-soft); }

/* Persistent navigation */
.sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--sidebar-width); height: 100vh; height: 100dvh; background: #fff; border-right: 1px solid var(--line); }
.brand { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; min-height: 96px; padding: 23px 24px; }
.brand-mark { display: grid; width: 40px; height: 44px; flex-shrink: 0; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #3470f4, #204ed0); box-shadow: 0 5px 12px rgb(36 89 224 / 18%); }
.brand-mark .icon { width: 25px; height: 25px; }
.brand-copy { color: #24344e; font-size: calc(17px * var(--reader-scale)); font-weight: 750; line-height: 1.5; letter-spacing: .1px; }
.brand-copy small { display: block; margin-top: 3px; color: #8a94a6; font-size: calc(11px * var(--reader-scale)); font-weight: 400; letter-spacing: .8px; }
.sidebar-scroll { flex: 1; min-height: 0; padding: 6px 17px 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #dce3ef transparent; }
.sidebar-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #dce3ef; border-radius: 6px; }
.overview-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 13px; border-radius: 8px; font-size: calc(13px * var(--reader-scale)); font-weight: 650; }
.overview-link .icon { width: 18px; height: 18px; }
.overview-link:hover, .nav-link:hover, .nav-chapter-link:hover { background: #f5f7fc; color: var(--blue); }
.overview-link.is-active { background: var(--blue-soft); color: var(--blue); }
.nav-label { display: flex; align-items: center; justify-content: space-between; padding: 25px 13px 13px; color: #98a1b1; font-size: calc(11px * var(--reader-scale)); font-weight: 600; letter-spacing: 1px; }
.nav-label span { font-size: calc(9px * var(--reader-scale)); font-weight: 500; letter-spacing: .7px; }
.nav-group { margin-bottom: 13px; }
.nav-chapter-link { display: flex; align-items: center; gap: 10px; min-height: 39px; padding: 8px 12px; border-radius: 8px; color: #33415a; font-size: calc(13px * var(--reader-scale)); font-weight: 650; line-height: 1.6; transition: color .16s, background .16s; }
.nav-number { display: grid; flex: 0 0 23px; width: 23px; height: 23px; place-items: center; border: 1px solid #e5eaf2; border-radius: 6px; color: #8a97ad; background: #fafbfe; font-size: calc(10px * var(--reader-scale)); font-weight: 600; font-variant-numeric: tabular-nums; }
.nav-chapter-title { min-width: 0; overflow-wrap: anywhere; }
.nav-chapter-link.is-active { color: var(--blue); background: #f0f4ff; }
.nav-chapter-link.is-active .nav-number { border-color: #dbe5ff; background: #e3ecff; color: var(--blue); }
.nav-children { position: relative; margin: 3px 0 0 23px; padding-left: 15px; border-left: 1px solid #e9edf4; }
.nav-link { position: relative; display: block; padding: 7px 9px; border-radius: 6px; color: #778296; font-size: calc(12px * var(--reader-scale)); line-height: 1.6; overflow-wrap: anywhere; transition: background .16s, color .16s; }
.nav-link.nav-sub-link { padding-left: 20px; font-size: calc(11.5px * var(--reader-scale)); }
.nav-link.is-active { background: #edf3ff; color: #2455ce; font-weight: 600; }
.nav-link.is-active::before { content: ""; position: absolute; top: 50%; left: -17px; width: 3px; height: 16px; border-radius: 2px; background: var(--blue); transform: translateY(-50%); }
.sidebar-meta { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; min-height: 79px; margin: 0 22px; padding: 14px 0; border-top: 1px solid var(--line); color: #748098; font-size: calc(11px * var(--reader-scale)); line-height: 1.7; }
.version-dot { width: 6px; height: 6px; margin-top: -13px; border-radius: 50%; background: #41b687; box-shadow: 0 0 0 3px #edf9f3; }
.sidebar-meta small { display: block; color: #a1a9b7; font-size: calc(10px * var(--reader-scale)); }
.sidebar-meta .icon-button { margin-left: auto; }
.sidebar-overlay { position: fixed; z-index: 55; inset: 0; background: rgb(16 31 59 / 42%); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.sidebar-overlay.is-visible { opacity: 1; visibility: visible; }

/* Application frame */
.app-frame { min-width: 0; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 35; display: flex; align-items: center; gap: 24px; height: var(--topbar-height); padding: 0 clamp(28px, 3.3vw, 52px); background: rgb(255 255 255 / 96%); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.menu-toggle { display: none; }
.topbar-breadcrumb { display: flex; flex: 1; align-items: center; gap: 11px; min-width: 0; white-space: nowrap; font-size: calc(12px * var(--reader-scale)); }
.topbar-breadcrumb > span { color: #8d97a9; }
.topbar-breadcrumb .icon { width: 13px; height: 13px; color: #bec6d2; }
.topbar-breadcrumb strong { overflow: hidden; text-overflow: ellipsis; color: #4e5b72; font-weight: 500; }
.search-trigger { display: flex; align-items: center; gap: 10px; width: 310px; min-width: 200px; height: 38px; padding: 0 12px; border: 1px solid #e8ecf4; border-radius: 8px; background: #f8f9fc; color: #929cad; text-align: left; font-size: calc(11px * var(--reader-scale)); transition: border-color .18s, background .18s; }
.search-trigger:hover { border-color: #bdcff7; background: #f2f6ff; }
.search-trigger .icon { width: 16px; height: 16px; color: #8390a7; }
.search-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-height: 21px; padding: 1px 5px; border: 1px solid #e2e6ee; border-radius: 4px; background: #fff; color: #929bab; font-family: inherit; font-size: calc(10px * var(--reader-scale)); line-height: 1.4; white-space: nowrap; }
.search-trigger kbd { margin-left: auto; }
.platform-link { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 1px solid #c2410c; border-radius: 8px; background: #c2410c; color: #fff; font-size: calc(12px * var(--reader-scale)); font-weight: 600; box-shadow: 0 3px 10px rgb(194 65 12 / 18%); transition: background .18s, border-color .18s, box-shadow .18s; }
.platform-link:hover { border-color: #9a3412; background: #9a3412; color: #fff; box-shadow: 0 4px 14px rgb(194 65 12 / 25%); }
.platform-link .icon { width: 14px; height: 14px; }
.reading-progress { position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: var(--blue); pointer-events: none; transition: width .12s linear; }
.main { min-width: 0; padding: 46px clamp(28px, 3.3vw, 52px) 0; }
.content-container { width: 100%; max-width: 1060px; min-width: 0; margin: 0 auto; }

/* Overview */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .92fr); align-items: center; gap: 40px; padding: 13px 0 43px; scroll-margin-top: 102px; }
.hero-main { min-width: 0; padding: 5px 0; }
.hero-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 21px; }
.guide-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid #dae5ff; border-radius: 5px; background: #ecf2ff; color: #3d69d4; font-size: calc(10px * var(--reader-scale)); font-weight: 600; line-height: 1.7; }
.guide-pill .icon { width: 12px; height: 12px; }
.version-tag { color: #95a1b5; font-size: calc(9px * var(--reader-scale)); font-weight: 600; letter-spacing: 1.1px; }
.hero h1 { font-size: clamp(calc(34px * var(--reader-scale)), calc(3.1vw * var(--reader-scale)), calc(44px * var(--reader-scale))); font-weight: 750; line-height: 1.4; letter-spacing: -1.1px; }
.hero h1 > span { color: var(--blue); }
.hero-subtitle { margin-top: 13px; color: #5c6c88; font-size: calc(14px * var(--reader-scale)); font-weight: 500; letter-spacing: .2px; }
.hero-description { margin-top: 13px; color: #8b96a9; font-size: calc(12px * var(--reader-scale)); line-height: 1.95; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 10px 19px; border: 1px solid transparent; border-radius: 7px; font-size: calc(12px * var(--reader-scale)); font-weight: 550; line-height: 1.5; transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
.button .icon { width: 15px; height: 15px; }
.button-primary { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 4px 10px rgb(36 89 224 / 14%); }
.button-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); box-shadow: 0 6px 15px rgb(36 89 224 / 22%); transform: translateY(-1px); }
.button-secondary { background: #fff; border-color: #dfe5ef; color: #60708d; }
.button-secondary:hover { border-color: #b9cdfa; background: #f4f7ff; color: var(--blue); }
.hero-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; color: #99a3b5; font-size: calc(10px * var(--reader-scale)); }
.hero-stats > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.hero-stats strong { color: #6c7e9e; font-size: calc(12px * var(--reader-scale)); font-weight: 650; }
.hero-stats i { width: 1px; height: 10px; background: #dce2ec; }
.hero-stats .icon { width: 13px; height: 13px; }
.hero-flow { position: relative; min-width: 0; overflow: hidden; padding: 22px 23px 0; border: 1px solid #e1e8f5; border-radius: var(--radius); background: linear-gradient(140deg, #fff 45%, #f5f8ff); box-shadow: 0 10px 36px rgb(35 68 128 / 5%); }
.flow-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid #edf0f7; }
.flow-symbol { display: grid; flex-shrink: 0; width: 36px; height: 36px; place-items: center; border: 1px solid #e1eaff; border-radius: 10px; color: #4476e8; background: #eff4ff; }
.flow-symbol .icon { width: 21px; height: 21px; }
.flow-heading > div { min-width: 0; }
.flow-heading strong { display: block; color: #374865; font-size: calc(13px * var(--reader-scale)); font-weight: 650; line-height: 1.6; }
.flow-heading > div > span { display: block; margin-top: 2px; color: #99a4b7; font-size: calc(10px * var(--reader-scale)); }
.flow-decoration { align-self: flex-start; margin-left: auto; color: #cbd9f7; font-size: calc(26px * var(--reader-scale)); line-height: 1.3; }
.flow-list { margin: 10px 0 11px; padding: 0; list-style: none; }
.flow-list li { position: relative; }
.flow-list li:not(:last-child)::after { content: ""; position: absolute; top: 43px; bottom: -8px; left: 15px; width: 1px; border-left: 1px dashed #d4dff6; }
.flow-list a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 59px; padding: 8px 0; border-radius: 7px; }
.flow-number { position: relative; z-index: 1; display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border: 1px solid #e1e8f7; border-radius: 9px; background: #f6f9ff; color: #7491cf; font-size: calc(10px * var(--reader-scale)); font-weight: 650; font-variant-numeric: tabular-nums; }
.flow-list a > span:nth-child(2) { min-width: 0; }
.flow-list strong { display: block; color: #4c5c78; font-size: calc(12px * var(--reader-scale)); font-weight: 600; line-height: 1.6; }
.flow-list small { display: block; color: #9ba6ba; font-size: calc(10px * var(--reader-scale)); line-height: 1.7; }
.flow-list a > .icon { width: 14px; height: 14px; margin-left: auto; color: #bac7df; }
.flow-list a:hover strong, .flow-list a:hover > .icon { color: var(--blue); }
.flow-list a:hover .flow-number { background: #e8f0ff; border-color: #cbdcfe; color: var(--blue); }
.flow-help { display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: 44px; margin: 0 -23px; padding: 11px 23px; border-top: 1px solid #e7edf9; background: #f3f7ff; color: #8a9dbf; font-size: calc(9px * var(--reader-scale)); }
.flow-help .icon { width: 13px; height: 13px; }
.flow-help .icon:last-child { margin-left: auto; }
.flow-help:hover { color: var(--blue); background: #edf3ff; }

/* Chapter chooser */
.contents-section { margin-top: 0; }
.section-intro, .reading-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.eyebrow { display: block; margin-bottom: 5px; color: #9ba8bd; font-size: calc(9px * var(--reader-scale)); font-weight: 650; line-height: 1.6; letter-spacing: 1.5px; }
.section-intro h2, .reading-heading h2 { color: #34435c; font-size: calc(20px * var(--reader-scale)); font-weight: 650; line-height: 1.6; letter-spacing: -.3px; }
.section-note { padding-bottom: 3px; color: #9ca7b8; font-size: calc(10px * var(--reader-scale)); white-space: nowrap; }
.chapter-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.chapter-card { --card-accent: #4274e4; --card-tint: #eff4ff; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 0; overflow: hidden; border: 1px solid #e3e8f1; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgb(36 57 98 / 2%); transition: border-color .2s, box-shadow .2s, transform .2s; }
.chapter-card:hover { transform: translateY(-3px); border-color: #bed0f6; box-shadow: 0 9px 24px rgb(39 75 143 / 8%); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.card-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 10px; color: var(--card-accent); background: var(--card-tint); }
.card-icon .icon { width: 21px; height: 21px; }
.card-number { color: #d1d9e7; font-size: calc(27px * var(--reader-scale)); font-weight: 650; line-height: 1; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.chapter-card h3 { margin-bottom: 7px; color: #3b4962; font-size: calc(15px * var(--reader-scale)); font-weight: 650; line-height: 1.65; }
.chapter-card > p { flex: 1; min-height: 40px; margin-bottom: 18px; color: #96a0b2; font-size: calc(11px * var(--reader-scale)); line-height: 1.85; overflow-wrap: anywhere; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 41px; border-top: 1px solid #eef1f6; color: #a1acbe; font-size: calc(10px * var(--reader-scale)); }
.card-footer .icon { width: 14px; height: 14px; color: #9eb3db; transition: transform .2s; }
.chapter-card:hover .card-footer { color: var(--card-accent); }
.chapter-card:hover .card-footer .icon { color: var(--card-accent); transform: translateX(3px); }
.card-theme-2 { --card-accent: #5772d9; --card-tint: #f0f1fd; }
.card-theme-3 { --card-accent: #6b69cc; --card-tint: #f1effb; }
.card-theme-4 { --card-accent: #338eaa; --card-tint: #ebf7fa; }
.card-theme-5 { --card-accent: #49978f; --card-tint: #edf7f4; }
.card-theme-6 { --card-accent: #6384bb; --card-tint: #eef3fb; }
.quick-download { display: flex; align-items: center; gap: 17px; margin: 26px 0 45px; padding: 22px 25px; border: 1px solid #dce6fb; border-radius: 12px; background: linear-gradient(100deg, #edf3ff, #f1f6ff); }
.download-icon { display: grid; flex: 0 0 43px; width: 43px; height: 47px; place-items: center; border: 1px solid #dbe7ff; border-radius: 11px; background: #e5edff; color: #5180dd; }
.download-icon .icon { width: 25px; height: 25px; }
.download-copy { min-width: 0; }
.download-copy h2 { color: #496595; font-size: calc(14px * var(--reader-scale)); font-weight: 600; }
.download-copy p { margin-top: 2px; color: #8e9fbd; font-size: calc(10px * var(--reader-scale)); }
.download-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 9px; margin-left: auto; }
.download-chips a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 7px 13px; border: 1px solid #d9e3f7; border-radius: 6px; background: rgb(255 255 255 / 85%); color: #647fae; font-size: calc(10px * var(--reader-scale)); line-height: 1.6; white-space: nowrap; transition: border-color .18s, color .18s, background .18s; }
.download-chips .icon { width: 14px; height: 14px; }
.download-chips a:hover { border-color: #9eb9ef; background: #fff; color: var(--blue); }
.reading-heading { margin-bottom: 22px; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 6px 0 6px 12px; border: 0; background: transparent; color: #8a98af; font-size: calc(11px * var(--reader-scale)); }
.text-button .icon { width: 15px; height: 15px; }
.text-button:hover { color: var(--blue); }

/* Manual content */
.manual-body { min-width: 0; }
.chapter { min-width: 0; margin-bottom: 30px; overflow: clip; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); scroll-margin-top: 96px; }
.chapter-heading { display: flex; align-items: center; gap: 18px; padding: 27px 31px 25px; border-bottom: 1px solid #edf0f6; background: linear-gradient(100deg, #fbfcff, #fff 70%); }
.chapter-index { display: grid; flex: 0 0 49px; width: 49px; height: 53px; place-items: center; border: 1px solid #e0e9fd; border-radius: 12px; background: #eff4ff; color: #7c9bdc; font-size: calc(22px * var(--reader-scale)); font-weight: 550; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.chapter-heading-copy { min-width: 0; }
.chapter-eyebrow { display: block; margin-bottom: 2px; color: #a3afc5; font-size: calc(8px * var(--reader-scale)); font-weight: 650; letter-spacing: 1.5px; line-height: 1.7; }
.chapter-heading h2 { color: #364865; font-size: calc(20px * var(--reader-scale)); font-weight: 650; line-height: 1.6; overflow-wrap: anywhere; }
.chapter-description { margin-top: 5px; color: #93a0b5; font-size: calc(11px * var(--reader-scale)); line-height: 1.8; }
.chapter-content { min-width: 0; padding: 4px 32px 30px; }
.manual-section { min-width: 0; padding-top: 27px; scroll-margin-top: 95px; border-radius: 8px; transition: background .3s, box-shadow .3s; }
.chapter-content > .manual-section + .manual-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid #edf0f6; border-radius: 0; }
.manual-section > .manual-section { margin-top: 21px; padding-top: 4px; }
.manual-section h3, .manual-section h4 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 15px; color: #35445f; font-weight: 650; line-height: 1.75; overflow-wrap: anywhere; }
.manual-section h3 { font-size: calc(17px * var(--reader-scale)); }
.manual-section h4 { margin-top: 5px; font-size: calc(15px * var(--reader-scale)); }
.section-number { flex-shrink: 0; color: #5c80cb; font-size: .86em; font-weight: 650; font-variant-numeric: tabular-nums; }
.manual-section h3 .section-number { padding-right: 2px; }
.manual-section h4 .section-number { color: #8399c2; }
.manual-paragraph, .step-text { margin: 12px 0; color: #5b6880; font-size: calc(14px * var(--reader-scale)); line-height: 1.95; overflow-wrap: anywhere; }
.chapter-content > .manual-paragraph:first-child { margin-top: 23px; }
.step-text { position: relative; padding: 11px 14px; border: 1px solid #e9eef8; border-radius: 7px; background: #f8faff; color: #566b91; }
.manual-section > p:first-of-type { margin-top: 0; }
.manual-section > :last-child { margin-bottom: 0; }
.subheading { margin: 21px 0 10px; color: #4d5f7e; font-size: calc(14px * var(--reader-scale)); font-weight: 650; line-height: 1.8; }
.manual-paragraph strong, .step-text strong, .manual-table strong { color: #305dba; font-weight: 600; }
.text-emphasis { color: #c62828; font-weight: 600; }
.text-emphasis strong { color: inherit; }
.inline-link { color: var(--blue); text-decoration: underline; text-decoration-color: #c6d7fb; text-underline-offset: 3px; overflow-wrap: anywhere; }
.inline-link:hover { color: var(--blue-hover); text-decoration-color: currentColor; }
.notice { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0; padding: 13px 16px; border: 1px solid #e0e9fb; border-radius: 8px; background: #f3f7ff; color: #61799f; font-size: calc(12px * var(--reader-scale)); line-height: 1.9; overflow-wrap: anywhere; }
.notice > .icon { width: 16px; height: 16px; margin-top: 3px; color: #7195dc; }
.notice > span { min-width: 0; }
.faq-question { position: relative; margin: 23px 0 10px; padding-left: 29px; color: #385783; font-size: calc(14px * var(--reader-scale)); font-weight: 600; line-height: 1.8; overflow-wrap: anywhere; }
.faq-question::before { content: "Q"; position: absolute; top: 2px; left: 0; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #dfe8fa; border-radius: 6px; background: #eff4ff; color: #7896cd; font-size: calc(11px * var(--reader-scale)); font-weight: 650; line-height: 1; }
.source-bullet { position: relative; padding-left: 18px; }
.source-bullet::before { content: ""; position: absolute; top: .85em; left: 3px; width: 5px; height: 5px; border-radius: 50%; background: #7c9bd6; }
.is-targeted { outline: 3px solid #dce8ff; outline-offset: 5px; background-color: #fbfdff; }
.chapter.is-targeted { outline-offset: 3px; }

/* Images retain their original proportions. Narrow assets never stretch to a row. */
.image-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; margin: 21px 0 25px; align-items: start; }
.image-grid--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-grid--wide, .image-grid--single { grid-template-columns: minmax(0, 1fr); }
.manual-figure { min-width: 0; max-width: 100%; margin: 0; }
.image-button { position: relative; display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto; padding: 7px; overflow: hidden; border: 1px solid #e1e7f0; border-radius: 9px; background: #f8fafc; cursor: zoom-in; transition: border-color .2s, box-shadow .2s; }
.image-button:hover { border-color: #a9c1f2; box-shadow: 0 4px 17px rgb(36 89 224 / 8%); }
.image-button img { width: auto; max-width: min(100%, var(--image-natural-width, 100%)); height: auto; border-radius: 3px; }
.figure-wide .image-button { width: min(100%, calc(var(--image-natural-width, 2000px) + 14px)); }
.figure-wide img { width: 100%; }
.figure-phone .image-button { max-width: min(100%, calc(var(--image-natural-width, 380px) + 14px)); padding: 9px; background: #f5f7fb; border-color: #e5eaf1; }
.figure-phone img { width: auto; max-width: 100%; max-height: 440px; object-fit: contain; }
.figure-compact .image-button { max-width: min(100%, calc(var(--image-natural-width, 260px) + 14px), 280px); padding: 10px; background: #fff; }
.figure-compact img { width: auto; max-width: 100%; max-height: 280px; }
.image-grid--single .figure-phone .image-button { margin-right: auto; margin-left: auto; }
.image-zoom-icon { position: absolute; right: 12px; bottom: 12px; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #e2e8f5; border-radius: 7px; background: rgb(255 255 255 / 94%); color: #7992bb; box-shadow: 0 2px 7px rgb(24 52 97 / 6%); opacity: .85; transition: opacity .18s, color .18s; }
.image-zoom-icon .icon { width: 15px; height: 15px; }
.image-button:hover .image-zoom-icon { opacity: 1; color: var(--blue); }
.manual-figure figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; margin-top: 9px; color: #a0aabc; font-size: calc(10px * var(--reader-scale)); line-height: 1.7; text-align: center; }
.manual-figure figcaption > span + span { color: #b1baca; font-size: calc(9px * var(--reader-scale)); }

/* Tables */
.table-scroll { width: 100%; max-width: 100%; margin: 19px 0 24px; overflow-x: auto; border: 1px solid #e3e9f3; border-radius: 8px; scrollbar-width: thin; scrollbar-color: #cdd8e9 #f5f7fb; -webkit-overflow-scrolling: touch; }
.manual-table { width: 100%; border-spacing: 0; border-collapse: separate; color: #68758c; font-size: calc(12px * var(--reader-scale)); line-height: 1.85; text-align: left; }
.manual-table th, .manual-table td { min-width: 90px; padding: 11px 14px; vertical-align: top; border-right: 1px solid #e9edf5; border-bottom: 1px solid #e9edf5; overflow-wrap: anywhere; }
.manual-table th { background: #f0f5fe; color: #5a739f; font-size: calc(11px * var(--reader-scale)); font-weight: 600; }
.manual-table tr > :last-child { border-right: 0; }
.manual-table tbody tr:last-child > * { border-bottom: 0; }
.manual-table tbody tr:nth-child(even) { background: #fafbfe; }
.manual-table td p { margin: 0; }
.manual-table td img { width: auto; max-height: 300px; }

/* Footer and utilities */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 39px; padding: 27px 0 31px; border-top: 1px solid #e2e7f0; color: #9aa5b8; }
.footer-identity { display: flex; align-items: center; gap: 17px; min-width: 0; }
.source-logo { width: 112px; max-width: 112px; height: auto; flex-shrink: 0; mix-blend-mode: multiply; }
.footer-identity strong { display: block; color: #7e8da6; font-size: calc(11px * var(--reader-scale)); font-weight: 550; }
.footer-identity p { margin-top: 2px; color: #a8b2c3; font-size: calc(9px * var(--reader-scale)); }
.footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; font-size: calc(9px * var(--reader-scale)); }
.footer-meta a { display: inline-flex; align-items: center; gap: 5px; color: #8ca0bf; }
.footer-meta a:hover { color: var(--blue); }
.footer-meta .icon { width: 11px; height: 11px; }
.back-to-top { position: fixed; z-index: 30; right: 24px; bottom: 24px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #dde5f3; border-radius: 11px; background: rgb(255 255 255 / 97%); color: #6f8ec5; box-shadow: 0 4px 16px rgb(30 57 111 / 8%); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, transform .2s, visibility .2s, color .2s; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: var(--blue); border-color: #acc3f1; }
.back-to-top .icon { width: 18px; height: 18px; }
.toast { position: fixed; z-index: 150; right: 24px; bottom: 80px; max-width: min(380px, calc(100vw - 40px)); padding: 12px 18px; border: 1px solid #dce6fa; border-radius: 9px; background: #fff; color: #4b6696; box-shadow: 0 8px 30px rgb(25 48 91 / 12%); font-size: calc(12px * var(--reader-scale)); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, visibility .2s, transform .2s; }
.toast.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* Native dialogs: closed dialogs keep their browser-provided display:none. */
dialog { padding: 0; border: 1px solid #dfe6f4; color: var(--text); font-family: var(--font); }
dialog::backdrop { background: rgb(17 31 57 / 48%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.search-dialog { position: fixed; top: min(12vh, 110px); bottom: auto; width: min(660px, calc(100vw - 40px)); max-width: 660px; max-height: min(76vh, 740px); margin: 0 auto; overflow: hidden; border-radius: 15px; background: #fff; box-shadow: 0 25px 90px rgb(8 25 59 / 23%); }
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog-header { display: flex; flex-shrink: 0; align-items: center; gap: 13px; min-height: 74px; padding: 12px 17px 12px 23px; border-bottom: 1px solid #e7ecf5; }
.search-dialog-header > .icon { width: 21px; height: 21px; color: #718bb8; }
.search-dialog-header input { flex: 1; width: 0; min-width: 0; height: 44px; padding: 4px 0; border: 0; outline: 0; background: transparent; color: #344d75; font-size: calc(15px * var(--reader-scale)); }
.search-dialog-header input::placeholder { color: #a1adc1; }
.search-dialog-header input:focus-visible { outline: 0; }
.search-dialog-header:focus-within { box-shadow: inset 0 -2px #7da1ee; }
.search-dialog-header input::-webkit-search-cancel-button { cursor: pointer; }
.search-dialog-header .icon-button { flex-shrink: 0; }
.search-dialog-body { flex: 1; min-height: 160px; overflow-y: auto; overscroll-behavior: contain; padding: 17px; scrollbar-width: thin; scrollbar-color: #d4deed #fff; }
.search-status { margin: 1px 8px 12px; color: #a1acc0; font-size: calc(11px * var(--reader-scale)); }
.search-status:empty { display: none; }
.search-results { min-width: 0; }
.search-result { display: block; padding: 15px 15px 17px; border: 1px solid transparent; border-radius: 9px; }
.search-result + .search-result { border-top-color: #eff2f7; }
.search-result:hover, .search-result:focus-visible { background: #f4f7ff; border-color: #e0e9fc; }
.search-result-path { display: block; margin-bottom: 4px; color: #94a4be; font-size: calc(10px * var(--reader-scale)); }
.search-result-title { display: block; color: #3e5b8d; font-size: calc(14px * var(--reader-scale)); font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
.search-result-snippet { display: block; margin-top: 5px; color: #8b99b0; font-size: calc(12px * var(--reader-scale)); line-height: 1.85; overflow-wrap: anywhere; }
mark { padding: 1px 2px; border-radius: 3px; background: #e0ebff; color: #2558bd; }
.search-empty { padding: 35px 16px 44px; text-align: center; }
.search-empty strong { display: block; color: #657999; font-size: calc(15px * var(--reader-scale)); font-weight: 600; }
.search-empty p { margin-top: 7px; color: #9ba8bd; font-size: calc(12px * var(--reader-scale)); }
.search-suggestions { display: flex; flex-wrap: wrap; gap: 10px; padding: 9px 8px 22px; }
.suggestion-link { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; border: 1px solid #e1e8f5; border-radius: 7px; background: #f6f9ff; color: #6f87b0; font-size: calc(12px * var(--reader-scale)); }
.suggestion-link:hover { background: #eaf1ff; border-color: #baccf1; color: var(--blue); }
.search-dialog-footer { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; gap: 12px; min-height: 43px; padding: 10px 22px; border-top: 1px solid #e9edf5; background: #fbfcff; color: #a4aec0; font-size: calc(10px * var(--reader-scale)); }
.search-dialog-footer > span { display: inline-flex; align-items: center; gap: 5px; }
.search-dialog-footer .icon { width: 12px; height: 12px; }
.search-dialog-footer kbd { min-height: 18px; font-size: calc(9px * var(--reader-scale)); }
.image-dialog { position: fixed; inset: 0; width: min(1240px, calc(100vw - 48px)); max-width: none; height: min(900px, calc(100vh - 48px)); height: min(900px, calc(100dvh - 48px)); max-height: none; margin: auto; overflow: hidden; border: 1px solid #dce4f2; border-radius: 14px; background: #f3f6fb; box-shadow: 0 25px 100px rgb(8 25 59 / 24%); }
.image-dialog[open] { display: flex; flex-direction: column; }
.image-dialog-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; min-height: 65px; padding: 11px 17px 11px 23px; border-bottom: 1px solid #e0e7f2; background: #fff; }
.image-dialog-title { display: flex; align-items: center; gap: 13px; min-width: 0; }
.image-dialog-title strong { overflow: hidden; color: #5b6f91; font-size: calc(13px * var(--reader-scale)); font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.image-dialog-title > span { flex-shrink: 0; color: #a4b0c4; font-size: calc(11px * var(--reader-scale)); }
.image-dialog-actions { display: flex; flex-shrink: 0; gap: 5px; }
.image-stage { display: block; flex: 1 1 auto; min-width: 0; min-height: 0; padding: 18px 20px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c4cfe1 #edf1f8; }
.image-stage img { display: block; width: auto; max-width: none; height: auto; margin: 0 auto; flex-shrink: 0; background: #fff; box-shadow: 0 2px 11px rgb(26 49 89 / 7%); }
.image-dialog-toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 30px; min-height: 60px; padding: 8px 16px; border-top: 1px solid #e0e7f2; background: #fff; }
.zoom-controls { display: flex; align-items: center; gap: 4px; padding: 0 10px; border-right: 1px solid #e6ebf4; border-left: 1px solid #e6ebf4; }
.zoom-label { min-width: 65px; min-height: 40px; padding: 6px; border: 0; border-radius: 7px; background: transparent; color: #7587a5; font-size: calc(12px * var(--reader-scale)); font-variant-numeric: tabular-nums; }
.zoom-label:hover { background: #f0f4fc; color: var(--blue); }

/* Comfortable intermediate widths */
@media (min-width: 1101px) and (max-width: 1280px) {
  .topbar { gap: 16px; padding-right: 28px; padding-left: 28px; }
  .topbar-breadcrumb { font-size: calc(11px * var(--reader-scale)); gap: 7px; }
  .search-trigger { width: 255px; min-width: 190px; }
  .search-trigger kbd { display: none; }
  .main { padding: 33px 28px 0; }
  .hero { gap: 25px; }
  .hero h1 { font-size: calc(35px * var(--reader-scale)); }
  .hero-flow { padding-right: 18px; padding-left: 18px; }
  .flow-help { margin-right: -18px; margin-left: -18px; padding-right: 18px; padding-left: 18px; }
  .hero-stats { gap: 9px; font-size: calc(9px * var(--reader-scale)); }
  .chapter-card { padding-right: 18px; padding-left: 18px; }
  .download-chips { gap: 6px; }
  .download-chips a { padding-right: 9px; padding-left: 9px; }
}

@media (max-width: 1100px) {
  .sidebar { width: 286px; max-width: calc(100vw - 58px); transform: translateX(-100%); transition: transform .25s ease; box-shadow: none; }
  .sidebar.is-open, body.nav-open .sidebar { transform: translateX(0); box-shadow: 10px 0 40px rgb(15 36 77 / 12%); }
  body.nav-open { overflow: hidden; }
  body.nav-open .sidebar-overlay { opacity: 1; visibility: visible; }
  .sidebar-scroll { padding-right: 18px; padding-left: 18px; }
  .nav-chapter-link, .nav-link { min-height: 40px; display: flex; align-items: center; }
  .nav-link { font-size: calc(12px * var(--reader-scale)); }
  .nav-link.nav-sub-link { font-size: calc(11.5px * var(--reader-scale)); }
  .app-frame { margin-left: 0; }
  .topbar { gap: 18px; padding-right: 32px; padding-left: 22px; }
  .menu-toggle { display: inline-flex; flex-shrink: 0; }
  .topbar-breadcrumb { flex: 1; }
  .search-trigger { width: 280px; }
  .main { padding: 34px 36px 0; }
  .hero { gap: 38px; padding-top: 9px; padding-bottom: 37px; }
  .hero h1 { font-size: calc(39px * var(--reader-scale)); }
  .chapter-cards { gap: 17px; }
  .chapter-card { padding: 20px 19px 0; }
  .chapter-content { padding-right: 29px; padding-left: 29px; }
  .back-to-top { right: 20px; bottom: 20px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .topbar { gap: 15px; padding-right: 27px; }
  .topbar-breadcrumb > span, .topbar-breadcrumb > .icon { display: none; }
  .search-trigger { width: 265px; min-width: 180px; }
  .search-trigger kbd { display: none; }
  .main { padding: 30px 28px 0; }
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 27px; }
  .hero h1 { font-size: calc(34px * var(--reader-scale)); }
  .hero-subtitle { font-size: calc(12px * var(--reader-scale)); }
  .hero-description { font-size: calc(11px * var(--reader-scale)); }
  .hero-eyebrow { gap: 9px; }
  .hero-stats { gap: 9px; font-size: calc(9px * var(--reader-scale)); }
  .hero-stats > span:last-child { flex-basis: 100%; }
  .hero-stats > i:last-of-type { display: none; }
  .hero-flow { padding-right: 17px; padding-left: 17px; }
  .flow-heading { gap: 8px; }
  .flow-heading strong { font-size: calc(12px * var(--reader-scale)); }
  .flow-heading > div > span { font-size: calc(9px * var(--reader-scale)); }
  .flow-decoration { display: none; }
  .flow-help { margin-right: -17px; margin-left: -17px; padding-right: 17px; padding-left: 17px; font-size: calc(8px * var(--reader-scale)); }
  .chapter-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-download { flex-wrap: wrap; gap: 12px; padding: 20px; }
  .download-chips { flex-basis: 100%; justify-content: flex-start; padding-left: 55px; }
}

/* Mobile and small tablet */
@media (max-width: 760px) {
  :root { --topbar-height: 64px; --radius: 12px; }
  html { scroll-padding-top: 0; }
  body { font-size: calc(14px * var(--reader-scale)); }
  .topbar { height: 64px; gap: 9px; padding: 0 17px 0 10px; }
  .icon-button { width: 44px; height: 44px; min-width: 44px; }
  .menu-toggle { color: #62779a; }
  .topbar-breadcrumb { flex: 1; font-size: calc(12px * var(--reader-scale)); }
  .topbar-breadcrumb > span, .topbar-breadcrumb > .icon { display: none; }
  .topbar-breadcrumb strong { max-width: 230px; }
  .search-trigger { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; justify-content: center; padding: 0; border-color: transparent; background: transparent; }
  .search-trigger .icon { width: 20px; height: 20px; }
  .search-trigger > span, .search-trigger kbd, .platform-link { display: none; }
  .brand { min-height: 89px; padding: 21px 23px; }
  .sidebar-meta { min-height: 76px; }
  .nav-chapter-link, .nav-link { min-height: 44px; }
  .nav-link { padding-top: 9px; padding-bottom: 9px; }
  .main { padding: 27px 20px 0; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 4px 0 33px; scroll-margin-top: 88px; }
  .hero-main { padding: 0 2px; }
  .hero-eyebrow { gap: 11px; margin-bottom: 18px; }
  .guide-pill { font-size: calc(10px * var(--reader-scale)); }
  .version-tag { font-size: calc(8px * var(--reader-scale)); letter-spacing: .8px; }
  .hero h1 { font-size: calc(36px * var(--reader-scale)); line-height: 1.4; letter-spacing: -.8px; }
  .hero-subtitle { margin-top: 12px; font-size: calc(13px * var(--reader-scale)); }
  .hero-description { margin-top: 12px; font-size: calc(11px * var(--reader-scale)); line-height: 1.95; }
  .hero-actions { gap: 10px; margin-top: 22px; }
  .button { min-height: 44px; padding: 11px 17px; font-size: calc(12px * var(--reader-scale)); }
  .hero-stats { gap: 10px; margin-top: 20px; font-size: calc(9px * var(--reader-scale)); }
  .hero-stats strong { font-size: calc(11px * var(--reader-scale)); }
  .hero-flow { padding: 20px 20px 0; border-radius: 12px; }
  .flow-heading { gap: 12px; padding-bottom: 15px; }
  .flow-heading strong { font-size: calc(13px * var(--reader-scale)); }
  .flow-heading > div > span { font-size: calc(10px * var(--reader-scale)); }
  .flow-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin: 9px 0 13px; }
  .flow-list a { gap: 9px; min-height: 66px; }
  .flow-list li:not(:last-child)::after { display: none; }
  .flow-number { width: 28px; height: 30px; flex-basis: 28px; font-size: calc(9px * var(--reader-scale)); }
  .flow-list strong { font-size: calc(11px * var(--reader-scale)); }
  .flow-list small { font-size: calc(8px * var(--reader-scale)); }
  .flow-list a > .icon { display: none; }
  .flow-help { min-height: 44px; margin-right: -20px; margin-left: -20px; padding: 11px 20px; font-size: calc(9px * var(--reader-scale)); }
  .section-intro, .reading-heading { gap: 10px; margin-bottom: 17px; }
  .section-intro h2, .reading-heading h2 { font-size: calc(18px * var(--reader-scale)); }
  .eyebrow { font-size: calc(8px * var(--reader-scale)); margin-bottom: 4px; }
  .section-note { font-size: calc(9px * var(--reader-scale)); }
  .chapter-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .chapter-card { padding: 17px 16px 0; border-radius: 10px; }
  .card-top { margin-bottom: 12px; gap: 9px; }
  .card-icon { width: 34px; height: 34px; border-radius: 9px; }
  .card-icon .icon { width: 19px; height: 19px; }
  .card-number { font-size: calc(22px * var(--reader-scale)); }
  .chapter-card h3 { font-size: calc(13px * var(--reader-scale)); }
  .chapter-card > p { min-height: 38px; margin-bottom: 13px; font-size: calc(10px * var(--reader-scale)); }
  .card-footer { min-height: 38px; font-size: calc(9px * var(--reader-scale)); }
  .card-footer .icon { width: 13px; height: 13px; }
  .quick-download { flex-wrap: wrap; gap: 12px; margin: 21px 0 33px; padding: 19px; }
  .download-icon { width: 38px; height: 43px; flex-basis: 38px; border-radius: 9px; }
  .download-copy h2 { font-size: calc(13px * var(--reader-scale)); }
  .download-copy p { font-size: calc(9px * var(--reader-scale)); }
  .download-chips { flex-basis: 100%; justify-content: flex-start; gap: 8px; margin: 0; padding-top: 2px; }
  .download-chips a { min-height: 40px; padding: 9px 12px; font-size: calc(10px * var(--reader-scale)); }
  .text-button { min-height: 44px; font-size: calc(10px * var(--reader-scale)); }
  .chapter { margin-bottom: 22px; scroll-margin-top: 82px; }
  .chapter-heading { align-items: flex-start; gap: 12px; padding: 22px 20px 20px; }
  .chapter-index { flex-basis: 38px; width: 38px; height: 44px; margin-top: 2px; border-radius: 10px; font-size: calc(19px * var(--reader-scale)); }
  .chapter-eyebrow { font-size: calc(7px * var(--reader-scale)); }
  .chapter-heading h2 { font-size: calc(17px * var(--reader-scale)); }
  .chapter-description { margin-top: 4px; font-size: calc(10px * var(--reader-scale)); }
  .chapter-content { padding: 1px 20px 23px; }
  .manual-section { padding-top: 23px; scroll-margin-top: 83px; }
  .chapter-content > .manual-section + .manual-section { margin-top: 23px; padding-top: 23px; }
  .manual-section > .manual-section { margin-top: 19px; padding-top: 3px; }
  .manual-section h3 { font-size: calc(15px * var(--reader-scale)); }
  .manual-section h4 { font-size: calc(14px * var(--reader-scale)); }
  .manual-section h3, .manual-section h4 { gap: 8px; margin-bottom: 12px; }
  .manual-paragraph, .step-text { font-size: calc(13px * var(--reader-scale)); line-height: 1.95; }
  .step-text { padding: 10px 12px; }
  .notice { gap: 8px; margin: 14px 0; padding: 11px 12px; font-size: calc(11px * var(--reader-scale)); }
  .notice > .icon { width: 15px; height: 15px; }
  .faq-question { margin-top: 21px; font-size: calc(13px * var(--reader-scale)); }
  .subheading { font-size: calc(13px * var(--reader-scale)); }
  .image-grid { gap: 15px; margin: 18px 0 22px; }
  .image-grid--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .image-button { padding: 5px; border-radius: 7px; }
  .figure-phone .image-button { padding: 6px; }
  .figure-phone img { max-height: 420px; }
  .figure-wide .image-button { width: min(100%, calc(var(--image-natural-width, 2000px) + 10px)); }
  .image-zoom-icon { right: 9px; bottom: 9px; width: 25px; height: 25px; border-radius: 6px; }
  .image-zoom-icon .icon { width: 13px; height: 13px; }
  .manual-figure figcaption { gap: 2px 8px; margin-top: 8px; font-size: calc(9px * var(--reader-scale)); }
  .manual-figure figcaption > span + span { font-size: calc(8px * var(--reader-scale)); }
  .table-scroll { margin: 16px 0 20px; }
  .manual-table { font-size: calc(11px * var(--reader-scale)); }
  .manual-table th, .manual-table td { min-width: 85px; padding: 10px 11px; }
  .manual-table th { font-size: calc(10px * var(--reader-scale)); }
  .site-footer { flex-wrap: wrap; gap: 17px; margin-top: 29px; padding: 23px 0 30px; }
  .footer-identity { gap: 12px; }
  .source-logo { width: 90px; max-width: 90px; }
  .footer-identity strong { font-size: calc(10px * var(--reader-scale)); }
  .footer-identity p { font-size: calc(8px * var(--reader-scale)); }
  .footer-meta { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: center; font-size: calc(8px * var(--reader-scale)); }
  .footer-meta a { min-height: 36px; }
  .back-to-top { right: 16px; bottom: 18px; width: 44px; height: 44px; }
  .toast { right: 16px; bottom: 75px; padding: 11px 15px; font-size: calc(11px * var(--reader-scale)); }
  .search-dialog { top: 20px; width: calc(100vw - 24px); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); border-radius: 12px; }
  .search-dialog-header { min-height: 66px; gap: 10px; padding: 10px 9px 10px 17px; }
  .search-dialog-header > .icon { width: 19px; height: 19px; }
  .search-dialog-header input { font-size: calc(16px * var(--reader-scale)); }
  .search-dialog-body { min-height: 180px; padding: 12px; }
  .search-result { padding: 13px 11px; }
  .search-result-title { font-size: calc(13px * var(--reader-scale)); }
  .search-result-snippet { font-size: calc(11px * var(--reader-scale)); }
  .search-dialog-footer { padding: 10px 16px; font-size: calc(9px * var(--reader-scale)); }
  .suggestion-link { min-height: 44px; font-size: calc(11px * var(--reader-scale)); }
  .image-dialog { width: calc(100vw - 16px); height: calc(100vh - 24px); height: calc(100dvh - 24px); border-radius: 10px; }
  .image-dialog-header { min-height: 61px; gap: 8px; padding: 8px 8px 8px 15px; }
  .image-dialog-title { flex-direction: column; align-items: flex-start; gap: 0; }
  .image-dialog-title strong { max-width: 100%; font-size: calc(11px * var(--reader-scale)); }
  .image-dialog-title > span { font-size: calc(9px * var(--reader-scale)); }
  .image-dialog-actions { gap: 0; }
  .image-stage { padding: 18px 20px; }
  .image-dialog-toolbar { gap: 12px; min-height: 64px; padding: 9px 10px; }
  .zoom-controls { gap: 0; padding: 0 5px; }
  .zoom-label { min-width: 57px; min-height: 44px; font-size: calc(11px * var(--reader-scale)); }
}

@media (max-width: 480px) {
  .main { padding-right: 18px; padding-left: 18px; }
  .hero h1 { font-size: calc(34px * var(--reader-scale)); }
  .hero-description { font-size: calc(11px * var(--reader-scale)); }
  .hero-stats { gap: 8px; font-size: calc(8px * var(--reader-scale)); }
  .hero-stats strong { font-size: calc(10px * var(--reader-scale)); }
  .hero-stats .icon { width: 12px; height: 12px; }
  .section-intro { align-items: flex-end; gap: 8px; }
  .section-intro h2 { font-size: calc(17px * var(--reader-scale)); }
  .section-note { font-size: calc(8px * var(--reader-scale)); }
  .chapter-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .chapter-card { position: relative; min-height: 168px; padding: 18px 19px 0 76px; }
  .card-top { margin: 0; }
  .card-icon { position: absolute; top: 20px; left: 19px; width: 39px; height: 39px; }
  .card-number { position: absolute; top: 19px; right: 19px; font-size: calc(24px * var(--reader-scale)); }
  .chapter-card h3 { padding-right: 34px; margin-bottom: 6px; font-size: calc(14px * var(--reader-scale)); }
  .chapter-card > p { min-height: 38px; padding-right: 9px; margin-bottom: 15px; font-size: calc(11px * var(--reader-scale)); }
  .card-footer { min-height: 40px; font-size: calc(10px * var(--reader-scale)); }
  .quick-download { padding: 18px; gap: 12px; }
  .download-chips { gap: 7px; }
  .download-chips a { padding-right: 10px; padding-left: 10px; font-size: calc(9px * var(--reader-scale)); }
  .chapter-heading { padding: 21px 17px 18px; gap: 11px; }
  .chapter-heading h2 { font-size: calc(16px * var(--reader-scale)); }
  .chapter-content { padding-right: 17px; padding-left: 17px; }
  .image-grid--phones { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .figure-phone img { max-height: 440px; }
  .figure-phone .image-button { max-width: min(100%, calc(var(--image-natural-width, 320px) + 12px)); }
  .manual-figure figcaption { font-size: calc(9px * var(--reader-scale)); }
  .manual-section h3, .manual-section h4 { gap: 7px; }
  .manual-section h3 .section-number, .manual-section h4 .section-number { max-width: 70px; overflow-wrap: anywhere; }
  .image-dialog-toolbar { gap: 5px; }
  .zoom-controls { padding: 0 3px; }
  .zoom-label { min-width: 54px; }
}

@media (max-width: 359px) {
  .main { padding-right: 14px; padding-left: 14px; }
  .hero h1 { font-size: calc(31px * var(--reader-scale)); }
  .hero-stats { gap: 7px; }
  .hero-stats > span:last-child { flex-basis: 100%; }
  .hero-stats > i:last-of-type { display: none; }
  .hero-flow { padding-right: 15px; padding-left: 15px; }
  .flow-list { column-gap: 10px; }
  .flow-list a { gap: 7px; }
  .flow-help { margin-right: -15px; margin-left: -15px; padding-right: 15px; padding-left: 15px; font-size: calc(8px * var(--reader-scale)); }
  .section-note { display: none; }
  .chapter-heading { padding-right: 14px; padding-left: 14px; }
  .chapter-content { padding-right: 14px; padding-left: 14px; }
  .image-dialog-toolbar > .icon-button { width: 40px; min-width: 40px; }
  .zoom-controls > .icon-button { width: 40px; min-width: 40px; }
}

/* Page font controls apply the same scale to navigation and content. */
.font-controls { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; padding: 3px; border: 1px solid #dfe7f6; border-radius: 9px; background: #f8faff; white-space: nowrap; }
.font-controls-label { padding: 0 5px 0 7px; color: #697b9a; font-size: calc(11px * var(--reader-scale)); }
.font-control-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #466397; font-size: calc(12px * var(--reader-scale)); line-height: 1; }
.font-control-button:hover:not(:disabled) { background: #e8efff; color: var(--blue); }
.font-control-button .icon { width: 15px; height: 15px; }
.font-size-value { min-width: 42px; color: #385b98; font-size: calc(12px * var(--reader-scale)); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; line-height: 1.4; }
.font-reset { width: 39px; margin-left: 2px; border-left: 1px solid #e0e7f4; border-radius: 0 6px 6px 0; }

@media screen {
  .manual-body { --reader-h2: 20px; --reader-h3: 17px; --reader-h4: 15px; --reader-body: 14px; --reader-description: 11px; --reader-notice: 12px; --reader-table: 12px; --reader-th: 11px; --reader-caption: 10px; --reader-caption-hint: 9px; }
  .chapter-heading h2 { font-size: calc(var(--reader-h2) * var(--reader-scale)); }
  .chapter-description { font-size: calc(var(--reader-description) * var(--reader-scale)); }
  .manual-section h3 { font-size: calc(var(--reader-h3) * var(--reader-scale)); }
  .manual-section h4 { font-size: calc(var(--reader-h4) * var(--reader-scale)); }
  .manual-paragraph, .step-text, .subheading, .faq-question { font-size: calc(var(--reader-body) * var(--reader-scale)); }
  .manual-body .notice { font-size: calc(var(--reader-notice) * var(--reader-scale)); }
  .manual-table { font-size: calc(var(--reader-table) * var(--reader-scale)); }
  .manual-table th { font-size: calc(var(--reader-th) * var(--reader-scale)); }
  .manual-figure figcaption { font-size: calc(var(--reader-caption) * var(--reader-scale)); }
  .manual-figure figcaption > span + span { font-size: calc(var(--reader-caption-hint) * var(--reader-scale)); }
}
@media screen and (max-width: 760px) {
  .manual-body { --reader-h2: 17px; --reader-h3: 15px; --reader-h4: 14px; --reader-body: 13px; --reader-description: 10px; --reader-notice: 11px; --reader-table: 11px; --reader-th: 10px; --reader-caption: 9px; --reader-caption-hint: 8px; }
  .font-controls { gap: 0; padding: 0 2px; }
  .font-controls-label { padding: 0 3px; }
  .font-control-button { width: 40px; height: 44px; }
  .font-size-value { min-width: 39px; }
  .font-reset { width: 40px; margin-left: 0; }
  .reader-controls-ready .topbar-breadcrumb strong { max-width: none; }
}
@media screen and (max-width: 560px) {
  .reader-controls-ready .topbar-breadcrumb { display: none; }
  .font-controls { margin-left: auto; }
}
@media screen and (max-width: 480px) {
  .manual-body { --reader-h2: 16px; }
}
@media screen and (max-width: 359px) {
  .font-controls-label { display: none; }
}

/* Keep the contact line visible and let larger interface text reflow. */
@media screen {
  :root { --sidebar-width: clamp(266px, calc(226px * var(--reader-scale)), 340px); }
  .site-header { position: sticky; top: 0; z-index: 35; background: #fff; }
  .site-header .topbar { position: relative; top: auto; flex-wrap: wrap; height: auto; min-height: var(--topbar-height); padding-top: 10px; padding-bottom: 10px; gap: 10px 18px; }
  .topbar-breadcrumb { flex: 1 1 110px; }
  .search-trigger { width: 270px; min-width: 160px; }
  .contact-strip { display: flex; align-items: center; justify-content: flex-end; padding: 7px clamp(20px, 3.3vw, 52px); border-top: 1px solid #ffedd5; border-bottom: 1px solid #fed7aa; background: #fff7ed; }
  .support-contact { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 3px 12px; min-height: 30px; color: #9a3412; line-height: 1.5; }
  .support-contact > span { font-size: calc(12px * var(--reader-scale)); font-weight: 600; }
  .support-contact strong { color: #c2410c; font-size: calc(16px * var(--reader-scale)); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: .3px; white-space: nowrap; }
  .support-contact:hover strong { color: #9a3412; text-decoration: underline; text-underline-offset: 4px; }
  .brand-copy { min-width: 0; overflow-wrap: anywhere; }
  .nav-link { display: flex; align-items: baseline; gap: 3px; }
  .nav-section-number { flex-shrink: 0; white-space: nowrap; }
  .nav-link > span:last-child { min-width: 0; }
  .font-control-button { width: max(32px, 2em); height: max(32px, 2em); }
  .font-control-button .icon { width: 1.25em; height: 1.25em; }
  .font-reset { width: max(40px, 2.8em); }
  .font-size-value { min-width: 3.2em; }
  .hero h1 { overflow-wrap: anywhere; }
  .section-intro, .reading-heading { flex-wrap: wrap; }
  #overview, .chapter, .manual-section { scroll-margin-top: calc(var(--sticky-header-height, 130px) + 20px); }
}
@media screen and (max-width: 1100px) {
  .sidebar { width: clamp(286px, calc(226px * var(--reader-scale)), 340px); max-width: calc(100vw - 40px); }
}
@media screen and (max-width: 900px) {
  .site-header .topbar { gap: 8px 12px; }
  .search-trigger { width: 190px; }
}
@media screen and (max-width: 760px) {
  .search-trigger { width: 44px; min-width: 44px; }
  .font-control-button { width: max(40px, 2em); height: 44px; }
  .font-reset { width: max(44px, 2.8em); }
  .contact-strip { justify-content: center; padding: 7px 12px; }
}
@media screen and (max-width: 560px) {
  .site-header .topbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 6px 10px 8px; gap: 4px 8px; }
  .menu-toggle { grid-column: 1; grid-row: 1; }
  .reader-controls-ready .topbar-breadcrumb, .topbar-breadcrumb { display: flex; grid-column: 2; grid-row: 1; min-width: 0; }
  .search-trigger { grid-column: 3; grid-row: 1; }
  .font-controls { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; margin-left: 0; }
}
@media screen and (max-width: 359px) {
  .font-controls-label { display: inline; }
  .hero h1 { font-size: calc(28px * var(--reader-scale)); }
}

/* Technical group joins the overview as a third card on wide screens. */
@media screen {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .75fr); gap: 24px; }
  .hero-community { min-width: 0; padding: 18px 16px 16px; border: 1px solid #dce6f7; border-radius: var(--radius); background: #fff; box-shadow: 0 10px 36px rgb(35 68 128 / 5%); text-align: center; }
  .hero-community h2 { margin: 0 0 12px; color: #344b70; font-size: calc(14px * var(--reader-scale)); font-weight: 650; line-height: 1.6; overflow-wrap: anywhere; }
  .community-qr-link { display: block; width: 100%; max-width: 260px; margin: 0 auto; border-radius: 6px; }
  .community-qr-link img { width: 100%; height: auto; }
  .community-qr-link:hover { box-shadow: 0 0 0 3px #e7efff; }
  .community-expiry { margin: 13px 0 0; padding-top: 12px; border-top: 1px solid #ffedd5; color: #c2410c; font-size: calc(14px * var(--reader-scale)); font-weight: 650; line-height: 1.6; overflow-wrap: anywhere; }
}
@media screen and (max-width: 1359px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
  .hero-main { grid-column: 1 / -1; }
  .hero-community { align-self: center; }
}
@media screen and (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-main { grid-column: auto; }
  .hero-community { width: 100%; max-width: 440px; justify-self: center; padding: 20px; }
}

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

/* Print the complete manual with original, uncropped images. */
@page { size: A4; margin: 15mm; }
@media print {
  :root { color-scheme: light; }
  html { scroll-behavior: auto; scroll-padding: 0; }
  body, body.nav-open, body.dialog-open, body.is-printing { margin: 0; overflow: visible !important; background: #fff; color: #27354b; font-size: 10pt; line-height: 1.65; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .skip-link, .sidebar, .sidebar-overlay, .site-header, .topbar, .hero-eyebrow, .hero-description, .hero-actions, .hero-stats, .hero-flow, .hero-community, .contents-section, .quick-download, .reading-heading, .back-to-top, .toast, dialog, dialog[open], .text-button, .image-zoom-icon, .footer-meta a, noscript { display: none !important; }
  .app-frame { margin: 0; }
  .main { margin: 0; padding: 0; }
  .content-container { width: 100%; max-width: none; margin: 0; }
  .hero { display: block; margin: 0 0 8mm; padding: 0 0 5mm; border-bottom: 1px solid #b8c7df; break-inside: avoid; }
  .hero-main { padding: 0; }
  .hero h1 { margin: 0; color: #243750; font-size: 23pt; line-height: 1.5; letter-spacing: 0; }
  .hero h1 br { display: none; }
  .hero h1 > span { margin-left: .3em; color: #243750; }
  .hero-subtitle { margin-top: 2mm; color: #6c7b92; font-size: 10pt; }
  .chapter { display: block; margin: 0 0 7mm; overflow: visible; border: 0; border-radius: 0; box-shadow: none; scroll-margin: 0; }
  .chapter + .chapter { break-before: page; page-break-before: always; }
  .chapter-heading { gap: 4mm; padding: 0 0 3mm; background: transparent; border: 0; border-bottom: 1px solid #cfd8e5; break-after: avoid-page; page-break-after: avoid; }
  .chapter-index { flex-basis: 11mm; width: 11mm; height: 12mm; margin: 0; border: 1px solid #cad7ed; border-radius: 2mm; background: #f2f5fb; color: #6b87b9; font-size: 16pt; }
  .chapter-eyebrow { color: #8799b5; font-size: 6pt; }
  .chapter-heading h2 { color: #2d4364; font-size: 16pt; }
  .chapter-description { margin-top: 1mm; color: #76859c; font-size: 8pt; }
  .chapter-content { padding: 0; }
  .manual-section { display: block; padding-top: 5mm; scroll-margin: 0; border-radius: 0; }
  .chapter-content > .manual-section + .manual-section { margin-top: 5mm; padding-top: 5mm; border-top: 1px solid #e1e6ef; }
  .manual-section > .manual-section { margin-top: 4mm; padding-top: 1mm; }
  h1, h2, h3, h4, h5, .faq-question { break-after: avoid-page; page-break-after: avoid; }
  .manual-section h3 { margin-bottom: 3mm; font-size: 12pt; }
  .manual-section h4 { margin-bottom: 2mm; font-size: 10.5pt; }
  .manual-section h3, .manual-section h4 { gap: 2mm; }
  .manual-paragraph, .step-text { margin: 2mm 0; color: #43536d; font-size: 9.5pt; line-height: 1.8; orphans: 3; widows: 3; }
  .step-text { padding: 2mm 3mm; border: 1px solid #e0e6ef; background: #f7f9fc; }
  .subheading, .faq-question { font-size: 10pt; }
  .notice { padding: 2.5mm 3mm; margin: 3mm 0; font-size: 8.5pt; break-inside: avoid; page-break-inside: avoid; }
  .inline-link { color: #294f94; text-decoration: underline; }
  .is-targeted { outline: 0; box-shadow: none; background: transparent; }
  .image-grid, .image-grid--wide, .image-grid--single, .image-grid--phones { display: block; margin: 4mm 0 5mm; }
  .manual-figure { display: block; width: 100%; max-width: 100%; margin: 0 0 5mm; break-inside: avoid; page-break-inside: avoid; }
  .image-button, .figure-wide .image-button, .figure-phone .image-button, .figure-compact .image-button { display: block; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .image-button img, .figure-wide img, .figure-phone img, .figure-compact img { display: block; width: auto; max-width: 100%; height: auto; max-height: 224mm; margin: 0 auto; border-radius: 0; object-fit: contain; }
  .figure-phone img { max-height: 150mm; }
  .figure-compact img { max-width: min(100%, 65mm); max-height: 65mm; }
  .manual-figure figcaption { gap: 2mm; margin-top: 2mm; color: #8b98aa; font-size: 7pt; }
  .manual-figure figcaption > span + span { display: none; }
  .table-scroll { width: 100%; margin: 4mm 0; overflow: visible; border: 0; border-radius: 0; }
  .manual-table { width: 100%; border: 1px solid #d5dfed; font-size: 8pt; }
  .manual-table thead { display: table-header-group; }
  .manual-table th, .manual-table td { min-width: 0; padding: 2mm 2.5mm; border-color: #dce3ee; }
  .manual-table th { font-size: 8pt; background: #f0f4fa; }
  .manual-table tr { break-inside: avoid; page-break-inside: avoid; }
  .site-footer { display: flex; align-items: center; margin-top: 6mm; padding: 4mm 0 0; border-top: 1px solid #d4dce8; break-inside: avoid; page-break-inside: avoid; }
  .footer-identity { gap: 4mm; }
  .source-logo { width: 28mm; max-width: 28mm; }
  .footer-identity strong { font-size: 8pt; }
  .footer-identity p, .footer-meta { color: #8794a9; font-size: 7pt; }
  .footer-meta { flex: 0 0 auto; margin-left: auto; }
}