#visar-paper-v2 .scene{position:relative;aspect-ratio:1.5;overflow:hidden;color:var(--foreground)}
#visar-paper-v2 .sheet{position:absolute;inset:0;background:var(--muted);opacity:.65}
#visar-paper-v2 .raster{position:absolute;inset:0;background-image:linear-gradient(90deg,color-mix(in srgb,var(--foreground) 10%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--foreground) 10%,transparent) 1px,transparent 1px);background-size:24px 24px;opacity:.8}
#visar-paper-v2 .drawing{position:absolute;inset:14% 7% 22%;transform:rotate(-3deg) scale(1.05)}
#visar-paper-v2 svg{width:100%;height:100%;overflow:visible}
#visar-paper-v2 .pencil{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
#visar-paper-v2 .finish{fill:currentColor;opacity:0}
#visar-paper-v2 .guides{stroke:currentColor;stroke-width:2;opacity:.18;fill:none}

.vw-iphone-frame { position: relative; overflow: hidden; border-radius: 8px; scroll-margin-top: 100px; }
.vw-iphone-frame > img { display: block; width: 100%; height: auto; }
.vw-iphone-screen { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 393 / 852; transform-origin: 0 0; border-radius: 10.5% / 4.85%; overflow: hidden; visibility: hidden; pointer-events: none; background: #000; }
.vw-iphone-screen.is-ready { visibility: visible; }
.vw-iphone-screen::after { content: ''; position: absolute; width: 29%; height: 2.2%; top: 2.5%; left: 35.5%; background: #070707; border-radius: 100px; }
.vw-iphone-logo { position: absolute; width: 70%; height: 18.3%; top: 40.85%; left: 15%; visibility: hidden; }
.vw-iphone-logo.is-ready { visibility: visible; }
.vw-process { border-radius: 8px; overflow: hidden; }
.vw-process #visar-paper-v2 .scene { background: #fff; aspect-ratio: 2 / 1; }
.vw-process #visar-paper-v2 .sheet { background: #fff; }
.vw-process #visar-paper-v2 .raster {
  background-image:
    linear-gradient(90deg, rgba(60, 80, 100, .18) 1px, transparent 1px),
    linear-gradient(rgba(60, 80, 100, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 80, 100, .09) 1px, transparent 1px),
    linear-gradient(rgba(60, 80, 100, .09) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center;
}
.vw-process #visar-paper-v2 .guides { stroke-width: 5; }
.vw-process #visar-paper-v2 .drawing { inset: 25% 22% 30%; }
@media (min-width: 901px) {
 .visar-case .case-main > .case-chapter-lead { margin-top: 112px; }
}

.case-main { --foreground: #111; --muted: #eeeae3; }
.vw-cap-outro { grid-column: 1 / -1; grid-row: 3; width: 100%; margin-top: 48px; order: 7; }
.visar-case .case-end { grid-row: 4; order: 8; }
@media (max-width: 600px) {
 .vw-cap-outro { width: 100%; max-width: 520px; margin: 24px auto 0; }
 .vw-process #visar-paper-v2 .scene { aspect-ratio: 1.65; }
}