/* stylesheet */
:root {
  --clr-bg: hsl(280 22% 13%);
  --clr-surface: hsl(280 20% 17%);
  --clr-surface-2: hsl(280 19% 21%);
  --clr-border: hsl(280 16% 25%);
  --clr-teal: hsl(344 74% 47%);
  --clr-teal-dim: hsl(344 74% 35%);
  --clr-gold: hsl(134 84% 58%);
  --clr-gold-dim: hsl(134 84% 44%);
  --clr-text: hsl(268 30% 93%);
  --clr-text-dim: hsl(266 14% 68%);
  --ff-body: -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--clr-bg); color: var(--clr-text); font-family: var(--ff-body); line-height: 1.65; font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.ew88 { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.yn47 { position: absolute; left: -9999px; }
.yn47:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #16021f; padding: 8px 14px; z-index: 99; }
.yg84u { font-size: .84rem; color: var(--clr-text-dim); }

.ul80 { background: color-mix(in srgb, var(--clr-bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--clr-border); position: sticky; top: 0; z-index: 50; }
.ka11b, .gs76o { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.gs76o { display: flex; align-items: center; gap: 24px; height: 62px; }
.mm18 { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 1.15rem; color: var(--clr-text); }
.qe86z { color: var(--clr-teal); text-shadow: 0 0 12px var(--clr-teal); }
.tg44 { color: var(--clr-teal); }
.cp59v { margin-left: auto; }
.cp59v ul { display: flex; gap: 6px; list-style: none; }
.cp59v a { padding: 8px 14px; border-radius: 99px; text-decoration: none; color: var(--clr-text-dim); font-weight: 700; font-size: .92rem; }
.cp59v a:hover { background: var(--clr-surface-2); color: var(--clr-teal); }
.dj21 { display: none; margin-left: auto; background: none; border: 1px solid var(--clr-border); border-radius: 8px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.xc84, .xc84::before, .xc84::after { content: ''; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--clr-text); }
.xc84 { top: 18px; } .xc84::before { top: -6px; } .xc84::after { top: 6px; }
.cy31y { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.cy31y ul { list-style: none; padding: 6px 0; }
.cy31y a { display: block; padding: 12px 22px; color: var(--clr-text); text-decoration: none; font-weight: 700; }

.oi42 { padding: 50px 0 40px; background:
  radial-gradient(700px 340px at 15% 0%, color-mix(in srgb, var(--clr-teal) 20%, transparent), transparent),
  radial-gradient(700px 340px at 85% 10%, color-mix(in srgb, var(--clr-gold) 12%, transparent), transparent); }
.kc90 { display: inline-block; border: 1px solid var(--clr-teal); color: var(--clr-teal); border-radius: 99px; padding: 4px 14px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 16px; box-shadow: 0 0 16px color-mix(in srgb, var(--clr-teal) 35%, transparent); }
.oi42 h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.12; margin-bottom: 14px; }
.ca56s { color: var(--clr-teal); text-shadow: 0 0 22px color-mix(in srgb, var(--clr-teal) 55%, transparent); }
.tr26s { max-width: 46rem; color: var(--clr-text-dim); font-size: 1.06rem; margin-bottom: 10px; }
.jy93 { font-size: .86rem; color: var(--clr-gold); margin-bottom: 20px; }
.uq76 { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.mv19i { display: inline-block; padding: 12px 24px; border-radius: 99px; font-weight: 800; text-decoration: none; }
.di61 { background: linear-gradient(90deg, var(--clr-teal), var(--clr-teal-dim)); color: #16021f; box-shadow: 0 0 20px color-mix(in srgb, var(--clr-teal) 45%, transparent); }
.di61:hover { filter: brightness(1.12); }
.hk87 { border: 2px solid var(--clr-border); color: var(--clr-text); }
.hk87:hover { border-color: var(--clr-teal); color: var(--clr-teal); }

.gt11r { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px; }
.la92 { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--clr-border); text-decoration: none; transition: .22s; }
.la92:hover { transform: translateY(-4px); border-color: var(--clr-teal); box-shadow: 0 8px 26px color-mix(in srgb, var(--clr-teal) 30%, transparent); }
.la92 img { width: 100%; height: 100%; min-height: 140px; object-fit: cover; }
.jb96 { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; background: linear-gradient(transparent, rgba(10, 2, 18, .92)); color: #fff; font-weight: 800; }
.la92.xv18 .jb96 { font-size: 1.15rem; }

.jx43r { padding: 46px 0; }
.lm67u { background: var(--clr-surface); border-block: 1px solid var(--clr-border); }
.wi68 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.35rem, 2.7vw, 1.8rem); margin-bottom: 18px; }
.bv16 { color: var(--clr-teal); text-shadow: 0 0 14px var(--clr-teal); font-size: .9em; }
.jx43r h3 { margin: 24px 0 10px; font-size: 1.15rem; color: var(--clr-teal); }
.jx43r h4 { margin: 18px 0 8px; }
.jx43r p { margin-bottom: 13px; }
.jx43r ul, .jx43r ol { margin: 0 0 15px 22px; }
.jx43r li { margin-bottom: 7px; }
.bn82 { display: grid; grid-template-columns: 1fr 190px; gap: 24px; align-items: start; }
.dr41 { background: var(--clr-surface-2); border: 1px solid var(--clr-teal); border-radius: 14px; text-align: center; padding: 22px 12px; box-shadow: inset 0 0 26px color-mix(in srgb, var(--clr-teal) 16%, transparent); }
.az53 { font-size: 3rem; font-weight: 900; color: var(--clr-teal); text-shadow: 0 0 18px color-mix(in srgb, var(--clr-teal) 60%, transparent); }
.az53.qc47 { font-size: 2rem; }
.op53 { color: var(--clr-text-dim); }
.co86 { font-weight: 800; margin-top: 6px; }
.kw27q { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0; }
.vt85g { background: var(--clr-surface-2); border: 1px solid color-mix(in srgb, var(--clr-teal) 45%, var(--clr-border)); border-radius: 12px; padding: 12px 16px; margin: 14px 0; font-size: .95rem; }
.vt85g.pp33v { border-color: color-mix(in srgb, var(--clr-gold) 45%, var(--clr-border)); }
.lj33 { border: 1px dashed var(--clr-teal); border-radius: 12px; padding: 16px; margin: 16px 0; }
.kx66 { list-style: none; margin-left: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.kx66 li { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 99px; padding: 6px 14px; margin: 0 !important; font-size: .92rem; }
.fe49t, .ew63 { list-style: none; margin-left: 0 !important; }
.fe49t li, .ew63 li { padding-left: 24px; position: relative; }
.fe49t li::before { content: '✓'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 900; }
.ew63 li::before { content: '✕'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 900; }
.ye62 { margin-left: 22px; }
.ye62 li { margin-bottom: 10px; }
.ye62 b { color: var(--clr-teal); }
.ua25 { background: var(--clr-surface-2); border: 1px solid var(--clr-teal); border-radius: 14px; padding: 24px; box-shadow: 0 0 30px color-mix(in srgb, var(--clr-teal) 20%, transparent); }

.wn53d { overflow-x: auto; border: 1px solid var(--clr-border); border-radius: 12px; margin: 14px 0; }
.td73 { width: 100%; border-collapse: collapse; min-width: 500px; font-size: .95rem; }
.td73 th, .td73 td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--clr-border); }
.td73 thead th { background: var(--clr-surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-teal); }
.td73 tbody tr:last-child td, .td73 tbody tr:last-child th { border-bottom: 0; }
.td73 th[scope="row"] { color: var(--clr-text-dim); font-weight: 600; width: 40%; }
.oc37n { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: .76rem; font-weight: 800; }
.yh14 { background: color-mix(in srgb, var(--clr-gold) 22%, transparent); color: var(--clr-gold); }
.vn49 { background: color-mix(in srgb, var(--clr-teal) 22%, transparent); color: var(--clr-teal); }

.jf84 { display: grid; gap: 10px; }
.rb73r { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 12px; }
.zs75n { width: 100%; text-align: left; background: none; border: 0; color: var(--clr-text); font: inherit; font-weight: 800; padding: 15px 48px 15px 18px; cursor: pointer; position: relative; }
.yz44 { position: absolute; right: 18px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.yz44::before, .yz44::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.yz44::before { left: 0; right: 0; top: 5px; height: 2px; }
.yz44::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.zs75n[aria-expanded="true"] .yz44::after { transform: scaleY(0); }
.aw71 { padding: 0 18px 15px; color: var(--clr-text-dim); }

.mh97q { border-top: 1px solid var(--clr-border); background: var(--clr-surface); padding: 34px 0 24px; font-size: .9rem; }
.mw93 { margin-bottom: 12px; }
.uh12 { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.fg76s { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 8px; padding: 2px 9px; font-weight: 800; }
.ba15 { color: var(--clr-text-dim); }
.bs64o ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.bs64o a { color: var(--clr-text-dim); text-decoration: none; }
.bs64o a:hover { color: var(--clr-teal); }
.ne33a, .ue58 { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

.ig46 { padding: 42px 0; }
.na44r { margin: 0 auto; padding: 0 22px; }
.ua31f ol { display: flex; gap: 8px; list-style: none; font-size: .85rem; color: var(--clr-text-dim); margin-bottom: 17px; }
.ua31f li + li::before { content: '·'; margin-right: 8px; }
.le21 { font-size: clamp(1.55rem, 3.3vw, 2.2rem); margin-bottom: 11px; }
.ng62 { color: var(--clr-text-dim); font-size: .88rem; margin-bottom: 20px; }
.oi47 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 21px; margin-bottom: 15px; }
.oi47 h2 { margin-bottom: 9px; font-size: 1.22rem; color: var(--clr-teal); }
.oi47 p { margin-bottom: 11px; }
.oi47 ul, .oi47 ol { margin: 0 0 11px 21px; }
.vh50 { overflow-x: auto; }
.dj37 { font-size: .83rem; color: var(--clr-text-dim); margin-top: 9px; }
.ib92 label { display: block; font-weight: 700; margin-bottom: 6px; }
.ib92 .ld96y { margin-bottom: 15px; }
.ib92 input, .ib92 select, .ib92 textarea { width: 100%; background: var(--clr-surface-2); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 10px; padding: 11px 13px; font: inherit; }
.ib92 textarea { min-height: 135px; }
.sy33 { font-size: .83rem; color: var(--clr-text-dim); }

@media (max-width: 900px) {
  .cp59v { display: none; }
  .dj21 { display: block; }
  .gt11r { grid-template-columns: 1fr 1fr; }
  .la92.xv18 { grid-column: 1 / -1; }
  .bn82, .kw27q { grid-template-columns: 1fr; }
}

.lp65 { padding: 46px 0; background: var(--clr-surface); border-block: 1px solid var(--clr-border); }
.ba66 { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.ba66 h2 { font-size: clamp(1.35rem, 2.7vw, 1.8rem); margin-bottom: 18px; }
.ba66 h2::before { content: '◆ '; color: var(--clr-teal); text-shadow: 0 0 14px var(--clr-teal); }
.ba66 p { margin-bottom: 13px; }
.ba66 ul { margin: 0 0 15px 22px; }
.ba66 li { margin-bottom: 7px; }

/* inner-page layout variants */
.eu17 { max-width: 900px; }
.bj33 { margin-bottom: 26px; }
.bj33 h2 { margin-bottom: 10px; }
.yo32y { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.yo32y .ua31f, .yo32y .le21 { grid-column: 1 / -1; }
.yo61 { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.rg36v { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.jv91e { font-weight: 700; }
.wz76 { max-width: 700px; }
.wz76 .oi47 { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .yo32y { grid-template-columns: 1fr; }
  .yo61 { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

.te89 { list-style: none; margin: 0 !important; padding: 0; display: grid; gap: 8px; }
.si84 { padding-left: 0; font-size: .95rem; }
.si84 time { font-weight: 700; color: var(--clr-teal); margin-right: 6px; }

/* conversion hero */
.rk75 { padding: 30px 0 6px; }
.qu52 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; }
.rk75.cv-solo .qu52 { display: block; }
.av26 { font-size: clamp(1.25rem, 2.5vw, 1.7rem); line-height: 1.2; margin-bottom: 14px; }
.pw43 { list-style: none; margin: 0 0 18px !important; padding: 0; display: grid; gap: 9px; }
.pw43 li { position: relative; padding-left: 30px; font-size: 1.02rem; font-weight: 600; }
.pw43 li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--clr-teal); color: var(--clr-bg); font-size: .78rem; font-weight: 900; display: grid; place-items: center; }
.of38q { font-size: 1.04rem; padding: 13px 28px; }
.qj26 { font-size: .82rem; color: var(--clr-text-dim); margin-top: 10px; }
.zw83 { border-radius: 14px; overflow: hidden; border: 1px solid var(--clr-border); margin: 0; }
.zw83 img { width: 100%; height: auto; display: block; }

/* author */
.at22 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.yk50 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.kc38 { color: var(--clr-text-dim); }
.ci34 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.fm66h { display: flex; gap: 20px; align-items: flex-start; }
.lo57 { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.ng68w h2 { font-size: 1.2rem; margin-bottom: 8px; }
.dd40 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.ng68w p { margin-bottom: 10px; }

@media (max-width: 860px) {
  .qu52 { grid-template-columns: 1fr; }
  .fm66h { flex-direction: column; }
}

/* открытое верхнее меню на узких экранах — запасной путь, если панель #mobile-menu недоступна */
@media (max-width: 1000px) {
  .cp59v.ri99 { display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); z-index: 60; }
  .cp59v.ri99 ul { flex-direction: column; gap: 0; }
  .cp59v.ri99 a { display: block; padding: 12px 20px; }
}

h1, h2, h3 { font-family: 'Palatino Linotype', Palatino, Georgia, serif; }

/* extras.tw21 — appended to the theme stylesheet at build time and renamed with
   the rest of the classes. Only theme variables are used, so the block inherits
   whatever palette and mode the site got. */

/* ── ranked shortlist (rating mode) ─────────────────────────────────────── */
.xg10e { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.ng64w { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.xg10e h2 { margin: 0 0 .75rem; }
.sl53 { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.sl53 li { margin: .35rem 0; }
.aa60 { display: grid; gap: 1rem; }
.rj39 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.rw69a {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.gb79q { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.zb18 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.rw69a .zb18 { background: var(--clr-teal); color: var(--clr-bg); }
.ru38 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.jx41e { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.rj39 p { margin: .5rem 0; }
.pk58d { font-size: .95rem; opacity: .8; }
.pu78u { margin-top: .9rem; }
.kh72d { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

/* ── affiliate disclosure ───────────────────────────────────────────────── */
.sa62b {
  margin: 0 0 .75rem;
  font-size: .85rem;
  opacity: .75;
}

@media (max-width: 640px) {
  .gb79q { flex-wrap: wrap; }
  .ru38 { flex: 1 1 60%; }
}

/* ── 404 page ───────────────────────────────────────────────────────────── */
.mb71 {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--ff-body);
  margin: 0;
}
.ey83 {
  max-width: 560px;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.ho99o {
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  color: var(--clr-teal);
  letter-spacing: .05em;
}
.nb97s { margin: 0 0 1rem; font-size: 1.5rem; }
.ey83 p { margin: .6rem 0; opacity: .9; }
.ff45 { margin-top: 1.75rem; }

/* ── fallback figure, used when a theme renders no picture of its own ────── */
.ta12 { margin: 1.5rem 0; }
.ta12 img { width: 100%; height: auto; border-radius: 10px; display: block; }
.zw81 { margin: 1.5rem 0; }
.zw81 img { width: 100%; height: auto; border-radius: 8px; display: block; }

/* ── brand hero, added when the theme shows it only in og:image ──────────── */
.sb65a { margin: 0 0 1.75rem; }
.sb65a img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.yk47, .ie77h { margin: 1.5rem 0; }
.yk47 img, .ie77h img,
.dz90.fig img, .bi85 img, .fr50 img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.xt54y { padding: 1.5rem 0 3rem; }
.xd60 { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.rp50k { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.xt54y h1 { margin: 0 0 1rem; line-height: 1.2; }
.oy91z { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.oy91z img { width: 100%; height: auto; display: block; border-radius: 12px; }
.fv16t { max-width: 1100px; }
.og63 { max-width: 780px; }
.kx80h p, .yu31o p { font-size: 1.05rem; }
.yu31o {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.xd16j { font-size: .9rem; opacity: .8; }
.dt38 { margin: 1.75rem 0; }
.ma22 { font-weight: 700; margin: 0 0 .5rem; }
.dt38 ol { margin: 0; padding-left: 1.2rem; }
.dt38 li { margin: .3rem 0; }
.en20 ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.en20 li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.ee13l { padding: 1.5rem 0; }
.ee13l + .ee13l { border-top: 1px solid var(--clr-border); }
.ee13l h2 { margin: 0 0 .75rem; }
.xt91s {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.og67l {
  margin: 2rem 0; padding: 1.75rem 0;
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-teal);
  border-bottom: 1px solid var(--clr-teal);
}
.kk90s { display: block; margin: 0 0 1rem; }
.kk90s img { width: 100%; height: auto; border-radius: 10px; display: block; }
.tm71u { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.hs88 { font-size: 1.3rem; font-weight: 700; }
.ed90w { font-weight: 700; color: var(--clr-gold); }
.hs47 { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.hs47 li { margin: .35rem 0; }
.cg68 { padding-left: 1.1rem; }
.qd71d { margin: 1rem 0 .5rem; }
.nk29, .wk69 { font-size: .9rem; opacity: .8; }
.wk69 { margin-top: 2rem; }
.zp57s { display: block; }

/* structural hooks of the article layouts — no visual rules of their own, but
   they must exist in the stylesheet so the renamer covers them like everything else */
.gq66 { min-height: 100vh; }
.uv14, .ds44, .lk19x { display: block; }
.cn22h, .ox84 { display: block; }
.xp83b ol { list-style: decimal; }