:root{--ink: #111;--muted: #5d6b78;--line: #ecd3b4;--paper: #fffdf9;--back: #161412;--gold: #d6b47c;--accent: #2f6a96;--cw: 110px;--ch: 158px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:transparent;color-scheme:light}body{font-family:Satoshi,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:500;color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden}.pick{position:relative;display:flex;flex-direction:column;height:100%;padding:4px 20px max(20px,env(safe-area-inset-bottom))}.head{position:absolute;z-index:70;left:20px;right:20px;top:var(--head-top, 8px);height:72px;text-align:center;transition:top .6s cubic-bezier(.22,1,.36,1)}.head>div{position:absolute;top:0;right:0;bottom:0;left:0;transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}.head>div.out{opacity:0;transform:translateY(-8px);pointer-events:none}.head>div.in{animation:rise .45s cubic-bezier(.22,1,.36,1) both}.head h2{margin:0;font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:400}.head h2 span{color:var(--accent)}.head p{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}.stage{position:relative;flex:1;min-height:0}.card{position:absolute;left:50%;top:calc(50% + var(--shift-y, 0px));width:var(--cw);height:var(--ch);margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);padding:0;border:0;background:none;border-radius:0;cursor:default;perspective:900px;-webkit-tap-highlight-color:transparent;will-change:transform}.card.is-moving{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .45s ease,filter .45s ease}.halo{position:absolute;top:4%;right:4%;bottom:4%;left:4%;z-index:-1;opacity:0;filter:blur(18px);background:radial-gradient(90% 70% at 50% 55%,#7ab0d899,#397ba840);transition:opacity .45s ease;pointer-events:none}.card.glow .halo{opacity:1;animation:glow 2.8s ease-in-out infinite}.pick[data-state=pick] .card{cursor:pointer}.pick[data-state=pick] .card .flip{animation:breathe 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s)}.card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.flip{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.65,0,.35,1)}.card.flipped .flip{transform:rotateY(180deg)}.face{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;--drop: 0 1px 2px rgba(10,39,66,.12), 0 14px 28px -8px rgba(10,39,66,.28);-webkit-backface-visibility:hidden;backface-visibility:hidden}.mark{display:block;width:100%;height:auto;fill:currentColor}.face.back{background:radial-gradient(120% 80% at 22% 12%,#ffffff8c,#fff0 55%),linear-gradient(162deg,#d4e6f1,#b8d7e8 52%,#a2c6db);box-shadow:var(--drop)}.emb{position:absolute;left:50%;top:50%;width:calc(var(--cw) * .48);transform:translate(-50%,-50%);color:#fff}.face.front{transform:rotateY(180deg);color:#0a2742;background:linear-gradient(165deg,#fff,#f5f9fc);box-shadow:inset 0 0 0 1px #0a274214,var(--drop)}.ghost{position:absolute;right:calc(var(--cw) * -.26);top:calc(var(--cw) * -.36);width:calc(var(--cw) * .8);color:#e8f1f7}.f-amount{position:absolute;top:30%;left:0;right:0;display:flex;justify-content:center;align-items:flex-start;line-height:1;font-weight:400;color:#0a2742}.f-cur{margin:.3em .05em 0 0;font-size:calc(var(--cw) * .15);color:#397ba8}.f-num{font-size:calc(var(--cw) * .34);letter-spacing:-.045em}.f-off{position:absolute;top:55%;left:0;right:0;text-align:center;padding-left:.42em;font-size:calc(var(--cw) * .055);letter-spacing:.42em;text-transform:uppercase;color:#7d8d9b}.f-line{position:absolute;top:70%;left:13%;right:13%;border-top:1px solid rgba(10,39,66,.1)}.f-base{position:absolute;left:0;right:0;top:70%;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;padding:0 10%;text-align:center}.f-kind{font-size:calc(var(--cw) * .05);letter-spacing:.26em;padding-left:.26em;text-transform:uppercase;color:#397ba8}.f-terms{font-size:calc(var(--cw) * .064);line-height:1.3;color:#0a2742}.sheen{position:absolute;top:-20%;bottom:-20%;left:-40%;width:34%;background:linear-gradient(100deg,#dcecf700,#dcecf7e6,#fff0);mix-blend-mode:soft-light;transform:skew(-18deg);opacity:0}.card.won .sheen{animation:sheen 1s .55s ease-in-out both}.card.aside{filter:saturate(.45)}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;width:100%;height:100%;pointer-events:none}.foot{flex:none;min-height:136px;padding-top:10px}.again{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 auto 10px;height:32px;padding:0 16px;border:1px solid rgba(57,123,168,.35);border-radius:999px;background:#ffffffbf;color:#2f6a96;font:500 13px/1 inherit;font-family:inherit;cursor:pointer}.again span{font-size:15px;line-height:1}.again em{font-style:normal;color:#7d8d9b;margin-left:2px}.again-done{margin:0 0 10px;height:32px;display:grid;place-items:center;font-size:12.5px;color:#7d8d9b}.again:hover{border-color:#397ba8;background:#fff}.again:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.foot>*{animation:rise .4s cubic-bezier(.22,1,.36,1) backwards}form.email{display:flex;height:48px;border:1px solid var(--ink);border-radius:2px;background:#fff}form.email:focus-within{outline:2px solid var(--accent);outline-offset:2px}form.email input{flex:1;min-width:0;border:0;outline:0;padding:0 14px;font:500 16px/1 inherit;font-family:inherit;background:transparent;color:var(--ink)}form.email button,.copy{border:0;background:var(--ink);color:#fff;cursor:pointer;font-family:inherit}form.email button{width:48px;font-size:18px}form.email button:disabled{opacity:.55;cursor:wait}.message{min-height:18px;margin:8px 0 0;font-size:13px;color:var(--accent);text-align:center}.consent{margin:4px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted);text-align:center}.code{display:grid;place-items:center;height:52px;border:1px dashed rgba(57,123,168,.7);border-radius:2px;background:#f3f8fb;color:#0a2742;font-size:22px;letter-spacing:.28em;padding-left:.28em;-webkit-user-select:all;user-select:all}.copy{width:100%;height:48px;margin-top:10px;border-radius:2px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}.copy-note{margin:8px 0 0;font-size:12px;color:var(--muted);text-align:center}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}@keyframes glow{0%,to{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.04)}}@keyframes breathe{50%{transform:translateY(-4px)}}@keyframes sheen{0%{left:-40%;opacity:1}to{left:120%;opacity:1}}@media(prefers-reduced-motion:reduce){.card.is-moving,.flip,.head,.head>div{transition:none!important}.pick .card .flip,.card.won .sheen,.card.glow .halo,.head>div.in,.foot>*{animation:none!important}}
/*# sourceMappingURL=/cdn/shop/t/214/assets/dt-card-pick.css.map */