:root {
  --ink: #f5f7ff;
  --soft: rgba(245, 247, 255, 0.74);
  --line: rgba(255, 255, 255, 0.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.6 "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background:
    radial-gradient(80vw 50vh at 20% 10%, rgba(255, 74, 162, 0.32), transparent 70%),
    radial-gradient(80vw 60vh at 85% 75%, rgba(30, 212, 214, 0.26), transparent 70%),
    #0a0c1c;
  background-attachment: fixed;
}

main { width: min(760px, 100% - 32px); margin: 0 auto; padding: 40px 0 72px; }
main.center { min-height: 100vh; display: grid; align-content: center; justify-items: center; padding: 32px 0; text-align: center; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; font-size: 22px; font-weight: 700; text-decoration: none; }
.brand img { width: 44px; height: 44px; }
.beta { padding: 2px 9px; border-radius: 9px; background: rgba(255, 220, 130, 0.2); color: #ffe6a0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }

.glass {
  margin-top: 24px;
  padding: 28px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(255, 255, 255, 0.12), 0 18px 50px rgba(0, 0, 0, 0.35);
}

h1 { margin: 0 0 10px; font-size: clamp(30px, 6vw, 46px); line-height: 1.12; letter-spacing: -0.01em; }
h2 { margin: 28px 0 6px; font-size: 19px; }
p, li { color: var(--soft); }
ul { padding-left: 20px; }
a { color: #8fe6ff; }

.button { display: inline-block; margin: 14px 8px 0 0; padding: 12px 26px; border-radius: 24px; background: #fff; color: #0d1020; font-weight: 700; text-decoration: none; }
.button:hover { background: #dff6ff; }
.button.ghost { background: rgba(255, 255, 255, 0.12); color: var(--ink); }

.check { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; background: rgba(90, 240, 180, 0.17); color: #9ff5cf; font-size: 42px; box-shadow: 0 0 60px rgba(90, 240, 180, 0.3); }
.ru { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.note { font-size: 14px; }
footer { margin-top: 34px; color: var(--soft); font-size: 14px; }
footer a { margin-right: 14px; }

.field-label { display: block; margin: 16px 0 6px; font-weight: 600; }
.field { width: 100%; max-width: 420px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: rgba(255, 255, 255, 0.1); font: inherit; }
button.button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
ol { padding-left: 20px; }
code { font-size: 13px; }
.hash { display: block; margin-top: 6px; overflow-wrap: anywhere; color: var(--ink); }

.home main { width: min(620px, 100% - 32px); min-height: 100vh; display: flex; flex-direction: column; padding: 28px 0 24px; }
.home .brand { align-self: flex-start; margin-bottom: 22px; }
.hero { margin-top: auto; padding: 44px 32px; text-align: center; animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero h1 { font-size: clamp(34px, 8vw, 52px); }
.lead { margin: 0; font-size: 19px; }
.downloads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.downloads .button { margin: 0; padding: 14px 8px; text-align: center; transition: transform 0.2s ease, background 0.2s ease; }
.downloads .button:hover { transform: translateY(-2px); }
.help { margin: 20px 0 auto; padding: 0 8px; }
details { border-bottom: 1px solid var(--line); }
details:last-child { border-bottom: 0; }
summary { padding: 13px 0; color: var(--soft); font-size: 15px; cursor: pointer; }
summary:hover { color: var(--ink); }
details p { margin: 0 0 14px; font-size: 15px; }
.home footer { margin-top: 28px; padding: 0 8px; text-align: center; }
.home footer a { margin: 0 8px; color: var(--soft); text-decoration: none; }
.home footer a:hover { color: var(--ink); }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 460px) { .downloads { grid-template-columns: 1fr; } .hero { padding: 36px 20px; } }
@media (prefers-reduced-motion: reduce) { .hero { animation: none; } .downloads .button { transition: none; } }