.ff-form { --ff-accent: #6d4d97; --ff-accent-press: #513a72;  --ff-accent-red: #d8613c; --ff-ink: #241f2b; --ff-soft-ink: #5c5666; --ff-muted: #6f6a77; --ff-faint: #a29caf;  --ff-btn: #161616;
--ff-btn-hover: #2f2a37; --ff-line: #e3dce8; --ff-soft: #f2ecf8; --ff-soft-line: #e7ddf0; --ff-opt-bg: #faf9fb; --ff-track: #ece7f2;  --ff-error: #c0392b; max-width: 420px;
margin: 0 auto;   font-size: var(--wp--preset--font-size--normal); position: relative
}
.ff-form.ff-card {
background: #fff;
border: 1px solid var(--ff-soft-line);
border-radius: 16px; padding: 26px 24px
}
.ff-form *,
.ff-form *::before,
.ff-form *::after {
box-sizing: border-box
}
.ff-header {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 16px
}
.ff-header-persona {
gap: 11px
}
.ff-logo {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ff-ink);
display: flex;
align-items: center;
justify-content: center;
flex: none
}
.ff-brand {
font-family: var(--wp--preset--font-family--heading);
font-size: 15px;
font-weight: 700
}
.ff-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex: none
}
.ff-avatar-ph {
background: var(--ff-soft);
border: 1px solid var(--ff-soft-line);
display: flex;
align-items: center;
justify-content: center;
color: var(--ff-accent);
font-size: 18px
}
.ff-hname {
font-weight: 700;
font-size: 14px
}
.ff-hsub {
font-size: 12px;
color: var(--ff-muted)
}
.ff-progress {
height: 4px;
border-radius: 4px;
background: var(--ff-track);
margin-bottom: 20px;
overflow: hidden
}
.ff-progress i {
display: block;
height: 100%;
background: var(--ff-accent);
transition: width .35s ease
}
.ff-step {
display: none
}
.ff-step.active {
display: block;
animation: ffIn .3s ease
}
@keyframes ffIn {
from {
opacity: 0;
transform: translateY(6px)
}
to {
opacity: 1;
transform: none
}
}
.ff-eyebrow {
font-size: 0.8em;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ff-accent);
margin-bottom: 10px
}
.ff-h {   font-size: var(--wp--preset--font-size--large);
line-height: 1.22;
margin: 0 0 8px; }
.ff-h em {
font-style: italic
}
.ff-p {
font-size: var(--wp--preset--font-size--small);
line-height: 1.5; margin: 0 0 20px;
}
.ff-center {
text-align: center
}
.ff-group {
margin-bottom: 10px
}
.ff-group label {
display: block;
font-size: 0.875em; color: var(--ff-muted); line-height: 1.8;
}
.ff-input {
display: block;
width: 100%; font-size: var(--wp--preset--font-size--small);
padding: .9rem 1.1rem;
font-family: inherit;
border: 1px solid var(--ff-line);
border-radius: var(--wc-form-border-radius);
background: #fff;
color: var(--ff-ink);
-webkit-appearance: none;
appearance: none;
}
.ff-input:focus {
outline: none;
border-color: var(--ff-accent);
box-shadow: 0 0 0 3px rgba(109, 77, 151, .14)
}
.ff-textarea {
min-height: 88px;
resize: vertical
}
.ff-options {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 4px
}
.ff-opt,
.ff-cat {
display: flex;
align-items: center;
width: 100%;
padding: .9rem 1.1rem; border: 1px solid var(--ff-line);
border-radius: 8px;
background: var(--ff-opt-bg);
font-family: inherit;
font-size: var(--wp--preset--font-size--small);
color: var(--ff-ink);
cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.ff-opt { gap: 10px; justify-content: flex-start; text-align: left; }
.ff-cat { justify-content: center; text-align: center; font-weight: 500; }
.ff-opt:hover,
.ff-cat:hover { border-color: var(--ff-accent); }
.ff-opt.is-selected,
.ff-cat.is-selected {
border-color: var(--ff-accent);
background: var(--ff-soft);
box-shadow: 0 0 0 1px var(--ff-accent);
}
.ff-nav {
display: flex;
gap: 8px;
margin-top: 16px
}
.ff-nav-col {
flex-direction: column
}
.ff-nav-backonly {
margin-top: 12px
}
.ff-btn {
flex: 1; padding: .9em 1.1em;
background: var(--ff-btn);
color: #fff;
border: none;
border-radius: .33rem;
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
font-family: inherit;
cursor: pointer;
position: relative;
transition: background .15s
}
.ff-btn:hover {
background: var(--ff-btn-hover)
}
.ff-btn:disabled {
opacity: .7;
cursor: default
}
.ff-btn.ff-ghost {
background: none;
color: var(--ff-muted);
border: 1px solid var(--ff-line)
}
.ff-btn.ff-ghost:hover {
color: var(--ff-ink)
}
.ff-backbtn {
flex: none;
padding: .9em 1.1em;
width: auto;
height: auto;
border: 1px solid var(--ff-line);
background: #fff;
border-radius: 0.33rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--ff-ink);
transition: border-color .15s
}
.ff-backbtn:hover {
border-color: var(--ff-accent)
} .ff-btn-loading {
display: none;
}
.ff-btn.loading .ff-btn-loading {
display: inline-block
} .ff-btn.loading .ff-btn-label { display: none; }
.ff-btn .magic-icon {
filter: invert(100%); height: 1rem;
vertical-align: text-top;
margin-left: 0;
} .ff-reveal-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px }
.ff-rv-item {
display: flex; gap: 14px; align-items: center;
background: #fff; border: 1px solid var(--ff-soft-line); border-radius: 0.33rem; padding: 14px 15px;
animation: ffRvIn .5s cubic-bezier(.2,.7,.3,1) both;
}
.ff-rv-item:nth-child(1) { animation-delay: .05s }
.ff-rv-item:nth-child(2) { animation-delay: .16s }
.ff-rv-item:nth-child(3) { animation-delay: .27s }
.ff-rv-item:nth-child(4) { animation-delay: .38s }
@keyframes ffRvIn { from { opacity:0; transform: translateY(10px) scale(.98) } to { opacity:1; transform:none } }
.ff-med {
width: 56px; height: 56px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #ece0fb 0%, var(--ff-soft) 68%); display: flex; align-items: center; justify-content: center;
}
.ff-med-img   { width: 34px; height: 34px; object-fit: contain }
.ff-med-num   { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 24px; color: var(--ff-ink) }
.ff-med-svg { width: 26px; height: 26px; color: var(--ff-ink) }
.ff-rv-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ff-faint); margin-bottom: 2px }
.ff-rv-val  { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 19px; color: var(--ff-ink); line-height: 1.1 }
.ff-rv-desc { font-size: 12.5px; line-height: 1.5; color: var(--ff-muted); margin: 5px 0 0 } .ff-rv-card {
text-align: center; background: #fff; border: 1px solid var(--ff-soft-line); border-radius: 0.33rem; padding: 18px;
animation: ffRvIn .5s cubic-bezier(.2,.7,.3,1) both; animation-delay: .1s;
}
.ff-rv-frame img { width: 50%; max-width: 160px; min-width: 80px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);; margin-bottom: 12px }
.ff-rv-card .ff-rv-val  { font-size: 20px; margin-top: 2px }
.ff-rv-card .ff-rv-desc { max-width: 32ch; margin: 6px auto 0 }
@media (prefers-reduced-motion: reduce) {
.ff-rv-item, .ff-rv-card { animation: none }
}
.ff-deck {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: nowrap;
padding: 20px 0 14px;
}
.ff-cardback {
margin: 0 !important;
flex: 0 1 auto;
width: calc((100% - 32px) / 5);
max-width: 62px;
aspect-ratio: 62 / 100;
min-width: 0;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
padding: 0;
position: relative;
box-shadow: 0 4px 8px rgba(109, 77, 151, .20);
transition: transform .22s ease;   border: 2px solid var(--ff-accent-press);
color: #efe6fb;
background:
radial-gradient(120% 85% at 50% 16%, rgba(236,224,251,.30) 0%, rgba(236,224,251,0) 46%),
repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 5px, rgba(255,255,255,0) 5px 11px),
linear-gradient(160deg, #513a72 0%, #6d4d97 55%, #3d2b5a 100%);
text-shadow: 0 1px 8px rgba(20,10,40,.5);
}
.ff-cardback:hover,
.ff-cardback:focus-visible {
transform: translateY(-14px);
z-index: 5;
outline: none;
}  .ff-flip {
width: 140px;
aspect-ratio: 400 / 660;
margin: 16px auto 20px;
perspective: 900px;
}
.ff-flip-inner {
width: 100%;
height: 100%;
position: relative;
border-radius: 14px;
transform-style: preserve-3d;
transition: transform .8s cubic-bezier(.4, .1, .2, 1);
will-change: transform;
box-shadow: 0 8px 24px rgba(109, 77, 151, .18);
}
.ff-flip.is-flipped .ff-flip-inner { transform: rotateY(180deg); }
.ff-flip-face {
position: absolute;
inset: 0;
border-radius: 8px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
}
.ff-flip-back { font-size: 32px;
border: 2px solid var(--ff-accent-press);
color: #efe6fb;
background:
radial-gradient(120% 85% at 50% 16%, rgba(236,224,251,.30) 0%, rgba(236,224,251,0) 46%),
repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 5px, rgba(255,255,255,0) 5px 11px),
linear-gradient(160deg, #513a72 0%, #6d4d97 55%, #3d2b5a 100%);
text-shadow: 0 1px 8px rgba(20,10,40,.5);
}
.ff-flip-front {
background: var(--ff-soft);
border: 2px solid var(--ff-soft-line);
color: var(--ff-ink);
transform: rotateY(180deg);
}
.ff-flip-star { font-size: 44px; color: var(--ff-accent); line-height: 1; }
.ff-flip-name {
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: 15px;
color: var(--ff-ink);
padding: 0 8px;
text-align: center;
}
.ff-flip-front { overflow: hidden; }
.ff-flip-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ff-flip-img[hidden] { display: none; } .ff-cr-content { opacity: 0; transition: opacity .45s ease; }
.ff-cr-content.is-in { opacity: 1; animation: ffIn .45s ease; } .ff-btn-block { display: flex; width: 100%; align-items: center; justify-content: center; }
.ff-redraw {
display: block;
width: 100%;
margin-top: 12px;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: .85em;
color: var(--ff-muted);
}
.ff-redraw:hover { color: var(--ff-ink); }
.ff-error {
display: none;
font-size: 0.75rem;
color: var(--wp--preset--color--accent-3);
margin-top: 0;
}
.ff-error.show {
display: block
}
.ff-error-global {
margin-top: 10px;
text-align: center
}
.ff-consent,
.ff-footnote {
font-size: 0.75rem;
line-height: 1.35;
color: var(--wp--preset--color--contrast-3); text-align: center; }
.ff-consent a,
.ff-footnote a { color: inherit; }
.ff-trust {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 22px;
padding-top: 15px;
border-top: 1px solid var(--ff-line);
font-size: .8rem;
line-height: 1.45;
color: var(--ff-muted);
filter: grayscale(1);
}
.ff-trust-item {
padding-left: 1.5em;
text-indent: -1.5em;
}
.ff-hp {
position: absolute;
left: -9999px;
top: -9999px;
height: 0;
width: 0;
opacity: 0
} .ff-reveal-loading{
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:270px; opacity:1;
transition:opacity .3s ease;
}
.ff-step.ff-loading .ff-reveal-loading{ display:flex; }
.ff-step.ff-loading.ff-loading-out .ff-reveal-loading{ opacity:0; } .ff-step.ff-loading > :not(.ff-reveal-loading){ display:none; }
.ff-reveal-cap{
font-size:13px;
color:var(--ff-faint);
text-align:center;
margin:24px 0 0;
letter-spacing:.02em;
} .ff-neb{
--tempo:1.4; --blur:20px; --int:1;
width:170px;height:170px;border-radius:50%;margin:0 auto;
position:relative;background:var(--ff-soft);
animation:ffNebBreathe calc(4.6s / var(--tempo)) ease-in-out infinite;
}
@keyframes ffNebBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.ff-neb-clip{
position:absolute;inset:0;border-radius:50%;overflow:hidden;
animation:ffNebHue calc(11s / var(--tempo)) ease-in-out infinite alternate;
}
@keyframes ffNebHue{from{filter:hue-rotate(-10deg)}to{filter:hue-rotate(10deg)}}
.ff-neb-clip::after{
content:"";position:absolute;inset:0;border-radius:50%;
box-shadow:inset 0 0 24px 10px #fff;pointer-events:none;z-index:3;
}
.ff-neb-orb{position:absolute;top:50%;left:50%;width:0;height:0}
.ff-neb-orb .sub{position:absolute;width:0;height:0}
.ff-neb-orb i{position:absolute;border-radius:50%;display:block;filter:blur(var(--blur));opacity:var(--int)}
@keyframes ffNebSpin{to{transform:rotate(360deg)}}
.ff-neb-o1{animation:ffNebSpin calc(11s / var(--tempo)) linear infinite}
.ff-neb-o1 .sub{margin:-52px 0 0 0;animation:ffNebSpin calc(6s / var(--tempo)) linear infinite reverse}
.ff-neb-o1 i{width:112px;height:112px;margin:-56px 0 0 -86px;background:radial-gradient(circle,#b490e0 0%,rgba(180,144,224,0) 70%)}
.ff-neb-o2{animation:ffNebSpin calc(13s / var(--tempo)) linear infinite reverse}
.ff-neb-o2 .sub{margin:34px 0 0 -30px;animation:ffNebSpin calc(7.5s / var(--tempo)) linear infinite}
.ff-neb-o2 i{width:124px;height:124px;margin:-62px 0 0 -40px;background:radial-gradient(circle,#8f6cc0 0%,rgba(143,108,192,0) 70%)}
.ff-neb-o3{animation:ffNebSpin calc(16s / var(--tempo)) linear infinite}
.ff-neb-o3 .sub{margin:10px 0 0 44px;animation:ffNebSpin calc(5.5s / var(--tempo)) linear infinite reverse}
.ff-neb-o3 i{width:100px;height:100px;margin:-50px 0 0 -70px;background:radial-gradient(circle,#e0b8f0 0%,rgba(224,184,240,0) 70%)}
.ff-neb-spark{
position:absolute;color:#fff;z-index:4;
text-shadow:0 0 8px rgba(109,77,151,.95);
animation:ffNebSparkle ease-in-out infinite;
}
@keyframes ffNebSparkle{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
.ff-neb-s1{top:26%;left:24%;font-size:11px;animation-duration:calc(2.8s / var(--tempo));animation-delay:-.4s}
.ff-neb-s2{top:38%;left:70%;font-size:14px;animation-duration:calc(3.4s / var(--tempo));animation-delay:-1.6s}
.ff-neb-s3{top:66%;left:38%;font-size:10px;animation-duration:calc(2.4s / var(--tempo));animation-delay:-2.2s}
.ff-neb-core{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
color:#fff;font-size:22px;text-shadow:0 0 14px rgba(109,77,151,.9);
animation:ffNebCore calc(2.2s / var(--tempo)) ease-in-out infinite;z-index:4;
}
@keyframes ffNebCore{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}}
@media (prefers-reduced-motion: reduce){
.ff-neb,.ff-neb-clip,.ff-neb-o1,.ff-neb-o1 .sub,.ff-neb-o2,.ff-neb-o2 .sub,
.ff-neb-o3,.ff-neb-o3 .sub,.ff-neb-spark,.ff-neb-core{ animation:none }
}