/* One palette switch; the geometry and scroll story stay shared. */
.theme-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #ffe34d;
  background: transparent;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover, .theme-toggle:focus-visible { color: #fff08a; }
[data-theme="light"] .theme-toggle { color: var(--muted); }
[data-theme="light"] .theme-toggle:is(:hover, :focus-visible) { color: var(--mint); }
.theme-toggle svg { display: block; overflow: visible; }
.theme-disc, .theme-rays { transform-origin: 12px 12px; }
.theme-disc, .theme-rays, .theme-cutout {
  transition: transform .45s cubic-bezier(.22,.8,.25,1), opacity .3s;
}
[data-theme="light"] .theme-disc { transform: scale(1.45); }
[data-theme="light"] .theme-cutout { transform: translate(-9px, 8px); }
[data-theme="light"] .theme-rays { transform: rotate(45deg) scale(.55); opacity: 0; }
@media (max-width: 700px) {
  .nav { gap: 10px; }
  .theme-toggle { margin-left: auto; flex-basis: 40px; width: 40px; height: 40px; }
  .mobile-menu { margin-left: 0; }
}

:root[data-theme="light"] {
  --bg: #f2f7f4;
  --text: #123c33;
  --muted: #385c50;
  --mint: #007f75;
  --line: #bed7cc;
  --yellow: #906b10;
  color-scheme: light;
}
[data-theme="light"] .stage {
  background: radial-gradient(ellipse at 50% 77%, rgb(205 225 216 / calc(1 - var(--depth, 0))), transparent 65%);
}
[data-theme="light"] .stage::before {
  background: linear-gradient(180deg, #dce9e1, #e9f1eb 48%, #f2f7f4);
}
[data-theme="light"] .build { background: linear-gradient(180deg, #f2f7f4, #eaf3ec 40%, #edf5ef); }
[data-theme="light"] .contact {
  background: radial-gradient(ellipse at 50% 45%, #a3d0bd40, transparent 65%), linear-gradient(180deg, #edf5ef, #e7f0e9);
}
[data-theme="light"] footer { background: #e7f0e9; }
[data-theme="light"] :is(.lede, .intro .lede, .tags span, .card-num, .card-foot,
  .tiny, .principle > span:last-child, footer, footer > a:last-child,
  .bottleneck-placeholder label, .bottleneck-placeholder > p) { color: var(--muted); }
[data-theme="light"] :is(.nav-cta, .tags span, .mobile-menu summary) { background: #ccdfd3; color: var(--text); }
[data-theme="light"] :is(.nav-cta:hover, .nav-cta:focus-visible, .mobile-menu summary:hover,
  .mobile-menu summary:focus-visible, .mobile-menu[open] summary) {
  background: #abcdbb; color: var(--text);
}
[data-theme="light"] .mobile-menu nav { background: #edf5ef; border-color: #bed7cc; }
[data-theme="light"] .intro .primary { background: #087b70; color: #f7fbf8; }
[data-theme="light"] .intro .primary:hover { background: #09665d; }
[data-theme="light"] .primary:focus-visible { background: #09584f; }
[data-theme="light"] .chapters a { color: var(--muted); }
[data-theme="light"] .chapters i { background: #6e9b86; }
[data-theme="light"] .chapters a[aria-current] { color: var(--mint); }
[data-theme="light"] .chapters a[aria-current] i { background: #007f75; }
[data-theme="light"] .chapters a:is(:hover, :focus-visible) { background: #c7e2d4; color: var(--text); }
[data-theme="light"] a:focus-visible:not(.primary):not(.nav-cta):not(.system-node) { color: var(--mint); }
[data-theme="light"] .capabilities article { background: #d3e5d9; }
[data-theme="light"] .capabilities article:hover { background: #bfdccc; }
[data-theme="light"] .capabilities article:is(.is-selected, :target, :focus-visible) { background: #aacdbb; }
[data-theme="light"] .capabilities article:is(.is-selected, :target) h3 { color: var(--mint); }
[data-theme="light"] .input-shell { background: #d3e5d9; }
[data-theme="light"] .input-shell:hover { background: #c8dfd0; }
[data-theme="light"] .input-shell:focus-within { background: #c2dccb; box-shadow: inset 0 0 0 1px #387e5b2b; }
[data-theme="light"] .input-shell textarea::placeholder { color: var(--muted); }
[data-theme="light"] .input-shell button { color: var(--mint); }
[data-theme="light"] .input-shell button:is(:hover, :focus-visible) { background: #97c5af; color: var(--text); }
[data-theme="light"] .contact-orbit span { background: #6aac9440; }
[data-theme="light"] .contact-orbit span + span { background: #569e8728; }
[data-theme="light"] .handoff-node { background: #bedccb; }

/* Art-directed sea glass and surfaces, rather than a blanket inversion. */
[data-theme="light"] .world .node-surface { fill: #b9d8c6; }
[data-theme="light"] .system-node:is(:hover, :focus-visible, [aria-expanded="true"]) .node-surface { fill: #98c5ad; }
[data-theme="light"] .world .node-label { fill: var(--muted); }
[data-theme="light"] #flow-process-hub > circle:first-child { fill: #73ae91; }
[data-theme="light"] #flow-process-hub > circle:nth-child(2) { fill: #bddcca; }
[data-theme="light"] #flow-cycle-arrows { fill: #3d826a; }
[data-theme="light"] .world [stroke="#32695b"] { stroke: #558e73; }
[data-theme="light"] .world [stroke="#60998a"] { stroke: #386f5d; }
[data-theme="light"] .world [fill="#20574d"] { fill: #aad0be; }
[data-theme="light"] #bneck-clock-icon line { stroke: #386f5d; }
[data-theme="light"] .world .symbol { stroke: #537c69; }
[data-theme="light"] .world .screen { fill: #c2dfcf; }
[data-theme="light"] #desk-story-live-chart { stroke: #387b65; }
[data-theme="light"] #desk-story-rows path { stroke: #4e816e; }
[data-theme="light"] #desk-story-live-panel text { fill: var(--muted); }
[data-theme="light"] .world :is(.ocean-flow-marks, .bottle-flow-marks, .bottle-water-bubbles) { stroke: #337e6a; }
[data-theme="light"] .world :is(#glass-volume, #break-glass-volume, #bneck-glass-volume) stop:nth-child(1) { stop-color: #3b7968; }
[data-theme="light"] .world :is(#glass-volume, #break-glass-volume, #bneck-glass-volume) stop:nth-child(2) { stop-color: #7caf98; }
[data-theme="light"] .world :is(#glass-volume, #break-glass-volume, #bneck-glass-volume) stop:nth-child(3) { stop-color: #4a8773; }
[data-theme="light"] .world :is(#glass-volume, #break-glass-volume, #bneck-glass-volume) stop:nth-child(4) { stop-color: #296354; }
[data-theme="light"] .world :is(#glass-volume, #break-glass-volume, #bneck-glass-volume) stop:nth-child(5) { stop-color: #204d42; }
[data-theme="light"] #bottle-label stop:first-child { stop-color: #528f75; }
[data-theme="light"] #bottle-label stop:last-child { stop-color: #32735f; }
[data-theme="light"] #opening-aura { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-disc, .theme-rays, .theme-cutout { transition: none; }
}

.jelly-eye-back { display: none; }
[data-theme="light"] .jelly-eye-back { display: inline; }
@media (min-width: 701px) and (max-width: 900px) {
  .nav { gap: 16px; padding-inline: 4%; }
  .nav > nav { gap: 18px; }
  .wordmark { width: 158px; }
  .nav-cta { padding: 12px 14px; }
  .nav-cta span { margin-left: 12px; }
}

/* Shared text actions: no button surfaces, in either palette. */
:root .intro .primary,
:root .nav .nav-cta,
:root .mobile-menu summary,
:root .mobile-menu[open] summary,
:root .mobile-menu nav .text-action,
:root .intro .primary:is(:hover, :focus-visible),
:root .nav .nav-cta:is(:hover, :focus-visible),
:root .mobile-menu summary:is(:hover, :focus-visible),
:root .mobile-menu nav .text-action:is(:hover, :focus-visible) {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  color: var(--mint);
  transform: none;
  text-decoration: none;
}
.text-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
:root .intro .primary, :root .nav .nav-cta { padding: 14px 0; min-height: 44px; }
:root .mobile-menu summary { padding: 12px 0; min-height: 44px; }
:root .mobile-menu nav .text-action { display: inline-flex; justify-self: start; }
:root .text-action .action-chevron {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  color: currentColor;
  transition: transform .2s ease;
}
.text-action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 28px;
  bottom: 7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.text-action:is(:hover, :focus-visible)::after,
.mobile-menu[open] > .text-action::after { transform: scaleX(1); }
.text-action:is(:hover, :focus-visible) .action-chevron,
.mobile-menu[open] > .text-action .action-chevron { transform: translateY(2px); }
:root .input-shell button, :root .input-shell button:is(:hover, :focus-visible) {
  background: transparent;
  box-shadow: none;
  border: 0;
  color: var(--mint);
}
:root .theme-toggle:is(:hover, :focus-visible) { text-decoration: none; box-shadow: none; }
:root .chapters a:is(:hover, :focus-visible) { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .text-action::after, :root .text-action .action-chevron { transition: none; }
  .text-action:is(:hover, :focus-visible) .action-chevron,
  .mobile-menu[open] > .text-action .action-chevron { transform: none; }
}

/* Drawn arrows align optically with the labels, independent of font glyphs. */
:root .text-action { gap: 10px; line-height: 1.45; }
:root .intro .primary { font-weight: 600; }
.theme-toggle > svg { transition: transform .25s ease; transform-origin: center; }
.theme-toggle:is(:hover, :focus-visible) > svg { transform: rotate(8deg) scale(1.1); }
.input-shell button { display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle > svg { transition: none; }
  .theme-toggle:is(:hover, :focus-visible) > svg { transform: none; }
}

/* The send affordance appears only once the field is being used. */
.input-shell { column-gap: 0; }
:root .input-shell .field-send {
  width: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  background: transparent;
  transition: width .2s ease, opacity .2s ease, visibility .2s;
}
:root .input-shell:focus-within .field-send,
:root .input-shell textarea:not(:placeholder-shown) + .field-send {
  width: 38px;
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  :root .input-shell .field-send { transition: none; }
}

/* Floating label: a quiet prompt at rest, examples only when editing. */
.input-shell { position: relative; min-height: 50px; --field-placeholder: #a4c3b5; }
[data-theme="light"] .input-shell { --field-placeholder: var(--muted); }
/* Lower the field and expand its writing area in one synchronized motion. */
.field-space { position: relative; height: 158px; }
.field-space > .input-shell {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 106px;
  width: 100%;
  transition: bottom .24s ease, background .2s ease, box-shadow .2s ease;
}
.field-space:focus-within > .input-shell,
.field-space:has(textarea:not(:placeholder-shown)) > .input-shell {
  bottom: 0;
  transition-delay: 0s;
}
.field-space + #preview-note {
  transform: translateY(-106px);
  transition: transform .24s ease;
}
.field-space:focus-within + #preview-note,
.field-space:has(textarea:not(:placeholder-shown)) + #preview-note {
  transform: translateY(0);
  transition-delay: 0s;
}
:root .input-shell textarea {
  display: block;
  height: 36px;
  padding: 8px 12px;
  line-height: 20px;
  resize: none;
  overflow-y: auto;
  scrollbar-width: none;
  transition: height .24s ease, padding .24s ease;
}
:root .input-shell textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
:root .input-shell:focus-within textarea,
:root .input-shell textarea:not(:placeholder-shown) {
  height: 144px;
  padding: 28px 12px 12px;
  transition-delay: 0s;
}
:root .input-shell .field-send { align-self: flex-end; height: 38px; }
@media (prefers-reduced-motion: reduce) {
  :root .input-shell textarea { transition: none; }
}
:root .input-shell textarea::placeholder { color: transparent; opacity: 1; }
:root .input-shell textarea:focus::placeholder { color: var(--field-placeholder); transition: color .2s ease; }
:root .input-shell .field-label {
  position: absolute;
  left: 19px;
  top: 50%;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
  cursor: text;
  transform: translateY(-50%);
  transform-origin: left top;
  transition: top .2s ease, transform .2s ease, color .2s ease;
}
:root .input-shell:focus-within .field-label,
:root .input-shell textarea:not(:placeholder-shown) ~ .field-label {
  top: 9px;
  transform: translateY(0) scale(.8);
  color: var(--muted);
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  :root .input-shell .field-label { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .field-space > .input-shell, .field-space + #preview-note,
  :root .input-shell textarea:focus::placeholder { transition: none; }
}

/* Keep the mascot behind headline accents in the light palette. */
[data-theme="light"] #desk-svg [fill="#329B91"] { fill: #438f84; }
[data-theme="light"] #desk-svg [fill="#69C8BA"] { fill: #7ab4a2; }
[data-theme="light"] #desk-svg [fill="#236A63"] { fill: #316b61; }

/* Clear section position in daylight, without introducing button boxes. */
[data-theme="light"] .chapters a { transition: color .2s ease; }
[data-theme="light"] .chapters a[aria-current] {
  color: var(--text);
  font-weight: 600;
}
[data-theme="light"] .chapters a[aria-current] i {
  width: 13px;
  height: 1px;
  border-radius: 0;
  background: var(--mint);
}
:root[data-theme="light"] .chapters a:is(:hover, :focus-visible) {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 4px;
}
[data-theme="light"] .chapters a:is(:hover, :focus-visible) i {
  width: 13px;
  height: 1px;
  border-radius: 0;
  background: var(--mint);
}
[data-theme="light"] .chapters a[aria-current]:is(:hover, :focus-visible) i { height: 1px; }
@media (max-width: 700px) {
  [data-theme="light"] .chapters a[aria-current] i,
  [data-theme="light"] .chapters a:is(:hover, :focus-visible) i { width: 9px; }
}

/* Header actions sit beside the wordmark; contact and utility icons sit right. */
.nav > nav { margin-left: 8px; }
.header-contacts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.contact-icon, .story-stop {
  border: 0; background: transparent; color: var(--muted); font: inherit;
}
.contact-icon { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; }
.contact-icon svg { display: block; }
.contact-icon:disabled { opacity: 1; cursor: default; }
:root .mobile-menu summary {
  display: grid; place-items: center; width: 42px; height: 42px; min-height: 42px;
  padding: 0; border: 0; background: none; color: var(--text); cursor: pointer;
}
:root .mobile-menu[open] summary { background: none; }
.menu-symbol > use { transition: transform .2s ease, opacity .2s ease; }
.menu-top { transform-origin: 12px 6px; }
.menu-bottom { transform-origin: 16px 18px; }
.mobile-menu[open] .menu-top { transform: translateY(6px) rotate(45deg); }
.mobile-menu[open] .menu-middle { opacity: 0; }
.mobile-menu[open] .menu-bottom { transform: translate(-4px, -6px) rotate(-45deg) scaleX(1.8); }
.mobile-contacts { display: flex; flex-direction: column; padding-top: 8px; }
.mobile-contacts .contact-icon { display: flex; width: auto; gap: 12px; font-size: 15px; }
.story-stop {
  position: fixed; z-index: 30; bottom: 20px; left: 50%; transform: translateX(-50%);
  padding: 12px 18px; border-radius: 6px; background: var(--bg); color: var(--text);
  font-size: 12px; cursor: pointer;
}
.story-stop[hidden] { display: none; }
.story-stop span { margin-left: 12px; }
.story-stop:hover, .story-stop:focus-visible { color: var(--mint); }
@media (max-width: 700px) {
  .header-contacts, .nav > nav { display: none; }
  .nav .theme-toggle { margin-left: auto; }
  .mobile-menu { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .menu-symbol > use { transition: none; } }

:root .mobile-menu summary:is(:hover, :focus-visible) { background: none; color: var(--mint); }

/* Submerged elements retain exterior hues; transparency creates the water effect. */
:root { --bottle-flow: #32695b; --bottle-icon: #79b9a6; }
:root[data-theme="light"] { --bottle-flow: #558e73; --bottle-icon: #385c50; }
[data-theme="light"] #submerged-input .outside { stop-color: #558e73; }
:root #submerged-input .inside { stop-color: var(--bottle-flow); stop-opacity: .75; }
:root .world .submerged-flow { stroke: var(--bottle-flow); stroke-opacity: .75; }
:root .world .internal-process { fill: var(--bottle-icon); fill-opacity: .75; stroke: none; }
:root #process-icon-color feFlood { flood-color: var(--bottle-icon); }

/* Quieter reflections in dark water, without changing the glass palette. */
:root .glass-highlights { opacity: .3; }
:root[data-theme="light"] .glass-highlights { opacity: 1; }

/* Quiet contextual hints, matching the chapter-navigation labels. */
.component-hint {
  position: fixed; z-index: 60; width: max-content; max-width: min(270px, calc(100vw - 24px));
  padding: 12px 15px; border-radius: 7px; background: #102e28; color: #d2e5dd;
  font: 13px/1.5 "Instrument Sans", sans-serif; box-shadow: 0 6px 24px #0002;
}
.component-hint[hidden] { display: none; }
.component-hint strong { display: block; margin-bottom: 4px; font-weight: 600; color: #91c8b7; }
.component-hint span { display: block; }
[data-theme="light"] .component-hint { background: #d8e9e1; color: #274f44; box-shadow: 0 6px 24px #153b2414; }
[data-theme="light"] .component-hint strong { color: #205d51; }
[data-hint][role="img"] { cursor: help; pointer-events: visiblePainted; }
[data-hint][role="img"]:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }

/* Decorative SVG layers must not intercept component hover/focus targets. */
.world { pointer-events: none; }
.world [id$="-background"] { pointer-events: none; }

/* Components stay in place; emphasis comes from their symbols, not expanding boxes. */
.node-left .node-label { display: none; }
.system-node > image, .internal-process > path, .internal-process > circle {
  transform-box: fill-box; transform-origin: center;
  transition: scale .2s ease, filter .2s ease;
}
.system-node:is(:hover, :focus-visible, .hint-active) > image { scale: 1.08; }
.internal-process:is(:hover, :focus-visible, .hint-active) { fill-opacity: .95; }
.internal-process { transition: fill-opacity .2s ease; }
.system-node.hint-active .node-surface { fill: #20574a; }
[data-theme="light"] .system-node.hint-active .node-surface { fill: #b8d9c9; }
@media (prefers-reduced-motion: reduce) {
  .system-node > image { transition: none; }
  .system-node:is(:hover, :focus-visible, .hint-active) > image { scale: 1; }
}

#flow-process-hub, #desk-jelly-character { transition: filter .2s ease; }
:is(#flow-process-hub, #desk-jelly-character):is(:hover, :focus-visible, .hint-active) { filter: brightness(1.12); }

/* Internal process symbols respond as one icon, including their cutout details. */
.internal-process {
  transform-box: fill-box;
  transform-origin: center;
  transition: scale .2s ease, fill-opacity .2s ease, filter .2s ease;
}
:root .world .internal-process:is(:hover, :focus-visible, .hint-active) {
  scale: 1.1;
  fill-opacity: 1;
  filter: brightness(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .internal-process { transition: none; }
  :root .world .internal-process:is(:hover, :focus-visible, .hint-active) { scale: 1; }
}

/* Scale artwork inside the positioned mascot; leave its scene transform intact. */
#desk-jelly-character > g {
  transform-box: fill-box; transform-origin: center;
  transition: scale .22s ease;
}
#desk-jelly-character:is(:hover, :focus-visible, .hint-active) { filter: brightness(1.16); }
#desk-jelly-character:is(:hover, :focus-visible, .hint-active) > g { scale: 1.07; }
@media (prefers-reduced-motion: reduce) {
  #desk-jelly-character > g { transition: none; }
  #desk-jelly-character:is(:hover, :focus-visible, .hint-active) > g { scale: 1; }
}

/* Paired hero actions: direct contact or a guided demonstration. */
.hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 32px; margin-top: 26px; }
:root .hero-actions .primary { margin-top: 0; }
.tour-play { border: 0; background: none; border-radius: 0; padding: 14px 0; min-height: 44px; color: var(--mint); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tour-play svg { flex: none; transition: transform .2s ease; }
.tour-play:is(:hover, :focus-visible) svg { transform: translateX(2px); }
:root .story-stop { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; opacity: .5; background: #b94040; color: #fff; box-shadow: 0 4px 18px #0002; }
:root .story-stop[hidden] { display: none; }
:root .story-stop:is(:hover, :focus-visible) { background: #d34c4c; color: #fff; }
:root .story-stop:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 700px) { .hero-actions { column-gap: 24px; margin-top: 14px; } }
@media (max-width: 430px) { .hero-actions { flex-direction: column; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .tour-play svg { transition: none; } }

/* Keep playback control directly below the chapter rail. */
:root .chapters .story-stop { position: static; transform: none; margin-top: 10px; align-self: center; flex-shrink: 0; }

/* The play symbol rides the wave into the persistent pause/resume control. */
:root .chapters .story-stop.in-transit { opacity: 0; pointer-events: none; }
.tour-floater { position: fixed; z-index: 65; width: 38px; height: 38px; display: grid; place-items: center; pointer-events: none; border-radius: 50%; background: rgb(185 64 64 / calc(var(--morph, 0) * .5)); color: var(--mint); }
.tour-floater svg { width: 22px; height: 22px; fill: currentColor; }
.flight-play { opacity: calc(1 - var(--morph, 0)); }
.flight-pause { opacity: calc(var(--morph, 0) * .5); fill: white; color: white; }
:root .story-stop[data-paused="true"] { background: #367f73; }
:root .story-stop[data-paused="true"]:is(:hover, :focus-visible) { background: #439788; }

/* External process SVGs keep the same submerged opacity and theme color. */
.internal-process > image { opacity: .75; transition: opacity .2s ease; }
.internal-process:is(:hover, :focus-visible, .hint-active) > image { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .internal-process > image { transition: none; }
}