/* Reading-first manual. Keep type, spacing, and image scale consistent. */
:root {
  --canvas: #fcfcfe;
  --paper: #fff;
  --ink: #282638;
  --body: #464353;
  --muted: #656174;
  --violet: #625bc4;
  --violet-deep: #4d46a6;
  --lavender: #f2f0fa;
  --line: #e3e0ec;
  --rail: #f7f7fb;
  --display-font: "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif;
  --body-font: "Segoe UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  --mono-font: "Cascadia Code", "Consolas", monospace;
  --text-body: 1.0625rem;
  --text-small: .875rem;
  --text-caption: .8125rem;
  /* The reference desktop is 1760 x 860 CSS pixels. Bound fluid spacing and
     type separately so smaller windows retain comfortable reading sizes. */
  --layout-unit: clamp(.75rem, min(.909091vw, 1.860465svh), 1.5rem);
  --sidebar-width: clamp(16.5rem, 15.909091vw, 24rem);
  --header-height: clamp(4rem, calc(4.5 * var(--layout-unit)), 6rem);
  --content-width: clamp(52rem, 63.636364vw, 100rem);
  --page-gutter: clamp(1.5rem, calc(3 * var(--layout-unit)), 4.5rem);
  --space-section: calc(2.5 * var(--layout-unit));
  --radius: .75rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--sticky-header-height, var(--header-height)) + 1.75rem); scrollbar-gutter: stable; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--text-body)/1.85 var(--body-font); -webkit-font-smoothing: antialiased; }
