/* Scoped content layout. Host typography, colors and chat chrome remain authoritative. */
.rophalia-content,.rophalia-card,.rophalia-message-content{min-width:0;max-width:100%;overflow-wrap:anywhere;color:inherit;font:inherit}
.rophalia-content>:first-child,.rophalia-card>:first-child{margin-top:0}
.rophalia-plain{white-space:pre-wrap}
.rophalia-content pre,.rophalia-card pre{overflow:auto;white-space:pre;max-width:100%;tab-size:2}
.rophalia-code,.rophalia-diagram,.rophalia-chart{margin:1em 0;min-width:0}
.rophalia-code figcaption,.rophalia-diagram-controls{display:flex;align-items:center;justify-content:space-between;gap:.75em;flex-wrap:wrap}
.rophalia-code pre{padding:1em;background:var(--rophalia-code-background,Canvas);border-radius:var(--rophalia-radius,.4em)}
.rophalia-content button,.rophalia-card button,.rophalia-diagram-dialog button{font:inherit;color:inherit;cursor:pointer}
.rophalia-icon-button{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;flex:none;width:36px;height:36px;padding:0;border:1px solid var(--rophalia-border,currentColor);border-radius:var(--rophalia-radius,.4em);background:var(--rophalia-code-background,Canvas);color:inherit;cursor:pointer}
.rophalia-icon-button svg{display:block;flex:none;width:18px;height:18px}
.rophalia-icon-button:enabled:hover{background:color-mix(in srgb,currentColor 10%,var(--rophalia-code-background,Canvas))}
.rophalia-icon-button:focus-visible{outline:2px solid var(--rophalia-focus,currentColor);outline-offset:2px}
.rophalia-icon-button:disabled{opacity:.45;cursor:default}
.rophalia-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.rophalia-diagram-controls{justify-content:flex-end;gap:.5em;margin-bottom:.75em}
.rophalia-scroll{overflow-x:auto;max-width:100%}
.rophalia-table table{border-collapse:collapse;width:100%}
.rophalia-table th,.rophalia-table td{padding:.5em .75em;text-align:start;vertical-align:top;border-bottom:1px solid var(--rophalia-border,currentColor)}
.rophalia-card{margin:1em 0}
.rophalia-card small{display:block}
.rophalia-card fieldset{min-width:0;border:0;padding:.5em 0;margin:0}
.rophalia-card legend{font-weight:600}
.rophalia-card label{display:flex;align-items:baseline;gap:.5em;margin:.5em 0;flex-wrap:wrap}
.rophalia-card input,.rophalia-card select{font:inherit;color:inherit;max-width:100%}
.rophalia-card fieldset:disabled{opacity:.65}
.rophalia-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25em}
.rophalia-chart svg,.rophalia-diagram>img{display:block;width:100%;max-width:100%;height:auto}
.rophalia-diff ins,.rophalia-diff del{display:block}
.rophalia-diagram-dialog{color:inherit;background:var(--rophalia-background,Canvas);width:min(90vw,1000px);max-height:90vh;border:1px solid currentColor}
.rophalia-diagram-dialog::backdrop{background:rgb(0 0 0 / .4)}
.rophalia-diagram-scroll{overflow:auto;max-height:75vh}
.rophalia-diagram-scroll img{display:block;height:auto}
[data-theme=dark] .rophalia-code,.dark .rophalia-code{color-scheme:dark}
[data-theme=light] .rophalia-code,.light .rophalia-code{color-scheme:light}
@media(max-width:480px){.rophalia-comparison{grid-template-columns:minmax(0,1fr)}}
@media(pointer:coarse){.rophalia-icon-button{width:44px;height:44px}}

