/* ==========================================================================
   Demo "sea" — the maritime picture console. Self-contained: needs only the
   site tokens. Markup is built by /js/demos/sea.js inside [data-demo="sea"].
   The console is an instrument, so it stays dark in both themes.
   ========================================================================== */

.seademo {
  --sd-bg: var(--night-1);
  --sd-panel: var(--night-2);
  --sd-line: var(--night-line);
  --sd-line-2: rgb(255 255 255 / 0.15);
  --sd-ink: var(--night-ink);
  --sd-ink-2: var(--night-ink-2);
  --sd-ink-3: var(--night-ink-3);
  --sd-alert: var(--crimson-300);
  --sd-mono: var(--font-mono);
  position: relative;
  isolation: isolate;
  color-scheme: dark;
  color: var(--sd-ink);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 120px),
    var(--sd-bg);
  border: 1px solid var(--sd-line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.06) inset,
    0 60px 120px -60px rgb(0 0 0 / 0.9);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-align: left;
}
/* Outline, so the selected tab's inset shadow cannot cancel the ring. */
.seademo :focus-visible { outline: 2px solid var(--night-ink); outline-offset: 2px; }
.seademo button { -webkit-tap-highlight-color: transparent; }

/* No-JS fallback */
.seademo__fallback { position: relative; margin: 0; }
.seademo__fallback img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.seademo__fallback figcaption { padding: 14px 18px; font-family: var(--sd-mono); font-size: var(--fs-nano); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-ink-3); }

/* ---------------------------------------------------------------- Bar */
.seademo__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--sd-line);
  font-family: var(--sd-mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.seademo__id { display: flex; align-items: center; gap: 12px; min-width: 0; white-space: nowrap; }
.seademo__glyph { width: 8px; height: 8px; background: var(--crimson); box-shadow: none; flex: none; }
.seademo__name { color: var(--sd-ink); font-weight: 600; }
.seademo__sector { color: var(--sd-ink-3); overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem; }
.seademo__tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--sd-line-2);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.3);
}
.seademo__tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 5px;
  font-family: var(--sd-mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-ink-3);
  transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
@media (hover: hover) { .seademo__tabs [role="tab"]:hover { color: var(--sd-ink); } }
.seademo__tabs [role="tab"][aria-selected="true"] { color: var(--sd-ink); background: rgb(255 255 255 / 0.1); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12) inset; }
.seademo__tabs [role="tab"][aria-selected="true"] .icon { color: var(--sd-alert); }
.seademo__meta { justify-self: end; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
/* Feeds held by the picture: square keys, hairline frames, no blinking */
.seademo__feeds { display: inline-flex; border: 1px solid var(--sd-line-2); border-radius: 2px; }
.seademo__feeds span { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; font-size: 0.64rem; letter-spacing: 0.14em; color: var(--sd-ink-2); }
.seademo__feeds span + span { border-left: 1px solid var(--sd-line); }
.seademo__feeds span::before { content: ""; width: 5px; height: 5px; background: var(--sd-ink-2); }
.seademo__feeds span:first-child::before { background: var(--sd-alert); }

/* --------------------------------------------------------------- Main */
.seademo__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  border-bottom: 1px solid var(--sd-line);
}

/* Stage: imagery, overlay canvas, HUD */
.seademo__stage { position: relative; min-height: 0; overflow: hidden; background: var(--night); isolation: isolate; }
.seademo__stage::before { content: ""; display: block; padding-top: 56.25%; }
.seademo__layer { position: absolute; inset: 0; transition: opacity 900ms var(--ease-soft), transform 1200ms var(--ease-out), filter 900ms var(--ease-soft), visibility 0s linear 0s; }
.seademo__layer img, .seademo__layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seademo__video { opacity: 0; transition: opacity 900ms var(--ease-soft); }
.seademo.has-video .seademo__video { opacity: 1; }
.seademo__layer--surface { transform-origin: 55% 60%; }
.seademo__layer--subsea { opacity: 0; transform: scale(1.08); visibility: hidden; transition: opacity 900ms var(--ease-soft) 150ms, transform 1400ms var(--ease-out), visibility 0s linear 1.1s; }
.seademo[data-view="subsea"] .seademo__layer--surface { opacity: 0; transform: scale(1.18); filter: blur(8px) brightness(0.5); visibility: hidden; transition: opacity 800ms var(--ease-soft), transform 1200ms var(--ease-out), filter 800ms var(--ease-soft), visibility 0s linear 1s; }
.seademo[data-view="subsea"] .seademo__layer--subsea { opacity: 1; transform: none; visibility: visible; transition: opacity 900ms var(--ease-soft) 150ms, transform 1400ms var(--ease-out), visibility 0s; }
.seademo__deep { filter: brightness(1.12) saturate(1.05); }
/* Vignette and a faint scanline texture — the instrument look */
.seademo__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px),
    radial-gradient(120% 95% at 50% 50%, transparent 58%, rgb(0 0 0 / 0.5));
}
.seademo__canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; touch-action: manipulation; }
.seademo.is-switching .seademo__canvas { animation: sd-reacquire 1s var(--ease-soft) both; }
@keyframes sd-reacquire { 0%, 45% { opacity: 0; } 100% { opacity: 1; } }

