/* Only the ten HTML tabs in this frame are actionable; native controls are media. */
.studio-demo{display:grid;grid-template-columns:160px minmax(0,1fr);border:1px solid var(--line-strong);border-radius:15px;overflow:hidden;background:var(--surface);text-align:left;isolation:isolate;box-shadow:0 18px 50px #0003;min-width:0}
.demo-sidebar{background:linear-gradient(155deg,#c7844210,transparent 50%),var(--surface);border-right:1px solid var(--line);padding:13px 8px;display:flex;flex-direction:column;min-width:0}
.demo-brand{display:flex;align-items:center;gap:7px;padding:0 6px 14px}.demo-brand img{object-fit:contain;width:30px;height:30px}.demo-brand>span{font-size:19px;line-height:1.2;font-weight:650;letter-spacing:-.8px}.demo-brand small{display:block;font-size:6px;letter-spacing:1.5px;color:var(--muted);margin-top:4px;font-weight:500}
.demo-tabs{display:grid;gap:5px}.demo-tab{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:44px;padding:6px 7px;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left;transition:transform .22s var(--ease),background-color .22s,border-color .22s;isolation:isolate}.demo-tab:before{content:'';position:absolute;left:-1px;top:12px;bottom:12px;width:2px;border-radius:3px;background:var(--tone);opacity:0;transform:scaleY(.3);transition:opacity .2s,transform .3s var(--ease)}.demo-tab:hover{background:var(--surface-high);transform:translateX(2px)}.demo-tab[aria-selected=true]{background:color-mix(in srgb,var(--tone) 9%,var(--surface));border-color:color-mix(in srgb,var(--tone) 35%,transparent)}.demo-tab[aria-selected=true]:before{opacity:1;transform:scaleY(1)}
.feature-icon{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border:1px solid color-mix(in srgb,var(--tone) 24%,transparent);border-radius:8px;color:var(--tone);background:color-mix(in srgb,var(--tone) 7%,var(--surface))}.feature-icon .icon{width:20px;height:20px}.demo-tab-copy{font-size:12px;line-height:1.4;font-weight:500;min-width:0}.tab-arrow{margin-left:auto;color:var(--tone);opacity:0;transition:opacity .2s;font-size:19px;line-height:1}.demo-tab[aria-selected=true] .tab-arrow{opacity:1}
.demo-main{min-width:0;display:flex;flex-direction:column;background:#18130f}.demo-caption{display:flex;justify-content:space-between;align-items:center;min-height:35px;padding:0 13px;border-bottom:1px solid var(--line);background:var(--surface);gap:12px}#demo-feature-title{font-size:10px;font-weight:550;color:var(--text)}.demo-preview-badge{font-size:7px;letter-spacing:1px;color:var(--dim)}
.demo-viewport{position:relative;aspect-ratio:1472/898;overflow:hidden;flex-shrink:0;pointer-events:none;user-select:none;isolation:isolate;background:#18130f}.demo-layer{position:absolute;inset:0;opacity:0;transition:opacity .3s cubic-bezier(.2,.65,.3,1);pointer-events:none}.demo-layer.is-active{opacity:1;z-index:1}.demo-layer img,.demo-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.demo-layer video{opacity:0;transition:opacity .18s ease}.demo-layer.video-ready video{opacity:1}
.demo-bottom{padding:6px 13px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--surface);border-top:1px solid var(--line);margin-top:auto;min-height:36px;font-size:9px;color:var(--muted)}#demo-counter{color:var(--amber);letter-spacing:1px;font-variant-numeric:tabular-nums}.auto-rail{display:grid;grid-template-columns:repeat(10,22px);justify-content:center;gap:5px}.auto-step{position:relative;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:6px;color:var(--dim);background:color-mix(in srgb,var(--surface-high) 35%,transparent);transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease}.auto-step .icon{width:14px;height:14px;stroke-width:1.9}.auto-step.is-active{color:var(--tone);border-color:color-mix(in srgb,var(--tone) 60%,transparent);background:color-mix(in srgb,var(--tone) 12%,var(--surface));transform:translateY(-1px)}.auto-step:after{content:'';position:absolute;left:2px;right:2px;bottom:-4px;height:2px;border-radius:2px;background:var(--tone);transform:scaleX(0);transform-origin:left}.auto-step.is-active.is-running:after{animation:autoStepProgress 3s linear forwards}@keyframes autoStepProgress{to{transform:scaleX(1)}}
[data-theme=light] .demo-main,[data-theme=light] .demo-viewport{background:#f8f5ef}[data-theme=light] .feature-icon{color:color-mix(in srgb,var(--tone) 50%,#34261c);background:color-mix(in srgb,var(--tone) 10%,var(--surface))}[data-theme=light] .demo-tab:before{background:color-mix(in srgb,var(--tone) 70%,#34261c)}
[data-theme=light] .studio-demo[data-media-theme=dark] .demo-layer{visibility:hidden}
[data-theme=light] .studio-demo{box-shadow:0 18px 50px #63391717}
.theme-committing .demo-layer,.theme-committing .demo-tab{transition:none}
.theme-fallback body,.theme-fallback .site-header,.theme-fallback .demo-sidebar,.theme-fallback .demo-caption,.theme-fallback .demo-bottom,.theme-fallback .showcase,.theme-fallback .plan-card{transition:background-color .3s ease,color .3s ease,border-color .3s ease}
::view-transition-old(root){animation:theme-fade-out .3s ease both}::view-transition-new(root){animation:theme-fade-in .3s ease both}::view-transition-group(root){animation-duration:.3s}::view-transition{pointer-events:none}@keyframes theme-fade-out{to{opacity:0}}@keyframes theme-fade-in{from{opacity:0}}
/* From Uiverse.io by Type-Delta. Native checkbox, keyboard focus, corrected ray 6. */
.st-sunMoonThemeToggleBtn{position:relative;cursor:pointer;color:var(--muted);flex-shrink:0}
.st-sunMoonThemeToggleBtn .themeToggleInput{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.st-sunMoonThemeToggleBtn:has(input:focus-visible){outline:3px solid var(--amber);outline-offset:4px}
.st-sunMoonThemeToggleBtn svg{position:absolute;inset:0;margin:auto;width:22px;height:22px;transition:transform .4s ease;transform:rotate(40deg);pointer-events:none}
.st-sunMoonThemeToggleBtn svg .sunMoon{transform-origin:center center;transition:inherit;transform:scale(1)}
.st-sunMoonThemeToggleBtn svg .sunRay{transform-origin:center center;transform:scale(0)}
.st-sunMoonThemeToggleBtn svg mask>circle{transition:transform .64s cubic-bezier(.41,.64,.32,1.575);transform:translate(0,0)}
.st-sunMoonThemeToggleBtn svg .sunRay2{animation-delay:.05s!important}
.st-sunMoonThemeToggleBtn svg .sunRay3{animation-delay:.1s!important}
.st-sunMoonThemeToggleBtn svg .sunRay4{animation-delay:.17s!important}
.st-sunMoonThemeToggleBtn svg .sunRay5{animation-delay:.25s!important}
.st-sunMoonThemeToggleBtn svg .sunRay6{animation-delay:.29s!important}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg{transform:rotate(90deg);color:var(--amber)}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg mask>circle{transform:translate(16px,-3px)}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg .sunMoon{transform:scale(.55)}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg .sunRay{animation:showRay1832 .4s ease 0s 1 forwards}
@keyframes showRay1832{from{transform:scale(0)}to{transform:scale(1)}}

@media(min-width:1700px){.studio-demo{grid-template-columns:185px minmax(0,1fr)}.demo-tab-copy{font-size:14px}.demo-tab{min-height:51px}.feature-icon{width:31px;height:31px}.demo-brand{padding-bottom:18px}.demo-brand>span{font-size:21px}}
@media(max-width:1250px) and (min-width:1001px){.studio-demo{grid-template-columns:140px minmax(0,1fr)}.demo-tab{gap:6px;padding:5px;min-height:40px}.demo-tab-copy{font-size:11px}.feature-icon{width:25px;height:25px}.feature-icon .icon{width:18px;height:18px}.demo-tabs{gap:4px}.tab-arrow{display:none}}
@media(max-width:1000px) and (min-width:701px){.studio-demo{grid-template-columns:165px minmax(0,1fr)}.demo-tab{min-height:44px}.demo-tab-copy{font-size:12px}}
@media(max-width:700px){.studio-demo{display:flex;flex-direction:column;border-radius:12px}.demo-sidebar{border:0;border-bottom:1px solid var(--line);padding:12px}.demo-brand{padding:0 0 11px;gap:6px}.demo-brand img{width:26px;height:26px}.demo-brand>span{font-size:17px}.demo-brand small{display:inline;margin-left:10px;font-size:7px;letter-spacing:1px}.demo-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.demo-tab{min-height:72px;padding:8px 3px;gap:6px;flex-direction:column;text-align:center;border-color:var(--line)}.demo-tab-copy{font-size:10px;line-height:1.4}.tab-arrow{display:none}.demo-tab:hover{transform:translateY(-1px)}.demo-tab:before{left:12px;right:12px;bottom:-1px;top:auto;width:auto;height:2px;transform:scaleX(.3)}.demo-tab[aria-selected=true]:before{transform:scaleX(1)}.demo-caption{min-height:32px;padding-inline:11px}.demo-preview-badge{font-size:7px}.demo-bottom{padding:8px 10px;grid-template-columns:1fr auto;gap:8px;font-size:9px}.demo-bottom>span:first-child{display:none}.auto-rail{grid-template-columns:repeat(10,20px);justify-content:start;gap:4px}.auto-step{width:20px;height:20px}.auto-step .icon{width:13px;height:13px}.demo-tab .feature-icon{width:27px;height:27px}.demo-tab .icon{width:19px;height:19px}}
@media(prefers-reduced-motion:reduce){.demo-layer,.demo-layer video,.demo-tab,.auto-step,.st-sunMoonThemeToggleBtn svg,.st-sunMoonThemeToggleBtn svg mask>circle{transition:none!important}.demo-tab:hover{transform:none}.auto-step.is-active.is-running:after{animation:none!important;transform:scaleX(1)}.st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg .sunRay{animation:none!important;transform:scale(1)}::view-transition-old(root),::view-transition-new(root){animation:none!important}}

/* Dark showcase: the supplied captures already contain the complete SubAI
   window. The only HTML controls above them are ten accessible hotspots,
   aligned with the native function rail so the preview behaves like the app. */
.studio-demo[data-media-theme=dark]{position:relative;display:block;aspect-ratio:1919/1032;border-color:#604834;border-radius:13px;background:#120e0b;box-shadow:0 18px 52px #0006}
.studio-demo[data-media-theme=dark] .demo-main{display:block;background:#120e0b}
.studio-demo[data-media-theme=dark] .demo-caption,.studio-demo[data-media-theme=dark] .demo-bottom{display:none}
.studio-demo[data-media-theme=dark] .demo-viewport{width:100%;height:100%;aspect-ratio:1919/1032;background:#120e0b}
.studio-demo[data-media-theme=dark] .demo-layer img,.studio-demo[data-media-theme=dark] .demo-layer video{object-fit:cover;object-position:center}
.studio-demo[data-media-theme=dark] .demo-sidebar{position:absolute;z-index:6;inset:0 auto 0 0;width:11.15%;min-width:0;padding:0;border:0;background:transparent;pointer-events:none}
.studio-demo[data-media-theme=dark] .demo-brand{display:none}
.studio-demo[data-media-theme=dark] .demo-tabs{position:absolute;left:4.6%;top:12.15%;width:92%;height:47.5%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(10,minmax(0,1fr));gap:0;pointer-events:none}
.studio-demo[data-media-theme=dark] .demo-tab{pointer-events:auto;width:100%;height:auto;min-height:0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;transform:none;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.studio-demo[data-media-theme=dark] .demo-tab>*{opacity:0;pointer-events:none}
.studio-demo[data-media-theme=dark] .demo-tab:before{display:none}
.studio-demo[data-media-theme=dark] .demo-tab:hover{background:color-mix(in srgb,var(--tone) 11%,transparent);border-color:color-mix(in srgb,var(--tone) 35%,transparent);box-shadow:inset 3px 0 var(--tone)}
.studio-demo[data-media-theme=dark] .demo-tab[aria-selected=true]{background:transparent;border-color:transparent;box-shadow:none}
.studio-demo[data-media-theme=dark] .demo-tab[aria-selected=true]:hover{background:color-mix(in srgb,var(--tone) 9%,transparent);border-color:color-mix(in srgb,var(--tone) 32%,transparent);box-shadow:inset 3px 0 var(--tone)}
.studio-demo[data-media-theme=dark] .demo-tab:focus-visible{outline:2px solid var(--tone);outline-offset:-3px;background:#ffffff08}

@media(max-width:700px){.studio-demo[data-media-theme=dark]{border-radius:10px}.studio-demo[data-media-theme=dark] .demo-tabs{left:2%;width:96%}.studio-demo[data-media-theme=dark] .demo-tab{border-radius:4px}}

/* Light showcase mirrors the same full-window interaction model. */
.studio-demo[data-media-theme=light]{position:relative;display:block;aspect-ratio:1919/1032;border-color:#d5bfa7;border-radius:13px;background:#f7f3ee;box-shadow:0 18px 48px #6e40201c}
.studio-demo[data-media-theme=light] .demo-main{display:block;background:#f7f3ee}
.studio-demo[data-media-theme=light] .demo-caption,.studio-demo[data-media-theme=light] .demo-bottom{display:none}
.studio-demo[data-media-theme=light] .demo-viewport{width:100%;height:100%;aspect-ratio:1919/1032;background:#f7f3ee}
.studio-demo[data-media-theme=light] .demo-layer img,.studio-demo[data-media-theme=light] .demo-layer video{object-fit:cover;object-position:center}
.studio-demo[data-media-theme=light] .demo-sidebar{position:absolute;z-index:6;inset:0 auto 0 0;width:11.15%;min-width:0;padding:0;border:0;background:transparent;pointer-events:none}
.studio-demo[data-media-theme=light] .demo-brand{display:none}
.studio-demo[data-media-theme=light] .demo-tabs{position:absolute;left:4.6%;top:12.15%;width:92%;height:47.5%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(10,minmax(0,1fr));gap:0;pointer-events:none}
.studio-demo[data-media-theme=light] .demo-tab{pointer-events:auto;width:100%;height:auto;min-height:0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;transform:none;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.studio-demo[data-media-theme=light] .demo-tab>*{opacity:0;pointer-events:none}
.studio-demo[data-media-theme=light] .demo-tab:before{display:none}
.studio-demo[data-media-theme=light] .demo-tab:hover{background:color-mix(in srgb,var(--tone) 10%,transparent);border-color:color-mix(in srgb,var(--tone) 38%,transparent);box-shadow:inset 3px 0 var(--tone)}
.studio-demo[data-media-theme=light] .demo-tab[aria-selected=true]{background:transparent;border-color:transparent;box-shadow:none}
.studio-demo[data-media-theme=light] .demo-tab[aria-selected=true]:hover{background:color-mix(in srgb,var(--tone) 8%,transparent);border-color:color-mix(in srgb,var(--tone) 34%,transparent);box-shadow:inset 3px 0 var(--tone)}
.studio-demo[data-media-theme=light] .demo-tab:focus-visible{outline:2px solid color-mix(in srgb,var(--tone) 70%,#5b3823);outline-offset:-3px;background:#ffffff28}

@media(max-width:700px){.studio-demo[data-media-theme=light]{border-radius:10px}.studio-demo[data-media-theme=light] .demo-tabs{left:2%;width:96%}.studio-demo[data-media-theme=light] .demo-tab{border-radius:4px}}