/* Shared compact presentation and preferences, kept identical in all four dist folders. */
:root { color-scheme: light; --page: #fafbfd; --control-accent: #155dc0; }
html { font-size: 93.75%; scroll-padding-top: 100px; }
body { background: var(--page); }
[hidden] { display: none !important; }
h1, .producthero h1, .hero h1 { font-size: clamp(34px, 4.1vw, 52px); }
h2 { font-size: clamp(26px, 2.8vw, 38px); }
h3 { font-size: 21px; }
.topline { padding-block: 5px; }
.topline .wrap { flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.header { height: auto; min-height: 66px; }
.header .wrap { flex-wrap: wrap; min-height: 66px; gap: 10px 16px; padding-block: 6px; }
.header .brand strong { font-size: 18px; }
.header .nav { gap: 10px; }
.header .nav a { padding: 8px 10px; }
.header .navcta { margin-left: 0; }
.hero { gap: 40px; padding: 60px 0 50px; }
.hero p { font-size: 17px; margin-top: 20px; }
.section { padding-block: 60px; }
.section-head { gap: 28px; margin-bottom: 30px; }
.section-head > * { min-width: 0; }
.actions { gap: 10px; margin-top: 22px; }
.btn { min-height: 44px; padding: 11px 17px; gap: 14px; }
.grid3, .grid2, .gallery-grid { gap: 20px; }
.feature { padding-block: 22px; }
.feature .num { margin-bottom: 16px; }
.screenshot-card figcaption { padding: 15px; }
.pagehero { padding: 48px 0 36px; }
.pagehero h1, .content h1 { font-size: clamp(32px, 4vw, 48px); }
.content h2 { font-size: 25px; margin-top: 28px; }
.faq details { padding-block: 17px; }
.faq summary { font-size: 17px; }
.language-section { padding-block: 42px; }
.footer { padding-top: 30px; }
.footer-top { margin-bottom: 25px; }
.footer-links { gap: 14px; }
.wrap, .hero > *, .grid2 > *, .grid3 > *, .gallery-grid > *, .band > *, .footer-top > * { min-width: 0; }
.product-row, .record-row, .journey-bottom, .taglist { overflow-wrap: anywhere; }
/* Synapse uses the same density while retaining its own design and illustrated journey. */
.hero-grid { gap: 28px; padding-top: 56px; padding-bottom: 40px; }
.hero-copy h1 { font-size: clamp(36px, 4vw, 54px); margin-block: 18px; }
.hero-copy .lead { font-size: 17px; }
.hero-bottom { padding-block: 18px; gap: 22px; }
.purpose-grid { gap: 32px; margin-top: 36px; }
.purpose-grid h3 { margin-block: 17px 10px; }
.usage-layout, .faq-layout { gap: 50px; }
.journey-label { margin-top: 30px; }
.journey-state { padding: 22px; }
.status-section { padding-block: 60px; }
.contact-section { padding-block: 48px; }
.site-preferences { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 100%; gap: 2px; padding: 2px; margin-left: auto; border: 1px solid #6d829e; border-radius: 999px; background: var(--paper); color: var(--ink); letter-spacing: normal; }
.site-preferences button { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 4px; background: transparent; border: 0; border-radius: 999px; color: inherit; font: 600 12px/1.3 Aptos, 'Segoe UI', sans-serif; cursor: pointer; }
.site-preferences button:hover, .site-preferences button[aria-pressed='true'] { background: var(--wash); }
.site-preferences button:disabled { opacity: .4; cursor: default; }
.site-preferences .site-preferences__reset { min-width: 48px; font-variant-numeric: tabular-nums; }
.site-preferences svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.preferences-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-ui-zoom='75'] { zoom: .75; }
html[data-ui-zoom='90'] { zoom: .9; }
html[data-ui-zoom='100'] { zoom: 1; }
html[data-ui-zoom='110'] { zoom: 1.1; }
html[data-ui-zoom='125'] { zoom: 1.25; }
html[data-ui-zoom='150'] { zoom: 1.5; }
:root[data-theme='dark'] { color-scheme: dark; --accent: #8ebeff; --wash: #233b56; --ink: #e4edf7; --muted: #afc1d3; --line: #3d516b; --paper: #162b42; --page: #0d1b2c; background: var(--page); color: var(--ink); }
:root[data-showcase='casemaster'] { --control-accent: #126e68; }
:root[data-showcase='exorcist'], :root[data-showcase='synapse'] { --control-accent: #5752b6; }
:root[data-theme='dark'][data-showcase='casemaster'] { --accent: #79d8cc; --wash: #183f3c; }
:root[data-theme='dark'][data-showcase='exorcist'], :root[data-theme='dark'][data-showcase='synapse'] { --accent: #c2b6ff; --wash: #302e51; }
[data-theme='dark'] body { background: var(--page); color: var(--ink); }
[data-theme='dark'] .header, [data-theme='dark'] .footer, [data-theme='dark'] .nav, [data-theme='dark'] .strip, [data-theme='dark'] .screenshot-card, [data-theme='dark'] .person, [data-theme='dark'] .appframe { background: var(--paper); }
[data-theme='dark'] .section.soft, [data-theme='dark'] .journey-section { background: #112235; }
[data-theme='dark'] .strip .wrap { color: var(--muted); }
[data-theme='dark'] .screenshot-card img { background: var(--wash); }
[data-theme='dark'] .product-icon, [data-theme='dark'] .appbar, [data-theme='dark'] .demo-footer, [data-theme='dark'] .demo-tabs button { background: var(--paper); color: var(--ink); }
[data-theme='dark'] .demo-tabs button[aria-pressed='true'], [data-theme='dark'] .language-switch button[aria-pressed='true'] { background: var(--control-accent); color: #fff; }
[data-theme='dark'] .btn:not(.secondary), [data-theme='dark'] .navcta { background: var(--control-accent); border-color: var(--control-accent); color: #fff; }
[data-theme='dark'] .btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
[data-theme='dark'] .legal-note { background: #382e1d; }
[data-theme='dark'] input, [data-theme='dark'] textarea, [data-theme='dark'] select { background: var(--paper); color: var(--ink); }
[data-theme='dark'] .synapse-hero { background: linear-gradient(110deg, #171f36, #132d3b); }
[data-theme='dark'] .brand small, [data-theme='dark'] .hero-copy .lead, [data-theme='dark'] .hero-note, [data-theme='dark'] .hero-bottom, [data-theme='dark'] .footer-group a, [data-theme='dark'] .footer-identity p, [data-theme='dark'] .contact-section p { color: var(--muted); }
[data-theme='dark'] .context-sheet, [data-theme='dark'] .assistant-node, [data-theme='dark'] .journey-state, [data-theme='dark'] .journey-controls button[aria-pressed='true'] { background: var(--paper); border-color: var(--line); color: var(--ink); }
[data-theme='dark'] .sheet-top, [data-theme='dark'] .sheet-line, [data-theme='dark'] .sheet-foot, [data-theme='dark'] .record-label, [data-theme='dark'] .record-header, [data-theme='dark'] .journey-label, [data-theme='dark'] .journey-bottom p, [data-theme='dark'] .journey-controls button { color: var(--muted); }
[data-theme='dark'] .next-action, [data-theme='dark'] .version-tag, [data-theme='dark'] .node-icon, [data-theme='dark'] .contact-section, [data-theme='dark'] .language-switch { background: var(--wash); color: var(--ink); }
@media (max-width: 1100px) { .header .nav { top: 100%; background: var(--paper); } .header .nav a { min-height: 44px; } .header .nav.open { max-height: 65vh; overflow-y: auto; } }
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); padding-block: 38px; gap: 30px; } .section { padding-block: 42px; } .section-head { margin-bottom: 22px; } .header .wrap { justify-content: center; } .header .language-switch { margin-left: auto; } .footer-top { gap: 24px; } .site-preferences { margin-inline: auto; } .hero-grid { padding-top: 38px; } }
@media (max-width: 520px) { .usage-layout, .faq-layout, .hero-grid, .purpose-grid, .roadmap, .journey-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .hero-copy h1 { font-size: clamp(32px, 8vw, 42px); } .hero-bottom { flex-wrap: wrap; gap: 12px; } .journey-state { padding: 16px; } .record-row { flex-wrap: wrap; gap: 8px; } .record-label { min-width: 0; } .context-sheet { max-width: 100%; } }
@media (pointer: coarse) { .site-preferences button { min-width: 44px; min-height: 44px; } }
@media print { :root[data-theme] { color-scheme: light; --ink: #14243c; --muted: #3e4d60; --accent: #155dc0; --paper: #fff; --page: #fff; --wash: #eaf1fb; --line: #b7c6d5; background: #fff; } .topline, .header, .site-preferences { display: none; } [data-theme] body, [data-theme] .footer, [data-theme] .section, [data-theme] .journey-state, [data-theme] .contact-section { background: #fff; color: #14243c; } html[data-ui-zoom] { zoom: 1; } }
@media (forced-colors: active) { [data-theme] body, [data-theme] .header, [data-theme] .nav, [data-theme] .footer, [data-theme] .site-preferences, [data-theme] .section, [data-theme] .context-sheet, [data-theme] .assistant-node, [data-theme] .journey-state { background: Canvas; color: CanvasText; } [data-theme] .site-preferences button { border: 1px solid ButtonText; } }

/* Long footer headings must wrap even when CSS zoom narrows a two-column layout. */
.footer-top { overflow-wrap: anywhere; }

.content { overflow-wrap: anywhere; }

[data-theme="dark"] .sheet-line > span, [data-theme="dark"] .record-check, [data-theme="dark"] .next-action > span, [data-theme="dark"] .purpose-number { color: var(--accent); }