.seademo__hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-family: var(--sd-mono); color: #fff; }
.seademo__corner { position: absolute; width: 18px; height: 18px; border: 0 solid rgb(255 255 255 / 0.6); }
.seademo__corner--tl { top: 12px; left: 12px; border-top-width: 1.5px; border-left-width: 1.5px; }
.seademo__corner--tr { top: 12px; right: 12px; border-top-width: 1.5px; border-right-width: 1.5px; }
.seademo__corner--bl { bottom: 12px; left: 12px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.seademo__corner--br { bottom: 12px; right: 12px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.seademo__read { position: absolute; top: 20px; font-size: 10px; line-height: 1.7; letter-spacing: 0.14em; color: rgb(255 255 255 / 0.86); text-shadow: 0 1px 3px rgb(0 0 0 / 0.8); }
.seademo__read--tl { left: 26px; }
.seademo__read--tr { right: 26px; display: grid; justify-items: center; line-height: 1.2; }
.seademo__north { display: block; width: 0; height: 0; margin-top: 4px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 14px solid rgb(255 255 255 / 0.85); }
.seademo__scale { position: absolute; right: 26px; bottom: 22px; display: grid; justify-items: end; gap: 5px; font-size: 9.5px; letter-spacing: 0.14em; color: rgb(255 255 255 / 0.8); text-shadow: 0 1px 3px rgb(0 0 0 / 0.8); }
.seademo__scale i { display: block; width: 110px; height: 6px; border: 1.5px solid rgb(255 255 255 / 0.8); border-top: 0; }
.seademo__scale b { font-weight: 500; }
.seademo__depth { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; opacity: 0; padding: 8px 12px; background: rgb(5 5 6 / 0.6); border: 1px solid rgb(255 255 255 / 0.2); white-space: nowrap; }
.seademo.is-switching .seademo__depth { animation: sd-depth 1.05s var(--ease-soft) both; }
@keyframes sd-depth { 0% { opacity: 0; } 15%, 60% { opacity: 1; } 100% { opacity: 0; } }
.seademo[data-view="subsea"] .seademo__scale, .seademo[data-view="subsea"] .seademo__read--tr { display: none; }

/* --------------------------------------------------------------- Side */
.seademo__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 642px; /* both views keep the console the same height */
  border-left: 1px solid var(--sd-line);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.02), transparent 40%), var(--sd-panel);
}
.seademo__panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.seademo__panel[hidden] { display: none; }
.seademo__phead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.seademo__h { margin: 0; font-family: var(--sd-mono); font-size: var(--fs-nano); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-ink-3); }
.seademo__h--sm { padding: 16px 16px 8px; }
.seademo__count { font-family: var(--sd-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--sd-ink-2); }