/* Muted benefit symbols share gentle lighting and soft shadows in each theme. */
.hero-benefits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
  gap: 16px; width: min(100%, 520px);
  margin: 22px auto 0; padding: 8px 0 0; list-style: none; text-align: center;
  color: var(--text); font: var(--type-weight-heading) 19px/var(--type-leading-subheading) var(--font-heading);
}
.hero-benefits li { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.hero-benefits svg { display: block; flex: none; width: 64px; height: 64px; overflow: hidden; }
.hero-benefits .benefit-label { max-width: 100%; text-wrap: balance; }
@media (max-width: 700px), (max-width: 1099px) and (max-height: 500px) {
  .hero-benefits { gap: 10px; width: min(100%, 420px); margin-top: 20px; padding: 0; font-size: 17px; }
  .hero-benefits li { gap: 8px; }
  .hero-benefits svg { width: 52px; height: 52px; }
}
@media (max-width: 360px) {
  .hero-benefits { gap: 6px; font-size: 16px; }
  .hero-benefits svg { width: 46px; height: 46px; }
}
@media (max-width: 599px) and (max-height: 650px) {
  .hero-benefits { margin-top: 12px; }
  .hero-benefits li { gap: 6px; }
  .hero-benefits svg { width: 44px; height: 44px; }
}
@media (min-width: 600px) and (max-width: 1099px) and (max-height: 500px) {
  .hero-benefits { width: 100%; gap: 12px; text-align: left; }
  .hero-benefits li { flex-direction: row; justify-content: center; gap: 8px; }
  .hero-benefits svg { width: 42px; height: 42px; }
}
@media (min-width: 1100px) and (max-height: 500px) {
  .hero-benefits { padding-top: 6px; }
  .hero-benefits li { gap: 8px; }
  .hero-benefits svg { width: 48px; height: 48px; }
}

/* Birds and clouds drift in place; one plane loops through the opening sky. */
.hero-sky {
  --cloud-light: var(--swatch-teal-853); --cloud-shade: var(--swatch-teal-914); --cloud-edge: var(--swatch-sage-704);
  --sky-ink: var(--swatch-sage-469);
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* The wave clips covered pixels; sky objects never fade through the water. */
  opacity: 1;
}
[data-theme="light"] .hero-sky { --cloud-light: var(--swatch-olive-018); --cloud-shade: var(--swatch-olive-088); --cloud-edge: var(--swatch-sage-294); --sky-ink: var(--swatch-sage-522-2); }
[data-theme="light"] .hero-sky {
  --cloud-light: var(--swatch-fixed-white);
  --cloud-shade: color-mix(in srgb, var(--swatch-fixed-white) 88%, var(--surface-active));
  --cloud-edge: color-mix(in srgb, var(--line) 75%, var(--swatch-fixed-white));
}
body:not([data-section="0"]) .hero-sky { opacity: 0; visibility: hidden; }
/* Salt-worn granite and palms frame the opening, then clear before the dive. */
.hero-rocks, .hero-pebbles, .hero-palms {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  overflow: hidden; pointer-events: none;
  opacity: clamp(0, calc(1 - var(--immersion, 0) * 2), 1);
  transform: translateY(calc(var(--immersion, 0) * 36px));
}
.hero-rocks, .hero-pebbles {
  --rock-light: color-mix(in srgb, var(--shore-dry) 54%, var(--muted));
  --rock-face: color-mix(in srgb, var(--shore-dry) 66%, var(--muted));
  --rock-side: color-mix(in srgb, var(--shore-dry) 74%, var(--bg));
  --rock-edge: color-mix(in srgb, var(--shore-dry) 62%, var(--muted));
  --rock-shadow: var(--bg);
  width: min(30vw, 260px, 38svh); height: auto;
}
[data-theme="light"] :is(.hero-rocks, .hero-pebbles) {
  --rock-light: color-mix(in srgb, var(--shore-dry) 94%, var(--flash));
  --rock-face: color-mix(in srgb, var(--shore-wet) 88%, var(--muted));
  --rock-side: color-mix(in srgb, var(--shore-wet) 72%, var(--muted));
  --rock-edge: color-mix(in srgb, var(--shore-wet) 70%, var(--muted));
  --rock-shadow: var(--muted);
}
body:not([data-section="0"]) :is(.hero-rocks, .hero-pebbles, .hero-palms) { visibility: hidden; }
/* A small grove balances the left-hand stones without entering the reading area.
   It shares their immersion fade and descent, including when scrolling back. */
.hero-palms {
  --grove-leaf-lit: color-mix(in srgb, var(--jelly-sheen) 70%, var(--shore-dry));
  --grove-leaf-face: var(--jelly-body);
  --grove-leaf-shade: var(--jelly-shade);
  --grove-edge: color-mix(in srgb, var(--jelly-shade) 65%, var(--shore-dry));
  --grove-bark-lit: color-mix(in srgb, var(--flash) 22%, var(--shore-dry));
  --grove-bark-face: color-mix(in srgb, var(--shore-dry) 74%, var(--muted));
  --grove-bark-shade: color-mix(in srgb, var(--shore-dry) 40%, var(--muted));
  --grove-bark-edge: color-mix(in srgb, var(--shore-dry) 30%, var(--muted));
  --grove-fruit-lit: color-mix(in srgb, var(--flash) 50%, var(--shore-dry));
  --grove-fruit-shade: color-mix(in srgb, var(--flash) 32%, var(--muted));
  --grove-flesh: var(--bg);
  --grove-inner: var(--shore-wet);
  --grove-shadow: var(--muted);
  left: auto; right: 0;
  width: min(29vw, 300px, 38svh);
  height: auto;
}
:root:not([data-theme="light"]) .hero-palms {
  --grove-leaf-lit: color-mix(in srgb, var(--jelly-body) 46%, var(--surface-active));
  --grove-leaf-face: color-mix(in srgb, var(--jelly-shade) 44%, var(--surface-active));
  --grove-leaf-shade: color-mix(in srgb, var(--jelly-shade) 30%, var(--surface));
  --grove-edge: color-mix(in srgb, var(--jelly-body) 22%, var(--surface-active));
  --grove-bark-lit: color-mix(in srgb, var(--flash) 34%, var(--shore-dry));
  --grove-bark-face: color-mix(in srgb, var(--flash) 22%, var(--shore-dry));
  --grove-bark-shade: color-mix(in srgb, var(--flash) 8%, var(--shore-dry));
  --grove-bark-edge: var(--shore-dry);
  --grove-fruit-lit: color-mix(in srgb, var(--flash) 28%, var(--shore-dry));
  --grove-fruit-shade: var(--shore-dry);
  --grove-flesh: color-mix(in srgb, var(--flash) 60%, var(--shore-dry));
  --grove-inner: color-mix(in srgb, var(--flash) 30%, var(--shore-dry));
  --grove-shadow: var(--bg);
}
/* A quiet strip of sand grounds the stones; the shallow edge blends into water. */
.hero-shore {
  position: absolute; inset: auto 0 0; z-index: 2;
  height: min(12vw, 104px, 15.2svh); pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--shore-wet) 0%, transparent),
    color-mix(in srgb, var(--shore-wet) 55%, transparent) 42%,
    var(--shore-wet) 76%, var(--shore-dry));
  opacity: clamp(0, calc(1 - var(--immersion, 0) * 2), 1);
  transform: translateY(calc(var(--immersion, 0) * 36px));
}
body:not([data-section="0"]) .hero-shore { visibility: hidden; }
/* Keep the shoreline at its original height, extending its sand below it when
   the mobile toolbar retracts. This fills the canvas without moving the boat. */
