.container { position: relative; width: 50vmin; height: 50vmin; margin-left: auto; margin-right: auto; }
svg { width: 100%; height: 100%; display: block; }
.container { position: relative; width: 50vmin; height: 50vmin; margin-left: auto; margin-right: auto; }
svg { width: 100%; height: 100%; display: block; }
/* На главной не даём скролла, остальным страницам — по умолчанию */
html.home { overflow: hidden; }
body.home { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
body { color: #eaeef3; }
.prose { color: #eaeef3; }
.prose h1, .prose h2, .prose h3 { color: #ffffff; }
.prose a { color: #93c5fd; text-decoration: underline; }
.prose code { background: rgba(255,255,255,.06); padding: .2em .4em; border-radius: .3em; }
a { color: #dbeafe; }
a:hover { color: #ffffff; }
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.24); }
.logo { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; transform: translate(-50%, -50%); pointer-events: none; user-select: none; }
.buttons { display: flex; gap: 20px; margin-top: 20px; justify-content: center; flex-wrap: wrap; }
.button { font-family: sans-serif; font-weight: 900; background: linear-gradient(135deg, #ffffff 0%, #99aab5 100%); color: #260b34; padding: 20px 50px; border: none; border-radius: 8px; font-size: 24px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: transform 0.2s, box-shadow 0.2s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.count { font-family: sans-serif; font-weight: 200; color: rgba(255,255,255,0.5); font-size: 14px; margin-top: 15px; text-align: center; }
@media (max-width: 600px) { .container svg { display: none; } .buttons { flex-direction: column; gap: 10px; width: 100%; padding: 0; } .button { width: 90%; margin: 10px auto; padding: 15px 0; display: block; text-align: center; } }

:root { --red: hsla(51, 44%, 68%, 0.493); }
#creature-wrapper { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: -1; }
#creature { font-size: .2vh; display: flex; justify-content: center; align-items: center; width: 150em; height: 150em; flex-wrap: wrap; }
#creature div { transform-style: preserve-3d; position: relative; width: 4em; height: 4em; margin: 3em; border-radius: 2em; will-change: transform; mix-blend-mode: plus-lighter; background: var(--red); }

@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  html, body { cursor: none !important; }
  .box { position: absolute; width: 20px; height: 20px; background: rgba(255,255,255,0.2); border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, background 0.3s ease; }
  .box.arrow { background: url('http://lmgtfy.com/assets/mouse_arrow_windows_aero-b118000dc97d4558d6db021793acc613.png') no-repeat center center; border-radius: 0; }
}

/* Базовые элементы */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));backdrop-filter:blur(8px);transition:.2s ease;user-select:none}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(17,24,39,.14)}
.btn:active{transform:translateY(0)}
.btn-primary{border-color:rgba(99,102,241,.35);background:radial-gradient(120% 120% at 10% 0%,rgba(99,102,241,.35) 0,rgba(99,102,241,.12) 40%,transparent 75%);color:#fff}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.12);color:inherit}
.btn-sm{padding:.5rem .75rem;border-radius:.875rem;font-size:.9rem}

/* Карточка */
.card{border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));backdrop-filter:blur(6px);transition:.2s ease}
.card:hover{box-shadow:0 8px 24px rgba(17,24,39,.12);transform:translateY(-2px)}

/* Бейджи/теги */
.badge{display:inline-flex;align-items:center;padding:.25rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.15);font-size:.75rem;opacity:.9}
.badge-soft{background:rgba(255,255,255,.05)}
.badge-purple{border-color:rgba(99,102,241,.35)}

/* Контент */
.prose img{border-radius:.75rem;border:1px solid rgba(255,255,255,.08)}

/* DEVFOR footer */
.devfor-title{letter-spacing:.35em;opacity:.5}
.devfor-wrap{font-family:'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight:800; font-size:clamp(36px,6vw,72px); line-height:1.1;}
.devfor-link{color:rgba(255,255,255,.7); text-decoration:none; text-shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.3); transition:color .25s ease, text-shadow .25s ease, transform .25s ease}
.devfor-link:hover{color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4), 0 0 24px rgba(147,197,253,.6), 0 8px 28px rgba(0,0,0,.45); transform:translateY(-1px)}
.devfor-hot{color:#fff; text-shadow:0 0 14px rgba(250,204,21,.65), 0 0 36px rgba(250,204,21,.45), 0 12px 30px rgba(0,0,0,.45)}