.motion-review,.workflow-showcase { --study-bg:#30394b; --study-text:#fff; --study-muted:#cad2e0; --study-rule:#ffffff26; --study-control:#ffffff0c; --study-active:#515e76; scroll-behavior:auto; }
.motion-review { background:var(--study-bg); color:var(--study-text); transition:background-color .35s,color .35s; }
.motion-review[data-surface="light"],.workflow-showcase { --study-bg:#fff; --study-text:#141820; --study-muted:#515e76; --study-rule:#515e762b; --study-control:#f0f2f7; --study-active:#fff; }
:is(.motion-review,.workflow-showcase) :is(button,a,[tabindex],video):focus-visible { outline:2px solid var(--orange); outline-offset:5px; }
.study-toolbar { position:sticky; top:0; z-index:10; background:var(--study-bg); min-height:80px; padding:16px clamp(22px,4vw,64px); display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--study-rule); }
.study-back { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--study-muted); font-size:12px; }
.study-back svg { width:20px; height:20px; }
.study-tools { display:flex; align-items:center; gap:24px; }
.study-tools button { min-height:38px; border:0; background:transparent; color:var(--study-muted); font-size:12px; padding:8px 12px; }
.surface-switch { display:flex; gap:3px; padding:3px; border:1px solid var(--study-rule); border-radius:8px; }
.surface-switch button { min-height:30px; padding:5px 14px; border-radius:5px; }
.surface-switch button[aria-pressed="true"] { background:var(--study-active); color:var(--study-text); box-shadow:0 1px 4px #00000012; }
.motion-study { padding:72px 0 50px; }
.study-heading { width:min(1100px,calc(100% - 48px)); margin:0 auto 72px; text-align:center; }
.study-heading :is(h1,h2) { font-size:clamp(38px,4.3vw,66px); line-height:1.1; letter-spacing:-.055em; font-weight:700; }
.study-heading > p { font-size:clamp(16px,1.45vw,21px); line-height:1.65; color:var(--study-muted); margin:22px auto 0; max-width:880px; }
.study-shell { width:min(1200px,calc(100% - clamp(32px,8vw,112px))); margin-inline:auto; }
.study-tabs { position:relative; display:flex; width:max-content; max-width:100%; padding:5px; margin:0 auto 28px; border:1px solid var(--study-rule); border-radius:14px; background:var(--study-control); isolation:isolate; }
.study-tab { flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:9px; min-height:42px; padding:12px 19px; border:0; background:transparent; border-radius:9px; color:var(--study-muted); font-size:12px; line-height:1.3; font-weight:500; white-space:nowrap; transition:color .2s; }
.study-tab[aria-selected="true"] { color:var(--study-text); }
.study-tab svg { width:16px; height:16px; flex-shrink:0; }
.study-tab[aria-selected="true"] svg { color:var(--orange); }
.tab-highlight { position:absolute; z-index:-1; top:5px; bottom:5px; left:0; width:var(--tab-width,150px); transform:translateX(var(--tab-left,5px)); background:var(--study-active); border-radius:9px; box-shadow:0 2px 6px #00000010; transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1); }
.motion-stage { position:relative; isolation:isolate; container-type:inline-size; aspect-ratio:16/9; border-radius:24px; overflow:hidden; background:#515e76; }
.stage-paper { position:absolute; z-index:-1; inset:0; background:url('/assets/workflows/2026-11-06/film-slate.webp') center /cover no-repeat; pointer-events:none; }
.stage-layer { position:absolute; inset:0; pointer-events:none; }
/* Opening frame: x=201, y=36, w=1038, h=738 in a 1440 × 810 film. */
.poster-window { position:absolute; left:13.958333%; top:4.444444%; width:72.083333%; height:91.111111%; overflow:hidden; border-radius:.416667cqw; background:#fff; box-shadow:0 1.25cqw 2.604167cqw -.729167cqw #0e141e6b,0 .15625cqw .416667cqw #0e141e29; transform-origin:50% 85%; will-change:transform,opacity; }
.poster-window img { position:absolute; height:auto; max-width:none; top:-4.878049%; width:138.728324%; left:-19.364162%; user-select:none; pointer-events:none; }
.stage-watch { position:absolute; inset:0; display:block; width:100%; height:100%; padding:0; border:0; border-radius:inherit; background:transparent; color:#424d63; cursor:pointer; }
.stage-watch:focus-visible { outline-offset:-4px; }
.stage-watch-icon { position:absolute; right:14px; bottom:14px; display:grid; place-items:center; width:38px; height:38px; border:1px solid #ffffffa0; border-radius:50%; background:#ffffffed; box-shadow:0 2px 8px #29344620; transition:background .2s,transform .2s; }
.stage-watch svg { width:18px; height:18px; }
.stage-watch:hover .stage-watch-icon { background:#fff; transform:scale(1.06); }
.stage-watch.is-loading { z-index:1; cursor:progress; }
.stage-watch.is-loading svg { visibility:hidden; }
.stage-watch.is-loading .stage-watch-icon::after { content:''; position:absolute; width:16px; height:16px; border:2px solid #515e7633; border-top-color:#515e76; border-radius:50%; animation:film-loading .8s linear infinite; }
@keyframes film-loading { to { transform:rotate(360deg); } }
.study-caption { display:grid; grid-template-columns:1fr 1.1fr; gap:72px; padding:34px clamp(0px,3vw,48px) 0; }
.study-caption :is(h2,h3) { font-size:clamp(23px,2.15vw,31px); line-height:1.3; letter-spacing:-.035em; font-weight:600; }
.study-caption p { color:var(--study-muted); font-size:14px; line-height:1.8; }
.full-workflow { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#30394b; opacity:0; cursor:pointer; }
.full-workflow[hidden],.stage-watch[hidden] { display:none; }
.film-controls { display:flex; align-items:center; gap:10px; min-height:58px; padding:9px 0; border-bottom:1px solid var(--study-rule); color:var(--study-muted); }
.film-control { position:relative; display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; padding:8px; border:0; border-radius:6px; background:transparent; color:inherit; cursor:pointer; }
.film-control:hover { background:var(--study-control); color:var(--study-text); }
.film-control:disabled { cursor:progress; opacity:.5; }
.film-control[hidden] { display:none; }
.film-control svg { width:18px; height:18px; }
.film-control.is-muted::after { content:''; position:absolute; width:20px; height:1px; background:currentColor; transform:rotate(45deg); }
.film-clock { flex-shrink:0; font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.film-seek { --progress:0%; flex:1; min-width:24px; width:100%; height:32px; margin:0; padding:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.film-seek::-webkit-slider-runnable-track { height:3px; border-radius:2px; background:linear-gradient(to right,var(--orange) var(--progress),var(--study-rule) var(--progress)); }
.film-seek::-moz-range-track { height:3px; border-radius:2px; background:var(--study-rule); }
.film-seek::-moz-range-progress { height:3px; background:var(--orange); }
.film-seek::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:10px; height:10px; margin-top:-3.5px; border:0; border-radius:50%; background:var(--study-muted); }
.film-seek::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:var(--study-muted); }
.film-seek:disabled { cursor:default; opacity:.5; }
.film-seek:disabled::-webkit-slider-thumb { opacity:0; }
.film-seek:disabled::-moz-range-thumb { opacity:0; }
.film-seek:focus-visible { outline:2px solid var(--orange); outline-offset:1px; border-radius:4px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.film-player:fullscreen { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; background:var(--study-bg); }
.film-player:fullscreen .motion-stage,.film-player:fullscreen .film-controls { width:min(100%,calc((100dvh - 106px)*16/9)); flex-shrink:0; }
@media(max-width:520px) { .film-controls { gap:4px; } .film-control { flex-basis:32px; width:32px; height:36px; } .film-clock { font-size:10px; } }
@media(max-width:340px) { .film-controls { flex-wrap:wrap; row-gap:0; } .film-seek { order:1; flex-basis:100%; height:20px; } }
.film-error { margin-top:16px; font-size:13px; line-height:1.6; color:var(--study-text); }
.study-noscript { margin:30px auto; width:90%; text-align:center; }
@media(min-width:1800px) { .motion-study { padding-top:90px; } .study-heading { margin-bottom:90px; } }
@media(max-width:800px) {
  .study-toolbar { min-height:68px; padding:12px 20px; gap:12px; }
  .study-tools { gap:8px; }
  .study-tools button { font-size:10px; padding:6px 9px; }
  .study-back { gap:8px; font-size:11px; }
  .surface-switch button { min-height:30px; padding:5px 10px; }
  .motion-study { padding-top:50px; }
  .study-heading { margin-bottom:44px; }
  .study-shell { width:calc(100% - 32px); }
  .study-tabs { width:100%; }
  .study-tab { flex:1 1 0; min-width:0; padding:10px 9px; font-size:10px; white-space:normal; text-align:center; gap:7px; }
  .study-tab svg { width:14px; height:14px; }
  .motion-stage { border-radius:15px; }
  .study-caption { gap:30px; padding:28px 6px 0; }
  .study-caption p { font-size:13px; }
  .stage-watch-icon { width:30px; height:30px; right:7px; bottom:7px; }
  .stage-watch svg { width:15px; height:15px; }
}
@media(max-width:520px) {
  .study-back span { display:none; }
  .study-tools { margin-left:auto; }
  .study-heading :is(h1,h2) { font-size:38px; }
  .study-heading > p { font-size:15px; line-height:1.7; }
  .study-tab { flex-direction:column; font-size:10px; padding:9px 5px; gap:6px; }
  .study-tabs { margin-bottom:18px; }
  .study-caption { grid-template-columns:1fr; gap:14px; }
  .study-caption :is(h2,h3) { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } .stage-watch:hover .stage-watch-icon { transform:none; } .stage-watch.is-loading .stage-watch-icon::after { animation:none; } }

.workflow-showcase { color:var(--study-text); padding-block:clamp(64px,6vw,96px); }
.workflow-showcase .study-heading { margin-bottom:42px; }
.workflow-showcase .study-caption h3 { margin:0; }
.demo-examples-link { margin-top:24px; }