:root {
  color-scheme: dark;
  font-family: Manrope, "Segoe UI", sans-serif;
  color: #f7f2ff;
  background: #0d0915;
  --muted: #bdb1cf;
  --accent: #d6a7ff;
  --line: #d6a6ff38;
  --glass: linear-gradient(145deg, #ddbdff20, #9d73d90a 45%, #7252a61c), #191124a6;
  --glass-shadow: inset 0 1px #eed5ff29, 0 12px 32px #08041045;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  line-height: 1.65;
  background: radial-gradient(ellipse 55rem 35rem at 50% 12rem, #30174b, transparent),
              radial-gradient(ellipse 42rem 60rem at 92% 65%, #25123c, transparent),
              radial-gradient(ellipse 36rem 40rem at 0% 47%, #221539, transparent);
}
a { color: var(--accent); text-underline-offset: .22em; }
a:hover { color: white; }
:focus-visible { outline: 2px solid #e3c3ff; outline-offset: 5px; }
h1, h2, h3, p { margin: 0; }
h2, h3 { line-height: 1.16; }
h2 { font-size: clamp(1.85rem, 4vw, 3.15rem); letter-spacing: -.055em; text-wrap: balance; }
h3 { font-size: clamp(1.17rem, 2vw, 1.55rem); letter-spacing: -.025em; overflow-wrap: anywhere; }
p { color: var(--muted); }
.skip { position: absolute; top: -8rem; left: 1rem; z-index: 3; background: #100b19; padding: .7rem; }
.skip:focus { top: .6rem; }
.shell { width: min(1200px, calc(100% - 56px)); margin-inline: auto; }
.top, .top nav, .brand, .actions, .heading-row, .download, .footer {
  display: flex;
  align-items: center;
}
.top {
  position: sticky;
  top: 12px;
  z-index: 2;
  min-height: 64px;
  margin-block: 16px 20px;
  padding: .45rem .7rem .45rem 1rem;
  justify-content: space-between;
  gap: 1rem;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(155%);
}
.top a, .actions a { text-decoration: none; }
.top nav { justify-content: center; flex-wrap: wrap; gap: .2rem; }
.top nav a { color: #e4d8f0; font-size: .88rem; padding: .42rem .75rem; border-radius: .7rem; }
.top nav a:hover { color: white; background: #ecd9ff18; }
.brand { gap: .65rem; flex-shrink: 0; color: white; }
.wordmark { display: grid; gap: .17rem; font-size: 1.22rem; line-height: 1; font-weight: 800; letter-spacing: .16em; }
.wordmark small { color: var(--accent); font-size: .56rem; letter-spacing: .25em; }
.top-download { color: #f3e5ff; padding: .48rem .95rem; border: 1px solid #d7a6ff55; border-radius: .85rem; background: #bc86ee28; box-shadow: inset 0 1px #fff2; font-size: .88rem; font-weight: 800; }
.top-download:hover { border-color: var(--accent); background: #bc86ee48; }
.hero {
  isolation: isolate;
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(480px, 47vw, 620px);
  border-radius: 1.8rem;
  border: 1px solid #c296f05e;
  background: #140b24;
  box-shadow: inset 0 1px #f4dcff36, 0 25px 80px #06030d81;
  overflow: hidden;
}
.hero-art, .hero::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art { z-index: -2; object-fit: cover; object-position: 72% center; }
.hero::after {
  z-index: -1;
  content: "";
  background: linear-gradient(90deg, #10091dfc, #10091de8 29%, #10091d64 61%, transparent 82%),
              linear-gradient(0deg, #120b22bf, transparent 44%);
}
.hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 1px #f3dcff5c, inset 0 0 26px #dab0ff15;
  pointer-events: none;
  content: "";
}
#main { scroll-margin-top: 88px; }
.hero-inner { padding: clamp(2rem, 6.4vw, 5.2rem); }
.edition { color: #e4bfff; font-weight: 800; font-size: .81rem; letter-spacing: .035em; }
h1 {
  font-size: clamp(2.7rem, 6.45vw, 5.8rem);
  line-height: 1;
  letter-spacing: -.07em;
  margin-block: 1rem 1.15rem;
}
h1 em { color: #d19aff; font-style: normal; }
.intro { font-size: clamp(1rem, 1.7vw, 1.15rem); max-width: 28rem; color: #eee1fa; }
.actions { flex-wrap: wrap; gap: .95rem 1.35rem; margin-top: 1.8rem; }
.button {
  display: inline-block;
  background: linear-gradient(165deg, #e4bfff, #bd82f5 48%, #a665e4);
  color: #1c0e2b;
  border: 1px solid #e2baff;
  border-radius: .95rem;
  padding: .82rem 1.25rem;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  box-shadow: inset 0 1px 1px #fffd, inset 0 -1px 2px #512c7966, 0 8px 26px #aa60fc42;
}
.button:hover { color: #1c0e2b; background: #e4bcff; }
.secondary { color: #efddff; font-size: .9rem; font-weight: 800; }
.secondary:hover { text-decoration: underline; }
.version { margin-top: .9rem; font-size: .8rem; }
.section { padding-top: clamp(3.5rem, 8vw, 6.8rem); scroll-margin-top: 5.25rem; }
.features, .news-grid { display: grid; gap: 1rem; margin-top: 1.6rem; }
.features { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.feature, .news-card, .download {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  box-shadow: var(--glass-shadow);
}
.feature { padding: clamp(1.35rem, 3vw, 2.2rem); }
.feature p, .news-card p, .download p { margin-top: .6rem; }
.feature-main {
  grid-row: span 2;
  min-height: 345px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background: linear-gradient(0deg, #160e25 5%, #160e25e8 31%, #160e2540 73%),
              url("./assets/scene-cozy.jpg") center / cover;
}
.feature-mods { background: radial-gradient(ellipse at 100% 0%, #7440b240, transparent 77%), var(--glass); }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.15rem 0 0; padding: 0; list-style: none; }
.tags li {
  color: #ebd6ff;
  border: 1px solid #d2a1fa4d;
  border-radius: .65rem;
  background: #b273e92b;
  box-shadow: inset 0 1px #eee0ff15;
  padding: .15rem .57rem;
  font-size: .79rem;
}
.heading-row, .download, .footer { justify-content: space-between; gap: 1.15rem; flex-wrap: wrap; }
.heading-row a { font-size: .9rem; }
.news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.live-news:empty { display: none; }
.news-card { overflow: hidden; }
.news-card img { display: block; width: 100%; height: auto; aspect-ratio: 2.65; object-fit: cover; border-bottom: 1px solid var(--line); }
.news-card > div { padding: clamp(1.15rem, 2.5vw, 1.65rem); }
.news-card .meta { margin: 0 0 .5rem; font-size: .8rem; color: var(--accent); }
.news-card a { display: inline-block; margin-top: .8rem; font-size: .9rem; }
.guide { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.15rem 2rem; }
.guide-title p { margin-top: .5rem; }
.guide details { padding: .9rem 1rem; margin-bottom: .55rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--glass); box-shadow: inset 0 1px #fff1; }
.guide details[open] { border-color: #d6a6ff63; }
.guide summary { cursor: pointer; font-weight: 800; padding-inline-start: .3rem; }
.guide summary::marker { color: var(--accent); }
.guide details p { margin: .55rem 0 0 1.25rem; overflow-wrap: anywhere; }
.download {
  padding: clamp(1.5rem, 5vw, 3.5rem);
  background: linear-gradient(150deg, #f2d1ff20, transparent 36%),
              linear-gradient(90deg, #241436, #221134dd 50%, #2712408c),
              #221134 url("./assets/scene-universal.jpg") right center / cover;
  border-color: #54366f;
}
.footer { margin-top: 4rem; border-top: 1px solid var(--line); padding-block: 1.35rem; font-size: .83rem; }

@media (max-width: 760px) {
  .shell { width: calc(100% - 32px); }
  .top { position: relative; top: auto; flex-wrap: wrap; gap: .25rem 1rem; padding: .55rem .65rem; }
  .top nav { justify-content: flex-start; order: 1; width: 100%; }
  .top nav a { padding-inline: .55rem; }
  .section { scroll-margin-top: 1rem; }
  .hero { min-height: 0; align-items: end; border-radius: 1.1rem; }
  .hero-art { object-position: 78% center; }
  .hero::after { background: linear-gradient(0deg, #10091dfc 5%, #10091de8 36%, #10091d20 94%); }
  .hero-inner { padding: clamp(9rem, 35vw, 13rem) 1.2rem 1.65rem; }
  h1 { font-size: clamp(2.1rem, 8.1vw, 4.15rem); }
  .features, .news-grid, .guide { grid-template-columns: 1fr; }
  .feature-main { grid-row: auto; min-height: 240px; }
}
@media (prefers-reduced-motion: no-preference) {
  a { transition: color .18s ease, border-color .18s ease, background-color .18s ease; }
}


/* ── PURP liquid / soft glass refresh ──────────────────────────────────
   Сохраняем прежнюю сетку, иллюстрации и фирменный фиолетовый стиль. */
:root {
  --muted: #c4b7d5;
  --line: #d8baff30;
  --glass: linear-gradient(142deg, #fff9ff14 0%, #caa2ff0d 24%, #7855a718 66%, #fffaff08 100%), #21162eb8;
  --glass-shadow: inset 0 1px 0 #fff7ff35, inset 0 -1px 0 #68478e25, 0 13px 38px #06030c4d;
  --soft-easing: cubic-bezier(.22, 1, .36, 1);
}
html { scroll-behavior: smooth; }
body { min-height: 100vh; overflow-x: clip; }
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: -18%;
  z-index: -1;
  opacity: .55;
  background:
    radial-gradient(ellipse 23% 20% at 13% 30%, #8748cc2e, transparent 100%),
    radial-gradient(ellipse 26% 23% at 80% 68%, #b468d52b, transparent 100%);
  filter: blur(72px);
}
::selection { background: #ab77e8b0; color: #fff; }
.glass-surface { position: relative; }
.top, .feature, .news-card, .download, .guide details {
  border-color: #efdcff32;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}
.glass-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: .4;
  background: radial-gradient(360px circle at var(--pointer-x, 30%) var(--pointer-y, 0%), #f3c8ff1f, transparent 75%);
  transition: opacity .45s ease;
}
.glass-surface:hover::before { opacity: .8; }
.top { z-index: 10; border-radius: 1.4rem; background: linear-gradient(115deg,#3d2750ba,#170e25cf 53%,#342047b9); }
.top::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 1px; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff5a, #d7a5f059, transparent);
  opacity: .75;
}
.top a { position: relative; z-index: 2; }
.top nav a { transition: background .25s ease, color .25s ease, transform .3s var(--soft-easing); }
.top nav a:hover { background: #f2dbff1b; transform: translateY(-1px); }
.top-download {
  background: linear-gradient(155deg, #f8e8ff29, #bb86f53b 55%, #724baf3d);
  border-color: #d5adfa65;
  box-shadow: inset 0 1px #fff5, 0 5px 15px #17062324;
  transition: background .24s ease, transform .3s var(--soft-easing), box-shadow .3s ease;
}
.top-download:hover { transform: translateY(-1px); box-shadow: inset 0 1px #fff6, 0 10px 26px #7e3dbc2c; }

.hero {
  border-color: #d4b0ff61;
  border-radius: 2rem;
  box-shadow: inset 0 1px #fce6ff48, 0 24px 82px #06020e88, 0 0 85px #9a4bff15;
}
.hero::after {
  background: linear-gradient(90deg, #10091dfa 1%, #10091de8 30%, #10091d73 63%, #11092310 94%),
              linear-gradient(0deg, #140921ce, transparent 46%);
}
.hero-inner { position: relative; z-index: 1; }
.edition, .download-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  padding: .42rem .8rem;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .035em;
  color: #efd6ff;
  background: linear-gradient(125deg, #dab8ff26, #b36aea0d);
  border: 1px solid #e1bcff40;
  border-radius: 99rem;
  box-shadow: inset 0 1px #fff2, 0 8px 20px #08031130;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.status-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d7a2ff;
  box-shadow: 0 0 0 3px #d8a7ff19, 0 0 12px #ce90ff9c;
}
h1 em {
  color: #dfb2ff;
  background: linear-gradient(100deg, #f1d5ff, #d9a5ff 43%, #a76bef 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro { color: #efe4f8; }
.version { display: flex; align-items: center; gap: .45rem; color: #cdbbd9; }
.version::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ce9ff7; opacity: .9; }
.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1rem;
  padding: .9rem 1.42rem;
  color: #24112f;
  background: linear-gradient(135deg, #f1d4ff 0%, #d6a1ff 42%, #b774f0 78%, #ab68e2 100%);
  border-color: #f2daff;
  box-shadow: inset 0 1px #fff, inset 0 -1px #8c42c05e, 0 11px 29px #9a4bec5c, 0 0 0 1px #cb9aff2e;
  transition: transform .35s var(--soft-easing), box-shadow .35s ease, filter .35s ease;
}
.button::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: -110%; left: -42%; width: 35%; height: 320%;
  background: linear-gradient(90deg, transparent, #ffffff89, transparent);
  transform: rotate(28deg) translateX(-90%);
  transition: transform .7s var(--soft-easing);
}
.button:hover {
  color: #24112f;
  background: linear-gradient(135deg, #f7e1ff, #dfaaff 46%, #bc7ff2);
  transform: translateY(-3px);
  box-shadow: inset 0 1px #fff, 0 15px 35px #9d4bef85, 0 0 0 1px #efcbff42;
}
.button:hover::before { transform: rotate(28deg) translateX(750%); }
.button:active { transform: translateY(-1px) scale(.99); }
.secondary { transition: color .25s ease, transform .3s var(--soft-easing); }
.secondary:hover { transform: translateX(2px); }

.feature, .news-card {
  overflow: hidden;
  border-radius: 1.6rem;
  transition: transform .4s var(--soft-easing), border-color .35s ease, box-shadow .4s ease;
}
.feature:hover, .news-card:hover {
  transform: translateY(-4px);
  border-color: #ddb8ff70;
  box-shadow: inset 0 1px #fff5, 0 22px 50px #06030c7d, 0 0 28px #bc73fa16;
}
.feature-main { border-color: #d2acff3e; }
.feature-mods {
  background: radial-gradient(ellipse 80% 80% at 105% -5%, #b16bee30, transparent 84%), var(--glass);
}
.tags li {
  background: linear-gradient(145deg, #c397ff27, #7a4caf29);
  border-color: #e1bdf850;
  border-radius: .7rem;
  box-shadow: inset 0 1px #fff2;
}
.section-caption { margin-top: .6rem; font-size: .93rem; }
.history-link { white-space: nowrap; font-weight: 700; text-decoration: none; }
.history-link:hover { text-decoration: underline; }
.news-filters { display: flex; align-items: center; flex-wrap: wrap; gap: .42rem; margin-top: 1.6rem; }
.filter-chip {
  appearance: none;
  cursor: pointer;
  font: 700 .82rem/1.35 Manrope, "Segoe UI", sans-serif;
  color: #ded0eb;
  padding: .54rem 1rem;
  border: 1px solid #d9b4fa36;
  border-radius: 999px;
  background: linear-gradient(130deg, #b37de018, #9274bb12);
  box-shadow: inset 0 1px #fff1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color .25s ease, color .25s ease, background .25s ease, transform .3s var(--soft-easing);
}
.filter-chip:hover { color: white; border-color: #d8acfa87; transform: translateY(-1px); }
.filter-chip.is-active {
  color: #f9edff;
  border-color: #e0b7ff8c;
  background: linear-gradient(140deg, #d79cff55, #a167d23b);
  box-shadow: inset 0 1px #fff4, 0 5px 20px #8a48bd2d;
}
.news-grid { margin-top: .95rem; }
.news-card { background: linear-gradient(140deg, #f1d8ff12, #a16db90a 55%), #21152dd6; }
.news-card img { transition: transform .75s var(--soft-easing), filter .6s ease; }
.news-card:hover img { transform: scale(1.035); filter: saturate(110%); }
.news-card > div { position: relative; z-index: 2; }
.news-card .meta {
  display: inline-flex;
  width: fit-content;
  color: #ead0ff;
  font-size: .75rem;
  padding: .27rem .65rem;
  background: #b07de52c;
  border: 1px solid #e6c7ff3c;
  border-radius: 999px;
  margin-bottom: .8rem;
}
.news-card h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.news-card p:not(.meta) { line-height: 1.65; }
.news-card a { text-decoration: none; font-weight: 800; }
.news-card a:hover { text-decoration: underline; }
.news-loading, .news-empty { min-height: 168px; }
.news-loading { border-style: dashed; }
.news-loading h3 { color: #ead8f6; }
.news-empty { grid-column: 1 / -1; }
.feed-status { margin-top: .95rem; color: #ad9abc; font-size: .78rem; }
.guide details { overflow: hidden; border-radius: 1.05rem; padding: 1rem 1.15rem; transition: background .28s ease, border-color .28s ease; }
.guide details:hover { border-color: #d8acfa65; }
.guide details[open] { background: linear-gradient(145deg, #f4ddff18, #9c69d417), #231630a8; }
.guide details summary { position: relative; z-index: 2; }
.guide details p { position: relative; z-index: 2; }
.download {
  border-radius: 1.8rem;
  border-color: #bc8fe05e;
  box-shadow: inset 0 1px #fbe2ff4a, 0 18px 54px #0904137b;
  gap: 1.5rem 2rem;
}
.download::after { content:""; position:absolute; pointer-events:none; top: 1px; left: 7%; right: 7%; height: 1px; background: linear-gradient(90deg,transparent,#ffe9ff55,transparent); }
.download > * { position: relative; z-index: 2; }
.download .download-eyebrow { margin: 0 0 1.1rem; font-size: .7rem; }
.download h2 { font-size: clamp(1.8rem, 3.3vw, 2.75rem); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .hero { border-radius: 1.5rem; }
  .hero::after { background: linear-gradient(0deg, #10091dfa 4%, #10091de8 39%, #10091d3b 97%); }
  .hero-inner { padding-top: clamp(9rem, 34vw, 12.5rem); }
  .top { border-radius: 1.2rem; }
  .feature, .news-card { border-radius: 1.25rem; }
  .download { border-radius: 1.35rem; }
  .download .button { width: 100%; }
  .news-filters { margin-top: 1.2rem; }
  .edition { font-size: .68rem; }
}
@media (max-width: 420px) {
  .top { column-gap: .45rem; }
  .top-download { padding: .48rem .65rem; }
  .brand { gap: .35rem; }
  .brand img { width: 39px; height: 39px; }
  .wordmark { font-size: 1.05rem; }
  .hero-inner { padding-inline: 1rem; }
  .button { width: 100%; }
  .actions { gap: .95rem; align-items: start; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes liquid-rise { 0% { transform: translate3d(0, 6px, 0); opacity: .0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } }
  .hero-inner { animation: liquid-rise .9s var(--soft-easing) both; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}