/* glass-pack — pixel-faithful rebuild of ten "glass on grey" tiles.
   Geometry, shadows, gradients, radii and easings are measured values from the live
   reference (references/performance-dev-wealthsimple/). Markup, class names, icons, flags,
   card art, copy and code are original. Brand names/marks are replaced.
   Selectors are namespaced .gp-. Tiles are laid out at their measured size (364px wide). */

:root{
  --gp-ink:#0d0d0d;
  --gp-tile:#f2f2f2;
  --gp-hair:rgb(43 47 41 / .04);
  --gp-ease:cubic-bezier(.22,1,.36,1);
  --gp-spring:cubic-bezier(.34,1.56,.64,1);
  --gp-font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ── mosaic ─────────────────────────────────────────────────────── */
.gp-mosaic{display:grid;grid-template-columns:364px 364px;column-gap:20px;width:748px;max-width:100%;margin:0 auto;font-family:var(--gp-font);color:var(--gp-ink);-webkit-font-smoothing:antialiased;align-items:start}
.gp-col{display:flex;flex-direction:column}
.gp-cell{margin-bottom:20.5px}
.gp-cell--lead{margin-top:56px}
@media (max-width:780px){.gp-mosaic{grid-template-columns:364px;justify-content:center}.gp-cell--lead{margin-top:0}}

.gp-tile{position:relative;box-sizing:border-box;height:var(--h);background:var(--gp-tile);border:1px solid var(--gp-hair);border-radius:38px;overflow:hidden;transition:height .5s var(--gp-ease)}
.gp-body{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}

/* caption chip, revealed on hover/focus */
.gp-cap{
  position:absolute;left:12px;bottom:12px;z-index:4;height:30px;padding:0 13px;border-radius:999px;display:flex;align-items:center;
  background:linear-gradient(182.51deg,rgb(255 255 255 / .04) 27.09%,rgb(90 90 90 / .04) 58.59%,rgb(0 0 0 / .04) 92.75%);
  box-shadow:0 4px 10px rgb(0 0 0 / .03);font-size:13px;line-height:15.6px;font-weight:500;letter-spacing:-.13px;color:rgb(43 47 41);
  opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s;pointer-events:none;
}
.gp-cap::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(178.8deg,rgb(255 255 255 / .32) 10.85%,rgb(20 20 20 / .46) 24.36%,rgb(50 50 50 / .46) 73.67%,rgb(255 255 255 / .46) 90.68%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
.gp-tile--spring{transition:none}   /* height follows the drawer spring, no extra transition */
.gp-tile:hover .gp-cap,.gp-tile:focus-within .gp-cap{opacity:1;visibility:visible;transition-delay:0s}

/* 1px edge ring whose ends are white (drawn with a mask, not a fill) */
.gp-ring{position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(270deg,#fff 0%,rgb(255 255 255 / 0) 24.61%,#fff 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}

/* reset first; later single-class rules win (same specificity) */
.gp-b{all:unset;box-sizing:border-box;cursor:pointer}
.gp-focus:focus-visible,.gp-b:focus-visible{outline:2px solid #6366f1;outline-offset:2px}

/* ── 1 · currency switch ────────────────────────────────────────── */
.gp-cur{position:relative;display:inline-flex;align-items:center;padding:8px;border-radius:200px;background:rgb(255 255 255 / .85);box-shadow:0 9px 32px rgb(0 0 0 / .08);cursor:pointer;-webkit-tap-highlight-color:transparent}
.gp-cur .gp-ring{z-index:10}
.gp-cur-row{position:relative;z-index:1;display:flex;gap:10px}
/* thumb edges run on two springs (leading ζ .76 ω 21, trailing ζ .76 ω 18): it stretches 26 → ~28.8px mid-way and overshoots ~2.5% */
.gp-cur-thumb{position:absolute;left:0;top:-4px;width:26px;height:26px;border-radius:13px;background:rgb(0 0 0 / .08);transform:translateX(-4px);will-change:transform,width}
.gp-flag{position:relative;display:block;width:18px;height:18px;border-radius:50%}
.gp-flag svg{display:block;width:18px;height:18px;border-radius:50%;overflow:hidden;filter:saturate(0);opacity:.55;transition:filter .25s ease,opacity .25s cubic-bezier(.5,.7,.7,1)}
.gp-flag[aria-checked="true"] svg{filter:saturate(1);opacity:1}
.gp-glass{position:absolute;inset:0;z-index:2;border-radius:50%;opacity:0;transition:opacity .2s cubic-bezier(0,0,.6,1);pointer-events:none}
.gp-flag[aria-checked="true"] .gp-glass{opacity:1}
.gp-glass::before{content:"";position:absolute;inset:0;border-radius:1000px;background:rgb(0 0 0 / .01);box-shadow:0 1px 4px rgb(0 0 0 / .08),inset 0 0 3px rgb(0 0 0 / .4)}
.gp-glass::after{content:"";position:absolute;left:3px;top:.5px;width:12px;height:10px;border-radius:1000px;background:linear-gradient(#fff 0%,rgb(255 255 255 / 0) 100%)}

/* ── 3 · sliders ────────────────────────────────────────────────── */
.gp-sliders{display:flex;flex-direction:column;gap:16px;width:296px}
.gp-slider{position:relative;box-sizing:border-box;width:328px;height:44px;margin:0 -16px;padding:0 16px;touch-action:none;cursor:grab;transition:transform .32s var(--gp-ease)}
.gp-slider.is-down{cursor:grabbing}
.gp-lens{position:absolute;left:-36px;top:-37px;width:400px;height:118px;pointer-events:none;
  /* opaque like the tile, so the three channel-split displacements sum to alpha 1 (a transparent source triples the alpha of dots and edges);
     the visible band is clipped back to the original 296x64 so neighbouring sliders never overlap */
  background:#f2f2f2;clip-path:inset(27px 34px 27px 34px)}
.gp-track{position:absolute;left:52px;top:55px;width:296px;height:8px;border-radius:2px}
.gp-rail{position:absolute;inset:0;border-radius:2px;background:rgb(224 231 243)}
.gp-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,rgb(169 188 229),rgb(85 124 190))}
.gp-dots{position:absolute;left:57px;top:69px;width:286px;height:2px}
.gp-dots i{position:absolute;top:0;width:2px;height:2px;border-radius:50%;background:rgb(0 0 0 / .14)}
.gp-segs{display:flex;gap:2px}
.gp-seg{position:relative;width:72.5px;height:8px;border-radius:2px;overflow:hidden;background:rgb(246 222 219)}
.gp-seg i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgb(237 79 60),rgb(163 67 62))}
.gp-thumb{position:absolute;z-index:3;top:22px;width:28px;height:18px;margin:-9px 0 0 -14px;border-radius:9px;
  /* --gp-p is driven by a spring in JS (0 = rest, 1 = pressed; overshoots to ~1.1 and undershoots to ~-.1) */
  transform:scale(calc(1 + .3 * var(--gp-p,0)));
  background:rgb(255 255 255 / clamp(0,calc(1 - .86 * var(--gp-p,0)),1));
  box-shadow:
    0 4px 8px rgb(0 0 0 / clamp(0,calc(.05 * (1 - var(--gp-p,0))),1)),
    0 0 0 .75px rgb(0 0 0 / clamp(0,calc(.05 * (1 - var(--gp-p,0))),1)),
    inset 0 0 0 1.25px rgb(255 255 255 / clamp(0,calc(.6 * (1 - var(--gp-p,0))),1)),
    0 1px 1.5px rgb(0 0 0 / clamp(0,calc(.1 * var(--gp-p,0)),1)),
    0 3px 8px rgb(0 0 0 / clamp(0,calc(.06 * var(--gp-p,0)),1)),
    0 5px 13px rgb(155 178 217 / clamp(0,calc(.28 * var(--gp-p,0)),1))}
.gp-thumb i{position:absolute;inset:0;border-radius:9px}
.gp-thumb .gp-gloss{opacity:clamp(0,calc(.45 * var(--gp-p,0)),1);background:linear-gradient(rgb(255 255 255 / .34) 0%,rgb(255 255 255 / 0) 30%,rgb(255 255 255 / 0) 86%,rgb(255 255 255 / .42) 100%)}
.gp-thumb .gp-rim{opacity:clamp(0,var(--gp-p,0),1);padding:1px;background:rgb(0 0 0 / .11);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.gp-slider:focus-visible{outline:2px solid #6366f1;outline-offset:2px;border-radius:12px}

/* ── 4 · tick meter (built at 393×185, shown at .78) ────────────── */
.gp-meter-scale{width:393px;height:193.6px;transform:scale(.78);flex:none}
.gp-meter-wrap{position:relative;width:393px;height:193.6px}
/* the reference keeps this layer empty (opacity 0) — no halo behind the meter */
.gp-meter-glow{display:none}
.gp-meter{position:relative;display:block;width:393px;height:185px;border-radius:36px;overflow:hidden;background:#f9f9f9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.55'/></svg>") 0 0/200px 200px repeat;background-blend-mode:screen,normal;box-shadow:0 8px 24px rgb(0 0 0 / .05),0 1px 2px rgb(0 0 0 / .03);border:0;padding:0;font:inherit;color:var(--gp-ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .4s,color .4s}
@property --gp-rot{syntax:'<angle>';inherits:false;initial-value:0deg}
.gp-meter .gp-ring{padding:1.2px;border-radius:36px}
.gp-meter-rim{position:absolute;inset:0;border-radius:36px;padding:1.2px;overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
.gp-meter-rim::before{content:"";position:absolute;left:-167px;top:-264px;width:801px;height:831px;background:conic-gradient(rgb(0 0 0 / 0) 0%,rgb(238 206 45 / .55) 9%,rgb(0 0 0 / 0) 22%,rgb(0 0 0 / 0) 56%,rgb(193 156 38 / .28) 66%,rgb(0 0 0 / 0) 78%);transform:rotate(48deg);animation:gp-spin 18s linear infinite}
@keyframes gp-spin{to{transform:rotate(408deg)}}
.gp-meter-head{position:absolute;left:26px;top:30px;width:341px;display:flex;align-items:center;justify-content:space-between}
.gp-meter-head b{display:flex;align-items:center;gap:6px;font-size:16px;line-height:16px;font-weight:700;letter-spacing:-.16px;color:var(--gp-ink)}
.gp-meter-head span{font-size:14px;line-height:14px;font-weight:500;color:rgb(13 13 13 / .4)}
.gp-strips{position:absolute;left:0;top:69px;width:393px;height:62px}
.gp-strip-layer{position:absolute;left:0;top:0;width:393px;height:62px}
.gp-strip-layer--b5{filter:blur(5px);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 4%,transparent 17%,transparent 83%,#000 96%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,#000 4%,transparent 17%,transparent 83%,#000 96%,#000 100%)}
.gp-strip-layer--b14{filter:blur(14px);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 1%,transparent 8%,transparent 92%,#000 99%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,#000 1%,transparent 8%,transparent 92%,#000 99%,#000 100%)}
.gp-strip-clip{position:absolute;left:0;overflow:hidden;width:393px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 3%,#000 8%,#000 92%,transparent 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,transparent 3%,#000 8%,#000 92%,transparent 97%,transparent 100%)}
.gp-strip-clip--lab{top:0;height:14px}
/* lit vs unlit = one fixed mask at the centre line, so ticks dim as they cross it */
.gp-strip-clip--tick{top:18px;height:21px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 3%,#000 8%,#000 49.7%,rgb(0 0 0 / .24) 50.3%,rgb(0 0 0 / .24) 92%,transparent 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,transparent 3%,#000 8%,#000 49.7%,rgb(0 0 0 / .24) 50.3%,rgb(0 0 0 / .24) 92%,transparent 97%,transparent 100%)}
.gp-strip{position:absolute;left:0;top:0;height:100%;will-change:transform}
.gp-strip span{position:absolute;top:0;font-size:10.5px;line-height:10.5px;letter-spacing:.105px;color:rgb(50 38 8 / .35);transform:translateX(-50%);transition:color .4s ease;white-space:nowrap}
.gp-strip span.is-on{color:rgb(50 38 8)}
.gp-strip i{position:absolute;top:0;width:2px;height:21px;border-radius:1px;background:rgb(168 144 51)}
.gp-marker{position:absolute;left:188.5px;top:112px;width:16px;height:16px}
.gp-meter-foot{position:absolute;left:26px;top:131px;width:341px;height:34px;display:flex;justify-content:space-between;align-items:center;white-space:nowrap}
.gp-num{display:flex;align-items:baseline}
.gp-num-main{display:inline-flex;font-size:25px;line-height:34px;font-weight:500;letter-spacing:-.06em;color:var(--gp-ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum","kern"}
/* digit drum: cells sit on a cylinder seen through 180px perspective */
.gp-drum{position:relative;display:inline-block;width:15px;height:34px;overflow:hidden;perspective:180px;contain:paint;-webkit-mask-image:linear-gradient(transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(transparent 0%,#000 22%,#000 78%,transparent 100%)}
.gp-drum b{position:absolute;left:0;top:0;width:15px;height:34px;text-align:center;font-weight:500;opacity:0;backface-visibility:hidden;will-change:transform,opacity,filter}
.gp-drum>i{display:inline-block;visibility:hidden;font-style:normal}
.gp-comma{display:inline-block;width:9px;overflow:visible;text-align:center;transform:translateX(-3px)}
.gp-num small{margin-left:6px;font-size:14px;font-weight:700;letter-spacing:-.14px;line-height:14px}
.gp-num small span{display:inline-block;transform-origin:center bottom}
.gp-boosted{flex:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:88px;height:26px;border-radius:80px;padding:7px 13px;box-sizing:border-box;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.55'/></svg>") 0 0/80px 80px repeat,linear-gradient(117.58deg,rgb(242 223 142) -2.35%,rgb(238 214 115) 11.91%,rgb(243 222 126) 28.05%,rgb(191 161 59) 87.03%,rgb(177 148 49) 100.15%) 0 0/auto no-repeat;background-blend-mode:screen,normal}
.gp-boosted::before{content:"";position:absolute;inset:0;border-radius:80px;padding:1.2px;
  background:conic-gradient(from 183deg,rgb(199 178 88 / .97) -4.21deg,rgb(115 99 36 / .94) 9.02deg,rgb(112 94 30 / .92) 21.83deg,rgb(237 220 145 / .9) 41.43deg,rgb(150 128 72) 62.99deg,rgb(184 162 86 / .92) 83.06deg,rgb(220 197 113) 120.42deg,rgb(255 248 216) 149.35deg,rgb(113 95 42) 185.93deg,rgb(173 147 67 / .99) 218.85deg,rgb(255 248 216) 245.1deg,rgb(159 134 53 / .88) 269.35deg,rgb(116 94 28 / .96) 283.73deg,rgb(147 120 60) 300.99deg,rgb(255 241 197) 337.05deg,rgb(166 141 60 / .99) 349.31deg,rgb(199 178 88 / .97) 355.79deg,rgb(115 99 36 / .94) 369.02deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
.gp-boosted span{position:relative;font-size:11.5px;line-height:11.5px;font-weight:700;letter-spacing:.0575px;color:rgb(50 38 8 / .85)}

/* ── 5 · payment widget + account list ──────────────────────────── */
/* The well is centred in the tile by JS (margin-top = (549.5 − well height) / 2) so it can grow past the tile and be clipped, as on the reference. */
.gp-pay-body{align-items:flex-start!important}
.gp-well{position:relative;flex:none;width:337px;box-sizing:border-box;padding:10px;border-radius:36px;background:rgb(0 0 0 / .04);box-shadow:0 1px 0 #fff,inset 0 1px 1px rgb(0 0 0 / .08);display:flex;flex-direction:column;margin-top:113.5px}
.gp-paycard{position:relative;flex:none;width:317px;height:156px;box-sizing:border-box;border-radius:26px;background:#fff;border:1px solid rgb(0 0 0 / .05);box-shadow:0 0 6px rgb(0 0 0 / .06);overflow:hidden}
.gp-pay-scr{position:relative;width:315px}
.gp-pay-scr.is-leaving{position:absolute;left:0;top:0;pointer-events:none}
.gp-paycard-in,.gp-pay-in{width:315px;padding:22px 26px 24px;box-sizing:border-box}
.gp-paycard-in{height:156.5px}
/* back row: collapses to 0 on the home and complete screens */
.gp-pay-backrow{flex:none;height:0;overflow:hidden;opacity:0}
.gp-pay-backin{padding:10px 10px 18px 6px}
.gp-pay-back{display:flex;align-items:center;gap:6px;height:18px;font-size:14px;font-weight:700;letter-spacing:-.14px;color:var(--gp-ink)}
.gp-pay-back svg{display:block;flex:none}
.gp-pay-back:focus-visible{outline:2px solid #6366f1;outline-offset:3px;border-radius:6px}
/* amount + review screens */
.gp-amt-l{font-size:14px;line-height:22.4px;font-weight:500;color:rgb(13 13 13 / .5)}
.gp-amt-row{display:flex;align-items:center;justify-content:space-between;height:40px;margin-top:6px}
.gp-amt{display:flex;align-items:flex-end;color:var(--gp-ink);transition:color .2s ease-out}
.gp-amt.is-empty{color:rgb(13 13 13 / .28)}
.gp-amt-cur,.gp-amt-ch>span{display:inline-block;font-size:32px;line-height:1;font-weight:700;letter-spacing:-.04em;transform-origin:50% 50%}
.gp-amt-ch{position:relative;display:flex;align-items:flex-end;perspective:320px;order:2}
.gp-amt-ch>span{will-change:transform,opacity,filter}
.gp-amt.is-empty .gp-amt-ch{order:4}
.gp-caret{order:3;flex:none;width:2px;height:26px;margin:0 0 2px 2px;border-radius:2px;background:var(--gp-ink)}
.gp-amt.is-static .gp-caret{opacity:0}
.gp-clear-w{flex:none;width:18px;display:flex;justify-content:center}
.gp-clear{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;color:var(--gp-ink);transition:background .15s,opacity .2s}
.gp-clear:hover{background:rgb(13 13 13 / .05)}
.gp-clear[aria-disabled=true]{opacity:.25;cursor:default}
.gp-clear[aria-disabled=true]:hover{background:none}
.gp-pay-div{height:1px;margin-top:20px;background:rgb(13 13 13 / .08)}
.gp-popts{margin-top:6px}
.gp-popt{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;margin:0 -12px;border-radius:14px;cursor:pointer;transition:background .15s,opacity .2s}
.gp-popt:hover{background:rgb(13 13 13 / .035)}
.gp-popt[aria-disabled=true]{opacity:.4;cursor:default}
.gp-popt[aria-disabled=true]:hover{background:none}
.gp-popt:focus-visible{outline:2px solid #6366f1;outline-offset:-2px}
.gp-popt b{display:block;font-size:14px;line-height:22.4px;font-weight:500;letter-spacing:-.14px;color:var(--gp-ink)}
.gp-popt span{display:block;margin-top:3px;font-size:14px;line-height:22.4px;color:rgb(13 13 13 / .45)}
.gp-prad{flex:none;width:18px;height:16px;display:flex;justify-content:center}
.gp-prad svg{display:block;transform:scale(.94)}
.gp-prows{margin-top:6px}
.gp-prow{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;line-height:22.4px}
.gp-prow b{font-weight:500;letter-spacing:-.14px;color:var(--gp-ink)}
.gp-prow span{color:rgb(13 13 13 / .5)}
/* complete screen */
.gp-done-head{padding:10px 0 2px;text-align:center}
.gp-done-t{margin-top:20px;font-size:22px;line-height:35.2px;font-weight:700;letter-spacing:-.44px;color:var(--gp-ink)}
.gp-done-s{margin-top:6px;font-size:16px;line-height:25.6px;color:rgb(13 13 13 / .5)}
/* success check — technique ported from the reference (spinner → ring draw → fill pop → tick draw → 3D pop → glow → two ripples) */
.gp-ccp{position:relative;width:54px;height:54px;margin:0 auto}
.gp-ccp-scale{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.46);perspective:800px}
.gp-ccp-wrap{position:relative;width:120px;height:120px;transform-style:preserve-3d}
.gp-ccp-svg{display:block;width:120px;height:120px;transform:rotate(-90deg)}
.gp-ccp-svg circle{fill:none;stroke-width:3.5;stroke-linecap:round}
.gp-ccp .trk{stroke:rgb(0 0 0 / .06)}
.gp-ccp .spn{stroke:#409652;stroke-dasharray:240;stroke-dashoffset:180;transform-origin:center;animation:gp-ccp-spin .8s cubic-bezier(.4,0,.2,1) infinite;transition:opacity .25s ease}
.gp-ccp .cmp{stroke:#409652;stroke-dasharray:301.6;stroke-dashoffset:301.6;opacity:0}
.gp-ccp .fil{fill:#409652;stroke:none;opacity:0;transform-origin:center;transform:scale(0)}
.gp-ccp-mark{position:absolute;top:50%;left:50%;width:50px;height:50px;transform:translate(-50%,-50%) scale(.5);opacity:0}
.gp-ccp-mark path{fill:none;stroke:#409652;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48}
.gp-ccp-glow{position:absolute;top:50%;left:50%;width:70px;height:70px;transform:translate(-50%,-50%) scale(.5);border-radius:50%;background:#409652;filter:blur(24px);opacity:0;pointer-events:none}
.gp-ccp-rip,.gp-ccp-rip2{position:absolute;top:50%;left:50%;width:96px;height:96px;box-sizing:border-box;transform:translate(-50%,-50%);border-radius:50%;opacity:0;pointer-events:none}
.gp-ccp-rip{border:2px solid rgb(64 150 82 / .35)}.gp-ccp-rip2{border:1.5px solid rgb(64 150 82 / .2)}
.gp-ccp.is-done .spn{opacity:0}
.gp-ccp.is-done .gp-ccp-wrap{animation:gp-ccp-pop .9s cubic-bezier(.22,1,.36,1) .12s both}
.gp-ccp.is-done .fil{animation:gp-ccp-fill .6s cubic-bezier(.34,1.56,.64,1) .08s forwards}
.gp-ccp.is-done .cmp{opacity:1;animation:gp-ccp-draw .45s cubic-bezier(.22,1,.36,1) forwards}
.gp-ccp.is-done .gp-ccp-mark path{animation:gp-ccp-draw .4s cubic-bezier(.22,1,.36,1) .38s forwards}
.gp-ccp.is-done .gp-ccp-mark{animation:gp-ccp-mark .45s cubic-bezier(.34,1.56,.64,1) .36s both}
.gp-ccp.is-done .gp-ccp-glow{animation:gp-ccp-glow .8s cubic-bezier(.22,1,.36,1) .1s forwards}
.gp-ccp.is-done .gp-ccp-rip{animation:gp-ccp-rip 1s cubic-bezier(.22,1,.36,1) .4s forwards}
.gp-ccp.is-done .gp-ccp-rip2{animation:gp-ccp-rip2 1.3s cubic-bezier(.22,1,.36,1) .55s forwards}
@keyframes gp-ccp-spin{to{transform:rotate(360deg)}}
@keyframes gp-ccp-draw{to{stroke-dashoffset:0}}
@keyframes gp-ccp-fill{0%{opacity:0;transform:scale(.85)}60%{opacity:.1;transform:scale(1.04)}100%{opacity:.07;transform:scale(1)}}
@keyframes gp-ccp-mark{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes gp-ccp-pop{0%{transform:scale(1) rotateX(0) rotateY(0)}22%{transform:scale(1.15) rotateX(-8deg) rotateY(5deg)}48%{transform:scale(.95) rotateX(3deg) rotateY(-2deg)}72%{transform:scale(1.03) rotateX(-1deg) rotateY(.5deg)}100%{transform:scale(1) rotateX(0) rotateY(0)}}
@keyframes gp-ccp-glow{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{opacity:.2}100%{transform:translate(-50%,-50%) scale(1.6);opacity:.12}}
@keyframes gp-ccp-rip{0%{transform:translate(-50%,-50%) scale(1);opacity:.5;filter:blur(0)}100%{transform:translate(-50%,-50%) scale(2);opacity:0;filter:blur(2px)}}
@keyframes gp-ccp-rip2{0%{transform:translate(-50%,-50%) scale(1);opacity:.35;filter:blur(0)}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0;filter:blur(3px)}}
.gp-paycard .l1,.gp-paycard .l2{display:flex;justify-content:space-between}
.gp-paycard .l1{font-size:14px;line-height:22.4px;font-weight:500;color:rgb(13 13 13 / .5)}
.gp-paycard .l2{align-items:flex-end;height:25px;margin-top:.5px}
.gp-paycard .due{font-size:26px;line-height:26px;font-weight:700;letter-spacing:-.52px;color:var(--gp-ink)}
.gp-paycard .bal{font-size:18px;line-height:18px;font-weight:700;letter-spacing:-.18px;color:rgb(207 166 95)}
.gp-bars{position:relative;width:263px;height:36px;margin-top:25px;display:flex;align-items:flex-end;justify-content:space-between}
.gp-bars i{display:block;width:2px;height:16px;border-radius:2px;background:rgb(71 72 107);transition:background .35s ease}
.gp-bars i.t{height:36px}.gp-bars i.m{background:rgb(71 72 107 / .26)}.gp-bars i.b{background:rgb(91 136 217 / .36)}
.gp-bar-lab{position:absolute;left:0;top:-8px;width:263px;height:29px;display:flex;font-size:10.5px;line-height:10.5px;font-weight:500;letter-spacing:-.105px;pointer-events:none}
.gp-bar-lab span{padding:10px 0 0 8px;box-sizing:border-box}
.gp-bar-lab .a{width:157px;color:rgb(71 72 107)}.gp-bar-lab .b{width:106px;color:rgb(91 136 217)}
/* CTA: lift (−1px) on hover and press (scale .99, +.5px) are a JS spring; the disabled look fades in 200ms */
.gp-cta{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:317px;height:54px;margin-top:18px;border-radius:1000px;background:#0a0a0a;box-shadow:0 8px 16px rgb(0 0 0 / .16);overflow:hidden;color:#fff;font-size:16px;font-weight:700;letter-spacing:-.16px;box-sizing:border-box;padding:1px 6px;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease-out,color .2s ease-out,box-shadow .2s ease-out}
.gp-cta.is-off{background:rgb(13 13 13 / .06);color:rgb(13 13 13 / .3);box-shadow:0 8px 16px rgb(0 0 0 / 0);cursor:default}
.gp-cta.is-off .gp-gloss2{opacity:0}
.gp-cta:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.gp-cta-lab{position:relative;display:inline-flex;align-items:center;justify-content:center}
.gp-cta-lab .cur{position:absolute;white-space:nowrap}
.gp-cta-lab .siz{opacity:0;white-space:nowrap}
.gp-cta .gp-gloss2{position:absolute;left:1px;top:1px;width:315px;height:52px;border-radius:1000px;padding:1px;box-sizing:border-box;background:linear-gradient(rgb(255 255 255 / .5) 0%,rgb(255 255 255 / 0) 25.12%,rgb(255 255 255 / .2) 102.08%);opacity:1;transition:opacity .2s ease;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
/* account row (+ the 12px gap above it) collapses on the review and complete screens */
.gp-acct-row{flex:none;height:74.8px}
.gp-acct-row.is-clipped{overflow:hidden}
.gp-acct{position:relative;top:12px;width:317px;height:63px;overflow:visible}
.gp-acct-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:313px;height:63px;margin-left:2px;padding:8px 25px;border-radius:22px;cursor:pointer;transition:background .15s ease}
.gp-acct-btn:hover,.gp-acct.is-open .gp-acct-btn{background:rgb(13 13 13 / .04)}
.gp-acct-btn:focus-visible{outline:2px solid #6366f1;outline-offset:-2px}
.gp-acct-btn b{display:block;font-size:14px;line-height:22.4px;font-weight:700;letter-spacing:-.14px;color:var(--gp-ink)}
.gp-acct-btn span{display:block;font-size:14px;line-height:22.4px;color:rgb(0 0 0 / .5)}
.gp-backdrop{position:fixed;inset:0;z-index:40;display:none}
.gp-acct.is-open .gp-backdrop{display:block}
.gp-list{position:absolute;left:2px;top:68.5px;width:313px;z-index:50;border-radius:26px;background:#fff;overflow:hidden;box-shadow:0 24px 70px rgb(0 0 0 / .22),0 0 0 1px rgb(0 0 0 / .04);
  opacity:0;pointer-events:none;transform-origin:50% 0;transform:perspective(800px) translateY(-6px) rotateX(-4deg) scale(.97);
  transition:opacity .1s ease-out,transform .2s cubic-bezier(.22,1.6,.36,1)}
.gp-acct.is-open .gp-list{opacity:1;pointer-events:auto;transform:perspective(800px)}
.gp-list-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:14px;line-height:22.4px;color:rgb(13 13 13 / .4)}
.gp-list-head kbd{font:500 12px/19.2px var(--gp-font);width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:rgb(13 13 13 / .06);color:rgb(13 13 13 / .6)}
.gp-list-items{padding:8px}
.gp-opt{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:14px;cursor:pointer;transition:background .15s ease;height:63.5px;box-sizing:border-box}
.gp-opt:hover,.gp-opt[aria-selected="true"]{background:rgb(13 13 13 / .06)}
.gp-opt b{display:block;font-size:14px;line-height:22.4px;font-weight:500;letter-spacing:-.14px}
.gp-opt small{display:block;font-size:12px;line-height:19.2px;font-weight:500;color:rgb(13 13 13 / .45)}
.gp-radio{width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:2px solid rgb(13 13 13 / .25);display:grid;place-items:center;transition:border-color .15s ease}
.gp-opt[aria-selected="true"] .gp-radio{border-color:rgb(13 13 13)}
.gp-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:rgb(13 13 13);transform:scale(0);transition:transform .15s ease}
.gp-opt[aria-selected="true"] .gp-radio::after{transform:scale(1)}
.gp-list-foot{padding:8px;border-top:1px solid rgb(13 13 13 / .06)}
.gp-list-foot div{display:flex;align-items:center;justify-content:space-between;height:42.5px;padding:10px 12px;border-radius:14px;font-size:14px;font-weight:500;letter-spacing:-.14px;cursor:pointer;transition:background .15s ease;box-sizing:border-box}
.gp-list-foot div:hover{background:rgb(13 13 13 / .06)}

/* ── 6 · amount stepper ─────────────────────────────────────────── */
.gp-step{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-radius:12px;background:rgb(13 13 13 / .03);border:1px solid rgb(13 13 13 / .08);transition:border-color .35s ease;cursor:text}
/* reference: the field's border darkens only while the pointer is over the +/− buttons (not the value) */
.gp-step:has(.gp-step-btns:hover),.gp-step:has(.gp-stepper button:focus-visible){border-color:rgb(13 13 13 / .18)}
.gp-step-val{display:flex;align-items:center;gap:2px;min-width:115px;font-size:14px;line-height:22.4px}
.gp-step-val>span{color:rgb(13 13 13 / .7)}
.gp-step-digits{display:flex;align-items:center;height:18px;font-weight:500;color:var(--gp-ink)}
.gp-step-digits .gp-d{position:relative;display:block;height:18px;overflow:hidden;line-height:18px;font-size:14px}
.gp-step-part{display:flex}
.gp-step-digits .gp-d b{display:block;font-weight:500;will-change:transform,opacity,filter}
.gp-step-digits .gp-d b+b{position:absolute;left:0;top:0}
.gp-step-btns{padding:5px;margin:-6px -5px -6px -5px;cursor:default}
.gp-stepper{position:relative;width:34px;height:34px;border-radius:9px;background:rgb(255 255 255 / .5);box-shadow:0 7px 26px rgb(0 0 0 / .12);display:flex;flex-direction:column;overflow:hidden}
.gp-stepper .gp-ring{z-index:1;border-radius:9px}
/* hover: .02 tint, instant. press: a second .02 layer fades in over 200ms (≈ .04 total) and back out on release */
.gp-stepper button{all:unset;box-sizing:border-box;position:relative;z-index:2;width:34px;height:17px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gp-stepper button::before{content:"";position:absolute;inset:0;background:rgb(0 0 0 / .02);opacity:0;transition:opacity .2s ease;pointer-events:none}
.gp-stepper button:hover{background:rgb(0 0 0 / .02)}
.gp-stepper button:active::before{opacity:1}
.gp-stepper button svg{position:relative}
.gp-stepper button:focus-visible{outline:2px solid #6366f1;outline-offset:-2px}
.gp-stepper .gp-div{position:relative;z-index:2;height:0}
.gp-stepper .gp-div::before,.gp-stepper .gp-div::after{content:"";position:absolute;left:0;width:34px;height:1px}
.gp-stepper .gp-div::before{top:0;background:rgb(0 0 0 / .06)}.gp-stepper .gp-div::after{top:1px;background:#fff}

/* ── 7 · order sent ─────────────────────────────────────────────── */
.gp-sent{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:28px;perspective:800px;cursor:pointer}
.gp-sent:focus-visible{outline:2px solid #6366f1;outline-offset:8px;border-radius:24px}
.gp-sent-wrap{position:relative;width:120px;height:120px;transform-style:preserve-3d}
.gp-sent svg.gp-ring-svg{display:block;width:120px;height:120px;transform:rotate(-90deg)}
.gp-sent .trk{fill:none;stroke:rgb(0 0 0 / .06);stroke-width:3.5}
.gp-sent .spin{fill:none;stroke:#409652;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:180;transform-origin:center;animation:gp-rot .8s cubic-bezier(.4,0,.2,1) infinite;opacity:1;transition:opacity .25s ease}
.gp-sent .done{fill:none;stroke:#409652;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:301.6;opacity:0}
.gp-sent .fill{fill:#409652;opacity:0;transform-origin:center;transform:scale(0)}
.gp-sent .chk{position:absolute;left:50%;top:50%;width:50px;height:50px;transform:translate(-50%,-50%) scale(.5);opacity:0}
.gp-sent .chk path{fill:none;stroke:#409652;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48}
.gp-sent .glow{position:absolute;left:50%;top:50%;width:70px;height:70px;border-radius:50%;background:#409652;filter:blur(24px);opacity:0;transform:translate(-50%,-50%) scale(.5);pointer-events:none}
.gp-sent .rip,.gp-sent .rip2{position:absolute;left:50%;top:50%;width:96px;height:96px;border-radius:50%;opacity:0;transform:translate(-50%,-50%);pointer-events:none}
.gp-sent .rip{border:2px solid rgb(64 150 82 / .35)}.gp-sent .rip2{border:1.5px solid rgb(64 150 82 / .2)}
.gp-sent .txt{font-size:17px;line-height:27.2px;font-weight:500;letter-spacing:.3px;min-height:24px;color:rgb(0 0 0 / .35);transition:color .4s ease,opacity .4s ease,filter .4s ease,transform .4s ease;filter:blur(0)}
.gp-sent .txt.out{filter:blur(8px);opacity:0;transform:translateY(6px) scale(.96)}.gp-sent .txt.ok{color:rgb(0 0 0 / .7)}
@keyframes gp-rot{to{transform:rotate(360deg)}}
.gp-sent.is-done .spin{opacity:0}
.gp-sent.is-done .gp-sent-wrap{animation:gp-pop3d .9s cubic-bezier(.22,1,.36,1) .12s both}
.gp-sent.is-done .fill{animation:gp-fillin .6s cubic-bezier(.34,1.56,.64,1) .08s forwards}
.gp-sent.is-done .done{opacity:1;animation:gp-draw .45s cubic-bezier(.22,1,.36,1) forwards}
.gp-sent.is-done .chk path{animation:gp-draw .4s cubic-bezier(.22,1,.36,1) .38s forwards}
.gp-sent.is-done .chk{animation:gp-chkpop .45s cubic-bezier(.34,1.56,.64,1) .36s both}
.gp-sent.is-done .glow{animation:gp-glow .8s cubic-bezier(.22,1,.36,1) .1s forwards}
.gp-sent.is-done .rip{animation:gp-rip1 1s cubic-bezier(.22,1,.36,1) .4s forwards}
.gp-sent.is-done .rip2{animation:gp-rip2 1.3s cubic-bezier(.22,1,.36,1) .55s forwards}
@keyframes gp-draw{to{stroke-dashoffset:0}}
@keyframes gp-fillin{0%{opacity:0;transform:scale(.85)}60%{opacity:.1;transform:scale(1.04)}100%{opacity:.07;transform:scale(1)}}
@keyframes gp-chkpop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes gp-pop3d{0%{transform:scale(1) rotateX(0) rotateY(0)}22%{transform:scale(1.15) rotateX(-8deg) rotateY(5deg)}48%{transform:scale(.95) rotateX(3deg) rotateY(-2deg)}72%{transform:scale(1.03) rotateX(-1deg) rotateY(.5deg)}100%{transform:scale(1) rotateX(0) rotateY(0)}}
@keyframes gp-glow{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{opacity:.2}100%{transform:translate(-50%,-50%) scale(1.6);opacity:.12}}
@keyframes gp-rip1{0%{transform:translate(-50%,-50%) scale(1);opacity:.5;filter:blur(0)}100%{transform:translate(-50%,-50%) scale(2);opacity:0;filter:blur(2px)}}
@keyframes gp-rip2{0%{transform:translate(-50%,-50%) scale(1);opacity:.35;filter:blur(0)}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0;filter:blur(3px)}}

/* ── 8 · timeframe ──────────────────────────────────────────────── */
.gp-tabs{position:relative;display:flex;align-items:center;height:32px}
.gp-tabs-ind{position:absolute;top:0;left:0;height:32px;border-radius:8px;background:rgb(0 0 0 / .08);will-change:transform,width}
.gp-tabs button{all:unset;box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:32px;padding:0 10px;border-radius:8px;cursor:pointer;font-size:14px;line-height:14px;font-weight:700;color:rgb(0 0 0 / .7);transition:color .15s ease}
.gp-tabs button[aria-selected="true"]{color:#000}
.gp-tabs button:focus-visible{outline:2px solid #6366f1;outline-offset:-2px}

/* ── 9 · balance with privacy (measured on the reference) ─────────
   Hide: digit i fades out + blurs 3px + rises 8px while a glass dot rises in from 8px below, 420ms
   cubic-bezier(.25,.1,.25,1), 22ms apart; "$", commas and the point fade 400ms later (+22ms × position);
   the change line fades with the first digit. Show reverses it with the punctuation on the same 22ms ladder. */
.gp-priv{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;padding:12px 0}
.gp-priv-row{position:relative;display:flex;align-items:center}
.gp-priv h1{margin:0;display:flex;align-items:center;font-size:24px;line-height:1.15;font-weight:700;letter-spacing:-.04em;color:var(--gp-ink);font-variant-numeric:tabular-nums}
.gp-priv h1>span{display:inline-block;transition:opacity .42s cubic-bezier(.25,.1,.25,1),filter .42s cubic-bezier(.25,.1,.25,1),transform .42s cubic-bezier(.25,.1,.25,1);transition-delay:var(--dl)}
.gp-pp{white-space:pre;--dl:calc(var(--s) * 22ms)}
.gp-priv.is-hidden .gp-pp{--dl:calc(400ms + var(--s) * 22ms);opacity:0;filter:blur(3px)}
.gp-pc{position:relative;width:.92ch;text-align:center;line-height:1;--dl:calc(var(--i) * 22ms)}
.gp-pc>span{transition:inherit;transition-delay:var(--dl)}
.gp-pc .v{display:inline-block}
.gp-pc .dot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;filter:blur(3px);transform:translateY(8px)}
.gp-pc .dot svg{display:inline-block;width:12px;height:12.8px}
.gp-priv.is-hidden .gp-pc .v{opacity:0;filter:blur(3px);transform:translateY(-8px)}
.gp-priv.is-hidden .gp-pc .dot{opacity:1;filter:blur(0);transform:none}
.gp-priv p{margin:10px 0 0;font-size:14px;line-height:1.3;font-weight:700;letter-spacing:-.005em;color:rgb(192 36 22);font-variant-numeric:tabular-nums;transition:opacity .42s cubic-bezier(.25,.1,.25,1),filter .42s cubic-bezier(.25,.1,.25,1),transform .42s cubic-bezier(.25,.1,.25,1)}
.gp-priv.is-hidden p{opacity:0;filter:blur(3px);transform:translateY(-8px)}
/* eye button: 40px glass disc, appears on hover with the reference's spring curve (350ms) */
.gp-eye-box{position:absolute;left:100%;top:50%;margin-left:16px;transform:translateY(-50%)}
/* hover zone = the balance row + a bridge over the 16px gap, so the button never flickers on the way to it */
.gp-eye-box::before{content:"";position:absolute;right:100%;top:0;bottom:0;width:16px}
.gp-eye{all:unset;box-sizing:border-box;position:relative;width:40px;height:40px;border-radius:200px;background:rgb(255 255 255 / .5);box-shadow:0 9px 32px rgb(0 0 0 / .08);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;transform:scale(.6);
  transition:opacity .35s linear(0,.0424 2.94%,.1369 5.88%,.2506 8.82%,.3654 11.76%,.4719 14.71%,.5662 17.65%,.6471 20.59%,.715 23.53%,.7711 26.47%,.817 29.41%,.8542 32.35%,.8842 35.29%,.9082 38.24%,.9274 41.18%,.9427 44.12%,.9548 47.06%,.9644 50%,.9779 55.88%,.9863 61.76%,.9916 67.65%,.9948 73.53%,.9968 79.41%,.998 85.29%,.999 94.12%,1),transform .35s linear(0,.0424 2.94%,.1369 5.88%,.2506 8.82%,.3654 11.76%,.4719 14.71%,.5662 17.65%,.6471 20.59%,.715 23.53%,.7711 26.47%,.817 29.41%,.8542 32.35%,.8842 35.29%,.9082 38.24%,.9274 41.18%,.9427 44.12%,.9548 47.06%,.9644 50%,.9779 55.88%,.9863 61.76%,.9916 67.65%,.9948 73.53%,.9968 79.41%,.998 85.29%,.999 94.12%,1)}
.gp-priv-row:hover .gp-eye,.gp-eye:focus-visible{opacity:1;transform:none}
.gp-eye:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.gp-eye .gp-ring{z-index:1}
.gp-eye-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-out,filter .2s ease-out,transform .2s ease-out}
.gp-eye-ic svg{display:block}
/* icon swap: the leaving glyph goes up 10px, the new one rises from 10px below */
.gp-eye-ic.is-on{opacity:0;filter:blur(3px);transform:translateY(10px)}
.gp-priv.is-hidden .gp-eye-ic.is-off{opacity:0;filter:blur(3px);transform:translateY(-10px)}
.gp-priv.is-hidden .gp-eye-ic.is-on{opacity:1;filter:blur(0);transform:none}

/* ── 10 · fluid selectors (measured on the reference) ────────────
   CSS states: fill/stroke .3s, tick draws in .15s after a .15s delay, radio dot scales in .1s, hover darkens the
   border to #A8A8A8, switch track .12 → .16 on hover and #409652 when on. The "fluid" part is JS: a press squashes the
   box/circle to (.85, .9) then springs back with a wobble; the switch knob stretches toward where it is going. */
.gp-sel{display:flex;align-items:center;gap:36px}
.gp-chk,.gp-rad{position:relative;display:block;width:22px;height:22px;cursor:pointer}
.gp-chk::after,.gp-rad::after,.gp-swt::after{content:"";position:absolute;inset:-11px}
.gp-chk input,.gp-rad input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;z-index:1}
.gp-chk svg,.gp-rad svg,.gp-swt svg{position:absolute;display:block;pointer-events:none}
.gp-chk .box,.gp-rad .circ{left:-3px;top:-3px;width:28px;height:28px;overflow:visible;transform-origin:50% 50%}
.gp-chk .box path,.gp-rad .circ path{fill:rgb(255 255 255 / .32);stroke:#c1c1c1;stroke-width:1;stroke-linejoin:round;transition:fill .3s,stroke .3s}
.gp-chk:hover .box path,.gp-rad:hover .circ path{stroke:#a8a8a8}
.gp-chk input:checked ~ .box path,.gp-rad input:checked ~ .circ path{fill:#000;stroke:#000}
.gp-chk .tick{left:5px;top:6px;width:12px;height:10px;overflow:visible}
.gp-chk .tick path{fill:none;stroke:#f6f6f6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .15s ease}
.gp-chk input:checked ~ .tick path{stroke-dashoffset:0;transition-delay:.15s}
.gp-rad .inner{left:4px;top:4px;width:14px;height:14px;transform:scale(0);transition:transform .1s}
.gp-rad .inner circle{fill:#f6f6f6}
.gp-rad input:checked ~ .inner{transform:scale(1)}
.gp-swt{position:relative;display:block;width:40px;height:22px;cursor:pointer}
.gp-swt input{appearance:none;-webkit-appearance:none;display:block;width:100%;height:100%;margin:0;border:0;border-radius:11px;background:rgb(0 0 0 / .12);outline:1px solid #c1c1c1;outline-offset:-.5px;cursor:pointer;transition:background .3s,outline-color .3s}
.gp-swt:hover input{background:rgb(0 0 0 / .16);outline-color:#a8a8a8}
.gp-swt input:checked{background:#409652;outline-color:#409652}
.gp-swt input:focus-visible{box-shadow:0 0 0 3px rgb(99 102 241 / .6)}
.gp-chk input:focus-visible ~ .box,.gp-rad input:focus-visible ~ .circ{outline:2px solid #6366f1;outline-offset:2px;border-radius:8px}
.gp-swt .dotk{left:2px;top:2px;width:18px;height:18px;transform-origin:0 50%}
.gp-swt input:checked ~ .dotk{transform:translateX(18px)}

/* ── 2 · card drawer (built at 421, shown at .8) ────────────────── */
.gp-drawer-body{align-items:flex-start!important;padding-top:32px}
.gp-sheet-box{width:337px;height:725px;flex:none}
.gp-sheet{position:relative;width:421.25px;transform:scale(.8);transform-origin:0 0;border-radius:32px;padding:1px;box-sizing:border-box;box-shadow:0 14px 80px rgb(0 0 0 / .28),0 6px 24px rgb(0 0 0 / .08);background:linear-gradient(270deg,#fff 0%,rgb(255 255 255 / 0) 24.61%,#fff 100%);}
.gp-sheet-in{position:relative;box-sizing:border-box;padding:24px;border-radius:31px;background:#f2f2f2;min-height:905px}
.gp-sheet-in::after{content:"";position:absolute;left:0;right:0;top:calc(525px + 248px * var(--gp-a, 0));bottom:0;z-index:6;pointer-events:none;border-radius:0 0 31px 31px;background:linear-gradient(rgb(242 242 242 / 0) 0%,#f2f2f2 52%)}
.gp-sh-head{display:flex;align-items:center;justify-content:space-between;height:33.75px}
.gp-sh-title{display:flex;align-items:center;gap:8px;font-size:14px}
.gp-sh-title .mc{display:block;width:18px;height:18px}
.gp-sh-title button{all:unset;cursor:pointer;font-weight:700;color:var(--gp-ink);position:relative;display:inline-grid}
.gp-sh-title button:focus-visible{outline:2px solid #6366f1;outline-offset:3px;border-radius:4px}
.gp-sh-title .last{font-weight:400;color:rgb(13 13 13 / .4)}
.gp-x{all:unset;box-sizing:border-box;width:33.75px;height:33.75px;padding:1px 6px;border-radius:9px;background:rgb(13 13 13 / .05);display:grid;place-items:center;cursor:pointer;transition:background .15s ease}
.gp-x:hover{background:rgb(13 13 13 / .09)}.gp-x:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.gp-face{position:absolute;inset:0;border-radius:calc(11px + 6px * var(--gp-a,0));overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 130px 150px rgb(0 0 0 / .22),0 70px 70px rgb(0 0 0 / .15),0 26px 30px rgb(0 0 0 / .11),0 6px 10px rgb(0 0 0 / .08),0 1px 2px rgb(0 0 0 / .18)}
.gp-face::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(130% 130% at var(--mx,50%) var(--my,50%),rgb(255 255 255 / .1),rgb(255 255 255 / 0) 55%)}
.gp-front{background:linear-gradient(135deg,#1a1917 0%,#060606 58%);color:#e6dcc3}
.gp-front .art{position:absolute;inset:0;background:radial-gradient(55% 75% at 28% 28%,rgb(190 160 90 / .13),transparent 70%)}
.gp-front .chip{position:absolute;left:22px;top:24px;width:34px;height:26px;border-radius:6px;background:linear-gradient(135deg,#c8ad6a,#6d5a2b)}
.gp-front .mark{position:absolute;right:22px;bottom:20px;font-size:12px;font-weight:700;letter-spacing:.2em;color:rgb(230 220 195 / .7)}
.gp-back{transform:rotateY(180deg);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>") 0 0/160px 160px repeat,
    linear-gradient(90deg,rgb(255 255 255 / .035),rgb(255 255 255 / 0) 62%),
    linear-gradient(180deg,#2a2a2a 0%,#222 8.2%,#272727 27.2%,#181818 56%,#0f0f0f 100%);
  background-blend-mode:soft-light,normal,normal}
.gp-back::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(200% 200% at var(--mx,50%) var(--my,50%),rgb(255 255 255 / .05),rgb(255 255 255 / 0) 75%)}
.gp-card-stage:hover .gp-face::before,.gp-card-stage:hover .gp-back::after{opacity:.57}
.gp-back .mag{position:absolute;left:0;right:0;top:8.2%;height:19%;background:#000}
.gp-back .scaled{position:absolute;left:0;top:0;width:371px;height:236.5px;transform:scale(calc(.6469 + .3531 * var(--gp-a,0)));transform-origin:0 0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 22px 20px;box-sizing:border-box;white-space:nowrap;z-index:2}
.gp-back .legal{position:absolute;left:12.4px;top:7px;right:90px;font:500 5.4px/9px var(--gp-font);letter-spacing:.25px;color:rgb(255 255 255 / .27);white-space:nowrap;overflow:hidden;text-transform:uppercase}
.gp-back .wm{position:absolute;right:12.4px;top:6.2px;font:700 7.2px/10px Georgia,'Times New Roman',serif;letter-spacing:.1px;color:rgb(255 255 255 / .38)}
.gp-back .nfc{position:absolute;left:23px;top:108px;width:16px;height:19px;color:rgb(255 255 255 / .36)}
.gp-back .row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.gp-back .cols{display:flex;gap:16px}
.gp-back .lab{font-size:9px;line-height:14.4px;font-weight:600;letter-spacing:.72px;color:rgb(255 255 255 / .55);text-transform:uppercase}
.gp-back .val{font-size:16px;line-height:25.6px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.64px;color:#fff;background:linear-gradient(0deg,rgb(255 255 255 / .5),rgb(255 255 255 / .5)),linear-gradient(147.32deg,rgb(203 203 204) 9.43%,rgb(152 152 152) 56.02%,rgb(101 102 103) 80.46%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 .407px 0 #000)}
.gp-lock{margin-top:0;padding:4px 24px;border-radius:20px;background:rgb(0 0 0 / .03);border:1px solid rgb(0 0 0 / .08);box-sizing:border-box}
.gp-lock-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-size:14px;line-height:22.4px}
.gp-lock-row+.gp-lock-row{border-top:1px solid rgb(0 0 0 / .08);line-height:18px}
.gp-lock-row button.go{line-height:18px;all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:100%;font-size:14px}
.gp-tog{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;width:40px;height:22px;padding:2px;border-radius:11px;background:rgb(0 0 0 / .12);cursor:pointer;transition:background .3s ease}
.gp-tog::after{content:"";width:18px;height:18px;border-radius:50%;background:#f6f6f6;box-shadow:0 1px 3px rgb(0 0 0 / .2);transition:transform .3s var(--gp-spring)}
.gp-tog:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.gp-sec{display:flex;align-items:center;justify-content:space-between;padding:0 24px;margin-top:28px;font-size:14px;line-height:22.4px;font-weight:500;color:rgb(13 13 13 / .5)}
.gp-sec svg{width:16px;height:16px;color:var(--gp-ink)}
.gp-group{margin-top:12px;padding:4px 24px;border-radius:20px;background:#fff;box-shadow:0 1px 2px rgb(0 0 0 / .04),0 10px 24px rgb(0 0 0 / .04)}
.gp-grow{display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-size:14px;line-height:22.4px;font-variant-numeric:tabular-nums}
.gp-grow+.gp-grow{border-top:1px solid rgb(13 13 13 / .06)}
.gp-grow .k{color:rgb(13 13 13 / .5);display:flex;align-items:center;gap:6px}
.gp-grow .v{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--gp-ink)}
.gp-ic{all:unset;box-sizing:border-box;position:relative;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;cursor:pointer;color:var(--gp-ink)}
.gp-ic:hover{background:rgb(13 13 13 / .05)}.gp-ic:focus-visible{outline:2px solid #6366f1;outline-offset:1px}
.gp-ic svg{grid-area:1/1;width:16px;height:16px;transition:opacity .2s ease,transform .3s var(--gp-spring),filter .2s ease}
.gp-ic .b{opacity:0;transform:scale(.5);filter:blur(2px)}
.gp-ic.is-done .a{opacity:0;transform:scale(.5);filter:blur(2px)}.gp-ic.is-done .b{opacity:1;transform:none;filter:none;color:#409652}
.gp-dl{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:500;color:var(--gp-ink);font-size:14px}
.gp-dl svg{width:16px;height:16px}


/* ── card drawer motion (driven by springs in JS: --gp-a layout, --gp-r rotation) ───────── */
@property --gp-f{syntax:'<number>';inherits:true;initial-value:0}
.gp-sheet{--gp-a:0;--gp-r:0;--gp-f:0;--gp-fh:0px;transition:--gp-f .6s var(--gp-ease)}
.gp-sheet.is-locked{--gp-f:1;transition:--gp-f 1.2s cubic-bezier(0,0,.58,1)}
.gp-card-stage{cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;justify-content:center;margin-top:36px;height:calc(153px + 84.5px * var(--gp-a))}   /* no perspective: the reference squeezes flat */
.gp-card-stage:focus-visible{outline:2px solid #6366f1;outline-offset:6px;border-radius:14px}
.gp-card3d{position:relative;width:calc(240px + 131px * var(--gp-a));height:calc(153px + 84.5px * var(--gp-a));transform-style:preserve-3d;transform:rotateY(calc(180deg * var(--gp-r)))}
/* frozen layer sweeps in from the corners and the top-left (two masks added together) */
.gp-frozen{position:absolute;inset:0;z-index:2;pointer-events:none;
  /* procedural frost tuned against the reference: edge-detected posterised noise (crackle), jittered, patchy, brighter towards the edges */
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20740%20472'%20width%3D'740'%20height%3D'472'%20preserveAspectRatio%3D'none'%3E%3Cdefs%3E%3CradialGradient%20id%3D'm'%20cx%3D'50%25'%20cy%3D'50%25'%20r%3D'75%25'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23fff'%20stop-opacity%3D'0.3'%2F%3E%3Cstop%20offset%3D'.62'%20stop-color%3D'%23fff'%20stop-opacity%3D'0.65'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%23fff'%20stop-opacity%3D'1'%2F%3E%3C%2FradialGradient%3E%3Cmask%20id%3D'mk'%3E%3Crect%20width%3D'740'%20height%3D'472'%20fill%3D'url(%23m)'%2F%3E%3C%2Fmask%3E%20%3Cfilter%20id%3D'a'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%20color-interpolation-filters%3D'sRGB'%3E%20%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.04%20.05'%20numOctaves%3D'3'%20seed%3D'8'%20result%3D'n'%2F%3E%20%3CfeComponentTransfer%20in%3D'n'%20result%3D'q'%3E%3CfeFuncR%20type%3D'discrete'%20tableValues%3D'0.000%200.111%200.222%200.333%200.444%200.556%200.667%200.778%200.889%201.000'%2F%3E%3C%2FfeComponentTransfer%3E%20%3CfeConvolveMatrix%20in%3D'q'%20order%3D'3'%20kernelMatrix%3D'-1%20-1%20-1%20-1%208%20-1%20-1%20-1%20-1'%20preserveAlpha%3D'true'%20result%3D'e'%2F%3E%20%3CfeColorMatrix%20in%3D'e'%20type%3D'matrix'%20values%3D'0%200%200%200%20.87%200%200%200%200%20.94%200%200%200%200%201%203.2%200%200%200%200'%20result%3D'c'%2F%3E%20%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.006%20.008'%20numOctaves%3D'2'%20seed%3D'9'%20result%3D'pn'%2F%3E%20%3CfeColorMatrix%20in%3D'pn'%20type%3D'matrix'%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%202.6%200%200%200%20-0.75'%20result%3D'p'%2F%3E%20%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.35'%20numOctaves%3D'1'%20seed%3D'13'%20result%3D'j'%2F%3E%20%3CfeDisplacementMap%20in%3D'c'%20in2%3D'j'%20scale%3D'7'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%20result%3D'cj'%2F%3E%20%3CfeComposite%20in%3D'cj'%20in2%3D'p'%20operator%3D'in'%2F%3E%20%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D'740'%20height%3D'472'%20filter%3D'url(%23a)'%20mask%3D'url(%23mk)'%2F%3E%3C%2Fsvg%3E") 0 0/100% 100% no-repeat,
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20740%20472'%20width%3D'740'%20height%3D'472'%20preserveAspectRatio%3D'none'%3E%3Cfilter%20id%3D'g'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.6'%20numOctaves%3D'2'%20seed%3D'3'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%20.9%200%200%200%200%20.95%200%200%200%200%201%206%200%200%200%20-4.4'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'740'%20height%3D'472'%20filter%3D'url(%23g)'%2F%3E%3C%2Fsvg%3E") 0 0/100% 100% no-repeat,
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20740%20472'%20width%3D'740'%20height%3D'472'%20preserveAspectRatio%3D'none'%3E%3Cfilter%20id%3D'h'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%20color-interpolation-filters%3D'sRGB'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.005'%20numOctaves%3D'3'%20seed%3D'4'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%20.78%200%200%200%200%20.86%200%200%200%200%20.95%201%200%200%200%20-0.58'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'740'%20height%3D'472'%20filter%3D'url(%23h)'%2F%3E%3C%2Fsvg%3E") 0 0/100% 100% no-repeat,
    radial-gradient(110% 130% at 50% 50%,rgb(26 41 56 / 0) 34%,rgb(140 168 196 / 0.45) 100%),
    linear-gradient(180deg,rgb(30 46 62 / .38),rgb(14 24 34 / .5));
  box-shadow:inset 0 0 22px 4px rgb(206 226 246 / 0.55),inset 0 0 4px 1px rgb(255 255 255 / .55);
  -webkit-mask-image:radial-gradient(circle,rgb(0 0 0 / 0) calc(135% - 175% * var(--gp-f)),#000 calc(163% - 175% * var(--gp-f))),radial-gradient(calc(58% * var(--gp-f)) calc(66.7% * var(--gp-f)) at 30% 30%,#000 55%,rgb(0 0 0 / 0) 100%),radial-gradient(calc(48% * var(--gp-f)) calc(55.2% * var(--gp-f)) at 73% 24%,#000 55%,rgb(0 0 0 / 0) 100%),radial-gradient(calc(62% * var(--gp-f)) calc(71.3% * var(--gp-f)) at 82% 66%,#000 55%,rgb(0 0 0 / 0) 100%),radial-gradient(calc(66% * var(--gp-f)) calc(75.9% * var(--gp-f)) at 42% 82%,#000 55%,rgb(0 0 0 / 0) 100%),radial-gradient(calc(46% * var(--gp-f)) calc(52.9% * var(--gp-f)) at 15% 58%,#000 55%,rgb(0 0 0 / 0) 100%);
          mask-image:radial-gradient(circle,rgb(0 0 0 / 0) calc(135% - 175% * var(--gp-f)),#000 calc(163% - 175% * var(--gp-f))),radial-gradient(calc(58% * var(--gp-f)) calc(66.7% * var(--gp-f)) at 30% 30%,#000 55%,rgb(0 0 0 / 0) 100%),radial-gradient(calc(48% * var(--gp-f)) calc(55.2% * var(--gp-f)) at 73% 24%,#000 55%,rgb(0 0 0 / 0) 100%),radial-gradient(calc(62% * var(--gp-f)) calc(71.3% * var(--gp-f)) at 82% 66%,#000 55%,rgb(0 0 0 / 0) 100%),radial-gradient(calc(66% * var(--gp-f)) calc(75.9% * var(--gp-f)) at 42% 82%,#000 55%,rgb(0 0 0 / 0) 100%),radial-gradient(calc(46% * var(--gp-f)) calc(52.9% * var(--gp-f)) at 15% 58%,#000 55%,rgb(0 0 0 / 0) 100%)}
.gp-front .art,.gp-front .chip,.gp-front .mark{z-index:1}
.gp-back .scaled{z-index:3}
.gp-fold{height:calc(var(--gp-fh) * var(--gp-a));margin-top:15.6px;overflow:hidden;position:relative;z-index:1}
.gp-fold>div{opacity:0;transition:opacity .1s ease-out}                     /* the whole panel fades out fast on close... */
.gp-sheet.is-open .gp-fold>div{opacity:1;transition:opacity .16s ease-out .16s}   /* ...and arrives late on open, after the height has started growing */
.gp-lock{transform:translateY(12px);transition:transform .4s ease-out}
.gp-sheet.is-open .gp-lock{transform:none;transition:transform .6s var(--gp-ease) .075s}

.gp-note{margin:12px 0 0;padding:0 4px;text-align:center;font-size:12px;line-height:18px;color:rgb(13 13 13 / .5);opacity:0;filter:blur(3px);transition:opacity .3s ease-out,filter .3s ease-out}
.gp-sheet.is-open .gp-note{opacity:1;filter:none;transition:opacity .5s var(--gp-ease) .32s,filter .5s var(--gp-ease) .32s}
.gp-tog{transition:background .3s ease}
.gp-tog[aria-checked="true"]{background:#409652}.gp-tog[aria-checked="true"]::after{transform:translateX(18px)}
.gp-sh-title button span{grid-area:1/1;transition:opacity .2s ease-out,filter .2s ease-out}
.gp-sh-title button .alt{opacity:0;filter:blur(3px)}
.gp-sheet.is-open .gp-sh-title button .main{opacity:0;filter:blur(3px)}.gp-sheet.is-open .gp-sh-title button .alt{opacity:1;filter:none}
/* account number: each character swaps on its own, 50ms apart */
.gp-secret{display:inline-flex}
.gp-secret .cell{position:relative;display:inline-grid}
.gp-secret .cell span{grid-area:1/1;display:block;transition:opacity .28s var(--gp-ease),filter .28s var(--gp-ease),transform .28s var(--gp-ease);transition-delay:calc(var(--i) * 50ms)}
.gp-secret .cell .b{opacity:0;filter:blur(3px);transform:translateY(10px)}
.gp-secret.is-shown .cell .a{opacity:0;filter:blur(3px);transform:translateY(-10px)}
.gp-secret.is-shown .cell .b{opacity:1;filter:none;transform:none}


/* ═══ second set (measured on the reference's "mint" gallery; ported techniques, original markup) ═══ */

/* ── 11 · animated number: changed digits leave down 6px (rotateX −13°, .9, blur 4) and the new ones drop in
   from −8px (rotateX 18°, .84, blur 4) on a spring (ζ .6, ω 26), 33ms apart; auto-shuffles every 2.5s */
.gp-anum{display:inline-block;font-size:32px;line-height:38px;font-weight:600;color:#000;font-variant-numeric:tabular-nums;white-space:nowrap}
.gp-anum-v{position:relative;display:inline-block;perspective:320px}
.gp-anum-v>span{display:inline-block;line-height:1;transform-origin:50% 0;will-change:transform;backface-visibility:hidden}
.gp-anum-v>span.is-out{position:absolute;top:0}

/* ── 12 · cards inset: inset well + nested white card (fine noise) + black CTA below ── */
.gp-inset{position:relative;width:280px;box-sizing:border-box;padding:10px;border:1px solid transparent;border-radius:36px;background:rgb(0 0 0 / .04);box-shadow:0 1px 0 #fff,inset 0 1px 1px rgb(0 0 0 / .08)}
.gp-inset-card{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid transparent;border-radius:26px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.035'/></svg>");box-shadow:0 1px 2px rgb(0 0 0 / .04),0 10px 24px rgb(0 0 0 / .04)}
.gp-inset-card h3{margin:0;font-size:18px;line-height:28px;font-weight:700;text-wrap:balance}
.gp-inset-card p{margin:0;font-size:14px;line-height:20px;color:rgb(0 0 0 / .698);text-wrap:balance}
.gp-inset-foot{padding-top:12px}
.gp-mbtn{isolation:isolate;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:48px;padding:0 24px;border-radius:1000px;background-color:#000;color:#fff;font-size:16px;font-weight:500;letter-spacing:-.01em;box-shadow:0 8px 16px rgb(0 0 0 / .16);transition:box-shadow .2s,background-image .2s,transform 70ms,color .3s;-webkit-tap-highlight-color:transparent;user-select:none}
.gp-mbtn::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(146.26deg,#000 8.55%,#000 57.49%,#000 86.93%);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
.gp-mbtn::after{content:"";position:absolute;inset:1px;padding:1px;border-radius:inherit;background:linear-gradient(rgb(255 255 255 / .5) 0%,rgb(255 255 255 / 0) 25.12%,rgb(255 255 255 / .2) 102.08%);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
.gp-mbtn:hover{background-image:linear-gradient(rgb(255 255 255 / .1),rgb(255 255 255 / .1))}
.gp-mbtn:active{transform:scale(.98);box-shadow:none}

/* ── 13 · underline tabs: the bar slides 200ms ease (the reference's base rule; its demo overrides it to a jump) ── */
.gp-ul-tabs{width:100%;max-width:260px}
.gp-ul-list{position:relative;display:flex;align-items:center;width:100%}
.gp-ul-list::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:rgb(0 0 0 / .05)}
.gp-ul-list button{all:unset;box-sizing:border-box;flex:1 1 0;min-width:max-content;text-align:center;padding:16px 32px;font-size:18px;line-height:28px;font-weight:700;color:rgb(0 0 0 / .5);cursor:pointer;transition:color .1s}
.gp-ul-list button[aria-selected=true]{color:#000}
.gp-ul-list button:focus-visible{outline:2px solid #000;outline-offset:-2px}
.gp-ul-ind{position:absolute;bottom:0;left:0;height:2px;background:#000;transition:left .2s ease,width .2s ease}
.gp-ul-ind.is-init{transition:none}
.gp-ul-panel{padding-top:16px}

/* ── 14 · select: 52px field, glass popover 6px below (opacity 70ms ease-out in / ease-in out), radio marks ── */
.gp-select{position:relative;width:200px}
.gp-sel-trg{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;width:100%;height:52px;padding:0 32px 0 16px;border-radius:12px;border:1px solid rgb(0 0 0 / .05);background:rgb(0 0 0 / .03);font-size:14px;line-height:20px;font-weight:700;color:#000;cursor:pointer}
.gp-sel-trg:hover:not([aria-expanded=true]):not(:focus-visible){border-color:rgb(0 0 0 / .14)}
.gp-sel-trg[aria-expanded=true],.gp-sel-trg:focus-visible{border-color:#000;box-shadow:inset 0 0 0 1px #000}
.gp-sel-trg .chev{position:absolute;right:12px;top:50%;margin-top:-8px;display:inline-flex;color:rgb(0 0 0 / .698)}
.gp-sel-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:200px;box-sizing:border-box;padding:8px 0;border-radius:18px;background:rgb(250 250 250 / .82);-webkit-backdrop-filter:blur(56px);backdrop-filter:blur(56px);box-shadow:0 12px 40px rgb(0 0 0 / .12),0 0 0 1px rgb(0 0 0 / .05);opacity:0;transition:opacity 70ms ease-in}
.gp-sel-pop.is-open{opacity:1;transition:opacity 70ms ease-out}
.gp-sel-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 6px;padding:8px 14px;border-radius:12px;font-size:14px;line-height:20px;font-weight:500;color:#000;cursor:pointer}
.gp-sel-opt.is-hl{background:rgb(0 0 0 / .05)}
.gp-sel-opt .rd{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:1px solid rgb(0 0 0 / .08);transition:border-color .1s}
.gp-sel-opt .rd i{width:8px;height:8px;border-radius:50%;background:#fff;opacity:0;transform:scale(.6)}
.gp-sel-opt[aria-selected=true] .rd{border-color:#0d0d0d;background:#0d0d0d}
.gp-sel-opt[aria-selected=true] .rd i{opacity:1;transform:scale(1)}

/* ── 15 · glass buttons: tinted glass, gradient 1px rim (::before), inner gloss stroke (.st) ── */
.gp-gbtns{display:flex;flex-direction:column;align-items:center;gap:20px}
.gp-gbtn{position:relative;display:flex;align-items:center;justify-content:center;width:160px;height:48px;border-radius:1000px;font-size:16px;font-weight:500;letter-spacing:-.01em;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:transform .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.gp-gbtn:hover{transform:translateY(-1px)}
.gp-gbtn:active{transform:translateY(.5px)}
.gp-gbtn::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
.gp-gbtn .st{position:absolute;inset:1px;z-index:3;box-sizing:border-box;padding:1px;border-radius:1000px;pointer-events:none;background:linear-gradient(180deg,rgb(255 255 255 / .5) 0%,rgb(255 255 255 / 0) 25.12%,rgb(255 255 255 / .2) 102.08%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
.gp-gbtn .st--light{background:linear-gradient(180deg,#fff 0%,rgb(255 255 255 / 0) 25.12%,rgb(255 255 255 / .7) 102.08%)}
.gp-gbtn .st--blue{background:linear-gradient(180deg,rgb(255 255 255 / .9) 0%,rgb(255 255 255 / 0) 25.12%,rgb(255 255 255 / .6) 102.08%)}
.gp-gbtn .st--color{background:linear-gradient(180deg,rgb(255 255 255 / .6) 0%,rgb(255 255 255 / 0) 25.12%,rgb(255 255 255 / .5) 102.08%)}
.gp-gbtn--dark{background:rgb(0 0 0 / .96);box-shadow:0 8px 16px rgb(0 0 0 / .16);color:#fff}
.gp-gbtn--dark::before{background:linear-gradient(146.26deg,#000 8.55%,#000 57.49%,#000 86.93%)}
.gp-gbtn--light{background:rgb(255 255 255 / .5);box-shadow:0 8px 16px rgb(0 0 0 / .06);color:#1a1a1a}
.gp-gbtn--light::before{background:linear-gradient(270deg,rgb(0 0 0 / .07) 0%,rgb(0 0 0 / 0) 24.61%,rgb(0 0 0 / .05) 100%)}
.gp-gbtn--cream{background:rgb(228 222 158 / .5);box-shadow:0 8px 16px rgb(0 0 0 / .06);color:#8b7d4a}
.gp-gbtn--cream::before{background:linear-gradient(273.75deg,#bcb676 3.96%,#eae4a4 34.23%,#bcb676 98.29%)}
.gp-gbtn--blue{background:rgb(193 202 237 / .5);box-shadow:0 8px 16px rgb(0 0 0 / .04);color:#4a6fa5}
.gp-gbtn--blue::before{background:linear-gradient(273.75deg,#6c9be6 3.96%,#b2e1f5 34.23%,#6291dc 98.29%)}
.gp-gbtn--green{background:rgb(53 121 65 / .55);box-shadow:0 8px 16px rgb(0 0 0 / .08);color:#fff}
.gp-gbtn--green::before{background:linear-gradient(273.75deg,#2a6b38 3.96%,#4a9b58 34.23%,#357941 98.29%)}
.gp-gbtn--red{background:rgb(226 43 24 / .7);box-shadow:0 8px 16px rgb(0 0 0 / .08);color:#fff}
.gp-gbtn--red::before{background:linear-gradient(273.75deg,#de3221 3.96%,#ff9d8c 34.23%,#c42828 98.29%)}

/* ── 16 · chips: single choice, black when selected ── */
.gp-chips{display:flex;align-items:center;gap:6px}
.gp-chip{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:1000px;font-size:14px;font-weight:700;letter-spacing:.14px;line-height:1;white-space:nowrap;background-color:rgb(0 0 0 / .05);color:#000;transition:color .1s}
.gp-chip:hover{background-color:rgb(0 0 0 / .08)}
.gp-chip[aria-pressed=true]{background-color:#000;color:#fff}
.gp-chip:focus-visible{outline:2px solid #000;outline-offset:2px}

/* ── 17 · tags: metallic (noise + gradient fill, conic rim that turns 18° on hover) and tone tags ── */
.gp-tags{display:flex;flex-direction:column;align-items:center;gap:36px}
.gp-tags-metal{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.gp-tags-tone{display:grid;grid-template-columns:repeat(3,auto);gap:16px 14px;place-items:center}
.gp-mtag{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:22.5px;padding:6px 12px;border-radius:1000px;font-size:10.5px;line-height:1;font-weight:900;white-space:nowrap;background-blend-mode:screen,normal;background-size:64px 64px,auto;background-repeat:repeat,no-repeat;box-shadow:0 6px 13px rgb(0 0 0 / .08),0 1.5px 3px rgb(0 0 0 / .06);outline:none}
.gp-mtag::before{content:"";position:absolute;inset:0;padding:1.5px;border-radius:inherit;pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
.gp-mtag:hover,.gp-mtag:focus-visible{--mr:18deg}
.gp-mtag--silver{color:rgb(0 0 0 / .5);text-shadow:0 .5px 0 rgb(255 255 255 / .15);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.18'/></svg>"),linear-gradient(118.53deg,#dddfe2 17.3%,#e8e9eb 37.34%,#c1c3c7 68.18%,#a0a4aa 84.24%)}
.gp-mtag--silver::before{background:conic-gradient(from calc(180deg + var(--mr,0deg)) at 50% 50%,rgb(177 179 185 / .97) -4.21deg,rgb(93 99 108 / .94) 9.02deg,rgb(85 91 105 / .92) 21.83deg,rgb(223 223 223 / .9) 41.43deg,#72798a 62.99deg,rgb(169 171 179 / .92) 83.06deg,#cbcdd2 120.42deg,#fff 149.35deg,#5e646a 185.93deg,rgb(142 149 157 / .99) 218.85deg,#fff 245.1deg,rgb(126 134 146 / .88) 269.35deg,rgb(87 93 107 / .96) 283.73deg,#6d7580 300.99deg,#f1f1f3 337.05deg,rgb(151 154 163 / .99) 349.31deg,rgb(177 179 185 / .97) 355.79deg,rgb(93 99 108 / .94) 369.02deg),#b1b8bf}
.gp-mtag--gold{color:rgb(0 0 0 / .6);text-shadow:0 .5px 0 rgb(255 255 255 / .15);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.18'/></svg>"),linear-gradient(117.58deg,#e5e3df -2.35%,#e4e3de 11.91%,#edebe6 28.05%,#9f9b91 87.03%,#9d998f 100.15%)}
.gp-mtag--gold::before{background:conic-gradient(from calc(183deg + var(--mr,0deg)) at 50% 50%,rgb(187 186 182 / .97) -4.21deg,rgb(108 104 93 / .94) 9.02deg,rgb(107 102 89 / .92) 21.83deg,rgb(221 219 213 / .9) 41.43deg,#8c8674 62.99deg,rgb(172 169 160 / .92) 83.06deg,#cfccc2 120.42deg,#fffefc 149.35deg,#6c6960 185.93deg,rgb(165 160 147 / .99) 218.85deg,#fff 245.1deg,rgb(151 146 131 / .88) 269.35deg,rgb(110 104 88 / .96) 283.73deg,#888476 300.99deg,#f9f9f6 337.05deg,rgb(158 154 142 / .99) 349.31deg,rgb(187 186 182 / .97) 355.79deg,rgb(108 104 93 / .94) 369.02deg)}
.gp-mtag--graphite{color:#fff;text-shadow:0 .25px 0 rgb(0 0 0 / .35);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.18'/></svg>"),linear-gradient(99.27deg,#7a7a7a 7.62%,#383838 53.53%,#2e2e2e 92.27%)}
.gp-mtag--graphite::before{background:conic-gradient(from calc(173.54deg + var(--mr,0deg)) at 50% 50%,rgb(65 65 65 / .79) -4.21deg,rgb(20 20 20 / .81) 9.02deg,rgb(16 16 16 / .81) 21.83deg,rgb(64 64 64 / .82) 41.43deg,rgb(58 58 58 / .64) 62.99deg,rgb(54 54 54 / .86) 83.06deg,rgb(100 100 100 / .83) 120.42deg,rgb(168 168 168 / .81) 149.35deg,rgb(0 0 0 / .76) 185.93deg,rgb(48 48 48 / .87) 218.85deg,rgb(94 94 94 / .85) 245.1deg,rgb(42 42 42 / .74) 269.35deg,rgb(54 54 54 / .83) 283.73deg,rgb(0 0 0 / .8) 300.99deg,rgb(91 91 91 / .78) 337.05deg,rgb(41 41 41 / .73) 349.31deg,rgb(65 65 65 / .79) 355.79deg,rgb(20 20 20 / .81) 369.02deg)}
.gp-mtag--steel{color:#fff;text-shadow:0 .25px 0 rgb(0 0 0 / .25);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.18'/></svg>"),linear-gradient(112.9deg,#455c68 26.07%,#a2b2ba 93.62%)}
.gp-mtag--steel::before{background:conic-gradient(from calc(180deg + var(--mr,0deg)) at 50% 50%,rgb(177 179 185 / .97) -4.21deg,rgb(93 99 108 / .94) 9.02deg,rgb(85 91 105 / .92) 21.83deg,rgb(190 195 200 / .85) 41.43deg,#72798a 62.99deg,rgb(169 171 179 / .92) 83.06deg,#a8aeb5 120.42deg,#bfc5cb 149.35deg,#5e646a 185.93deg,rgb(142 149 157 / .99) 218.85deg,#bfc5cb 245.1deg,rgb(126 134 146 / .88) 269.35deg,rgb(87 93 107 / .96) 283.73deg,#6d7580 300.99deg,#b8bcc2 337.05deg,rgb(151 154 163 / .99) 349.31deg,rgb(177 179 185 / .97) 355.79deg,rgb(93 99 108 / .94) 369.02deg),#b1b8bf}
.gp-ttag{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:20px;padding:4px 12px;border-radius:1000px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.18px;white-space:nowrap}
.t-neutral{background:rgb(0 0 0 / .05);color:rgb(0 0 0 / .698)}
.t-highlight{background:rgb(86 73 151 / .12);color:rgb(86 73 151)}
.t-info{background:rgb(48 95 170 / .15);color:rgb(48 95 170)}
.t-positive{background:rgb(64 150 82 / .1);color:rgb(64 150 82)}
.t-warning{background:rgb(218 201 103 / .2);color:rgb(126 104 18)}
.t-negative{background:rgb(192 36 22 / .08);color:rgb(192 36 22)}


/* ── 18 · segmented controls: three skins, one behaviour — the pill's edges ride two springs (lead ζ .76 ω 21,
   trail ζ .76 ω 18), stretching on the way and overshooting ~2.5%, like the timeframe and currency switch ── */
.gp-segs3{display:flex;flex-direction:column;align-items:center;gap:40px;padding:8px}
.gp-sc{position:relative;isolation:isolate;display:inline-flex;align-items:center;box-sizing:border-box}
.gp-sc button{all:unset;box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:rgb(0 0 0 / .5);cursor:pointer;transition:color .1s}
.gp-sc button[aria-checked=true]{color:#000}
.gp-sc button:focus-visible{outline:2px solid #000;outline-offset:2px}
.gp-sc-ind{position:absolute;left:0;z-index:0;pointer-events:none;will-change:transform,width}
.gp-sc--pill{display:flex;max-width:200px;height:40px;padding:4px;border-radius:999px;background:#fff;box-shadow:0 8px 24px rgb(0 0 0 / .05)}
.gp-sc--pill::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(317.27deg,#fff .65%,rgb(255 255 255 / 0) 25.1%,#fff 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
.gp-sc--pill button{flex:1 1 0;padding:6px 16px;border-radius:999px;line-height:normal;transition:color .1s ease-out}
.gp-sc--pill button:hover{color:#000}
.gp-sc--pill .gp-sc-ind{top:4px;bottom:4px;border-radius:999px;background:rgb(0 0 0 / .08)}
.gp-sc--tf button{padding:7px 8.5px;line-height:20px;border-radius:8px}
.gp-sc--tf .gp-sc-ind{top:0;bottom:0;border-radius:8px;background:rgb(0 0 0 / .08)}
.gp-sc--well{height:42px;padding:4px;border-radius:999px;background:#f2f2f2;box-shadow:0 -.5px 0 rgb(0 0 0 / .08),0 1px 0 #fff}
.gp-sc--well button{padding:7px 16px;line-height:20px;border-radius:999px}
.gp-sc--well .gp-sc-ind{top:4px;bottom:4px;border-radius:999px;background:#fff;box-shadow:0 1px 4px rgb(0 0 0 / .1)}


/* ── 19 · card: raised (#f9f9f9, white hairline, soft drop) vs flat (#ebebeb) ── */
.gp-cards2{display:flex;flex-direction:column;align-items:center;gap:16px}
.gp-card-raised,.gp-card-flat{width:180px;height:72px;border-radius:16px}
.gp-card-raised{background:#f9f9f9;border:1px solid #fff;box-shadow:0 8px 24px rgb(0 0 0 / .05)}
.gp-card-flat{background:#ebebeb;border:1px solid rgb(255 255 255 / 0)}

/* ── 20 · motion: three dots on tracks, each on its own spring (ζ .56 ω 18 · ζ .58 ω 21 · ζ .74 ω 20), flipping every 3.7s ── */
.gp-motion{display:flex;flex-direction:column;align-items:center;gap:12px}
.gp-motion .trk{position:relative;width:212px;height:32px;border-radius:16px;background:rgb(0 0 0 / .08);transition:background .3s}
.gp-motion .trk i{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;background:#000}

/* ── 21 · skeleton: .05 shapes with a white sheen sweeping across (1.6s ease-in-out, infinite) ── */
.gp-skel{display:flex;align-items:center;gap:8px}
.gp-skel .lines{display:flex;flex-direction:column;gap:6px}
.gp-skel .sk{position:relative;display:block;overflow:hidden;flex-shrink:0;background:rgb(0 0 0 / .05)}
.gp-skel .sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,rgb(255 255 255 / 0) 0%,rgb(255 255 255 / .35) 50%,rgb(255 255 255 / 0) 100%);animation:gp-sheen 1.6s ease-in-out infinite}
@keyframes gp-sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.gp-skel .sk::after{animation:none}}

@media (prefers-reduced-motion:reduce){
  .gp-meter-rim::before,.gp-sent .spin{animation:none}
  .gp-tile,.gp-cur-thumb,.gp-thumb,.gp-list,.gp-tabs-ind,.gp-sheet,.gp-lock,.gp-note,.gp-secret .cell span{transition:none}
}