/* Brand and reading roles; the selected C + E layout and product geometry stay intact. */
/* Final Electric white tokens are static: no palette selection or JS color flash. */
html[data-palette="1"] {
  --paper: #fafcff;
  --ink: #163a70;
  --muted: #4d6588;
  --ink-soft: #4d6588;
  --blue-deep: #075be8;
  --accent: #0b86ff;
  --blue: #075be8;
  --surface: #ffffff;
  --line: #cbdcf4;
  --line-strong: #a6bfe5;
  --palette-glyph: #3684ff;
  --palette-wash: none;
  --palette-masthead: #075be8;
  --palette-brand-ink: #ffffff;
  --palette-rail: #075be8;
  --palette-rail-ink: #eff6ff;
  --palette-active: #ffffff;
  --palette-active-ink: #0750bb;
  --palette-action: #075be8;
  --palette-action-ink: #ffffff;
  --palette-action-hover: #064ac1;
  --palette-plate: #eaf3ff;
  --palette-plate-ink: #1767d6;
  --palette-language: #ffffff;
  --palette-language-selected: #075be8;
  --palette-language-ink: #ffffff;
  --palette-focus: #075be8;
}
html[data-palette] body.reconstructed-site { background-color: var(--paper); background-image: var(--palette-wash); background-attachment: fixed; }
html[data-palette] .site-nav > .brand { background: var(--palette-masthead); color: var(--palette-brand-ink); }
html[data-palette] .site-nav > .brand img { opacity: 1; filter: none; }
html[data-palette][data-palette-logo="white"] .site-nav > .brand img { filter: brightness(0) invert(1); }
html[data-palette] .nav-github { color: var(--blue-deep); border-color: var(--line-strong); background: var(--palette-language); }
html[data-palette] .language-switch { border-color: var(--line-strong); background: var(--palette-language); }
html[data-palette] .language-switch a { color: var(--muted); }
html[data-palette] .language-switch a[aria-current="page"] { background: var(--palette-language-selected); color: var(--palette-language-ink); }
html[data-palette] .story-motion .story-wayfinder { color: var(--palette-rail-ink); background: var(--palette-rail); }
html[data-palette] .story-wayfinder :is(a, button) { color: var(--palette-rail-ink); }
html[data-palette] .story-wayfinder a[aria-current],
html[data-palette] .story-wayfinder :is(a, button):hover:not(:disabled) { color: var(--palette-active-ink); background: var(--palette-active); border-color: var(--palette-active); }
html[data-palette] .story-wayfinder :is(a, button):focus-visible { outline-color: var(--palette-rail-ink); }
html[data-palette] .button--dark { color: var(--palette-action-ink); background: var(--palette-action); border-color: transparent; }
html[data-palette] .button--dark:hover { color: var(--palette-action-ink); background: var(--palette-action-hover); }
html[data-palette] .button--light { color: var(--blue-deep); border-color: var(--line-strong); background: transparent; }
html[data-palette] .button--light:hover { color: var(--ink); background: var(--surface); }
html[data-palette] .story-kicker b { color: var(--blue-deep); }
html[data-palette] .story-kicker > .story-icon { color: var(--accent); }
html[data-palette] .feature-select button[aria-pressed="true"] { color: var(--blue-deep); background: var(--surface); }
html[data-palette] .format-select button[aria-pressed="true"], html[data-palette] .format-select button:hover { color: var(--palette-action-ink); background: var(--palette-action); border-color: transparent; }
html[data-palette] .local-device-icon, html[data-palette] .migration-bundle { background: var(--palette-plate); border-color: var(--line-strong); color: var(--palette-plate-ink); }
html[data-palette] .local-device-icon svg { fill: var(--palette-plate-ink); }
html[data-palette] .local-save-mark { background: var(--blue); }
html[data-palette] .platform-switch { background: var(--palette-language); border-color: var(--line-strong); }
html[data-palette] .platform-switch button { color: var(--muted); }
html[data-palette] .platform-switch button[aria-pressed="true"] { background: var(--palette-language-selected); color: var(--palette-language-ink); }
html[data-palette] .shortcut-key { color: var(--muted); }
html[data-palette] .app-actor { --ink: #243e4b; --muted: #566f7a; --surface: #f9fcfc; --accent: #386c8c; --blue: #386c8c; }
html[data-palette] .desktop-holder { --ink: #243e4b; }
html[data-palette] :is(.history-continuation, .demo-format-note, .demo-keypress) { color: var(--palette-caption); }
html[data-palette="1"] { --palette-caption: #50698c; }
html[data-palette] .feature-art { --ink: #243e4b; --muted: #566f7a; --surface: #f9fcfc; color: #243e4b; background: #edf3f5; }
html[data-palette] ::selection { background: #c4e0ff; color: #123b75; }
html[data-palette] :focus-visible { outline-color: var(--palette-focus); }

/* Marketing copy uses screen-size roles, not the product illustration's scale.
   16px body follows USWDS guidance; compact labels and captions have separate roles.
   rem units retain browser font preferences. Native product UI is intentionally excluded. */
.reconstructed-site {
  --type-body: 1rem;
  --type-label: .875rem;
  --type-caption: .75rem;
}
.story-motion .story-world { --copy-scale: var(--world-scale, 1); }
.reconstructed-site .chapter-copy .story-description,
.reconstructed-site .feature-example figcaption p,
.reconstructed-site .format-notes-track article > p {
  font-size: calc(var(--type-body) / var(--copy-scale, 1));
  line-height: 1.65;
}
.reconstructed-site .chapter-copy .button,
.reconstructed-site .feature-select button,
.reconstructed-site .format-select button,
.reconstructed-site .platform-switch button,
.reconstructed-site .shortcut-key,
.reconstructed-site .settings-details .settings-catalog p,
.reconstructed-site .privacy-features li,
.reconstructed-site .format-notes-track article li {
  font-size: calc(var(--type-label) / var(--copy-scale, 1));
  line-height: 1.5;
}
.reconstructed-site .settings-details .settings-catalog h3 {
  font-size: calc(var(--type-body) / var(--copy-scale, 1));
}
.reconstructed-site .story-kicker,
.reconstructed-site .chapter-copy .hero-meta,
.reconstructed-site .local-device strong,
.reconstructed-site .migration-path {
  font-size: calc(var(--type-caption) / var(--copy-scale, 1));
  line-height: 1.5;
}
.reconstructed-site .nav-github { font-size: var(--type-label); }
.reconstructed-site .language-switch a,
.reconstructed-site .story-status,
.reconstructed-site .story-controls [data-demo-pause] { font-size: var(--type-caption); }
.reconstructed-site .chapter-copy .button,
.reconstructed-site .feature-select button,
.reconstructed-site .format-select button,
.reconstructed-site .chapter-copy .platform-switch button {
  min-height: calc(44px / var(--copy-scale, 1));
}

/* The opening keeps the product front-on and readable before it docks to the desktop. */
.story-motion .intro-heading { top: 22px; left: 100px; width: 1240px; text-align: center; }
.story-motion .intro-heading .story-kicker, .story-motion .intro-heading .hero-actions { justify-content: center; }
.story-motion .intro-heading h1 { font-size: 62px; line-height: 1.15; margin-bottom: 18px; }
.story-motion .intro-heading .story-description { max-width: 1080px; margin-inline: auto; }
.story-motion .intro-heading .hero-actions { margin-top: 22px; }
.reconstructed-site .intro-heading .hero-downloads { display: grid; grid-template-columns: 1fr 1fr .98fr; align-items: stretch; gap: 12px; width: min(100%, 920px); margin-inline: auto; }
.reconstructed-site .hero-downloads .button { min-width: 0; width: 100%; padding: 10px 12px; }
.hero-downloads .platform-icon { width: 24px; height: 24px; padding: 3px; box-sizing: content-box; border-radius: 5px; background: #fff; flex-shrink: 0; }
.hero-downloads .button span { text-align: center; }
.reconstructed-site .intro-heading .hero-netdisk { max-width: 100%; min-height: calc(46px / var(--copy-scale, 1)); border-color: var(--line-strong); background: var(--palette-plate); color: var(--blue-deep); font-weight: 550; text-align: center; }
.hero-downloads .hero-netdisk svg { width: 20px; height: 20px; flex-shrink: 0; }
.intro-heading .hero-netdisk:hover { background: var(--surface); }
@media (max-width: 700px) {
  .reconstructed-site .intro-heading .hero-downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-downloads .hero-netdisk { grid-column: 1 / -1; }
}
.story-motion .intro-colophon { top: 755px; left: 132px; width: 1176px; }
.story-motion .chapter-copy--desktop .chapter-heading { top: 105px; }
.story-motion .chapter-copy--desktop h2 { font-size: 52px; }
html[lang="en"] .story-motion .chapter-copy--desktop h2 { font-size: 44px; }
.story-motion .desktop-note { left: 575px; right: auto; bottom: 92px; width: 765px; color: var(--muted); text-align: center; font: calc(var(--type-caption) / var(--copy-scale)) / 1.5 var(--mono); }
.desktop-holder .desktop-copy { width: 100%; margin-top: 30px; padding-inline: 30px; }
.desktop-holder .desktop-shortcut-mark { margin-top: 12px; }
.platform-icon { display: block; object-fit: contain; flex-shrink: 0; }
.platform-switch .platform-icon { width: 22px; height: 22px; padding: 3px; box-sizing: content-box; border-radius: 4px; background: #fff; }
.local-device-icon .platform-icon { width: 43px; height: 43px; }
.local-device--mac .platform-icon { width: 52px; height: 52px; }
.vp-product-surface .vp-native-icon { fill: currentColor; stroke: none; }
.vp-product-surface .vp-app-tab { max-width: none; }
.vp-tab-emoji { line-height: 1; font-size: 15px; }
.vp-tag-marker { width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; flex: 0 0 auto; }
.reading-product, .local-reading-cards { --vp-source-offset: -3px; font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif; }
.local-reading-cards .vp-clip-card header { height: 40px; min-height: 40px; }
.local-reading-cards .vp-clip-card__body { height: calc(100% - 40px); }
.vp-rich-card { padding: 8px 5px; }
.vp-rich-card table { width: 100%; min-width: 0; table-layout: fixed; font-size: 10px; line-height: 1.3; }
.vp-rich-card th, .vp-rich-card td { padding: 5px 2px; white-space: normal; overflow-wrap: normal; vertical-align: middle; }
.vp-rich-card th:nth-child(1) { width: 38%; }
.vp-rich-card th:nth-child(2) { width: 24%; }
.vp-rich-card th:nth-child(3) { width: 38%; }
.vp-rich-card .vp-rich-link, .vp-rich-card .vp-rich-color { white-space: nowrap; font-size: 9px; }
html[lang="en"] .vp-rich-card table { font-size: 9.5px; }
html[lang="en"] .vp-rich-card th, html[lang="en"] .vp-rich-card td { padding: 3px 1px; }
html[lang="en"] .vp-rich-card th:nth-child(1) { width: 34%; }
html[lang="en"] .vp-rich-card th:nth-child(2) { width: 28%; }
html[lang="en"] .vp-rich-card th:nth-child(3) { width: 38%; }
.desktop-reading-window, .local-reading-cards { display: none; }
.reading-preview-popup { position: relative; width: 100%; padding: 8px; border-radius: 12px; background: rgba(246,246,244,.88); box-shadow: 0 16px 32px -18px #163a7044; }
.reading-preview-popup > img { display: block; width: 100%; height: auto; border-radius: 10px; }
.reading-preview-caption { display: flex; gap: 12px; align-items: center; margin-top: 18px; font-size: 14px; line-height: 1.5; }
body:not(.story-motion) .scene-preview { width: min(100%, 420px); }
body:not(.story-motion) .queue-shortcut { flex-wrap: wrap; gap: 12px; }
body:not(.story-motion) .desktop-holder { display: block; order: 2; width: min(100%, 900px); align-self: center; }
body:not(.story-motion) .desktop-holder .shortcut-desktop { width: 100%; height: auto; aspect-ratio: 900 / 564; min-height: 0; }
body:not(.story-motion) .desktop-copy { margin-top: 16px; padding-inline: 16px; }
body:not(.story-motion) .desktop-reading-window { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: calc(270px * var(--reading-scale, .3)); overflow: hidden; z-index: 2; }
.reading-product { width: 1120px; --vp-app-height: 270px; --vp-bar-height: 48px; --vp-card-width: 168px; --vp-card-height: 184px; --vp-card-header: 44px; --vp-source-frame: 48px; --vp-source-height: 46px; --vp-source-icon: 42px; transform: scale(var(--reading-scale, .3)); transform-origin: top left; }
body:not(.story-motion) .local-reading-cards { display: grid; grid-template-columns: repeat(3, 168px); justify-content: center; gap: 12px; margin-bottom: 36px; --vp-card-width: 168px; --vp-card-height: 184px; --vp-card-header: 44px; --vp-source-frame: 48px; --vp-source-height: 46px; --vp-source-icon: 42px; }
@media (max-width: 600px) {
  body:not(.story-motion) .local-reading-cards { grid-template-columns: repeat(2, minmax(0, 168px)); gap: 10px; }
  .local-reading-cards .vp-clip-card { width: 100%; min-width: 0; }
  .local-device-icon .platform-icon { width: 34px; height: 34px; }
  .local-device--mac .platform-icon { width: 42px; height: 42px; }
  .feature-art .scene-cards.vp-product-surface { --vp-card-width: 168px; --vp-card-height: 184px; flex-wrap: wrap; width: 100%; gap: 16px; }
  .feature-art :is(.scene-history, .scene-formats, .scene-tags) { width: 100%; }
  .feature-art .scene-formats .vp-clip-card:is(:first-child, :last-child) { transform: none; }
  .feature-art .scene-drag { width: 100%; transform: none; }
}
@media (max-width: 360px) {
  body:not(.story-motion) .local-reading-cards { grid-template-columns: 168px; }
}