input,
select,
textarea,
#sidebar,
#sidebar > .inner > .alt,
.box,
code,
table tbody tr {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@view-transition {
  navigation: auto;
}

#header[data-shell-persistent] {
  background-color: #ffffff;
  isolation: isolate;
  view-transition-name: spontz-site-header;
}

::view-transition-group(root),
::view-transition-image-pair(root) {
  background-color: #ffffff;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  mix-blend-mode: normal;
}

/* The header has its own snapshot. Do not replay the outgoing page underneath. */
::view-transition-old(root) {
  display: none;
}

::view-transition-old(spontz-site-header),
::view-transition-new(spontz-site-header) {
  animation: none !important;
  mix-blend-mode: normal;
}

/* Keep the outgoing header as the stable snapshot while the page underneath
   changes. The clicked section is selected before navigation, so the live
   header that replaces it has exactly the same visual state. */
::view-transition-group(spontz-site-header) {
  z-index: 1000;
}

::view-transition-old(spontz-site-header) {
  opacity: 1;
}

::view-transition-new(spontz-site-header) {
  opacity: 0;
}

html.floppy-reveal-booting #header[data-shell-persistent],
html.floppy-reveal-pending #header[data-shell-persistent],
html.floppy-exit-active #header[data-shell-persistent] {
  animation: none !important;
  clip-path: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

#mobile-menu-toggle {
  display: none;
}

a:not(.image):not(.button):not(.logo):not(.header-social-link):not(.member-pill):not(.demo-production-link) {
  text-shadow: none;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    text-decoration-color 180ms ease,
    text-shadow 680ms ease-out;
}

a:not(.image):not(.button):not(.logo):not(.header-social-link):not(.member-pill):not(.demo-production-link):hover,
a:not(.image):not(.button):not(.logo):not(.header-social-link):not(.member-pill):not(.demo-production-link):focus-visible {
  text-shadow:
    0 0 0.08em rgba(255, 255, 255, 0.92),
    0 0 0.28em currentColor,
    0 0 0.62em currentColor,
    0 0 1em rgba(245, 106, 106, 0.48);
  transition:
    border-color 120ms ease,
    color 120ms ease,
    text-decoration-color 120ms ease,
    text-shadow 110ms ease-in;
}


/* Match listing media before the deferred reveal script can tag its targets.
   Keep article prose visible for browser reader modes. */
@media (prefers-reduced-motion: no-preference) {
  html.floppy-motion-enabled [data-cd-entrance]:not(.is-cd-visible) {
    opacity: 0;
  }
}

html.floppy-reveal-booting [data-production-list] :is(.tv-preview, .tools-preview, .image),
.floppy-reveal-pending [data-floppy-reveal] {
  opacity: 0;
  transform: translateY(0.55rem);
  visibility: hidden;
}

.floppy-reveal-pending [data-floppy-reveal].is-floppy-visible {
  animation: floppy-block-reveal 520ms steps(14, end) both;
  visibility: visible;
}

.floppy-reveal-pending .floppy-text-chunk {
  filter: blur(0.08em) brightness(1.5);
  opacity: 0;
}

.floppy-reveal-pending .floppy-text-chunk.is-floppy-text-visible {
  filter: none;
  opacity: 1;
  transition: opacity 115ms steps(2, end), filter 150ms ease-out;
}

.floppy-reveal-pending [data-floppy-link]:not(.is-floppy-link-visible) {
  border-bottom-color: transparent !important;
  color: inherit !important;
  pointer-events: none;
  text-decoration-color: transparent !important;
}

.floppy-reveal-pending [data-floppy-link].is-floppy-link-visible {
  animation: floppy-link-activation-glow 950ms ease-out;
  transition: border-color 150ms steps(3, end), color 190ms ease-out, text-decoration-color 150ms steps(3, end);
}

@keyframes floppy-link-activation-glow {
  0% {
    filter: brightness(2.15);
    text-shadow: 0 0 0.12em #fff, 0 0 0.32em currentColor, 0 0 0.7em currentColor;
  }

  28% {
    filter: brightness(1.55);
    text-shadow: 0 0 0.08em #fff, 0 0 0.25em currentColor, 0 0 0.5em currentColor;
  }

  100% {
    filter: none;
    text-shadow: none;
  }
}

