.sr-showcase { padding-top: 8rem; padding-bottom: 2rem; color: var(--ink); letter-spacing: 0; }
.ba-page-skeleton { background: #F9FAFB; }
.ba-page-skeleton::before { display: none; }
.sr-loading-title > span { display: block; height: .8em; margin-bottom: .25em; width: 85%; border-radius: .5rem; }
.sr-loading-title > span:last-child { width: 55%; margin-bottom: 0; }
.sr-loading-copy { display: grid; gap: .75rem; }
.sr-loading-copy > span { display: block; height: 1rem; width: 95%; border-radius: .25rem; }
.sr-loading-copy > span:last-child { width: 72%; }
.sr-loading-art { display: grid; place-items: center; }
.sr-loading-window { height: 88%; max-width: 95%; aspect-ratio: 504 / 306; border: 1px solid var(--border); border-radius: .5rem; background: #FFFFFF; overflow: hidden; }
.sr-loading-bar { height: 12%; display: flex; align-items: center; justify-content: space-between; padding: 0 4%; background: #F4F4F5; }
.sr-loading-bar > span { width: 24%; height: .5rem; border-radius: .25rem; }
.sr-loading-bar > span:last-child { width: 16%; }
.sr-loading-workspace { height: 88%; display: grid; grid-template-columns: 1.6fr 1fr; gap: 4%; padding: 4%; }
.sr-loading-slide { border: 1px solid var(--border); border-radius: .5rem; padding: 6%; }
.sr-loading-slide > span { display: block; width: 55%; height: .5rem; border-radius: .25rem; }
.sr-loading-slide > div { display: flex; gap: 8%; height: 60%; margin-top: 12%; }
.sr-loading-slide > div > span { flex: 1; border-radius: .5rem; }
.sr-loading-tools { display: grid; grid-template-rows: repeat(6,1fr); gap: 6%; }
.sr-loading-tools > span { border-radius: .5rem; }
.sr-loading-showcase .sr-loading-dots { height: 3.5rem; gap: 1.75rem; }
.sr-loading-dots > span { width: .5rem; height: .5rem; border-radius: 50%; background: #D4D4D8; }
.sr-loading-dots > span:first-child { background: #71717A; transform: scale(1.25); }
.sr-loading-scroll { width: 4rem; height: .5rem; border-radius: .25rem; }
.sr-showcase-panel { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 2.5rem; align-items: center; min-height: 28rem; outline-offset: .5rem; }
.sr-showcase-copy { min-width: 0; }
.sr-showcase-copy h2 { margin: 0 0 1.5rem; font-size: 4rem; font-weight: 850; line-height: 1.05; letter-spacing: 0; max-width: 14ch; text-wrap: balance; }
.sr-showcase-copy p { margin: 0; color: var(--secondary); font-size: 1.25rem; line-height: 1.6; max-width: 42ch; }
.sr-showcase-art { height: 24rem; min-width: 0; overflow: hidden; }
.sr-showcase-art .sr-desktop { display: none; }
.sr-showcase-art > svg { display: block; width: 100%; height: 100%; font-family: Geist, sans-serif; }
.sr-showcase-art text { fill: #18181B; font-size: 16px; letter-spacing: 0; }
.sr-showcase-art .sr-muted { fill: #71717A; }
.sr-showcase-art .sr-white { fill: #FFFFFF; }
.sr-showcase-art .sr-small { font-size: 13px; }
.sr-showcase-art .sr-large { font-size: 30px; font-weight: 700; }
.sr-showcase-art .sr-label { font-size: 18px; font-weight: 600; }
.sr-showcase-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; padding-top: 1.5rem; }
.sr-showcase-tabs { display: flex; gap: .25rem; }
.sr-scroll-cue { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; width: 8rem; height: 6rem; margin: 1.5rem auto 0; color: var(--secondary); font-size: .75rem; text-decoration: none; transition: opacity 300ms ease, transform 300ms ease; }
.sr-scroll-cue:hover { color: var(--ink); }
.sr-scroll-cue.is-dismissed { opacity: 0; transform: translateY(.5rem); pointer-events: none; }
.sr-scroll-sign { position: relative; display: block; width: 3rem; height: 3rem; }
.sr-scroll-arrow { position: absolute; left: 1rem; top: .25rem; width: 1rem; height: 1rem; border-right: 2px solid #18181B; border-bottom: 2px solid #18181B; opacity: .3; transform: rotate(45deg); animation: sr-scroll-hint 1.6s cubic-bezier(.4,0,.2,1) infinite; }
.sr-scroll-arrow + .sr-scroll-arrow { top: 1rem; animation-delay: .2s; }
.sr-scroll-cue.is-dismissed .sr-scroll-arrow, .sr-showcase[data-paused="true"] .sr-scroll-arrow { animation-play-state: paused; }
.sr-loading-showcase .sr-scroll-arrow { animation: none; }
@keyframes sr-scroll-hint { 0%,100% { opacity: .25; transform: translateY(0) rotate(45deg); } 45% { opacity: 1; transform: translateY(.25rem) rotate(45deg); } 75% { opacity: .25; transform: translateY(.5rem) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .sr-scroll-arrow { animation: none; opacity: .65; } .sr-scroll-cue { transition: none; } }
.sr-showcase-tabs button { position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; background: transparent; font-size: 0; cursor: pointer; }
.sr-showcase-tabs button::before { content: ''; width: .5rem; height: .5rem; border-radius: 9999px; background: #A1A1AA; opacity: .6; transition: transform 400ms cubic-bezier(.22,1,.36,1), opacity 400ms ease; }
.sr-showcase-tabs button[aria-selected="true"]::before { background: #18181B; opacity: 1; transform: scale(1.25); }
.sr-showcase-tabs button:hover::before { opacity: 1; }
.sr-showcase-tabs button::after { content: attr(data-label); position: absolute; bottom: 100%; right: 0; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface); color: var(--ink); font-size: .75rem; white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; }
.sr-showcase-tabs button:hover::after, .sr-showcase-tabs button:focus-visible::after { opacity: 1; transform: translateY(0); }
.sr-showcase :focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.sr-showcase-art { --sr-cycle: 4.8s; --sr-ease: cubic-bezier(.4,0,.2,1); }
.sr-showcase-art .sr-enter { animation: sr-showcase-enter 800ms cubic-bezier(.22,1,.36,1) both; }
.sr-showcase-art .sr-result { animation: sr-showcase-result var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-before { animation: sr-showcase-before var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-pointer { animation: sr-showcase-pointer var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-table-source { animation: sr-table-source var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-table-view { transform-origin: 480px 174px; animation: sr-table-view var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-table-column { animation: sr-table-column var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-table-status { --sr-column-offset: -24px; }
.sr-showcase-art .sr-table-date { --sr-column-offset: -48px; }
.sr-showcase-art .sr-table-scroll { animation: sr-table-scroll var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-table-thumb { animation: sr-table-thumb var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-table-cursor { animation: sr-table-cursor var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-tools-color-before { animation: sr-tools-color-before var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-tools-color-after { animation: sr-tools-color-after var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-tools-color-active { animation: sr-tools-color-active var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-tools-text-before { animation: sr-tools-text-before var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-tools-text-after { animation: sr-tools-text-after var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-tools-cursor { animation: sr-tools-cursor var(--sr-cycle) var(--sr-ease) both; }
@keyframes sr-tools-color-before { 0%,20% { opacity: 1; } 38%,100% { opacity: 0; } }
@keyframes sr-tools-color-after { 0%,20% { opacity: 0; } 38%,100% { opacity: 1; } }
@keyframes sr-tools-color-active { 0% { opacity: 0; } 12%,42% { opacity: 1; } 56%,100% { opacity: 0; } }
@keyframes sr-tools-text-before { 0%,54% { opacity: 1; } 76%,100% { opacity: 0; } }
@keyframes sr-tools-text-after { 0%,54% { opacity: 0; } 76%,100% { opacity: 1; } }
@keyframes sr-tools-cursor { 0% { opacity: 0; transform: translate(16px,12px); } 14%,38% { opacity: 1; transform: translate(0,0); } 54%,72% { opacity: 1; transform: translate(0,36px); } 84%,100% { opacity: 0; transform: translate(0,36px); } }
.sr-showcase-art .sr-library-transfer { transform-origin: 0 0; animation: sr-library-first var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-library-second { animation-name: sr-library-second; }
.sr-showcase-art .sr-library-cursor { animation: sr-library-cursor var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-library-selection { animation: sr-library-selection var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-grid-preview { transform-origin: 74px 46px; animation: sr-grid-preview var(--sr-cycle) var(--sr-ease) both; }
.sr-showcase-art .sr-dock-thumb { transform-origin: 32px 40px; animation: sr-dock-wave var(--sr-cycle) var(--sr-ease) both; }
@keyframes sr-grid-preview { 0%,14% { transform: translate(var(--grid-x),var(--grid-y)) rotate(var(--grid-angle)); } 65%,100% { transform: translate(0,0) rotate(0deg); } }
@keyframes sr-dock-wave { 0%,14% { transform: scale(var(--dock-from)); } 50%,100% { transform: scale(var(--dock-to)); } }
.sr-showcase .sr-showcase-art svg * { animation-iteration-count: infinite; }
.sr-showcase-art .sr-enter { animation: sr-scene-loop var(--sr-cycle) linear infinite; }
@keyframes sr-scene-loop { 0%,100% { opacity: 0; } 8%,96% { opacity: 1; } }
.sr-showcase[data-paused="true"] .sr-showcase-art * { animation-play-state: paused; }
@keyframes sr-showcase-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sr-showcase-result { 0%,14% { opacity: 0; transform: translateY(4px); } 50%,100% { opacity: 1; transform: translateY(0); } }
@keyframes sr-showcase-before { 0%,14% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes sr-showcase-pointer { 0%,4% { opacity: 0; transform: translate(20px,16px); } 24%,30% { opacity: 1; transform: translate(0,0); } 56%,100% { opacity: 0; transform: translate(0,0); } }
@keyframes sr-table-source { 0%,24% { opacity: 1; } 42%,100% { opacity: 0; } }
@keyframes sr-table-view { 0%,24% { opacity: 0; transform: scale(.94); } 48%,100% { opacity: 1; transform: scale(1); } }
@keyframes sr-table-column { 0%,34% { transform: translateX(var(--sr-column-offset)); } 58%,100% { transform: translateX(0); } }
@keyframes sr-table-scroll { 0%,64% { transform: translateY(0); } 96%,100% { transform: translateY(-132px); } }
@keyframes sr-table-thumb { 0%,64% { transform: translateY(0); } 96%,100% { transform: translateY(80px); } }
@keyframes sr-table-cursor { 0% { opacity: 0; transform: translate(24px,16px); } 16%,26% { opacity: 1; transform: translate(0,0); } 44%,100% { opacity: 0; transform: translate(0,0); } }
@keyframes sr-library-first { 0%,12% { opacity: 0; transform: translate(0,0) scale(1); } 18% { opacity: 1; transform: translate(0,0) scale(1); } 44%,100% { opacity: 1; transform: translate(0,-156px) scale(1.5); } }
@keyframes sr-library-second { 0%,48% { opacity: 0; transform: translate(0,0) scale(1); } 52% { opacity: 1; transform: translate(0,0) scale(1); } 78%,100% { opacity: 1; transform: translate(72px,-156px) scale(1.5); } }
@keyframes sr-library-cursor { 0% { opacity: 0; transform: translate(20px,16px); } 12%,18% { opacity: 1; transform: translate(0,0); } 44% { opacity: 1; transform: translate(39px,-140px); } 52% { opacity: 1; transform: translate(162px,0); } 78%,84% { opacity: 1; transform: translate(273px,-140px); } 94%,100% { opacity: 0; transform: translate(289px,-132px); } }
@keyframes sr-library-selection { 0%,78% { opacity: 0; } 90%,100% { opacity: 1; } }
@media (min-width: 768px) { .sr-showcase + .ba-hero { padding-top: 4rem; } }
@media (min-width: 768px) and (max-width: 1023px) {
  .sr-showcase-copy h2 { font-size: 2.5rem; }
  .sr-showcase-copy p { font-size: 1.125rem; }
}
@media (max-width: 767px) {
  .sr-showcase { padding-top: 6.5rem; padding-bottom: 1rem; }
  .sr-showcase-panel { grid-template-columns: minmax(0,1fr); gap: .75rem; min-height: 0; }
  .sr-showcase-copy { min-height: var(--sr-mobile-copy-height, 14rem); }
  .sr-showcase-copy h2 { font-size: 2.25rem; margin-bottom: .75rem; max-width: none; }
  .sr-showcase-copy p { font-size: 1rem; line-height: 1.5; }
  .sr-showcase-art { height: clamp(9rem, calc(100svh - var(--sr-mobile-copy-height, 14rem) - 16.5rem), 14rem); }
  .sr-showcase-art .sr-desktop { display: none; }
  .sr-showcase-controls { gap: .5rem; padding-top: .5rem; }
  .sr-scroll-cue { height: 4rem; margin-top: .5rem; gap: .25rem; }
  .sr-scroll-sign { height: 2.5rem; }
  .sr-loading-showcase .sr-loading-dots { height: 2.5rem; }
  .sr-showcase + .ba-hero { padding-top: 2rem; }
}
@media (max-width: 359px) { .sr-showcase-copy h2 { font-size: 2rem; } }
@media (prefers-reduced-motion: reduce) {
  .sr-showcase-art * { animation: none !important; }
  .sr-showcase-art .sr-before, .sr-showcase-art .sr-pointer { opacity: 0; }
  .sr-showcase-art .sr-result { opacity: 1; }
  .sr-showcase-art .sr-tools-color-before, .sr-showcase-art .sr-tools-text-before, .sr-showcase-art .sr-tools-color-active, .sr-showcase-art .sr-tools-cursor { opacity: 0; }
  .sr-showcase-art .sr-tools-color-after, .sr-showcase-art .sr-tools-text-after { opacity: 1; }
  .sr-showcase-art .sr-grid-preview { transform: none; }
  .sr-showcase-art .sr-dock-thumb { transform: scale(var(--dock-to)); }
  .sr-showcase-art .sr-table-source, .sr-showcase-art .sr-table-cursor { opacity: 0; }
  .sr-showcase-art .sr-table-view { opacity: 1; }
  .sr-showcase-art .sr-table-scroll { transform: translateY(-132px); }
  .sr-showcase-art .sr-table-thumb { transform: translateY(80px); }
  .sr-showcase-art .sr-library-first { transform: translate(0,-156px) scale(1.5); }
  .sr-showcase-art .sr-library-second { transform: translate(72px,-156px) scale(1.5); }
  .sr-showcase-art .sr-library-cursor { opacity: 0; }
  .sr-showcase-tabs button::before, .sr-showcase-tabs button::after { transition: none; }
}