/* Product motion tokens and the material layer. No filters touch live text. */
:root {
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-slow: 400ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-title: cubic-bezier(0.45, 0, 0.25, 1);
  --ease-liquid: cubic-bezier(0.2, 1.45, 0.4, 1);
  --modal-open-dur: var(--duration-fast);
  --modal-close-dur: var(--duration-quick);
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: var(--ease-smooth-out);
  --check-box: var(--duration-quick);
  --check-draw: 350ms;
  --check-uncheck: var(--duration-quick);
  --check-ease: var(--ease-smooth-out);
  --liquid-opacity: 0.3;
}
html[data-theme="light"] {
  --liquid-opacity: 0.22;
}
.liquid-rail {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
  opacity: var(--liquid-opacity);
}
.top-nav {
  transform: translate3d(0, var(--nav-drift, 0px), 0);
}
.effects-switch > span {
  transition: transform var(--duration-fast) var(--ease-liquid);
}
.primary-button,
.secondary-button,
.profile-option,
.summary-panel,
.app-row,
.top-nav,
.filter-button,
.search-field,
.icon-button {
  isolation: isolate;
}
.primary-button,
.secondary-button {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}
.primary-button::before,
.secondary-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: scale(var(--surface-x, 1), var(--surface-y, 1));
  transition:
    transform var(--duration-slow) var(--ease-liquid),
    box-shadow var(--duration-fast) var(--ease-smooth-out);
  pointer-events: none;
}
.primary-button::before {
  background: var(--accent-gradient);
  border: 1px solid rgb(230 255 255 / 65%);
  box-shadow:
    inset 0 1px 3px #fff8,
    0 3px 18px #8bc5ed24;
}
.secondary-button::before {
  background: var(--surface-soft);
  border: 1px solid var(--control-border);
  box-shadow: inset 0 1px 0 var(--sheen);
}
.primary-button:hover:enabled {
  box-shadow: none;
}
.primary-button:hover:enabled::before,
.secondary-button:hover:not(:disabled)::before {
  --surface-x: 1.015;
  --surface-y: 0.9852;
  box-shadow:
    inset 0 1px 3px #fffb,
    0 5px 22px #9ad6f13d;
}
.secondary-button:hover:enabled {
  background: transparent;
}
.secondary-button:hover:enabled::before {
  border-color: var(--accent);
  background: var(--tint);
}
.secondary-button:hover:not(:disabled)::before {
  border-color: var(--accent);
  background: var(--tint);
}
.primary-button:active:enabled::before,
.secondary-button:active:not(:disabled)::before,
.primary-button.is-liquid-pressed::before,
.secondary-button.is-liquid-pressed::before {
  --surface-x: 1.045;
  --surface-y: 0.95694;
}

