.tpa{--tpa-loop:8s;--tpa-out:cubic-bezier(0.16,1,0.3,1);--tpa-cam:cubic-bezier(0.65,0,0.35,1);--tx:50%;--ty:50%;--zoom:1;--dx:calc(50% - var(--tx));--dy:calc(50% - var(--ty));--cx:6%;--cy:8%;--cw:40%;display:block;inline-size:100%;max-inline-size:30rem;aspect-ratio:5/4;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);contain:paint}.tpa__cam,.tpa__field,.tpa__frame,.tpa__grade,.tpa__sheen,.tpa__shutter,.tpa__stage{position:absolute;inset:0}.tpa__stage{animation:tpa-stage var(--tpa-loop) linear infinite}.tpa__cam{transform-origin:var(--tx) var(--ty);transform:translate(var(--dx),var(--dy)) scale(var(--zoom));animation:tpa-cam var(--tpa-loop) infinite}.tpa picture{display:contents}.tpa__plate{position:absolute;inset-block:0;inset-inline-start:20%;inline-size:60%;block-size:100%;object-fit:cover;filter:brightness(.62) contrast(1.15);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}.tpa__grade{pointer-events:none;background:radial-gradient(ellipse 85% 80% at 50% 48%,transparent 30%,color-mix(in srgb,var(--surface) 55%,transparent) 70%,var(--surface) 100%)}.tpa__sheen{pointer-events:none;inline-size:200%;background:linear-gradient(105deg,transparent 42%,color-mix(in srgb,var(--text) 9%,transparent) 50%,transparent 58%);transform:translateX(10%);animation:tpa-sheen var(--tpa-loop) var(--tpa-cam) infinite}.tpa__tp{position:absolute;inset-inline-start:var(--tx);inset-block-start:var(--ty);aspect-ratio:1;translate:-50% -50%}.tpa__tp--patch{inline-size:5.4%;rotate:16deg}.tpa__tp--qr{inline-size:11%}.tpa__patch{position:absolute;inset:0;border-radius:22%;background:linear-gradient(145deg,#2c2e32,#121315 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent),0 1px 3px rgb(0 0 0/.7)}.tpa__patch svg{position:absolute;inset:16%;inline-size:68%;block-size:68%;fill:none;stroke:var(--color-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.tpa__coil{stroke-dasharray:1;stroke-dashoffset:0;animation:tpa-coil var(--tpa-loop) var(--tpa-out) infinite}.tpa__flash{inset:-4%;border-radius:inherit;background:radial-gradient(circle,color-mix(in srgb,var(--color-accent) 85%,white),transparent 70%);animation:tpa-flash var(--tpa-loop) linear infinite}.tpa__flash,.tpa__ring{position:absolute;opacity:0}.tpa__ring{inset:0;border:1.5px solid var(--color-accent);border-radius:50%;animation:tpa-ring var(--tpa-loop) linear infinite}.tpa__ring--2{animation-name:tpa-ring-2}.tpa__ring--3{animation-name:tpa-ring-3}.tpa__qr{position:absolute;inset:-7%;inline-size:114%;block-size:114%;fill:color-mix(in srgb,var(--text) 72%,transparent);opacity:.92}.tpa--v2 .tpa__qr{animation:tpa-print var(--tpa-loop) linear infinite}.tpa__brackets{position:absolute;inset:-22%;inline-size:144%;block-size:144%;fill:none;stroke:var(--color-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:tpa-lock var(--tpa-loop) var(--tpa-out) infinite}.tpa__scanwrap{position:absolute;inset:-4%;overflow:hidden}.tpa__scan{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 70%,color-mix(in srgb,var(--color-accent) 30%,transparent) 94%,var(--color-accent) 98%,transparent 100%);transform:translateY(100%);animation:tpa-scan var(--tpa-loop) linear infinite}.tpa--v2 .tpa__scan{animation-name:tpa-head}.tpa__phone{position:absolute;inset-inline-start:var(--phx,56%);inset-block-start:var(--phy,58%);inline-size:var(--phw,24%);aspect-ratio:90/190;rotate:var(--phr,-12deg);animation:tpa-phone var(--tpa-loop) infinite}.tpa__phone svg{position:absolute;inset:0;inline-size:100%;block-size:100%}.tpa__phoneShadow{position:absolute;inset:-4% -14% -10% -6%;background:radial-gradient(ellipse at 50% 50%,rgb(0 0 0/.75),transparent 68%);transform:translate(-6%,5%);animation:tpa-phone-shadow var(--tpa-loop) infinite}.tpa__card{position:absolute;inset-inline-start:var(--cx);inset-block-start:var(--cy);inline-size:var(--cw);display:flex;align-items:center;gap:4%;padding:3.2% 3.6%;border-radius:14px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:color-mix(in srgb,var(--surface-raised) 80%,transparent);box-shadow:0 10px 28px rgb(0 0 0/.5);animation:tpa-card var(--tpa-loop) infinite}.tpa__cardIcon{flex:none;inline-size:2.1rem;aspect-ratio:1;border-radius:9px;background:var(--color-accent)}.tpa__cardLines{flex:1;display:grid;gap:.35rem}.tpa__cardLines i{display:block;block-size:.38rem;border-radius:99px;background:color-mix(in srgb,var(--text) 78%,transparent)}.tpa__cardLines i+i{inline-size:60%;background:color-mix(in srgb,var(--text) 38%,transparent)}.tpa__cardGo{flex:none;inline-size:1.4rem;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--color-accent)}.tpa__frame{inset:5%;border:1px solid color-mix(in srgb,var(--text) 32%,transparent);border-radius:16px;pointer-events:none}.tpa__shutter{background:var(--text);opacity:0;pointer-events:none;animation:tpa-shutter var(--tpa-loop) linear infinite}.tpa__field{background:radial-gradient(ellipse 60% 50% at 50% 0,color-mix(in srgb,var(--color-accent) 26%,transparent),transparent 70%);animation:tpa-field var(--tpa-loop) var(--tpa-out) infinite}.tpa__inside{position:absolute;inset-inline-start:50%;inset-block-start:40%;inline-size:36%;aspect-ratio:1;translate:-50% -50%}.tpa__coilSvg{position:absolute;inset:0;inline-size:100%;block-size:100%;fill:none;stroke:color-mix(in srgb,var(--text) 82%,transparent);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.tpa__die{position:absolute;inset-inline-start:50%;inset-block-start:50%;inline-size:11%;aspect-ratio:1;translate:-50% -50%;border-radius:2px;background:var(--color-accent);box-shadow:0 0 18px var(--color-accent);animation:tpa-die var(--tpa-loop) infinite}.tpa--v2 .tpa__card{--cx:30%;--cy:76%;--cw:40%}.tpa--nfc.tpa--v0{--tx:70.9%;--ty:27.5%;--zoom:2.6;--phx:66%;--phy:44%;--phr:-14deg;--phw:19%}.tpa--nfc.tpa--v1{--tx:70.9%;--ty:27.5%;--zoom:5;--cx:30%;--cy:78%;--cw:40%}.tpa--qr.tpa--v0{--tx:57.5%;--ty:61.5%;--zoom:2.2;--phx:62%;--phy:52%;--phr:-8deg;--phw:17%}.tpa--qr.tpa--v1{--tx:57.5%;--ty:61.5%;--zoom:3;--cx:26%;--cy:82%;--cw:48%}.tpa--qr.tpa--v2{--tx:57.5%;--ty:61.5%;--zoom:3.8}.tpa--qr.tpa--v1 .tpa__cam{animation-name:tpa-cam-focus}.tpa--nfc.tpa--v2 .tpa__cam{display:none}@keyframes tpa-stage{0%{opacity:0}3%,94%{opacity:1}99%,to{opacity:0}}@keyframes tpa-cam{0%,5%{transform:translate(0) scale(1.04) rotate(.8deg);animation-timing-function:var(--tpa-cam)}32%{transform:translate(var(--dx),var(--dy)) scale(var(--zoom)) rotate(0deg)}90%,to{transform:translate(var(--dx),var(--dy)) scale(calc(var(--zoom) * 1.045)) rotate(0deg)}}@keyframes tpa-cam-focus{0%,5%{transform:translate(0) scale(1.04);animation-timing-function:var(--tpa-cam)}30%{transform:translate(var(--dx),var(--dy)) scale(calc(var(--zoom) * 1.14))}36%{transform:translate(var(--dx),var(--dy)) scale(calc(var(--zoom) * .97))}42%,to{transform:translate(var(--dx),var(--dy)) scale(var(--zoom))}}@keyframes tpa-sheen{0%,4%{transform:translateX(-60%);opacity:0}10%{opacity:1}34%,to{transform:translateX(10%);opacity:0}}@keyframes tpa-coil{0%,10%{stroke-dashoffset:1;opacity:.2}30%,to{stroke-dashoffset:0;opacity:1}}@keyframes tpa-flash{0%,47%{opacity:0}50%{opacity:.85}58%,to{opacity:0}}@keyframes tpa-ring{0%,48%{transform:scale(.8);opacity:0}52%{opacity:.85}68%,to{transform:scale(3.2);opacity:0}}@keyframes tpa-ring-2{0%,53%{transform:scale(.8);opacity:0}57%{opacity:.7}73%,to{transform:scale(3.2);opacity:0}}@keyframes tpa-ring-3{0%,58%{transform:scale(.8);opacity:0}62%{opacity:.55}78%,to{transform:scale(3.2);opacity:0}}@keyframes tpa-print{0%,12%{clip-path:inset(0 0 100% 0)}40%,to{clip-path:inset(0 0 0 0)}}@keyframes tpa-head{0%,12%{transform:translateY(0);opacity:1}40%{transform:translateY(100%);opacity:1}44%,to{transform:translateY(100%);opacity:0}}@keyframes tpa-lock{0%,26%{transform:scale(1.5);opacity:0}40%,to{transform:scale(1);opacity:1}}@keyframes tpa-scan{0%,42%{transform:translateY(-100%);opacity:1}54%{transform:translateY(0);opacity:1}56%,to{transform:translateY(0);opacity:0}}@keyframes tpa-phone{0%,18%{transform:translate(34%,56%);opacity:0;animation-timing-function:cubic-bezier(.2,.9,.25,1.04)}22%{opacity:1}38%{transform:translate(0);animation-timing-function:ease-in-out}46%{transform:translate(0)}50%{transform:translate(-1.5%,-2.5%) scale(.985);animation-timing-function:var(--tpa-out)}56%,to{transform:translate(0);opacity:1}}@keyframes tpa-phone-shadow{0%,18%{opacity:0}38%{opacity:.55;transform:translate(-10%,8%) scale(1.12)}46%{opacity:.55;transform:translate(-10%,8%) scale(1.12)}50%,to{opacity:.75;transform:translate(-6%,5%) scale(1)}}@keyframes tpa-card{0%,54%{transform:translateY(26%) scale(.94);opacity:0;animation-timing-function:var(--tpa-out)}66%,to{transform:translateY(0) scale(1);opacity:1}}@keyframes tpa-field{0%,8%{transform:translateY(-30%);opacity:0}30%,to{transform:translateY(0);opacity:1}}@keyframes tpa-die{0%,34%{opacity:.15;transform:scale(.6)}42%,to{opacity:1;transform:scale(1)}}@keyframes tpa-shutter{0%,55%{opacity:0}57%{opacity:.22}62%,to{opacity:0}}.tpa[data-paused=true],.tpa[data-paused=true] *{animation-play-state:paused}.tpa[data-mode=click]:not([data-run]),.tpa[data-mode=click]:not([data-run]) *{animation:none}.tpa[data-mode=click]:not([data-run]) .tpa__ring,.tpa[data-mode=click]:not([data-run]) .tpa__shutter{opacity:0}.tpa[data-mode=click][data-run] *{animation-iteration-count:1}.tpa[data-mode=click][data-run] .tpa__stage{animation-name:tpa-stage-once}@keyframes tpa-stage-once{0%{opacity:0}3%,to{opacity:1}}@media (prefers-reduced-motion:reduce){.tpa,.tpa *{animation:none}.tpa__ring,.tpa__shutter{opacity:0}}:root[data-tier="0"] .tpa,:root[data-tier="0"] .tpa *{animation:none}:root[data-tier="0"] .tpa__ring,:root[data-tier="0"] .tpa__shutter{opacity:0}