.hw-c{--hc-dots:radial-gradient(circle,rgb(255 255 255/.5) 0 1.6px,transparent 2px);--hc-dots-ink:radial-gradient(circle,rgb(46 42 36/.16) 0 1.3px,transparent 1.7px);--hc-ray:color-mix(in srgb,var(--sky-deep) 80%,#fff);--hc-out:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),1.5px 1.5px var(--ink),-1.5px -1.5px var(--ink),1.5px -1.5px var(--ink),-1.5px 1.5px var(--ink),3px 3px 0 var(--ink);overflow-x:clip}.hw-c .hc{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}.hw-c .eyebrow{justify-self:start}.hw-c .h-l{margin-top:8px}#how.hw-c .h-l{font-size:clamp(40px,13.3vw,52px)}@media(max-width:699px){.hw-c.pad{padding-bottom:80px}}.hw-c .hc-pic{position:relative;z-index:0;container-type:inline-size;width:100%;max-width:400px;aspect-ratio:10/6.6;margin:20px 0 0;overflow:hidden;border:2px solid var(--ink);border-radius:10px;background:repeating-conic-gradient(from 4deg at 71.7% 59%,var(--sky-deep) 0 9deg,var(--hc-ray) 9deg 18deg);box-shadow:6px 7px 0 var(--ink);rotate:-1deg}.hw-c .hc-pic:before{content:"";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;background:var(--hc-dots) 0 0/8px 8px;-webkit-mask-image:radial-gradient(circle at 71.7% 59%,transparent 22%,#000 78%);mask-image:radial-gradient(circle at 71.7% 59%,transparent 22%,#000 78%);pointer-events:none}.hw-c .hc-table{position:absolute;z-index:1;left:0;right:0;top:49cqw;bottom:0;background:var(--hc-dots-ink) 0 0/7px 7px,var(--glow-soft);border-top:2px solid var(--ink)}.hw-c .hc-lumi{position:absolute;z-index:2;left:55cqw;top:9cqw;width:34cqw;aspect-ratio:827/1033;isolation:isolate}.hw-c .hc-lumi:before{content:"";position:absolute;z-index:-1;left:10%;right:10%;bottom:-3%;height:9%;border-radius:50%;background:#2e2a2438}.hw-c .hc-lumi img{position:absolute;top:0;left:0;width:145.1%;max-width:none;height:auto;margin:-37.36% 0 0 -23.46%;filter:drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink))}.hw-c .hc-ring{position:absolute;left:49.1%;top:70.5%;width:24.6%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:max(2px,.55cqw) solid var(--glow);box-shadow:0 0 0 .5cqw #f5a6234d,0 0 2.6cqw .9cqw #f5a623b3}.hw-c .hc-phone{position:absolute;z-index:3;left:22.4cqw;top:24.4cqw;width:37cqw;height:76cqw;padding:1.4cqw;border-radius:5.6cqw;background:var(--ink);box-shadow:1.4cqw 1.2cqw #2e2a244d;rotate:28deg}.hw-c .hc-scr{position:relative;display:block;height:100%;overflow:hidden;border-radius:4.3cqw;background:#fff}.hw-c .hc-ui{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:2cqw 2.2cqw 0;background:linear-gradient(#EFE9FF,var(--card) 34%);color:var(--ink);font-weight:800;line-height:1}.hw-c .hc-ui-island{position:absolute;left:50%;top:1.1cqw;width:9cqw;height:2.3cqw;translate:-50% 0;border-radius:9px;background:var(--ink)}.hw-c .hc-ui-clock{height:2.6cqw;margin-left:.6cqw;font-size:2cqw;font-weight:900}.hw-c .hc-ui-h{margin-top:1.4cqw;font-size:3.8cqw;font-weight:900;letter-spacing:-.01em}.hw-c .hc-ui-time{display:flex;align-items:center;gap:.7cqw;margin-top:1.5cqw;padding:.6cqw;border:.3cqw solid var(--ink);border-radius:9px;background:var(--card)}.hw-c .hc-ui-time i{flex:1;display:grid;place-items:center;height:3.4cqw;border-radius:9px;font-size:2.3cqw;font-style:normal;font-weight:900;color:var(--ink-soft)}.hw-c .hc-ui-time i.on{background:var(--glow);color:var(--ink);box-shadow:inset 0 0 0 .3cqw var(--ink)}.hw-c .hc-ui-time small{flex:none;padding:0 .6cqw 0 .2cqw;font-size:2cqw;font-weight:800;color:var(--ink-soft)}.hw-c .hc-ui-k{margin-top:1.6cqw;font-size:1.9cqw;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}.hw-c .hc-ui-app{display:flex;align-items:center;gap:1.4cqw;height:4.2cqw;margin-top:.8cqw;padding:0 1.2cqw 0 .8cqw;border:.3cqw solid var(--ink);border-radius:9px;background:var(--card);font-size:2.4cqw;font-weight:900;white-space:nowrap}.hw-c .hc-ui-ic{flex:none;width:2.8cqw;height:2.8cqw;border-radius:.8cqw;border:.25cqw solid var(--ink)}.hw-c .hc-ui-ic1{background:var(--blush-deep)}.hw-c .hc-ui-ic2{background:var(--ink)}.hw-c .hc-ui-ic3{background:#e0393e}.hw-c .hc-ui-lock{flex:none;width:2.8cqw;height:2.8cqw;margin-left:auto;overflow:visible;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.hw-c .hc-ui-lock rect{fill:var(--glow)}.hw-c .hc-glow{position:absolute;z-index:4;left:71.7cqw;top:38.9cqw;width:15cqw;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle closest-side,transparent 50%,rgb(255 196 84/.6) 58%,rgb(245 166 35/.28) 74%,transparent 100%);pointer-events:none}.hw-c .hc-glow:after{content:"";position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:max(2px,.5cqw) solid var(--glow);opacity:0}.hw-c .hc-sfx{position:absolute;z-index:2;left:33cqw;top:8cqw;font-size:8.6cqw;font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--card);text-shadow:var(--hc-out);rotate:-10deg}.hw-c .hc-spark{position:absolute;z-index:2;left:6cqw;top:7cqw;width:6.5cqw;fill:var(--glow);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}.hw-c .hc-pin{--dot:clamp(9px,2.3cqw,13px);--bd:clamp(28px,8cqw,42px);--lw:clamp(2px,.65cqw,3px);position:absolute;z-index:5;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);width:0;height:0}.hw-c .hc-pin:before{content:"";position:absolute;left:0;top:calc(var(--lw) / -2);width:calc(var(--len) * 1cqw);height:var(--lw);border-radius:9px;background:var(--ink);transform-origin:0 50%;rotate:calc(var(--ang) * 1deg)}.hw-c .hc-pin i{position:absolute;left:0;top:0;width:var(--dot);height:var(--dot);translate:-50% -50%;border:2px solid var(--ink);border-radius:50%;background:var(--card)}.hw-c .hc-pin b{position:absolute;left:calc(var(--dx) * 1cqw);top:calc(var(--dy) * 1cqw);display:grid;place-items:center;width:var(--bd);height:var(--bd);translate:-50% -50%;border:2px solid var(--ink);border-radius:50%;background:var(--glow);box-shadow:2px 3px 0 var(--ink);font-size:clamp(15px,4.4cqw,21px);font-weight:900;line-height:1;color:var(--ink);rotate:-8deg;transition:scale .35s var(--spring),background-color .2s var(--ease)}.hw-c .hc-p1{--x:36.8;--y:44.5;--dx:-19.5;--dy:-3.6;--len:19.8;--ang:-169.5}.hw-c .hc-p2{--x:74.6;--y:42.1;--dx:4.4;--dy:16;--len:16.6;--ang:74.6}.hw-c .hc-p3{--x:79;--y:19;--dx:14.5;--dy:-8;--len:16.6;--ang:-28.9}.hw-c .hc-p2 b{rotate:6deg}.hw-c .hc-key{list-style:none;display:grid;gap:8px;width:100%;max-width:400px;margin:16px 0 0;padding:0}.hw-c .hc-key li{margin:0}.hw-c .hc-k{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:7px 10px 8px;background:var(--card);border:2px solid var(--ink);border-radius:14px;box-shadow:var(--sh-sm);font:inherit;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;rotate:var(--hc-r,0deg);transition:rotate .4s var(--spring),translate .4s var(--spring),box-shadow .2s var(--ease)}.hw-c .hc-k:active{translate:2px 3px;box-shadow:var(--sh-press)}.hw-c .hc-k:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.hw-c .hc-play{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-left:auto;border:2px solid var(--ink);border-radius:50%;background:var(--glow-soft);box-shadow:1px 2px 0 var(--ink)}.hw-c .hc-play svg{width:12px;height:12px;margin-left:2px;fill:var(--ink)}.hw-c .hc-k1{--hc-r:-.7deg}.hw-c .hc-k2{--hc-r:.6deg}.hw-c .hc-k3{--hc-r:-.5deg}.hw-c .hc-n{flex:none;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;background:var(--glow);box-shadow:1px 2px 0 var(--ink);font-size:16px;font-weight:900;line-height:1;color:var(--ink);rotate:-8deg}.hw-c .hc-k-t{flex:1;min-width:0;margin:0;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink);text-wrap:pretty}.hw-c .hc-k strong{font-weight:900}.hw-c .hc-more{display:flex;align-items:center;gap:12px;justify-self:start;width:100%;max-width:400px;min-height:66px;margin-top:16px;padding:8px 9px 8px 8px;border:2px solid var(--ink);border-radius:999px;background:var(--card);box-shadow:var(--sh-btn);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;rotate:-1deg;transition:translate .15s var(--ease),box-shadow .15s var(--ease),rotate .3s var(--spring)}.hw-c .hc-more:hover{color:var(--ink);rotate:0deg;translate:-1px -2px;box-shadow:var(--sh-btn-up)}.hw-c .hc-more:active{translate:2px 3px;box-shadow:var(--sh-press)}.hw-c .hc-more:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.hw-c .hc-av{position:relative;flex:none;display:block;width:48px;height:48px;padding:3px;border-radius:50%}.hw-c .hc-av:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(var(--glow),var(--blush-deep),var(--lavender-deep),var(--glow))}.hw-c .hc-av-in{position:relative;display:block;width:100%;height:100%;overflow:hidden;border:2.5px solid var(--card);border-radius:50%;background:var(--card)}.hw-c .hc-av img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.15)}.hw-c .hc-more-t{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:17px;font-weight:900;line-height:1.15}.hw-c .hc-more-t small{font-size:13px;font-weight:700;color:var(--ink-soft)}.hw-c .hc-arr{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-left:auto;border:2px solid var(--ink);border-radius:50%;background:var(--glow);box-shadow:1px 2px 0 var(--ink)}.hw-c .hc-arr svg{width:16px;height:16px;margin-left:3px;fill:var(--ink)}@media(min-width:700px){.hw-c .hc{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto auto 1fr;grid-template-areas:"pic ." "pic eb" "pic h" "pic key" "pic more" "pic .";column-gap:clamp(40px,5vw,72px)}.hw-c .hc-pic{grid-area:pic;align-self:center;max-width:none;margin:0;box-shadow:8px 9px 0 var(--ink);border-width:3px;border-radius:12px}.hw-c .eyebrow{grid-area:eb}.hw-c .h-l{grid-area:h}#how.hw-c .h-l{font-size:clamp(40px,5.2vw,68px)}.hw-c .hc-key{grid-area:key;gap:12px;max-width:440px;margin-top:24px}.hw-c .hc-k{gap:14px;padding:12px 18px 13px 12px}.hw-c .hc-n{width:38px;height:38px;font-size:18px}.hw-c .hc-k-t{font-size:16px}.hw-c .hc-more{grid-area:more;max-width:440px;margin-top:18px}}@media(hover:hover){.hw-c .hc-k:hover{rotate:0deg;translate:0 -2px;box-shadow:var(--sh-btn)}.hw-c .hc:has(.hc-k1:hover) .hc-p1 b,.hw-c .hc:has(.hc-k2:hover) .hc-p2 b,.hw-c .hc:has(.hc-k3:hover) .hc-p3 b{scale:1.22;background:var(--card)}}@media(prefers-reduced-motion:no-preference){.hw-c .hc-phone,.hw-c .hc-p1{animation:hc-tap 3.6s var(--ease) infinite}.hw-c .hc-ring,.hw-c .hc-glow{animation:hc-lit 3.6s var(--ease) infinite}.hw-c .hc-glow:after{animation:hc-ripple 3.6s var(--ease) infinite}.hw-c .hc-sfx{animation:hc-sfx 3.6s var(--spring) infinite}.hw-c .hc-av:before{animation:hc-spin 4s linear infinite}.hw-c .hc-arr{animation:hc-nudge 2.4s var(--ease) infinite}}@keyframes hc-tap{0%,8%{translate:0 0}22%{translate:-1.3cqw 2.4cqw}34%,to{translate:0 0}}@keyframes hc-lit{0%,30%{opacity:.55}36%{opacity:1}80%{opacity:1}to{opacity:.55}}@keyframes hc-ripple{0%,33%{opacity:0;scale:1}36%{opacity:1;scale:1}62%,to{opacity:0;scale:1.9}}@keyframes hc-sfx{0%,32%{scale:.82}40%{scale:1.12}50%,to{scale:1}}@keyframes hc-spin{to{rotate:360deg}}@keyframes hc-nudge{0%,70%,to{scale:1}80%{scale:1.12}90%{scale:.97}}@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.hw-c .hc-pic{view-timeline-name:--hc-pic}.hw-c .hc-pin b,.hw-c .hc-pin i,.hw-c .hc-pin:before{animation:hc-pop linear both;animation-timeline:--hc-pic;animation-range:entry 30% entry 80%}.hw-c .hc-p2 b,.hw-c .hc-p2 i,.hw-c .hc-p2:before{animation-range:entry 40% entry 90%}.hw-c .hc-p3 b,.hw-c .hc-p3 i,.hw-c .hc-p3:before{animation-range:entry 50% entry 100%}}}@keyframes hc-pop{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.hw-c .hc-k,.hw-c .hc-pin b{transition:none}.hw-c .hc-k:hover{translate:none}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/lumi-how-c.css.map */