@keyframes floppy-block-reveal {
  0% {
    clip-path: inset(0 0 100% 0);
    filter: brightness(1.8) contrast(1.25);
    opacity: 0;
    transform: translateY(0.55rem);
  }

  45% {
    opacity: 1;
  }

  70% {
    clip-path: inset(0 0 0 0);
    filter: brightness(1.35) contrast(1.12);
    transform: translateY(-0.1rem);
  }

  100% {
    clip-path: inset(0 0 0 0);
    filter: none;
    opacity: 1;
    transform: none;
  }
}

.floppy-exit-active [data-floppy-revealed].is-floppy-exiting {
  animation: floppy-block-reveal 420ms steps(14, end) var(--floppy-exit-delay, 0ms) reverse both;
  pointer-events: none;
}

/* Preview halos extend beyond their hosts. A rectangular wipe clips them
   abruptly on click, making the rounded screen appear to turn square. */
.floppy-exit-active :is(.tv-preview, .tools-preview)[data-floppy-revealed].is-floppy-exiting {
  animation-name: floppy-preview-exit;
  animation-direction: normal;
  clip-path: none;
}

@keyframes floppy-preview-exit {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translateY(0.55rem);
  }
}

@media (prefers-color-scheme: dark) {
  #header[data-shell-persistent],
  ::view-transition-group(root),
  ::view-transition-image-pair(root) {
    background-color: #111820;
  }

  html {
    color-scheme: dark;
  }

  body {
    background: #111820;
  }

  body,
  input,
  select,
  textarea {
    color: #b8c2cc;
  }

  strong,
  b,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  label,
  table th,
  #menu ul a,
  #menu ul span,
  .logo {
    color: #f1f5f9 !important;
  }

  input[type='text'],
  input[type='password'],
  input[type='email'],
  input[type='tel'],
  input[type='search'],
  input[type='url'],
  select,
  textarea,
  select option,
  input[type='checkbox'] + label::before,
  input[type='radio'] + label::before {
    background-color: #1a2430;
    border-color: rgba(166, 180, 194, 0.3);
    color: #e2e8f0;
  }

  input[type='checkbox']:checked + label::before,
  input[type='radio']:checked + label::before {
    background-color: #f56a6a;
    border-color: #f56a6a;
    color: #ffffff;
  }

  ::placeholder {
    color: #8291a1 !important;
  }

  code,
  table tbody tr:nth-child(2n + 1) {
    background: rgba(148, 163, 184, 0.1);
  }

  blockquote,
  code,
  hr,
  .box,
  ul.alt li,
  ul.contact li,
  table tbody tr,
  table thead,
  table tfoot,
  table.alt tbody tr td,
  .mini-posts article,
  .features article .icon::after,
  #main > .inner > section,
  #sidebar > .inner > *,
  #menu > ul > li,
  html .demo-info-row {
    border-color: rgba(166, 180, 194, 0.25) !important;
  }

  .posts article::before,
  .posts article::after {
    background: rgba(166, 180, 194, 0.25);
  }

  #sidebar {
    background-color: #18212b;
    box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.45);
  }

  #sidebar > .inner > .alt {
    background-color: #202b36;
  }

  #sidebar .toggle::after {
    background: rgba(73, 88, 103, 0.9);
  }

  #sidebar .toggle::before,
  #search form::before,
  .icons a,
  #footer .copyright,
  #menu > ul > li > ul,
  #menu ul a.opener::before,
  #menu ul span.opener::before {
    color: #98a6b5;
  }
}

/* Pages use spacing instead of decorative divider rules. */
#main > .inner > section,
#main > .inner > #footer,
#main .demos-list.compact article,
#main .mini-posts article,
#main ul.alt li,
#main ul.contact li {
  border-bottom: 0 !important;
  border-top: 0 !important;
}

#main .posts article::before,
#main .posts article::after {
  content: none !important;
  display: none !important;
}

#main hr {
  border: 0 !important;
  display: none;
}

