/* Approved app + automation / video visuals from card-visuals demo 05. */
#practice{--motion-ease:cubic-bezier(.22,1,.36,1)}
/* Shared grid tracks align both descriptions, both artboards, and both footer rules. */
#practice .practice-grid{grid-template-rows:auto auto auto 292px;column-gap:24px;row-gap:0}#practice .practice-card{grid-row:span 4;display:grid;grid-template-rows:subgrid;align-items:start;padding:30px;transition:border-color .4s}#practice .practice-card:hover,#practice .practice-card:focus-within{transform:none}#practice .card-description{padding-bottom:20px}#practice .card-top{width:100%}#practice .card-bottom{width:100%;height:100%;margin:0;padding-top:22px;align-items:center}#practice .share-bottom{margin:0}.viz-frame{height:262px;width:100%;position:relative;display:grid;place-items:center;background:var(--neutral-50);border-radius:8px;overflow:hidden;isolation:isolate;margin:0 0 20px;padding:22px;direction:ltr}#practice .viz-frame .solution-art,#practice .viz-frame .notes-art{width:100%;height:100%;min-height:0;margin:0;padding:0;flex:none}#practice .viz-frame .mini-window{max-width:400px}#practice .viz-frame .floating-chip{bottom:0;inset-inline-end:0}#practice .viz-frame .paper-note{width:166px;height:205px}#practice .viz-frame .paper-front strong{font-size:30px}.v-surface{background:var(--neutral-0);border:1px solid var(--neutral-200);border-radius:8px;overflow:hidden;width:100%;max-width:430px}.v-chrome{height:26px;display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--neutral-200);direction:ltr}.v-chrome i{width:4px;height:4px;background:var(--neutral-200);border-radius:50%}.v-chrome>span{margin-inline-start:auto;font:8px var(--font-mono);color:var(--neutral-600)}.viz-frame strong{font-family:var(--font-head);letter-spacing:-.035em;line-height:1.3}.viz-frame em{font-style:normal;color:var(--neutral-950);background:linear-gradient(transparent 57%,var(--vermilion-500) 57%,var(--vermilion-500) 90%,transparent 90%);padding-inline:.025em}.v-bars{height:85px;display:flex;align-items:end;gap:7px;border-bottom:1px solid var(--neutral-200);padding-top:10px}.v-bars i{flex:1;height:var(--h);background:var(--neutral-200);transform-origin:bottom}.v-bars i:nth-child(3n),.v-bars i:last-child{background:var(--vermilion-500)}.v-lines{display:grid;gap:8px;margin-block:14px}.v-lines i{height:4px;background:var(--neutral-200);width:100%;transform-origin:left}.v-lines i:nth-child(2){width:88%}.v-lines i:nth-child(3){width:60%}.v-avatar{width:24px;height:24px;border-radius:5px}
.v-video{max-width:265px}.v-video-cover{position:relative;height:173px;isolation:isolate;background:var(--neutral-50);overflow:hidden}.v-video-disc{position:absolute;width:140px;height:140px;border-radius:50%;right:-5px;top:15px;background:var(--vermilion-500)}.v-video-cover img{position:absolute;height:175px;width:145px;object-fit:contain;right:-8px;bottom:0;z-index:1}.v-video-cover>strong{position:absolute;left:14px;top:16px;font-size:21px;max-width:110px;z-index:2}.v-play{position:absolute;left:14px;bottom:18px;width:34px;height:34px;background:var(--neutral-950);color:var(--neutral-50);border-radius:50%;display:grid;place-items:center;font-size:12px;z-index:3;padding-left:2px}.v-video-bottom{padding:12px;font-size:9px;color:var(--neutral-600)}.v-video-progress{height:2px;margin-top:9px;background:var(--neutral-200);overflow:hidden}.v-video-progress i{display:block;background:var(--vermilion-500);height:100%;width:68%;transform-origin:left}
/* 05: two illustrated interfaces stay beside one another and trade width. */
.dual-stage{display:flex;gap:10px;width:100%;height:228px;direction:ltr;align-items:stretch}
.dual-window{flex:1;min-width:0;background:var(--neutral-0);border:1px solid var(--neutral-200);border-radius:7px;overflow:hidden;transition:flex-grow .95s cubic-bezier(.65,0,.35,1),border-color .7s}
.dual-stage[data-active=app] .dual-app,.dual-stage[data-active=automation] .dual-automation{flex-grow:1.65;border-color:var(--neutral-400)}
.dual-window-title{height:33px;width:100%;display:flex;align-items:center;gap:6px;padding:0 9px;background:var(--neutral-0);border:0;text-align:start;font:9px var(--font-body);white-space:nowrap;color:var(--neutral-600)}
.dual-window-title:hover{background:var(--neutral-50);color:var(--neutral-950)}.dual-window-title:focus-visible{outline:2px solid var(--vermilion-700);outline-offset:-3px}
.dual-window-dot{width:5px;height:5px;border:1px solid var(--neutral-400);border-radius:50%;flex:none}.dual-window-title[aria-pressed=true] .dual-window-dot{background:var(--vermilion-500);border-color:var(--vermilion-500)}.dual-window-toggle{margin-inline-start:auto;font:14px var(--font-mono)}
.dual-window-body{height:calc(100% - 33px);border-top:1px solid var(--neutral-200);display:grid;place-items:center;padding:4px}
.dual-illustration{width:100%;height:100%;overflow:visible;stroke-linecap:round;stroke-linejoin:round}
.ui-paper{fill:var(--neutral-50);stroke:var(--neutral-200)}.ui-rule{fill:none;stroke:var(--neutral-200)}.ui-ink{stroke:var(--neutral-950)}.ui-ink-fill{fill:var(--neutral-950)}.ui-white{fill:var(--neutral-0);stroke:var(--neutral-200)}.ui-paper-fill{fill:var(--neutral-50)}.ui-paper-stroke{stroke:var(--neutral-50)}.ui-accent-fill{fill:var(--vermilion-500)}.ui-grey-fill{fill:var(--neutral-400)}.ui-muted-fill{fill:var(--neutral-200)}
.app-complete{opacity:0}.app-pointer{opacity:0}.app-task{transform-box:view-box}
.dual-stage[data-active=app] .app-task{animation:app-move 3.7s .5s cubic-bezier(.65,0,.35,1) both}
.dual-stage[data-active=app] .app-pointer{animation:app-pointer 3.7s .5s cubic-bezier(.65,0,.35,1) both}
.dual-stage[data-active=app] .app-complete{animation:complete-in .4s 3s both}
@keyframes app-move{0%,25%{transform:translateX(0)}65%,100%{transform:translateX(91px)}}
@keyframes app-pointer{0%{opacity:0;transform:translate(12px,12px)}20%,25%{opacity:1;transform:translate(0,0)}65%,78%{opacity:1;transform:translate(91px,0)}100%{opacity:0;transform:translate(98px,9px)}}
@keyframes complete-in{from{opacity:0}to{opacity:1}}
.flow-tracks{stroke:var(--neutral-200);stroke-width:2}.flow-draw{stroke:var(--vermilion-500);stroke-width:2}.flow-draw path{stroke-dasharray:1;stroke-dashoffset:1}.flow-node{stroke-width:1.5}.flow-ai text{fill:var(--neutral-50);font:700 19px var(--font-head)}.flow-done,.flow-pulse{opacity:0}
.dual-stage[data-active=automation] .flow-draw path{animation:flow-draw .85s var(--delay) cubic-bezier(.65,0,.35,1) both}
.dual-stage[data-active=automation] .flow-node>.ui-white{animation:node-activate .6s var(--delay) both}
.dual-stage[data-active=automation] .flow-done{animation:complete-in .35s 2.5s both}
.dual-stage[data-active=automation] .flow-pulse{offset-path:path('M40 49V88Q40 97 49 97H100H158Q166 97 166 106V145');animation:flow-signal 2.5s .2s cubic-bezier(.65,0,.35,1) both}
@keyframes flow-draw{to{stroke-dashoffset:0}}@keyframes node-activate{to{stroke:var(--vermilion-500)}}@keyframes flow-signal{0%{offset-distance:0%;opacity:0}10%,90%{opacity:1}100%{offset-distance:100%;opacity:0}}
[dir=rtl] .dual-stage{direction:rtl}
@media(max-width:1050px){.dual-stage{gap:7px}.dual-window-title{padding-inline:6px;gap:4px;font-size:8px}.dual-window-toggle{font-size:12px}}
@media(max-width:760px){.dual-stage{height:218px;gap:7px}.dual-stage[data-active=app] .dual-app,.dual-stage[data-active=automation] .dual-automation{flex-grow:1.4}.dual-window-dot{display:none}.dual-window-title{font-size:8px}.dual-window-body{padding:0}.build-viz.dual{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.app-task{transform:translateX(91px)}.app-complete,.flow-done{opacity:1}.flow-draw path{stroke-dashoffset:0}.app-pointer,.flow-pulse{display:none}}
/* Constrain vector canvases to their windows while flex widths animate. */
.dual-window-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.dual-illustration{display:block;min-width:0;min-height:0;max-height:100%}

/* The visuals now finish each card; no footer track or trailing gap. */
.visual-lab .viz-frame{margin-bottom:0}

#practice .viz-frame{margin:0;padding-block:17px}#practice .v-video{height:228px}#practice .v-video-cover{height:173px}
#practice .practice-grid{grid-template-rows:auto auto auto 292px}#practice .practice-card{grid-row:span 4}
#practice .stack-credentials{margin-top:32px}
#practice.is-playing .v-video-cover img{animation:practice-arrive .9s .15s var(--motion-ease) both}
#practice.is-playing .v-video-progress i{animation:practice-progress 3s .3s linear both}
@keyframes practice-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes practice-progress{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
[dir=rtl] #practice .v-video-cover>strong{direction:rtl;text-align:right;font:700 21px/1.5 var(--font-body);letter-spacing:0}
[dir=rtl] #practice .v-video-bottom{direction:rtl;text-align:start}
@media(max-width:1050px){#practice .practice-card{padding:24px}#practice .viz-frame{padding-inline:17px}#practice .v-video-cover>strong{font-size:18px;max-width:90px}#practice .v-video-cover img{right:-24px}#practice .v-video-disc{right:-25px}}
@media(max-width:760px){#practice .practice-grid{grid-template-rows:none;gap:22px}#practice .practice-card{display:flex;grid-row:auto;padding:24px}#practice .viz-frame{height:252px;flex:none;padding:17px 18px}#practice .build-viz.dual{padding-inline:10px}#practice .v-video{height:218px}#practice .v-video-cover{height:166px}#practice .v-video-cover img{right:-6px}#practice .v-video-cover>strong{font-size:21px;max-width:115px}#practice .v-video-disc{right:-5px}}
@media(prefers-reduced-motion:reduce){#practice .dual-window,#practice .dual-illustration *{animation:none!important;transition:none!important}#practice .v-video-cover img,#practice .v-video-progress i{animation:none!important}}

/* Fill the available width while preserving the artboard side padding. */
#practice .v-video{width:100%;max-width:none}

/* Mobile: stack the two illustrations inside the existing fixed-height artboard. */
@media(max-width:760px){
  #practice .dual-stage{
    --panel-closed-height:34px;
    --app-height:calc(100% - 42px);
    --ai-height:var(--panel-closed-height);
    flex-direction:column;
    gap:8px;
  }
  #practice .dual-stage .dual-window{
    flex:0 0 auto;
    width:100%;
    min-height:var(--panel-closed-height);
    display:grid;
    grid-template-rows:32px minmax(0,1fr);
    transition:border-color .18s;
  }
  #practice .dual-stage .dual-app{height:var(--app-height)}
  #practice .dual-stage .dual-automation{height:var(--ai-height)}
  #practice .dual-stage .dual-window-title{
    height:32px;
    padding:0 11px;
    gap:7px;
    font-size:11px;
    line-height:1.3;
    cursor:pointer;
  }
  html[lang=ar] #practice .dual-stage .dual-window-title{font-size:13px}
  #practice .dual-stage .dual-window-dot{display:block}
  #practice .dual-stage .dual-window-toggle{font-size:15px}
  #practice .dual-stage .dual-window-title[aria-pressed=true]{color:var(--neutral-950)}
  #practice .dual-stage .dual-window-body{height:100%;min-height:0;padding:0;overflow:hidden}
  #practice .dual-stage .dual-illustration{width:100%;height:100%;padding:5px}
  #practice .dual-stage .dual-illustration *{animation:none!important}
  #practice .dual-stage .app-pointer,#practice .dual-stage .flow-pulse{display:none}
}