:root{
  --bg:#fff; --text:#111; --muted:#666; --brand:#8a2c5a; --card:#f6f7f9;
  --radius:12px; --max:1320px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f1115; --text:#f2f2f2; --muted:#a8a8a8; --card:#171a20}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
ul,li{list-style:none;margin:0;padding:0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.content{width:100%;max-width:var(--max);margin:0 auto;padding:0 12px}

.top-menu{
  position:sticky;top:0;z-index:10;background:var(--bg);
  border-bottom:1px solid rgba(0,0,0,.06);height:56px
}
.bar{display:flex;align-items:center;gap:12px;height:56px}
.logo{float:none}
.logo a{display:inline-block;width:40px;height:40px;background-size:24px 24px;background-position:center;background-repeat:no-repeat; border-radius:10px;}

.menu-right{margin-left:auto;height:auto;line-height:normal;float:none;display:flex;gap:8px;flex-wrap:wrap}
.menu-right a{
  display:inline-block;padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:600;
}
.menu-right a:hover{background:var(--card)}

.h1-bar{margin:12px 0;padding:8px 0}
h1{margin:0;font-weight:800;font-size:clamp(18px,2.8vw,28px)}
h2{margin:12px 0 8px;font-weight:700;font-size:clamp(16px,2.2vw,22px)}
p{margin:8px 0}
.infos{
  background:var(--card);color:var(--text);border-radius:var(--radius);
  padding:12px;margin:12px 0
}
.infos a{text-decoration:underline}

.neutral{
  display:grid;gap:12px;margin:0 auto;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.thumbs{
  background:var(--card);border-radius:var(--radius);overflow:hidden;
  transition:transform .12s ease;will-change:transform
}
.thumbs:hover{transform:translateY(-1px)}
.thumbs a{display:block}
.thumbs img{
  width:100%;height:auto;display:block;object-fit:cover;
  aspect-ratio:3/4;
  border-radius:0
}
.h2{
  display:block;padding:10px;font-weight:600;color:var(--text);
  text-shadow:none;max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

.neutral-title{background:transparent;border:0;margin:8px 0;padding:0;color:var(--text)}
.categoryes{background:transparent;margin:0 0 12px 0;padding:0}
.categoryes li{display:inline-block;margin:4px}
.categoryes li a{
  display:inline-block;padding:8px 12px;border-radius:999px;background:var(--card)
}
.categoryes li a:hover{background:rgba(0,0,0,.08)}

.footer{color:var(--muted);background:transparent;border-top:1px solid rgba(0,0,0,.06);padding:20px 0}
.foot{display:flex;gap:12px;justify-content:space-between;align-items:center;margin:0 auto;max-width:var(--max);padding:0 12px}
.footer a{text-decoration:underline}

#scrollBtn{
  width:48px;height:48px;position:fixed;right:12px;bottom:24px;border:0;cursor:pointer;
  border-radius:999px;opacity:.92;box-shadow:0 6px 18px rgba(0,0,0,.18);
  text-indent:-9999px;background:url(/img/vverh.svg) no-repeat center / 56px 56px var(--brand);
}
#scrollBtn:hover{opacity:1}

@media (max-width:480px){
  .menu-right a{padding:8px 10px}
}
@media all and (min-width:1020px){
  .foot{max-width:996px}
}

body, .h1-bar, .neutral-title, .categoryes, .thumbs, .infos, .footer, .top-menu, .menu-right a, .logo a{
  box-shadow:none!important;background-image:none!important
}