@font-face { font-family: Manrope; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/manrope-latin.woff2) format("woff2"); }
@font-face { font-family: Sora; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/fonts/sora-latin.woff2) format("woff2"); }
:root {
  --bg: #f4f5f2; --ink: #15171a; --ink-2: #5b6068; --line: #dfe2dc; --field: #ffffff;
  --volt: #c6ff3d; --volt-ink: #15171a; --glow: rgba(120, 190, 20, .18); --err: #b42318;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e1012; --ink: #eef0ec; --ink-2: #9aa09a; --line: #2a2e33; --field: #16191c; --glow: rgba(198, 255, 61, .16); --err: #ff9b8a; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: Manrope, system-ui, sans-serif; display: flex; flex-direction: column; min-height: 100%; padding: 0 16px; }
.top { max-width: 1040px; width: 100%; margin: 0 auto; padding: 22px 0; display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.top svg { width: 28px; height: 28px; color: var(--ink); }
.top b { font-family: Manrope; font-weight: 800; font-size: 21px; letter-spacing: -.035em; }
main { flex: 1; display: grid; place-items: center; text-align: center; padding: 30px 0 60px; }
.wrap { max-width: 560px; width: 100%; }
.mark { width: 132px; height: 132px; margin: 0 auto 30px; position: relative; }
.mark::before { content: ''; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); }
.mark svg { position: relative; width: 100%; height: 100%; color: var(--ink); animation: float 6s ease-in-out infinite; }
h1 { font-family: Sora; font-weight: 600; font-size: clamp(38px, 7vw, 60px); line-height: 1.02; letter-spacing: -.035em; margin: 0; }
.sub { color: var(--ink-2); font-size: 18px; margin: 16px auto 32px; max-width: 420px; }
form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; }
input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
input:focus { outline: 2px solid var(--volt); outline-offset: 1px; border-color: transparent; }
button { font: inherit; font-weight: 600; font-size: 16px; border: 0; border-radius: 10px; padding: 14px 20px; background: var(--volt); color: var(--volt-ink); cursor: pointer;
  transition: transform 100ms cubic-bezier(.2,0,0,1); }
button:active { transform: scale(.97); }
button:disabled { opacity: .7; cursor: progress; transform: none; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.fine { font-size: 13px; color: var(--ink-2); margin-top: 14px; }
.err { font-size: 14px; color: var(--err); margin: 12px 0 0; min-height: 0; }
.err:empty { display: none; }
.done { display: none; font-family: Sora; font-weight: 600; font-size: 18px; }
.ok form, .ok .fine, .ok .err { display: none; } .ok .done { display: block; animation: rise 250ms cubic-bezier(.05,.7,.1,1) both; }
footer { max-width: 1040px; width: 100%; margin: 0 auto; padding: 20px 0 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--ink-2); font-size: 13px; border-top: 1px solid var(--line); }
footer a { color: inherit; }
/* legal pages */
.doc { flex: 1; max-width: 680px; width: 100%; margin: 0 auto; padding: 24px 0 64px; line-height: 1.6; overflow-wrap: anywhere; }
.doc h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.1; margin-bottom: 20px; }
.doc h2 { font-family: Sora; font-weight: 600; font-size: 19px; letter-spacing: -.02em; margin: 32px 0 8px; }
.doc p, .doc li { color: var(--ink); font-size: 16px; }
.doc ul { padding-left: 22px; }
.doc a { color: var(--ink); text-decoration-color: var(--volt); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .mark svg { animation: none; } .ok .done { animation-duration: 150ms; } }
@media (max-width: 480px) { form { flex-direction: column; } .sub { font-size: 16px; } }
.home { display: inline-block; font-weight: 700; font-size: 16px; padding: 14px 20px; border-radius: 10px; background: var(--volt); color: var(--volt-ink); text-decoration: none; }