.flip-stage{width:200px;height:124px;perspective:var(--flip-perspective,720px);perspective-origin:50% 50%}.flip-card{position:relative;width:100%;height:100%;transform-style:preserve-3d}.flip-card--product,.flip-card--profile{animation-duration:var(--flip-duration,4s);animation-timing-function:cubic-bezier(.45,0,.55,1);animation-iteration-count:infinite}.flip-card--quiet{animation:none}.flip-face{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;grid-gap:6px;gap:6px;padding:12px;border-radius:14px;border:1px solid rgba(248,250,252,.14);transform:translateZ(.01px);-webkit-transform:translateZ(.01px);box-shadow:inset 0 1px 0 rgba(248,250,252,.08),0 8px 22px rgba(0,0,0,.45);overflow:hidden}.flip-face,.flip-face>*{backface-visibility:hidden;-webkit-backface-visibility:hidden}.flip-face--front{background:radial-gradient(circle at 18% -10%,color-mix(in srgb,var(--flip-a,#67e8f9) 26%,transparent),transparent 55%),linear-gradient(135deg,color-mix(in srgb,var(--flip-a,#67e8f9) 12%,#0a1424),#050b18)}.flip-face--back{background:radial-gradient(circle at 82% 110%,color-mix(in srgb,var(--flip-b,#a78bfa) 28%,transparent),transparent 55%),linear-gradient(135deg,#1a1230 0,#0a0b1c 60%,#050816 100%)}.flip-card--profile .flip-face--back{transform:rotateY(180deg) translateZ(.01px);-webkit-transform:rotateY(180deg) translateZ(.01px);animation:flipFaceBackVisY var(--flip-duration,4s) linear infinite}.flip-card--profile .flip-face--front{animation:flipFaceFrontVisY var(--flip-duration,4s) linear infinite}.flip-card--product .flip-face--back{transform:rotateX(180deg) translateZ(.01px);-webkit-transform:rotateX(180deg) translateZ(.01px);animation:flipFaceBackVisX var(--flip-duration,4s) linear infinite}.flip-card--product .flip-face--front{animation:flipFaceFrontVisX var(--flip-duration,4s) linear infinite}.flip-card--quiet .flip-face--back{transform:translateZ(.01px);-webkit-transform:translateZ(.01px);animation:flipFaceBackVisQuiet var(--flip-duration,4s) ease-in-out infinite}.flip-card--quiet .flip-face--front{animation:flipFaceFrontVisQuiet var(--flip-duration,4s) ease-in-out infinite}.flip-face-label{color:var(--foreground);font-size:.95rem;font-weight:700;letter-spacing:-.01em}.flip-face-sub{color:var(--muted);font-size:.78rem}.flip-glyph{width:32px;height:32px;border-radius:999px;margin-bottom:4px;flex-shrink:0}.flip-glyph--avatar{background:radial-gradient(circle at 30% 28%,rgba(248,250,252,.6),transparent 42%),linear-gradient(135deg,var(--flip-a,#67e8f9),var(--flip-b,#a78bfa) 60%,#f0abfc);box-shadow:0 0 0 2px rgba(248,250,252,.18),0 4px 12px color-mix(in srgb,var(--flip-a,#67e8f9) 32%,transparent)}.flip-glyph--handle{display:grid;place-items:center;background:rgba(8,13,25,.92);border:1px solid color-mix(in srgb,var(--flip-b,#a78bfa) 60%,transparent);color:var(--foreground);font-weight:800;font-size:.95rem}.flip-glyph--handle:before{content:"@"}.flip-glyph--thumb{border-radius:8px;width:44px;background:linear-gradient(135deg,color-mix(in srgb,var(--flip-a,#34d399) 70%,#050b18),color-mix(in srgb,var(--flip-b,#38bdf8) 60%,#050b18));box-shadow:0 4px 14px color-mix(in srgb,var(--flip-a,#34d399) 26%,transparent)}.flip-glyph--check{display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--flip-a,#34d399) 50%,transparent) 0,transparent 65%),rgba(8,13,25,.92);border:1px solid color-mix(in srgb,var(--flip-a,#34d399) 60%,transparent);color:var(--flip-a,#34d399);font-weight:900;font-size:1rem}.flip-glyph--check:before{content:"✓"}.flip-glyph--sun{background:radial-gradient(circle at 50% 50%,var(--flip-a,#fbbf24) 38%,transparent 42%);box-shadow:0 0 0 1px color-mix(in srgb,var(--flip-a,#fbbf24) 60%,transparent),0 0 18px color-mix(in srgb,var(--flip-a,#fbbf24) 56%,transparent)}.flip-glyph--moon{position:relative;background:rgba(8,13,25,.92);border:1px solid color-mix(in srgb,var(--flip-b,#fb7185) 60%,transparent)}.flip-glyph--moon:after{content:"";position:absolute;inset:4px 4px 4px 10px;border-radius:999px;background:rgba(8,13,25,.92)}.pattern-preview--inspector .flip-stage{width:280px;height:174px}.pattern-preview--inspector .flip-face-label{font-size:1.15rem}.pattern-preview--inspector .flip-face-sub{font-size:.88rem}.flip-card--profile{animation-name:flipCardSpinY}@keyframes flipCardSpinY{0%,28%{transform:rotateY(0deg)}48%,78%{transform:rotateY(180deg)}to{transform:rotateY(1turn)}}.flip-card--product{animation-name:flipCardSpinX}@keyframes flipCardSpinX{0%,28%{transform:rotateX(0deg)}48%,78%{transform:rotateX(180deg)}to{transform:rotateX(1turn)}}@keyframes flipFaceFrontVisY{0%,38%,88%,to{opacity:1}48%,78%{opacity:0}}@keyframes flipFaceBackVisY{0%,38%,88%,to{opacity:0}48%,78%{opacity:1}}@keyframes flipFaceFrontVisX{0%,38%,88%,to{opacity:1}48%,78%{opacity:0}}@keyframes flipFaceBackVisX{0%,38%,88%,to{opacity:0}48%,78%{opacity:1}}@keyframes flipFaceFrontVisQuiet{0%,38%,88%,to{opacity:1}50%,78%{opacity:0}}@keyframes flipFaceBackVisQuiet{0%,38%,88%,to{opacity:0}50%,78%{opacity:1}}.pattern-preview--inspector .flip-card--product,.pattern-preview--inspector .flip-card--profile{animation:none;transition:transform .55s cubic-bezier(.45,0,.55,1)}.pattern-preview--inspector .flip-card--profile:focus-within,.pattern-preview--inspector .flip-card--profile:hover{transform:rotateY(180deg)}.pattern-preview--inspector .flip-card--product:focus-within,.pattern-preview--inspector .flip-card--product:hover{transform:rotateX(180deg)}.pattern-preview--inspector .flip-face--back,.pattern-preview--inspector .flip-face--front{animation:none;transition:opacity .55s cubic-bezier(.45,0,.55,1)}.pattern-preview--inspector .flip-card--product .flip-face--back,.pattern-preview--inspector .flip-card--profile .flip-face--back,.pattern-preview--inspector .flip-card--quiet .flip-face--back{opacity:0}.pattern-preview--inspector .flip-card:focus-within .flip-face--back,.pattern-preview--inspector .flip-card:hover .flip-face--back{opacity:1}.pattern-preview--inspector .flip-card:focus-within .flip-face--front,.pattern-preview--inspector .flip-card:hover .flip-face--front{opacity:0}.pattern-preview--inspector .flip-card{cursor:pointer;outline:none}.pattern-preview--inspector .flip-card:focus-visible{outline:2px solid var(--accent,#67e8f9);outline-offset:6px;border-radius:14px}@media (prefers-reduced-motion:reduce){.flip-card,.flip-card .flip-face{animation:none}.pattern-preview--inspector .flip-card,.pattern-preview--inspector .flip-face{transition:none}.flip-face--back{opacity:0}.flip-face--front{opacity:1}}