@property --wd-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }


.wd-hero { position: relative; z-index: 2; overflow: clip; padding: clamp(118px, 16svh, 150px) var(--m) clamp(40px, 6svh, 64px); color: var(--ink);
  background-color: var(--bone); background-image: radial-gradient(rgba(17, 17, 17, .14) 1px, transparent 1.3px); background-size: 22px 22px; }
.wd-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 22% 40%, var(--bone) 30%, rgba(239, 235, 227, 0) 75%); }
.wd-hero-in { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.wd-hero h1 { margin: 0; font: 400 clamp(52px, 6.3vw, 116px)/.92 var(--display); letter-spacing: -.015em; }
.wd-hero .lead { color: #3d3a34; max-width: 26em; }
.wd-hero .acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 4svh, 40px); }
.wd-hero .pill.k, .wd-hero .pill.alt { box-shadow: none; }

.wd-cv { margin: 0; position: relative; }
.wd-cv-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px 22px; }
.wd-tick { display: flex; gap: 2px; margin: 0; padding: 4px; list-style: none; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.wd-tick li { position: relative; padding: 8px 13px; border-radius: 999px; font: 500 13px/1 var(--body); color: #8a857b; transition: background-color .5s var(--glide), color .5s; }
.wd-tick li.done { color: var(--ink); }
.wd-tick li.on { background: var(--blue); color: var(--bone); }
.wd-again { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--ink); font: 500 13px/1 var(--body); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s, background-color .3s; }
.wd-again svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wd-again:hover { background: #fff; }
.wd-cv.done .wd-again { opacity: 1; visibility: visible; transition: opacity .5s, background-color .3s; }

.wd-board { position: relative; padding: 22px 0 0 22px; transform: perspective(1800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--glide); }
.wd-ruler { position: absolute; pointer-events: none; transition: opacity .8s; }
.wd-ruler.x { left: 22px; right: 0; top: 0; height: 16px; border-bottom: 1px solid rgba(17, 17, 17, .2);
  background: repeating-linear-gradient(90deg, rgba(17, 17, 17, .3) 0 1px, transparent 1px 10px) left bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(17, 17, 17, .45) 0 1px, transparent 1px 50px) left bottom / 100% 11px no-repeat; }
.wd-ruler.y { top: 22px; bottom: 0; left: 0; width: 16px; border-right: 1px solid rgba(17, 17, 17, .2);
  background: repeating-linear-gradient(180deg, rgba(17, 17, 17, .3) 0 1px, transparent 1px 10px) right top / 5px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(17, 17, 17, .45) 0 1px, transparent 1px 50px) right top / 11px 100% no-repeat; }
.wd-cv.s5 .wd-board > .wd-ruler { opacity: .35; }

.wd-win { position: relative; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 60px 110px -50px rgba(17, 17, 17, .45); }
.wd-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 12px 12px 0 0; background: #e9e5dc; color: #6b675e; font: 500 12px/1 var(--body); }
.wd-bar i, .wd-flip .bar i, .wd-desk .bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3cdc0; }
.wd-bar span { margin: 0 auto; padding: 6px 16px; border-radius: 999px; background: var(--bone); }
.wd-pw { position: relative; }
.wd-page { position: relative; aspect-ratio: 1100 / 720; overflow: hidden; border-radius: 0 0 12px 12px; background: #fff; container-type: inline-size; }

.wd-grid { position: absolute; inset: 0 4.4%; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.6%; pointer-events: none; transition: opacity .8s; }
.wd-grid i { background: rgba(31, 43, 214, .07); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--glide); transition-delay: calc(var(--k, 0) * 40ms); }
.wd-cv.s1 .wd-grid i { transform: none; }
.wd-cv.s3 .wd-grid { opacity: .45; }
.wd-cv.s5 .wd-grid { opacity: 0; }