/* Every action has the same soft body; emphasis comes from colour and weight. */
:is(
  .text-button,
  .back-button,
  .icon-button,
  .nav-link,
  .app-source,
  .filter-button,
  .source-option,
  .category-button,
  .effects-button
) {
  position: relative;
  isolation: isolate;
}
:is(
  .text-button,
  .back-button,
  .icon-button,
  .nav-link,
  .app-source,
  .filter-button,
  .source-option,
  .category-button,
  .effects-button
)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--tint);
  border: 1px solid var(--rim);
  box-shadow: inset 0 1px 1px var(--sheen);
  opacity: 0;
  transform: scale(0.82, 0.7);
  transition:
    transform var(--duration-slow) var(--ease-liquid),
    opacity var(--duration-quick) var(--ease-smooth-out);
}
:is(
    .text-button,
    .back-button,
    .icon-button,
    .nav-link,
    .app-source,
    .filter-button,
    .source-option,
    .category-button,
    .effects-button
  ):is(:hover, :focus-visible)::before {
  opacity: 1;
  transform: scale(1.025, 0.9756);
}
:is(
    .text-button,
    .back-button,
    .icon-button,
    .nav-link,
    .app-source,
    .filter-button,
    .source-option,
    .category-button,
    .effects-button
  ):is(:active, .is-liquid-pressed)::before {
  opacity: 1;
  transform: scale(1.06, 0.9434);
}
.icon-button {
  border-radius: 50%;
}
.app-source {
  border-radius: 16px;
}
.setup-window {
  transform: translate3d(0, var(--window-drift, 0px), 0);
}
.setup-window::before {
  background: radial-gradient(
    ellipse 550px 250px at var(--window-light-x, 50%) var(--window-light-y, 0%),
    var(--sheen),
    transparent 80%
  );
  opacity: 0.4;
}
.window-toolbar {
  isolation: isolate;
  transform: translate3d(0, var(--toolbar-drift, 0px), 0);
}
.window-toolbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 220px 60px at var(--light-x, 50%) var(--light-y, 0%),
    var(--sheen),
    transparent 90%
  );
  opacity: 0;
  transition: opacity 250ms ease;
}
.window-toolbar.has-liquid-light::after {
  opacity: 0.3;
}
/* Only visual layers yield to scroll. Text, controls and native scroll positions stay put. */
:is(
  dialog,
  .output-details pre,
  .categories,
  .source-options
).has-scroll-elasticity {
  box-shadow: inset 0 var(--scroll-drift, 0px) 18px var(--tint);
}
/* Hover shifts the title colours one place along the gradient. Registered
   colour stops interpolate, so the change glides in and back out; browsers
   without @property simply switch colours. Resting colours are unchanged. */
@property --title-stop-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --title-stop-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --title-stop-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
.gradient-text {
  --title-stop-1: var(--title-1);
  --title-stop-2: var(--title-2);
  --title-stop-3: var(--title-3);
  background-image: linear-gradient(
    115deg,
    var(--title-stop-1),
    var(--title-stop-2) 49%,
    var(--title-stop-3)
  );
  transition:
    --title-stop-1 900ms var(--ease-title),
    --title-stop-2 900ms var(--ease-title),
    --title-stop-3 900ms var(--ease-title);
}
html:not([data-motion="reduced"]) .gradient-text:hover {
  --title-stop-1: var(--title-2);
  --title-stop-2: var(--title-3);
  --title-stop-3: var(--title-1);
}
.primary-button::after,
.secondary-button::after,
.profile-option::after,
.summary-panel::after,
.app-row::after,
.top-nav::after,
.filter-button::after,
.search-field::after,
.icon-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 230px 120px at var(--light-x, 50%) var(--light-y, 0%),
    var(--sheen),
    transparent 80%
  );
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-smooth-out);
}
.icon-button,
.filter-button,
.search-field {
  position: relative;
}
.has-liquid-light::after {
  opacity: 0.45;
}
.app-choice {
  position: relative;
}
.app-choice input {
  position: absolute;
  inset-inline-start: 0;
  opacity: 0;
}
.choice-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-mark);
  background: var(--field);
  box-shadow: inset 0 1px 2px #0002;
  transition:
    background var(--check-box) var(--check-ease),
    box-shadow var(--check-box) var(--check-ease);
}
.choice-mark svg {
  width: 14px;
  height: 14px;
  color: #0e2a35;
  stroke-width: 2.4;
}
.choice-mark path {
  stroke-dasharray: var(--check-len, 32);
  stroke-dashoffset: var(--check-len, 32);
  transition: stroke-dashoffset var(--check-uncheck) var(--check-ease);
}
.app-choice input:checked + .choice-mark {
  background: var(--accent-gradient);
  border-color: #b7e5ed;
  box-shadow: inset 0 1px 1px #fff8;
}
.app-choice input:checked + .choice-mark path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--check-draw) var(--check-ease);
}
.app-choice input:focus-visible + .choice-mark {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.app-choice input:disabled + .choice-mark {
  background: var(--surface-soft);
  border-color: var(--control-border);
  box-shadow: none;
}
.app-choice input:disabled + .choice-mark svg {
  color: var(--muted);
}
.module-row.running .module-status-icon {
  box-shadow: 0 0 0 5px var(--tint);
}
.module-row.just-completed .module-status-icon svg path {
  stroke-dasharray: 23;
  animation: check-arrive var(--duration-slow) var(--ease-smooth-out) both;
}
.aurora {
  animation: ambient-breath 36s ease-in-out infinite alternate;
}
@keyframes ambient-breath {
  to {
    transform: scale(1.035) translateY(-1%);
  }
}
@keyframes check-arrive {
  from {
    stroke-dashoffset: 23;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Transitions.dev: Modal open / close. Used under its product-use licence.
   https://transitions.dev/detail.html?t=modal-open-close — see THIRD_PARTY.md. */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity var(--modal-close-dur) var(--modal-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-modal {
    transition: none !important;
  }
}

/* The explicit control also works in browsers without preference media queries. */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-motion="reduced"] {
  scroll-behavior: auto;
}
html[data-motion="reduced"] .primary-button::before,
html[data-motion="reduced"] .secondary-button::before {
  transform: none;
}
html[data-motion="reduced"]
  :is(
    .text-button,
    .back-button,
    .icon-button,
    .nav-link,
    .app-source,
    .filter-button,
    .source-option,
    .category-button,
    .effects-button
  )::before,
