.velvet-flip{--vf-ink:#f9dbe5;--vf-muted:#d2acbd;--vf-ruby:#dd6688;--vf-rose:#ffb8ce;width:100%;max-width:536px;margin:0 auto;color:var(--vf-ink);color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;position:relative}
.velvet-flip *{box-sizing:border-box}
.velvet-flip .vf-frame{width:100%;position:relative;padding:10px;border:1px solid #b6536e;border-radius:25px;background:linear-gradient(120deg,#351925,#341523);isolation:isolate;transition:border-color .35s,box-shadow .4s}
.velvet-flip .vf-button{appearance:none;position:relative;display:block;width:100%;height:80px;margin:0;padding:0;border:1px solid #998590;border-radius:16px;overflow:hidden;isolation:isolate;background:linear-gradient(140deg,#71616d,#594a55);color:#d7c8d2;font-family:inherit;font-size:21px;font-weight:500;line-height:1.25;text-align:left;box-shadow:inset 0 1px #f3deeb1a,0 3px 6px #100a141f;transition:background .4s,color .3s,border-color .3s,box-shadow .3s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.velvet-flip .vf-key{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:33px;height:38px;display:grid;place-items:center;z-index:4;background:linear-gradient(150deg,#645264,#534554);color:#c0b6cf;border:1px solid #463645;border-radius:8px;font-size:17px;line-height:1;box-shadow:inset 0 1px #b9a0b51f,0 2px 3px #1d102129;transition:transform .4s cubic-bezier(.2,.75,.3,1),opacity .22s,color .3s,border-color .3s}
.velvet-flip .vf-field{position:absolute;inset:0;perspective:470px;z-index:4;pointer-events:none}
.velvet-flip .vf-copy{position:absolute;inset:0 18px 0 68px;display:flex;align-items:center;justify-content:flex-start;white-space:nowrap;backface-visibility:hidden;transform-origin:center;will-change:transform,opacity;letter-spacing:0;line-height:1.08}
.velvet-flip .vf-copy.vf-centered{inset:0 27px;justify-content:center}
.velvet-flip .vf-hold{font-weight:800;color:#fff0f5;text-shadow:0 2px 12px #f6b0ca15}
.velvet-flip .vf-hold .vf-dots{color:#ffd2e0;font-weight:800}
.velvet-flip .vf-finale-copy{font-weight:600;color:#fff0f5;transition:color 4s linear}
.velvet-flip .vf-finale-copy strong{font-weight:900;font-size:inherit;line-height:inherit}
.velvet-flip .vf-fold{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,#ffe1ee15 46%,#24091c48 50%,transparent 55%);opacity:0;z-index:1;pointer-events:none}
.velvet-flip .vf-sheen{position:absolute;inset:-80% -20%;background:linear-gradient(90deg,transparent 36%,#ffdde71f 50%,transparent 64%);opacity:0;transform:translateX(-100%) rotate(22deg);z-index:2;pointer-events:none}
.velvet-flip .vf-click-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 52%,#ffccdc38,transparent 72%);opacity:0;z-index:3;pointer-events:none}
.velvet-flip .vf-gray-wash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(145deg,#625d67,#46414a);transition:opacity 4s linear}
.velvet-flip .vf-return-track{position:absolute;bottom:4px;left:27px;right:27px;height:2px;border-radius:2px;overflow:hidden;opacity:0;background:#f4adc31a;transition:opacity .2s}
.velvet-flip .vf-return-fill{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#dc6387,#ffc0d1);border-radius:2px}
.velvet-flip:is([data-phase=hover],[data-phase=pressed]) .vf-frame{border-color:#ec98b0;box-shadow:0 0 25px #db4d7324,inset 0 0 17px #ffbed209}
.velvet-flip[data-phase=hover] .vf-button{background:linear-gradient(130deg,#874862,#572e46);border-color:#ca829b;color:#ffeef4;box-shadow:inset 0 1px #ffdee828,0 5px 12px #190a1b25}
.velvet-flip[data-phase=hover] .vf-key{color:#ffdfeb;border-color:#b67a94;transform:translateY(-54%) rotate(-7deg)}
.velvet-flip[data-phase=hover] .vf-fold{animation:vf-fold-open .62s ease both}
.velvet-flip[data-phase=hover] .vf-sheen{animation:vf-velvet-sheen .85s ease both}
.velvet-flip:is([data-phase=pressed],[data-phase=finale]) .vf-button{background:linear-gradient(132deg,#894565,#5e2847);border-color:#e293ae;box-shadow:inset 0 1px #ffd4e737,inset 0 -7px 24px #2e0e1e21,0 5px 17px #1c071c2e}
.velvet-flip:is([data-phase=pressed],[data-phase=finale],[data-phase=gray]) .vf-key{transform:translate(-18px,-50%) rotate(-16deg) scale(.88);opacity:0}
.velvet-flip[data-phase=soon] .vf-button{background:linear-gradient(145deg,#704459,#503447);border-color:#a7738a;color:#f6dbe6}
.velvet-flip[data-phase=soon] .vf-key{transform:translateY(-50%) rotate(5deg);color:#c8b2ca}
.velvet-flip:is([data-phase=soon],[data-phase=patience]) .vf-return-track{opacity:1}
.velvet-flip:is([data-phase=finale],[data-phase=gray],[data-phase=spent],[data-phase=patience]) .vf-gray-wash{opacity:1}
.velvet-flip:is([data-phase=finale],[data-phase=gray],[data-phase=spent],[data-phase=patience]) .vf-button{border-color:#807883;transition:border-color 4s,color 4s;box-shadow:inset 0 1px #e1d6e018}
.velvet-flip:is([data-phase=gray],[data-phase=spent],[data-phase=patience]) .vf-frame{border-color:#857081;box-shadow:none}
.velvet-flip:is([data-phase=spent],[data-phase=patience]) .vf-copy{color:#ddd1df}
.velvet-flip:is([data-phase=spent],[data-phase=patience]) .vf-key{color:#b9abbf;background:#544b59;border-color:#716379}
.velvet-flip .vf-particles{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:visible}
.velvet-flip .vf-droplet-group{position:absolute;width:24px;height:27px;opacity:0;pointer-events:none}
.velvet-flip .vf-droplet{position:absolute;width:12px;height:17px;left:4px;top:0;border-radius:55% 50% 58% 12%;transform:rotate(-35deg) scale(var(--drop-scale,1));background:radial-gradient(ellipse at 31% 32%,#f5ffff 0%,#dcffff 7%,transparent 22%),linear-gradient(145deg,#b6f5ff,#50baf0 57%,#188ac5);box-shadow:inset -1px -2px 3px #0d6fb76b,0 2px 5px #86dfff28}
.velvet-flip .vf-small-drop{width:7px;height:10px;left:18px;top:-4px;transform:rotate(-58deg) scale(var(--drop-scale,1))}
.velvet-flip .vf-bonus{position:absolute;left:50%;top:0;z-index:10;translate:-50% 0;font:700 19px/1.2 Inter,system-ui,sans-serif;color:#f4dba2;text-shadow:0 1px 7px #371624;pointer-events:none;opacity:0;white-space:nowrap}
.velvet-flip .vf-announce{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes vf-fold-open{0%,100%{opacity:0}44%{opacity:1}}
@keyframes vf-velvet-sheen{0%{transform:translateX(-100%) rotate(22deg);opacity:0}22%{opacity:1}100%{transform:translateX(110%) rotate(22deg);opacity:0}}
@media(max-width:480px){.velvet-flip .vf-frame{padding:8px;border-radius:22px}.velvet-flip .vf-button{height:76px;font-size:clamp(13px,3.65vw,18px);border-radius:14px}.velvet-flip .vf-key{left:13px;width:28px;height:33px;font-size:15px}.velvet-flip .vf-copy{left:51px;right:12px}.velvet-flip .vf-copy.vf-centered{inset:0 25px}}
@media(prefers-reduced-motion:reduce){.velvet-flip *,.velvet-flip *:before,.velvet-flip *:after{animation:none!important;transition:none!important}.velvet-flip .vf-key{transform:translateY(-50%)!important}}

/* Keep informational hover available, but never suggest this is clickable. */
.velvet-flip .vf-button[aria-disabled="true"],
.velvet-flip .vf-button[aria-disabled="true"] *{cursor:default!important}