@media screen and (max-width: 1280px) {
  body.mobile-menu-open {
    overflow: hidden;
  }

  #sidebar {
    bottom: 0;
    height: 100dvh;
    isolation: isolate;
    max-width: 100%;
    right: 0;
    width: 100%;
  }

  body.mobile-menu-open #sidebar {
    margin-left: 0;
    z-index: 100000;
  }

  body.mobile-menu-open #sidebar > .inner {
    animation: none;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: none;
    z-index: 1;
  }

  body.mobile-menu-open #main > .inner > :not(#header) {
    visibility: hidden;
  }

  #sidebar.inactive {
    margin-left: -100%;
  }

  #sidebar > .inner {
    background-color: inherit;
    box-sizing: border-box;
    padding-top: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
    z-index: 1;
  }

  #sidebar > .inner::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
  }

  #mobile-menu-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: inline-flex;
    font-size: 1.2em;
    height: 2.5em;
    left: 1.6667em;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: fixed;
    top: 1.7em;
    transition: top 300ms ease;
    width: 2.5em;
    z-index: 10001;
  }

  #mobile-menu-toggle::before,
  #mobile-menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  #mobile-menu-toggle .menu-toggle-line {
    background: currentColor;
    display: block;
    height: 0.14em;
    left: 0.55em;
    position: absolute;
    top: calc(50% - 0.07em);
    transform-origin: center;
    transition: opacity 300ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    width: 1.4em;
  }

  #mobile-menu-toggle .menu-toggle-line-top {
    transform: translateY(-0.45em);
  }

  #mobile-menu-toggle .menu-toggle-line-middle {
    transform: scaleX(1);
  }

  #mobile-menu-toggle .menu-toggle-line-bottom {
    transform: translateY(0.45em);
  }

  #mobile-menu-toggle.is-open .menu-toggle-line-top {
    transform: translateY(0) rotate(45deg);
  }

  #mobile-menu-toggle.is-open .menu-toggle-line-middle {
    opacity: 0;
    transform: scaleX(0);
  }

  #mobile-menu-toggle.is-open .menu-toggle-line-bottom {
    transform: translateY(0) rotate(-45deg);
  }

  #mobile-menu-toggle:focus {
    outline: none;
  }

  #sidebar:not(.inactive) #search {
    background-color: #f5f6f7;
    box-sizing: border-box;
    margin: 0;
    padding: 1em 1.25em 1em 4.25em;
    width: 100%;
  }

  #sidebar:not(.inactive) #search form {
    margin-left: 0;
    width: 100%;
  }

  #sidebar:not(.inactive) #search input[type='search'] {
    padding-left: 1em;
    padding-right: 3.5em;
  }

  #header .logo {
    margin-left: 2.5em;
  }

  #header {
    background-color: #ffffff;
    border-bottom-color: transparent;
    isolation: isolate;
    padding-top: 2.5em;
    position: sticky;
    top: 0;
    z-index: 9999;
  }

  #header::before {
    background-color: #ffffff;
    bottom: 0;
    content: '';
    left: -2em;
    position: absolute;
    right: -2em;
    top: 0;
    z-index: -1;
  }

  #header::after {
    background-color: #f56a6a;
    bottom: -5px;
    content: '';
    height: 5px;
    left: -2em;
    position: absolute;
    right: -2em;
  }

  body.mobile-menu-open #header {
    background-color: transparent;
    border-bottom-color: transparent;
    pointer-events: none;
    z-index: 100001;
  }

  body.mobile-menu-open #header .logo {
    visibility: hidden;
  }

  body.mobile-menu-open #header::after {
    opacity: 0;
  }

  body.mobile-menu-open #header::before {
    opacity: 0;
  }

  body.mobile-menu-open #mobile-menu-toggle {
    pointer-events: auto;
    top: 1.125em;
    z-index: 100001;
  }
}

@media screen and (max-width: 736px) {
  #header::after {
    left: 0;
    right: 0;
  }
}

@media screen and (max-width: 1280px) and (prefers-color-scheme: dark) {
  #header {
    background-color: #111820;
  }

  #header::before {
    background-color: #111820;
  }

  #sidebar:not(.inactive) #search {
    background-color: #18212b;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  input,
  select,
  textarea,
  #sidebar,
  #sidebar > .inner > .alt,
  .box,
  code,
  table tbody tr {
    transition: none;
  }

  #mobile-menu-toggle .menu-toggle-line {
    transition: none;
  }

  #mobile-menu-toggle {
    transition: none;
  }

  .floppy-reveal-pending [data-floppy-reveal],
  .floppy-reveal-pending [data-floppy-reveal].is-floppy-visible,
  .floppy-reveal-pending .floppy-text-chunk,
  .floppy-reveal-pending .floppy-text-chunk.is-floppy-text-visible,
  .floppy-reveal-pending [data-floppy-link],
  .floppy-reveal-pending [data-floppy-link].is-floppy-link-visible {
    animation: none;
    clip-path: none;
    filter: none;
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .floppy-exit-active [data-floppy-revealed].is-floppy-exiting {
    animation: none;
  }

  a:not(.image):not(.button):not(.logo):not(.header-social-link):not(.member-pill):not(.demo-production-link) {
    transition-duration: 0.01ms;
  }

}