/* localmkr · la vidriera (b-vidriera.js): real designs as a deck in depth, the one in front scrolling through its page.
   Everything under .lmv: the app loads every file of ext/, so nothing here touches anything else. */
@property --lmv-tint{syntax:'<color>';inherits:true;initial-value:#ecebe8}
.lmv{position:relative;--lmv-r:14px;transition:--lmv-tint 1.2s ease}
.lmv-head{display:flex;align-items:center;justify-content:center;gap:16px 22px;flex-wrap:wrap;margin:0 auto 10px;position:relative;z-index:3}
.lmv-cap{font-size:13px;font-weight:550;opacity:.55;white-space:nowrap}
.lmv-steps{display:flex;gap:12px;max-width:100%}
.lmv-step{appearance:none;border:0;background:none;margin:0;padding:8px 0;min-width:96px;display:grid;gap:8px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.lmv-step i{display:block;height:3px;border-radius:3px;background:color-mix(in srgb,currentColor 13%,transparent);overflow:hidden}
.lmv-step b{display:block;height:100%;border-radius:inherit;background:currentColor;transform-origin:0 50%;transform:scaleX(0)}
.lmv-step span{font-size:13px;font-weight:550;letter-spacing:-.01em;opacity:.48;transition:opacity .2s}
.lmv-step:hover span,.lmv-step[aria-selected=true] span{opacity:1}
.lmv-step:focus-visible{outline:2px solid #6b5cff;outline-offset:3px;border-radius:6px}

.lmv-stage{position:relative;height:var(--lmv-h,560px)}
/* the light behind the deck takes the colour of the design in front */
.lmv-stage::before{content:"";position:absolute;inset:-8% 0 -14%;z-index:0;pointer-events:none;
  background:radial-gradient(52% 62% at 44% 50%,color-mix(in srgb,var(--lmv-tint) 85%,transparent),transparent 72%)}

.lmv-deck{position:absolute;inset:0;z-index:1;perspective:2200px;perspective-origin:62% 42%}
.lmv-card{position:absolute;left:var(--lmv-cx);top:var(--lmv-cy);width:var(--lmv-cw);transform-origin:28% 50%;
  transition:transform .95s cubic-bezier(.2,.86,.2,1),opacity .7s ease,filter .7s ease;will-change:transform,opacity}
.lmv-card[data-slot="0"]{z-index:9}
.lmv-card[data-slot="1"]{z-index:8;transform:translate3d(17%,-4%,-210px) rotateY(-17deg);opacity:.92;filter:saturate(.92)}
.lmv-card[data-slot="2"]{z-index:7;transform:translate3d(31%,-7.5%,-420px) rotateY(-21deg);opacity:.64;filter:saturate(.8)}
.lmv-card[data-slot="3"]{z-index:6;transform:translate3d(43%,-10.5%,-630px) rotateY(-24deg);opacity:.36;filter:saturate(.68)}
.lmv-card[data-slot="far"]{z-index:5;transform:translate3d(52%,-13%,-840px) rotateY(-26deg);opacity:0;pointer-events:none}
/* the one sent away leaves to the left, towards the viewer, and comes back at the end of the deck */
.lmv-card[data-slot="out"]{z-index:10;transform:translate3d(-48%,5%,150px) rotateY(19deg) rotateZ(-2.5deg);opacity:0;pointer-events:none;
  transition-duration:.78s,.5s,.5s;transition-timing-function:cubic-bezier(.55,0,.75,.5),ease-in,ease}
.lmv-card.lmv-jump{transition:opacity .6s ease}
/* a new deck (another trade): dealt from below, the farthest first; `translate` and `scale` leave the slot's transform alone */
.lmv-deal .lmv-card{animation:lmv-deal .85s cubic-bezier(.2,.85,.2,1) backwards;animation-delay:calc(var(--lmv-d,0) * 90ms)}
@keyframes lmv-deal{from{translate:6% 90px;scale:.94;opacity:0}}

.lmv-win{position:relative;border-radius:var(--lmv-r);overflow:hidden;background:#fff;color:#16171C;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 44px 90px -38px rgba(17,19,24,.5),0 0 0 1px rgba(17,19,24,.08)}
.lmv-bar{display:flex;align-items:center;gap:6px;height:var(--lmv-bar);padding:0 14px;background:#f4f4f2;border-bottom:1px solid rgba(17,19,24,.07);color:#6b6e76}
.lmv-bar i{flex:none;width:10px;height:10px;border-radius:50%;background:#dcdcd9}
.lmv-url{min-width:0;margin-left:10px;padding:3px 12px;border-radius:999px;background:#fff;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lmv-tag{flex:none;margin-left:auto;padding:3px 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(17,19,24,.08);font-style:normal;font-size:11.5px;font-weight:600;color:#16171C}
.lmv-view{position:relative;height:var(--lmv-vh);overflow:hidden;background:#efefec}
.lmv-view img{position:absolute;left:0;top:0;display:block;width:100%;height:auto}
.lmv-pg{will-change:transform}
.lmv-top{transition:opacity .4s ease}
.lmv-card.lmv-full[data-slot="0"] .lmv-top{opacity:0}
.lmv-hit{position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:var(--lmv-r);background:none;cursor:pointer}
.lmv-card[data-slot="0"] .lmv-hit{cursor:zoom-in}
.lmv-hit:focus-visible{outline:2px solid #6b5cff;outline-offset:4px}
/* a light passes over the one coming forward */
.lmv-win::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.5) 49%,rgba(255,255,255,.12) 54%,transparent 66%);transform:translateX(-120%)}
.lmv-card.lmv-in .lmv-win::after{animation:lmv-gloss 1.15s .28s cubic-bezier(.3,.6,.2,1) both}
@keyframes lmv-gloss{from{opacity:1;transform:translateX(-120%)}to{opacity:1;transform:translateX(120%)}}

/* the phone, over the front card's corner; it turns over when the design changes */
.lmv-phone{position:absolute;z-index:12;width:var(--lmv-pw);left:calc(var(--lmv-cx) - var(--lmv-pw) * .4);
  top:calc(var(--lmv-cy) + var(--lmv-bar) + var(--lmv-vh) - var(--lmv-phh) * .7);perspective:1100px}
.lmv-ph{position:relative;height:var(--lmv-phh);padding:6px;border-radius:calc(var(--lmv-pw) * .17);background:#101114;transform-style:preserve-3d;
  box-shadow:0 40px 70px -26px rgba(17,19,24,.62),inset 0 0 0 1px rgba(255,255,255,.09)}
.lmv-island{position:absolute;z-index:2;top:13px;left:50%;width:30%;height:15px;transform:translateX(-50%);border-radius:10px;background:#000}
.lmv-phv{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--lmv-pw) * .17 - 6px);background:var(--lmv-status,#fff);transition:background-color .3s}
.lmv-phv img{position:absolute;left:0;top:24px;display:block;width:100%;height:auto;will-change:transform}
.lmv.lmv-nophone .lmv-phone{display:none}
.lmv-over{position:absolute;z-index:13}

/* narrow: the front card full width, the deck out of sight, the phone at the right */
.lmv-narrow .lmv-card:not([data-slot="0"]):not([data-slot="out"]){opacity:0;pointer-events:none}
.lmv-narrow .lmv-card[data-slot="out"]{transform:translate3d(-24%,0,0) scale(.96)}
.lmv-narrow .lmv-card[data-slot="1"]{transform:translate3d(18%,0,0) scale(.96)}
.lmv-narrow .lmv-phone{left:auto;right:10px;top:calc(var(--lmv-bar) + var(--lmv-vh) - var(--lmv-phh) * .5)}
.lmv-narrow .lmv-head{justify-content:flex-start}
.lmv-narrow .lmv-steps{overflow-x:auto;scrollbar-width:none;gap:10px;padding:0 2px}
.lmv-narrow .lmv-steps::-webkit-scrollbar{display:none}
.lmv-narrow .lmv-step{min-width:74px;flex:none}
@media (prefers-reduced-motion:reduce){.lmv,.lmv-card,.lmv-top{transition:none}.lmv-card.lmv-in .lmv-win::after{animation:none}}
/* one at a time (o.single, the signup's picker): no steps and no deck; the next one slides in, the one before slides out */
.lmv-single .lmv-head{display:none}
.lmv-single .lmv-card:not([data-slot="0"]):not([data-slot="out"]){opacity:0;pointer-events:none;transform:translate3d(10%,0,0) scale(.97)}
.lmv-single .lmv-card[data-slot="out"]{transform:translate3d(-10%,0,0) scale(.97);opacity:0;transition-duration:.55s,.4s,.4s}
/* scrolled by hand (o.scroll): the window is a page, the phone too; the hint leaves at the first scroll */
.lmv-scroll .lmv-view{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(17,19,24,.28) transparent}
.lmv-scroll .lmv-view .lmv-pg{position:relative;will-change:auto}
.lmv-scroll .lmv-view:focus-visible{outline:2px solid #6b5cff;outline-offset:-2px}
.lmv-scroll .lmv-card[data-slot="0"] .lmv-hit{display:none}
.lmv-scroll .lmv-phv{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-top:24px;box-sizing:border-box}
.lmv-scroll .lmv-phv::-webkit-scrollbar{display:none}
.lmv-scroll .lmv-phv img{position:relative;top:0;will-change:auto}
.lmv-hint{position:absolute;z-index:14;left:calc(var(--lmv-cx) + var(--lmv-cw) / 2);top:calc(var(--lmv-cy) + var(--lmv-bar) + var(--lmv-vh) - 58px);transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 11px;border-radius:999px;background:rgba(17,19,24,.84);color:#fff;font-size:13px;font-weight:550;white-space:nowrap;
  pointer-events:none;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:opacity .35s ease,transform .35s ease}
.lmv-hint svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.lmv-hint svg path{animation:lmv-wheel 1.4s ease-in-out infinite}
@keyframes lmv-wheel{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(3px);opacity:.3}}
.lmv-hint.off{opacity:0;transform:translateX(-50%) translateY(8px)}
.lmv-narrow .lmv-hint{top:calc(var(--lmv-bar) + var(--lmv-vh) - 52px);left:calc((var(--lmv-cw) - var(--lmv-pw)) / 2)}
@media (prefers-reduced-motion:reduce){.lmv-hint svg path{animation:none}}
/* one at a time: the change is at once (go() waits for the new first screen); no slide, no fade, no light passing */
.lmv-single .lmv-card,.lmv-single .lmv-card[data-slot="out"]{transition:none}
.lmv-single .lmv-card:not([data-slot="0"]){transform:none;opacity:0;pointer-events:none}
.lmv-single .lmv-card.lmv-in .lmv-win::after{animation:none}