/* Real viliv student web UI, presented with isolated example content. */
.viliv-exhibit{position:relative;width:100%;min-width:0;flex-shrink:0;align-self:stretch;aspect-ratio:1.45;margin:0;overflow:hidden;border-radius:12px;background:#1c222b;display:flex;align-items:center;justify-content:center}
.viliv-exhibit__web{position:absolute;left:5%;bottom:10%;width:78%;padding:1%;background:#111419;border:1px solid #818998;border-radius:9px;box-shadow:0 18px 34px #0006}
.viliv-exhibit__phone{position:absolute;right:4%;top:7%;width:22%;padding:.65%;background:#14181e;border:1px solid #8992a0;border-radius:14px;box-shadow:0 14px 28px #0009}
.viliv-exhibit__web img,.viliv-exhibit__phone img{display:block;width:100%;height:auto;border-radius:4px}
.viliv-exhibit a:focus-visible{outline:3px solid #aabaff;outline-offset:4px}
.viliv-screens{display:grid;gap:60px;margin-top:48px}
.viliv-screen-feature{display:grid;gap:16px}
.viliv-screen-feature h3{font-size:clamp(21px,2vw,27px);line-height:1.35}
.viliv-screen-feature p{color:var(--muted);max-width:68ch;line-height:1.7}
.viliv-screen-link{display:block;overflow:hidden;border-radius:9px;background:#f8f9fb;box-shadow:0 16px 36px #0005}
.viliv-screen-link img{display:block;width:100%;height:auto}
.viliv-phone-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.viliv-phone-pair figure{margin:0;min-width:0}
.viliv-phone-pair .viliv-screen-link{max-width:390px;margin-inline:auto}
.viliv-phone-pair figcaption{margin-top:14px;color:var(--muted);font-size:14px;line-height:1.6}
@media(max-width:700px){.viliv-exhibit{aspect-ratio:1.28}.viliv-exhibit__web{width:82%;left:3%;bottom:13%}.viliv-exhibit__phone{width:26%;right:3%;top:8%}.viliv-phone-pair{gap:12px}.viliv-screens{gap:40px}}

/* A visual, high-level representation of the two analysis paths. */
.viliv-upload-shot{width:min(100%,600px);justify-self:start}
.viliv-ai-intro{max-width:65ch;color:var(--muted);font-size:18px;line-height:1.85}
.viliv-pipeline{margin-top:40px;padding:clamp(24px,4vw,48px);border-radius:12px;background:#1a1f27;overflow:hidden}
.viliv-pipeline__source{display:flex;align-items:center;gap:16px;color:var(--ink)}
.viliv-pipeline__source strong,.viliv-pipeline__finish strong{display:block;font-size:20px;font-weight:600}
.viliv-pipeline__source span:not(.viliv-source-mark){display:block;margin-top:3px;color:#bcc5d5;font-size:14px}
.viliv-source-mark,.viliv-finish-mark{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:10px;background:#303b50;color:#d6e0ff}
.viliv-source-mark svg,.viliv-finish-mark svg{width:30px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.viliv-pipeline__branches{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin:28px 0;padding-top:28px}
.viliv-pipeline__branches::before{content:"";position:absolute;top:0;left:28px;right:25%;height:28px;border-left:1px solid #6d7c98;border-top:1px solid #6d7c98;border-right:1px solid #6d7c98}
.viliv-pipeline__branch{position:relative;min-width:0;padding:24px;border-radius:8px;background:#242b36}
.viliv-branch-head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:72px}
.viliv-branch-head h3{font-size:20px;font-weight:600;line-height:1.4}
.viliv-branch-head p{margin-top:5px;color:#bdc6d5;font-size:14px;line-height:1.5}
.viliv-capabilities,.viliv-text-outputs{list-style:none;padding:0;margin:22px 0 0}
.viliv-capabilities li{display:grid;grid-template-columns:1fr;gap:3px;padding:11px 0;border-top:1px solid #485364}
.viliv-capabilities strong{font-size:15px;font-weight:600;color:#e9edf6}.viliv-capabilities span{font-size:13px;line-height:1.5;color:#bec7d6}
.viliv-audio-wave{display:flex;align-items:center;gap:3px;height:45px;flex:none}
.viliv-audio-wave i{display:block;width:3px;height:12px;background:#9cacce;border-radius:3px;transform-origin:center}
.viliv-audio-wave i:nth-child(4n+1){height:20px}.viliv-audio-wave i:nth-child(4n+2){height:36px}.viliv-audio-wave i:nth-child(4n+3){height:26px}
.viliv-text-outputs{display:grid;gap:8px}
.viliv-text-outputs li{padding:11px 13px;border-radius:5px;background:#303a4b;color:#e9edf6;font-size:14px;line-height:1.4}
.viliv-pipeline__finish{display:flex;align-items:center;gap:16px;padding-top:4px;color:var(--ink)}
.viliv-pipeline__finish p{margin:4px 0 0;color:#bdc6d5;font-size:14px;line-height:1.5}
.viliv-finish-mark{width:48px;height:48px;background:#d8e0f7;color:#202c41}
.viliv-finish-mark svg{width:25px}
.viliv-pipeline__note{margin-top:28px;padding-top:20px;border-top:1px solid #47505f;color:#c8d0dd;font-size:15px;line-height:1.7}
.viliv-pipeline[data-in-view="true"] .viliv-audio-wave i{animation:viliv-wave 2s ease-in-out infinite}
.viliv-pipeline[data-in-view="true"] .viliv-audio-wave i:nth-child(3n){animation-delay:-.7s}
.viliv-pipeline[data-in-view="true"] .viliv-audio-wave i:nth-child(3n+1){animation-delay:-1.3s}
@keyframes viliv-wave{0%,100%{transform:scaleY(.65);opacity:.65}50%{transform:scaleY(1);opacity:1}}
html[data-motion="off"] .viliv-pipeline *,html[data-motion="off"] .viliv-pipeline *::after{animation:none!important}
@media(prefers-reduced-motion:reduce){.viliv-pipeline *,.viliv-pipeline *::after{animation:none!important}}
@media(max-width:700px){.viliv-pipeline{padding:24px}.viliv-pipeline__branches{grid-template-columns:1fr;gap:12px;padding-top:20px;margin:20px 0}.viliv-pipeline__branches::before{height:20px;right:auto;width:1px;border-right:0;border-top:0}.viliv-pipeline__branch{padding:20px}.viliv-branch-head h3{font-size:18px}.viliv-upload-shot{width:min(100%,520px)}}
.viliv-pipeline__branches{padding-bottom:28px}
.viliv-pipeline__branches::after{content:"";position:absolute;bottom:0;left:28px;right:25%;height:28px;border-left:1px solid #6d7c98;border-bottom:1px solid #6d7c98;border-right:1px solid #6d7c98}
@media(max-width:700px){.viliv-pipeline__branches{padding-bottom:20px}.viliv-pipeline__branches::after{height:20px;right:auto;width:1px;border-bottom:0;border-right:0}}
/* The paired panels make the purpose of the visual-processing motion explicit. */
.viliv-compare{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);align-items:center;gap:10px;margin-top:20px}
.viliv-compare__item{min-width:0;color:#c5cede;font-size:12px;line-height:1.5}
.viliv-compare__item>span{display:block;margin-top:8px}
.viliv-compare__arrow{width:20px;fill:none;stroke:#aebcda;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.viliv-board{position:relative;aspect-ratio:1.8;border:1px solid #6e819e;border-radius:5px;background:#1c2d31;overflow:hidden}
.viliv-board__line{position:absolute;left:11%;height:3%;border-radius:2px;background:#b8c6ce;opacity:.8}
.viliv-board__line:nth-child(1){top:25%;width:52%}.viliv-board__line:nth-child(2){top:43%;width:68%}.viliv-board__line:nth-child(3){top:61%;width:45%}
.viliv-board__person{position:absolute;right:19%;bottom:0;width:18%;height:50%;border-radius:45% 45% 0 0;background:#b6c2d1}
.viliv-board__person::before{content:"";position:absolute;left:20%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:#b6c2d1}
.viliv-board__scan{position:absolute;inset:0;background:#d6e3ff;opacity:0;transform:scaleX(0);transform-origin:left}
.viliv-pipeline[data-in-view="true"] .viliv-board__scan{animation:viliv-board-scan 5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes viliv-board-scan{0%,15%{opacity:0;transform:scaleX(0)}30%{opacity:.24}55%,100%{opacity:0;transform:scaleX(1)}}
.viliv-progress-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.viliv-progress-pair figure{min-width:0;margin:0}
.viliv-progress-pair figcaption{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.6}
@media(max-width:700px){.viliv-progress-pair{gap:12px}.viliv-progress-pair figcaption{font-size:13px}}
/* Keep the comparison in the original compact position beside the heading. */
.viliv-branch-head .viliv-compare{flex:none;width:clamp(126px,15vw,176px);grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);gap:4px;margin:0}
.viliv-branch-head .viliv-compare__arrow{width:12px}
.viliv-branch-head .viliv-compare__item{font-size:10px;white-space:nowrap}
.viliv-branch-head .viliv-compare__item>span{margin-top:4px}
@media(max-width:700px){.viliv-branch-head .viliv-compare{width:126px}.viliv-branch-head .viliv-compare__item{font-size:9px}}

@media(max-width:380px){.viliv-branch-head{gap:8px}.viliv-branch-head>div:first-child{flex:1;min-width:0}.viliv-branch-head .viliv-compare{width:100px;gap:3px;grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr)}.viliv-branch-head .viliv-compare__arrow{width:10px}.viliv-branch-head .viliv-compare__item{font-size:8px}.viliv-audio-wave{width:68px;gap:2px;overflow:hidden}.viliv-audio-wave i{width:2px;flex:none}}

/* Keep each stage and its real product screens together. */
.development-steps .viliv-step-screens{grid-column:1 / -1;display:grid;gap:48px;min-width:0}
.viliv-screen-feature h4{font-size:clamp(20px,2vw,25px);line-height:1.35;font-weight:550}
.viliv-branch-head .viliv-compare__item{font-size:11px}
.story-nav a[aria-current="location"]{color:var(--ink)}
@media(max-width:700px){
  .development-steps .viliv-step-screens{gap:36px}
  .story-nav{position:sticky;top:0;z-index:10;justify-content:flex-start;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;background:#111317;margin-inline:calc(-1 * var(--viliv-nav-bleed, 0px));padding-inline:var(--viliv-nav-bleed, 0px)}
  .story-nav::-webkit-scrollbar{display:none}
  .story-nav a{flex:none;white-space:nowrap;min-height:52px;border-bottom:2px solid transparent}
  .story-nav a[aria-current="location"]{border-bottom-color:#d0d9ff}
  .case-page .story-section{scroll-margin-top:68px}
  .viliv-branch-head .viliv-compare__item{font-size:11px}
}
@media(max-width:380px){.viliv-branch-head .viliv-compare__item{font-size:10px}}