:root{--bg:#fbf6f0;--bg2:#f4ebe0;--fg:#2f2a26;--muted:#6b625a;--accent:#d9466f;--accent2:#5b8a4e;--on-accent:#fff;--on-accent2:#fff;--card:#fff;--line:rgba(47,42,38,.12);--fh:"Fraunces",Georgia,serif;--fb:"Outfit",system-ui,sans-serif;--r:26px;--btnr:999px;--hh:0px;--fbg:#2f2a26}
h1,h2{font-weight:600;letter-spacing:-.02em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hd{display:flex;justify-content:space-between;align-items:center;padding:14px clamp(18px,3vw,40px)}
.logo small{font-size:10px}
.basket{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:var(--fg);color:#fff;text-decoration:none;font-weight:700}.basket span[aria-hidden]{color:#f3a3b8}
.basket.bump{animation:bump .4s}@keyframes bump{40%{transform:scale(1.15)}}
.stage{padding:20px 0 80px;background:radial-gradient(circle at 75% 40%,#fde4ea,transparent 45%),radial-gradient(circle at 10% 90%,#e6efd9,transparent 40%)}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.copy h1{font-size:clamp(2.6rem,5vw,4.6rem);line-height:1}
.how{list-style:none;margin:20px 0 0;padding:0;display:flex;gap:20px;color:var(--muted);font-weight:600}.how span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);margin-right:6px;color:var(--fg)}
.deckwrap{display:grid;justify-items:center;gap:22px}
.deck{position:relative;width:min(360px,84vw);aspect-ratio:3/4.2;outline:none}
.deck:focus-visible{outline:3px dashed var(--accent);outline-offset:10px;border-radius:var(--r)}
.card{position:absolute;inset:0;border-radius:var(--r);background:var(--bg);box-shadow:0 30px 60px -34px rgba(47,42,38,.55),0 0 0 1px var(--line);overflow:hidden;display:flex;flex-direction:column;touch-action:pan-y;user-select:none;cursor:grab;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s;transform:translateY(calc(var(--d,0)*20px)) rotate(calc(var(--d,0)*2.2deg)) scale(calc(1 - var(--d,0)*.045));z-index:calc(20 - var(--d,0))}
.card.drag{transition:none;cursor:grabbing}
.card.gone{pointer-events:none;opacity:0}
.card .art{flex:1;display:grid;place-items:center;padding:10px 10px 0}
.bq{width:84%;height:auto}
.card.top .bl{animation:sway 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes sway{50%{transform:rotate(3deg)}}
.info{background:rgba(255,255,255,.86);padding:16px 20px 18px;position:relative}
.info h3{font:600 1.5rem/1.1 var(--fh);margin:0 0 2px}.info .sub{font-weight:600;color:var(--accent2);margin:0 0 6px;font-size:14.5px}.info p{margin:0;font-size:14.5px;color:var(--muted)}
.pr{position:absolute;right:18px;top:-20px;background:var(--fg);color:#fff;font:700 1.05rem var(--fb);padding:8px 14px;border-radius:999px}
.stamp{position:absolute;top:26px;padding:6px 14px;border:4px solid;border-radius:10px;font:800 1.4rem var(--fb);text-transform:uppercase;letter-spacing:.06em;opacity:0;pointer-events:none}
.stamp.yes{left:22px;color:var(--accent2);transform:rotate(-14deg)}.stamp.no{right:22px;color:var(--accent);transform:rotate(14deg)}
.done{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;border-radius:var(--r);border:2px dashed var(--line);z-index:0}.done svg{width:80px}.done h3{font:600 1.5rem var(--fh);margin:6px 0 0}.done p{color:var(--muted);margin:0 0 8px}
.btn2{font:700 15px var(--fb);padding:11px 18px;border-radius:999px;border:0;background:var(--fg);color:#fff;cursor:pointer}
.ctl{display:flex;gap:18px;align-items:center;margin-top:24px}
.cb{width:64px;height:64px;border-radius:50%;border:0;background:#fff;box-shadow:0 12px 24px -12px rgba(47,42,38,.5),0 0 0 1px var(--line);font-size:26px;cursor:pointer;transition:transform .2s}
.cb:hover{transform:translateY(-3px) scale(1.06)}.cb:active{transform:scale(.94)}
.cb.no{color:var(--accent)}.cb.yes{color:#fff;background:var(--accent);width:74px;height:74px;font-size:30px}.cb.un{width:48px;height:48px;font-size:20px;color:var(--muted)}
.sec{padding:84px 0}.sec.alt{background:var(--bg2)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.picks{list-style:none;margin:16px 0;padding:0;display:grid;gap:8px}.picks li{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:#fff;border-radius:14px;border:1px solid var(--line);animation:pin .4s cubic-bezier(.3,1.4,.5,1)}@keyframes pin{from{transform:scale(.9);opacity:0}}
.picks .empty{color:var(--muted);justify-content:center;border-style:dashed;background:transparent}
.tot{display:flex;justify-content:space-between;font-size:1.1rem;border-top:2px solid var(--fg);padding-top:12px}.tot b{font:600 1.6rem var(--fh)}
.fcard{background:#fff;border-radius:var(--r);padding:26px;box-shadow:0 30px 60px -40px rgba(47,42,38,.5);border:1px solid var(--line)}.fcard .ok{margin-top:12px}
.chk{display:flex!important;gap:10px;align-items:center;font-weight:600}.chk input{width:auto!important}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.three .n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;font:600 1.3rem var(--fh);margin-bottom:12px}.three p{color:var(--muted)}
@media(max-width:860px){.sgrid,.pgrid{grid-template-columns:1fr}.sgrid{gap:26px}.copy{text-align:center}.how{justify-content:center}.three{grid-template-columns:1fr}.sec{padding:64px 0}.copy h1{font-size:2.6rem}}
@media (prefers-reduced-motion:reduce){.card{transition:none}}