:root{--icon-ink:#6545d5;--icon-secondary:#9174e3;--icon-wash:#eee8ff}
.question-lead{display:flex;align-items:center;gap:19px;margin-bottom:17px}.question-copy{flex:1;min-width:0}.question-copy h2{margin:9px 0 0}.question-icon{width:68px;height:68px;flex:0 0 68px;display:inline-grid;place-items:center;position:relative;isolation:isolate;color:var(--icon-ink);border-radius:50%;transform-origin:center;--arrival-delay:0ms}.question-pictogram{width:46px;height:46px;position:relative;z-index:2;overflow:visible}.icon-fill,.icon-detail{fill:none}.icon-ripple{position:absolute;inset:0;border:1.5px solid #8b6be7;border-radius:inherit;pointer-events:none;opacity:0}.icon-accent{stroke:var(--icon-ink)}.wallet-dot{fill:currentColor;stroke:none}.question-copy .question-number{font-size:10px;letter-spacing:1.8px}.option-1 .question{min-height:340px}
/* 01: just the essentials. */
[data-icon-design="1"] .question-pictogram{stroke-width:1.6}
[data-icon-design="1"] .icon-arriving .question-pictogram{animation:pure-arrive 720ms cubic-bezier(.2,.7,.3,1) var(--arrival-delay) both}
[data-icon-design="1"] .icon-arriving .ripple-one{animation:line-pulse 850ms ease-out var(--arrival-delay) both}
/* 02: a soft round stamp, with quiet duotone fills. */
[data-icon-design="2"] .question-icon{background:#eee8ff}
[data-icon-design="2"] .icon-fill{fill:#ded3fa}
[data-icon-design="2"] .icon-detail{fill:#f7f3ff}
[data-icon-design="2"] .icon-arriving{animation:soft-arrive 850ms cubic-bezier(.2,.8,.3,1) var(--arrival-delay) both}
[data-icon-design="2"] .icon-arriving .ripple-one{animation:halo-pulse 1000ms ease-out var(--arrival-delay) both}
/* 03: a small rounded tile, with a measured lift. */
[data-icon-design="3"] .question-icon{border-radius:20px;background:linear-gradient(145deg,#faf8ff,#eae3fb);border:1px solid #e2d8f6;box-shadow:0 4px 12px #5830b709}
[data-icon-design="3"] .icon-detail{fill:#d6c8f5}
[data-icon-design="3"] .icon-arriving{animation:tile-arrive 800ms cubic-bezier(.2,.8,.3,1) var(--arrival-delay) both}
[data-icon-design="3"] .icon-arriving .ripple-one{animation:tile-pulse 900ms ease-out var(--arrival-delay) both}
/* 04: hand-drawn arrival without a looping animation. */
[data-icon-design="4"] .question-icon{border-radius:18px;background:#f7f3ff}
[data-icon-design="4"] .question-pictogram{stroke-width:1.7}
[data-icon-design="4"] .icon-arriving .question-pictogram>*{stroke-dasharray:180;animation:draw-arrive 750ms ease-out var(--arrival-delay) both}
[data-icon-design="4"] .icon-arriving .question-pictogram{animation:ink-pulse 1000ms ease-in-out var(--arrival-delay) both}
/* 05: a signal-inspired pulse. */
[data-icon-design="5"] .question-icon{background:#f3efff;border:1px solid #e4dbfb}
[data-icon-design="5"] .icon-accent{stroke:#3b65d9}
[data-icon-design="5"] .icon-fill{fill:#f8f6ff}
[data-icon-design="5"] .icon-arriving .question-pictogram{animation:pure-arrive 700ms ease-out var(--arrival-delay) both}
[data-icon-design="5"] .icon-arriving .ripple-one{animation:signal-pulse 1100ms ease-out var(--arrival-delay) both}
[data-icon-design="5"] .icon-arriving .ripple-two{animation:signal-pulse 1100ms ease-out calc(var(--arrival-delay) + 170ms) both}
@keyframes pure-arrive{0%{opacity:.15;transform:scale(.83)}45%{opacity:1;transform:scale(1.09)}100%{opacity:1;transform:scale(1)}}
@keyframes line-pulse{0%{opacity:0;transform:scale(.6)}20%{opacity:.35}100%{opacity:0;transform:scale(1.13)}}
@keyframes soft-arrive{0%{opacity:.2;transform:scale(.85)}50%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:scale(1)}}
@keyframes halo-pulse{0%{opacity:.45;transform:scale(.9)}100%{opacity:0;transform:scale(1.22)}}
@keyframes tile-arrive{0%{opacity:.2;transform:translateY(7px) scale(.94)}50%{opacity:1;transform:translateY(-2px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tile-pulse{0%{opacity:.4;transform:scale(.95)}100%{opacity:0;transform:scale(1.16)}}
@keyframes draw-arrive{0%{stroke-dashoffset:180;opacity:.3}75%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes ink-pulse{0%,65%,100%{transform:scale(1)}82%{transform:scale(1.08)}}
@keyframes signal-pulse{0%{opacity:.4;transform:scale(.86)}100%{opacity:0;transform:scale(1.28)}}
.icon-gallery .intro{max-width:740px}.icon-options{display:grid;gap:24px}.icon-concept{padding:30px 34px;border:1px solid #e6e0f3;border-radius:26px;background:#ffffffc9}.concept-heading{display:flex;justify-content:space-between;gap:24px;align-items:center}.concept-heading h2{margin:8px 0}.concept-heading p{font-size:14px;margin:0}.try-style{display:inline-flex;align-items:center;justify-content:center;gap:14px;white-space:nowrap;border:1px solid #d5c7f3;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:750;background:#f8f5ff}.try-style:hover{background:#eee7ff;text-decoration:none}.icon-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-top:28px;padding-top:25px;border-top:1px solid #ede7f5}.icon-sample{display:flex;flex-direction:column;align-items:center;gap:12px}.icon-sample>span:last-child{font-size:11px;color:#6d6680;text-align:center}.icon-gallery footer{max-width:680px}
@media(max-width:750px){.icon-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 10px}.icon-concept{padding:25px}.concept-heading{align-items:flex-start}.try-style{padding:9px 13px}}
@media(max-width:550px){.question-lead{gap:12px}.question-icon{width:56px;height:56px;flex-basis:56px}.question-pictogram{width:39px;height:39px}.question-copy h2{font-size:22px}.question-copy .question-number{font-size:9px}.option-1 .question{min-height:365px}.concept-heading{display:block}.try-style{margin-top:18px}.icon-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.icon-concept{padding:22px}}
@keyframes accessible-arrive{0%{opacity:.55}55%{opacity:1}75%{opacity:.8}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){html:not(.preview-motion-enabled) .question-icon,html:not(.preview-motion-enabled) .question-icon *{animation:none!important;transition:none!important}html:not(.preview-motion-enabled) .icon-ripple{display:none}html:not(.preview-motion-enabled) .question-pictogram>*{stroke-dasharray:none!important}html:not(.preview-motion-enabled) .question-icon.icon-arriving{animation:accessible-arrive 650ms ease-out both!important}}

/* Larger question icons for the selected wizard. */
.question-icon{width:96px;height:96px;flex-basis:96px}
.question-pictogram{width:70px;height:70px}
@media(max-width:550px){.question-icon{width:76px;height:76px;flex-basis:76px}.question-pictogram{width:54px;height:54px}.question-lead{gap:14px}}