.wd-mock { position: absolute; inset: 0; transition: background-color .9s; }
.wd-cv.s3 .wd-mock { background: #f1f0ee; }
.wd-mock .e { position: absolute; display: block; border: 1px solid rgba(17, 17, 17, .3); border-radius: 4px; background: rgba(17, 17, 17, .035); opacity: 0; transform: scale(.82); transform-origin: 0 0;
  transition: opacity .45s, transform .75s var(--pop), background-color .8s, border-color .8s; transition-delay: calc(var(--k, 0) * 70ms); }
.wd-cv.s1 .e { opacity: 1; transform: none; }
.wd-cv.s2 .e:not(.e-book):not(.e-b1):not(.e-b2):not(.e-img):not(.e-rule) { border-color: transparent; background: transparent; transition-delay: 0s; }
.e-logo { left: 4.4%; top: 3%; width: 13.5%; height: 4.8%; }
.e-nav { left: 58%; top: 3.6%; width: 19.5%; height: 3.6%; }
.e-book { left: 79.6%; top: 2.2%; width: 9.3%; height: 6.1%; border-radius: 99px !important; }
.e-menu { left: 88.8%; top: 3.6%; width: 6.5%; height: 3.6%; }
.e-kick { left: 4.4%; top: 13.9%; width: 24%; height: 2.6%; }
.e-h1 { left: 4.4%; top: 19%; width: 41.5%; height: 33%; }
.e-p { left: 4.4%; top: 53.9%; width: 31%; height: 10.6%; }
.e-b1 { left: 4.4%; top: 68.6%; width: 20%; height: 8.3%; border-radius: 99px !important; }
.e-b2 { left: 25.5%; top: 68.6%; width: 18.4%; height: 8.3%; border-radius: 99px !important; }
.e-rule { left: 4.4%; top: 81.2%; width: 91%; height: 0; border-width: 1px 0 0 !important; border-radius: 0 !important; background: none !important; }
.e-f { top: 84.7%; width: 13.5%; height: 12%; }
.e-f1 { left: 4.4%; } .e-f2 { left: 19.8%; } .e-f3 { left: 35.4%; } .e-f4 { left: 50.8%; }
.e-img { left: 55%; top: 33.3%; width: 36%; height: 66.7%; overflow: hidden; }

.wd-mock .t { display: flex; align-items: center; width: 100%; height: 100%; color: #0f1d29; font: 500 1.3cqw/1.2 var(--body);
  opacity: 0; transform: translateY(40%); transition: opacity .5s, transform .8s var(--pop), color .8s; transition-delay: calc(var(--k, 0) * 60ms); }
.wd-cv.s2 .t { opacity: 1; transform: none; }
.e-logo .t { gap: .35em; font: 600 2.3cqw/1 var(--body); letter-spacing: -.04em; }
.e-logo svg { width: 2.5cqw; height: 2.5cqw; fill: none; stroke: currentColor; stroke-width: 1.8; transition: color .8s; }
.e-nav .t { justify-content: flex-end; font-size: 1.35cqw; }
.e-book .t, .e-b1 .t, .e-b2 .t { justify-content: center; font: 600 1.45cqw/1 var(--body); }
.e-menu .t { justify-content: flex-end; font-size: 1.35cqw; font-weight: 600; }
.e-kick .t { font: 600 1.15cqw/1 var(--body); }
.e-h1 .t { align-items: flex-start; font: 600 7.25cqw/.99 var(--body); letter-spacing: -.06em; }
.e-p .t { align-items: flex-start; font: 400 1.55cqw/1.6 var(--body); color: #4d5862; }
.e-f .t { flex-direction: column; align-items: flex-start; gap: .55em; font: 600 1.4cqw/1.2 var(--body); }
.e-f u { width: 2.1cqw; height: 2.1cqw; border: 1.5px solid currentColor; border-radius: 4px; transition: color .8s; }
.wd-cv.s3 .e-book, .wd-cv.s3 .e-b1 { background: #0f1d29; border-color: #0f1d29; }
.wd-cv.s3 .e-book .t, .wd-cv.s3 .e-b1 .t { color: #fff; }
.wd-cv.s3 .e-b2 { background: #ece4d8; border-color: #ece4d8; }
.wd-cv.s3 .e-kick .t, .wd-cv.s3 .e-logo svg, .wd-cv.s3 .e-f u { color: #2b8fd8; }
.e-img .x { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(17, 17, 17, .22); stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity .5s; }
.e-img img { position: absolute; max-width: none; width: 277.78%; height: auto; left: -152.78%; top: -50%; opacity: 0; transform: scale(1.18); clip-path: inset(100% 0 0 0);
  transition: opacity .6s, transform 1.4s var(--glide), clip-path 1.1s var(--heavy); }
.wd-cv.s4 .e-img { border-color: transparent; background: transparent; }
.wd-cv.s4 .e-img .x { opacity: 0; }
.wd-cv.s4 .e-img img { opacity: 1; transform: none; clip-path: inset(0); }

.wd-real { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--heavy); }
.wd-cv.s5 .wd-real { clip-path: inset(0); }
.wd-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--blue); opacity: 0; }
.wd-cv.s5 .wd-scan { animation: wd-scan 1.4s var(--heavy) forwards; }
@keyframes wd-scan { 0% { transform: translateX(0); opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(100cqw); opacity: 0; } }

.wd-pal { position: absolute; left: 46%; top: 60%; display: flex; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  opacity: 0; transform: translateY(10px) scale(.92); transform-origin: 0 100%; transition: opacity .4s, transform .6s var(--pop); pointer-events: none; }
.wd-pal i { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12); }
.wd-pal i:nth-child(1) { background: #0f1d29; } .wd-pal i:nth-child(2) { background: #ece4d8; } .wd-pal i:nth-child(3) { background: #2b8fd8; }
.wd-pal i:nth-child(4) { background: #f1f0ee; } .wd-pal i:nth-child(5) { background: #4d5862; }
.wd-cv.s3:not(.s4) .wd-pal { opacity: 1; transform: none; }

.wd-sel { position: absolute; border: 1.5px solid var(--blue); opacity: 0; pointer-events: none;
  transition: left .9s var(--glide), top .9s var(--glide), width .9s var(--glide), height .9s var(--glide), opacity .4s; }
.wd-sel.on { opacity: 1; }
.wd-sel i { position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid var(--blue); }
.wd-sel i:nth-child(1) { left: -5px; top: -5px; } .wd-sel i:nth-child(2) { right: -5px; top: -5px; }
.wd-sel i:nth-child(3) { left: -5px; bottom: -5px; } .wd-sel i:nth-child(4) { right: -5px; bottom: -5px; }
.wd-sel span { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); padding: 3px 7px; border-radius: 4px; background: var(--blue); color: #fff;
  font: 500 11px/1.2 var(--body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wd-cur { position: absolute; left: 78%; top: 92%; display: flex; align-items: flex-start; opacity: 0; pointer-events: none;
  transition: left 1.1s var(--glide), top 1.1s var(--glide), opacity .5s; }
.wd-cur.on { opacity: 1; }
.wd-cur svg { width: 22px; height: 22px; fill: var(--ink); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.wd-cur span { margin: 16px 0 0 -4px; padding: 4px 8px; border-radius: 3px 10px 10px 10px; background: var(--stop); color: #fff; font: 500 11px/1 var(--body); }
.wd-cv figcaption { margin: 14px 0 0 22px; color: #6b675e; font-size: 14px; }

.wd-facts { max-width: var(--wide); margin: clamp(36px, 6svh, 64px) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.wd-facts li { padding: 18px 20px 0 0; }
.wd-facts li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.wd-facts b { display: block; font: 400 clamp(17px, 1.3vw, 20px)/1.2 var(--display); font-weight: 400; }
.wd-facts span { display: block; margin-top: 6px; color: var(--mute); font-size: 15px; }


.wd-wg { position: relative; z-index: 2; height: 560vh; color: var(--ink); background-color: #e7e2d8;
  background-image: radial-gradient(rgba(17, 17, 17, .12) 1px, transparent 1.3px); background-size: 22px 22px; }
.wd-wg-in { position: sticky; top: 0; height: 100svh; min-height: 680px; max-width: calc(var(--wide) + 2 * var(--m)); margin: 0 auto; padding: 100px var(--m) 40px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto repeat(6, auto); column-gap: clamp(32px, 5vw, 96px); align-content: center; }
.wd-wg-head { grid-column: 1; margin-bottom: 22px; }
.wd-wg h2 { margin: 0; font: 400 clamp(34px, 3.5vw, 58px)/1 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.wd-wg .intro { max-width: 28em; margin: 16px 0 0; color: var(--mute); font-size: 17px; }
.wd-item { grid-column: 1; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); opacity: .4; transition: opacity .5s; }
.wd-item:last-of-type { border-bottom: 1px solid var(--line); }
.wd-item.on { opacity: 1; }
.wd-item .n { padding-top: 5px; color: var(--mute); font: 500 13px/1 var(--body); letter-spacing: .1em; transition: color .5s; }
.wd-item.on .n { color: var(--stop); }
.wd-item h3 { margin: 0; font: 400 clamp(18px, 1.4vw, 22px)/1.2 var(--display); }
.wd-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--glide); }
.wd-p p { overflow: hidden; margin: 0; color: var(--mute); font-size: 16px; line-height: 1.5; }
.wd-p p::before { content: ""; display: block; height: 8px; }
.wd-item.on .wd-p { grid-template-rows: 1fr; }
.wd-p a { color: var(--blue); text-underline-offset: 3px; }

.wd-art { grid-column: 2; grid-row: 1 / -1; align-self: center; position: relative; padding: 22px 0 0 22px; }
.wd-art-in { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .1); }
.wd-art-in > .wd-ruler.x { left: 0; top: -22px; right: 0; }
.wd-art-in > .wd-ruler.y { top: 0; left: -22px; bottom: 0; }
.st { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.st.on { opacity: 1; visibility: visible; transition: opacity .5s; }
.st .fn { position: absolute; left: 3.5%; top: 3.5%; z-index: 3; color: #8a857b; font: 500 max(11px, 1.5cqw)/1 var(--body); }


.wire { position: absolute; inset: 12% 8% 8%; }
.wire > i { position: absolute; display: block; border: 1px solid rgba(17, 17, 17, .32); border-radius: 3px; background: rgba(17, 17, 17, .035);
  opacity: 0; transform: scale(.85); transform-origin: 0 0; transition: opacity .4s, transform .7s var(--pop); transition-delay: calc(var(--k, 0) * 80ms); }
.w-nav { left: 0; top: 0; width: 100%; height: 7%; }
.w-h { left: 0; top: 16%; width: 46%; height: 8%; } .w-h.s { top: 27%; width: 32%; }
.w-btn { left: 0; top: 40%; width: 18%; height: 7%; border-radius: 99px !important; border-color: var(--blue) !important; }
.w-img { left: 54%; top: 16%; width: 46%; height: 38%; }
.w-c { top: 62%; width: 31%; height: 20%; } .w-c.c1 { left: 0; } .w-c.c2 { left: 34.5%; } .w-c.c3 { left: 69%; }
.w-book { left: 60%; top: 87%; width: 40%; height: 10%; border-radius: 99px !important; border-color: var(--blue) !important; background: rgba(31, 43, 214, .08) !important; }
.wire .cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2%; pointer-events: none; }
.wire .cols i { background: rgba(31, 43, 214, .07); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--glide); transition-delay: calc(300ms + var(--k, 0) * 35ms); }
.wire .route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wire .route path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--heavy) .9s; }
.wire .dot { position: absolute; left: 9%; top: 43.7%; width: 2.6cqw; height: 1.9cqw; margin: -.95cqw 0 0 -1.3cqw; border-radius: 3px; background: var(--stop); opacity: 0; transition: opacity .3s .9s; }
.wire .tag { position: absolute; padding: .7cqw 1.2cqw; border-radius: 99px; background: var(--ink); color: var(--bone); font: 500 max(10px, 1.35cqw)/1 var(--body); font-style: normal;
  opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .4s, transform .6s var(--pop); }
.wire .t1 { left: 20%; top: 41%; transition-delay: 1s; } .wire .t2 { left: 44%; top: 56%; transition-delay: 1.8s; } .wire .t3 { left: 84%; top: 74%; transition-delay: 2.7s; }
.st-layout.on .wire > i { opacity: 1; transform: none; }
.st-layout.on .cols i { transform: none; }
.st-layout.on .route path { stroke-dashoffset: 0; }
.st-layout.on .dot { opacity: 1; }
.st-layout.on .tag { opacity: 1; transform: none; }


.chips { position: absolute; left: 50%; top: 13%; width: 0; height: 56%; }
.chips i { position: absolute; left: -9cqw; bottom: 0; width: 18cqw; height: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  transform-origin: 50% 135%; transform: translateY(14%) rotate(0); opacity: 0; transition: transform 1.1s var(--pop), opacity .4s; transition-delay: calc(var(--k, 0) * 90ms); }
.chips b { display: block; height: 64%; margin: 7%; border-radius: 5px; }
.chips .c1 b { background: #1F2BD6; } .chips .c2 b { background: #EFEBE3; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .1); } .chips .c3 b { background: #111; }
.chips .c4 b { background: #FF5A1F; } .chips .c5 b { background: #1F4A3A; }
.chips span { display: block; padding: 0 8%; font: 400 1.75cqw/1.1 var(--display); }
.chips small { display: block; margin-top: .5cqw; color: var(--mute); font: 500 1.2cqw/1 var(--body); }
.st-palette.on .chips i { opacity: 1; }
.st-palette.on .chips .c1 { transform: rotate(-26deg); } .st-palette.on .chips .c2 { transform: rotate(-13deg); } .st-palette.on .chips .c3 { transform: rotate(0); }
.st-palette.on .chips .c4 { transform: rotate(13deg); } .st-palette.on .chips .c5 { transform: rotate(26deg); }
.spec { position: absolute; left: 6%; bottom: 6%; display: flex; align-items: flex-end; gap: 2cqw; opacity: 0; transform: translateY(20px); transition: opacity .5s .6s, transform .9s var(--glide) .6s; }
.spec b { font: 400 10cqw/.8 var(--display); }
.spec span { padding-bottom: .4cqw; font: 400 1.8cqw/1.1 var(--display); }
.spec small { display: block; margin-top: .6cqw; color: var(--mute); font: 400 1.4cqw/1 var(--body); }
.st-palette .note { position: absolute; right: 5%; bottom: 7%; margin: 0; color: #8a857b; font: 500 max(10px, 1.3cqw)/1 var(--body); }
.st-palette.on .spec { opacity: 1; transform: none; }


.st-screens .dv { position: absolute; overflow: hidden; background: #fff; opacity: 0; transform: translateY(12%); transition: opacity .5s, transform 1s var(--glide); transition-delay: calc(var(--k, 0) * 140ms); }
.st-screens .dv img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.dv.lap { left: 5%; top: 17%; width: 62%; aspect-ratio: 1100 / 720; border: 1.1cqw solid #1b1b1d; border-radius: 1.6cqw 1.6cqw .6cqw .6cqw; overflow: visible; }
.dv.lap::after { content: ""; position: absolute; left: -9%; right: -9%; top: 100%; height: 2.4cqw; margin-top: 1.1cqw; border-radius: 0 0 2.4cqw 2.4cqw; background: #cfc9bd; }
.dv.lap img { border-radius: .4cqw; }
.dv.tab { left: 58%; top: 30%; width: 25%; aspect-ratio: 3 / 4; border: 1.1cqw solid #1b1b1d; border-radius: 2.4cqw; }
.dv.ph { left: 80%; top: 41%; width: 14%; aspect-ratio: 393 / 852; border: .8cqw solid #1b1b1d; border-radius: 2.6cqw; }
.st-screens.on .dv { opacity: 1; transform: none; }


.graph { position: absolute; left: 9%; top: 13%; width: 58%; aspect-ratio: 3 / 2; }
.graph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.graph .ax { stroke: rgba(17, 17, 17, .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.graph .cv { stroke: var(--blue); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--heavy) .2s; }
.graph .ball { position: absolute; left: 6.7%; top: 90%; width: 3.4cqw; height: 2.5cqw; margin: -1.25cqw 0 0 -1.7cqw; border-radius: 4px; background: var(--stop); opacity: 0; transition: opacity .3s 1.4s; }
.graph .lab { position: absolute; left: 6.7%; top: 102%; color: var(--mute); font: 500 max(10px, 1.5cqw)/1 var(--body); font-style: normal; }
.graph .ghost { position: absolute; width: 1.6cqw; height: 1.2cqw; margin: -.6cqw 0 0 -.8cqw; border-radius: 2px; background: var(--stop); opacity: 0; transform: scale(.4);
  transition: opacity .4s, transform .6s var(--pop); transition-delay: calc(.4s + var(--k, 0) * 110ms); }
.st-motion.on .graph .ghost { opacity: .28; transform: none; }
.graph::before { content: "Time"; position: absolute; right: 0; top: 102%; color: #8a857b; font: 500 max(10px, 1.3cqw)/1 var(--body); }
.graph::after { content: "Distance"; position: absolute; left: 0; top: -4%; color: #8a857b; font: 500 max(10px, 1.3cqw)/1 var(--body); transform: translateX(-30%); }
.st-motion.on .graph .cv { stroke-dashoffset: 0; }
.st-motion.on .graph .ball { opacity: 1; }
.st-motion .demo { position: absolute; right: 7%; bottom: 13%; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.8cqw 3cqw; border-radius: 99px; background: var(--blue); color: var(--bone);
  font: 400 2.2cqw/1 var(--display); opacity: 0; transform: translateY(20px); transition: opacity .5s .5s, transform .9s var(--pop) .5s; }
.st-motion .demo i { font-style: normal; display: inline-block; }
.st-motion.on .demo { opacity: 1; transform: none; }
.st-motion.on .demo i { animation: wd-nudge 1.8s var(--heavy) 1.4s infinite; }
@keyframes wd-nudge { 0%, 30%, 100% { transform: none; } 55%, 80% { transform: translateX(1.2cqw) rotate(-45deg); } }


.st-search .sb { position: absolute; left: 8%; right: 8%; top: 17%; height: 13%; display: flex; align-items: center; gap: 1.6cqw; padding: 0 3cqw; border: .45cqw solid transparent; border-radius: 99px;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--wd-a), #4285f4, #34a853, #fbbc05, #ea4335, #4285f4) border-box; color: var(--ink); font: 400 2.5cqw/1 var(--body); }
.st-search .sb::after { content: ""; position: absolute; inset: -.45cqw; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--wd-a), #4285f4, #34a853, #fbbc05, #ea4335, #4285f4); filter: blur(2.4cqw); opacity: .45; }
.st-search.on .sb, .st-search.on .sb::after { animation: wd-spin 5s linear infinite; }
@keyframes wd-spin { to { --wd-a: 360deg; } }
.st-search .sb svg { flex: none; width: 2.8cqw; height: 2.8cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.st-search .caret { width: 2px; height: 3cqw; margin-left: -1.2cqw; background: var(--ink); animation: wd-blink 1s steps(1) infinite; }
@keyframes wd-blink { 50% { opacity: 0; } }
.st-search .res { position: absolute; left: 8%; right: 8%; top: 40%; padding: 3.2cqw 3.4cqw; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .9s var(--glide); }
.st-search.typed .res { opacity: 1; transform: none; }
.res .site { display: flex; align-items: center; gap: 1.4cqw; font: 500 1.7cqw/1.2 var(--body); }
.res .site i { flex: none; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--blue); }
.res .site small { display: block; color: var(--mute); font-size: 1.4cqw; }
.res b { display: block; margin: 2cqw 0 1cqw; color: var(--blue); font: 500 2.6cqw/1.25 var(--body); }
.res .d { display: block; color: var(--mute); font: 400 1.75cqw/1.5 var(--body); }


.st-access .aa { position: absolute; left: 7%; top: 15%; width: 38%; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 3.4cqw; border-radius: 12px;
  background: var(--bone); opacity: 0; transform: scale(.9); transition: opacity .5s, transform .9s var(--pop); }
.st-access .aa b { font: 400 13cqw/.8 var(--display); }
.st-access .aa span { font: 400 3.2cqw/1 var(--display); }
.st-access .aa small { display: block; margin-top: .8cqw; color: var(--mute); font: 500 1.5cqw/1 var(--body); }
.st-access.on .aa { opacity: 1; transform: none; }
.checks { position: absolute; left: 53%; right: 7%; top: 15%; margin: 0; padding: 0; list-style: none; }
.checks li { display: flex; align-items: center; gap: 1.8cqw; padding: 1.9cqw 0; border-top: 1px solid var(--line); font: 400 2.5cqw/1 var(--display); opacity: 0; transform: translateX(14px);
  transition: opacity .4s, transform .7s var(--glide); transition-delay: calc(.3s + var(--k, 0) * .25s); }
.checks li::before { content: ""; flex: none; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--blue); }
.checks li::after { content: ""; position: absolute; left: 1.05cqw; top: 50%; width: 1.3cqw; height: .65cqw; margin-top: -.55cqw; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.checks li { position: relative; }
.st-access.on .checks li { opacity: 1; transform: none; }
.keys { position: absolute; left: 53%; right: 5%; top: 66%; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2cqw; opacity: 0; transition: opacity .5s 1.2s; }
.keys .kc { padding: .9cqw 1.4cqw; border: 1px solid var(--ink); border-bottom-width: 3px; border-radius: 6px; font: 500 max(10px, 1.4cqw)/1 var(--body); }
.keys i { padding: 1cqw 1.8cqw; border-radius: 99px; background: var(--bone); font: 500 max(10px, 1.45cqw)/1 var(--body); font-style: normal; }
.keys .ring { position: absolute; left: 0; top: 0; width: 0; height: 0; border: 2.5px solid var(--blue); border-radius: 99px; pointer-events: none;
  transition: transform .5s var(--glide), width .5s var(--glide); }
.st-access.on .keys { opacity: 1; }


.wd-wb { position: relative; z-index: 2; padding: clamp(96px, 15vh, 160px) var(--m); color: var(--bone); }
.wd-wb-in { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.wd-wb h2 { margin: 0 0 26px; font: 400 clamp(36px, 4.4vw, 70px)/1 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.wd-wb-copy p { margin: 0 0 1em; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.6; opacity: .92; text-wrap: pretty; }
.wd-switch { position: relative; display: inline-flex; padding: 5px; border: 1px solid var(--line-b); border-radius: 999px; background: rgba(255, 255, 255, .1); }
.wd-switch button { position: relative; z-index: 1; height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: none; color: var(--bone); font: 400 17px/1 var(--display); cursor: pointer; transition: color .5s; }
.wd-switch button[aria-pressed="true"] { color: var(--blue); }
.wd-switch .knob { position: absolute; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 999px; background: var(--bone); transition: transform .7s var(--glide), width .7s var(--glide); }
.wd-flip { position: relative; margin-top: 30px; aspect-ratio: 1100 / 750; perspective: 2200px; container-type: inline-size; }
.wd-flip .card { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; transition: transform 1.2s var(--heavy); }
.wd-flip[data-state="own"] .card { transform: rotateY(180deg); }
.wd-flip .face, .wd-flip .clone { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wd-flip .face { box-shadow: 0 60px 110px -50px rgba(5, 8, 64, .6); }
.wd-flip .ownf { transform: rotateY(180deg); }
.wd-flip .ownf img { display: block; width: 100%; height: auto; }
.wd-flip .bar { height: 4cqw; display: flex; align-items: center; gap: .8cqw; padding: 0 1.6cqw; background: #e9e5dc; }
.wd-flip .bar i { width: 1.1cqw; height: 1.1cqw; }
.tpl { position: relative; height: 100%; padding: 4% 6%; background: #f3f3f3; font-family: Arial, Helvetica, sans-serif; }
.tpl .tw { display: block; position: absolute; left: 0; right: 0; top: 17%; z-index: 1; color: #fff; text-align: center; font: 700 4.2cqw/1 Arial, Helvetica, sans-serif; }
.tpl i { display: block; background: #d6d6d6; border-radius: 2px; }
.tpl .th { height: 36%; margin: 0 -6% 5%; background: #a9a9a9 linear-gradient(160deg, #b9b9b9, #8f8f8f); }
.tpl .tl { height: 2.2cqw; width: 54%; margin: 0 auto 2%; } .tpl .tl.s { width: 38%; }
.tpl .tb { width: 16%; height: 4.4cqw; margin: 4% auto; background: #9a9a9a; border-radius: 3px; }
.tpl .tc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.tpl .tc i { aspect-ratio: 4 / 3; background: #e1e1e1; }
.wd-flip .clone { z-index: 1; opacity: .9; transform-origin: 100% 100%; transition: transform 1.1s var(--heavy), opacity .8s; }
.wd-flip .clone .tpl { padding-top: 8%; }
.wd-flip .c2 { transform: translate(3.5%, -5%) rotate(3deg) scale(.96); opacity: .75; }
.wd-flip .c3 { transform: translate(7%, -10%) rotate(6deg) scale(.92); opacity: .5; }
.wd-flip[data-state="own"] .clone { opacity: 0; transform: translate(30%, -40%) rotate(22deg) scale(.8); }
.wd-cap { margin: 22px 0 0; font-size: 16px; opacity: .85; }
.wd-flip[data-state="own"] ~ .wd-cap .a, .wd-flip[data-state="tpl"] ~ .wd-cap .b { display: none; }


.wd-ds { position: relative; z-index: 2; padding: clamp(96px, 15vh, 160px) var(--m); background: var(--bone); color: var(--ink); }
.wd-ds-head { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: end; }
.wd-ds h2 { margin: 0; font: 400 clamp(36px, 4.4vw, 70px)/1 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.wd-ds-say p { margin: 0 0 1em; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.6; text-wrap: pretty; }
.wd-ds-say p:last-child { margin: 0; }
.wd-ds-say a { color: var(--blue); text-underline-offset: 3px; }
.wd-ds-row { position: relative; max-width: var(--wide); margin: clamp(56px, 9vh, 96px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.wd-ds-path { position: absolute; left: 0; right: 0; top: 11%; width: 100%; height: 60px; z-index: 0; fill: none; overflow: visible; }
.wd-ds-path path { stroke: var(--blue); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--dash, 1); }
.ds { position: relative; z-index: 1; margin: 0; }
.ds .pg { position: relative; aspect-ratio: 1100 / 720; }
.ds .pg > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 30px 60px -32px rgba(17, 17, 17, .5); }
.ds .draft { position: absolute; left: 14px; top: -13px; padding: 6px 11px; border-radius: 99px; background: var(--stop); color: #fff; font: 500 12px/1 var(--body); }
.ds { opacity: 0; transform: translateY(50px); transition: opacity .7s, transform 1.1s var(--glide); }
.ds.d2 { transition-delay: .12s; } .ds.d3 { transition-delay: .24s; }
.wd-ds-row.a0 .ds { opacity: 1; transform: none; }
.pin { position: absolute; z-index: 2; transform: scale(0); transform-origin: 15px 15px; transition: transform .6s var(--pop); }
.pin b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; background: var(--blue); color: #fff; font: 500 14px/1 var(--body); }
.pin em { position: absolute; left: 38px; top: -2px; max-width: 15em; padding: 8px 12px; border-radius: 12px 12px 12px 3px; background: var(--ink); color: var(--bone); font: 400 13px/1.3 var(--body); font-style: normal; white-space: nowrap; }
.pin.p1 { left: 9%; top: 63%; } .pin.p2 { left: 74%; top: 18%; } .pin.p3 { left: 40%; top: 84%; }
.pin.p2 em { left: auto; right: 38px; border-radius: 12px 12px 3px 12px; }
.wd-ds-row.a1 .p1 { transform: none; } .wd-ds-row.a1 .p2 { transform: none; transition-delay: .25s; } .wd-ds-row.a1 .p3 { transform: none; transition-delay: .5s; }
.fan img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 30px 60px -32px rgba(17, 17, 17, .5); transform-origin: 50% 100%; transition: transform 1.2s var(--pop); }
.wd-ds-row.a2 .fan .f1 { transform: translate(-7%, -9%) rotate(-7deg); } .wd-ds-row.a2 .fan .f2 { transform: translate(-3%, -4%) rotate(-3deg); transition-delay: .1s; }
.wd-ds-row.a2 .fan .f3 { transform: translate(2%, 2%) rotate(3deg); transition-delay: .2s; }
.ds figcaption { margin-top: 30px; }
.ds figcaption b { color: var(--stop); font: 500 13px/1 var(--body); letter-spacing: .12em; }
.ds h3 { margin: 10px 0 8px; font: 400 clamp(21px, 1.7vw, 26px)/1.15 var(--display); }
.ds figcaption p { margin: 0; color: var(--mute); font-size: 16px; text-wrap: pretty; }


.wd-wt { position: relative; z-index: 2; overflow: clip; padding: clamp(96px, 15vh, 160px) var(--m); background: var(--ink); color: var(--bone); }
.wd-wt-head { max-width: var(--wide); margin: 0 auto; }
.wd-wt .kicker { color: var(--bone); }
.wd-wt h2 { max-width: 14ch; margin: 0; font: 400 clamp(36px, 4.6vw, 76px)/1 var(--display); letter-spacing: -.01em; }
.wd-wt .intro { max-width: 32em; margin: 20px 0 0; font-size: 19px; opacity: .8; }
.wd-trio { position: relative; max-width: var(--wide); margin: clamp(56px, 9vh, 90px) auto 0; height: clamp(520px, 50vw, 720px); }
.wd-trio figure { position: absolute; margin: 0; will-change: transform; }
.wd-trio figcaption { margin-top: 18px; font-size: 15px; opacity: .8; max-width: 26em; }
.wd-trio figcaption b { display: block; margin-bottom: 4px; font: 400 19px/1.1 var(--display); opacity: 1; }
.wd-desk { left: 0; top: 0; width: 61%; }
.wd-tab { left: 63%; top: 14%; width: 21%; }
.wd-ph { left: 86.5%; top: 30%; width: 13.5%; }
.dk { border-radius: 12px; overflow: hidden; background: #fff; transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--glide);
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .8); }
.dk .bar { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #e4dfd4; color: #5a574f; font: 500 12px/1 var(--body); }
.dk .bar span { margin: 0 auto; padding: 6px 16px; border-radius: 99px; background: var(--bone); }
.vw { position: relative; overflow: hidden; background: #fff; }
.vw img { display: block; width: 100%; height: auto; will-change: transform; }
.dk .vw { aspect-ratio: 16 / 10; }
.tb { padding: 10px; border-radius: 26px; background: #2a2a2c; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.tb .vw { aspect-ratio: 3 / 4; border-radius: 16px; }
.pf { padding: 7px; border-radius: 30px; background: #2a2a2c; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pf .vw { aspect-ratio: 393 / 852; border-radius: 24px; }
.wd-wt-acts { max-width: var(--wide); margin: clamp(40px, 6vh, 64px) auto 0; display: flex; flex-wrap: wrap; gap: 14px; }
.wd-wt .pill { box-shadow: none; }
.wd-trio.run .vw img { animation: wd-peek 18s var(--heavy) infinite alternate; }
@keyframes wd-peek { 0%, 8% { transform: none; } 92%, 100% { transform: translateY(var(--shift, 0%)); } }


@media (max-width: 1023px) {
  .wd-hero-in { grid-template-columns: 1fr; }
  .wd-hero h1 { font-size: clamp(50px, 11vw, 96px); }
  .wd-wg { height: auto; padding: clamp(84px, 12vh, 120px) var(--m); }
  .wd-wg-in { position: relative; height: auto; min-height: 0; padding: 0; display: flex; flex-direction: column; }
  .wd-art, .wd-art-in { display: contents; }
  .wd-art-in > .wd-ruler { display: none; }
  .wd-item { opacity: 1; }
  .wd-item:last-of-type { border-bottom: 0; }
  .wd-p { grid-template-rows: 1fr; }
  .st { position: relative; inset: auto; aspect-ratio: 4 / 3; margin: 6px 0 34px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .1); opacity: 1; visibility: visible; }
  .wd-wg-head { order: 0; }
  .wd-item:nth-child(2) { order: 1; } .st-layout { order: 2; } .wd-item:nth-child(3) { order: 3; } .st-palette { order: 4; }
  .wd-item:nth-child(4) { order: 5; } .st-screens { order: 6; } .wd-item:nth-child(5) { order: 7; } .st-motion { order: 8; }
  .wd-item:nth-child(6) { order: 9; } .st-search { order: 10; } .wd-item:nth-child(7) { order: 11; } .st-access { order: 12; }
  .wd-wb-in, .wd-ds-head { grid-template-columns: 1fr; }
  .wd-ds-row { grid-template-columns: 1fr; gap: 64px; }
  .wd-ds-path { display: none; }
  .wd-trio { height: auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px 24px; align-items: start; }
  .wd-trio figure { position: relative; left: auto; top: auto; width: auto; }
  .wd-desk { grid-column: 1 / -1; }
  .wd-ph { max-width: 220px; }
}
@media (max-width: 767px) {
  .wd-cv-tools { margin-left: 0; flex-wrap: wrap; }
  .wd-tick li { padding: 7px 8px; font-size: 11.5px; }
  .wd-again { height: 34px; padding: 0 12px; }
  .wd-board { padding: 14px 0 0 14px; }
  .wd-ruler.x { left: 14px; height: 10px; } .wd-ruler.y { top: 14px; width: 10px; }
  .wd-bar { height: 26px; }
  .wd-bar span { display: none; }
  .wd-sel span, .wd-pal { display: none; }
  .wd-cur svg { width: 16px; height: 16px; }
  .wd-cur span { margin-top: 12px; font-size: 10px; padding: 3px 6px; }
  .wd-cv figcaption { margin-left: 0; }
  .wd-facts { grid-template-columns: 1fr; }
  .wd-facts li, .wd-facts li + li { padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); }
  .wd-facts li:first-child { border-top: 0; }
  .wd-hero .pill { height: 56px; font-size: 18px; }
  .wd-switch button { padding: 0 18px; font-size: 16px; }
  .pin em { white-space: normal; width: max-content; max-width: 11em; font-size: 12px; }
  .pin.p1 { left: 6%; top: 56%; } .pin.p3 { left: 30%; top: 82%; }
  .wd-trio { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 16px; }
  .tb { padding: 7px; border-radius: 18px; } .tb .vw { border-radius: 11px; }
  .wd-trio figcaption { font-size: 14px; }
  .wd-trio figcaption b { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .wd-hero *, .wd-wg *, .wd-wb *, .wd-ds *, .wd-wt * { transition: none !important; animation: none !important; }
  .wd-scan { display: none; }
  .ds { opacity: 1; transform: none; }
}