.enhanced :is(.hero-shore, .hero-rocks, .hero-pebbles, .hero-palms) {
  bottom: var(--browser-chrome-space);
}
.enhanced .hero-shore::after {
  content: ""; position: absolute; inset: 100% 0 auto;
  height: var(--browser-chrome-space); background: var(--shore-dry);
}
/* Keep the onward link anchored while playback appears beside it. */
.scroll-controls {
  position: fixed; z-index: 10; left: 50%; translate: -50% 0;
  bottom: max(16px, calc(12px + env(safe-area-inset-bottom)));
  width: max-content; max-width: calc(100vw - 32px);
}
.scroll-action {
  --scroll-cue-size: calc(var(--opening-action-height) * .75);
  --scroll-cue-arrow-size: calc(var(--opening-action-height) * .35);
  --scroll-cue-nudge: calc(var(--scroll-cue-arrow-size) * .2);
  --scroll-cue-color: var(--mint);
  --scroll-cue-opacity: 80%;
  --scroll-cue-surface: var(--surface);
  --scroll-cue-shadow: 0 5px 20px rgb(var(--rgb-scroll-cue-shadow) / .16);
  position: relative;
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: clamp(10px, .94vw, 12px);
  width: max-content; max-width: calc(100vw - 32px); min-width: calc(var(--opening-action-height) * 2.5); min-height: var(--scroll-cue-size); padding: 7px clamp(18px, 1.72vw, 22px);
  border: 1.5px solid color-mix(in srgb, var(--scroll-cue-color) var(--scroll-cue-opacity), transparent); border-radius: 999px; text-decoration: none;
  color: var(--scroll-cue-color); font: 600 clamp(14px, 1.2vw, 15px)/1.25 var(--font-body); text-align: center;
  pointer-events: auto; cursor: pointer;
  /* Match Home's translucent surface while keeping the text fully readable. */
  background: color-mix(in srgb, var(--scroll-cue-surface) var(--scroll-cue-opacity), transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--scroll-cue-color) 8%, transparent), var(--scroll-cue-shadow);
  transition: opacity .2s, visibility .2s, background-color .2s, border-color .2s, box-shadow .2s;
}
:root[data-theme="light"] .scroll-action {
  --scroll-cue-surface: var(--bg);
  --scroll-cue-shadow: 0 5px 20px rgb(var(--rgb-scroll-cue-shadow) / .088);
}
.hero-scroll-arrow, .playback-icon {
  flex: none; width: var(--scroll-cue-arrow-size); height: var(--scroll-cue-arrow-size); fill: none;
  /* Keep the moving stroke stable while the button's hover colors change. */
  stroke: currentColor; stroke-opacity: .8;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.hero-scroll-arrow {
  animation: hero-scroll-nudge 2.4s ease-in-out infinite;
  animation-play-state: var(--scroll-cue-motion, running);
}
.scroll-action:is(:hover, :focus-visible) { --scroll-cue-opacity: 100%; }
.scroll-action:active { --scroll-cue-opacity: 90%; }
.playback-toggle {
  --scroll-cue-color: var(--text);
  position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%;
  width: var(--scroll-cue-size); height: var(--scroll-cue-size); min-width: 0; padding: 0;
}
.playback-icon { stroke-opacity: 1; }
.playback-toggle[hidden], .playback-play, .playback-toggle[data-paused="true"] .playback-pause { display: none; }
.playback-toggle[data-paused="true"] .playback-play { display: block; }
@keyframes hero-scroll-nudge {
  0%, 60%, 100% { translate: 0 0; }
  30% { translate: 0 var(--scroll-cue-nudge); }
}
.scroll-action:focus-visible { outline: 3px solid var(--text); outline-offset: 5px; }
/* Adapt to the viewport only, so chapter changes never resize or move the cue. */
@media (max-height: 500px) {
  .scroll-controls { bottom: max(8px, env(safe-area-inset-bottom)); }
  .hero-scroll { padding-block: 4px; }
}
/* Match the site's compact layout, including phones rotated to landscape. */
@media (max-width: 1099px) {
  .scroll-action {
    /* Scale continuously with both viewport dimensions, including narrow portrait
       screens. Keep the circle, arrow and movement inside at least a 44px tap area. */
    --scroll-cue-size: max(44px, var(--scroll-cue-visible-size));
    --scroll-cue-visible-size: clamp(22px, min(9vw, 6.25svh), 48px);
    --scroll-cue-arrow-size: min(28px, calc(var(--scroll-cue-visible-size) * .625));
    width: var(--scroll-cue-size); height: var(--scroll-cue-size); min-width: 0;
    padding: 0; gap: 0; border-radius: 50%;
    border: 0; background: transparent; box-shadow: none;
  }
  /* Retain the translated link name for assistive technology. */
  .hero-scroll-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .scroll-action::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: 50%; top: 50%; translate: -50% -50%; box-sizing: border-box;
    width: var(--scroll-cue-visible-size); height: var(--scroll-cue-visible-size);
    border: max(1px, calc(var(--scroll-cue-visible-size) * .04)) solid color-mix(in srgb, var(--scroll-cue-color) var(--scroll-cue-opacity), transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--scroll-cue-surface) var(--scroll-cue-opacity), transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--scroll-cue-color) 8%, transparent);
    transition: background-color .2s, border-color .2s;
  }
}
@media (forced-colors: active) {
  .scroll-action, .scroll-action::before { border-color: ButtonText; }
}
.hero-scroll[data-finished],
body:has(dialog[open]) .scroll-action {
  opacity: 0; visibility: hidden; pointer-events: none;
  --scroll-cue-motion: paused;
}
/* Leave room for the fixed link when the reader reaches the end of a section. */
:root[data-device] #main .build-services {
  padding-bottom: max(80px, calc(72px + env(safe-area-inset-bottom)));
}
/* Reserve a separate row below the workflow tabs for the onward link. */
:root .stage { --workflow-reserve: 148px; }
:root .workflow-controls { bottom: max(76px, calc(72px + env(safe-area-inset-bottom))); }
@media (max-width: 480px) { :root .stage { --workflow-reserve: 180px; } }
@media (max-height: 650px) { :root .stage { --workflow-reserve: 124px; } }
@media (max-height: 500px) {
  :root .stage { --workflow-reserve: 108px; }
  :root .workflow-controls { bottom: max(60px, calc(56px + env(safe-area-inset-bottom))); }
  :root[data-device] #main .build-services { padding-bottom: max(64px, calc(56px + env(safe-area-inset-bottom))); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-action, .scroll-action::before, .hero-scroll-arrow { transition: none; }
  .hero-scroll-arrow { animation: none; }
}
/* Keep header controls above the opening scene. */
body[data-section="0"] .nav { z-index: 21; }
body:has(.hero-chat[data-chat-state="open"][data-viewport="short"]) .nav { visibility: hidden; }
/* Scale the whole ray ring together: distance, length and stroke thickness
   breathe in one rhythm while the sun's centre stays still. */
