/* Step-by-step demonstrations; the content is illustrative, never live data. */
.showcase-work[data-demo]{--demo-color:#c6b1ff;--demo-progress:0%;transform:none}
.showcase-work[data-demo]:hover{transform:none}
.showcase-work[data-demo] .showcase-work-top{padding-top:14px;padding-bottom:12px}
.demo-counter{margin-left:auto;flex-shrink:0;font:10px/1.5 ui-monospace,monospace;color:#c1bccd}
.showcase-work[data-demo] .showcase-qixu{transform:none;margin-top:4px;margin-bottom:14px}
.showcase-work[data-demo] .showcase-agent{min-height:100px}
.showcase-work[data-demo] .showcase-agent strong{font-size:13px;line-height:1.5}
.showcase-work[data-demo] .showcase-agent p{font-size:12px;line-height:1.75}
.showcase-work[data-demo] .showcase-message{font-size:12px}
.showcase-work[data-demo] .showcase-step{transition:opacity .3s,border-color .3s,background .3s;position:relative;opacity:1}
.showcase-work[data-demo] .showcase-step.is-complete{opacity:1}
.showcase-work[data-demo] .showcase-step.is-current{opacity:1;background:#30283f;border-color:#a18ac4;box-shadow:inset 3px 0 0 var(--demo-color)}
.showcase-work[data-demo] .showcase-step.is-risk.is-current{background:#39252c;border-color:#cf8797;box-shadow:inset 3px 0 0 #efa5b6}
.showcase-work[data-demo] .showcase-step>span{font-size:11px}
.showcase-work[data-demo] .showcase-step small{font-size:10px}
.demo-caption{margin:0 28px 12px;min-height:53px}
.demo-caption strong{font-size:13px;font-weight:500;color:var(--demo-color)}
.demo-caption p{margin-top:5px;font-size:11px;color:#c2bdce}
.demo-controls{display:flex;align-items:center;gap:12px;margin:0 24px 16px}
.demo-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1;gap:8px;min-width:0}
.demo-step{position:relative;padding:10px 0 9px;border:0;border-top:2px solid #55505f;background:none;color:#bfb9ca;text-align:left;font-family:inherit;font-size:11px;line-height:1.5;cursor:pointer;white-space:nowrap;min-width:0}
.demo-step span{font:9px/1.5 ui-monospace,monospace;margin-right:5px;opacity:.75}
.demo-step::before{content:'';position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--demo-color)}
.demo-step[aria-pressed=true]{color:#fff}
.demo-step[aria-pressed=true]::before{width:var(--demo-progress);transition:width .12s linear}
.demo-step.is-complete::before{width:100%}
.demo-step:hover{color:#fff}
.demo-toggle{display:none;align-items:center;justify-content:center;flex-shrink:0;min-width:42px;min-height:32px;border:1px solid #645b73;border-radius:5px;color:#e2d9f2;background:#191620;font-family:inherit;font-size:11px;line-height:1.4;cursor:pointer;padding:5px 8px}
.demo-ready .demo-toggle{display:flex}
.demo-toggle:hover{background:#342941}
.demo-case-link{text-decoration:none;color:inherit;transition:background .2s;margin-top:auto}
.demo-case-link:hover{background:#ffffff05}
.demo-case-link:focus-visible{outline-offset:-3px!important}
.showcase-featured[data-demo] .showcase-work-info{padding-top:2px;padding-bottom:22px}
.showcase-featured[data-demo] h2{font-size:23px}
.showcase-featured[data-demo] h2>span{font-size:16px}
.showcase-side{grid-template-rows:1fr 1.05fr}
.showcase-scope[data-demo]{--demo-color:#abdfd1}
.scope-demo-screen{margin:0 20px 10px;padding:12px 14px;background:#0d181b;border:1px solid #45615e;border-radius:7px;min-height:126px;position:relative;overflow:hidden}
.scope-demo-line{display:flex;align-items:center;gap:8px}
.scope-demo-icon{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;background:#28413d;border-radius:4px;color:#b8ebdd;font-size:15px}
.scope-demo-line strong{font-size:12px;font-weight:500}
.scope-demo-screen>p{font-size:11px;line-height:1.75;color:#c2d2d0;margin:9px 0;min-height:38px}
.scope-demo-result{display:flex;gap:7px;align-items:center;font-size:10px;color:#a9daca}
.scope-demo-signal{height:5px;width:5px;border-radius:50%;background:currentColor;flex-shrink:0}
[data-demo=scope] .demo-slide[data-stage="2"] .scope-demo-result{color:#f1bac0}
[data-demo=scope] .demo-slide[data-stage="2"] .scope-demo-screen{border-color:#a0717b}
.showcase-side .demo-controls{margin:0 20px 8px;gap:10px}
.showcase-side .demo-step{font-size:10px}
.showcase-side .showcase-work-info{padding-top:4px;padding-bottom:16px}
.showcase-side .showcase-work-info h2{font-size:19px}
.showcase-film[data-demo]{--demo-color:#f1d3b7}
.showcase-film[data-demo]::before{background:linear-gradient(180deg,#140e0def,#140e0dac 48%,#140e0df2)}
.showcase-film[data-demo] .showcase-film-image{filter:saturate(.65);opacity:.55}
.showcase-film[data-demo]:hover .showcase-film-image{transform:none}
.demo-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity .4s;pointer-events:none}
.showcase-film.video-playing .demo-film-video{opacity:.95}
.showcase-film.video-playing .showcase-film-image{opacity:0}
.showcase-film.video-playing::before{background:linear-gradient(180deg,#140e0dce,#140e0d40 42%,#140e0def)}
.film-demo-screen{margin:0 20px 8px;min-height:125px;position:relative}
.film-demo-heading{display:flex;align-items:center;gap:8px}
.film-demo-heading strong{font-size:13px;font-weight:500;color:#ffebda}
.film-demo-screen p{font-size:11px;line-height:1.75;color:#e6d6ce;margin:6px 0;min-height:20px}
.film-demo-artifact{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.film-demo-artifact span{border:1px solid #ac8e7770;background:#2a1f1bd9;border-radius:4px;flex:1;text-align:center;padding:8px 4px;font-size:11px;color:#f0dbca}
.film-demo-artifact i{font-style:normal;font-size:12px;color:#e9c3a7}
[data-demo=film] .demo-slide[data-stage="1"] .film-demo-artifact span{background:linear-gradient(160deg,#65504180,#181e37b0);padding-top:12px;padding-bottom:12px;border-color:#dfb38990}
[data-demo=film] .demo-slide[data-stage="2"] .film-demo-artifact span{box-shadow:inset 0 -3px 0 #d6a876}
[data-demo=film] .demo-slide[data-stage="3"] .film-demo-artifact{visibility:hidden}
.film-demo-caption{font-size:10px;color:#eed1b7;margin-top:7px}
.showcase-film .demo-controls{position:relative;z-index:2}
.showcase-film .demo-step{border-color:#b9a18e99;color:#e4d5c9}
.showcase-film .demo-toggle{background:#271e19de;border-color:#927c67;color:#f2e2d3}
.showcase-film .demo-case-link h2{font-size:17px}
@media(max-width:1024px){
  .showcase-work[data-demo] .showcase-qixu{margin-left:16px;margin-right:16px}
  .demo-caption{margin-left:20px;margin-right:20px}
  .demo-controls{margin-left:20px;margin-right:20px}
  .demo-step span{display:none}
  .showcase-work[data-demo] .showcase-agent strong{font-size:12px}
  .showcase-work[data-demo] .showcase-agent p{font-size:11px}
  .scope-demo-screen{min-height:142px}
  .film-demo-screen{min-height:142px}
}
@media(max-width:768px){
  .showcase-side{grid-template-rows:auto}
  .showcase-work[data-demo] .showcase-agent{min-height:80px}
  .showcase-featured[data-demo] h2>span{display:block;margin-left:0}
  .showcase-side .demo-controls,.scope-demo-screen,.film-demo-screen{margin-left:14px;margin-right:14px}
  .demo-controls{gap:8px}
  .demo-steps{gap:6px}
  .showcase-side .demo-toggle{min-width:36px;padding:5px}
  .showcase-side .demo-case-link h2{font-size:16px}
  .scope-demo-screen{padding:10px;min-height:152px}
  .film-demo-screen{min-height:152px}
  .film-demo-artifact{gap:4px}
  .film-demo-artifact span{font-size:10px}
}
@media(max-width:480px){
  .showcase-work[data-demo] .showcase-qixu{margin:4px 12px 14px}
  .showcase-work[data-demo] .showcase-agent{min-height:98px}
  .demo-caption{margin:0 16px 12px;min-height:58px}
  .demo-caption strong{font-size:12px}
  .demo-caption p{font-size:11px}
  .demo-controls{margin:0 16px 14px}
  .demo-step span{display:inline}
  .demo-step{font-size:11px}
  .showcase-side .demo-controls{margin:0 16px 10px}
  .showcase-side .demo-step{font-size:11px}
  .scope-demo-screen,.film-demo-screen{margin:0 16px 12px;min-height:135px}
  .scope-demo-screen>p,.film-demo-screen p{font-size:12px}
  .showcase-side .demo-case-link h2{font-size:18px}
  .showcase-film[data-demo]{min-height:0}
}
@media(prefers-reduced-motion:reduce){.demo-step::before{transition:none!important}}

@media(min-width:1025px){
  .showcase{padding-top:84px}
  .showcase-heading{margin-bottom:24px}
  .showcase-work[data-demo] .showcase-step{margin-top:7px;padding:6px 8px}
  .showcase-work[data-demo] .showcase-step small{line-height:1.4}
  .showcase-work[data-demo] .showcase-agent{min-height:90px}
  .showcase-featured[data-demo] .showcase-work-info{padding-bottom:18px}
}

/* The outer project stays in place; each complete inner panel slides as one. */
.demo-viewport{overflow:hidden;min-width:0;width:100%;touch-action:pan-y}
.demo-track{display:flex;align-items:stretch;width:100%;transform:translateX(var(--demo-offset,0%));will-change:transform}
.demo-slide{flex:0 0 100%;min-width:0;position:relative;isolation:isolate}
.demo-slide>.demo-film-video{z-index:0;object-fit:cover}
.demo-slide .film-demo-screen{z-index:1}
.showcase-film.video-playing .showcase-film-image{opacity:.55}
.showcase-film.video-playing::before{background:linear-gradient(180deg,#140e0def,#140e0dac 48%,#140e0df2)}
.showcase-film .demo-slide[data-stage="3"] .film-demo-screen{background:linear-gradient(180deg,#140e0daa,#140e0d25 55%,#140e0daa);border-radius:5px;padding:8px}
@media(prefers-reduced-motion:reduce){
  .showcase .demo-track{transform:translateX(var(--demo-offset,0%))!important;transition:none!important}
}