.loki-demo{position:relative;container-type:inline-size;overflow:hidden;border-radius:12px;aspect-ratio:1}
.loki-phone{position:absolute;left:32.2545%;top:11.596%;width:35.491%;height:76.806%;overflow:hidden;border-radius:6%;background:#000;color:#fff;font-family:Avenir,"Avenir Next",Arial,sans-serif}
.loki-demo .loki-home{position:absolute;inset:0;width:100%;height:100%;border-radius:0;aspect-ratio:auto}
.loki-phone:after{content:"";position:absolute;top:2.6%;left:1.5%;width:97%;height:4.4%;background:#000;pointer-events:none}
.loki-message{position:absolute;inset:0;background:rgba(0,0,0,.75)}
.loki-demo .loki-headline{position:absolute;top:14.57%;left:14.1%;width:70.52%;margin:0;color:#fff;font-size:1.547098cqw;font-weight:900;line-height:1.294039;text-align:center;letter-spacing:0}
.loki-track{position:absolute;top:23.34%;left:0;width:100%;height:49.76%;display:flex;gap:5.13%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:13.59%;padding-inline:13.59% 14.62%;box-sizing:border-box;scrollbar-width:none;overscroll-behavior-x:contain}
.loki-track::-webkit-scrollbar{display:none}
.loki-slide{flex:0 0 100%;height:100%;position:relative;overflow:hidden;border-radius:6px;scroll-snap-align:start;background:#6d7278}
.loki-demo .loki-art,.loki-demo .loki-art-extra,.loki-demo .loki-title{position:absolute;max-width:none;border-radius:0;aspect-ratio:auto;height:auto}
.loki-demo .loki-art{left:-3.23%;top:0;width:106.46%;height:100%;object-fit:fill}
.loki-demo .loki-slide--second .loki-art{left:-7.23%;top:-.71%;width:107.23%;height:100.72%}
.loki-demo .loki-slide--simpsons .loki-art{left:-3.48%;top:-.24%;width:106.96%;height:100.48%}
.loki-demo .loki-slide--obi-wan .loki-art{left:-81.88%;top:-31.37%;width:196.01%;height:174.23%}
.loki-demo .loki-art-extra{left:-3.23%;top:0;width:106.46%;height:100%;object-fit:fill}
.loki-shade{position:absolute;inset:56.37% 0 0;background:linear-gradient(transparent,rgba(30,7,0,.9) 86.458%);opacity:.8}
.loki-slide--second .loki-shade{background:linear-gradient(transparent,rgba(10,18,45,.81) 62.5%);opacity:1}
.loki-slide--simpsons .loki-shade{top:50.54%;background:linear-gradient(transparent,rgba(0,0,43,.85) 43.119%);opacity:1}
.loki-slide--obi-wan .loki-shade{top:50%;background:linear-gradient(transparent 19.792%,rgba(53,40,25,.9));opacity:1}
.loki-demo .loki-title{left:16.79%;top:63.39%;width:66.43%;height:18.22%;object-fit:contain}
.loki-demo .loki-slide--second .loki-title{left:12.32%;top:63.33%;width:75.27%;height:19.93%}
.loki-demo .loki-slide--simpsons .loki-title{left:18.13%;top:63.75%;width:63.74%;height:18.21%}
.loki-demo .loki-slide--obi-wan .loki-title{left:18.13%;top:66.9%;width:63.74%;height:14.51%}
.loki-actions{position:absolute;left:0;right:0;top:86.2%;display:flex;justify-content:center;align-items:center;gap:4%}
.loki-demo button{cursor:pointer;font-family:inherit;touch-action:manipulation}
.loki-play{background:#fff;color:#090b13;border:0;border-radius:2px;padding:3% 6%;font-size:1.2cqw;font-weight:700;letter-spacing:.08em;line-height:1.4}
.loki-add{display:grid;place-items:center;width:13%;aspect-ratio:1;border:1px solid #fff;background:transparent;color:#fff;border-radius:50%;padding:0;font-size:2cqw;line-height:1}
/* Figma pagination: x 39.74%, y 74.88%, width 18.98%, height 1.54% of phone. */
.loki-dots{position:absolute;top:74.88%;left:39.74%;width:18.98%;height:1.54%;display:flex;justify-content:space-between}
.loki-dots button{position:relative;width:17.74%;height:100%;border:0;padding:0;background:transparent}
.loki-dots button:after{content:"";position:absolute;inset:-8px -2px}
.loki-dots span{position:absolute;inset:-6.29% -12.29% -18.88%;background:url('assets/loki-demo/dot-gray.svg') center/100% 100% no-repeat;pointer-events:none}
.loki-dots [aria-pressed="true"] span{background-image:url('assets/loki-demo/dot-white.svg')}
.loki-dismiss{position:absolute;top:78.79%;left:42.7%;width:12.58%;height:2.91%;padding:0;background:transparent;border:0;color:#fff;font-size:1.274107cqw;font-weight:900;line-height:1.642788;letter-spacing:0;white-space:nowrap;text-align:center}
.loki-dismiss:after{content:"";position:absolute;inset:-6px -8px}
.loki-reopen,.loki-preview{position:absolute;inset:35% 10%;background:#090b13;color:#fff;border:1px solid #fff;border-radius:4px;font-size:2cqw;text-align:center}
.loki-preview{padding:12% 5%}
.loki-preview button{display:block;margin:15% auto 0;font-size:1.5cqw}
.loki-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.loki-demo button:focus-visible,.loki-track:focus-visible{outline:2px solid #64d9ff;outline-offset:-2px}
.loki-message[hidden],.loki-preview[hidden],.loki-reopen[hidden]{display:none}

/* Exact outlined Figma lettering avoids platform font substitutions. */
.loki-demo .loki-headline{color:transparent}
.loki-demo .loki-headline::before{content:"";position:absolute;left:5.79%;top:.392934cqw;width:22.321429cqw;height:3.348214cqw;background:url('assets/loki-demo/headline-exact.svg') no-repeat center/100% 100%;pointer-events:none}
.loki-demo .loki-dismiss{color:transparent}
.loki-dismiss::before{content:"";position:absolute;left:.115095cqw;top:.428348cqw;width:4.464286cqw;height:1.116071cqw;background:url('assets/loki-demo/dismiss-exact.svg') no-repeat center/100% 100%;pointer-events:none}
.loki-demo .loki-play{color:transparent;background:transparent url('assets/loki-demo/play-exact.svg') no-repeat center/100% 100%;width:8.001328cqw;height:3.372772cqw;padding:0;border:0;border-radius:0;flex-shrink:0}
/* Restore the same Figma bezel above the interactive screen as its neighbors. */
.loki-demo::after{content:"";position:absolute;left:31.026786%;top:11.383929%;width:37.946429%;height:77.352232%;background:url('assets/loki-demo/phone-frame-v2.svg') no-repeat center/100% 100%;pointer-events:none;z-index:2}

.loki-demo .loki-background-layer{position:absolute;border-radius:0;aspect-ratio:auto;object-fit:fill}
.loki-demo .loki-navigation{left:.314465%;top:88.652405%;width:96.855346%;height:9.590450%}
.loki-demo .loki-navigation-cover-a{left:36.163522%;top:95.917897%;width:30.188679%;height:2.324957%}
.loki-demo .loki-navigation-cover-b{left:23.584906%;top:95.917897%;width:30.188679%;height:2.324957%}