:root{--bg:#f5f5f7;--fg:#1d1d1f;--mute:#8e8e93;--gray:#e5e5ea;--grayfg:#1d1d1f;--blue:#2f5bea;--line:#d2d2d7}
@media (prefers-color-scheme:dark){:root{--bg:#000;--fg:#f5f5f7;--gray:#2c2c2e;--grayfg:#f5f5f7;--blue:#3d6bff;--line:#3a3a3c}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:18px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple Color Emoji","Segoe UI Emoji",Roboto,Helvetica,Arial,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16px}
main{width:100%;max-width:420px;display:flex;flex-direction:column;gap:8px}
.b,.sys{opacity:0;transform:translateY(8px) scale(.96);animation:in .45s cubic-bezier(.2,.8,.2,1) forwards}
.b{max-width:78%;padding:10px 16px;border-radius:20px}
.l{align-self:flex-start;background:var(--gray);color:var(--grayfg);border-bottom-left-radius:6px}
.r{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.dots{display:flex;gap:5px;padding:14px 16px}
.dots i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.5;animation:dot 1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
.who{align-self:flex-start;font-size:13px;color:var(--mute);margin:8px 0 -4px 10px;opacity:0;animation:in .45s ease forwards}
.sys{align-self:center;color:var(--mute);font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.form{margin-top:20px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:24px;padding:6px 6px 6px 16px;background:var(--bg);opacity:0;transform:translateY(8px);animation:in .6s ease forwards;position:relative}
.form:focus-within{border-color:var(--blue)}
.form input[type=email]{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--fg);font:inherit;font-size:16px;padding:8px 0}
.form input::placeholder{color:var(--mute);opacity:1}
.form button{width:34px;height:34px;flex:none;border-radius:50%;border:0;background:var(--blue);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.form button:disabled{opacity:.4;cursor:default}
.legal{align-self:center;margin-top:10px;font-size:13px;color:var(--mute);display:flex;gap:8px;opacity:0;animation:in .6s ease forwards}
.legal a{color:var(--mute);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--fg)}
.trap{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
@keyframes in{to{opacity:1;transform:none}}
@keyframes dot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.b,.sys,.form,.legal,.who{animation-duration:.01s}.dots i{animation:none}}
/* preview tools (only with ?preview) */
#bar{position:fixed;top:0;left:0;right:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:10px;background:var(--bg);border-bottom:1px solid var(--line);z-index:5}
#bar button{font:inherit;font-size:14px;padding:6px 12px;border-radius:14px;border:1px solid var(--line);background:var(--gray);color:var(--grayfg);cursor:pointer}
#bar button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
body.all{justify-content:flex-start;padding-top:64px;height:auto;min-height:100%}
#grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px 24px;width:100%;max-width:1200px}
.card{border:1px solid var(--line);border-radius:16px;padding:18px 14px}
.card h4{margin:0 0 12px;font-size:13px;color:var(--mute);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.card .b,.card .sys,.card .form,.card .legal{animation:none;opacity:1;transform:none;pointer-events:none}
.card .dots{display:none}