:root {
  --header-height: 84px;
  --header-surface: #f5f4f8ed;
  --control-hover: #e9e3f2;
  --button-ink: #fff;
  scroll-padding-top: calc(var(--header-height) + 24px);
}
:root[data-appearance="dark"] {
  color-scheme: dark;
  --ground: #17161c;
  --paper: #232129;
  --ink: #f1eef6;
  --muted: #b7b0c2;
  --accent: #bba5ee;
  --accent-deep: #cbb8f8;
  --lavender: #302a3d;
  --lavender-soft: #292431;
  --stage: #252b33;
  --mint: #27352e;
  --blue: #262d3b;
  --header-surface: #17161cee;
  --control-hover: #36303f;
  --button-ink: #201a2b;
}
.site-header.frame {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-height);
  padding-inline: max(var(--gutter), calc((100% - 1280px) / 2));
  background: var(--header-surface);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  gap: 18px;
}
.site-header .brand { flex-shrink: 0; }
.site-header > nav { gap: clamp(18px, 2vw, 30px); margin-left: auto; white-space: nowrap; }
.site-header > .button { white-space: nowrap; flex-shrink: 0; }
.site-header .home-tutorial-mobile { display: none; }
.site-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.site-control { position: relative; font-size: 14px; line-height: 1.4; }
.site-control > summary { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 42px; height: 44px; border-radius: 100px; cursor: pointer; list-style: none; }
.site-control > summary::-webkit-details-marker { display: none; }
.site-control > summary svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.language-control > summary { padding-inline: 9px; }
.language-control > summary svg { width: 17px; height: 17px; }
.site-control[open] > summary, .site-control > summary:hover { background: var(--control-hover); }
.control-popover { position: absolute; z-index: 110; right: 0; top: calc(100% + 12px); width: max-content; min-width: 164px; max-width: calc(100vw - 40px); max-height: calc(100dvh - var(--header-height) - 32px); overflow-y: auto; background: var(--paper); color: var(--ink); padding: 8px; margin: 0; border-radius: 16px; box-shadow: 0 10px 40px #0002; list-style: none; }
.control-popover a, .control-popover button { display: flex; width: 100%; align-items: center; gap: 18px; min-height: 44px; padding: 10px 14px; border-radius: 10px; background: transparent; color: inherit; text-align: left; font-size: 14px; white-space: nowrap; }
.control-popover a:hover, .control-popover button:hover { background: var(--control-hover); }
.control-popover [aria-current="page"], .control-popover [aria-pressed="true"] { color: var(--accent-deep); font-weight: 600; }
.control-popover [aria-current="page"]::after, .control-popover [aria-pressed="true"]::after { content: "✓"; margin-left: auto; }
.mobile-navigation { display: none; }
.appearance-moon { display: none; }
:root[data-appearance="dark"] .appearance-moon { display: block; }
:root[data-appearance="dark"] .appearance-sun { display: none; }
.skip-link { z-index: 150; }
.reading-nav { top: calc(var(--header-height) + 24px); max-height: calc(100dvh - var(--header-height) - 48px); overflow-y: auto; }
:is(.article-section, .guide-article h2, .hero-object, section[id]) { scroll-margin-top: 0; }
/* Swap native screenshots with their real dark captures; keep document colors readable. */
:root[data-appearance="dark"] .theme-stage { background: #191919; }
:root[data-appearance="dark"] :is(.real-search img, .transfer-preview-content img[src$="transfer-preview.webp"], .transfer-rail-thumb[src$="transfer-preview.webp"]) { filter: brightness(.86) saturate(.95); }
.tutorial-page { --guide-ink: var(--ink); }
.guide-article td { background: var(--ground); }
.button-primary, .contact-action a { color: var(--button-ink); }
:root[data-appearance="dark"] .button-dark, :root[data-appearance="dark"] .transfer-play { background: #c8b7e7; color: #211a2e; }
:root[data-appearance="dark"] .button-dark:hover, :root[data-appearance="dark"] .transfer-play:hover { background: #dacaf5; }
:root[data-appearance="dark"] :is(.demo-topbar, .card-origin, .demo-instruction, .target-title, .target-placeholder, .search-mode, .search-result, .capture-demo-label, .capture-window-bar, .capture-empty, .capture-card-kind, .capture-card-ready, .capture-status, .transfer-demo-label, .transfer-source-kept, .transfer-source-item small, .transfer-shelf-title > button, .transfer-empty, .transfer-empty > span:last-child, .transfer-mail-subject, .transfer-mail-empty, .transfer-keyboard-hint) { color: var(--muted); }
:root[data-appearance="dark"] :is(.note-card, .file-card, .capture-hanging-card, .transfer-rail-card) { background: #38313e; }
:root[data-appearance="dark"] .picture-card { background: #30394a; }
:root[data-appearance="dark"] .link-card { background: #2e4037; }
:root[data-appearance="dark"] :is(.demo-bottom, .search-field, .capture-modes, .capture-controls, .transfer-source-window, .transfer-mail-window, .transfer-ghost) { background: var(--paper); }
:root[data-appearance="dark"] :is(.capture-window, .capture-window-bar, .transfer-window-title, .transfer-mail-window .transfer-window-title, .transfer-platform, .transfer-collect, .transfer-deliver, .transfer-shelf, .transfer-shelf-tools button, .transfer-attachment, .transfer-dialog-heading, .transfer-dialog-footer) { background: #302c3c; }
:root[data-appearance="dark"] :is(.transfer-source-item[aria-pressed="true"], .transfer-shelf-tools [aria-pressed="true"], .transfer-source-item:hover, .reset-demo:hover, .capture-mode[aria-selected="false"]:hover, .capture-reset:hover) { background: #453b58; color: var(--ink); }
:root[data-appearance="dark"] .ocr-note { background: #304035; }
:root[data-appearance="dark"] :is(.ocr-note-heading, .ocr-note p, .ocr-caption) { color: #d5e7d7; }
:root[data-appearance="dark"] mark { background: #685581; color: #fff; }
:root[data-appearance="dark"] .continuity-section { background: #24202e; }
html[lang="en"] h1, html[lang="es"] h1 { letter-spacing: -.055em; }
html[lang="ja"] { font-family: "Hiragino Sans", "Yu Gothic", Meiryo, -apple-system, sans-serif; }
html[lang="zh-Hant"] { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif; }
html[lang="en"] .hero-copy h1, html[lang="es"] .hero-copy h1 { max-width: 15ch; margin-inline: auto; font-size: clamp(48px, 6.4vw, 86px); }
html[lang="en"] .brand-cn, html[lang="es"] .brand-cn, html[lang="ja"] .brand-cn { display: none; }
html[lang="en"] .article-heading .title-phrase, html[lang="es"] .article-heading .title-phrase { white-space: normal; }
html[lang="en"] .note-lines, html[lang="es"] .note-lines { font-size: 19px; line-height: 1.3; }
html[lang="en"] .note-lines > span, html[lang="es"] .note-lines > span { font-size: 11px; }
.capture-controls, .transfer-topbar, .theme-caption { flex-wrap: wrap; }
.transfer-source-item strong { white-space: normal; overflow-wrap: anywhere; }
.capture-primary, .transfer-play { flex-shrink: 0; }
@media (max-width: 1180px) {
  .site-header > nav, .tutorial-page .site-header > nav { display: none; }
  .site-header > .button { margin-left: auto; }
  .site-header .site-tools { margin-left: auto; }
  .site-header > .button + .site-tools { margin-left: 0; }
  .mobile-navigation { display: block; }
}
@media (max-width: 650px) {
  :root { --header-height: 72px; }
  .site-header.frame { gap: 8px; }
  .site-header > .brand { font-size: 18px; gap: 7px; }
  .site-header > .brand img { width: 28px; height: 28px; }
  .site-header .header-get-product, .site-header > .button > [aria-hidden] { display: none; }
  .site-header > .button { padding: 10px 12px; min-height: 42px; gap: 0; }
  .site-tools { gap: 0; }
  .language-control > summary { padding-inline: 5px; }
  .language-control > summary svg { display: none; }
  .site-control > summary { min-width: 40px; }
  .control-popover { top: calc(100% + 10px); }
  .language-control .control-popover { right: -80px; }
  .appearance-control .control-popover { right: -40px; }
  html[lang="en"] .hero-copy h1, html[lang="es"] .hero-copy h1 { font-size: clamp(40px, 11.5vw, 66px); }
  html[lang="en"] .note-lines, html[lang="es"] .note-lines { font-size: 14px; }
  html[lang="en"] .note-lines > span, html[lang="es"] .note-lines > span { font-size: 9px; }
  .capture-topbar { align-items: start; flex-wrap: wrap; }
  .capture-demo-label { white-space: normal; }
  .capture-window-bar { padding-inline: 46px 12px; white-space: normal; }
  .capture-selection-label { white-space: normal; max-width: 90%; }
  .transfer-window-title { flex-wrap: wrap; }
  .transfer-source-kept { white-space: normal; }
  .guide-article :is(th, td):first-child { width: 42%; }
}
@media (max-width: 370px) {
  .site-header > .brand > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}