.sv{--env:#6E1430;--flap:#57102A;--seal:#C9A13B;--ink:#3A1420;--accent:#9B2335;--paper:#FBF3E4;font-family:'EB Garamond',Georgia,'Noto Serif Devanagari',serif;color:var(--ink)}
.sv *{box-sizing:border-box}
.sv-env{position:relative;width:100%;max-width:420px;margin:0 auto;min-height:330px;border-radius:14px;background:var(--env);box-shadow:0 18px 44px rgba(50,25,10,.28);overflow:hidden;transition:background .5s,min-height .5s}
.sv-flap{position:absolute;inset:0 0 auto 0;height:62%;background:var(--flap);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .7s cubic-bezier(.3,.7,.25,1),opacity .4s .4s;z-index:2}
.sv-head{position:absolute;inset:auto 16px 22px;text-align:center;color:#fff;z-index:3;transition:opacity .25s}
.sv-to{margin:0;font-size:24px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.sv-from{margin:4px 0 0;font-size:15.5px;opacity:.9;overflow-wrap:anywhere}
.sv-seal{position:absolute;left:50%;top:62%;width:72px;height:72px;margin:-36px 0 0 -36px;border:0;border-radius:50%;background:var(--seal);color:#fff;font:600 30px 'EB Garamond',Georgia,serif;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.34),inset 0 0 0 4px rgba(255,255,255,.28);z-index:4;animation:sv-pulse 2.2s infinite}
.sv-tap{position:absolute;inset:14px 12px auto;margin:0;text-align:center;color:#fff;font-size:14.5px;z-index:3;opacity:.92}
.sv-card{display:none;background:var(--paper);padding:26px 22px 20px;text-align:center;box-shadow:inset 0 0 0 6px #fff,inset 0 0 0 7px var(--seal)}
.sv-stage[hidden]{display:none}
.sv-eye{margin:0;font-size:15.5px;letter-spacing:.02em;color:var(--accent);outline:0}
.sv-names{margin:8px 0 10px;font-size:32px;line-height:1.15;font-weight:600;overflow-wrap:anywhere}
.sv-msg{margin:8px 0 12px;font-size:18.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.sv-sign{margin:0 0 10px;font-size:17px;font-style:italic;text-align:right;overflow-wrap:anywhere}
.sv-k{margin:12px 0 1px;font-size:13.5px;color:var(--accent)}
.sv-v{margin:0;font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.sv-link{display:inline-block;min-height:32px;margin:6px 8px 0;padding-top:6px;font-size:15px;color:var(--accent)}
.sv-quiz{margin-top:14px}
.sv-opt{display:block;width:100%;min-height:44px;margin-top:7px;border:1px solid var(--seal);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:16px;cursor:pointer;overflow-wrap:anywhere}
.sv-res{min-height:22px;margin:8px 0 0;font-size:16px;color:var(--accent)}
.sv-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 18px;border:1px solid var(--accent);border-radius:10px;font:inherit;font-size:17px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer}
.sv-yes{background:var(--accent);color:#fff}
.sv-no{background:#fff;color:var(--accent)}
.sv-next{width:100%;margin-top:18px}
/* The big question. The arena is the whole space the No button may run in. The question and its caption sit outside it, so it can't cover them. */
.sv-arena{position:relative;min-height:210px;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.sv-arena.sv-still{min-height:0}
.sv-ask{margin:6px 0 18px;font-size:30px;line-height:1.18;font-weight:600;outline:0;overflow-wrap:anywhere}
.sv-row{display:flex;gap:10px;align-items:stretch}
.sv-still .sv-row{display:grid;gap:8px}
.sv-still + .sv-tease{display:none}
.sv-row .sv-yes{min-width:96px}
.sv-run{position:absolute;left:0;top:0;max-width:100%;z-index:2;transition:left .16s ease-out,top .16s ease-out;-webkit-tap-highlight-color:transparent}
.sv-tease{margin:6px 0 0;min-height:44px;font-size:16px;line-height:1.3;font-style:italic;color:var(--accent);overflow-wrap:anywhere}
.sv-tease:empty{visibility:hidden}
/* The ticket after Yes */
.sv-ticket{position:relative}
.sv-stub{position:relative;padding:18px 16px 20px;border:1.5px dashed var(--seal);border-radius:12px;background:#fff}
.sv-stub:before,.sv-stub:after{content:"";position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--paper);border:1.5px dashed var(--seal)}
.sv-stub:before{left:-10px}.sv-stub:after{right:-10px}
.sv-stub-k{margin:0;font:600 12.5px Poppins,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sv-yay{margin:6px 0 8px;font-size:30px;line-height:1.15;font-weight:600;outline:0}
.sv-stub-n{font-weight:600}
.sv-reply{width:100%;margin-top:14px}
.sv-hint{margin:12px 0 0;font-size:15.5px;line-height:1.35}
.sv-back{display:inline-block;min-height:40px;margin-top:8px;padding:0 8px;border:0;background:none;color:var(--accent);font:inherit;font-size:15.5px;text-decoration:underline;cursor:pointer}
.sv-own{margin-top:10px}
.sv-burst{position:absolute;inset:0 0 auto;height:0;overflow:visible;pointer-events:none}
.sv-burst i{position:absolute;top:-6px;width:8px;height:12px;border-radius:2px;animation:sv-fall 1.6s ease-in forwards}
.sv-safe{margin:18px 0 6px;font:12.5px/1.4 Poppins,system-ui,sans-serif;color:#6b5f55}
.sv-foot{margin:0;font:12.5px Poppins,system-ui,sans-serif}
.sv-foot a{color:var(--accent)}
.sv.open .sv-env{min-height:0;background:var(--paper)}
.sv.open .sv-flap{transform:rotateX(180deg);opacity:0;pointer-events:none}
.sv.open .sv-head,.sv.open .sv-seal,.sv.open .sv-tap{display:none}
.sv.open .sv-card{display:block;animation:sv-rise .6s ease}
@keyframes sv-pulse{50%{transform:scale(1.06)}}
@keyframes sv-rise{from{transform:translateY(40px);opacity:0}}
@keyframes sv-fall{to{transform:translateY(300px) rotate(300deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.sv *{animation:none!important;transition:none!important}}