/*! StyloftCSS website demo extensions | MIT | Requires core CSS */
.demo-narrow { width: min(100%,27rem); margin-inline: auto; }.demo-kicker { font-size: .57rem; color: #9f8bb8; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }.demo-avatar { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; color: #9d82be; background: #f2eaf9; font-weight: 700; }.demo-art { height: 9rem; background: #e8dcf1; border-radius: .6rem; position: relative; overflow: hidden; }.demo-art span { position: absolute; width: 10rem; height: 10rem; border-radius: 50%; left: -2rem; top: 2rem; background: #c0a7d4; }.demo-art span:nth-child(2) { left: 5rem; top: 1rem; background: #a98dc4; }.demo-art span:nth-child(3) { left: 11rem; top: 4rem; background: #e7c9ae; }.demo-art-peach { background: #f1e3d8; }.demo-art-peach span { background: #e5b99e; }.demo-art-peach span:nth-child(2) { background: #cfa88f; }.demo-art-peach span:nth-child(3) { background: #b5bda7; }.demo-art-large { height: 15rem; }.demo-art-large span { width: 17rem; height: 17rem; }.demo-feature-card { border-color: #e2d9eb; }.demo-header { padding: 1.2rem; background: white; border: 1px solid #e4dbea; border-radius: .6rem; }.demo-header nav > a:not(.sl-btn) { font-size: .8rem; text-decoration: none; }.demo-wordmark { font-size: 1.3rem; font-weight: 700; letter-spacing: -.06em; text-decoration: none; color: #4b3a5e; }.demo-wordmark > span { font-size: .5rem; vertical-align: super; margin-left: .1rem; }.demo-menu { min-width: 10rem; }.demo-menu summary { font-size: .8rem; }.demo-menu nav { margin-top: 1rem; padding: 1rem; background: #f7f2fb; border-radius: .5rem; font-size: .75rem; }.demo-hero-section { background: #eee7f5; border: 1px solid #e5d9ed; border-radius: .8rem; --sl-gap: 1.5rem; }.demo-hero-section h2 { font-size: clamp(2rem,4vw,3.4rem); letter-spacing: -.06em; }.demo-footer-block { background: white; padding: 1.5rem; border: 1px solid #e5dbea; border-radius: .6rem; }.demo-footer-block nav { font-size: .75rem; }.demo-fieldset { padding: 0; border: 0; }.demo-fieldset legend { margin-bottom: 1.5rem; }.demo-cell { padding: 1.7rem .5rem; text-align: center; border: 1px solid #d5c6e3; background: #eee5f6; border-radius: .5rem; color: #9e81b7; font: .72rem var(--sl-mono); }.demo-animated-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; border-bottom: 1px solid #c9b6dc; text-decoration: none; }.demo-lift,.demo-glow { border-color: #ded1e8; }.demo-lift:focus-within,.demo-glow:focus-within { border-color: #a287c2; box-shadow: 0 8px 25px #66457d12; }.demo-glow:hover { border-color: #a287c2; box-shadow: 0 0 0 4px #b49bcd15; }

.demo-kicker { color: #746582; }
.demo-cell { color: #72518b; }
@media (prefers-reduced-motion: no-preference) {
  .demo-lift { transition: transform .22s, box-shadow .22s, border-color .22s; }
  .demo-lift:hover, .demo-lift:focus-within { transform: translateY(-6px); box-shadow: 0 16px 30px #66457d12; }
  .demo-glow { transition: box-shadow .22s, border-color .22s; }
  .demo-animated-link span { transition: transform .2s; }
  .demo-animated-link:hover span, .demo-animated-link:focus-visible span { transform: translateX(6px); }
}
/* Optional website/demo effects. No runtime JavaScript and no dependency on motion. */
@media (prefers-reduced-motion: no-preference) {
  .sl-btn:not(.sl-skip):not([class*="sl-hover-"]):not([class*="sl-fx-"]),.mode-switch {
    transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease,
      box-shadow 220ms ease, transform 220ms cubic-bezier(.2,.7,.2,1);
  }
  .sl-btn:not(:disabled):not(.sl-skip):not([class*="sl-hover-"]):not([class*="sl-fx-"]):is(:hover,:focus-visible) { transform: translateY(-2px); box-shadow: 0 7px 18px rgb(0 0 0 / .12); }
  .sl-btn:not(:disabled):not(.sl-skip):not([class*="sl-hover-"]):not([class*="sl-fx-"]):active { transform: translateY(0); box-shadow: none; }
  .mode-switch:hover { box-shadow: 0 0 0 3px var(--sl-soft); }
  .demo-feature-card,.demo-lift,.demo-glow,.catalog-card,.component-tile {
    transition: transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms ease,
      border-color 280ms ease, background-color 280ms ease;
  }
  .demo-feature-card:is(:hover,:focus-within),.catalog-card:is(:hover,:focus-within),.component-tile:is(:hover,:focus-within) {
    transform: translateY(-4px); border-color: var(--sl-accent); box-shadow: 0 12px 28px rgb(0 0 0 / .12);
  }
  .demo-lift:is(:hover,:focus-within) { transform: translateY(-6px); box-shadow: 0 16px 30px rgb(0 0 0 / .14); }
  .demo-glow:is(:hover,:focus-within) { border-color: var(--sl-accent); box-shadow: 0 0 0 4px var(--sl-soft); }
  .demo-animated-link span { transition: transform 260ms cubic-bezier(.2,.7,.2,1); }
  .demo-animated-link:is(:hover,:focus-visible) span { transform: translateX(6px); }
  .sl-table tbody tr { transition: background-color 220ms ease; }
  .sl-table tbody tr:hover { background-color: var(--sl-soft); }
  @supports (animation-timeline: view()) and (animation-range: entry 0% entry 30%) {
    :is(.home-section > .section-heading,.principles > article,.component-tile,.build-section > div,.theme-teaser,.catalog-group,.example-block,.demo-scroll-reveal) {
      animation: sl-site-reveal 1s linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 30%;
    }
    :is(.component-tile,.catalog-group,.example-block,.demo-scroll-reveal):focus-within {
      animation-play-state: paused;
    }
  }
  @supports (animation-timeline: scroll()) {
    .site-header::after {
      content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px;
      block-size: 2px; background: linear-gradient(90deg,#22d3ee,#3b82f6,#a855f7);
      transform-origin: left; animation: sl-reading-progress 1s linear both;
      animation-timeline: scroll(root block); pointer-events: none;
    }
  }
}
@keyframes sl-site-reveal { from { opacity: .65; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes sl-reading-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .demo-scroll-reveal { opacity: 1; translate: none; animation: none; }
  .sl-btn:not(.sl-skip):not([class*="sl-hover-"]):not([class*="sl-fx-"]),.demo-feature-card,.demo-lift,.demo-glow,.catalog-card,.component-tile,.demo-animated-link span { transform: none; }
}