/* The existing lavender identity, with real recordings as the main visual. */
.sc-hero-cinema { position: relative; min-width: 0; align-self: center; }
.sc-hero-cinema .sc-film-poster { display: block; width: 100%; }
.sc-cinema-tag { position: absolute; bottom: 1rem; left: 1rem; padding: .55rem .9rem; background: oklch(23% .018 260 / .78); color: white; border: 1px solid oklch(100% 0 0 / .14); border-radius: 999px; font-size: .8rem; font-weight: 500; backdrop-filter: blur(.5rem); -webkit-backdrop-filter: blur(.5rem); }
.sc-cinema-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; margin-top: 1rem; font-size: .8rem; color: var(--sc-text); line-height: 1.7; }
.sc-cinema-caption a, .sc-demo-jump { display: inline-flex; align-items: center; gap: .5rem; color: var(--sc-purple-dark); }
.sc-cinema-caption svg { width: 1rem; height: 1rem; }
.sc-capture-panel { width: 100%; margin-right: 0; }
.sc-hero > .sc-capture-panel { margin-top: 0; }
.sc-demo-jump { margin-top: 1.25rem; font-size: .9rem; font-weight: 600; min-height: 2.75rem; }
.sc-demo-jump:hover, .sc-cinema-caption a:hover { text-decoration: underline; text-underline-offset: .25em; }
.sc-demos-section { padding: 3rem var(--sc-inline) 5rem; scroll-margin-top: 5.5rem; }
.sc-demos-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.sc-demos-heading p { margin-top: 1rem; max-width: 46rem; color: var(--sc-text); font-size: .95rem; line-height: 1.9; }
.sc-demo-count { flex-shrink: 0; font-size: .8rem; color: var(--sc-text); padding-bottom: .3rem; }
.sc-demo-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sc-demo-filters button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 2.75rem; padding: .65rem 1rem; border-radius: 999px; border: 1px solid var(--sc-border); background: transparent; color: var(--sc-text); font-size: .85rem; transition: background 160ms ease, color 160ms ease; }
.sc-demo-filters button span { font-size: .7rem; font-variant-numeric: tabular-nums; }
.sc-demo-filters button[aria-pressed="true"] { background: var(--sc-purple-dark); color: white; border-color: var(--sc-purple-dark); }
.sc-demo-filters button:hover:not([aria-pressed="true"]) { background: var(--sc-purple-soft); color: var(--sc-purple-dark); }
.sc-demo-theater { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; }
.sc-demo-main { min-width: 0; }
.sc-demo-screen { position: relative; overflow: hidden; border-radius: 12px; background: oklch(16% .012 275); box-shadow: var(--sc-shadow-lift); }
.sc-demo-screen video { display: block; width: 100%; aspect-ratio: 1.91; object-fit: contain; background: oklch(16% .012 275); }
.sc-demo-start { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: var(--sc-charcoal); }
.sc-demo-start > img { width: 100%; height: 100%; object-fit: contain; transition: transform 520ms var(--sc-ease), filter 520ms var(--sc-ease); }
.sc-demo-start > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; background: oklch(15% .01 275 / .12); }
.sc-demo-start svg { width: 3.5rem; height: 3.5rem; padding: 1rem; border-radius: 50%; background: var(--sc-purple-dark); color: white; transition: transform 180ms var(--sc-ease); }
.sc-demo-start strong { padding: .4rem .7rem; background: var(--sc-charcoal); color: white; font-size: .75rem; font-weight: 500; border-radius: .35rem; }
.sc-demo-start:hover svg { transform: scale(1.08); }
.sc-demo-start:hover > img { transform: scale(1.012); filter: brightness(.96); }
.sc-demo-start:focus-visible { outline-offset: -4px; }
.sc-demo-description { padding: 1.5rem 0 1rem; }
#demo-position { color: var(--sc-purple-dark); font-size: .75rem; font-weight: 600; }
.sc-demo-description h3 { margin-top: .5rem; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.4; }
.sc-demo-description p { margin-top: .65rem; color: var(--sc-text); font-size: .9rem; line-height: 1.85; }
.sc-demo-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.sc-demo-tags span { padding: .35rem .65rem; border-radius: .35rem; background: var(--sc-purple-soft); color: var(--sc-purple-dark); font-size: .7rem; }
.sc-demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--sc-border); font-size: .8rem; }
.sc-demo-controls > div { display: flex; gap: .5rem; margin-right: auto; }
.sc-demo-controls button { min-height: 2.75rem; padding: .55rem .8rem; border: 1px solid var(--sc-border-strong); border-radius: .5rem; background: var(--sc-surface); color: var(--sc-ink); font-size: .8rem; }
.sc-demo-controls button:hover:not(:disabled) { background: var(--sc-purple-soft); border-color: var(--sc-purple-dark); }
.sc-demo-controls button:disabled { color: var(--sc-text); opacity: .5; cursor: default; }
.sc-demo-controls label { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; color: var(--sc-text); cursor: pointer; }
.sc-demo-controls input { width: 1rem; height: 1rem; accent-color: var(--sc-purple-dark); }
.sc-demo-controls a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--sc-purple-dark); }
.sc-demo-hint { margin-top: .65rem !important; color: var(--sc-text); font-size: .75rem; line-height: 1.7; }
.sc-demo-sidebar { position: sticky; top: 5.5rem; display: flex; flex-direction: column; max-height: calc(100dvh - 7rem); border: 1px solid var(--sc-border); border-radius: 12px; background: var(--sc-surface); overflow: hidden; }
.sc-demo-sidebar-heading { display: flex; justify-content: space-between; padding: 1rem; font-size: .85rem; border-bottom: 1px solid var(--sc-border); }
.sc-demo-sidebar-heading > span { color: var(--sc-text); font-size: .75rem; }
.sc-demo-playlist { position: relative; display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: .25rem; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: .5rem; scrollbar-width: thin; scrollbar-color: var(--sc-border-strong) transparent; }
.sc-demo-playlist:not(.is-at-end) { mask-image: linear-gradient(black calc(100% - 3rem), transparent); }
.sc-demo-playlist li { min-width: 0; }
.sc-demo-playlist button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .65rem .5rem; border: 0; border-radius: .5rem; background: transparent; text-align: left; color: var(--sc-ink); transition: background 160ms ease; }
.sc-demo-playlist button:hover { background: var(--sc-bg); }
.sc-demo-playlist button[aria-current] { background: var(--sc-purple-soft); }
.sc-demo-playlist button:focus-visible { outline-offset: -3px; }
.sc-demo-thumbnail { position: relative; flex: 0 0 5.5rem; overflow: hidden; border-radius: .3rem; }
.sc-demo-thumbnail img { width: 100%; height: auto; aspect-ratio: 1.91; object-fit: cover; transition: transform 320ms var(--sc-ease); }
.sc-demo-playlist button:hover .sc-demo-thumbnail img { transform: scale(1.06); }
.sc-demo-thumbnail > span { position: absolute; right: .2rem; bottom: .2rem; border-radius: .2rem; padding: .1rem .25rem; background: oklch(18% .01 275 / .9); color: white; font-size: .6rem; font-variant-numeric: tabular-nums; }
.sc-demo-item-copy { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.sc-demo-item-copy small { font-size: .6rem; color: var(--sc-text); }
.sc-demo-item-copy strong { font-size: .8rem; line-height: 1.5; font-weight: 600; text-wrap: pretty; }
.sc-demo-item-state { display: inline-flex; align-items: center; gap: .35rem; font-size: .6rem; color: var(--sc-purple-dark); }
.sc-demo-item-state.is-watched { color: var(--sc-green); }
.sc-demo-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: oklch(100% 0 0 / .45); }
.sc-demo-progress::after { display: block; height: 100%; background: var(--sc-purple); transform: scaleX(var(--p, 0)); transform-origin: left center; content: ""; }
.sc-demo-playlist.is-playing [aria-current] .sc-demo-item-state::before { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; animation: sc-demo-live 1.2s ease-in-out infinite; content: ""; }
@keyframes sc-demo-live { 50% { opacity: .3; transform: scale(.7); } }
.sc-demo-description.is-entering > * { animation: sc-demo-text-in 420ms var(--sc-ease) both; }
.sc-demo-description.is-entering > :nth-child(2) { animation-delay: 40ms; }
.sc-demo-description.is-entering > :nth-child(3) { animation-delay: 80ms; }
.sc-demo-description.is-entering > :nth-child(4) { animation-delay: 120ms; }
@keyframes sc-demo-text-in { from { opacity: 0; transform: translateY(.5rem); } }
.sc-demo-error { padding: 1.25rem; background: var(--sc-red-soft); color: var(--sc-red); font-size: .85rem; line-height: 1.8; }
.sc-demo-error button { min-height: 2.75rem; padding: .4rem .7rem; color: inherit; border: 1px solid currentColor; border-radius: .35rem; background: transparent; margin-inline: .5rem; }
.sc-film-dialog video { max-height: 78dvh; }
.sc-video-transport { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .75rem; padding: .6rem 0; }
.sc-video-toggle { min-width: 3.5rem; min-height: 2.75rem; padding: .4rem .75rem; border: 1px solid var(--sc-border-strong); border-radius: .5rem; color: var(--sc-purple-dark); background: var(--sc-surface); font-size: .8rem; }
.sc-video-toggle:hover { background: var(--sc-purple-soft); }
.sc-video-time { color: var(--sc-text); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-video-seek { width: 100%; min-width: 0; height: 2.75rem; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; touch-action: pan-y; }
.sc-video-seek::-webkit-slider-runnable-track { height: .375rem; border-radius: 1rem; background: linear-gradient(to right, var(--sc-purple-dark) var(--seek-progress, 0%), var(--sc-border-strong) var(--seek-progress, 0%)); }
.sc-video-seek::-moz-range-track { height: .375rem; border-radius: 1rem; background: var(--sc-border-strong); }
.sc-video-seek::-moz-range-progress { height: .375rem; border-radius: 1rem; background: var(--sc-purple-dark); }
.sc-video-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; margin-top: -.3125rem; border: 2px solid var(--sc-surface); border-radius: 50%; background: var(--sc-purple-dark); box-shadow: 0 0 0 1px var(--sc-purple-dark); }
.sc-video-seek::-moz-range-thumb { width: .8rem; height: .8rem; border: 2px solid var(--sc-surface); border-radius: 50%; background: var(--sc-purple-dark); }
.sc-video-seek:focus-visible { outline: 2px solid var(--sc-purple-dark); outline-offset: 2px; border-radius: .4rem; }
.sc-video-status { grid-column: 1 / -1; font-size: .75rem; color: var(--sc-text); }
.sc-video-status:empty { display: none; }
.sc-film-dialog .sc-video-transport { padding: .6rem 1rem; background: var(--sc-bg); }
@media (max-width: 480px) {
  .sc-video-transport { grid-template-columns: auto 1fr; gap: .25rem .75rem; }
  .sc-video-time { justify-self: end; }
  .sc-video-seek { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sc-hero { min-height: min(48rem, calc(100dvh - 4.5rem)); align-content: center; row-gap: 2rem; }
  .sc-hero-copy { grid-column: 1; grid-row: 1; padding-block: 0; }
  .sc-hero > .sc-capture-panel { grid-column: 1; grid-row: 2; }
  .sc-hero-cinema { grid-column: 2; grid-row: 1 / span 2; padding-left: 1rem; }
}
@media (max-width: 1100px) {
  .sc-demo-theater { grid-template-columns: minmax(0, 1fr) 16rem; gap: 1rem; }
  .sc-demo-thumbnail { flex-basis: 4.5rem; }
  .sc-demo-count { display: none; }
}
@media (max-width: 800px) {
  .sc-demo-theater { grid-template-columns: minmax(0, 1fr); }
  .sc-demo-sidebar { position: static; max-height: none; }
  .sc-demo-playlist { max-height: 20rem; }
  .sc-demo-thumbnail { flex-basis: 6.5rem; }
  .sc-demo-item-copy small, .sc-demo-item-state { font-size: .7rem; }
  .sc-demo-item-copy strong { font-size: .9rem; }
  .sc-demo-description { padding-top: 1.2rem; }
  .sc-demos-section { padding-top: 2rem; }
  .sc-hero { gap: 2rem; padding-bottom: 2rem; }
}
@media (max-width: 480px) {
  .sc-demo-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-demo-filters button { font-size: .75rem; padding: .55rem .65rem; gap: .45rem; }
  .sc-demo-controls { gap: .3rem .8rem; }
  .sc-demo-controls > div { flex-basis: 100%; }
  .sc-cinema-tag { bottom: .75rem; left: .75rem; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sc-demo-filters button, .sc-demo-playlist button, .sc-demo-start svg, .sc-demo-start > img, .sc-demo-thumbnail img { transition: none; }
  .sc-demo-description.is-entering > *, .sc-demo-playlist.is-playing [aria-current] .sc-demo-item-state::before { animation: none; }
}