.ms{gap:14px;display:grid;position:relative}.ms__scene{width:100%;aspect-ratio:var(--ar,1.1);perspective:2600px;perspective-origin:50% 32%;-webkit-user-select:none;user-select:none;position:relative;container:mst/size}.ms__rig{transform-style:preserve-3d;position:absolute;inset:0;transform:rotateX(-4deg)}.ms__rig,.ms__rig *{pointer-events:none}.ms__floor{filter:blur(12px);pointer-events:none;background:radial-gradient(closest-side,#00000042,#0000);border-radius:50%;height:16%;position:absolute;bottom:2%;left:8%;right:8%}:root[data-theme=dark] .ms__rig,.ms__rig *{pointer-events:none}.ms__floor{background:radial-gradient(closest-side,#000000b3,#0000)}.ms__bar{justify-items:center;gap:10px;display:grid}.ms__views{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--muted);flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:0;padding:0;list-style:none;display:flex}.ms__views li{transition:color .4s var(--ease);padding-bottom:6px;position:relative}.ms__views li:after{content:"";background:var(--accent);transform-origin:0;border-radius:2px;height:2px;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}.ms__views li.is-on{color:var(--ink)}.ms.is-in .ms__views li.is-on:after{animation:3.8s linear forwards ms-view}@keyframes ms-view{to{transform:scaleX(1)}}.ms__note{font-size:var(--fs-xs);color:var(--muted)}.mk{--w:200px;--x:0px;--y:0px;--z:0px;--ry:0deg;--s:1;width:var(--w);transform-style:preserve-3d;transform:translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)) rotateY(var(--ry)) scale(var(--s));transition:transform 1.1s cubic-bezier(.22,1,.36,1);position:absolute;top:50%;left:50%}.mk__body{width:100%;aspect-ratio:var(--ar);border-radius:var(--r);transform-style:preserve-3d;position:relative}.mk__layer{border-radius:inherit;background:var(--edge);transform:translateZ(calc(var(--t) * (var(--i) / 6 - .5)));position:absolute;inset:0}.mk__back{border-radius:inherit;background:var(--back,#8e9095);transform:translateZ(calc(var(--t) * -.5 - .5px)) rotateY(180deg);position:absolute;inset:0}.mk__face{border-radius:inherit;box-shadow:inset 0 0 0 calc(var(--w) * .005) #2c2c30;transform:translateZ(calc(var(--t) * .5 + .5px));background:#050506;position:absolute;inset:0}.mk__screen{inset:var(--bz);border-radius:var(--sr);background:#000;position:absolute;overflow:hidden}.mk__shot{object-fit:cover;object-position:top center;opacity:0;width:100%;height:100%;transition:opacity .7s ease, transform 1.1s var(--ease);position:absolute;inset:0;transform:scale(1.015)}.mk__shot.is-on{opacity:1;transform:none}:root[data-theme=dark] .mk__shot--light,:root:not([data-theme=dark]) .mk__shot--dark{display:none}.ms .mk__screen:after{content:"";pointer-events:none;background:#000;transition:opacity .9s .8s;position:absolute;inset:0}.ms.is-in .mk__screen:after{opacity:0}.mk__glare{pointer-events:none;background:linear-gradient(115deg,#ffffff1f,#fff0 30% 62%,#ffffff0d) 0 0/220% 100%;background-position:calc(50% - var(--gx,0) * 70%) 0;position:absolute;inset:0}.mk__ring{border-radius:inherit;pointer-events:none;position:absolute;inset:0}.mk__ring.is-on{animation:1.3s ease-out mk-ring}@keyframes mk-ring{0%{box-shadow:inset 0 0 0 3px #ff6a33f2,inset 0 0 48px #ff6a3366}to{box-shadow:inset 0 0 #ff6a3300,inset 0 0 #ff6a3300}}.mk--phone{--ar:71.5 / 149.6;--r:calc(var(--w) * .175);--t:calc(var(--w) * .11);--bz:calc(var(--w) * .034);--sr:calc(var(--w) * .135);--edge:linear-gradient(90deg, #5e6064, #c9cbcf 16%, #8a8c91 38%, #e2e3e6 60%, #7b7d82 84%, #56585c);--back:linear-gradient(160deg, #a7a49c, #8f8c85)}.mk__island{top:calc(var(--w) * .932 * .0318);width:28.41%;height:calc(var(--w) * .932 * .0826);background:#000;border-radius:999px;position:absolute;left:50%;transform:translate(-50%)}.mk--tablet{--ar:215.5 / 281.6;--r:calc(var(--w) * .085);--t:calc(var(--w) * .03);--bz:calc(var(--w) * .04);--sr:calc(var(--w) * .046);--edge:linear-gradient(90deg, #6f7176, #d6d8dc 18%, #9a9ca1 45%, #e4e5e8 70%, #6c6e73);--back:linear-gradient(160deg, #c9cacd, #a6a8ac)}.mk__cam{top:calc(var(--bz) * .42);width:calc(var(--w) * .012);height:calc(var(--w) * .012);background:#17171b;border-radius:50%;position:absolute;left:50%;transform:translate(-50%)}.mk--stand{--ar:281.6 / 215.5;--r:calc(var(--w) * .065);--t:calc(var(--w) * .023);--bz:calc(var(--w) * .03);--sr:calc(var(--w) * .035);--edge:linear-gradient(90deg, #6f7176, #d6d8dc 18%, #9a9ca1 45%, #e4e5e8 70%, #6c6e73);--back:linear-gradient(160deg, #c9cacd, #a6a8ac)}.mk--stand .mk__body{transform-origin:50% 100%;transform:rotateX(9deg)}.mk__stand{width:0;height:0;transform-style:preserve-3d;position:absolute;top:58%;left:50%}.mk__neck{left:calc(var(--w) * -.04);width:calc(var(--w) * .08);height:calc(var(--w) * .33);border-radius:calc(var(--w) * .02);transform:translateZ(calc(var(--w) * -.07));background:linear-gradient(90deg,#5f6166,#d0d2d6 45%,#8a8c91);position:absolute;top:0}.mk__foot{left:calc(var(--w) * -.21);top:calc(var(--w) * .19);width:calc(var(--w) * .42);height:calc(var(--w) * .28);box-shadow:0 0 0 calc(var(--w) * .004) #6a6c70, 0 30px 50px #00000040;transform:translateZ(calc(var(--w) * -.07)) rotateX(90deg);background:radial-gradient(at 40% 35%,#e3e4e7,#a9abaf 60%,#7d7f84);border-radius:50%;position:absolute}.mk--laptop{--ar:1 / .68;--r:calc(var(--w) * .028) calc(var(--w) * .028) calc(var(--w) * .01) calc(var(--w) * .01);--t:calc(var(--w) * .014);--bz:calc(var(--w) * .03) calc(var(--w) * .024) calc(var(--w) * .034);--sr:calc(var(--w) * .008);--edge:linear-gradient(90deg, #77797e, #cfd1d5 20%, #a4a6ab 50%, #d9dade 80%, #727479);--back:linear-gradient(160deg, #c3c5c9, #9ea0a4)}.mk--laptop .mk__body{transform-origin:50% 100%;transform:rotateX(7deg)}.mk__notch{top:calc(var(--w) * .011);width:calc(var(--w) * .008);height:calc(var(--w) * .008);background:#1d1d22;border-radius:50%;position:absolute;left:50%;transform:translate(-50%)}.mk__deck{width:102%;height:calc(var(--w) * .6);transform-origin:50% 0;transform-style:preserve-3d;position:absolute;top:100%;left:-1%;transform:rotateX(90deg)}.mk__deck-layer{border-radius:0 0 calc(var(--w) * .03) calc(var(--w) * .03);transform:translateZ(calc(var(--w) * -.006 * (var(--i) + 1)));background:linear-gradient(90deg,#6e7075,#bfc1c5 30%,#9b9da2 60%,#6a6c71);position:absolute;inset:0}.mk__deck-top{border-radius:0 0 calc(var(--w) * .03) calc(var(--w) * .03);box-shadow:inset 0 calc(var(--w) * .004) 0 #0000002e;background:linear-gradient(#c7c9cd,#b6b8bc 55%,#a8aaae);position:absolute;inset:0}.mk__keys{border-radius:calc(var(--w) * .008);background:repeating-linear-gradient(90deg,#0000 0 calc(7.14286% - 2px),#0000008c calc(7.14286% - 2px) 7.14286%),repeating-linear-gradient(0deg,#0000 0 calc(16.6667% - 2px),#0000008c calc(16.6667% - 2px) 16.6667%),#2a2a2d;height:47%;position:absolute;top:8%;left:9%;right:9%}.mk__pad{border-radius:calc(var(--w) * .012);background:linear-gradient(#bec0c4,#b1b3b7);position:absolute;inset:60% 32% 7%;box-shadow:inset 0 0 0 1px #0000001a}.mk--flat{transition:none;transform:translate(-50%,-50%)}.mk--flat .mk__body,.mk--flat .mk__face{transform:none}.mk--flat .mk__face{box-shadow:0 0 0 calc(var(--w) * .006) #8d8f94, 0 0 0 calc(var(--w) * .009) #3a3b3f, 0 calc(var(--w) * .06) calc(var(--w) * .12) #00000059}.mk--flat.mk--phone .mk__face{box-shadow:0 0 0 calc(var(--w) * .012) #9c9ea3, 0 0 0 calc(var(--w) * .018) #3a3b3f, 0 calc(var(--w) * .1) calc(var(--w) * .2) #00000059}.mk--flat .mk__deck{width:114%;height:calc(var(--w) * .028);background:linear-gradient(#d9dbdf,#a5a7ab 70%,#8a8c90);border-radius:0 0 50% 50%/0 0 100% 100%;top:100%;left:-7%;transform:none}.mk--flat .mk__deck-top{display:none}.ms--console,.ms--hub,.ms--pos{--ar:1.3}.ms--console .mk--laptop,.ms--hub .mk--laptop{--w:min(66cqw, 98cqh)}.ms--console .mk--tablet{--w:56cqh}.ms .mk--phone{--w:37cqh}.ms--hub .mk--stand{--w:min(70cqw, 100cqh)}.ms .mk[data-slot=center]{--x:0px;--y:0px;--z:0px;--ry:0deg;--s:1}.ms .mk[data-slot=left]{--x:-38cqw;--y:7cqh;--z:-22cqw;--ry:30deg;--s:.6}.ms .mk[data-slot=right]{--x:38cqw;--y:7cqh;--z:-22cqw;--ry:-30deg;--s:.6}.ms .mk--laptop[data-slot=center]{--y:-9cqh}.ms .mk--laptop:is([data-slot=left],[data-slot=right]){--s:.46;--y:-2cqh;--z:-46cqw}.ms .mk--stand[data-slot=center]{--y:-9cqh}.ms .mk--stand:is([data-slot=left],[data-slot=right]){--s:.44;--y:-2cqh}.ms .mk--phone:is([data-slot=left],[data-slot=right]){--s:.7}.ms--pos .mk--stand{--w:min(78cqw, 96cqh);--y:-6cqh}@container mst (width<=620px){.ms--console .mk--laptop,.ms--hub .mk--laptop{--w:94cqw}.ms--console .mk--tablet{--w:min(54cqh, 80cqw)}.ms .mk--phone{--w:37cqh}.ms--hub .mk--stand{--w:96cqw}.ms .mk[data-slot=left]{--x:-40cqw;--z:-40cqw;--ry:38deg;--s:.5}.ms .mk[data-slot=right]{--x:40cqw;--z:-40cqw;--ry:-38deg;--s:.5}.ms .mk--laptop[data-slot=center]{--y:-6cqh}.ms .mk--laptop:is([data-slot=left],[data-slot=right]){--z:-80cqw}.ms--pos .mk--stand{--w:96cqw;--y:-5cqh}}@media (width<=999px){.ms--console,.ms--hub{--ar:.72}.ms--pos{--ar:1.05}}.ms:not(.is-in) .mk{transform:translate(-50%, -50%) translate3d(var(--x), calc(var(--y) + 26cqh), calc(var(--z) - 30cqw)) rotateX(62deg) rotateY(var(--ry)) scale(calc(var(--s) * .82))}.ms .mk{transition-duration:1.4s}.ms.is-in:not(.is-settled) .mk:first-child{transition-delay:50ms}.ms.is-in:not(.is-settled) .mk:nth-child(2){transition-delay:.22s}.ms.is-in:not(.is-settled) .mk:nth-child(3){transition-delay:.4s}.ms.is-settled .mk{transition-duration:1s}@media (prefers-reduced-motion:reduce){.ms .mk,.ms .mk__screen:after{transition:none!important}.ms:not(.is-in) .mk{transform:translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)) rotateY(var(--ry)) scale(var(--s))}}.tour{height:calc(100svh + var(--n) * 72svh);position:relative}.tour__pin{align-items:center;height:100svh;display:flex;position:sticky;top:0;overflow:clip}.tour__grid{width:100%;padding-top:calc(var(--header-h) * .6);grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;gap:clamp(28px,4vw,72px);display:grid}.tour__title{letter-spacing:-.035em;font-size:clamp(34px,3.6vw,58px);font-weight:500;line-height:1.08}.tour__text{max-width:30em;color:var(--ink-2);margin-top:16px;line-height:1.75}.tour__steps{border-left:1px solid var(--line);margin:clamp(20px,3vh,32px) 0 0;padding:0;list-style:none;display:grid}.tour__step{color:var(--muted);cursor:pointer;transition:color .4s var(--ease);grid-template-columns:34px 1fr;gap:10px;padding:11px 0 11px 18px;display:grid;position:relative}.tour__step:before{content:"";background:var(--accent);transform-origin:top;width:2px;transition:transform .6s var(--ease);position:absolute;top:10px;bottom:10px;left:-1px;transform:scaleY(0)}.tour__step.is-on{color:var(--ink)}.tour__step.is-on:before{transform:scaleY(1)}.tour__no{font-family:var(--font-mono);font-size:var(--fs-xs);padding-top:.3em}.tour__step.is-on .tour__no{color:var(--accent)}.tour__body h3{font-size:var(--fs-h4);letter-spacing:-.02em;color:inherit;font-weight:600;line-height:1.35}.tour__body p,.tour__body small{opacity:0;max-height:0;transition:max-height .6s var(--ease), opacity .4s ease, margin .6s var(--ease);display:block;overflow:hidden}.tour__body p{color:var(--ink-2);line-height:1.7}.tour__body small{font-size:var(--fs-xs);color:var(--muted)}.tour__step.is-on p,.tour__step.is-on small{opacity:1;max-height:9em;margin-top:6px}.tour__badges{flex-wrap:wrap;gap:8px;margin:clamp(18px,3vh,28px) 0 0;padding:0;list-style:none;display:flex}.tour__badges li{border:1px solid var(--line);font-size:var(--fs-xs);border-radius:999px;align-items:baseline;gap:8px;padding:7px 13px;display:inline-flex}.tour__badges span{font-family:var(--font-mono);color:var(--muted)}.tour__stage{position:relative}.tour__devices{aspect-ratio:1.22;width:100%;position:relative;container-type:size}.tour--pos .tour__devices{aspect-ratio:1.36}.tour .mk--laptop{--w:80cqw;top:42%}.tour .mk--tablet{--w:25cqw;top:68%;left:11%}.tour .mk--phone{--w:13.5cqw;top:72%;left:91%}.tour .mk--stand{--w:94cqw}.tour__links{z-index:-1;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.tour__links path{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;opacity:.6;animation:1.2s linear infinite tour-dash}@keyframes tour-dash{to{stroke-dashoffset:-16px}}.tour__meter{justify-content:center;gap:6px;margin-top:clamp(16px,3vh,28px);display:flex}.tour__meter i{background:var(--line);width:28px;height:3px;transition:background .4s var(--ease);border-radius:2px}.tour__meter i.is-on{background:var(--accent)}@media (width>=1000px) and (height<=980px){.tour--pos .tour__text{display:none}.tour--pos .tour__step{padding-block:7px}}@media (width<=999px){.tour{height:calc(100svh + var(--n) * 62svh)}.tour__pin{align-items:flex-start}.tour__grid{padding-top:calc(var(--header-h) + 14px);grid-template-columns:1fr;gap:14px}.tour__title{font-size:var(--fs-h3)}.tour__text,.tour__badges{display:none}.tour__steps{border-left:0;margin-top:10px}.tour__step{padding:4px 0}.tour__step:before,.tour__step:not(.is-on){display:none}.tour__step.is-on{animation:tour-in .5s var(--ease)}.tour__devices{aspect-ratio:1.02}.tour--pos .tour__devices{aspect-ratio:1.3}.tour .mk--laptop{--w:92cqw;top:34%}.tour .mk--tablet{--w:30cqw;top:72%;left:16%}.tour .mk--phone{--w:16cqw;top:72%;left:86%}}@keyframes tour-in{0%{opacity:0;transform:translateY(10px)}}