body.overlay-open { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; transition: color .16s, background .16s, border-color .16s, box-shadow .16s; }
button, a, input { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
h1, h2, h3 { line-height: 1.5; text-wrap: balance; overflow-wrap: anywhere; }
p, li { overflow-wrap: break-word; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: #ddd9fa; color: var(--ink); }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; width: 1.3125rem; height: 1.3125rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex-shrink: 0; }
.icon.small { width: 1.0625rem; height: 1.0625rem; }
.icon.flip { transform: rotate(180deg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-js .requires-js { display: none; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; padding: 12px 20px; border-radius: 8px; background: var(--violet); color: white; }
.skip-link:focus { top: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 2.875rem; padding: .625rem 1.125rem; border: 1px solid transparent; border-radius: .5rem; font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.button-primary { color: white; background: var(--violet); }
.button-primary:hover { background: var(--violet-deep); }
.button-outline { border-color: #d1cce7; color: var(--violet-deep); background: white; }
.button-outline:hover { border-color: var(--violet); background: var(--lavender); }
.button-small { padding: .625rem .875rem; font-size: var(--text-small); gap: .5rem; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; flex-shrink: 0; }
.icon-button:hover { color: var(--violet); background: var(--lavender); }
.text-link { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #625bc480; }
.text-link:hover { text-decoration-color: var(--violet); }
.text-link > .icon { margin-left: 3px; }
.ui-label { padding: 2px 6px; border: 1px solid #e2def1; border-radius: 5px; background: #f4f2fa; color: var(--violet-deep); font-size: .95em; font-weight: 600; white-space: nowrap; }
.source-ui { color: var(--muted); font-size: .9em; word-break: normal; overflow-wrap: anywhere; }
html:lang(en) .ui-label, html:lang(ko) .ui-label { display: inline-block; max-width: 100%; white-space: normal; vertical-align: baseline; overflow-wrap: anywhere; }
html:lang(ja) { --body-font: "Segoe UI", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; --display-font: var(--body-font); }
html:lang(ko) { --body-font: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; --display-font: var(--body-font); }
html:lang(ko) :is(p, li, h1, h2, h3, .chapter-nav a) { word-break: keep-all; overflow-wrap: anywhere; }

/* Chapter rail */
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; flex-direction: column; width: var(--sidebar-width); padding: calc(1.375 * var(--layout-unit)) calc(1.125 * var(--layout-unit)); border-right: 1px solid var(--line); background: var(--rail); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d7d3e4 transparent; }
.brand { display: flex; align-items: center; gap: .6875rem; padding: 0 .375rem; flex-shrink: 0; }
.brand > span:last-child { min-width: 0; }
.brand-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: var(--violet); border-radius: .6875rem; flex-shrink: 0; }
.brand-mark .icon { width: 1.5625rem; height: 1.5625rem; }
.brand strong { display: block; font: 650 1.125rem/1.4 var(--display-font); }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: .75rem; }
.brand-slash { padding: 0 4px; }
.search-trigger { display: flex; align-items: center; flex-wrap: wrap; gap: .5625rem; width: 100%; min-height: 2.875rem; padding: .625rem .75rem; margin: calc(1.25 * var(--layout-unit)) 0 var(--layout-unit); border: 1px solid #d7d3e4; border-radius: .5rem; background: white; color: var(--muted); font-size: var(--text-small); text-align: left; flex-shrink: 0; }
.search-trigger:hover { border-color: var(--violet); }
.search-trigger .icon { width: 18px; height: 18px; }
kbd { padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; font: .6875rem/1.6 var(--mono-font); color: var(--muted); background: var(--rail); white-space: nowrap; }
.search-trigger kbd { margin-left: auto; }
.chapter-nav { flex: 1 0 auto; }
.chapter-nav a { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; margin: .125rem 0; padding: calc(.5625 * var(--layout-unit)) .625rem; border-radius: .4375rem; font-size: .9375rem; line-height: 1.6; color: var(--body); }
.chapter-nav a:hover { background: #eeebf7; color: var(--violet-deep); }
.chapter-nav a.active { background: #eae6f7; color: var(--violet-deep); font-weight: 600; }
.nav-overview { font-weight: 600; }
.nav-overview .icon, .nav-faq .icon { width: 1.125rem; height: 1.125rem; }
.nav-group { margin-top: calc(1.125 * var(--layout-unit)); }
.nav-label { display: flex; align-items: center; gap: .625rem; padding: 0 .625rem; margin-bottom: calc(.375 * var(--layout-unit)); color: var(--muted); font-size: var(--text-caption); font-weight: 600; line-height: 1.6; letter-spacing: .5px; }
.nav-label .icon { width: 1.125rem; height: 1.125rem; color: var(--violet); }
.nav-items { margin-left: 1.125rem; padding: 0; border-left: 1px solid var(--line); list-style: none; }
.nav-items li { min-width: 0; }
.chapter-nav .nav-items a { position: relative; margin-left: .5rem; padding-left: .75rem; }
.nav-items a.active::before { content: ""; position: absolute; top: .625rem; bottom: .625rem; left: calc(-.5rem - 2px); width: 3px; border-radius: 3px; background: var(--violet); }
.chapter-nav .nav-faq { margin-top: var(--layout-unit); }
.sidebar-bottom { padding: var(--layout-unit) .5rem 0; flex-shrink: 0; }
.reading-progress { margin-bottom: 15px; }
.reading-progress > div { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: var(--text-caption); }
.reading-progress progress { display: block; width: 100%; height: 3px; border: 0; border-radius: 4px; background: var(--line); accent-color: var(--violet); }
.reading-progress progress::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
.reading-progress progress::-webkit-progress-value { background: var(--violet); border-radius: 4px; }
.reading-progress progress::-moz-progress-bar { background: var(--violet); border-radius: 4px; }
.sidebar-platform { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--body); font-size: var(--text-caption); }
.sidebar-platform .icon:first-child { width: 18px; height: 18px; }
.sidebar-platform .icon:last-child { margin-left: auto; }
.sidebar-platform:hover { color: var(--violet); }
.company-name { margin-top: 8px; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.menu-toggle, .nav-close, .mobile-search { display: none; }
.nav-backdrop { position: fixed; inset: 0; z-index: 35; background: #24233866; }

/* A quiet header and a compact overview. */
.workspace { margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 20; min-height: var(--header-height); border-bottom: 1px solid var(--line); background: #fcfcfef5; backdrop-filter: blur(10px); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: var(--content-width); min-height: var(--header-height); padding: .625rem var(--page-gutter); margin: auto; }
.topbar-left, .topbar-actions, .breadcrumb { display: flex; align-items: center; }
.topbar-left { min-width: 0; }
.topbar-actions { gap: 1.125rem; flex-shrink: 0; }
.breadcrumb { gap: 10px; min-width: 0; color: var(--muted); font-size: var(--text-small); line-height: 1.5; }
.breadcrumb > .icon { width: 13px; height: 13px; }
.breadcrumb > span { white-space: nowrap; }
.breadcrumb strong { color: var(--ink); font-weight: 500; }
.language-switcher { position: relative; flex-shrink: 0; }
.language-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem .625rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--paper); color: var(--violet-deep); font-size: var(--text-small); }
.language-toggle:hover, .language-toggle[aria-expanded="true"] { background: var(--lavender); border-color: var(--violet); }
.language-chevron { width: .75rem; height: .75rem; transform: rotate(90deg); }
.language-code { display: none; }
.language-options { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 25; width: 13rem; max-width: calc(100vw - 2rem); padding: .5rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--paper); box-shadow: 0 10px 32px #28263820; }
.language-options > p { padding: .5rem .625rem; color: var(--muted); font-size: var(--text-caption); line-height: 1.6; }
.language-options button { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 44px; padding: .625rem; border: 0; border-radius: .375rem; background: transparent; font-size: .9375rem; text-align: left; }
.language-options button:hover { background: var(--lavender); }
.language-options button[aria-pressed="true"] { color: var(--violet-deep); background: var(--lavender); font-weight: 600; }
.language-options button[aria-pressed="false"] .icon { visibility: hidden; }
.content { width: 100%; max-width: var(--content-width); padding: calc(1.875 * var(--layout-unit)) var(--page-gutter) 0; margin: auto; container: guide / inline-size; }
.content:focus { outline: none; }
.tracked-section { scroll-margin-top: 0; }
.page-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: var(--text-caption); font-weight: 500; letter-spacing: .5px; }
.eyebrow-line { width: 20px; height: 2px; background: var(--violet); }
.language-badge { margin-left: auto; padding: 3px 8px; border: 1px solid var(--line); border-radius: 5px; font-size: .75rem; letter-spacing: 0; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) clamp(15rem, 16.477273vw, 27.1875rem); gap: calc(1.875 * var(--layout-unit)); align-items: center; margin-top: var(--layout-unit); padding: calc(1.75 * var(--layout-unit)) calc(2 * var(--layout-unit)); border: 1px solid #e5e1f2; border-radius: 1rem; background: var(--lavender); }
.hero-copy, .meeting-route { min-width: 0; }
.hero-kicker { display: flex; align-items: center; gap: .5rem; margin-bottom: calc(.75 * var(--layout-unit)); color: #5b5386; font-size: var(--text-small); }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); flex-shrink: 0; }
h1 { font: 700 clamp(2rem, calc(1.25rem + 1.136364vw), 2.5rem)/1.35 var(--display-font); letter-spacing: -.015em; }
h1 span { color: var(--violet-deep); }
.hero-description { margin-top: var(--layout-unit); max-width: 32em; color: var(--body); font-size: 1rem; line-height: 1.8; }
.hero-start { margin-top: calc(1.25 * var(--layout-unit)); min-width: 8.5rem; }
.meeting-route { padding: calc(.875 * var(--layout-unit)) calc(1.125 * var(--layout-unit)); border: 1px solid #e1dced; border-radius: .75rem; background: #fdfcfe; }
.route-heading { display: flex; align-items: center; justify-content: space-between; gap: .625rem; padding-bottom: calc(.625 * var(--layout-unit)); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--text-caption); font-weight: 500; }
.route-heading > .icon { color: var(--violet); }
.route-station { position: relative; display: flex; align-items: flex-start; gap: .75rem; padding: calc(.8125 * var(--layout-unit)) 0 calc(.25 * var(--layout-unit)); }
.route-station:not(.last)::after { content: ""; position: absolute; top: calc(2.25rem + .8125 * var(--layout-unit)); bottom: calc(-.8125 * var(--layout-unit)); left: 1.0625rem; width: 1px; background: #d9d4eb; }
.station-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid #e1dcf4; border-radius: .625rem; background: #f0edfa; color: var(--violet); flex-shrink: 0; }
.station-icon .icon { width: 1.1875rem; height: 1.1875rem; }
.route-station > div { min-width: 0; }
.route-station small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.route-station strong { display: block; margin-top: 2px; font-size: 1rem; font-weight: 600; line-height: 1.6; }
.route-station div > span { display: block; color: var(--muted); font-size: .75rem; }
.route-station .language-pair { display: flex; align-items: center; gap: 7px; color: var(--violet-deep); }
.route-station .language-pair .icon { width: 13px; height: 13px; }
.route-check { margin: 14px 0 0 auto; color: var(--violet); width: 16px; height: 16px; }
.role-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-unit); margin-top: var(--layout-unit); }
.role-links > a { display: flex; align-items: center; gap: .8125rem; padding: calc(.9375 * var(--layout-unit)) calc(1.25 * var(--layout-unit)); border: 1px solid var(--line); border-radius: .625rem; background: var(--paper); }
.role-links > a:hover { border-color: #b9b0db; background: #faf9fe; }
.role-icon { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: .625rem; background: var(--lavender); color: var(--violet); flex-shrink: 0; }
.role-links small { display: block; color: var(--muted); font-size: var(--text-caption); line-height: 1.6; }
.role-links strong { font-size: 1rem; font-weight: 600; }
.role-links a > .icon { width: 18px; height: 18px; margin-left: auto; color: var(--muted); }
.source-note { display: flex; align-items: flex-start; gap: .5625rem; padding-top: calc(1.125 * var(--layout-unit)); color: var(--muted); font-size: var(--text-small); line-height: 1.8; }
.source-note .icon { width: 17px; height: 17px; margin-top: 4px; }
.source-note strong { font-weight: 600; }

/* Reading rhythm: title -> explanation -> action -> image. */
.chapter-divider { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; margin: var(--space-section) 0 calc(1.75 * var(--layout-unit)); padding-bottom: calc(.875 * var(--layout-unit)); border-bottom: 1px solid var(--line); }
.chapter-divider > span:first-child { color: var(--violet-deep); font-size: .9375rem; font-weight: 600; }
.chapter-divider p { color: var(--muted); font-size: var(--text-small); }
.chapter-range { margin-left: auto; color: var(--muted); font: .8125rem var(--mono-font); white-space: nowrap; }
.manual-step { padding-bottom: var(--space-section); margin-bottom: var(--space-section); border-bottom: 1px solid var(--line); }
.manual-step:has(+ .chapter-divider) { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.step-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: calc(1.5 * var(--layout-unit)); }
.step-heading > div { min-width: 0; }
.step-number { display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; border: 1px solid #e2dcf2; border-radius: .6875rem; background: #eeebf8; color: var(--violet-deep); font: 600 1rem var(--mono-font); }
.step-category { margin-bottom: 3px; color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
.step-heading h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: 0; }
.anchor-link { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border-radius: 8px; color: #777086; flex-shrink: 0; }
.anchor-link .icon { width: 18px; height: 18px; }
.anchor-link:hover { color: var(--violet); background: var(--lavender); }
.step-intro, .body-copy, .instructions { max-width: 44em; color: var(--body); font-size: var(--text-body); line-height: 1.85; }
.step-intro { margin-bottom: 16px; }
.instructions { padding-left: 1.5em; margin-bottom: 24px; }
.instructions li { padding-left: .25em; margin-bottom: 10px; }
.instructions li:last-child { margin-bottom: 0; }
.instructions li::marker { color: var(--violet-deep); font-weight: 600; }
.platform-url { overflow-wrap: anywhere; }
.body-copy { margin-bottom: 22px; }
.step-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 38%); gap: calc(2.25 * var(--layout-unit)); align-items: start; }
.step-copy { padding-top: 4px; }
.step-layout .screenshot { margin-top: 0; }
.login-screenshot { width: 100%; max-width: 22.5rem; justify-self: end; }
.callout { display: flex; align-items: flex-start; gap: 12px; max-width: 44em; padding: 16px 20px; margin: 24px 0; border-left: 3px solid #a69bd1; border-radius: 0 8px 8px 0; background: #f3f1f8; color: var(--body); font-size: .9375rem; line-height: 1.85; }
.callout > .icon { width: 20px; height: 20px; margin-top: 4px; color: var(--violet); }
.callout strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ink); }
.inline-note { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: var(--text-small); line-height: 1.85; }
.inline-note .icon { margin-top: 4px; }
.action-path { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 20px 0 24px; }
.action-path > span { padding: 6px 12px; border: 1px solid #e1dced; border-radius: 6px; background: var(--lavender); color: #564975; font-size: .9375rem; }
.action-path > .icon { width: 14px; height: 14px; color: var(--muted); }
.language-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: calc(2.25 * var(--layout-unit)); margin-top: calc(1.5 * var(--layout-unit)); }
.language-explanation > div { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.field-number { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; border-radius: 6px; background: var(--lavender); color: var(--violet-deep); font: 600 .8125rem var(--mono-font); flex-shrink: 0; }
.language-explanation p { color: var(--body); font-size: 1rem; }
.language-explanation strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: var(--text-body); font-weight: 600; }
.language-explanation small { display: block; margin-top: 6px; color: var(--muted); font-size: var(--text-small); }
.language-explanation .bilingual-note { margin-left: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--text-small); }
.compact-screenshot { margin: 0; }
.summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: calc(1.75 * var(--layout-unit)); margin: calc(1.75 * var(--layout-unit)) 0 calc(2 * var(--layout-unit)); }
.summary-substep { min-width: 0; }
.summary-substep h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 1.125rem; font-weight: 600; }
.summary-substep h3 > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--lavender); color: var(--violet-deep); font: 600 .8125rem var(--mono-font); flex-shrink: 0; }
.summary-substep > p { max-width: 44em; color: var(--body); font-size: var(--text-body); line-height: 1.85; }
.summary-grid .summary-substep { display: flex; flex-direction: column; }
.summary-grid .summary-substep > p { flex: 1; }
.summary-final { padding-top: 28px; border-top: 1px solid var(--line); }

/* Keep original pixels; crop only the view, and expose the full screenshot. */
.screenshot { min-width: 0; margin-top: 24px; overflow: hidden; border: 1px solid #dbd7e6; border-radius: 10px; background: var(--paper); }
.image-trigger { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: #f3f1f9; cursor: zoom-in; line-height: 0; }
.image-trigger img { display: block; width: 100%; height: auto; }
.image-trigger:focus-visible { outline-offset: -4px; }
.image-trigger:hover { box-shadow: inset 0 0 0 2px var(--violet); }
.image-trigger.is-cropped { aspect-ratio: var(--crop-ratio); }
.image-trigger.is-cropped img { position: absolute; width: var(--crop-width); max-width: none; height: auto; left: var(--crop-left); top: var(--crop-top); }
figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; min-height: 56px; padding: 6px 12px 6px 16px; border-top: 1px solid var(--line); background: #fdfcfe; color: var(--body); font-size: var(--text-caption); line-height: 1.65; }
figcaption > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.figure-index { color: var(--muted); font: .75rem/1.6 var(--mono-font); white-space: nowrap; }
.figure-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px; border: 0; border-radius: 6px; color: var(--violet-deep); background: transparent; font-size: var(--text-caption); line-height: 1.5; white-space: nowrap; }
.figure-action:hover { background: var(--lavender); }
.figure-action .icon { width: 16px; height: 16px; }
.control-screenshot { max-width: 31.25rem; }
.toolbar-screenshot { max-width: 48.75rem; }
.menu-screenshot .image-trigger { display: flex; align-items: center; justify-content: center; height: 19.375rem; padding: .875rem; background: #f0eef5; }
.menu-screenshot img { width: 100%; height: 100%; object-fit: contain; }
.summary-screenshot { max-width: 100%; }
.image-location { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--muted); font-size: var(--text-small); line-height: 1.8; }
.image-location .icon { margin-top: 4px; }
.detail-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; }
.detail-links > span { color: var(--muted); font-size: var(--text-small); }
.detail-links button { min-height: 44px; padding: 8px 12px; border: 1px solid #d7d0e8; border-radius: 7px; color: var(--violet-deep); background: white; font-size: var(--text-small); }
.detail-links button:hover { border-color: var(--violet); background: var(--lavender); }

.faq-section { margin-top: 44px; padding-bottom: 36px; }
.section-eyebrow { margin-bottom: 8px; color: var(--violet-deep); font-size: var(--text-small); }
.faq-section h2 { font-size: 1.75rem; }
.faq-list { margin-top: 24px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 2px; list-style: none; cursor: pointer; font-size: var(--text-body); font-weight: 600; line-height: 1.8; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { content: ""; }
.faq-list summary .icon { width: 18px; height: 18px; color: var(--muted); transition: transform .18s; }
.faq-list details[open] summary .icon { transform: rotate(90deg); color: var(--violet); }
.faq-list summary:hover { color: var(--violet); }
.faq-list details > p { max-width: 44em; padding: 0 26px 24px 2px; color: var(--body); font-size: 1rem; line-height: 1.85; }
.faq-list p .text-link { display: block; width: fit-content; margin-top: 12px; }
.finish-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 24px; border: 1px solid #e0daed; border-radius: 12px; background: var(--lavender); }
.finish-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e3def5; color: var(--violet); flex-shrink: 0; }
.finish-panel > div { flex: 1 1 290px; }
.finish-panel h2 { font-size: 1.125rem; font-weight: 600; }
.finish-panel p { margin-top: 6px; color: var(--muted); font-size: var(--text-small); }
.finish-panel > .button { margin-left: auto; flex-shrink: 0; }
.page-footer { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 28px 0; margin-top: 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-caption); }
.page-footer strong { display: block; margin-bottom: 7px; color: var(--body); font-size: var(--text-small); font-weight: 600; }
.page-footer a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--violet-deep); }