html[data-motion="reduced"] .setup-window,
html[data-motion="reduced"] .window-toolbar {
  transform: none;
}
html[data-motion="reduced"] .gradient-text {
  transition: none;
}
html[data-motion="reduced"] .has-liquid-light::after {
  opacity: 0;
}
html[data-transparency="solid"] {
  --window: #192231;
  --surface: #202c3e;
  --field: #152031;
  --popover: var(--window);
  --sheen: rgb(211 238 255 / 7%);
}
html[data-theme="light"][data-transparency="solid"] {
  --window: #f1f5fc;
  --surface: #fff;
  --field: #f2f6fc;
  --sheen: rgb(255 255 255 / 90%);
}
html[data-transparency="solid"] .aurora {
  display: none;
}
html[data-transparency="solid"] .setup-window::before,
html[data-transparency="solid"] .top-nav,
html[data-transparency="solid"] .source-options,
html[data-transparency="solid"] .selection-column .summary-panel,
html[data-transparency="solid"] dialog,
html[data-transparency="solid"] dialog::backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-transparency="solid"] .catalog-panel {
  background: var(--surface);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .primary-button::before,
  .secondary-button::before {
    transform: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --window: #192231;
    --popover: var(--window);
    --surface: #202c3e;
    --field: #152031;
  }
  html[data-theme="light"] {
    --window: #f1f5fc;
    --surface: #fff;
    --field: #f2f6fc;
  }
  .aurora {
    display: none;
  }
  .setup-window::before,
  .top-nav,
  .source-options,
  .selection-column .summary-panel,
  dialog,
  dialog::backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  :root {
    --window: #192231;
    --popover: var(--window);
    --surface: #202c3e;
  }
  html[data-theme="light"] {
    --window: #f1f5fc;
    --surface: #fff;
  }
}
@media (forced-colors: active) {
  .aurora,
  .liquid-rail,
  .choice-mark {
    display: none;
  }
  .app-choice input {
    position: static;
    opacity: 1;
    appearance: auto;
  }
  .gradient-text {
    background: none;
    color: CanvasText;
  }
  .primary-button,
  .secondary-button {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  .primary-button::before,
  .primary-button::after,
  .secondary-button::before {
    display: none;
  }
  .profile-option:has(input:checked),
  .category-button[aria-pressed="true"] {
    outline: 2px solid Highlight;
  }
}

/* Disabled/busy controls never retain decorative hover or press surfaces. */
:is(button:disabled, [aria-busy="true"])::before {
  transform: none !important;
  box-shadow: none !important;
}
:is(
    .text-button,
    .back-button,
    .icon-button,
    .filter-button,
    .source-option,
    .category-button,
    .effects-button
  ):is(:disabled, [aria-busy="true"])::before {
  opacity: 0 !important;
}
:is(button:disabled, [aria-busy="true"]).has-liquid-light::after {
  opacity: 0;
}