/* Salmon now uses the neutral palette formerly called v3. New tabs open in dark mode.
   Amolfi remains a color comparison. The shared glass card material is now final. */
:root { --appearance-ink-rgb:25 26 26; --appearance-button:#181b1b; --appearance-button-ink:#f3f4f4; --appearance-control:#e0e2e2; --appearance-input:#ffffffe0; }
html[data-site-mode="dark"] { color-scheme:dark; }
html[data-site-mode="light"] { color-scheme:light; }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"]) {
  --salmon:#2ab47e; --salmon-light:#2ab47e; --salmon-ink:#0e1b15;
  --preview-bg:#f3f4f4; --preview-text:#181b1b; --preview-muted:#181b1b99; --preview-faint:#181b1b99;
  --preview-link:#229065; --preview-surface:hsl(156 2.7% 90.4%); --preview-panel:#f3f4f4f2;
  --preview-line:rgb(25 26 26 / .14); --preview-segment:rgb(25 26 26 / .04);
  --preview-selected:#fff; --preview-selected-ink:#181b1b; --preview-shadow:#0000001b; --preview-veil:#201c1626;
  --ocean-dither-rgb:25,26,26; --appearance-ink-rgb:25 26 26; --mkt-ink-rgb:25 26 26;
  --appearance-control:#e0e2e2; --appearance-input:#ffffffe0;
  --appearance-button:#181b1b; --appearance-button-ink:#f3f4f4;
  /* At Salmon's unchanged 72% opacity, this tint rests at Amolfi's #e6e7e7 tile color. */
  --salmon-glass-fill:rgb(225 226 226 / .72);
}
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"])[data-site-mode="dark"] {
  --preview-bg:#0e0e0e; --preview-text:#f0f0f0; --preview-muted:#f0f0f099; --preview-faint:#f0f0f099;
  --preview-link:#2ab47e; --preview-surface:hsl(156 2.1% 9%); --preview-panel:#171717f2;
  --preview-line:rgb(255 255 255 / .1); --preview-segment:rgb(255 255 255 / .04);
  --preview-selected:#252525; --preview-selected-ink:#f0f0f0; --preview-shadow:#00000040; --preview-veil:#00000066;
  --ocean-dither-rgb:240,240,240; --appearance-ink-rgb:255 255 255; --mkt-ink-rgb:255 255 255;
  --appearance-control:#252525; --appearance-input:#202020e0;
  --appearance-button:#f0f0f0; --appearance-button-ink:#0e0e0e;
  --salmon-glass-fill:rgb(25 26.5 26.5 / .72);
}
/* Salmon: Amolfi's neutral marketing surfaces with Salmon's product accent.
   Dither matches the near-black canvas between the fish. */
