.vfm{--vfm-ease: var(--vp-ease, cubic-bezier(.22, 1, .36, 1));color:var(--vp-heading, #0f172a);animation:vfm-rise .55s var(--vfm-ease) both}.vfm__inner{max-width:960px;margin-inline:auto}.vfm__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;animation:vfm-rise .55s var(--vfm-ease) .04s both}.vfm__brand{display:flex;align-items:flex-start;gap:.9rem}.vfm__mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 10px 24px #2563eb52;flex-shrink:0}.vfm__eyebrow{margin:.3rem 0 0;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vp-primary, #2563eb)}.vfm__title{margin:0;font-size:clamp(1.25rem,2.5vw,1.45rem);font-weight:700;letter-spacing:-.025em;color:var(--vp-heading, #0f172a)}.vfm__subtitle{margin:.3rem 0 0;max-width:28rem;font-size:.9rem;line-height:1.45;color:var(--vp-body-muted, #64748b)}.vfm__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}.vfm__grid>:nth-child(1){animation:vfm-rise .55s var(--vfm-ease) .08s both}.vfm__grid>:nth-child(2){animation:vfm-rise .55s var(--vfm-ease) .14s both}@media(max-width:720px){.vfm__grid{grid-template-columns:1fr}}.photo-card{display:flex;flex-direction:column;padding:1.15rem;border-radius:18px;background:var(--vp-surface, #fff);border:1px solid var(--vp-border, #e2e8f0);box-shadow:var(--vp-shadow-card, 0 4px 24px rgba(15, 23, 42, .06));transition:border-color .25s var(--vfm-ease),box-shadow .25s var(--vfm-ease),transform .25s var(--vfm-ease)}.photo-card:hover{border-color:#2563eb38;box-shadow:0 10px 32px #0f172a14;transform:translateY(-2px)}.photo-card__title{margin:0 0 .9rem;font-size:.92rem;font-weight:700;letter-spacing:-.01em;color:var(--vp-heading, #0f172a)}.photo-card__body{position:relative;flex:1;margin-bottom:.85rem}.dropzone{display:grid;place-items:center;align-content:center;gap:.55rem;min-height:260px;padding:1.5rem;text-align:center;border:1.5px dashed var(--vp-border, #e2e8f0);border-radius:14px;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(37,99,235,.04),transparent 70%),var(--vp-surface-soft, #f8fafc);cursor:pointer;transition:border-color .25s var(--vfm-ease),background-color .25s var(--vfm-ease),box-shadow .25s var(--vfm-ease)}.dropzone:hover,.dropzone[data-dragging=true]{border-color:#2563eb8c;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(37,99,235,.08),transparent 70%),#2563eb08;box-shadow:inset 0 0 0 1px #2563eb14}.dropzone__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;color:var(--vp-primary, #2563eb);background:#fff;border:1px solid var(--vp-border, #e2e8f0);box-shadow:0 4px 14px #0f172a0f;transition:transform .25s var(--vfm-ease)}.dropzone:hover .dropzone__icon,.dropzone[data-dragging=true] .dropzone__icon{transform:translateY(-2px);border-color:#2563eb4d}.dropzone__title{font-size:.9rem;font-weight:600;color:var(--vp-heading, #0f172a)}.dropzone__hint{font-size:.8rem;color:var(--vp-body-muted, #64748b)}.preview{position:relative;min-height:260px;border-radius:14px;overflow:hidden;background:var(--vp-surface-gray, #f3f4f6)}.preview img{width:100%;height:100%;max-height:320px;object-fit:cover;animation:vfm-fade .35s var(--vfm-ease) both}.preview__remove{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:0;color:var(--vp-heading, #0f172a);background:#ffffffeb;backdrop-filter:blur(6px);box-shadow:0 4px 12px #0f172a1f;cursor:pointer;transition:background-color .2s var(--vfm-ease),color .2s var(--vfm-ease),transform .2s var(--vfm-ease)}.preview__remove:hover{color:#fff;background:#dc2626;transform:scale(1.05)}.webcam{border-radius:14px;overflow:hidden;background:var(--vp-surface-gray, #f3f4f6)}.webcam video{width:100%;min-height:220px;max-height:300px;object-fit:cover;background:#000;transform:scaleX(-1)}.webcam__controls{display:flex;gap:.5rem;padding:.65rem}.webcam-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.65rem;border-radius:999px;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--vp-heading, #0f172a);background:var(--vp-surface-soft, #f8fafc);border:1px solid var(--vp-border, #e2e8f0);transition:border-color .2s var(--vfm-ease),color .2s var(--vfm-ease),background-color .2s var(--vfm-ease),transform .2s var(--vfm-ease)}.webcam-btn:hover{color:var(--vp-primary, #2563eb);border-color:#2563eb59;background:#2563eb0a;transform:translateY(-1px)}.btn{appearance:none;border:0;border-radius:10px;font-weight:600;cursor:pointer;transition:transform .2s var(--vfm-ease),opacity .2s var(--vfm-ease),background-color .2s var(--vfm-ease),box-shadow .2s var(--vfm-ease)}.btn--sm{flex:1;padding:.5rem .75rem;font-size:.82rem}.btn--ghost{color:var(--vp-heading, #0f172a);background:var(--vp-surface, #fff);border:1px solid var(--vp-border, #e2e8f0)}.btn--ghost:hover{color:var(--vp-primary, #2563eb)}.btn--primary{color:#fff;background:#0f172a;box-shadow:0 8px 22px #0f172a33}.btn--primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 28px #0f172a3d}.vfm__actions{display:flex;justify-content:center;margin-top:1.5rem;animation:vfm-rise .55s var(--vfm-ease) .18s both}.btn--compare{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-width:240px;padding:.85rem 2rem;border-radius:999px;font-size:.95rem}.btn--compare:disabled{cursor:not-allowed;color:var(--vp-body-muted, #64748b);background:var(--vp-surface-gray, #f3f4f6);border:1px solid var(--vp-border, #e2e8f0);box-shadow:none;transform:none}.btn--compare[data-loading=true]{cursor:wait;color:#fff;background:#0f172a;border:0;box-shadow:0 8px 22px #0f172a33}.btn__spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:vfm-spin .7s linear infinite}.vfm__error{margin:1rem auto 0;max-width:480px;padding:.65rem 1rem;border-radius:12px;text-align:center;font-size:.85rem;color:#991b1b;background:#dc262614;border:1px solid rgba(220,38,38,.22);animation:vfm-rise .35s var(--vfm-ease) both}.result-card{margin:1.5rem auto 0;max-width:420px;padding:1.6rem;border-radius:18px;background:var(--vp-surface, #fff);border:1px solid var(--vp-border, #e2e8f0);box-shadow:var(--vp-shadow-card, 0 4px 24px rgba(15, 23, 42, .06));animation:vfm-rise .45s var(--vfm-ease) both}.result-card__done{display:flex;flex-direction:column;align-items:center;gap:.85rem}.result-meter{position:relative;width:132px;height:132px}.result-meter svg{width:100%;height:100%;transform:rotate(-90deg)}.result-meter__track{fill:none;stroke:var(--vp-surface-gray, #f3f4f6);stroke-width:9}.result-meter__fill{fill:none;stroke:#f59e0b;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .9s var(--vfm-ease),stroke .3s var(--vfm-ease)}.result-meter__fill[data-match=true]{stroke:#16a34a}.result-meter__score{position:absolute;inset:0;display:grid;place-items:center;font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#d97706}.result-meter__score[data-match=true]{color:#16a34a}.result-card__meta{display:flex;flex-direction:column;align-items:center;gap:.5rem}.result-card__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--vp-body-muted, #64748b)}.result-card__badge{padding:.35rem .95rem;border-radius:999px;font-size:.85rem;font-weight:700;color:#b45309;background:#f59e0b1f;border:1px solid rgba(245,158,11,.28)}.result-card__badge[data-match=true]{color:#15803d;background:#16a34a1a;border-color:#16a34a47}@keyframes vfm-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes vfm-fade{0%{opacity:0}to{opacity:1}}@keyframes vfm-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.vfm,.vfm__top,.vfm__grid>*,.vfm__actions,.vfm__error,.result-card,.preview img,.btn__spinner{animation:none!important}.photo-card,.dropzone,.webcam-btn,.btn,.preview__remove{transition:none!important}.result-meter__fill{transition:none}}.demo-tabs{--dt-ease: var(--vp-ease, cubic-bezier(.22, 1, .36, 1));display:flex;flex-direction:column;gap:clamp(1.25rem,3vw,1.75rem);animation:demo-tabs-rise .55s var(--dt-ease) both}.demo-tabs__nav{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.35rem;max-width:34rem;margin-inline:auto;width:100%;border-radius:999px;background:#ffffffc7;border:1px solid var(--vp-border, #e2e8f0);box-shadow:var(--vp-shadow-card, 0 4px 24px rgba(15, 23, 42, .06)),inset 0 1px #ffffffe6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.demo-tabs__thumb{position:absolute;top:.35rem;bottom:.35rem;left:.35rem;width:calc(50% - .35rem - .175rem);border-radius:999px;background:#0f172a;box-shadow:0 8px 20px #0f172a2e,0 1px #ffffff1f inset;transition:transform .38s var(--dt-ease);pointer-events:none;z-index:0}.demo-tabs__nav[data-active-index="1"] .demo-tabs__thumb{transform:translate(calc(100% + .35rem))}.demo-tabs__tab{appearance:none;border:0;cursor:pointer;position:relative;z-index:1;display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-radius:999px;text-align:left;background:transparent;color:var(--vp-body-secondary, #475569);transition:color .28s var(--dt-ease)}.demo-tabs__tab:hover:not([data-active=true]){color:var(--vp-heading, #0f172a)}.demo-tabs__tab:hover:not([data-active=true]) .demo-tabs__icon{background:#0f172a0f;border-color:transparent}.demo-tabs__tab:focus-visible{outline:2px solid var(--vp-primary, #2563eb);outline-offset:3px}.demo-tabs__tab[data-active=true]{color:#fff}.demo-tabs__icon{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:999px;background:var(--vp-surface-soft, #f8fafc);border:1px solid var(--vp-border, #e2e8f0);color:var(--vp-body-secondary, #475569);transition:background-color .28s var(--dt-ease),border-color .28s var(--dt-ease),color .28s var(--dt-ease),box-shadow .28s var(--dt-ease),transform .28s var(--dt-ease)}.demo-tabs__tab[data-active=true] .demo-tabs__icon{background:linear-gradient(135deg,#3b82f6,#2563eb);border-color:transparent;color:#fff;box-shadow:0 6px 14px #2563eb66;transform:scale(1.04)}.demo-tabs__copy{display:flex;flex-direction:column;gap:.1rem;min-width:0}.demo-tabs__tab-label{font-size:.9rem;font-weight:700;letter-spacing:-.015em;line-height:1.2}.demo-tabs__tab-hint{font-size:.7rem;font-weight:500;line-height:1.3;color:var(--vp-body-muted, #64748b);transition:color .28s var(--dt-ease)}.demo-tabs__tab[data-active=true] .demo-tabs__tab-hint{color:#ffffffb8}.demo-tabs__panel{min-width:0;animation:demo-tabs-panel .42s var(--dt-ease) both}.demo-tabs__fallback{margin:0;padding:4rem 1rem;text-align:center;font-size:.875rem;color:var(--vp-body-muted, #64748b)}@keyframes demo-tabs-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes demo-tabs-panel{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.demo-tabs,.demo-tabs__nav,.demo-tabs__panel,.demo-tabs__thumb,.demo-tabs__tab,.demo-tabs__icon,.demo-tabs__tab-hint{animation:none!important;transition:none!important}}@media(max-width:560px){.demo-tabs__nav{border-radius:18px;max-width:none}.demo-tabs__thumb{border-radius:14px}.demo-tabs__tab{padding:.75rem .85rem;gap:.55rem;border-radius:14px}.demo-tabs__icon{width:30px;height:30px}.demo-tabs__tab-label{font-size:.85rem}.demo-tabs__tab-hint{font-size:.65rem}}@media(max-width:400px){.demo-tabs__tab-hint{display:none}.demo-tabs__tab{justify-content:center;text-align:center}}.demo-page{--vp-ease: cubic-bezier(.22, 1, .36, 1);--vp-heading: #0f172a;--vp-body-muted: #64748b;--vp-body-secondary: #475569;--vp-surface: #ffffff;--vp-surface-soft: #f8fafc;--vp-surface-gray: #f3f4f6;--vp-border: #e2e8f0;--vp-primary: #2563eb;--vp-shadow-card: 0 4px 24px rgba(15, 23, 42, .06);padding-bottom:clamp(3rem,6vw,5rem);min-height:calc(100vh - var(--site-header-height));background:radial-gradient(ellipse 70% 50% at 50% -5%,rgba(37,99,235,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 85% 10%,rgba(124,58,237,.05) 0%,transparent 55%),linear-gradient(180deg,var(--vp-surface-soft) 0%,var(--vp-surface-gray) 100%)}
