:root{--blue:#1688d4;--blue2:#0d6ca8;--ink:#172033;--muted:#6c7484;--bg:#f5f7fa;--line:#dfe5eb;--green:#22b573;--red:#ef5b67}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 15% 10%,rgba(22,136,212,.08),transparent 28%),var(--bg);color:var(--ink)}
.wrap{width:min(1080px,calc(100% - 32px));margin:auto}.topbar{background:#fff;border-bottom:1px solid var(--line)}.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:var(--blue);font-size:1.15rem}.screen{width:31px;height:25px;border:3px solid var(--blue);border-radius:5px;position:relative}.screen:after{content:"";position:absolute;width:12px;height:3px;background:var(--blue);left:50%;bottom:-8px;transform:translateX(-50%)}.tagline{color:var(--muted);font-weight:700;font-size:.93rem}
.main{padding:52px 0 70px}.intro{text-align:center;max-width:820px}.eyebrow{margin:0 0 8px;color:var(--blue);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}h1{font-size:clamp(2.25rem,6vw,4rem);line-height:1.03;letter-spacing:-.045em;margin:0 0 16px}.lead{color:var(--muted);max-width:700px;margin:0 auto;font-size:1.05rem}.progress{max-width:440px;margin:26px auto 0;display:flex;gap:14px;align-items:center;color:var(--muted);font-weight:700;font-size:.9rem}.bar{flex:1;height:7px;background:#e3e8ee;border-radius:99px;overflow:hidden}.bar span{display:block;height:100%;width:33.333%;background:var(--blue);border-radius:99px;transition:.3s}
.chooser{margin-top:34px;display:flex;flex-direction:column;align-items:center}.stack{width:min(100%,430px);height:570px;position:relative}.card{position:absolute;inset:0;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 24px 70px rgba(22,35,58,.16);border:1px solid rgba(223,229,235,.9);touch-action:pan-y;user-select:none;transform-origin:50% 95%;transition:transform .25s,opacity .25s}.card.next{transform:scale(.96) translateY(16px);opacity:.58;z-index:1}.card.current{z-index:3}.card img{width:100%;aspect-ratio:1/1;object-fit:cover}.content{padding:23px}.titleline{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.titleline h2{margin:0;font-size:1.8rem}.badge{font-size:.75rem;font-weight:800;color:var(--blue2);background:#eaf5fc;padding:5px 9px;border-radius:99px}.content p{margin:9px 0 0;color:var(--muted)}
.stamp{position:absolute;top:28px;padding:9px 13px;border:4px solid currentColor;border-radius:10px;font-size:1.3rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.84);opacity:0;z-index:5}.stamp.like{left:24px;color:var(--green);transform:rotate(-10deg)}.stamp.nope{right:24px;color:var(--red);transform:rotate(10deg)}
.actions{display:flex;gap:28px;margin-top:28px}.circle{width:72px;height:72px;border-radius:50%;border:0;background:#fff;box-shadow:0 12px 32px rgba(22,35,58,.14);font-size:2.3rem;font-weight:700;cursor:pointer}.circle:hover{transform:translateY(-2px)}.no{color:var(--red)}.yes{color:var(--green)}.hint{margin-top:15px;color:var(--muted);font-size:.88rem}
.overlay{position:fixed;inset:0;background:rgba(16,24,39,.74);z-index:100;display:grid;place-items:center;padding:22px;backdrop-filter:blur(8px)}.overlay[hidden]{display:none}.matchbox{width:min(100%,500px);background:#fff;border-radius:30px;padding:30px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.3)}.matchbox h2{font-size:clamp(2rem,6vw,3rem);margin:0 0 8px}.matchbox img{width:170px;height:170px;object-fit:cover;border-radius:50%;margin:18px auto;border:6px solid #e8f7f0}.matchbox h3{margin:0 0 8px}.matchbox p{color:var(--muted)}.hearts{color:var(--green);letter-spacing:.25em;font-size:1.5rem}.cta{display:inline-flex;min-height:48px;padding:0 20px;align-items:center;border-radius:12px;background:var(--blue);color:#fff;text-decoration:none;font-weight:800}.restart{display:block;margin:14px auto 0;border:0;background:transparent;color:var(--muted);text-decoration:underline;cursor:pointer}
@media(max-width:600px){.tagline{display:none}.main{padding-top:36px}.stack{height:520px}.circle{width:66px;height:66px}.content{padding:20px}}