:root[data-theme="light"] body[data-section="0"]:not(:has(.hero-chat[data-chat-state="open"])) .theme-rays {
  animation: sun-rays-breathe 2s ease-in-out infinite;
}
@keyframes sun-rays-breathe {
  0%, 100% { transform: scale(.94); }
  50% { transform: scale(1.1); }
}
/* A faint cool wash keeps the opening sky close to its white background. */
:root[data-theme="light"] .hero-sky {
  background: radial-gradient(ellipse at 52% 84%, color-mix(in srgb, var(--surface-active) 35%, transparent), transparent 60%);
}
:root .hero-actions svg { color: var(--flash); }
:root :is(.pipeline-chart, #desk-story-live-chart, .scene-desk-story-live-chart) { stroke: var(--flash); }
:root :is(.pipeline-antenna-tip, .pipeline-eye, .pipeline-lens-handle, .pipeline-crm-card) { fill: var(--flash); }
:root:not([data-theme="light"]) .pipeline-antenna-tip { fill: var(--mint); }
:root[data-theme="light"] .pipeline-face { fill: var(--tile-accent-side); }
:root[data-theme="light"] .pipeline-spark { fill: var(--flash); }
:root[data-theme="light"] .pipeline-eye { fill: var(--swatch-olive-018); }
:root .pipeline-data-port { stroke: var(--flash); }
:root .pipeline-crm-card { stroke: var(--tile-ink); }
/* The raw SVG contains all workflow states and an unmeasured camera. Paint it
   only after the scene has its opening palette, geometry and hidden layers.
   Keep copy and the CSS sky visible while these independent decorations prepare. */
body[data-opening-pending]:not([data-scene-ready="true"]) .world { opacity: 0; pointer-events: none; }
body[data-opening-pending] .hero-workspace:not([data-loop-ready="true"]) { visibility: hidden; }
/* Opening copy is already styled and translated when HTML first paints. */
:root :is(.intro, .header-actions) [data-hero-language] { display: none; }
:root[lang="en"] :is(.intro, .header-actions) [data-hero-language="en"],
:root[lang="de"] :is(.intro, .header-actions) [data-hero-language="de"],
:root[lang="es"] :is(.intro, .header-actions) [data-hero-language="es"],
:root[lang="pt"] :is(.intro, .header-actions) [data-hero-language="pt"],
:root[lang="fr"] :is(.intro, .header-actions) [data-hero-language="fr"],
:root[lang="ru"] :is(.intro, .header-actions) [data-hero-language="ru"] { display: inline; }
:root .pipeline-crm-heading { stroke: var(--flash); }
/* Continue the small warm details through the story; keep labels dark enough to read. */
:root .eyebrow { color: color-mix(in srgb, var(--flash) 50%, var(--text)); }
:root .world :is(#desk-story-rows, .scene-desk-story-rows) circle { fill: var(--flash); }
.sky-definitions { position: absolute; }
/* Sky behind the scene; within it: birds, then the plane, then clouds. */
.sky-cloud { position: absolute; z-index: 3; width: 190px; animation: cloud-drift 19s ease-in-out infinite alternate; }
.cloud-one { width: clamp(110px, 13vw, 195px); right: 8vw; top: 72px; }
.cloud-two { width: clamp(160px, 19vw, 270px); left: calc(2vw - clamp(160px, 19vw, 270px)); top: 43%; animation-duration: 25s; animation-delay: -9s; }
.cloud-three { width: clamp(140px, 15vw, 230px); right: calc(2vw - clamp(140px, 15vw, 230px)); top: 46%; animation-duration: 22s; animation-delay: -14s; }
.cloud-four { width: 92px; left: 25%; top: 64%; animation-duration: 28s; animation-delay: -6s; opacity: .6; }
.sky-bird { position: absolute; z-index: 1; color: var(--sky-ink); width: max-content; display: flex; gap: 13px; animation: bird-drift 9s ease-in-out infinite alternate; }
.sky-bird svg { width: 34px; flex: none; height: 22px; fill: currentColor; stroke: none; animation: bird-wing 3.8s ease-in-out infinite alternate; }
.sky-bird svg + svg { width: 24px; margin-top: 15px; animation-delay: -.8s; }
/* The pair and glider sit below the midpoint; only the flapping gull stays above. */
.bird-one { top: 62%; left: 68%; animation-delay: -5s; }
.bird-two { top: 38%; left: 84%; animation-duration: 12s; animation-delay: -11s; animation-direction: alternate-reverse; }
.bird-two svg { width: 25px; animation-name: bird-flap; animation-duration: 1.3s; }
.bird-three { top: 68%; left: 18%; animation-duration: 14s; animation-delay: -8s; }
.bird-three svg { width: 42px; animation-duration: 5.4s; }
/* Keep the drifting wings clear of the outcome labels in compact layouts. */
:root[data-device="compact"] .bird-one { top: max(62%, calc(var(--layout-top) + var(--hero-copy-height, 0px) + 24px)); }
:root[data-device="compact"] .bird-two { top: max(38%, calc(var(--layout-top) + var(--hero-copy-height, 0px) + 56px)); }
:root[data-device="compact"] .bird-three { top: max(68%, calc(var(--layout-top) + var(--hero-copy-height, 0px) + 88px)); }
/* A 49-second pass and a one-second wait beyond the right edge, then back from the left.
   Start partway through the pass so the plane is already in the opening sky. */
.sky-plane { position: absolute; left: 0; top: 9svh; z-index: 2; width: clamp(58px, 7vw, 92px); color: var(--sky-ink); animation: plane-flight 50s linear infinite; animation-delay: -9s; }
.sky-plane svg { display: block; width: 100%; height: auto; }
@keyframes cloud-drift { to { transform: translate(24px, -8px); } }
@keyframes bird-drift { from { transform: translate(-20px, 10px) rotate(-3deg); } to { transform: translate(20px, -12px) rotate(3deg); } }
@keyframes bird-wing { to { transform: scaleY(.82) rotate(-3deg); } }
@keyframes bird-flap { to { transform: scaleY(.6) rotate(-5deg); } }
@keyframes plane-flight {
  from { transform: translateX(-100%); }
  98%, 100% { transform: translateX(100vw); }
}
/* The panel covers the pipeline and can use the free space below its launcher. */
.hero-workspace { position: relative; width: min(100%, 400px); margin: 12px auto 0; padding-bottom: 0; text-align: left; }
:root[data-device="desktop"] .chapter.intro .hero-workspace { grid-area: services; align-self: center; width: 100%; margin: 0; padding-bottom: 0; }
/* Charcoal surfaces keep emerald details consistent with the website accent. */
:root:not([data-theme="light"]) .hero-services {
  --tile-top: var(--swatch-sage-739); --tile-side: var(--swatch-teal-853); --tile-ink: var(--swatch-sage-755);
  --tile-accent-top: var(--swatch-sage-773-3); --tile-accent-side: var(--mint); --tile-card: var(--swatch-sage-604);
  --tile-track: var(--swatch-sage-573); --tile-face: var(--surface); --tile-eye: var(--mint);
  --tile-dock-top: var(--swatch-sage-773-3); --tile-dock-side: var(--swatch-sage-892-2); --tile-shadow: var(--swatch-fixed-black);
  --tile-shadow-opacity: .5; --tile-detail: var(--mint); --tile-lens: var(--swatch-teal-853);
  --tile-stroke-width: .85; --tile-shadow-blur: 3px;
  --tile-top-highlight: var(--swatch-sage-739); --tile-top-shade: var(--swatch-sage-818);
  --tile-side-highlight: var(--swatch-teal-853); --tile-side-shade: var(--swatch-sage-892-2);
  --tile-dock-highlight: var(--swatch-sage-739); --tile-dock-shade: var(--swatch-sage-818);
  --tile-floor-back: var(--swatch-sage-892-2); --tile-floor-front: var(--swatch-sage-818); --tile-terminal: var(--mint);
  --tile-contact-opacity: .45;
  --tile-top-paint: url(#pipeline-surface-shade); --tile-side-paint: url(#pipeline-side-shade);
  --tile-dock-paint: url(#pipeline-dock-shade);
}
:root:not([data-theme="light"]) .hero-services .pipeline-dock-terminal { fill: var(--tile-terminal); }
/* Match the daylight clouds' warm whites and sage shading, retaining green accents. */
:root[data-theme="light"] .hero-services {
  --tile-top: var(--swatch-olive-018); --tile-side: var(--swatch-olive-088); --tile-ink: var(--swatch-sage-294);
  --tile-top-highlight: var(--swatch-olive-018); --tile-top-shade: var(--swatch-olive-088);
  --tile-side-highlight: var(--swatch-olive-088); --tile-side-shade: var(--swatch-sage-188-2);
  --tile-top-paint: url(#pipeline-surface-shade); --tile-side-paint: url(#pipeline-side-shade);
  --tile-accent-top: var(--swatch-olive-088); --tile-card: var(--swatch-olive-018); --tile-lens: var(--swatch-olive-047);
  --tile-dock-top: var(--swatch-olive-018); --tile-dock-side: var(--swatch-sage-188-2);
  --tile-dock-highlight: var(--swatch-olive-018); --tile-dock-shade: var(--swatch-olive-088);
  --tile-dock-paint: url(#pipeline-dock-shade);
  --tile-floor-back: var(--swatch-sage-161-2); --tile-floor-front: var(--swatch-olive-088);
}
/* Neutral glass keeps its original deep green label and boat hull. */
:root:not([data-theme="light"]) .world {
  --bottle-front-light: var(--swatch-sage-641); --bottle-front: var(--swatch-sage-720-2);
  --bottle-side: var(--swatch-sage-773-2); --bottle-side-deep: var(--swatch-sage-816); --bottle-bottom: var(--swatch-sage-816);
  --bottle-edge: var(--swatch-sage-755); --bottle-highlight: var(--swatch-sage-518-2);
  --bottle-collar: var(--swatch-sage-641); --bottle-collar-side: var(--swatch-sage-773-2);
  --bottle-cork: var(--swatch-gold-512); --bottle-cork-side: var(--swatch-gold-639); --bottle-cork-top: var(--swatch-gold-420); --bottle-cork-mark: var(--swatch-gold-739);
  --bottle-label-front: var(--swatch-sage-839); --bottle-label-side: var(--swatch-sage-892); --bottle-wake: var(--swatch-sage-755);
  --workflow-edge: var(--swatch-sage-755); --workflow-bottle-edge: var(--swatch-sage-755);
  --workflow-wire: var(--swatch-sage-573); --workflow-packet: var(--mint); --workflow-packet-alt: var(--mint);
  --pipe-body: var(--swatch-sage-653-2); --pipe-edge: var(--swatch-sage-755); --pipe-collar: var(--swatch-sage-573);
}
:root:not([data-theme="light"]) .world :is(#flow-rotating-arrows, .scene-flow-rotating-arrows) .accent { fill: var(--mint); stroke: var(--swatch-sage-755); }
:root:not([data-theme="light"]) .world .desk-device-top { fill: var(--swatch-sage-739); }
:root:not([data-theme="light"]) .world .desk-device-side { fill: var(--swatch-teal-853); }
:root:not([data-theme="light"]) .world .screen,
:root:not([data-theme="light"]) .world :is(#desk-dashboard-surface, .scene-desk-dashboard-surface) { fill: var(--swatch-sage-818); }
:root:not([data-theme="light"]) .world .symbol { stroke: var(--swatch-sage-573); }
.world :is(#desk-jelly-character, .scene-desk-jelly-character) .jelly-eye-back { display: inline; fill: var(--jelly-face); }
:root:not([data-theme="light"]) .world :is(#desk-story-live-chart, .scene-desk-story-live-chart),
:root:not([data-theme="light"]) .world :is(#desk-story-rows, .scene-desk-story-rows) [stroke="var(--swatch-sage-106)"] { stroke: var(--mint); }
:root:not([data-theme="light"]) .world :is(#desk-story-rows, .scene-desk-story-rows) [stroke="var(--swatch-teal-557)"] { stroke: var(--swatch-sage-755); }
:root:not([data-theme="light"]) .world :is(#desk-story-rows, .scene-desk-story-rows) [stroke="var(--swatch-teal-312)"],
:root:not([data-theme="light"]) .world :is(#desk-story-steam, .scene-desk-story-steam) { stroke: var(--swatch-sage-573); }
:root:not([data-theme="light"]) .world :is(.ocean-flow-marks, .bottle-flow-marks, .bottle-water-bubbles) { stroke: var(--swatch-sage-573); }
:root:not([data-theme="light"]) :is(.wave-crest, .surface-ripple) {
  fill: none; stroke: var(--ocean-line); stroke-width: .8; stroke-opacity: .34;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
}
/* The opening bottle shares the clouds' warm, softly shaded surfaces. */
:root[data-theme="light"] .world {
  --bottle-front-light: var(--swatch-olive-018); --bottle-front: var(--swatch-olive-088);
  --bottle-side: color-mix(in srgb, var(--swatch-olive-159) 88%, var(--swatch-olive-018));
  --bottle-side-deep: color-mix(in srgb, var(--swatch-olive-245) 88%, var(--swatch-olive-018));
  --bottle-bottom: var(--bottle-side-deep);
  --bottle-edge: var(--swatch-sage-294); --bottle-highlight: var(--swatch-olive-018);
  --bottle-collar: var(--swatch-olive-088); --bottle-collar-side: var(--swatch-olive-245);
  --bottle-label-front: var(--swatch-sage-722); --bottle-label-side: var(--swatch-sage-780);
  --bottle-water-shadow: var(--swatch-sage-706); --bottle-wake: var(--swatch-sage-476-2);
}
:root[data-theme="light"] .world :is(.ocean-flow-marks, .bottle-flow-marks, .bottle-water-bubbles) { stroke: var(--swatch-sage-539); }
/* Fine open crests keep the water in the surrounding illustration's linework. */
:root[data-theme="light"] :is(.wave-crest, .surface-ripple) {
  fill: none; stroke: var(--ocean-line); stroke-width: .8; stroke-opacity: .42;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
}
.ocean-reflections {
  stroke: var(--ocean-glint); stroke-width: 1.15;
  stroke-linecap: round;
}
.ocean-reflections > path { vector-effect: non-scaling-stroke; }
:root:not([data-theme="light"]) .ocean-reflections { stroke-opacity: .78; }
.bottle-contact-ripples > path { vector-effect: non-scaling-stroke; stroke-width: .95; }
.opening-boat {
  --boat-sail: var(--bottle-front-light); --boat-sail-shade: var(--bottle-side);
  --boat-hull: var(--bottle-label-front); --boat-rim: var(--bottle-front);
  --boat-edge: var(--bottle-edge); --boat-wake: var(--bottle-wake);
  --boat-stripe: var(--flash);
}
:root:not([data-theme="light"]) .opening-boat { --boat-stripe: var(--swatch-sage-573); }
/* Carry the opening's materials through the breakthrough and connected workflow. */
:root[data-theme="light"] .world { --workflow-edge: var(--swatch-sage-294); }
:root[data-theme="light"] .world :is(#flow-rotating-arrows, .scene-flow-rotating-arrows) .accent { stroke: var(--swatch-sage-294); }
:root[data-theme="light"] .world .node-surface { fill: var(--swatch-olive-088); }
:root[data-theme="light"] .world .system-node:is(:hover, :focus-visible, [aria-expanded="true"]) .node-surface { fill: var(--swatch-sage-161-2); }
:root[data-theme="light"] .world .desk-device-top { fill: var(--swatch-olive-018); }
:root[data-theme="light"] .world .desk-device-side { fill: var(--swatch-sage-188-2); }
:root[data-theme="light"] .world .screen,
:root[data-theme="light"] .world :is(#desk-dashboard-surface, .scene-desk-dashboard-surface) { fill: var(--swatch-olive-088); }
:root[data-theme] .world :is(#desk-svg, .scene-desk-svg) .scene-warm-fill { fill: var(--flash); }
/* The opening sky uses --bg. Carry that palette through the launcher,
   privacy choices, conversation and enquiry opened from this section. */
.hero-chat, .contact-dialog[data-enquiry] {
  --chat-launch-light: var(--surface); --chat-launch-shade: var(--bg);
  --chat-launch-edge: var(--line); --chat-border: var(--line);
  --chat-surface: var(--bg); --chat-soft: var(--surface);
}
.hero-chat { position: relative; z-index: 5; color: var(--text); }
/* Teal marks actions and focus; the warm accent stays with the brand details. */
:root .chat-suggestions button:enabled:is(:hover, :focus-visible, :active) {
  background: var(--surface-hover);
  border-color: var(--mint); color: var(--text);
  outline-color: var(--mint);
}
:root .chat-suggestions button:enabled:active {
  background: var(--surface-active);
}
:root .chat-compose {
  background: var(--chat-soft);
  border-color: color-mix(in srgb, var(--line) 65%, var(--muted));
}
:root .chat-compose:focus-within {
  border-color: var(--mint);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint) 12%, transparent);
}
:root .chat-send:disabled {
  color: var(--mint); background: color-mix(in srgb, var(--mint) 10%, var(--surface)); opacity: .55;
}
:root .chat-send:enabled {
  color: var(--bg); background: var(--mint);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--mint) 20%, transparent);
}
:root .chat-send:enabled:is(:hover, :focus-visible) { background: var(--text); }
.chat-launch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 22px; width: 100%; text-align: left; color: inherit; background: linear-gradient(color-mix(in srgb, var(--chat-launch-light) 70%, var(--chat-launch-shade)), color-mix(in srgb, var(--chat-launch-light) 30%, var(--chat-launch-shade))); border: 1px solid var(--chat-launch-edge); border-radius: 16px; box-shadow: 0 8px 32px rgb(var(--rgb-sage-955) / 0.03922), inset 0 1px rgb(var(--rgb-fixed-white) / 0.04314); transition: border-color .2s, transform .2s; }
.chat-launch:is(:hover, :focus-visible) { border-color: var(--mint); transform: translateY(-2px); }
.chat-launch:active { transform: translateY(0); }
.chat-launch-copy { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 6px; }
.chat-kicker { color: var(--muted); font-size: 12px; letter-spacing: .02em; }
.chat-launch-title { display: flex; align-items: center; gap: 8px; font: var(--type-weight-heading) clamp(16px, 1.6vw, 22px)/var(--type-leading-subheading) var(--font-heading); letter-spacing: var(--type-tracking-subheading); }
.chat-launch-arrow { display: block; flex: none; width: 16px; height: 16px; color: var(--flash); }
.chat-launch-icon { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; color: var(--mint); }
.chat-launch-icon svg { display: block; width: 100%; height: 100%; }
.chat-message-assistant .chat-author { display: flex; align-items: center; gap: 7px; }
.assistant-jelly { display: block; width: 24px; height: 28px; flex: none; overflow: visible; }
.hero-chat .chat-panel, .contact-dialog[data-enquiry] {
  --window-surface: var(--chat-surface); --window-soft: var(--chat-soft); --window-border: var(--chat-border);
  --window-launch-light: var(--chat-launch-light); --window-launch-shade: var(--chat-launch-shade);
}
.hero-chat .chat-panel { grid-template-rows: auto minmax(64px, 1fr) auto; }
/* The modal stays usable when the opening scene behind it is hidden. */
.hero-chat .chat-panel[open] { visibility: visible; pointer-events: auto; }

.hero-chat [hidden] { display: none; }
.chat-header { display: flex; align-items: center; gap: 9px; padding: 12px 16px; background: var(--chat-soft); border-bottom: 1px solid var(--chat-border); font-size: 14px; flex: none; }
.chat-header .window-heading { min-width: 0; }
.chat-wordmark { display: block; width: 144px; max-width: 100%; height: auto; }
.chat-messages { display: flex; flex-direction: column; gap: 12px; overflow: auto; overscroll-behavior: contain; padding-block: 28px; flex: 1; min-height: 0; scrollbar-width: thin; }
.chat-messages > * { flex: none; }
.chat-message { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.chat-author { display: block; font-size: 9px; color: var(--mint); letter-spacing: .13em; margin-bottom: 8px; }
.chat-secondary { color: var(--muted); margin-top: 8px; }
.chat-message-user { margin: 0 0 0 22px; padding: 10px 14px; background: var(--chat-soft); border: 1px solid var(--chat-border); border-radius: 13px 13px 3px 13px; white-space: pre-wrap; }
.chat-suggestions { display: grid; gap: 18px; min-width: 0; width: 100%; max-width: 720px; margin-inline: auto; padding-bottom: 24px; }
.chat-examples-hint { margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.chat-example-group { display: grid; gap: 10px; min-width: 0; }
.chat-example-label { margin: 0; color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.4; }
.chat-example-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.chat-example-options button { min-width: 0; min-height: 44px; width: 100%; border: 1px solid var(--chat-border); border-radius: 10px; padding: 10px 12px; color: var(--muted); background: var(--chat-soft); font-size: 13px; line-height: 1.4; text-align: left; white-space: normal; overflow-wrap: break-word; }
.chat-examples-toggle { display: inline-flex; align-items: center; justify-self: start; gap: 8px; min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; font-size: 12px; line-height: 1.5; text-align: left; }
.chat-examples-toggle svg { flex: none; }
.chat-examples-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.chat-more-examples { display: grid; gap: 24px; min-width: 0; }
.chat-suggestions button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.chat-messages { scroll-padding-block: 24px; }
@media (max-width: 600px) {
  .chat-example-options { grid-template-columns: minmax(0, 1fr); }
}
.chat-form { padding-block: 0 20px; flex: none; }
.chat-input-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.chat-compose { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border: 1px solid var(--chat-border); border-radius: 12px; }
.chat-compose:focus-within { border-color: var(--mint); }
.chat-compose textarea { width: 100%; min-width: 0; resize: none; border: 0; background: transparent; color: var(--text); font-size: 16px; line-height: 1.45; outline: 0; }
.chat-compose textarea::placeholder { color: var(--muted); opacity: .8; }
.chat-send { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: none; border: 0; border-radius: 10px; color: var(--bg); background: var(--mint); }
.chat-send:disabled { opacity: .35; cursor: default; }
.chat-disclaimer { text-align: center; font-size: 11px; line-height: 1.4; color: var(--muted); margin-top: 9px; }
.chat-answer {
  margin: 0; min-width: 0; max-width: 100%;
  --rophalia-code-background: var(--chat-soft); --rophalia-background: var(--chat-surface);
  --rophalia-border: var(--chat-border); --rophalia-radius: 8px; --rophalia-focus: var(--mint);
}
.chat-answer .rophalia-content > :last-child { margin-bottom: 0; }
.chat-answer p, .chat-answer ul, .chat-answer ol, .chat-answer blockquote { margin-block: .7em; }
.chat-answer ul, .chat-answer ol { padding-inline-start: 1.5em; }
.chat-answer li + li { margin-top: .25em; }
.chat-answer :is(h1,h2,h3,h4,h5,h6) { font: inherit; font-weight: 650; line-height: 1.35; margin: 1em 0 .5em; color: inherit; letter-spacing: normal; }
.chat-answer :is(h1,h2) { font-size: 1.15em; }
.chat-answer a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.chat-answer blockquote { margin-inline: 0; padding-inline-start: 1em; border-inline-start: 2px solid var(--chat-border); color: var(--muted); }
.chat-answer code { font-size: .9em; }
.chat-answer :not(pre) > code { padding: .1em .3em; border-radius: 4px; background: var(--chat-soft); }
.chat-answer figure { margin-inline: 0; }
/* Keep narrow process diagrams from stretching across the entire chat width. */
.chat-answer .rophalia-diagram > img { width: auto; max-width: 100%; max-height: 560px; }
/* Vertical reflow needs scrollable height to keep long translated labels readable. */
.chat-answer [data-diagram-layout="TD"] .rophalia-diagram > img { max-height: none; }
.chat-answer :is(.rophalia-content, .rophalia-card) button:not(.rophalia-icon-button) { padding: 5px 9px; border: 1px solid var(--chat-border); border-radius: 6px; background: var(--chat-soft); font-size: 12px; }
.chat-answer .rophalia-icon-button { border-radius: 6px; color: var(--muted); }
.chat-answer .rophalia-icon-button:enabled:is(:hover, :focus-visible) { color: var(--mint); }
.chat-answer .rophalia-content pre { line-height: 1.5; }
.chat-answer .rophalia-table { margin-block: 1em; }
.chat-answer .rophalia-table th, .chat-answer .rophalia-table td { min-width: 7em; }
.chat-answer summary { cursor: pointer; color: var(--muted); }
.chat-notice { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 0; }
.chat-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 12px; }
.chat-actions button:not(.window-action) { min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--mint); font: inherit; }
.chat-actions a { min-height: 32px; display: inline-flex; align-items: center; color: var(--muted); }
.chat-actions a:first-of-type { margin-left: auto; }
.chat-actions button:disabled, .chat-suggestions button:disabled { opacity: .45; cursor: default; }
/* Equal side columns keep every enquiry label centered, including while streaming. */
.hero-chat .chat-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.chat-actions-start, .chat-actions-end { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; min-width: 0; }
.chat-actions-start { grid-column: 1; grid-row: 1; }
.chat-actions-end { grid-column: 3; grid-row: 1; justify-content: flex-end; }
.hero-chat .chat-prepare { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
.hero-chat .chat-actions a:first-of-type { margin-left: 0; }
@media (max-width: 600px) {
  .hero-chat .chat-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; }
  .chat-actions-end { grid-column: 2; }
  .hero-chat .chat-prepare { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-height: 600px) {
  :root[data-device="compact"] .chat-header { padding: 6px 12px; }
  :root[data-device="compact"] .chat-messages { padding-block: 12px; }
  :root[data-device="compact"] .chat-form { padding-block: 0 8px; }
  :root[data-device="compact"] .chat-compose textarea { height: 2.9em; }
  :root[data-device="compact"] .chat-disclaimer { margin-top: 6px; }
}
.hero-chat button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.hero-workspace:has(.chat-panel:not([hidden])) .hero-services { visibility: hidden; }
:root[data-device="compact"] .hero-workspace { width: min(100%, 360px); }
:root[data-device="compact"] .hero-workspace .hero-services { margin: 0 auto 12px; }
:root[data-device="compact"] .chat-launch { padding: 12px 16px; border-radius: 13px; }
:root[data-device="compact"] .chat-kicker { font-size: 10px; }

@media (max-width: 599px) and (min-height: 501px) {
  :root[data-device="compact"] .chat-kicker { font-size: 12px; }
  @media (max-height: 740px) {
    :root[data-device="compact"] .chat-launch { padding-block: 10px; }
    :root[data-device="compact"] .chat-launch-icon { width: 36px; height: 36px; }
    /* The compact stack fills the birds' usual flight paths. */
    :root[data-device="compact"] .hero-sky .sky-bird { display: none; }
  }
}

@media (max-height: 650px) {
  :root[data-device="compact"] .hero-workspace { padding-bottom: 0; margin-top: 8px; }
  :root[data-device="compact"] .chat-kicker { display: none; }
  :root[data-device="desktop"] .chapter.intro .hero-workspace { padding-bottom: 0; margin-top: 0; }
  :root[data-device="desktop"] .chat-launch { padding: 12px; }
  .chat-launch-title { font-size: 16px; }
  .chat-kicker { font-size: 10px; }
}
@media (min-width: 600px) and (max-width: 1099px) and (max-height: 500px) {
  :root[data-device="compact"] .hero-workspace .hero-services { width: min(100%, 220px); }
  :root[data-device="compact"] .chat-launch-icon { width: 36px; height: 36px; }
}
@media (max-width: 700px) {
  /* The phone header needs clear space for its two compact rows. */
  .cloud-one, .sky-plane { display: none; }
  .cloud-two { left: -150px; top: 36%; }
  .cloud-three { right: -133px; top: 58%; }
  .cloud-four { display: none; }
  :root[data-device="desktop"] .chat-launch { padding: 10px; gap: 6px; }
  :root[data-device="desktop"] .chat-launch-title { font-size: 13px; }
  :root[data-device="desktop"] .chat-launch-icon { width: 30px; height: 30px; }
  :root[data-device="desktop"] .chat-kicker { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-cloud, .sky-bird, .sky-bird svg, .sky-plane, .chat-panel, .theme-rays { animation: none !important; }
  .chat-launch { transform: none !important; transition: none !important; }
  .sky-plane { transform: translateX(20vw); }
  .chat-launch, .hero-sky { transition: none; }
}
body:not([data-section="0"]) .sky-cloud, body:not([data-section="0"]) .sky-bird,
body:not([data-section="0"]) .sky-bird svg, body:not([data-section="0"]) .sky-plane { animation-play-state: paused; }

@media (max-height: 650px) { .cloud-one { top: 49px; width: 70px; } }
@media (max-height: 480px) { .cloud-one { top: 48px; width: 50px; } }

/* Match the daytime accent locations, with a quieter glow against night surfaces. */
:root:not([data-theme="light"]) .hero-sky {
  background: radial-gradient(ellipse at 52% 84%, color-mix(in srgb, var(--flash) 2%, transparent), transparent 47%);
}
:root:not([data-theme="light"]) .world :is(#desk-story-live-chart, .scene-desk-story-live-chart) { stroke: var(--flash); }
/* Green task lines in both the resting and animated laptop states. */
:root[data-theme] .world :is(#desk-story-rows, .scene-desk-story-rows) [stroke="var(--swatch-teal-557)"] { stroke: var(--swatch-sage-553-2); }
:root[data-theme] .world :is(#desk-story-rows, .scene-desk-story-rows) [stroke="var(--swatch-teal-312)"] { stroke: var(--mint); }

.chat-panel .chat-message:first-child .window-intro { margin: 8px 0 12px; }
.chat-panel .chat-message:first-child .chat-secondary { font-size: 14px; }

/* The same mascot introduces the chat, then settles into the conversation. */
.chat-welcome :is(.assistant-jelly, .window-intro, .chat-secondary) { transform-origin: top left; }
.chat-welcome .window-intro { width: fit-content; max-width: 100%; }
.hero-chat[data-conversation-started="false"] .chat-welcome {
  margin-top: auto; text-align: center;
}
.hero-chat[data-conversation-started="false"] .chat-welcome .chat-author { justify-content: center; margin-bottom: 16px; }
.hero-chat[data-conversation-started="false"] .chat-welcome [data-chat-copy="author"] { display: none; }
.hero-chat[data-conversation-started="false"] .chat-welcome .assistant-jelly { width: 64px; height: 74px; }
.hero-chat[data-conversation-started="false"] .chat-welcome .window-intro { margin-inline: auto; }
.hero-chat[data-conversation-started="false"] .chat-welcome .chat-secondary { max-width: 48ch; margin-inline: auto; }
.hero-chat[data-conversation-started="false"] .chat-suggestions { margin-bottom: auto; }
@media (max-width: 600px) {
  .hero-chat[data-conversation-started="false"] .chat-welcome .assistant-jelly { width: 56px; height: 65px; }
}
@media (max-height: 650px) {
  .hero-chat[data-conversation-started="false"] .chat-messages { gap: 8px; }
  .hero-chat[data-conversation-started="false"] .chat-welcome .assistant-jelly { width: 40px; height: 46px; }
  .hero-chat[data-conversation-started="false"] .chat-welcome .chat-author { margin-bottom: 4px; }
}
@media (max-height: 500px) {
  .hero-chat[data-conversation-started="false"] .chat-welcome .assistant-jelly { width: 32px; height: 37px; }
  .hero-chat[data-conversation-started="false"] .chat-welcome .window-intro { font-size: 22px; margin-block: 4px 6px; }
  .hero-chat[data-conversation-started="false"] .chat-welcome .chat-secondary { max-width: none; margin-top: 4px; }
}

/* The two AI glints use the same flat gold curve as the approved brand. */
:root .pipeline-spark { fill: var(--flash); stroke: none; }

/* The reviewed choice window shares the existing chat frame, palette and focus trap. */
.privacy-scroll { padding-block: 28px 20px; overflow: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; }
.privacy-scroll .window-intro { font-weight: 600; }
.privacy-intro { color: var(--muted); font-size: 14px; line-height: 1.6; margin-block: 13px 20px; }
.privacy-options { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; display: grid; gap: 10px; }
.privacy-option { position: relative; display: flex; align-items: center; gap: 20px; padding: 16px 18px; border: 1px solid var(--chat-border); border-radius: 12px; background: var(--chat-soft); cursor: pointer; }
.privacy-option > span:first-child { flex: 1; min-width: 0; }
.privacy-option strong { display: block; font-size: 14px; line-height: 1.5; margin-bottom: 5px; font-weight: 600; }
.privacy-option strong + span { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; }
.privacy-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.privacy-option:has(input:disabled) { opacity: .6; cursor: default; }
.privacy-switch { width: 36px; height: 22px; border-radius: 20px; border: 1px solid var(--muted); position: relative; flex: none; }
.privacy-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); }
.privacy-option:has(input:checked) { border-color: var(--mint); }
.privacy-option input:checked + .privacy-switch { background: var(--mint); border-color: var(--mint); }
.privacy-option input:checked + .privacy-switch::after { left: 17px; background: var(--bg); }
.privacy-option:has(input:focus-visible) { outline: 2px solid var(--mint); outline-offset: 3px; }
.privacy-promise { font-size: 11px; line-height: 1.6; margin-top: 17px; }
.privacy-readers { font-size: 12px; line-height: 1.6; color: var(--muted); margin-top: 12px; }
.privacy-details { margin-top: 14px; font-size: 12px; line-height: 1.7; }
.privacy-details summary { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--mint); min-height: 36px; padding-block: 8px; list-style: none; }
.privacy-details summary::-webkit-details-marker { display: none; }
.privacy-details summary::marker { content: ''; }
.privacy-details .disclosure-chevron { flex: none; transition: transform .15s ease; }
.privacy-details[open] .disclosure-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .privacy-details .disclosure-chevron { transition: none; }
}
.privacy-details dl { margin: 10px 0; }
.privacy-details dt { font-weight: 600; margin-top: 14px; }
.privacy-details dd { margin: 4px 0 0; color: var(--muted); }
.privacy-details a { text-decoration: underline; text-underline-offset: 3px; }
.privacy-footer { padding-block: 12px 18px; border-top: 1px solid var(--chat-border); }
.privacy-save-note { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0 0 6px; }
.privacy-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; }
.privacy-actions .privacy-continue { font-size: 14px; min-height: 44px; padding: 4px 0; font-weight: 500; white-space: normal; text-align: left; border: 0; background: transparent; color: var(--mint); box-shadow: none; }
.privacy-actions .privacy-continue:disabled { opacity: .45; cursor: default; }
.privacy-actions .privacy-continue:disabled::after { transform: scaleX(0); }
.privacy-details :is(a, summary):focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.chat-header :is(.privacy-back, .chat-storage-link):not([hidden]) ~ .window-close { margin-left: 0; }
@media (max-height: 500px) {
  .privacy-scroll { padding-block: 12px; }
  .privacy-footer { padding-block: 6px; }
}

/* Acknowledged storage controls complement the original choice cards. */
.privacy-status { font-size: 13px; line-height: 1.6; margin-top: 16px; }
.privacy-receipt { border-top: 1px solid var(--chat-border); margin-top: 16px; padding-top: 4px; }
.privacy-link-help { font-size: 12px; line-height: 1.6; color: var(--muted); }
.privacy-link, .privacy-previous { display: block; margin-block: 12px; text-decoration: underline; font-size: 13px; overflow-wrap: anywhere; }
.privacy-link[hidden], .privacy-previous[hidden] { display: none; }
.privacy-management { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.privacy-management button { min-height: 44px; font-size: 12px; white-space: normal; text-align: left; }
.privacy-management button:disabled { opacity: .55; cursor: default; }
.privacy-receipt :is(a, button):focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.privacy-details dd p + p { margin-top: 8px; }
.chat-header .chat-storage-link:not([hidden]) { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; flex: none; border-radius: 12px; color: var(--muted); text-decoration: none; }
.chat-header .chat-storage-link:hover { color: var(--text); background: var(--window-surface); }
.chat-storage-link:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (max-width: 520px) {
  .privacy-option { gap: 14px; padding: 14px; }
}

:root[data-theme="dark"] {
/* One dark material, derived from the site's existing neutral and accent roles.
   Lit tops / front faces / shaded sides; quiet edges; dark recessed panels. */
--graphite-cloud-shade: var(--surface);
--graphite-lit: color-mix(in srgb, var(--surface-active) 74%, var(--muted));
--graphite-face: color-mix(in srgb, var(--surface-active) 92%, var(--muted));
--graphite-shade: color-mix(in srgb, var(--surface-active) 30%, var(--surface));
--graphite-edge: color-mix(in srgb, var(--line) 86%, var(--muted));
--graphite-inset: color-mix(in srgb, var(--surface) 70%, var(--surface-hover));
--graphite-accent: color-mix(in srgb, var(--mint) 82%, var(--graphite-face));
--graphite-gold-shade: color-mix(in srgb, var(--flash) 70%, var(--graphite-face));
}
:root[data-theme="dark"] :is(.loop-cta, .world) {
  --cloud-shade: var(--graphite-cloud-shade);
  --flow-lit: var(--graphite-lit);
  --flow-face: var(--graphite-face);
  --flow-shade: var(--graphite-shade);
  --flow-edge: var(--graphite-edge);
  --flow-inset: var(--graphite-inset);
  --flow-accent: var(--graphite-accent);
  --flow-gold-shade: var(--graphite-gold-shade);
}
/* Night clouds and aircraft stay neutral. No global palette or theme changes. */
:root[data-theme="dark"] .hero-sky {
  --cloud-light: #414141;
  --cloud-shade: #262626;
  --cloud-edge: #505050;
}
:root[data-theme="dark"] .sky-plane { color: #939393; }

/* The system ports, hub and desk hardware share the component surfaces. */
:root[data-theme="dark"] .world {
  --workflow-wire: var(--flow-edge);
  --workflow-edge: var(--flow-edge);
  --workflow-rim: var(--flow-shade);
  --pipe-body: var(--flow-face);
  --pipe-edge: var(--flow-edge);
  --pipe-collar: var(--flow-lit);
}
:root[data-theme="dark"] .world .desk-device-top { fill: var(--flow-lit); }
:root[data-theme="dark"] .world .desk-device-side { fill: var(--flow-shade); }
:root[data-theme="dark"] .world .screen,
:root[data-theme="dark"] .world :is(#desk-dashboard-surface, .scene-desk-dashboard-surface) { fill: var(--flow-inset); }
:root[data-theme="dark"] .world .symbol { stroke: var(--flow-edge); }
:root[data-theme="dark"] .world :is(#flow-rotating-arrows, .scene-flow-rotating-arrows) .accent { stroke: var(--flow-edge); }
/* Large green surfaces use the same material accent as the small icons.
   Moving packets and status lights retain the site's brighter mint. */
:root[data-theme="dark"] .world :is(#flow-rotating-arrows, .scene-flow-rotating-arrows) .accent { fill: var(--flow-accent); }
:root[data-theme="dark"] .world .flow-bolt-side { fill: var(--flow-gold-shade); }