.seademo__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--sd-line); }
.seademo__row {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  grid-template-areas: "mark name data" "mark type state";
  column-gap: 12px;
  row-gap: 1px;
  align-items: center;
  width: 100%;
  padding: 7px 16px;
  border-top: 1px solid var(--sd-line);
  text-align: left;
  color: var(--sd-ink);
  transition: background-color var(--t-fast);
}
@media (hover: hover) { .seademo__row:hover { background: rgb(255 255 255 / 0.04); } }
.seademo__row[aria-pressed="true"] { background: rgb(255 255 255 / 0.075); box-shadow: 2px 0 0 #fff inset; }
.seademo__row[aria-pressed="true"][data-status="dark"] { box-shadow: 2px 0 0 var(--crimson-300) inset; }
.seademo .seademo__row:focus-visible { outline-offset: -2px; }
.seademo__rmark { grid-area: mark; width: 8px; height: 8px; border: 1.5px solid rgb(255 255 255 / 0.7); transform: rotate(45deg); transition: background-color var(--t-fast), border-color var(--t-fast); }
.seademo__row[aria-pressed="true"] .seademo__rmark { background: #fff; border-color: #fff; }
.seademo__row[data-status="dark"] .seademo__rmark { background: var(--crimson); border-color: var(--crimson-300); }
.seademo__row[data-status="conflict"] .seademo__rmark { border-color: var(--crimson-300); }
.seademo__rname { grid-area: name; font-size: 0.92rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seademo__rtype { grid-area: type; font-size: 0.78rem; line-height: 1.3; color: var(--sd-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seademo__rdata { grid-area: data; display: flex; gap: 10px; justify-content: flex-end; font-family: var(--sd-mono); font-size: 0.72rem; color: var(--sd-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.seademo__rstate { grid-area: state; justify-self: end; font-family: var(--sd-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-ink-3); white-space: nowrap; }
.seademo__row[data-status="dark"] .seademo__rstate,
.seademo__row[data-status="conflict"] .seademo__rstate { color: var(--sd-alert); }
.seademo__row[data-status="rerouted"] .seademo__rstate,
.seademo__row[data-status="proposed"] .seademo__rstate,
.seademo__row[data-status="sent"] .seademo__rstate { color: var(--sd-ink); }

/* Detail */
.seademo__detail { flex: 1; padding: 14px 16px 16px; min-height: 344px; }
.seademo__empty { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px; border: 1px dashed var(--sd-line-2); border-radius: 6px; color: var(--sd-ink-2); font-size: 0.84rem; }
.seademo__stats dd.is-alert { color: var(--sd-alert); }
.seademo__empty .icon { color: var(--sd-ink-3); }
.seademo__dhead { position: relative; display: grid; gap: 2px; padding-right: 76px; }
.seademo__kicker { position: absolute; right: 0; top: 4px; padding: 3px 6px; border: 1px solid var(--sd-line-2); border-radius: 2px; font-family: var(--sd-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-ink-2); }
.seademo__dname { margin: 0; font-family: var(--font-sans); font-size: 1.2rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; color: var(--sd-ink); }
.seademo__dtype { font-size: 0.8rem; color: var(--sd-ink-3); }
.seademo__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; margin: 12px 0 0; }
.seademo__stats > div { padding: 7px 0; border-top: 1px solid var(--sd-line); min-width: 0; }
.seademo__stats dt { font-family: var(--sd-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-ink-3); }
.seademo__stats dd { margin: 2px 0 0; font-family: var(--sd-mono); font-size: 0.8rem; color: var(--sd-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seademo__stats--sub { margin: 0 16px; }
.seademo__assess { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--sd-line-2); font-size: 0.84rem; line-height: 1.45; color: var(--sd-ink-2); }
.seademo__assess.is-alert { border-left-color: var(--crimson-300); color: var(--sd-ink); }
.seademo__acts { display: grid; gap: 8px; margin-top: 12px; }
.seademo__acts .seademo__btn { width: 100%; }
.seademo__acts:empty { display: none; }
[data-side="subsea"] .seademo__acts { margin: 14px 16px 0; }

/* Buttons — square-cut instrument keys */
.seademo__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--sd-line-2);
  background: rgb(255 255 255 / 0.04);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sd-ink);
  white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-exit) var(--ease-out);
}
@media (hover: hover) { .seademo__btn:hover:not([disabled]) { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.32); } }
.seademo__btn:active:not([disabled]) { transform: scale(0.97); }
.seademo__btn .icon { flex: none; }
.seademo__btn--alert { background: var(--crimson); border-color: var(--crimson-400); color: #fff; }
@media (hover: hover) { .seademo__btn--alert:hover:not([disabled]) { background: var(--crimson-400); border-color: var(--crimson-300); } }
.seademo__btn--primary { background: #fff; border-color: #fff; color: var(--night); }
@media (hover: hover) { .seademo__btn--primary:hover:not([disabled]) { background: var(--night-ink-2); border-color: var(--night-ink-2); } }
.seademo__btn[disabled] { cursor: default; color: var(--sd-ink-2); background: transparent; }
.seademo__btn[disabled] .icon { color: var(--sd-alert); }

/* Subsea panel */
.seademo__progress { height: 3px; margin: 16px 16px 0; background: var(--sd-line-2); overflow: hidden; }
.seademo__progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #fff, var(--night-ink-2)); transition: width 180ms linear; }
.seademo__plabel { display: flex; gap: 8px; margin: 8px 16px 0; font-family: var(--sd-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-ink-3); }
.seademo__plabel span:first-child { color: var(--sd-ink); font-variant-numeric: tabular-nums; }
.seademo__findings { list-style: none; margin: 0 16px; padding: 0; border-top: 1px solid var(--sd-line); }
.seademo__findings li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--sd-line); font-size: 0.84rem; animation: sd-in 520ms var(--ease-out) both; }
.seademo__findings li.is-empty { display: block; color: var(--sd-ink-3); animation: none; }
.seademo__findings b { font-family: var(--sd-mono); font-size: 0.72rem; font-weight: 600; color: var(--sd-alert); letter-spacing: 0.06em; }
.seademo__findings em { font-style: normal; font-family: var(--sd-mono); font-size: 0.7rem; color: var(--sd-ink-3); white-space: nowrap; }
.seademo__note { margin: auto 16px 16px; padding-top: 16px; font-size: 0.78rem; color: var(--sd-ink-3); }

/* --------------------------------------------------------------- Foot */
.seademo__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  padding: 12px 14px 12px 18px;
}
.seademo__log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(3 * 1.62em + 4px);
  overflow: hidden;
  font-family: var(--sd-mono);
  font-size: 0.72rem;
  line-height: 1.62;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
  mask-image: linear-gradient(180deg, transparent, #000 45%);
}
.seademo__log li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; color: var(--sd-ink-2); white-space: nowrap; animation: sd-in 520ms var(--ease-out) both; }
.seademo__log li span { overflow: hidden; text-overflow: ellipsis; }
.seademo__log b { font-weight: 500; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-ink-3); padding-top: 0.08em; }
.seademo__log li.is-alert span { color: var(--sd-alert); }
.seademo__log li.is-alert b, .seademo__log li.is-warn b { color: var(--sd-alert); }
.seademo__log li.is-warn span { color: var(--sd-ink); }
@keyframes sd-in { from { opacity: 0; transform: translateY(8px); } }

