:root{--a:#ff5d8f;--b:#ffb347;--c:#7c5cff;--ink:#1d1d1f;--mut:#6e6e73;--card:rgba(255,255,255,.82)}
.t-ocean{--a:#00b4d8;--b:#90e0ef;--c:#0077b6}.t-sunset{--a:#ff6b6b;--b:#feca57;--c:#ff9f43}.t-galaxy{--a:#a855f7;--b:#6366f1;--c:#ec4899}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{font-family:Inter,-apple-system,system-ui,sans-serif;color:var(--ink);background:#fff7f0;-webkit-font-smoothing:antialiased}
#bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(60% 50% at 10% 0%,color-mix(in srgb,var(--a) 35%,transparent),transparent),radial-gradient(50% 50% at 100% 30%,color-mix(in srgb,var(--b) 40%,transparent),transparent),radial-gradient(60% 50% at 50% 100%,color-mix(in srgb,var(--c) 30%,transparent),transparent);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{filter:hue-rotate(25deg);transform:scale(1.08)}}
main{max-width:520px;margin:0 auto;padding:20px 16px 60px}
.card{background:var(--card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:28px;padding:24px;margin:14px 0;box-shadow:0 10px 40px rgba(0,0,0,.08);animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.card:nth-child(2){animation-delay:.1s}.card:nth-child(3){animation-delay:.2s}.card:nth-child(4){animation-delay:.3s}.card:nth-child(5){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}}
.hero{text-align:center;padding:36px 22px;overflow:hidden;position:relative}
.emoji{font-size:72px;display:inline-block;animation:bob 2.4s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-10px) rotate(6deg)}}
h1{font-family:Fredoka,sans-serif;font-size:38px;line-height:1.05;margin:10px 0 6px;background:linear-gradient(90deg,var(--a),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-family:Fredoka,sans-serif;margin:0 0 12px;font-size:22px}
.sub{color:var(--mut);margin:0}.msg{font-size:17px;line-height:1.5;margin:16px 0 0;white-space:pre-wrap}
.demo{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:99px;padding:5px 12px}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.cd div{background:#fff;border-radius:18px;padding:12px 0}.cd b{display:block;font-family:Fredoka;font-size:30px;color:var(--a)}.cd span{font-size:12px;color:var(--mut)}
.row{display:flex;gap:12px;align-items:flex-start;margin:6px 0}.ic{font-size:22px}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.btn{appearance:none;border:0;border-radius:99px;padding:12px 18px;font:600 15px Inter,sans-serif;cursor:pointer;text-decoration:none;color:var(--ink);background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .15s}
.btn:active{transform:scale(.96)}.btn.p{background:linear-gradient(90deg,var(--a),var(--c));color:#fff;width:100%;font-size:17px;padding:16px}
label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px}
input,textarea,select{width:100%;font:16px Inter,sans-serif;padding:13px 14px;border:1.5px solid #e5e5ea;border-radius:14px;background:#fff;outline:none;transition:border .2s}
input:focus,textarea:focus,select:focus{border-color:var(--a)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{border:1.5px solid #e5e5ea;background:#fff;border-radius:14px;padding:12px 4px;font:600 15px Inter;cursor:pointer;transition:all .2s}
.seg button.on{border-color:var(--a);background:color-mix(in srgb,var(--a) 12%,#fff);transform:scale(1.03)}
.ok{text-align:center;font-size:18px}.err{color:#d70015;font-size:14px;min-height:1em;margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.stats div{background:#fff;border-radius:18px;padding:14px 4px}.stats b{font-family:Fredoka;font-size:28px;display:block}
.g{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #eee}.g:last-child{border:0}.g small{color:var(--mut);display:block;margin-top:2px}
.pill{font-size:12px;font-weight:600;border-radius:99px;padding:4px 10px;white-space:nowrap;height:fit-content}.yes{background:#d1fadf;color:#05603a}.no{background:#fee4e2;color:#b42318}.maybe{background:#fef0c7;color:#93370d}
.link{word-break:break-all;background:#fff;border-radius:12px;padding:10px;font-size:14px;margin:6px 0}
.foot{text-align:center;color:var(--mut);font-size:13px;margin-top:24px}.foot a{color:inherit}
.conf{position:fixed;top:-20px;width:10px;height:14px;z-index:9;border-radius:2px;animation:fall linear forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.loader{width:40px;height:40px;border-radius:50%;border:4px solid #ddd;border-top-color:var(--a);margin:40vh auto;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(1turn)}}
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}