html[data-site-theme="salmon"] {
  --salmon:#fa8072; --salmon-light:#ffa394; --salmon-ink:#251713;
  --preview-link:#a13f36;
}
html[data-site-theme="salmon"][data-site-mode="dark"] {
  --preview-bg:#0a0a0a; --preview-link:#ffab9d; --appearance-button-ink:#000;
  --ocean-dither-rgb:10,10,10;
  /* Same resting gray as Amolfi's tiles, compensated for the near-black backdrop. */
  --salmon-glass-fill:rgb(27 28 28 / .72);
}
/* Marketing chrome follows the website palette; native demo colors live in demos.css.
   Editorial artwork and third-party screenshots are never recolored with filters. */
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) .connection-dialog { background:var(--preview-panel); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) .connection-dialog::backdrop { background:var(--preview-veil); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) .connection-dialog-close { color:var(--preview-muted); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) .connection-plus { background:var(--preview-panel); color:var(--preview-muted); border-color:var(--preview-line); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) .connection-button:hover .connection-plus { background:var(--preview-surface); color:var(--preview-link); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) .salmon-billing-thumb { background:var(--preview-selected); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) :is(.salmon-plan-action,.salmon-plan-action:disabled,.account-secondary-button,.account-actions>.account-secondary,.account-dialog-actions button:first-child) { background:var(--appearance-control); color:var(--preview-text); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) .salmon-plan-card[data-plan="salmon"] .salmon-plan-action { background:var(--salmon); color:var(--salmon-ink); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) :is(.launch-download,.account-sign-in-form button,.account-primary-button) { background:var(--appearance-button); color:var(--appearance-button-ink); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) :is(.launch-download,.account-sign-in-form button,.account-primary-button):hover { background:color-mix(in srgb,var(--appearance-button) 90%,var(--preview-bg)); color:var(--appearance-button-ink); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) .account-sign-in-form input { background:var(--appearance-input); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"],[data-site-mode="dark"]) .launch-replay { background:var(--preview-panel); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"]) .salmon-plans { --plan-ink:hsl(156 1.35% 5.3%); --plan-muted:rgb(25 26 26 / .65); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"])[data-site-mode="dark"] .salmon-plans { --plan-ink:#fff; --plan-muted:rgb(255 255 255 / .6); }
html:is([data-site-theme="amolfi"],[data-site-theme="salmon"]) .salmon-plans .salmon-plan-card .salmon-plan-action { background:var(--plan-ink); color:var(--appearance-button-ink); }

/* The review controls are separate from the site's design: close them to compare the unobscured page. */
.website-colors-button { position:fixed; z-index:60; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:8px; height:44px; padding:0 16px; border:1px solid var(--preview-line); border-radius:999px; background:var(--preview-panel); color:var(--preview-text); box-shadow:0 4px 18px var(--preview-shadow),inset 0 1px 0 #ffffff70; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font:500 14px/20px Inter,system-ui,sans-serif; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.website-colors-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.website-colors-dialog { position:fixed; inset:auto max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) auto; width:min(340px,calc(100vw - 24px)); max-width:none; max-height:calc(100dvh - 24px); box-sizing:border-box; margin:0; padding:22px; border:1px solid var(--preview-line); border-radius:24px; background:var(--preview-panel); color:var(--preview-text); box-shadow:0 12px 36px var(--preview-shadow),inset 0 1px 0 #ffffff70; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); overflow:auto; font:400 14px/1.4 Inter,system-ui,sans-serif; }
.website-colors-dialog::backdrop { background:transparent; }
.website-colors-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; }
.website-colors-heading h2 { margin:0; color:var(--preview-text); font:500 19px/26px Inter,system-ui,sans-serif; letter-spacing:-.02em; }
.website-colors-close { display:grid; place-items:center; width:44px; height:44px; margin:-8px -8px -8px 0; padding:12px; border:0; border-radius:10px; background:transparent; color:var(--preview-muted); cursor:pointer; }
.website-colors-close svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; }
.website-colors-dialog fieldset { min-width:0; padding:0; margin:0; border:0; }
.website-colors-dialog legend,.website-colors-dialog input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.website-modes { display:grid; grid-template-columns:1fr 1fr; gap:3px; background:var(--preview-segment); border-radius:999px; padding:3px!important; }
.website-modes label { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-radius:999px; color:var(--preview-muted); cursor:pointer; }
.website-modes label:has(input:checked) { background:var(--preview-selected); color:var(--preview-selected-ink); box-shadow:0 1px 4px var(--preview-shadow); }
.website-modes svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
.website-themes { display:grid; gap:8px; margin-top:18px!important; }
.website-theme-option { display:flex; align-items:center; gap:12px; min-height:72px; box-sizing:border-box; padding:12px; border:1px solid var(--preview-line); border-radius:14px; cursor:pointer; }
.website-theme-option:has(input:checked) { background:var(--preview-segment); border-color:var(--preview-muted); }
.website-theme-option strong { display:block; color:var(--preview-text); font-weight:500; }
.website-theme-option small { display:block; margin-top:3px; color:var(--preview-muted); font-size:12px; }
.website-theme-swatches { display:flex; flex:none; }
.website-theme-swatches i { width:18px; height:32px; border:1px solid #00000012; }
.website-theme-swatches i:first-child { border-radius:8px 0 0 8px; }
.website-theme-swatches i:last-child { border-radius:0 8px 8px 0; }
.website-theme-swatches.salmon i:nth-child(1){background:#f3f4f4}.website-theme-swatches.salmon i:nth-child(2){background:#171717}.website-theme-swatches.salmon i:nth-child(3){background:#fa8072}
.website-theme-swatches.amolfi i:nth-child(1){background:#f3f4f4}.website-theme-swatches.amolfi i:nth-child(2){background:#171717}.website-theme-swatches.amolfi i:nth-child(3){background:#2ab47e}
html[data-site-mode="dark"] .website-theme-swatches.salmon i:first-child { background:#0a0a0a; }
html[data-site-mode="dark"] .website-theme-swatches.amolfi i:first-child { background:#0e0e0e; }
.website-colors-button:hover,.website-colors-close:hover { background:var(--preview-surface); }
.website-colors-dialog label:has(input:focus-visible),.website-colors-button:focus-visible,.website-colors-close:focus-visible { background:color-mix(in srgb,var(--preview-text) 12%,var(--preview-surface)); outline:none; box-shadow:none; }
html.theme-picker-open { overflow:hidden; }
html.theme-picker-open body { position:fixed; top:var(--theme-scroll-top); left:0; right:0; width:100%; overflow:hidden; }
@media(prefers-reduced-transparency:reduce) { .website-colors-dialog,.website-colors-button { background:var(--preview-surface); -webkit-backdrop-filter:none; backdrop-filter:none; } }
@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))) { .website-colors-dialog,.website-colors-button { background:var(--preview-surface); } }
@media print { .website-colors-dialog,.website-colors-button { display:none!important; } }

/* One final card shape and material across the marketing site. Native app demos,
   circular controls keep their geometry; marketing pills use native-matched continuous capsules. */
:root { --site-corner:24px; --site-card-fill:var(--salmon-glass-fill); --site-card-solid:var(--preview-surface); }
html[data-site-mode="dark"] { --site-card-fill:rgb(32 32 32 / .72); --site-card-solid:#1a1a1a; }
html[data-site-theme="amolfi"][data-site-mode="dark"] { --site-card-fill:rgb(31 31 31 / .72); }
html[data-site-theme] :is(.salmon-glass,.salmon-plan-card,.home-news-card,.news-card:not(.news-card-compact),.account-card,.account-dialog,.account-preview-switcher,.handbook-entry-board,.handbook-search,.salmon-home .tab-pane,.connection-dialog,.salmon-mobile-links) {
  background:var(--site-card-fill); border-color:transparent; border-radius:var(--site-corner);
  box-shadow:none; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
html[data-site-theme] :is(.salmon-plan-action,.salmon-plan-action:disabled,.website-theme-option,.website-colors-dialog,.trust-art img,.news-card-compact .news-editorial-media,.news-article-body pre,.salmon-news-callout,.handbook-code,.account-notice,.account-license,.account-plan-choices button,.account-actions > button:not(.account-link-button),.account-dialog-actions button) { border-radius:var(--site-corner); }
/* Keep native application artwork and its typography independent of marketing surfaces. */
html[data-site-mode="dark"] :is(.salmon-sync-copy h2,.salmon-feature-copy h3,.salmon-feature-copy p) { color:#fff; }
html[data-site-mode="dark"] .salmon-sync-copy p { color:#7d8187; }
html[data-site-mode="dark"] :is(.website-colors-button,.website-colors-dialog) { border-color:#ffffff0d; box-shadow:0 6px 20px #00000020; }
@media (prefers-reduced-transparency:reduce) {
  html[data-site-theme] :is(.salmon-glass,.salmon-plan-card,.home-news-card,.news-card:not(.news-card-compact),.account-card,.account-dialog,.account-preview-switcher,.handbook-entry-board,.handbook-search,.salmon-home .tab-pane,.connection-dialog,.salmon-mobile-links) { background:var(--site-card-solid); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))) {
  html[data-site-theme] :is(.salmon-glass,.salmon-plan-card,.home-news-card,.news-card:not(.news-card-compact),.account-card,.account-dialog,.account-preview-switcher,.handbook-entry-board,.handbook-search,.salmon-home .tab-pane,.connection-dialog,.salmon-mobile-links) { background:var(--site-card-solid); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* Continuous corners are the default. Vector paths work in Safari; ordinary
   CSS rounding remains a fallback when scripting/path clipping is unavailable. */
html[data-site-corners="squircle"] .site-squircle {
  border-radius:0!important;
  border-color:transparent!important;
  -webkit-clip-path:var(--continuous-path);
  clip-path:var(--continuous-path);
}
/* Keep animated native previews out of a nested drop-shadow render surface when
   their marketing card has a continuous clip. The preview owns its own chrome. */
html[data-site-corners="squircle"] .salmon-feature-card .launch-demo {
  filter:none;
  border-color:transparent;
  overflow:hidden;
}

/* Continuous pills keep their existing sizes/materials. Remove only straight
   inset rims that would cut across the capsule's smoothed shoulders. */
html[data-site-corners="squircle"] :is(.salmon-billing-choice,.salmon-billing-thumb,.security-compare-tabs button) { box-shadow:none; }

/* Optional header character study. Keep a layout slot so navigation never shifts. */
.salmon-brand-slot { display:none; flex:none; height:44px; }
html[data-logo-peek="true"][data-logo-peek-ready="true"] .salmon-brand-slot { display:block; }
html[data-logo-peek="true"][data-logo-peek-ready="true"] .salmon-header .salmon-brand {
  position:fixed; left:0; top:0; width:var(--peek-hit-width,120px); height:var(--peek-hit-height,64px); padding:0;
}
html[data-letter-bar="shown"][data-logo-peek="true"][data-logo-peek-ready="true"] .salmon-header .salmon-brand { top:var(--letter-bar-height); }
html[data-logo-peek="true"][data-logo-peek-ready="true"] .salmon-header .salmon-symbol { position:absolute; left:0; top:0; }
html[data-logo-peek="true"][data-logo-peek-ready="true"] .salmon-header .salmon-wordmark { position:absolute; left:var(--peek-name-left,50px); top:var(--peek-name-top,23px); }
.salmon-header-mark.peek-enter { animation:salmon-peek-in 420ms cubic-bezier(.2,.75,.25,1) both; }
@keyframes salmon-peek-in { from{opacity:0;translate:-16px 0}to{opacity:1;translate:0 0} }
@media(prefers-reduced-motion:reduce){.salmon-header-mark.peek-enter{animation:none;}}

.website-logo-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-top:12px; padding-top:12px; border-top:1px solid var(--preview-line); cursor:pointer; }
.website-logo-toggle strong { display:block; font-weight:500; }
.website-logo-toggle small { display:block; margin-top:3px; color:var(--preview-muted); font-size:11px; }
.website-logo-switch { flex:none; width:46px; height:28px; padding:3px; border-radius:999px; background:var(--preview-selected); }
.website-logo-switch::before { content:""; display:block; width:22px; height:22px; border-radius:50%; background:var(--preview-text); }
.website-logo-toggle:has(input:checked) .website-logo-switch { background:var(--salmon); }
.website-logo-toggle:has(input:checked) .website-logo-switch::before { transform:translateX(18px); background:#fff; }
.website-colors-dialog .website-logo-controls { margin-top:10px; }
.website-logo-controls:disabled { display:none; }
.website-logo-size { display:flex; align-items:center; gap:10px; min-height:44px; }
.website-logo-size label { flex:none; width:56px; font-size:12px; color:var(--preview-muted); }
.website-colors-dialog input[type="range"] { position:static; flex:1; min-width:0; width:auto; height:44px; margin:0; padding:0; clip-path:none; overflow:visible; appearance:none; -webkit-appearance:none; border:0; background:transparent; box-shadow:none!important; outline:none; cursor:pointer; }
.website-logo-size output { flex:none; width:42px; text-align:right; font-size:12px; font-variant-numeric:tabular-nums; }
.website-logo-flip { min-height:44px; margin:0; padding:0; border:0; font-size:12px; color:var(--preview-muted); }
.website-logo-position { display:flex; justify-content:space-between; gap:8px; margin:3px 0 7px; color:var(--preview-muted); font-size:11px; font-variant-numeric:tabular-nums; }
.website-logo-nudges { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.website-logo-nudges button { min-width:44px; min-height:44px; padding:4px; border:0; border-radius:12px; background:var(--preview-selected); color:var(--preview-text); font:400 20px/1 Inter,system-ui,sans-serif; cursor:pointer; touch-action:none; user-select:none; -webkit-touch-callout:none; }
.website-logo-nudges button[data-logo-reset] { font-size:11px; }
.website-logo-nudges button:hover,.website-logo-nudges button:focus-visible { background:var(--preview-surface); }
/* Leave the header visible while editing, including on compact phones. */
.website-colors-dialog:has([name="logo-peek"]:checked) { padding:18px; max-height:calc(100dvh - 88px); }
.website-colors-dialog:has([name="logo-peek"]:checked) .website-theme-option { min-height:60px; padding:10px 12px; }

.website-logo-controls input[type="range"]::-webkit-slider-runnable-track { height:4px; border-radius:999px; background:linear-gradient(to right,var(--salmon) var(--logo-range-fill,43.75%),var(--preview-line) var(--logo-range-fill,43.75%)); }
.website-logo-controls input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border:0; border-radius:50%; background:var(--salmon); }
.website-logo-controls input[type="range"]::-moz-range-track { height:4px; border-radius:999px; background:var(--preview-line); }
.website-logo-controls input[type="range"]::-moz-range-progress { height:4px; border-radius:999px; background:var(--salmon); }
.website-logo-controls input[type="range"]::-moz-range-thumb { width:20px; height:20px; border:0; border-radius:50%; background:var(--salmon); }
.website-logo-controls input[type="range"]:focus-visible { filter:brightness(1.12); }