.seademo__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.seademo__i-play { display: none; }
.seademo.is-paused .seademo__i-play { display: inline-flex; }
.seademo.is-paused .seademo__i-pause { display: none; }
.seademo__i-play, .seademo__i-pause { line-height: 0; }
.seademo__layers { display: inline-flex; gap: 0; margin-left: 4px; border: 1px solid var(--sd-line-2); border-radius: 6px; overflow: hidden; }
.seademo__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px;
  font-family: var(--sd-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-ink-3);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.seademo__toggle + .seademo__toggle { border-left: 1px solid var(--sd-line); }
.seademo__toggle::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; transition: background-color var(--t-fast); }
.seademo__toggle[aria-pressed="true"] { color: var(--sd-ink); }
.seademo__toggle[aria-pressed="true"]::before { background: currentColor; }
@media (hover: hover) { .seademo__toggle:hover { background: rgb(255 255 255 / 0.05); color: var(--sd-ink); } }
.seademo .seademo__toggle:focus-visible { outline-offset: -2px; }

.seademo__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------- Responsive */
@media (max-width: 1180px) {
  .seademo__main { grid-template-columns: minmax(0, 1fr) 312px; }
}
@media (max-width: 960px) {
  .seademo__main { grid-template-columns: minmax(0, 1fr); }
  .seademo__stage::before { padding-top: 62.5%; }
  .seademo__side { min-height: 420px; border-left: 0; border-top: 1px solid var(--sd-line); }
  .seademo__detail { min-height: 360px; }
  .seademo__panel[data-side="surface"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .seademo__panel[data-side="surface"][hidden] { display: none; }
  .seademo__panel[data-side="surface"] .seademo__phead { grid-column: 1 / -1; }
  .seademo__panel[data-side="surface"] .seademo__detail { border-left: 1px solid var(--sd-line); border-top: 1px solid var(--sd-line); }
  .seademo__note { margin-top: 16px; }
}
@media (max-width: 700px) {
  .seademo { border-radius: var(--r-lg); }
  .seademo__bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding: 10px 12px; }
  .seademo__sector { display: none; }
  .seademo__tabs { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; }
  .seademo__tabs [role="tab"] { height: 38px; }
  .seademo__stage::before { padding-top: 75%; }
  .seademo__side { min-height: 690px; }
  .seademo__panel[data-side="surface"] { display: flex; }
  .seademo__panel[data-side="surface"] .seademo__detail { border-left: 0; border-top: 0; }
  .seademo__row { padding: 10px 14px; min-height: 52px; }
  .seademo__foot { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
  .seademo__controls { justify-content: flex-start; }
  .seademo__layers { margin-left: 0; }
  .seademo__read { top: 16px; font-size: 9px; }
  .seademo__read--tl { display: none; }
  .seademo__read--tl { left: 20px; }
  .seademo__read--tr { right: 20px; }
  .seademo__scale { right: 20px; bottom: 16px; }
  .seademo__log li { grid-template-columns: 56px minmax(0, 1fr); white-space: normal; }
  .seademo__log { height: calc(4 * 1.62em); }
  .seademo__log li span { overflow: visible; }
}
@media (max-width: 440px) {
  .seademo__meta { gap: 8px; }
  .seademo__feeds span { padding: 0 7px; gap: 5px; }
  .seademo__btn { padding: 0 10px; font-size: 0.8rem; }
  .seademo__toggle { padding: 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .seademo__layer, .seademo__video, .seademo__log li, .seademo__findings li { transition: none !important; animation: none !important; }
}