/* Local search */
dialog { color: var(--ink); font-family: var(--body-font); }
dialog::backdrop { background: #242338a6; }
.search-dialog { width: min(680px, calc(100% - 32px)); max-height: min(760px, 90dvh); padding: 0; overflow: hidden; border: 1px solid #dfdbea; border-radius: 14px; background: var(--paper); box-shadow: 0 20px 80px #17122533; }
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 12px 24px; flex-shrink: 0; }
.search-dialog-heading h2 { font-size: 1.125rem; }
.search-form { display: flex; align-items: center; gap: 10px; margin: 0 24px; padding: 4px 12px; border: 1px solid #b9b2e3; border-radius: 8px; background: #fbfaff; flex-shrink: 0; }
.search-form:focus-within { box-shadow: 0 0 0 3px #625bc416; border-color: var(--violet); }
.search-form > .icon { color: var(--violet); width: 20px; height: 20px; }
.search-form input { width: 100%; min-width: 0; min-height: 48px; padding: 8px 0; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 1rem; }
.search-form input:focus-visible { outline: none; }
.search-form input::-webkit-search-cancel-button { display: none; }
.search-status { margin: 18px 24px 8px; color: var(--muted); font-size: var(--text-small); flex-shrink: 0; }
.search-results { padding: 0 12px 12px; min-height: 0; max-height: min(460px, 52dvh); overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.search-results a { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 8px; }
.search-results a:hover, .search-results a:focus-visible { background: var(--lavender); }
.result-number { min-width: 32px; color: var(--violet-deep); font: .8125rem var(--mono-font); }
.result-text { min-width: 0; }
.result-text strong { display: block; font-size: 1rem; font-weight: 600; }
.result-text small { display: block; margin-top: 4px; color: var(--muted); font-size: var(--text-small); line-height: 1.75; }
.search-results a > .icon { width: 18px; height: 18px; margin-left: auto; color: var(--muted); }
.search-empty { padding: 20px 12px 30px; color: var(--muted); font-size: 1rem; }
.search-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; flex-shrink: 0; }

/* Image reader: useful crop first; full-screen context one click away. */
.image-dialog { width: min(1600px, calc(100% - 40px)); height: calc(100dvh - 40px); max-height: none; padding: 0; overflow: hidden; border: 1px solid #ddd7e9; border-radius: 12px; background: #f1eef5; }
.image-dialog[open] { display: flex; flex-direction: column; }
.image-dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px 10px 22px; border-bottom: 1px solid var(--line); background: white; flex-shrink: 0; }
.image-dialog-toolbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; min-width: 0; }
.image-dialog-toolbar h2 { font-size: 1rem; font-weight: 600; }
.image-counter { color: var(--muted); font: .8125rem var(--mono-font); white-space: nowrap; }
.image-view-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 20px; background: white; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.image-view-modes { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #f6f4fa; }
.image-view-modes button { min-height: 44px; padding: 7px 16px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: var(--text-small); }
.image-view-modes button[aria-pressed="true"] { color: var(--violet-deep); background: white; box-shadow: 0 1px 4px #24233818; font-weight: 600; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 12px; border: 1px solid #d7d0e8; border-radius: 7px; background: white; color: var(--violet-deep); font-size: var(--text-small); }
.text-button:hover { background: var(--lavender); }
.text-button .icon { width: 18px; height: 18px; }
.image-stage { flex: 1; min-height: 0; padding: 18px; overflow: auto; overscroll-behavior: contain; }
.image-canvas { display: flex; justify-content: center; align-items: center; min-width: 100%; min-height: 100%; width: max-content; }
.lightbox-frame { position: relative; overflow: hidden; flex-shrink: 0; background: white; box-shadow: 0 2px 15px #24233816; }
.lightbox-frame img { position: absolute; left: var(--crop-left); top: var(--crop-top); width: var(--crop-width); max-width: none; height: auto; }
.image-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); background: white; flex-shrink: 0; }
.image-dialog-footer > p { color: var(--muted); font-size: var(--text-caption); text-align: center; }
.gallery-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1px solid #d8d1e7; border-radius: 7px; background: white; font-size: var(--text-small); white-space: nowrap; }
.gallery-button:hover:not(:disabled) { color: var(--violet-deep); border-color: #b9b0db; background: var(--lavender); }
.gallery-button .icon { width: 18px; height: 18px; }

/* Fluid desktop type respects browser font preferences and zoom. */
@media screen {
  html { font-size: clamp(100%, calc(.125rem + .795455vw), 200%); }
}
@media (max-width: 1250px) {
  .topbar-actions { gap: 12px; }
}
@media (max-width: 1500px) {
  .topbar-actions { gap: .5rem; }
  .breadcrumb > span:first-child, .breadcrumb > .icon { display: none; }
}
@media (max-width: 900px) {
  :root { --header-height: 4rem; --page-gutter: clamp(1.25rem, 3.5vw, 1.75rem); --content-width: 100%; }
  .workspace { margin-left: 0; }
  .sidebar { width: min(320px, calc(100% - 28px)); padding: 25px 18px 22px; }
  .js .sidebar { visibility: hidden; transform: translateX(-100%); transition: transform .2s ease, visibility .2s; }
  .js .sidebar.is-open { visibility: visible; transform: translateX(0); }
  .sidebar .brand { padding-right: 26px; }
  .brand strong { font-size: 1.0625rem; }
  .nav-close { position: absolute; right: 6px; top: 7px; display: flex; }
  .menu-toggle { display: inline-flex; margin-left: -8px; margin-right: 6px; }
  .mobile-search { display: inline-flex; }
  .chapter-nav a { font-size: 1rem; min-height: 48px; }
  .topbar-inner { padding-top: 8px; padding-bottom: 8px; }
  .breadcrumb > span:first-child, .breadcrumb > .icon { display: none; }
  .breadcrumb { font-size: var(--text-small); }
  .no-js .sidebar { position: relative; width: 100%; border: 0; }
  .no-js .sidebar .chapter-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .no-js .sidebar .sidebar-bottom { display: none; }
}
@media (max-width: 700px) {
  :root { --text-body: 1rem; --page-gutter: 20px; --space-section: 32px; }
  .topbar-inner { gap: 8px; }
  .topbar-left { flex: 1; }
  .breadcrumb strong { font-size: var(--text-small); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .language-current { display: none; }
  .language-code { display: inline; }
  .language-toggle { gap: .25rem; padding: .5rem; }
  .language-toggle > .icon:first-child { display: none; }
  .topbar-actions { gap: 4px; }
  .platform-button { width: 44px; padding: 10px; }
  .platform-button span { display: none; }
  .platform-button .icon { width: 20px; height: 20px; }
  .content { padding-top: 22px; }
  .page-eyebrow { gap: 6px; font-size: .75rem; letter-spacing: 0; }
  .page-eyebrow .eyebrow-line { display: none; }
  .language-badge { font-size: .75rem; padding: 2px 6px; }
  .hero { padding: 24px; margin-top: 14px; }
  h1 { font-size: 2rem; line-height: 1.35; }
  .hero-kicker { font-size: var(--text-caption); margin-bottom: 10px; }
  .hero-description { font-size: 1rem; margin-top: 14px; }
  .hero-start { margin-top: 18px; }
  .role-links { gap: 12px; }
  .role-links > a { display: block; padding: 14px; }
  .role-icon { display: none; }
  .role-links small { font-size: .75rem; }
  .role-links strong { display: block; font-size: .9375rem; margin-top: 4px; line-height: 1.6; }
  .role-links a > .icon { display: none; }
  .source-note { font-size: var(--text-small); }
  .chapter-divider { margin-top: 32px; margin-bottom: 24px; gap: 6px 12px; }
  .chapter-range { display: none; }
  .step-heading { gap: 12px; margin-bottom: 20px; align-items: flex-start; }
  .step-number { width: 44px; height: 44px; margin-top: 2px; }
  .step-heading h2 { font-size: 1.375rem; line-height: 1.5; }
  .anchor-link { display: none; }
  .step-intro, .instructions, .body-copy { font-size: 1rem; line-height: 1.85; }
  .instructions { padding-left: 1.4em; }
  .instructions li { padding-left: .15em; margin-bottom: 12px; }
  .step-copy { padding-top: 0; }
  .step-copy > :last-child { margin-bottom: 0; }
  .step-layout .screenshot, .step-layout .login-screenshot { max-width: 100%; }
  .step-layout .login-screenshot { max-width: 360px; justify-self: center; }
  .callout { padding: 14px 16px; font-size: var(--text-small); }
  .screenshot { margin-top: 20px; }
  figcaption { padding-left: 12px; gap: 2px 6px; }
  figcaption > span { gap: 2px 8px; }
  .figure-action { font-size: var(--text-caption); }
  .image-location { font-size: var(--text-small); }
  .language-explanation .bilingual-note { margin-left: 0; }
  .language-layout .screenshot { margin-top: 0; }
  .summary-grid { gap: 30px; }
  .summary-substep h3 { font-size: 1.125rem; }
  .menu-screenshot { width: 100%; max-width: 490px; }
  .menu-screenshot .image-trigger { height: auto; padding: 10px; }
  .menu-screenshot img { width: 100%; height: auto; }
  .summary-final { padding-top: 24px; }
  .faq-section { margin-top: 36px; }
  .faq-section h2 { font-size: 1.5rem; }
  .faq-list summary { font-size: 1rem; padding: 20px 0; }
  .faq-list details > p { padding-right: 0; }
  .finish-panel { padding: 20px; gap: 12px; }
  .finish-panel > div { flex-basis: 220px; }
  .finish-panel > .button { width: 100%; margin-top: 8px; }
  .page-footer { font-size: var(--text-caption); }
  .search-dialog { width: calc(100% - 20px); max-height: 92dvh; }
  .search-dialog-heading { padding: 12px 12px 10px 18px; }
  .search-form { margin: 0 16px; padding-left: 10px; }
  .search-status { margin-left: 18px; margin-right: 18px; }
  .search-results { padding: 0 8px 8px; }
  .search-results a { gap: 10px; }
  .search-footer { padding: 10px 18px; }
  .image-dialog { width: calc(100% - 12px); height: calc(100dvh - 16px); border-radius: 10px; }
  .image-dialog-toolbar { padding: 8px 8px 8px 14px; gap: 8px; }
  .image-dialog-toolbar > div { display: block; }
  .image-dialog-toolbar h2 { margin-top: 3px; font-size: var(--text-small); }
  .image-counter { font-size: .75rem; }
  .image-view-controls { padding: 8px 10px; gap: 8px; }
  .image-view-modes { padding: 2px; }
  .image-view-modes button { font-size: var(--text-caption); padding: 8px 10px; }
  .text-button { font-size: var(--text-caption); padding: 8px 10px; }
  .text-button .icon { display: none; }
  .image-stage { padding: 10px; }
  .image-dialog-footer { padding: 8px; gap: 8px; }
  .image-dialog-footer > p { font-size: .75rem; line-height: 1.6; }
  .gallery-button { padding: 8px; font-size: var(--text-caption); gap: 3px; }
}
@media (max-width: 360px) {
  :root { --page-gutter: 16px; }
  .hero { padding: 20px; }
  h1 { font-size: 1.875rem; }
  .language-badge { display: none; }
  .role-links { gap: 10px; }
  .role-links > a { padding: 12px; }
  .role-links strong { font-size: .875rem; }
  .image-dialog-footer > p { max-width: 100px; }
}
/* Reflow by the space actually left beside the navigation, including zoom. */
@container guide (max-width: 50rem) {
  .language-layout { grid-template-columns: minmax(0,1fr); }
  .compact-screenshot { width: 100%; max-width: 30.5rem; }
}
@container guide (max-width: 55rem) {
  html:lang(en) .hero { grid-template-columns: minmax(0,1fr) minmax(15rem, 35%); }
  html:lang(en) .role-links > a { flex-wrap: wrap; }
}
@container guide (max-width: 44rem) {
  .step-layout { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
  .step-layout .screenshot { justify-self: start; width: 100%; max-width: 27.5rem; }
  .step-layout .login-screenshot { max-width: 22.5rem; }
}
@container guide (max-width: 42rem) {
  .desktop-break { display: none; }
  .hero { grid-template-columns: minmax(0,1fr); }
  html:lang(en) .hero { grid-template-columns: minmax(0,1fr); }
  .meeting-route { display: none; }
  .summary-grid { grid-template-columns: minmax(0,1fr); gap: 1.875rem; }
  .summary-grid .summary-substep > p { flex: initial; }
  .menu-screenshot { width: 100%; max-width: 30.625rem; }
  .menu-screenshot .image-trigger { height: auto; }
  .menu-screenshot img { width: 100%; height: auto; }
  .role-links > a { flex-wrap: wrap; }
  .step-layout .login-screenshot { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}