.ls-scene{--ar:.7297;--pl:22.5;--pw:60;--pt:2.5;--ph:90.5;--b:2cqi;--r:8.6cqi;aspect-ratio:var(--ar);position:relative;container-type:inline-size}.ls-bleed,.ls-lens{position:absolute;inset:0}.ls-bleed>:is(img,canvas,picture),.ls-lens>:is(img,canvas,picture){object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.ls-bleed{mask-image:linear-gradient(#0000,#000 10% 66%,#0000 96%),linear-gradient(90deg,#0000,#000 14% 86%,#0000);mask-composite:intersect}.ls-bleed>*{opacity:.86;filter:saturate(.9)}.ls-phone,.ls-screen{left:calc(var(--pl) * 1%);top:calc(var(--pt) * 1%);width:calc(var(--pw) * 1%);height:calc(var(--ph) * 1%);border-radius:var(--r);position:absolute}.ls-phone{backdrop-filter:blur(10px)saturate(150%)brightness(1.08);background:linear-gradient(155deg,oklch(100% 0 0/.7),oklch(100% 0 0/.25) 38%,oklch(100% 0 0/.18) 62%,oklch(100% 0 0/.6));box-shadow:inset 0 0 0 1px oklch(100% 0 0/.95),inset 0 0 0 2px oklch(100% 0 0/.35),0 0 0 1px oklch(45% .039 350/.1),0 0 50px oklch(100% 0 0/.55),0 60px 90px -50px oklch(35% .054 356/.55)}.ls-key{background:linear-gradient(90deg,oklch(92% .01 35),oklch(100% 0 0));border-radius:2px;width:.7cqi;position:absolute;box-shadow:0 0 0 1px oklch(45% .039 350/.12)}.ls-key:first-child{height:4%;top:17%;left:-.6cqi}.ls-key:nth-child(2){height:8%;top:24%;left:-.6cqi}.ls-key:nth-child(3){height:11%;top:22%;right:-.6cqi}.ls-lens{clip-path:inset(calc(var(--pt) * 1% + var(--b)) calc((100 - var(--pl) - var(--pw)) * 1% + var(--b)) calc((100 - var(--pt) - var(--ph)) * 1% + var(--b)) calc(var(--pl) * 1% + var(--b)) round calc(var(--r) - var(--b)))}.ls-shade{background:linear-gradient(to bottom, oklch(22% .039 350/.5), transparent calc(var(--pt) * 1% + 22%)), linear-gradient(to top, oklch(50% .056 17/.55), transparent calc((100 - var(--pt) - var(--ph)) * 1% + 30%));position:absolute;inset:0}.ls-screen{left:calc(var(--pl) * 1% + var(--b));top:calc(var(--pt) * 1% + var(--b));width:calc(var(--pw) * 1% - 2 * var(--b));height:calc(var(--ph) * 1% - 2 * var(--b));border-radius:calc(var(--r) - var(--b));color:oklch(100% 0 0);overflow:hidden;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.3)}.ls-island{border-radius:var(--r-pill);background:oklch(12% .011 347);width:30%;height:3.8cqi;position:absolute;top:2.2cqi;left:50%;translate:-50%}.ls-title{text-align:center;letter-spacing:-.025em;text-wrap:balance;text-shadow:0 1px 18px oklch(25% .036 355/.4);margin:0;font-size:clamp(14px,4.4cqi,25px);font-weight:540;font-stretch:100%;line-height:1.12;position:absolute;top:10cqi;left:8%;right:8%}.ls-dock{border-radius:var(--r-pill);backdrop-filter:blur(14px)saturate(160%);background:oklch(100% 0 0/.2);align-items:center;gap:2.2cqi;height:clamp(44px,11cqi,60px);padding:0 4.4cqi 0 1.4cqi;display:flex;position:absolute;bottom:3cqi;left:4cqi;right:4cqi;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.45),0 8px 24px -10px oklch(30% .045 356/.4)}.ls-co{pointer-events:none;position:absolute;inset:0}.ls-dot{left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);aspect-ratio:1;opacity:0;width:clamp(14px,3.6cqi,20px);transition:opacity .2s, scale .3s var(--ease-out);border:2px solid oklch(100% 0 0);border-radius:50%;position:absolute;translate:-50% -50%;scale:.2;box-shadow:0 0 0 1px oklch(30% .036 356/.12),0 2px 10px oklch(30% .036 356/.3)}.ls-line{--dx:calc((var(--ax) - var(--x)) * 1cqi);--dy:calc((var(--ay) - var(--y)) * 1cqi / var(--ar));left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:hypot(var(--dx), var(--dy));transform-origin:0;height:1.5px;rotate:atan2(var(--dy), var(--dx));opacity:0;transition:opacity .2s, scale .3s var(--ease-out);background:oklch(100% 0 0/.95);margin-top:-.75px;position:absolute;scale:0 1;box-shadow:0 0 6px oklch(30% .036 356/.25)}.ls-card{--tx:0;left:calc(var(--cx) * 1%);top:calc(var(--cy) * 1%);translate:calc(var(--tx) * -1%) 0;color:var(--ink);transform-origin:calc(100% - var(--tx) * 1%) 50%;opacity:0;transition:opacity .22s var(--ease-out), scale .3s var(--ease-out);background:oklch(99.6% .002 35);border-radius:clamp(16px,4.6cqi,26px);justify-items:start;gap:1.6cqi;padding:2.6cqi 3cqi 2.8cqi;display:grid;position:absolute;scale:.86;box-shadow:0 1px 2px oklch(30% .039 350/.06),0 22px 44px -18px oklch(30% .045 356/.4)}.ls-card--end{--tx:100}.ls-card-name{letter-spacing:-.035em;white-space:nowrap;padding-left:.1em;font-size:clamp(16px,4.8cqi,27px);font-weight:560;font-stretch:100%;line-height:1}.ls-pill{border-radius:var(--r-pill);white-space:nowrap;align-items:center;gap:.4em;padding:.4em .85em .4em .6em;font-size:clamp(11px,2.7cqi,14.5px);font-weight:560;line-height:1.1;display:inline-flex}.ls-pill b{font-weight:700}.ls-pill.is-good{background:color-mix(in oklch, var(--good) 13%, white);color:color-mix(in oklab, var(--good) 62%, var(--ink))}.ls-pill.is-fair{background:color-mix(in oklch, var(--fair) 22%, white);color:color-mix(in oklab, oklch(60% .104 49) 70%, var(--ink))}.ls-pill.is-warn,.ls-pill.is-focus{background:var(--accent-wash);color:var(--accent-ink)}.ls-pill.is-poor{background:color-mix(in oklch, var(--poor) 14%, white);color:color-mix(in oklab, var(--poor) 70%, var(--ink))}.ls-co.is-on .ls-dot{opacity:1;transition:opacity .25s var(--ease-out) calc(var(--delay,.3s) + var(--d,0) * .55s), scale .7s var(--ease-spring) calc(var(--delay,.3s) + var(--d,0) * .55s);scale:1}.ls-co.is-on .ls-line{opacity:1;transition:opacity .15s calc(var(--delay,.3s) + .2s + var(--d,0) * .55s), scale .55s var(--ease-in-out) calc(var(--delay,.3s) + .2s + var(--d,0) * .55s);scale:1}.ls-co.is-on .ls-card{opacity:1;transition:opacity .35s var(--ease-out) calc(var(--delay,.3s) + .55s + var(--d,0) * .55s), scale .8s var(--ease-spring) calc(var(--delay,.3s) + .55s + var(--d,0) * .55s);scale:1}@media (prefers-reduced-motion:reduce){.ls-co.is-on :is(.ls-dot,.ls-line,.ls-card){transition-duration:0s;transition-delay:0s}}@media (prefers-reduced-transparency:reduce){.ls-phone{backdrop-filter:none;background:oklch(97% .006 35)}.ls-dock{background:oklch(30% .039 350/.7)}}